/*--------------------------------------------------------------------
	access.css
	周辺観光・アクセスページ（access.html）専用の追加スタイル
	共通CSS（reset/basis/structure/parts/dark-theme）で足りない
	最小限のページ固有スタイルのみをここに記述する。
--------------------------------------------------------------------*/

/* ---- クリーム背景セクション（上から奇数番目：location/navApp/winterDrive/faq） ---- */
#wrapper01 #location, #wrapper01 #navApp, #wrapper01 #winterDrive,
#wrapper01 #faq {
  background-color: #E8E2D3 !important;
}

#location h2.mincho, #location h3, #navApp h2.mincho, #navApp h3,
#winterDrive h2.mincho, #winterDrive h3, #faq h2.mincho, #faq h3 {
  color: #2b2620 !important;
}

#location .fcGray02, #navApp .fcGray02, #winterDrive .fcGray02,
#faq .fcGray02 {
  color: #6b6355 !important;
}

#location .fcBrown02, #location .fcBrown02 a, #navApp .fcBrown02, #navApp .fcBrown02 a,
#winterDrive .fcBrown02, #winterDrive .fcBrown02 a,
#faq .fcBrown02, #faq .fcBrown02 a {
  color: #8a6d2f !important;
}

#location .kanjiWatermark, #navApp .kanjiWatermark, #winterDrive .kanjiWatermark,
#faq .kanjiWatermark {
  color: rgba(60, 48, 24, 0.12);
}

#location .buttonBlack01, #navApp .buttonBlack01, #winterDrive .buttonBlack01,
#faq .buttonBlack01 {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* experienceLink はゴールド固定なので、クリーム背景では濃色に上書き */
#location .experienceLink, #navApp .experienceLink, #winterDrive .experienceLink,
#faq .experienceLink {
  color: #8a6d2f !important;
  border-top-color: rgba(60, 48, 24, 0.4);
}

/* ---- 表組みは明色セルのため文字色を明示（ダーク／クリームどちらの背景でも可読に） ---- */
.tableCommon01 th, .tableCommon01 td { color: #2b2620; }

/* 表セル内の「要確認」表記（fcBrown02）はゴールド固定を上書きし、白系セル上でも読める濃色に固定する */
#wrapper01 .tableCommon01 .fcBrown02,
#wrapper01 .tableCommon01 .fcBrown02 a {
  color: #8a6d2f !important;
}

/* ---- 3. 旅の入口を選ぶ：方面カードを縦に1列並べ、右側に地図＋写真2×2を添える ---- */
.featureListLabel {
  display: inline-block;
  color: #CAA944;
  font-size: 0.75rem;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.directionList {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---- 方面ジャンプナビ：各カードへのアンカーボタン ---- */
.directionJumpNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.directionJumpNav a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #CAA944;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: .02em;
  color: #CAA944;
  text-decoration: none !important;
  transition: background-color .3s ease, color .3s ease;
}
.directionJumpNav a:hover {
  background-color: #CAA944;
  color: #142148;
}

#dirTokyo, #dirNagoya, #dirToyota, #dirHamamatsu, #dirIida {
  scroll-margin-top: 110px;
}
@media screen and (max-width: 767px) {
  #dirTokyo, #dirNagoya, #dirToyota, #dirHamamatsu, #dirIida {
    scroll-margin-top: 70px;
  }
}

.directionCard {
  display: flex;
  gap: 30px;
  padding: 26px 22px;
  border: 1px solid rgba(60, 48, 24, 0.18);
}

.directionCardText {
  flex: 1 1 56%;
  min-width: 0;
}

.directionCardSide {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.directionMap {
  width: 100%;
  overflow: hidden;
}
.directionMap iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  filter: grayscale(100%);
}

.directionPhotoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.directionPhoto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media screen and (max-width: 1250px) {
  .directionCard {
    flex-direction: column;
  }
}

/* ---- 4. 自動車ルート：矢印フロー ---- */
.routeFlow {
  border: 1px solid rgba(60, 48, 24, 0.2);
  padding: 24px;
}
.routeFlow ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.routeFlow li {
  padding: 6px 0;
  text-align: center;
  font-size: 0.85rem;
}
.routeFlow li:not(:last-child)::after {
  content: "↓";
  display: block;
  color: #8a6d2f;
  margin-top: 4px;
  font-size: 0.9rem;
}
.routeFlow li.isDest {
  font-weight: bold;
  color: #8a6d2f;
}

