/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ==================================================================
【Access】ヘッダー下の文章
================================================================== */
.access-intro-text-1 {
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 20px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  max-width: 1125px;       
  margin: 100px auto 60px;    
  font-size: 14px;
  line-height: 1.6;

  text-align: center;

  opacity: 0;
  transition: opacity 2s ease;

}

/* 表示状態 */
.access-intro-text-1.show {
  opacity: 1;
}

.access-intro-text-1 h2 {
  font-size: 25px;
  margin: 10px 0px 20px 0px;
  color: #5C4433;
}

.access-intro-text-1 p {
  margin: 6px 0;
}
@media (max-width: 768px) {
  .access-intro-text-1 {
    position: relative;
    top: -90px;
    width: 90%; 
    margin: 130px auto 0px;
  }
  .access-intro-text-1 h2 {
    font-size: 18px;
  }
}
@media (min-width: 769px) {
  .access-intro-text-1 {
    position: relative;
    top: -30px;
    width: 800px; 
  }
}





/* ==================================================================
【Access】ヘッダー下の文章
================================================================== */
.access-map-modern {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.access-map-modern iframe {
  width: 100%;
  height: 450px;
  border: none;
  display: block;
  max-width: 100%;
  margin: 0;
}








/* =========================
   全体ラッパー
========================= */
.access-map-bg {
  /* background-color: #f7f6f5; */   /* パールホワイト  */
  /* background-color: #f5f4ef; */
  background-color: #f5f4ef;
  width: 100%;
  padding: 80px 0px;

  opacity: 0;
  transform: translateY(60px);
  transition: 
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);

}

/* 表示時 */
.access-map-bg.show {
  opacity: 1;
  transform: translateY(0);
}


.access-map-wrapper {
  display: flex;
  gap: 40px;
  max-width: 1300px;   /* ←中央寄せの幅 */
  margin: 0 auto;      /* ←これが超重要（中央配置） */
  padding: 0 20px;
  box-sizing: border-box;
}


/* =========================
   左：マップ
========================= */
.access-map-left {
  flex: 0 0 60%;
}




/* =========================
   右：情報
========================= */
.access-map-right {
  flex: 0 0 40%;
  font-size: 14px;
  line-height: 1.8;
  padding-top: 50px;
}





/* =========================
   スマホ
========================= */
@media (max-width: 768px) {
  .access-map-wrapper {
    flex-direction: column; /* ←縦並び */
  }
  .access-map-left,
  .access-map-right {
    flex: 1 1 100%;
  }
  .access-map-modern iframe {
    height: 300px;
  }
}








.access-map-logo {
  width: 180px;
  margin: 0 auto 15px;  /* ←中央配置 */
  display: block;
  margin-bottom: 20px;
}


.access-info-row {
  display: flex;
  margin-bottom: 8px;
  padding-top: 25px;
  padding-bottom: 20px;
  /* padding: 20px; */
  border-top: 1px solid #ccc;        /* ←横線 */
}


.access-info-row .label {
  width: 100px;       /* ←ここで揃う */
  font-weight: normal;
}

.access-info-row .value {
  flex: 1;
}


.access-info-row:last-child {
  border-bottom: 1px solid #ccc;
  padding-bottom: 25px; /* 線との間隔 */
}




/* 交通手段のご案内（見出し） */
.access-detail-1 {
  max-width: 1125px;
  margin: 155px auto 95px;
  text-align: center;
  font-weight: bold;
}
.access-detail-1 p {
  font-size: 28px; 
}




/* 路線バスの場合 ブロック */
.access-detail-2 {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;              /* ← これが超重要 */
  /* --transport-line-right: 888px; */        /* 右端（共通） */
  --transport-line-right: 720px;        /* 右端（共通） */
  --transport-line-left-head: -200px;   /* 上線の左端 */
  transform: translateX(200px); 



}



/* 交通手段タイトル（アイコン＋文字） */
.access-transport-title {
  display: flex;
  align-items: center;
  gap: 10px;              /* アイコンと文字の間隔 */
  margin-bottom: 18px;
}




