* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  color: #51463f;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  /* =========================
     温泉壁紙
     ファイル名は実際のものに変更
     ========================= */

  background-color: #fff4c9;

  background-image:
    url("1page_kabe.png");

  background-repeat: repeat;

  background-position:
    center top;

  background-size:
    700px auto;

  min-height: 100vh;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
}


button {
  font: inherit;
}



/* ========================================
   ページ全体
   ======================================== */

.page-wrap {
  width: min(94%, 1120px);

  margin: 0 auto;

  padding:
    38px 0 80px;
}



/* ========================================
   上部リンク
   ======================================== */

.top-link {
  margin-bottom: 22px;
}


.top-link a {
  display: inline-block;

  padding:
    9px 18px;

  background:
    rgba(255, 255, 255, 0.88);

  border:
    1px solid
    rgba(166, 134, 91, 0.18);

  border-radius: 999px;

  text-decoration: none;

  font-size: 0.9rem;

  box-shadow:
    0 5px 16px
    rgba(92, 70, 48, 0.10);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.top-link a:hover {
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,1);
}



/* ========================================
   ページタイトル
   ======================================== */

.special-header {
  width: min(94%, 820px);

  margin:
    0 auto 55px;

  padding:
    38px 34px 34px;

  text-align: center;

  background:
    rgba(255, 253, 245, 0.90);

  border:
    1px solid
    rgba(199, 165, 110, 0.20);

  border-radius: 28px;

  box-shadow:
    0 14px 36px
    rgba(104, 77, 45, 0.13);

  backdrop-filter:
    blur(3px);
}


.special-kicker {
  margin:
    0 0 9px;

  color:
    #a78358;

  font-size:
    0.9rem;

  letter-spacing:
    0.16em;
}


.special-header h1 {
  margin: 0;

  color:
    #715742;

  font-size:
    clamp(2rem, 5.5vw, 3.4rem);

  line-height:
    1.35;

  letter-spacing:
    0.07em;
}


.special-date {
  margin:
    13px 0 0;

  color:
    #a58c72;

  font-size:
    0.9rem;

  letter-spacing:
    0.08em;
}


.special-lead {
  max-width:
    650px;

  margin:
    27px auto 0;

  text-align:
    left;

  line-height:
    2.05;
}


.special-lead p {
  margin:
    0 0 1.1em;
}



/* ========================================
   1日ごとの大きなまとまり
   ======================================== */

.trip-day {
  margin-bottom:
    80px;
}



/* ========================================
   日付見出し
   ======================================== */

.day-header {
  position:
    relative;

  width:
    fit-content;

  min-width:
    300px;

  margin:
    0 auto 32px;

  padding:
    18px 38px 17px;

  text-align:
    center;

  background:
    rgba(255, 249, 229, 0.94);

  border:
    2px solid
    rgba(189, 147, 83, 0.25);

  border-radius:
    24px;

  box-shadow:
    0 8px 22px
    rgba(93, 71, 44, 0.10);
}


.day-number {
  margin:
    0 0 2px;

  color:
    #b79567;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size:
    0.76rem;

  font-weight:
    bold;

  letter-spacing:
    0.18em;
}


.day-header h2 {
  margin: 0;

  color:
    #75583f;

  font-size:
    2rem;

  line-height:
    1.3;
}


.day-subtitle {
  margin:
    5px 0 0;

  color:
    #9c8164;

  font-size:
    0.9rem;
}



/* ========================================
   各カード
   ======================================== */

.story-card {
  display:
    flex;

  align-items:
    center;

  gap:
    clamp(28px, 5vw, 58px);

  margin:
    0 0 38px;

  padding:
    clamp(22px, 4vw, 38px);

  background:
    rgba(255, 254, 249, 0.93);

  border:
    1px solid
    rgba(186, 151, 100, 0.17);

  border-radius:
    26px;

  box-shadow:
    0 13px 34px
    rgba(94, 72, 47, 0.12);

  backdrop-filter:
    blur(3px);
}



/* 左右反転 */

.story-card.reverse {
  flex-direction:
    row-reverse;
}



/* ========================================
   イラスト
   ======================================== */

.story-image {
  flex:
    0 0 43%;
}


.story-image img {
  width:
    100%;

  height:
    auto;

  border-radius:
    18px;

  box-shadow:
    0 8px 22px
    rgba(86, 67, 49, 0.15);

  /*
    拡大機能なしなので、
    カーソルも普通のまま
  */
  cursor:
    default;
}



/* ========================================
   本文
   ======================================== */

.story-content {
  flex: 1;

  min-width: 0;
}