/* ---- 項目：dt/dd 型の詳細リスト（方面カード・モデルコース・スポット情報等） ---- */
.detailList > div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(60, 48, 24, 0.12);
}
.detailList dt {
  flex: 0 0 130px;
  color: #8a6d2f;
  font-size: 0.76rem;
  letter-spacing: .04em;
}
.detailList dd { flex: 1; min-width: 0; }

/* 黒背景セクション（#directions／#parking）では dt のダーク配色が読みにくいため、ゴールドに切り替える */
#directions .detailList dt,
#parking .detailList dt {
  color: #CAA944;
}

@media screen and (max-width: 767px) {
  .detailList > div { flex-direction: column; gap: 2px; }
  .detailList dt { flex-basis: auto; }
}

/* ---- テキスト＋画像の2カラム帯 ---- */
.splitBlock > .splitBlockImg > img { width: 100%; display: block; object-fit: cover; }
@media screen and (min-width: 1251px) {
  .splitBlock > .splitBlockImg { height: 380px; overflow: hidden; }
  .splitBlock > .splitBlockImg > img { height: 100%; }
}
@media screen and (max-width: 1250px) {
  .splitBlock > .splitBlockImg { height: 240px; overflow: hidden; margin-bottom: 20px; }
  .splitBlock > .splitBlockImg > img { height: 100%; }
}

/* ---- 注意事項・確認事項box ---- */
.noticeBox { border: 1px solid rgba(202, 169, 68, 0.3); padding: 30px 30px 30px 45px; }
#location .noticeBox, #navApp .noticeBox, #winterDrive .noticeBox,
#faq .noticeBox {
  border-color: rgba(60, 48, 24, 0.3);
}
@media screen and (max-width: 767px) {
  .noticeBox { padding: 20px 20px 20px 35px; }
}

/* ---- FAQ（Q&A形式・開閉なしの静的リスト） ---- */
.faqItem {
  border-bottom: 1px solid rgba(60, 48, 24, 0.2);
  padding: 18px 0;
}
.faqItem:first-child { border-top: 1px solid rgba(60, 48, 24, 0.2); }
.faqQ {
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 8px;
  padding-left: 1.6em;
}
.faqQ::before { content: "Q"; position: absolute; left: 0; color: #8a6d2f; font-weight: bold; }
.faqA { padding-left: 1.6em; }
.faqA::before { content: "A"; position: absolute; left: 0; color: #8a6d2f; font-weight: bold; }

/* ---- 11. 旅の途中に立ち寄る、売木村：スポットカード一覧 ---- */
.spotGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.spotCard {
  width: calc((100% - 60px) / 3);
  border: 1px solid rgba(202, 169, 68, 0.25);
}

.spotCardImg {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.15);
}

.spotCardImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

.spotCardImg img.is-active {
  opacity: 1;
  z-index: 1;
}

/* 複数枚ある写真はクリック／自動送りで切り替え、下部にドットで枚数を示す */
.spotGallery { cursor: pointer; }
.spotGalleryDots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.spotGalleryDots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.spotGalleryDots button.is-active {
  background-color: #CAA944;
}

.spotCardBody {
  padding: 22px 24px 26px;
}

.spotCardNum {
  font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 1.1rem;
  color: #CAA944;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.spotCardName {
  font-size: 1rem;
  line-height: 1.4;
}

.spotCardEn {
  font-size: 0.65rem;
  letter-spacing: .08em;
  color: #CAA944;
  margin-top: 4px;
  margin-bottom: 10px;
}

.spotCardTime {
  display: inline-block;
  font-size: 0.75rem;
  color: #a89f8d;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(202, 169, 68, 0.25);
}

@media screen and (max-width: 1250px) and (min-width: 768px) {
  .spotCard { width: calc(50% - 15px); }
}

@media screen and (max-width: 767px) {
  .spotCard { width: 100%; }
}