/* バスアイコン */
.transport-icon {
  width: 26px;            /* ← アイコンサイズ */
  height: auto;
}



/* タイトル文字 */
.access-transport-title span {
  /* font-size: 18px; */
  font-weight: 500;
  letter-spacing: 1px;
}




/* 路線バス案内 本文テキスト */
.access-detail-2 p {
  font-size: 14px;    /* ← 文字サイズ */
  line-height: 1.4;   /* ← 行間 */
  margin: 6px 0;      /* ← 段落同士の間隔 */
}




/* 見出し全体（横並び） */
.access-transport-head {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 18px;
  position: relative; /* ← 疑似要素用（重要） */
}




/* 見出しの上に区切り線 */
.access-transport-head::before {
  content: "";
  position: absolute;
  top: -30px;
  left: var(--transport-line-left-head);
  width: calc(var(--transport-line-right) - var(--transport-line-left-head));
  height: 3px;
  /* background: rgba(0,0,0,0.25); */
  background: rgba(0,0,0,0);
  z-index: 0; /* 背景より下 */
}





/* 共通（アイコン＋文字） */
.access-transport-item {
  display: flex;
  align-items: center;
  gap: 8px;
}




/* 🚆 列車：さらに左 */
.access-transport-item.train {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: -200px;
  width: calc(100% - 100px);
  /* background-color: rgba(150, 150, 150, 0.3); */
  /* background-color: rgba(173, 216, 230, 0.3); */
  background-color: #e9e7de;
  padding: 6px 12px;
  border-radius: 0px;
  position: relative; /* 横棒と同じ位置に重ねる場合に必要 */
  z-index: 1; /* 背景が上 */
}





.access-transport-head {
  display: block;
}