.story-label {
  display:
    inline-block;

  margin:
    0 0 10px;

  padding:
    5px 13px;

  background:
    #f1dfb8;

  border-radius:
    999px;

  color:
    #7c6246;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size:
    0.78rem;

  letter-spacing:
    0.08em;
}


.story-content h3 {
  margin:
    0 0 18px;

  color:
    #694e38;

  font-size:
    clamp(1.3rem, 3vw, 1.75rem);

  line-height:
    1.55;
}


.story-content p {
  margin:
    0 0 1.25em;

  font-size:
    1rem;

  line-height:
    2;
}



/* ========================================
   怪談ページへのリンク
   ======================================== */

.story-more {
  margin-top:
    26px !important;
}


.story-more a {
  display:
    inline-block;

  padding:
    10px 18px;

  background:
    #e7d3ac;

  border-radius:
    999px;

  text-decoration:
    none;

  color:
    #654f3c;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  font-size:
    0.9rem;

  box-shadow:
    0 5px 15px
    rgba(92, 70, 48, 0.10);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.story-more a:hover {
  transform:
    translateY(-2px);

  background:
    #dcc294;
}



/* ========================================
   アルバム案内カード
   ======================================== */

.album-link-card {
  width:
    min(92%, 760px);

  margin:
    70px auto 0;

  padding:
    35px 30px;

  text-align:
    center;

  background:
    rgba(255, 251, 241, 0.94);

  border:
    1px solid
    rgba(185, 147, 91, 0.20);

  border-radius:
    26px;

  box-shadow:
    0 12px 32px
    rgba(83, 62, 39, 0.12);
}


.album-link-small {
  margin:
    0 0 5px;

  color:
    #a18464;

  font-size:
    0.84rem;

  letter-spacing:
    0.12em;
}


.album-link-card h2 {
  margin:
    0 0 15px;

  color:
    #755940;

  font-size:
    1.8rem;
}


.album-link-card p {
  line-height:
    1.9;
}


.album-button {
  display:
    inline-block;

  margin-top:
    10px;

  padding:
    11px 24px;

  background:
    #dcbf8c;

  color:
    #5f4835;

  border-radius:
    999px;

  text-decoration:
    none;

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  box-shadow:
    0 6px 18px
    rgba(88, 63, 42, 0.12);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.album-button:hover {
  transform:
    translateY(-2px);

  background:
    #d1ae72;
}



/* ========================================
   下部ナビ
   ======================================== */

.page-nav {
  display:
    flex;

  gap:
    14px;

  margin-top:
    32px;
}


.page-nav a {
  flex: 1;

  padding:
    13px 20px;

  text-align:
    center;

  text-decoration:
    none;

  background:
    rgba(255,255,255,0.88);

  border-radius:
    999px;

  box-shadow:
    0 5px 16px
    rgba(77, 59, 43, 0.10);
}



/* ========================================
   タブレット
   ======================================== */

@media (max-width: 900px) {

  .story-card {
    gap:
      26px;

    padding:
      26px;
  }


  .story-image {
    flex-basis:
      46%;
  }

}



/* ========================================
   スマホ
   ======================================== */

@media (max-width: 680px) {

  body {
    background-size:
      520px auto;
  }


  .page-wrap {
    width:
      94%;

    padding:
      24px 0 55px;
  }


  .special-header {
    width:
      100%;

    margin-bottom:
      42px;

    padding:
      29px 21px 26px;

    border-radius:
      22px;
  }


  .special-header h1 {
    font-size:
      2rem;
  }


  .special-lead {
    line-height:
      1.95;
  }


  .trip-day {
    margin-bottom:
      58px;
  }


  .day-header {
    min-width:
      0;

    width:
      min(90%, 340px);

    padding:
      15px 22px;

    margin-bottom:
      24px;
  }


  .day-header h2 {
    font-size:
      1.65rem;
  }


  /*
    スマホでは左右交互をやめ、
    全部
    画像 → 文章
    の順にする
  */

  .story-card,
  .story-card.reverse {
    display:
      block;

    padding:
      18px;

    margin-bottom:
      26px;

    border-radius:
      20px;
  }


  .story-image {
    width:
      100%;

    margin-bottom:
      22px;
  }


  .story-image img {
    border-radius:
      15px;
  }


  .story-content h3 {
    font-size:
      1.28rem;

    margin-bottom:
      14px;
  }


  .story-content p {
    font-size:
      0.96rem;

    line-height:
      1.95;
  }


  .album-link-card {
    width:
      100%;

    margin-top:
      50px;

    padding:
      28px 20px;
  }


  .page-nav {
    flex-direction:
      column;
  }

}