/*--------------------------------------------------------------------
	experience.css
	遊星館の過ごし方ページ（experience.html）専用の追加スタイル
	共通CSS（reset/basis/structure/parts/dark-theme）で足りない
	最小限のページ固有スタイルのみをここに記述する。
--------------------------------------------------------------------*/

/* ---- クリーム背景セクション（Garden Onsen等と同じ配色ルールを踏襲） ---- */
#wrapper01 #onTheWay,
#wrapper01 #inRoom,
#wrapper01 #eveningOnsen,
#wrapper01 #freeEvening,
#wrapper01 #noStars,
#wrapper01 #morningBath,
#wrapper01 #departure,
#wrapper01 #seasonGuide,
#wrapper01 #travelStyles,
#wrapper01 #earlyArrival,
#wrapper01 #rainyDay {
  background-color: #E8E2D3 !important;
}

#onTheWay h2.mincho, #onTheWay h3,
#inRoom h2.mincho, #inRoom h3,
#eveningOnsen h2.mincho, #eveningOnsen h3,
#freeEvening h2.mincho, #freeEvening h3,
#noStars h2.mincho, #noStars h3,
#morningBath h2.mincho, #morningBath h3,
#departure h2.mincho, #departure h3,
#seasonGuide h2.mincho, #seasonGuide h3,
#travelStyles h2.mincho, #travelStyles h3,
#earlyArrival h2.mincho, #earlyArrival h3,
#rainyDay h2.mincho, #rainyDay h3 {
  color: #2b2620 !important;
}

#onTheWay .fcGray02, #inRoom .fcGray02,
#eveningOnsen .fcGray02, #freeEvening .fcGray02, #noStars .fcGray02,
#morningBath .fcGray02, #departure .fcGray02, #seasonGuide .fcGray02,
#travelStyles .fcGray02, #earlyArrival .fcGray02, #rainyDay .fcGray02 {
  color: #6b6355 !important;
}

#onTheWay .fcBrown02, #onTheWay .fcBrown02 a,
#inRoom .fcBrown02, #inRoom .fcBrown02 a,
#eveningOnsen .fcBrown02, #eveningOnsen .fcBrown02 a,
#freeEvening .fcBrown02, #freeEvening .fcBrown02 a,
#noStars .fcBrown02, #noStars .fcBrown02 a,
#morningBath .fcBrown02, #morningBath .fcBrown02 a,
#departure .fcBrown02, #departure .fcBrown02 a,
#seasonGuide .fcBrown02, #seasonGuide .fcBrown02 a,
#travelStyles .fcBrown02, #travelStyles .fcBrown02 a,
#earlyArrival .fcBrown02, #earlyArrival .fcBrown02 a,
#rainyDay .fcBrown02, #rainyDay .fcBrown02 a {
  color: #8a6d2f !important;
}

#onTheWay .kanjiWatermark, #inRoom .kanjiWatermark,
#eveningOnsen .kanjiWatermark, #freeEvening .kanjiWatermark, #noStars .kanjiWatermark,
#morningBath .kanjiWatermark, #departure .kanjiWatermark, #seasonGuide .kanjiWatermark,
#travelStyles .kanjiWatermark, #earlyArrival .kanjiWatermark, #rainyDay .kanjiWatermark {
  color: rgba(60, 48, 24, 0.12);
}

#onTheWay .buttonBlack01, #inRoom .buttonBlack01,
#eveningOnsen .buttonBlack01, #freeEvening .buttonBlack01, #noStars .buttonBlack01,
#morningBath .buttonBlack01, #departure .buttonBlack01, #seasonGuide .buttonBlack01,
#travelStyles .buttonBlack01, #earlyArrival .buttonBlack01, #rainyDay .buttonBlack01 {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* .experienceLink は共通CSSでゴールド文字（ダーク背景向け）に固定されているため、
   クリーム背景セクションでは読みやすい濃色に上書きする */
#onTheWay .experienceLink, #inRoom .experienceLink,
#eveningOnsen .experienceLink, #freeEvening .experienceLink, #noStars .experienceLink,
#morningBath .experienceLink, #departure .experienceLink, #seasonGuide .experienceLink,
#travelStyles .experienceLink, #earlyArrival .experienceLink, #rainyDay .experienceLink {
  color: #8a6d2f !important;
  border-top-color: rgba(60, 48, 24, 0.4);
}

/* ---- 敷地内で見つける小さな楽しみ／山里の朝ごはん／チェックアウト後の楽しみ方：黒背景セクション ---- */
#wrapper01 #smallPleasures,
#wrapper01 #morningMeal,
#wrapper01 #afterCheckout {
  background-color: #000000 !important;
}

/* ---- 20:00 食後は、思い思いの時間を：カード両サイドに丸写真のコラージュ（左3枚／右4枚） ---- */
.freeEveningLayout {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.freeEveningCards {
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
}

/* カードタイトル行は色指定がなく、ダーク背景向けの既定色（明色）のままだと
   ベージュ背景で見えにくいため、濃色に固定する */
#freeEvening .freeEveningCards li p:first-child {
  color: #2b2620;
}

.freeEveningCollage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.freeEveningCollage--left {
  flex: 0 0 210px;
  order: 1;
  margin-left: -100px;
  margin-top: -50px;
}

.freeEveningCollage--right {
  flex: 0 0 260px;
  order: 3;
}

.collagePhoto {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(43, 38, 32, 0.18);
  margin-bottom: 54px;
}

.collagePhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左3枚 */
.collagePhoto--l1 { width: 150px; height: 150px; margin-left: -15px; transform: rotate(-5deg); }
.collagePhoto--l2 { width: 125px; height: 125px; margin-left: 70px; transform: rotate(6deg); }
.collagePhoto--l3 { width: 155px; height: 155px; margin-left: -20px; margin-bottom: 0; transform: rotate(-4deg); }

/* 右4枚 */
.collagePhoto--r1 { width: 165px; height: 165px; margin-left: 25px; transform: rotate(-4deg); }
.collagePhoto--r2 { width: 135px; height: 135px; margin-left: 115px; transform: rotate(5deg); }
.collagePhoto--r3 { width: 150px; height: 150px; margin-left: 15px; transform: rotate(-6deg); }
.collagePhoto--r4 { width: 125px; height: 125px; margin-left: 95px; margin-bottom: 0; transform: rotate(6deg); }

.collageCaption {
  position: absolute;
  left: 50%;
  bottom: -38px;
  transform: translateX(-50%) rotate(-6deg);
  white-space: nowrap;
  font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 0.75rem;
  letter-spacing: .05em;
  color: #8a6d2f;
}

.collagePhoto--l2 .collageCaption,
.collagePhoto--r2 .collageCaption,
.collagePhoto--r4 .collageCaption {
  transform: translateX(-50%) rotate(5deg);
}

@media screen and (max-width: 1250px) {
  .freeEveningLayout {
    flex-direction: column;
    align-items: center;
  }

  .freeEveningCards {
    order: 1;
  }

  .freeEveningCollage--left,
  .freeEveningCollage--right {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 50px;
    gap: 10px;
    margin-left: 0;
    margin-top: 0;
  }

  .collagePhoto {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ---- 2. 一泊二日タイムライン（時刻・サムネイル・見出しの一覧） ---- */
.timelineList {
  border-top: 1px solid rgba(202, 169, 68, 0.25);
}

.timelineRow {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(202, 169, 68, 0.25);
  text-decoration: none !important;
}

.timelineTime {
  flex: 0 0 78px;
  font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 1.15rem;
  color: #CAA944;
  letter-spacing: .03em;
}

.timelineThumb {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 3px;
}

.timelineThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.timelineBody {
  flex: 1;
  min-width: 0;
}

.timelineBody h3 {
  border-bottom: none;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.timelineBody h3::after {
  content: none;
}

.timelineArrow {
  flex: 0 0 auto;
  color: #CAA944;
  font-size: 1.2rem;
}

@media screen and (max-width: 767px) {
  .timelineRow {
    gap: 12px;
    padding: 14px 0;
  }
  .timelineTime {
    flex-basis: 56px;
    font-size: 0.95rem;
  }
  .timelineThumb {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }
  .timelineBody p {
    display: none;
  }
}

/* ---- 3〜15. 場面ごとの2カラム帯（時刻・見出し・写真とテキスト） ---- */
.sceneBlock > .sceneBlockImg > img {
  width: 100%;
  display: block;
  object-fit: cover;
}

@media screen and (min-width: 1251px) {
  .sceneBlock > .sceneBlockImg {
    height: 380px;
    overflow: hidden;
  }
  .sceneBlock > .sceneBlockImg > img {
    height: 100%;
  }
}

@media screen and (max-width: 1250px) {
  .sceneBlock > .sceneBlockImg {
    height: 240px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .sceneBlock > .sceneBlockImg > img {
    height: 100%;
  }
}

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

/* ---- 季節ごとのおすすめ／モデルコース：項目リスト（dt/dd） ---- */
.detailList > div {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(202, 169, 68, 0.15);
}

.detailList dt {
  flex: 0 0 130px;
  color: #CAA944;
  font-size: 0.78rem;
  letter-spacing: .05em;
}

.detailList dd {
  flex: 1;
  min-width: 0;
}

#seasonGuide .detailList > div {
  border-bottom: 1px solid rgba(60, 48, 24, 0.15);
}

#seasonGuide .detailList dt {
  color: #8a6d2f;
}

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

/* ---- 18. 旅の目的別モデルコース：カード ---- */
.courseCard {
  border: 1px solid rgba(202, 169, 68, 0.25);
  padding: 30px;
}

.courseCard .courseCopy {
  color: #CAA944;
  font-size: 0.85rem;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

@media screen and (max-width: 767px) {
  .courseCard {
    padding: 20px;
  }
}

/* ---- 19. 旅のスタイル別カード ---- */
.styleCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ---- 24. 関連ページへの導線カード ---- */
.linkOutCard {
  border: 1px solid rgba(202, 169, 68, 0.25);
  padding: 24px 20px;
  text-align: center;
}

/* ---- 注意事項・確認事項のbox ---- */
.noticeBox {
  border: 1px solid rgba(202, 169, 68, 0.3);
  padding: 30px 30px 30px 45px;
}

#onTheWay .noticeBox, #inRoom .noticeBox, #smallPleasures .noticeBox,
#eveningOnsen .noticeBox, #freeEvening .noticeBox, #noStars .noticeBox,
#morningMeal .noticeBox, #afterCheckout .noticeBox, #seasonGuide .noticeBox,
#travelStyles .noticeBox, #earlyArrival .noticeBox, #rainyDay .noticeBox {
  border-color: rgba(60, 48, 24, 0.3);
}

@media screen and (max-width: 767px) {
  .noticeBox {
    padding: 20px 20px 20px 35px;
  }
}