.access-train-body {
  max-width: 1000px;       /* 右側の本文幅 */
  font-size: 14px;
  line-height: 1.6;

  padding: 6px 30px;
  width: calc(100% - 310px); /* タイトル行幅に揃える */
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* 🚌 バス：本文と揃える */
.access-transport-item.bus {
  margin-left: 0;       /* ← access-detail-2 と同じ開始位置 */
}






/* 四国交通 時刻表リンク（余白調整・最終版） */
.access-detail-2 p.access-timetable-link {
  margin-top: 15px;      /* ← 上の余白 */
  font-size: 14px;
  position: relative;
}







.access-timetable-link a {
  color: #222;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}



/* 文字部分だけ常に下線 */
.access-timetable-link .link-text {
  text-decoration: underline;
}



.access-timetable-link a:hover {
  opacity: 1;
}




/* 下側の区切り線 */
.access-timetable-link::after {
  content: "";
  position: absolute;
  top: calc(100% + 30px);
  left: 0;  /* 左端はそのまま */
  width: calc(var(--transport-line-right) - 30px); 
  height: 1px;
  background: rgba(0,0,0,0.25);
}
@media (max-width: 768px) {
  .access-timetable-link::after {
    width: calc(100% - 10px); 
  }
}




/* ==============================
   タクシー案内ブロック
============================== */
.access-taxi-block {
  margin-top: 60px;   /* ← 四国交通時刻表の下線との距離 */
  margin-left: 30px; /* 好きな距離に調整 */
  position: relative;
  border-left: none;
  padding-left: 20px;
}



/* タイトル */
.access-transport-title.taxi {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* background-color: rgba(200, 200, 200, 0.3); */
  /* background: rgba(245, 215, 140, 0.3); */
  background-color: #f7ecd6;
  padding: 6px 12px;
  border-radius: 0;
  position: relative;
  z-index: 1;
  box-sizing: border-box; /* padding込みで幅計算 */
  margin-left: 0;         /* デフォルトは左寄せ */
}



/* 本文 */
.access-taxi-block p {
  font-size: 14px;
  line-height: 1.5;
  margin: 6px 0;
}


/* タクシー会社リンク（余白調整・最終版） */
.access-detail-2 p.access-taxi-links {
  margin-top: 15px;      /* ← 上の余白 */
  font-size: 14px;
  position: relative;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}


.access-taxi-links a {
  color: #222;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.2s;
}


/* 文字部分だけ常に下線 */
.access-taxi-links .link-text {
  text-decoration: underline;
}


.access-taxi-links a:hover {
  opacity: 1;
}



/* 交通手段 見出し文字（共通） */
.access-transport-item span,
.access-transport-title span {
  font-size: 18px;   /* ← タクシーと同じサイズに揃える */
  font-weight: 500;
  letter-spacing: 1px;
}



/* ==============================
   車でお越しの方案内ブロック
============================== */
/* お車でお越しの方 ブロック */
.access-car-block {
  margin-top: 60px;   /* 前のタクシーブロックの下線からの距離 */
  position: relative;  /* 下線などを追加する場合に必要 */
  display: flex;          /* タイトルと本文を横並び */
  align-items: flex-start;
  gap: 40px;              /* タイトルと本文の間隔 */
  margin-bottom: 225px;  /* ← 好きな距離に調整 */
  padding-top: 30px; /* 上の空間を広げる */
}




/* お車でお越しの方 タイトル */
.access-transport-title.car {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: -200px;  /* 列車タイトルと同じ左位置 */
  margin-bottom: 0;
  flex-shrink: 0;         /* 左側を固定幅に */
  width: calc(100% - 100px);
  /* background-color: rgba(150, 150, 150, 0.3); */
  /* background-color: rgba(173, 216, 230, 0.3); */
  background-color: #e9e7de;
  padding: 6px 12px;
  border-radius: 0;
  position: relative;
  z-index: 1;
}



/* タイトルアイコン */
.access-transport-title.car .transport-icon {
  width: 26px;   /* 列車と同じサイズ */
  height: auto;
}




/* 本文 */
.access-car-body {
  max-width: 1000px;       /* 右側の本文幅 */
  font-size: 14px;
  line-height: 1.6;

  margin-left: -740px;      /* タイトル行に合わせて左位置を揃える */
  width: calc(100% - 310px); /* タイトル行幅に揃える */
  padding: 6px 12px;
}



/* 駐車場案内の行 */
.access-car-body p.parking-info {
  margin-bottom: 15px; /* 下の余白も調整可 */
}


/* 冬季注意の行 */
.access-car-body p.winter-note1 {
  margin-bottom: 15px;
}


/* 冬季注意の行 */
.access-car-body p.winter-note2 {
  margin-bottom: 15px;
}






/* ==============================
   冬季注意ブロック
============================== */
.winter-warning-block {
  margin-top: 18px;
  padding: 18px 22px 18px 22px;
  border: none;
  background: #fff4f4;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #ffcccc;
}


.winter-warning-block p {
  margin: 6px 0;
  line-height: 1.5;
}



.winter-warning-block p:first-child {
  font-weight: 800;
}




/* お車でお越しの方ブロックの下に区切り線 */
.access-car-block::before {
  content: "";
  position: absolute;
  height: 3px;
  background: rgba(0,0,0,0.25);
  z-index: 0;
    top: -5px;
  left: var(--transport-line-left-head);
  width: calc(var(--transport-line-right) - var(--transport-line-left-head));
}




.access-car-block .access-timetable-link::after {
  display: none;
}



/* ================================
   ACCESS スマホ完全修正
================================ */
@media (max-width: 768px) {

  /* 全体のズレをリセット */
  .access-detail-2 {
    transform: none;        /* ← 横ズレ解除 */
    margin: 0 auto;
    padding: 0 20px;
  }

  /* 見出し（列車・バス）を縦並びに */
  .access-transport-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }



  /* 左に飛び出しているのを修正 */
  .access-transport-item.train,
  .access-transport-item.bus {
    margin-left: 0;
  }



  /* 本文のズレ調整 */
  .access-bus-body {
    margin-left: 0;
  }



  /* タクシーブロック */
  .access-taxi-block {
    margin-left: 10px;   /* ← 同じだけズラす */
    border-left: 3px solid rgba(0,0,0,0.25);
    padding-left: 15px;
  }



  /* 車ブロックを縦並びに */
  .access-car-block {
    flex-direction: column;
    margin-top: 40px;
    gap: 10px;
  }





  .access-transport-title.car {
    margin-left: 0;
  }


}





/* ================================
   ACCESS スマホ階層デザイン改善
================================ */
@media (max-width: 768px) {

  .access-train-body {
    width: calc(100% - 20px);  /* 画面幅に少し余裕 */
    margin-left: -20px;
    margin-right: 0;
  }



  .access-car-body {
    margin-left: 0;
    margin-top: 0; /* スマホはタイトルに近づける */
  }

  /* ===== 区切り線はシンプルに残す ===== */
  .access-transport-head::before {
    left: 0;
    width: calc(100% - 0px);   /* 横棒も画面幅に合わせる */
    top: -40px;  /* 元は -30px になっていたので、-40pxで10px上に寄せる */
  }


  /* 路線バスのタイトルもインデント */
  .access-transport-item.bus {
    margin-left: 20px;
  }

}



/* =========================
   バスブロック（タクシーと同じ構造）
========================= */
.access-bus-block {
  margin-left: 30px;   /* ← インデント */
  position: relative;
}


/* タイトル位置調整 */
.access-transport-title.bus {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* background-color: rgba(200, 200, 200, 0.3); */
  /* background: rgba(245, 215, 140, 0.3); */
  background-color: #f7ecd6;
  padding: 6px 12px;
  border-radius: 0;
  position: relative;
  z-index: 1;
  box-sizing: border-box; /* padding込みで幅計算 */
  margin-left: 0;         /* デフォルトは左寄せ */
}


.access-bus-block,
.access-taxi-block {
  margin-left: 15px;
  padding-left: 15px;
}





@media (max-width: 768px) {
  .access-bus-block::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,0,0,0.25);
  }

  .access-car-block::before {
    left: 0;        /* 左端を画面に合わせる */
    width: 100%;    /* 画面幅いっぱいにする */
  }

  /* バスブロックの縦線も同じ太さに */
  .access-bus-block {
    border-left: 3px solid rgba(0,0,0,0.25);
    padding-left: 15px;
  }
}






/* 下線（元々の下線を維持） */
.access-car-block::after {
  content: "";
  position: absolute;
  top: calc(100% + 30px); /* ブロック下部に配置 */
  left: var(--transport-line-left-head);
  width: calc(var(--transport-line-right) - var(--transport-line-left-head));
  height: 3px;
  /* background: rgba(0,0,0,0.25); */
  background: rgba(0,0,0,0.25);
  z-index: 0;
}





/* スマホ対応 */
@media (max-width: 768px) {
  .access-car-block::before,
  .access-car-block::after {
    left: 0;
    width: 100%;
  }
}



/* お車でお越しの方ブロックの上線・下線 */
.access-car-block::before,
.access-car-block::after {
  content: "";
  position: absolute;
  height: 3px;
  /* background: rgba(0,0,0,0.25); */
  background: rgba(0,0,0,0);
}




/* PC画面（768px以上）で本文を下にずらす */
@media (min-width: 769px) {
  .access-car-body {
    margin-top: 40px; /* PC画面だけ本文を下げる */
  }
}




@media (max-width: 768px) {
  .access-transport-item.train {
    width: calc(100% - 20px);  /* 画面幅に少し余裕を持たせる */
    margin-left: 0px;          /* 左右に少し余白 */
    margin-right: 0px;
  }

  .access-transport-title.car,
  .access-car-body {
    width: calc(100% - 20px);  /* 画面幅に少し余裕 */
    margin-left: 0;
    margin-right: 0;
  }

  .access-transport-title.car::before {
    left: 0;
    width: 100%;
  }

}



/* PC用 */
@media (min-width: 769px) {
  .access-transport-title.bus {
    width: calc(100% - 275px);  /* 横棒に合わせる */
  }
}



/* スマホ用 */
@media (max-width: 768px) {
  .access-transport-title.bus {
    width: 100%;                /* 画面幅いっぱいに */
    margin-left: 0;
    margin-right: 0;
  }



  .access-transport-title.bus::before {
    left: 0;
    width: 100%;
  }
}




/* PC用 */
@media (min-width: 769px) {
  .access-transport-title.taxi {
    width: calc(100% - 275px);  /* 横棒に合わせる */
  }
}



/* スマホ用 */
@media (max-width: 768px) {
  .access-transport-title.taxi {
    width: 100%;                /* 画面幅いっぱいに */
    margin-left: 0;
    margin-right: 0;
  }

  .access-transport-title.taxi::before {
    left: 0;
    width: 100%;
  }
}




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* =========================
   タブレット
========================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .access-map-left,
  .access-map-right {
    flex: 1 1 100%;
  }
  .access-timetable-link::after {
    width: calc(100% - 10px); 
  }
  /* 全体のズレをリセット */
  .access-detail-2 {
    transform: none;        /* ← 横ズレ解除 */
    margin: 0 auto;
    padding: 0 20px;
  }
  /* 見出し（列車・バス）を縦並びに */
  .access-transport-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* 左に飛び出しているのを修正 */
  .access-transport-item.train,
  .access-transport-item.bus {
    margin-left: 0;
  }
  /* 本文のズレ調整 */
  .access-bus-body {
    margin-left: 0;
  }
  /* タクシーブロック */
  .access-taxi-block {
    margin-left: 10px;   /* ← 同じだけズラす */
    border-left: 3px solid rgba(0,0,0,0.25);
    padding-left: 15px;
  }
  /* 車ブロックを縦並びに */
  .access-car-block {
    flex-direction: column;
    margin-top: 40px;
    gap: 10px;
  }
  .access-transport-title.car {
    margin-left: 0;
  }
  .access-train-body {
    width: calc(100% - 20px);  /* 画面幅に少し余裕 */
    margin-left: -20px;
    margin-right: 0;
  }
  .access-car-body {
    margin-left: 0;
    margin-top: 0; /* スマホはタイトルに近づける */
  }
  /* ===== 区切り線はシンプルに残す ===== */
  .access-transport-head::before {
    left: 0;
    width: calc(100% - 0px);   /* 横棒も画面幅に合わせる */
    top: -40px;  /* 元は -30px になっていたので、-40pxで10px上に寄せる */
  }
  /* 路線バスのタイトルもインデント */
  .access-transport-item.bus {
    margin-left: 20px;
  }
  .access-bus-block::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,0,0,0.25);
  }
  .access-car-block::before {
    left: 0;        /* 左端を画面に合わせる */
    width: 100%;    /* 画面幅いっぱいにする */
  }
  /* バスブロックの縦線も同じ太さに */
  .access-bus-block {
    border-left: 3px solid rgba(0,0,0,0.25);
    padding-left: 15px;
  }
  .access-car-block::before,
  .access-car-block::after {
    left: 0;
    width: 100%;
  }
  .access-transport-item.train {
    width: calc(100% - 20px);  /* 画面幅に少し余裕を持たせる */
    margin-left: 0px;          /* 左右に少し余白 */
    margin-right: 0px;
  }
  .access-transport-title.car,
  .access-car-body {
    width: calc(100% - 20px);  /* 画面幅に少し余裕 */
    margin-left: 0;
    margin-right: 0;
  }
  .access-transport-title.car::before {
    left: 0;
    width: 100%;
  }
  .access-transport-title.bus {
    width: 100%;                /* 画面幅いっぱいに */
    margin-left: 0;
    margin-right: 0;
  }
  .access-transport-title.bus::before {
    left: 0;
    width: 100%;
  }
  .access-transport-title.taxi {
    width: 100%;                /* 画面幅いっぱいに */
    margin-left: 0;
    margin-right: 0;
  }
  .access-transport-title.taxi::before {
    left: 0;
    width: 100%;
  }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* =========================
   パソコン
========================= */
@media (min-width: 769px) {
  .access-bus-body {
    width: 700px;

  }
  .access-taxi-body {
    width: 700px;
  }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */