@charset "UTF-8";
/* =====================================================================
   越後湯沢温泉 じょんのびの宿 大峰山荘  style.css

   ホームページ・ビルダー クラシックで編集しやすいように、次の方針で書いています。
   ・色・フォント・大きさは、変数を使わずに各所へ数値で直接書いています
   ・レイアウトは flexbox（display:flex）で組んでいます（CSS Grid は使っていません）
   ・画面幅による切り替えは、主に次の4段階です
       〜599px：スマートフォン
       600px〜：タブレット
       900px〜：PC
       1200px〜：大きい画面のPC
   ・写真の切り抜き表示など、新しいブラウザだけで効く指定は
     「@supports」の中にまとめています（古い表示エンジンでは写真がそのままの比率で表示されます）

   ---------------------------------------------------------------------
   色の一覧
     #f5efe6 生成り（ページの地）        #fcf9f4 白木（カードの地）
     #e8dac6 薄茶（トップの大きな帯）    #efe4d4 ベージュ（淡い面）
     #b4946d 木肌（格子・飾り線）        #6b4a2f 茶（見出し・リンク・枠）
     #3f2e22 焦茶（フッター）            #33261c 本文の文字
     #5f4f41 補足の文字                  #dccbb3 罫線
     #a3262a 紅（予約ボタン）            #85191d 紅（予約ボタンにマウスを乗せたとき）
   フォント
     明朝体……下の「明朝体を使う箇所」でまとめて指定しています
     ゴシック体……body で指定しています
   ===================================================================== */


/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
@media (min-width: 1100px) { html { scroll-padding-top: 104px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open, html.menu-open body { overflow: hidden; }

body {
  margin: 0;
  background: #f5efe6;
  color: #33261c;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-break: strict;
}
@media (min-width: 900px) { body { font-size: 17px; } }
/* スマートフォンでは画面下の「電話する／ご予約」バーの分だけ余白をとる */
@media (max-width: 767.98px) {
  body { padding-bottom: 66px; padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

.main { display: block; }
img { display: block; max-width: 100%; height: auto; border: 0; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .3em; }
address { font-style: normal; }
strong { font-weight: 700; }
h1, h2, h3 { margin: 0; font-weight: 600; }
button { font: inherit; }
::selection { background: #e2cdae; color: #33261c; }

/* キーボード操作時の枠（対応ブラウザのみ） */
:focus-visible { outline: 3px solid #6b4a2f; outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }
#main:focus { outline: none; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 10px 18px; background: #6b4a2f; color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 本文の幅（左右の余白：スマートフォン20px／タブレット36px／PC48px、最大1160px） */
.wrap { width: calc(100% - 40px); max-width: 1160px; margin-left: auto; margin-right: auto; }
@media (min-width: 600px) { .wrap { width: calc(100% - 72px); } }
@media (min-width: 900px) { .wrap { width: calc(100% - 96px); } }


/* ---------- 明朝体を使う箇所 ---------- */
.section-title, .section-subtitle, .en, .group-title, .detail-heading,
.sp-menu a, .hero-tag, .hero-vertical, .arrival-item strong, .season strong, .season-name, .season-count, .spot-name, .link-card-name, .furusato-title, .fujirock-title, .notice-title, .ai-guide-title,
.hours dd, .page-heading h1, .room-size, .time-block .time, .booking-card h2,
.phone-number, .step-no, .access-method h2, .contact-value, .legal-content h2,
.reservation-band h2, .reservation-phone a, .footer-name, .social-title {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
}


/* ---------- 文字 ---------- */
.section-title {
  margin: 0 0 .9em;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .1em;
  font-feature-settings: "palt";
}
@media (min-width: 600px) { .section-title { font-size: 30px; } }
@media (min-width: 900px) { .section-title { font-size: 34px; } }
@media (min-width: 1200px) { .section-title { font-size: 36px; } }

.section-subtitle {
  position: relative;
  margin: 0 0 1.4em;
  padding-bottom: .7em;
  border-bottom: 1px solid #dccbb3;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
}
@media (min-width: 600px) { .section-subtitle { font-size: 24px; } }
@media (min-width: 900px) { .section-subtitle { font-size: 26px; } }
.section-subtitle::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 2px; background: #b4946d;
}

.en { display: block; font-size: 14px; font-weight: 500; letter-spacing: .08em; color: #5f4f41; }
.body-copy { max-width: 36em; }
.body-copy + .body-copy { margin-top: 1em; }
.small { font-size: 14px; color: #5f4f41; }
.caption { margin: .8em 0 0; font-size: 13px; line-height: 1.7; color: #5f4f41; }
.group-title { margin: 2.2em 0 .7em; font-size: 19px; letter-spacing: .08em; }
.detail-heading { margin: 0 0 .6em; font-size: 19px; letter-spacing: .08em; }


/* ---------- リンク・ボタン ---------- */
.inline-link { color: #6b4a2f; text-decoration: underline; text-decoration-thickness: 1px; }
.inline-link:hover { text-decoration-thickness: 2px; }

.text-link {
  display: -ms-inline-flexbox; display: inline-flex;
  -ms-flex-align: center; align-items: center;
  padding: 6px 0;
  color: #6b4a2f;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link .button-arrow { margin-left: .5em; }

.button {
  display: -ms-inline-flexbox; display: inline-flex;
  -ms-flex-align: center; align-items: center;
  -ms-flex-pack: center; justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid #a3262a;
  border-radius: 3px;
  background: #a3262a;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.button:hover { background: #85191d; border-color: #85191d; }
.button-outline { background: transparent; color: #6b4a2f; border-color: #6b4a2f; }
.button-outline:hover { background: #6b4a2f; border-color: #6b4a2f; color: #fff; }
.button-light { background: #fcf9f4; color: #3f2e22; border-color: #fcf9f4; }
.button-light:hover { background: #e8dac6; border-color: #e8dac6; color: #3f2e22; }
.button-cha { background: #6b4a2f; border-color: #6b4a2f; color: #fff; }
.button-cha:hover { background: #4f3622; border-color: #4f3622; }
.button-arrow { font-size: .9em; }
.button .button-arrow { margin-left: .6em; }

.button-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 16px; }
.button-row > * { margin: 12px 16px 0 0; }


/* ---------- ヘッダー ---------- */
.site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
  background: #f5efe6;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-bottom-color: #dccbb3; box-shadow: 0 6px 18px rgba(63, 46, 34, .05); }
.header-inner {
  display: -ms-flexbox; display: flex;
  -ms-flex-align: center; align-items: center;
  width: calc(100% - 40px);
  max-width: 1320px;
  height: 64px;
  margin: 0 auto;
}
@media (min-width: 600px) { .header-inner { width: calc(100% - 72px); } }
@media (min-width: 900px) { .header-inner { width: calc(100% - 96px); } }
@media (min-width: 1100px) { .header-inner { height: 84px; } }

.brand { display: block; -ms-flex: none; flex: none; }
.brand img { width: auto; height: 38px; }
@media (min-width: 1100px) { .brand img { height: 50px; } }  /* ロゴ画像の原寸（221×50）で表示 */

/* PCのメニュー */
.desktop-nav { display: none; }
@media (min-width: 1100px) {
  .desktop-nav { display: -ms-flexbox; display: flex; margin-left: auto; }
}
.desktop-nav a {
  position: relative;
  margin-left: 18px;
  padding: 8px 0;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav a:first-child { margin-left: 0; }
@media (min-width: 1280px) {
  .desktop-nav a { margin-left: 26px; font-size: 15px; letter-spacing: .08em; }
  .desktop-nav a:first-child { margin-left: 0; }
}
.desktop-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"] { color: #6b4a2f; font-weight: 700; }

/* ヘッダーの予約ボタン（タブレット以上） */
.header-book { display: none; }
@media (min-width: 768px) {
  .header-book {
    display: -ms-inline-flexbox; display: inline-flex;
    margin-left: auto; min-height: 44px; padding: 8px 20px; font-size: 14px;
  }
}
@media (min-width: 1100px) { .header-book { margin-left: 24px; } }
@media (min-width: 1280px) { .header-book { margin-left: 32px; } }

/* スマートフォン・タブレットのメニューボタン */
.menu-button {
  display: -ms-flexbox; display: flex;
  -ms-flex-align: center; align-items: center;
  min-width: 44px; min-height: 44px;
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  color: #6b4a2f;
  font-size: 13px; font-weight: 500; letter-spacing: .1em;
}
.menu-button .menu-label { margin-left: 10px; }
@media (min-width: 768px) { .menu-button { margin-left: 24px; } }
@media (min-width: 1100px) { .menu-button { display: none; } }
.menu-lines { position: relative; display: block; width: 26px; height: 10px; }
.menu-lines::before, .menu-lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform .25s, top .25s;
}
.menu-lines::before { top: 0; }
.menu-lines::after { top: 8.5px; }
html.menu-open .menu-lines::before { top: 4.25px; transform: rotate(35deg); }
html.menu-open .menu-lines::after { top: 4.25px; transform: rotate(-35deg); }

/* スマートフォン・タブレットのメニュー（ボタンで開閉） */
.sp-menu {
  display: none;
  position: fixed; left: 0; right: 0; top: 64px; bottom: 0;
  -ms-flex-direction: column; flex-direction: column;
  padding: 16px 20px 40px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f5efe6;
  border-top: 1px solid #dccbb3;
}
@media (min-width: 600px) { .sp-menu { padding-left: 36px; padding-right: 36px; } }
@media (min-width: 900px) { .sp-menu { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1099.98px) { html.menu-open .sp-menu { display: -ms-flexbox; display: flex; } }
.sp-menu a {
  display: -ms-flexbox; display: flex;
  -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-align: center; align-items: center;
  -ms-flex: none; flex: none;
  width: 100%; max-width: 640px;
  margin: 0 auto;
  padding: 16px 4px;
  border-bottom: 1px solid #dccbb3;
  font-size: 19px; font-weight: 500; letter-spacing: .1em;
  text-decoration: none;
}
.sp-menu a::after {
  content: ""; width: 8px; height: 8px; -ms-flex: none; flex: none;
  border-top: 1.5px solid #5f4f41; border-right: 1.5px solid #5f4f41;
  transform: rotate(45deg);
}
.sp-menu a[aria-current="page"] { color: #6b4a2f; font-weight: 700; }
.sp-menu a[href="reserve.html"] {
  -ms-flex-pack: center; justify-content: center;
  margin: 28px auto 0;
  border: 0; border-radius: 3px;
  background: #a3262a; color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
}
.sp-menu a[href="reserve.html"]::after { display: none; }


/* ---------- トップページ：最初の大きな帯 ---------- */
.hero { overflow: hidden; background: #e8dac6; color: #33261c; }
.hero-inner { max-width: 1280px; margin: 0 auto; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; }
.hero-tag {
  position: absolute; top: 0; left: 16px;
  -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
  padding: 18px 9px 22px;
  background: rgba(63, 46, 34, .86);
  color: #fff;
  font-size: 14px; letter-spacing: .32em;
}
@media (min-width: 600px) { .hero-tag { left: 28px; } }

.hero-copy {
  display: -ms-flexbox; display: flex;
  -ms-flex-direction: column; flex-direction: column;
  -ms-flex-align: center; align-items: center;
  padding: 36px 20px 44px;
  text-align: center;
}
@media (min-width: 600px) { .hero-copy { padding: 54px 36px 62px; } }
.hero-place { margin: 0 0 24px; font-size: 13px; letter-spacing: .14em; color: #5f4f41; }
@media (min-width: 600px) { .hero-place { margin-bottom: 30px; } }
@media (min-width: 900px) { .hero-place { margin-bottom: 40px; } }

/* 縦書きのキャッチコピー */
.hero-vertical {
  -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
  text-align: left;
  font-feature-settings: normal;
}
.hero-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .14em;
  white-space: nowrap;
  color: #3f2e22;
}
@media (min-width: 600px) { .hero-title { font-size: 38px; } }
@media (min-width: 900px) { .hero-title { font-size: 45px; } }
@media (min-width: 1200px) { .hero-title { font-size: 52px; } }
.hero-title .line { display: block; }
/* 縦書きでは margin-right がキャッチコピーとの間隔、margin-top が下へのずらし幅になります */
.hero-description {
  margin: 2.5em 20px 0 0;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .16em;
  white-space: nowrap;
  color: #33261c;
}
@media (min-width: 600px) { .hero-description { margin-right: 24px; font-size: 16px; } }
@media (min-width: 900px) { .hero-description { margin-top: 5em; margin-right: 30px; font-size: 17px; } }
@media (min-width: 1200px) { .hero-description { margin-right: 36px; } }
.hero-copy .text-link { margin-top: 28px; color: #6b4a2f; }
@media (min-width: 600px) { .hero-copy .text-link { margin-top: 30px; } }
@media (min-width: 900px) { .hero-copy .text-link { margin-top: 40px; } }
@media (min-width: 1200px) { .hero-copy .text-link { margin-top: 44px; } }

/* PC：写真（左）とキャッチコピー（右）を横に並べる */
@media (min-width: 900px) {
  .hero-inner {
    display: -ms-flexbox; display: flex;
    -ms-flex-align: center; align-items: center;
    padding: 60px 48px;
  }
  .hero-photo { -ms-flex: none; flex: none; width: calc((100% - 40px) * .60784); margin-right: 40px; }
  .hero-copy { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; padding: 0; }
}
@media (min-width: 1200px) {
  .hero-inner { padding: 86px 48px; }
  .hero-photo { width: calc((100% - 56px) * .60784); margin-right: 56px; }
}

/* 読み込み時の動き（動きを減らす設定の端末では動きません） */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: omine-fade 1.4s ease-out both; }
  .hero-title .line { animation: omine-descend 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-title .line:nth-child(1) { animation-delay: .35s; }
  .hero-title .line:nth-child(2) { animation-delay: .6s; }
  .hero-title .line:nth-child(3) { animation-delay: .85s; }
  .hero-description, .hero-copy .text-link, .hero-place { animation: omine-fade 1s 1.2s both; }
}
@keyframes omine-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes omine-descend { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* 到着情報（駅から徒歩約8分 など） */
.arrival-strip { background: #fcf9f4; border-bottom: 1px solid #dccbb3; }
.arrival-inner { margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.arrival-item {
  display: -ms-flexbox; display: flex;
  -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-align: baseline; align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #dccbb3;
}
.arrival-item:last-child { border-bottom: 0; }
.arrival-item span { margin-right: 16px; font-size: 14px; color: #5f4f41; }
.arrival-item strong { font-size: 19px; font-weight: 600; letter-spacing: .08em; }
@media (min-width: 768px) {
  .arrival-inner { display: -ms-flexbox; display: flex; }
  .arrival-item {
    width: 33.3333%;
    -ms-flex-direction: column; flex-direction: column;
    -ms-flex-align: center; align-items: center;
    padding: 30px 12px;
    border-bottom: 0;
    border-left: 1px solid #dccbb3;
    text-align: center;
  }
  .arrival-item:first-child { border-left: 0; }
  .arrival-item span { margin-right: 0; }
  .arrival-item strong { margin-top: 2px; font-size: 22px; }
}


/* ---------- トップページ：各セクション ---------- */
.section { padding: 72px 0; }
@media (min-width: 600px) { .section { padding: 76px 0; } }
@media (min-width: 900px) { .section { padding: 102px 0; } }
@media (min-width: 1200px) { .section { padding: 136px 0; } }

/* はじめのご挨拶 */
.intro .section-title { margin-bottom: calc(.6em + 8px); }
.intro-copy { max-width: 34em; }
@media (min-width: 900px) {
  .intro { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; }
  .intro .section-title { -ms-flex: none; flex: none; width: calc((100% - 72px) * .46512); margin: 0 72px 0 0; }
  .intro-copy { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}

/* 温泉・客室の紹介 */
.feature { margin-top: 72px; }
@media (min-width: 600px) { .feature { margin-top: 76px; } }
@media (min-width: 900px) { .feature { margin-top: 102px; } }
@media (min-width: 1200px) { .feature { margin-top: 128px; } }
.feature-image { margin-bottom: 28px; }
.feature-image img { width: 100%; }
.feature-image.is-small { max-width: 440px; }
.feature-photo-note { margin-top: .8em; font-size: 13px; color: #5f4f41; }
.feature-content { max-width: 32em; }
.feature-content .section-title { margin-bottom: .7em; }
.feature-content .text-link { margin-top: 16px; }
@media (min-width: 900px) {
  .feature { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .feature-image { -ms-flex: none; flex: none; width: calc((100% - 60px) * .54545); margin: 0 60px 0 0; }
  .feature-content { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  /* 写真を右側に置く並び */
  .feature.reverse .feature-image {
    -ms-flex-order: 2; order: 2;
    width: calc((100% - 60px) / 2); max-width: none;
    margin: 0 0 0 60px;
  }
  .feature.reverse .feature-image.is-small img,
  .feature.reverse .feature-image.is-small figcaption { max-width: 440px; margin-left: auto; }
}
@media (min-width: 1200px) {
  .feature-image { width: calc((100% - 86px) * .54545); margin-right: 86px; }
  .feature.reverse .feature-image { width: calc((100% - 86px) / 2); margin: 0 0 0 86px; }
}

/* 四季（障子のような格子に、季節の風景写真を入れています）
   PC：春夏秋冬を4列、ゆかた祭り・田園風景を2列で表示
   タブレット：2列で表示
   スマートフォン：写真を1枚ずつ大きく表示し、横にスワイプして切り替え
   （前後のボタンと「1 / 6」の表示は main.js が作ります） */
.season-section { padding: 72px 0; background: #e8dac6; color: #33261c; }
@media (min-width: 600px) { .season-section { padding: 76px 0; } }
@media (min-width: 900px) { .season-section { padding: 102px 0; } }
@media (min-width: 1200px) { .season-section { padding: 128px 0; } }
.season-head { margin-bottom: 36px; }
.season-head .section-title { margin-bottom: calc(.9em + 8px); }
.season-head p { max-width: 32em; }
@media (min-width: 600px) { .season-head { margin-bottom: 38px; } }
@media (min-width: 900px) {
  .season-head { display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; margin-bottom: 52px; }
  .season-head .section-title { -ms-flex: none; flex: none; width: calc((100% - 72px) * .46512); margin: 0 72px 0 0; }
  .season-head p { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}
@media (min-width: 1200px) { .season-head { margin-bottom: 56px; } }
.season-grid {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none;
  border-top: 2px solid #b4946d;
  border-left: 2px solid #b4946d;
}
.season {
  width: 50%;
  padding: 12px 12px 28px;
  background: #fcf9f4;
  border-right: 2px solid #b4946d;
  border-bottom: 2px solid #b4946d;
  text-align: center;
}
@media (min-width: 900px) { .season { width: 25%; padding: 12px 12px 32px; } }
@media (min-width: 1200px) { .season { padding: 14px 14px 36px; } }
.season-photo { margin: 0 0 14px; }
.season-photo img { width: 100%; }
@media (min-width: 900px) { .season-photo { margin-bottom: 18px; } }
.season strong { display: block; font-size: 44px; font-weight: 500; line-height: 1.2; color: #6b4a2f; }
@media (min-width: 600px) { .season strong { font-size: 48px; } }
@media (min-width: 900px) { .season strong { font-size: 52px; } }
@media (min-width: 1200px) { .season strong { font-size: 60px; } }
.season p { margin: .9em 0 0; font-size: 15px; color: #33261c; }
/* 区切りのよい位置で改行させるための指定 */
.season .nb { display: inline-block; }
/* 写真の場所の名前 */
.season .season-place { margin-top: .5em; padding: 0 4px; font-size: 13px; line-height: 1.6; letter-spacing: .04em; color: #5f4f41; }
/* ゆかた祭り・田園風景（PC・タブレットは横長の写真、スマートフォンは正方形の写真） */
.season-wide { width: 50%; padding-bottom: 22px; }
.season .season-name { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .1em; color: #33261c; }
@media (min-width: 900px) { .season .season-name { font-size: 19px; } }
.season-photo .photo-sp { display: none; }
.season-note { margin: 12px 0 0; font-size: 12px; color: #5f4f41; text-align: right; }

.season-more { margin: 28px 0 0; text-align: center; }

/* 前後のボタンと枚数表示（スマートフォンのみ表示） */
.season-controls { display: none; }
.season-controls button {
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid #6b4a2f; border-radius: 50%;
  background-color: #fcf9f4;
  background-repeat: no-repeat; background-position: center center; background-size: 20px 20px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.season-controls .season-prev { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b4a2f'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.5%206l-6%206%206%206'/%3E%3C/svg%3E"); }
.season-controls .season-next { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b4a2f'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.5%206l6%206-6%206'/%3E%3C/svg%3E"); }
.season-controls button:disabled { opacity: .35; cursor: default; }
.season-count { min-width: 4.5em; margin: 0 22px; font-size: 16px; letter-spacing: .12em; text-align: center; color: #33261c; }

/* スマートフォン：写真を1枚ずつ大きく表示し、横にスワイプして切り替え */
@media (max-width: 599.98px) {
  .season-grid {
    position: relative;
    -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    margin: 0 -20px;
    padding: 0 0 0 40px;
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .season-grid::-webkit-scrollbar { display: none; }
  /* 最後の写真も画面の中央で止まるようにするための余白 */
  .season-grid::after { content: ""; display: block; -ms-flex: none; flex: none; width: 40px; }
  .season {
    display: -ms-flexbox; display: flex;
    -ms-flex-direction: column; flex-direction: column;
    -ms-flex: none; flex: none;
    width: calc(100vw - 80px);
    margin-right: 12px;
    padding: 10px 10px 22px;
    border: 2px solid #b4946d;
    scroll-snap-align: center;
  }
  .season:last-child { margin-right: 0; }
  .season-wide .season-name { margin: auto 0; padding-top: 6px; }
  .season-photo .photo-pc { display: none; }
  .season-photo .photo-sp { display: block; }
  .season-controls {
    display: -ms-flexbox; display: flex;
    -ms-flex-align: center; align-items: center;
    -ms-flex-pack: center; justify-content: center;
    margin-top: 18px;
  }
  .season-note { margin-top: 12px; text-align: center; }
}
@media (max-width: 599.98px) and (prefers-reduced-motion: no-preference) {
  .season-grid { scroll-behavior: smooth; }
}

/* アクセスの概要 */
.home-access > div { margin-bottom: 40px; }
.home-access .text-link { margin-top: 16px; }
@media (min-width: 900px) {
  .home-access { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .home-access > div { -ms-flex: none; flex: none; width: calc((100% - 72px) * .47619); margin: 0 72px 0 0; }
  .home-access > .data-list { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}


/* ---------- 項目と内容の一覧（泉質、備品など） ---------- */
.data-list { border-top: 1px solid #dccbb3; }
.data-row { margin: 0; padding: 20px 0; border-bottom: 1px solid #dccbb3; }
.data-row dt { font-weight: 700; color: #6b4a2f; }
.data-row dd { margin: 4px 0 0; }
.data-row dd p { margin-bottom: .7em; }
.data-row dd p:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .data-row { display: -ms-flexbox; display: flex; }
  .data-row dt { -ms-flex: none; flex: none; width: 10.5em; margin-right: 32px; }
  .data-row dd { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin-top: 0; }
}
.price-line { font-weight: 700; }

/* ご入浴時間 */
.hours { margin-top: 28px; background: #fcf9f4; border: 1px solid #dccbb3; border-top: 3px solid #6b4a2f; }
.hours-row {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-align: baseline; align-items: baseline;
  margin: 0;
  padding: 16px 24px;
}
.hours-row + .hours-row { border-top: 1px solid #dccbb3; }
.hours-row dt { margin-right: 20px; font-size: 15px; font-weight: 700; color: #5f4f41; }
.hours-row dd {
  margin: 0;
  white-space: nowrap;
  font-size: 26px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: #6b4a2f;
}
@media (min-width: 600px) { .hours-row dd { font-size: 29px; } }
@media (min-width: 900px) { .hours-row dd { font-size: 32px; } }


/* ---------- 下層ページの見出し ---------- */
.page-hero { padding: 20px 0 36px; border-bottom: 1px solid #dccbb3; }
@media (min-width: 600px) { .page-hero { padding: 24px 0 46px; } }
@media (min-width: 900px) { .page-hero { padding: 30px 0 60px; } }
@media (min-width: 1200px) { .page-hero { padding: 32px 0 72px; } }
.breadcrumb {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 13px; color: #5f4f41;
}
.breadcrumb > * { margin: 0 .7em .4em 0; }
@media (min-width: 600px) { .breadcrumb { margin-bottom: 38px; } }
@media (min-width: 900px) { .breadcrumb { margin-bottom: 52px; } }
@media (min-width: 1200px) { .breadcrumb { margin-bottom: 56px; } }
.breadcrumb a { text-decoration: underline; text-decoration-color: #dccbb3; }
.breadcrumb a:hover { text-decoration-color: currentColor; }
.page-heading > div { margin-bottom: 20px; }
.page-heading h1 {
  font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: .14em;
  font-feature-settings: "palt";
}
@media (min-width: 600px) { .page-heading h1 { font-size: 40px; } }
@media (min-width: 900px) { .page-heading h1 { font-size: 46px; } }
@media (min-width: 1200px) { .page-heading h1 { font-size: 50px; } }
.page-heading .en { margin-top: .9em; }
.lede { margin: 0; max-width: 34em; font-size: 17px; line-height: 2; }
@media (min-width: 900px) {
  .page-heading { display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; }
  .page-heading > div { -ms-flex: none; flex: none; width: calc((100% - 72px) * .46512); margin: 0 72px 0 0; }
  .page-heading .lede { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}
.page-body { padding-top: 48px; padding-bottom: 72px; }
@media (min-width: 600px) { .page-body { padding-top: 54px; } }
@media (min-width: 900px) { .page-body { padding-top: 72px; padding-bottom: 92px; } }
@media (min-width: 1200px) { .page-body { padding-top: 96px; padding-bottom: 120px; } }
.subsection { margin-top: 64px; }
@media (min-width: 600px) { .subsection { margin-top: 68px; } }
@media (min-width: 900px) { .subsection { margin-top: 92px; } }
@media (min-width: 1200px) { .subsection { margin-top: 112px; } }
.page-body > section:first-child { margin-top: 0; }


/* ---------- 共通のレイアウト ---------- */
/* 写真と文章を横に並べる */
.split > :first-child { margin-bottom: 32px; }
@media (min-width: 900px) {
  .split { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .split > :first-child { -ms-flex: none; flex: none; width: calc((100% - 60px) * .53488); margin: 0 60px 0 0; }
  .split > :last-child { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .split--top { -ms-flex-align: start; align-items: flex-start; }
}
@media (min-width: 1200px) {
  .split > :first-child { width: calc((100% - 86px) * .53488); margin-right: 86px; }
}
.photo img { width: 100%; }

/* 2列 */
.two-col > :first-child { margin-bottom: 40px; }
@media (min-width: 900px) {
  .two-col { display: -ms-flexbox; display: flex; }
  .two-col > :first-child { -ms-flex: none; flex: none; width: calc((100% - 64px) / 2); margin: 0 64px 0 0; }
  .two-col > :last-child { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}

.info-note {
  margin-top: 32px;
  padding: 22px 26px;
  background: #efe4d4;
  border-left: 3px solid #6b4a2f;
}

.content-list, .note-list { margin: 20px 0 0; padding: 0; list-style: none; }
.content-list li { position: relative; margin-top: .5em; padding-left: 1.4em; }
.content-list li::before {
  content: ""; position: absolute; left: .15em; top: .95em;
  width: .6em; height: 1px; background: #5f4f41;
}
.note-list { margin: .4em 0 .8em; font-size: 15px; }
.note-list li { margin-top: .2em; }

/* 写真一覧（温泉・館内）
   スマートフォン：1列／タブレット：2列／PC：大きい写真2枚＋小さい写真3枚 */
.photo-grid figure { margin-bottom: 32px; }
.photo-grid figure:last-child { margin-bottom: 0; }
.photo-grid img { width: 100%; }
.photo-grid figcaption { margin-top: .7em; font-size: 15px; font-weight: 500; letter-spacing: .08em; }
@media (min-width: 640px) and (max-width: 899.98px) {
  .photo-grid { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; }
  .photo-grid figure,
  .photo-grid figure:last-child {
    margin-bottom: 28px;
    -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;
  }
}
@media (min-width: 900px) {
  .photo-grid {
    display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin-left: -12px; margin-right: -12px;
  }
  .photo-grid figure,
  .photo-grid figure:last-child {
    display: -ms-flexbox; display: flex;
    -ms-flex-direction: column; flex-direction: column;
    width: 33.3333%;
    margin-bottom: 36px;
    padding: 0 12px;
  }
  .photo-grid .photo-wide { width: 66.6667%; }
  .photo-grid figure:nth-last-child(-n+3) { margin-bottom: 0; }
}

.floorplan > div { margin-bottom: 32px; }
.floorplan-image { max-width: 476px; }
.floorplan-image img { width: 100%; border: 1px solid #dccbb3; background: #fcf9f4; }
@media (min-width: 900px) {
  .floorplan { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; }
  .floorplan > div { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin: 0 72px 0 0; }
  .floorplan-image { -ms-flex: 0 1 476px; flex: 0 1 476px; min-width: 0; }
}


/* ---------- 客室 ---------- */
.room { padding: 40px 0; border-bottom: 1px solid #dccbb3; }
@media (min-width: 600px) { .room { padding: 46px 0; } }
@media (min-width: 900px) { .room { padding: 60px 0; } }
@media (min-width: 1200px) { .room { padding: 72px 0; } }
.room:first-child { padding-top: 0; }
.room-photos {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -ms-flex-align: end; align-items: flex-end;
  max-width: 600px;
  margin-bottom: 28px;
}
.room-photos img { width: calc((100% - 14px) * .66667); }
.room-photos img + img { width: calc((100% - 14px) * .33333); margin-left: 14px; }
.room-photos .caption { width: 100%; margin-top: 14px; }
.room-size {
  display: -ms-flexbox; display: flex;
  -ms-flex-align: baseline; align-items: baseline;
  margin-bottom: .5em;
  font-size: 22px; font-weight: 600; letter-spacing: .12em;
}
.room-size .num { margin-left: 15px; font-size: 56px; line-height: 1; letter-spacing: 0; color: #6b4a2f; }
.room-size small { margin-left: 3px; font-size: 18px; }
.room-description { max-width: 30em; }
.room-description .text-link { margin-top: 12px; }
@media (min-width: 900px) {
  .room { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .room-photos { -ms-flex: none; flex: none; width: calc((100% - 72px) * .53488); margin: 0 72px 0 0; }
  .room-description { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}


/* ---------- ご利用案内 ---------- */
.time-block { padding: 26px 28px; background: #fcf9f4; border: 1px solid #dccbb3; border-top: 3px solid #6b4a2f; }
.time-block + .time-block { margin-top: 16px; }
@media (min-width: 640px) {
  .timings { display: -ms-flexbox; display: flex; }
  .time-block { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .time-block + .time-block { margin: 0 0 0 16px; }
}
.time-block h3 { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: #5f4f41; }
.time-block .time {
  margin: .15em 0 .5em;
  font-size: 32px; font-weight: 600; line-height: 1.35; letter-spacing: .04em; color: #6b4a2f;
}
@media (min-width: 600px) { .time-block .time { font-size: 38px; } }
@media (min-width: 900px) { .time-block .time { font-size: 42px; } }
@media (min-width: 1200px) { .time-block .time { font-size: 44px; } }
.time-block p:last-child { font-size: 15px; }

/* キャンセル料の表 */
.table-scroll {
  margin-top: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fcf9f4; border: 1px solid #dccbb3;
}
.table-scroll:focus-visible { outline-offset: 2px; }
.rates { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.rates th, .rates td { padding: 14px; border-bottom: 1px solid #dccbb3; text-align: center; white-space: nowrap; }
.rates thead th { background: #6b4a2f; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.rates tbody th {
  position: -webkit-sticky; position: sticky; left: 0; z-index: 1;
  background: #fcf9f4; color: #6b4a2f; font-weight: 700; text-align: left;
  box-shadow: inset -1px 0 0 #dccbb3;
}
.rates thead th:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; text-align: left; }
.rates tbody tr:nth-child(even) td, .rates tbody tr:nth-child(even) th { background: #faf5ec; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 0; }
.table-note { max-width: 46em; margin-top: 20px; font-size: 15px; }
.table-note p { margin-bottom: .8em; }


/* ---------- 宿泊プラン・ご予約 ---------- */
.booking-card { padding: 28px; background: #fcf9f4; border: 1px solid #dccbb3; }
@media (min-width: 600px) { .booking-card { padding: 30px; } }
@media (min-width: 900px) { .booking-card { padding: 40px; } }
@media (min-width: 1200px) { .booking-card { padding: 48px; } }
.booking-card + .booking-card { margin-top: 16px; }
@media (min-width: 900px) {
  .booking-panel { display: -ms-flexbox; display: flex; }
  .booking-card { -ms-flex: none; flex: none; width: calc((100% - 16px) * .52381); }
  .booking-card + .booking-card { -ms-flex: 1 1 0%; flex: 1 1 0%; width: auto; min-width: 0; margin: 0 0 0 16px; }
}
.booking-card h2 { margin: .3em 0 .8em; font-size: 22px; line-height: 1.6; letter-spacing: .1em; }
@media (min-width: 600px) { .booking-card h2 { font-size: 25px; } }
@media (min-width: 900px) { .booking-card h2 { font-size: 27px; } }
@media (min-width: 1200px) { .booking-card h2 { font-size: 28px; } }
.booking-card .button { margin: 12px 0 14px; }
.booking-card--primary { border-top: 3px solid #a3262a; }
.booking-card--phone { border-top: 3px solid #6b4a2f; }
.phone-number {
  display: inline-block;
  margin: 8px 0 4px;
  font-size: 30px; font-weight: 600; letter-spacing: .06em;
  color: #6b4a2f; text-decoration: none;
}
@media (min-width: 600px) { .phone-number { font-size: 36px; } }
@media (min-width: 900px) { .phone-number { font-size: 40px; } }
.phone-number:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* オンライン予約の流れ */
.booking-steps { margin: 0; padding: 0; list-style: none; }
.booking-steps li { padding: 26px 26px 28px; background: #fcf9f4; border: 1px solid #dccbb3; }
.booking-steps li + li { margin-top: 16px; }
@media (min-width: 900px) {
  .booking-steps { display: -ms-flexbox; display: flex; }
  .booking-steps li { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .booking-steps li + li { margin: 0 0 0 16px; }
}
.step-no { display: block; font-size: 32px; font-weight: 500; line-height: 1.2; color: #a3262a; }
.booking-steps h3 { margin: .5em 0 .4em; font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.booking-steps p { font-size: 15px; }

/* 関連ページへのリンク */
.link-rows { margin-top: 48px; border-top: 1px solid #dccbb3; }
.link-rows a {
  display: -ms-flexbox; display: flex;
  -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-align: center; align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid #dccbb3;
  font-weight: 500; text-decoration: none;
}
.link-rows a::after {
  content: ""; width: 9px; height: 9px; margin-left: 16px; -ms-flex: none; flex: none;
  border-top: 1.5px solid #6b4a2f; border-right: 1.5px solid #6b4a2f;
  transform: rotate(45deg); transition: transform .2s;
}
.link-rows a:hover { color: #6b4a2f; }
.link-rows a:hover::after { transform: translateX(4px) rotate(45deg); }


/* ---------- 周辺観光 ----------
   スマートフォン：写真の下に文章
   タブレット・PC：写真（左）と文章（右）を横に並べる
   写真は切り抜かず、元の縦横比のまま表示しています */
.spot-intro { margin-bottom: 48px; }
.spot-intro .small { margin-top: 14px; }
.spot-jump { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.spot-jump a {
  margin: 0 8px 8px 0;
  padding: 8px 18px;
  border: 1px solid #dccbb3; border-radius: 999px;
  background: #fcf9f4;
  font-size: 14px; text-decoration: none;
}
.spot-jump a:hover { border-color: #6b4a2f; color: #6b4a2f; }
.spot-list { margin: 0; padding: 0; list-style: none; }
.spot { padding: 32px 0; border-bottom: 1px solid #dccbb3; }
.spot:first-child { padding-top: 0; }
.spot-photo { margin-bottom: 18px; }
.spot-photo img { width: 100%; }
.spot-portrait .spot-photo img { width: auto; max-width: 100%; max-height: 520px; margin: 0 auto; }
.spot-name .nb { display: inline-block; }
.spot-time {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 14px;
  border: 1px solid #6b4a2f; border-radius: 999px;
  background: #fcf9f4;
  color: #6b4a2f;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1.7;
}
.spot-name { margin: 0 0 .5em; font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; }
@media (min-width: 900px) { .spot-name { font-size: 25px; } }
.spot-text p:last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .spot { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 36px 0; }
  .spot-photo { -ms-flex: none; flex: none; width: 52%; margin: 0 36px 0 0; }
  .spot-text { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .spot-portrait .spot-photo img { max-height: 560px; }
}
@media (min-width: 900px) {
  .spot { padding: 44px 0; }
  .spot-photo { margin-right: 56px; }
}
.spot-note { margin: 28px 0 0; font-size: 13px; color: #5f4f41; }


/* 公式サイトへのリンク付きの紹介カード（スキー場・観光情報サイト）
   スマートフォン1列／タブレット2列／PC3列 */
.link-cards {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin: 0 -8px; padding: 0; list-style: none;
}
.link-card {
  display: -ms-flexbox; display: flex;
  -ms-flex-direction: column; flex-direction: column;
  width: calc(100% - 16px);
  margin: 0 8px 16px;
  padding: 24px 24px 18px;
  background: #fcf9f4;
  border: 1px solid #dccbb3;
  border-top: 3px solid #6b4a2f;
}
@media (min-width: 600px) { .link-card { width: calc(50% - 16px); } }
@media (min-width: 900px) { .link-card { width: calc(33.3333% - 16px); padding: 28px 28px 20px; } }
.link-card-name { margin: 0 0 .5em; font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; }
.link-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.85; }
.link-card .text-link { margin-top: auto; -ms-flex-item-align: start; align-self: flex-start; font-size: 15px; }


/* ---------- お知らせ「情報」（トップページ：駐車場のご案内） ---------- */
.notice-section { padding: 64px 0 0; }
@media (min-width: 900px) { .notice-section { padding-top: 88px; } }
.notice-card {
  position: relative;
  padding: 32px 24px 18px;
  background: #fcf9f4;
  border: 1px solid #dccbb3;
  border-top: 3px solid #6b4a2f;
}
@media (min-width: 600px) { .notice-card { padding: 36px 40px 22px; } }
@media (min-width: 900px) { .notice-card { padding: 40px 56px 26px; } }
.notice-tag {
  position: absolute; top: 0; left: 24px;
  margin: 0;
  padding: 4px 16px;
  background: #6b4a2f; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  transform: translateY(-50%);
}
@media (min-width: 600px) { .notice-tag { left: 40px; } }
.notice-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; color: #3f2e22; }
/* 開閉（見出しを押すと開く・閉じる）：駐車場のご案内・観光案内AIで共用 */
.fold-summary {
  display: -ms-flexbox; display: flex;
  -ms-flex-align: center; align-items: center;
  -ms-flex-pack: justify; justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.fold-summary::-webkit-details-marker { display: none; }
.fold-summary::marker { content: ""; }
.fold-toggle {
  display: -ms-flexbox; display: flex;
  -ms-flex-align: center; align-items: center;
  -ms-flex: none; flex: none;
  margin-left: 16px;
  color: #6b4a2f;
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
}
.fold-toggle::before { content: "詳しく見る"; }
.fold-toggle::after {
  content: ""; display: block;
  width: 9px; height: 9px; margin: -4px 4px 0 12px;
  border-right: 2px solid #6b4a2f; border-bottom: 2px solid #6b4a2f;
  transform: rotate(45deg);
  transition: transform .2s, margin .2s;
}
.fold[open] .fold-toggle::before { content: "閉じる"; }
.fold[open] .fold-toggle::after { margin-top: 4px; transform: rotate(-135deg); }
.fold-summary:hover h2 { color: #6b4a2f; }
.fold > .data-list { margin-top: 18px; }
.fold > .ai-guide-inner { margin-top: 14px; }
/* スマートフォン：観光案内AIは見出しが長いので「詳しく見る」を見出しの下に置く */
@media (max-width: 599.98px) {
  .ai-guide-card .fold-summary { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; }
  .ai-guide-card .fold-toggle { margin: 10px 0 0; }
}
@media (min-width: 600px) { .notice-title { font-size: 24px; } }
@media (min-width: 900px) { .notice-title { font-size: 26px; } }
.notice-card .data-row:last-child { border-bottom: 0; }

/* 駐車料金（期間ごとの料金） */
.data-row dd .fee-line { margin: 0; }
.data-row dd .fee-line + .fee-line { margin-top: .5em; }
.fee-period { display: block; font-size: 14px; color: #5f4f41; }
@media (min-width: 600px) { .fee-period { display: inline-block; min-width: 12.5em; margin-right: 1em; } }


/* ---------- ふるさと納税の案内（トップページ・宿泊プラン・ご予約） ---------- */
.furusato-section { padding: 64px 0 8px; }
@media (min-width: 900px) { .furusato-section { padding: 88px 0 16px; } }
.furusato-card {
  position: relative;
  padding: 44px 24px 32px;
  background: #fcf9f4;
  border: 2px solid #a3262a;
  outline: 1px solid #a3262a;
  outline-offset: -9px;
}
@media (min-width: 600px) { .furusato-card { padding: 52px 40px 40px; } }
@media (min-width: 900px) { .furusato-card { padding: 60px 56px 48px; } }
.furusato-tag {
  position: absolute; top: 0; left: 24px;
  margin: 0;
  padding: 4px 16px;
  background: #a3262a; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  transform: translateY(-50%);
}
@media (min-width: 600px) { .furusato-tag { left: 40px; } }
.furusato-title {
  margin: 0 0 .7em;
  font-size: 28px; font-weight: 600; line-height: 1.5; letter-spacing: .12em;
  color: #3f2e22;
}
@media (min-width: 600px) { .furusato-title { font-size: 34px; } }
@media (min-width: 900px) { .furusato-title { font-size: 40px; } }
.furusato-body p { max-width: 34em; }
.furusato-body .small { max-width: none; margin-top: .6em; }
.furusato-body .button-row { margin-top: 12px; }
@media (max-width: 599.98px) {
  .furusato-body .button-row > *, .fujirock-body .button-row > * { width: 100%; margin-right: 0; padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 900px) {
  .furusato-inner { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .furusato-title { -ms-flex: none; flex: none; width: 40%; margin: 0 48px 0 0; }
  .furusato-body { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}


/* ---------- 観光ナビAI「さくらさん」の案内（トップページ・周辺観光） ---------- */
.ai-guide-section { padding: 56px 0 0; }
@media (min-width: 900px) { .ai-guide-section { padding-top: 72px; } }
.ai-guide-top { margin-bottom: 56px; padding-top: 12px; }
.ai-guide-card {
  position: relative;
  padding: 32px 24px 18px;
  background: #fcf9f4;
  border: 1px solid #dccbb3;
  border-left: 4px solid #6b4a2f;
}
@media (min-width: 600px) { .ai-guide-card { padding: 36px 40px 22px; } }
@media (min-width: 900px) { .ai-guide-card { padding: 40px 56px 26px; } }
.ai-guide-tag {
  position: absolute; top: 0; left: 24px;
  margin: 0;
  padding: 4px 16px;
  background: #3f2e22; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  transform: translateY(-50%);
}
@media (min-width: 600px) { .ai-guide-tag { left: 40px; } }
.ai-guide-title { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; color: #3f2e22; }
@media (min-width: 600px) { .ai-guide-title { font-size: 26px; } }
@media (min-width: 900px) { .ai-guide-title { font-size: 28px; } }
.ai-guide-body p { max-width: 38em; }
.ai-guide-body .small { margin-top: .6em; }
.ai-guide-title .nb, .ai-guide-body .nb { display: inline-block; }
.ai-guide-action { margin-top: 20px; padding-bottom: 6px; }
@media (max-width: 599.98px) { .ai-guide-action .button { width: 100%; padding-left: 16px; padding-right: 16px; } }
@media (min-width: 900px) {
  .ai-guide-inner { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .ai-guide-body { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .ai-guide-action { -ms-flex: none; flex: none; margin: 0 0 0 48px; }
}


/* ---------- フジロックの案内（トップページ・周辺観光） ---------- */
.fujirock { padding: 72px 0; background: #2a1e16; color: #fffaf2; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 900px) { .fujirock { padding: 104px 0; } }
.fujirock-box { padding: 44px 24px; }
@media (min-width: 600px) { .fujirock-box { padding: 52px 40px; } }
@media (min-width: 900px) { .fujirock-box { padding: 64px 56px; } }
.fujirock-en {
  margin: 0 0 28px;
  font-size: 46px; font-weight: 700; line-height: 1.02; letter-spacing: .03em;
  color: #e8dac6;
}
@media (min-width: 600px) { .fujirock-en { font-size: 64px; } }
@media (min-width: 900px) { .fujirock-en { font-size: 76px; } }
@media (min-width: 1200px) { .fujirock-en { font-size: 92px; } }
.fujirock-title { margin: 0 0 .7em; font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: .1em; color: #fff; }
@media (min-width: 600px) { .fujirock-title { font-size: 28px; } }
@media (min-width: 900px) { .fujirock-title { font-size: 30px; } }
.fujirock-body p { max-width: 32em; color: rgba(255, 255, 255, .92); }
.fujirock-body .button-row { margin-top: 12px; }
.fujirock .fujirock-note { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) {
  .fujirock-inner { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .fujirock-en { -ms-flex: none; flex: none; width: 46%; margin: 0 48px 0 0; }
  .fujirock-body { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .fujirock-box .fujirock-en { font-size: 64px; }
}


/* ---------- アクセス ---------- */
.access-top > div { margin-bottom: 36px; }
.access-top address { margin: 0 0 28px; font-size: 17px; line-height: 2; }
.exterior { max-width: 360px; }
.exterior img { width: 100%; }
@media (min-width: 900px) {
  .access-top { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .access-top > div { -ms-flex: none; flex: none; width: calc((100% - 72px) * .56522); margin: 0 72px 0 0; }
  .exterior { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; max-width: none; }
  .exterior img, .exterior figcaption { max-width: 360px; margin-left: auto; }
}
.access-methods { margin-top: 56px; }
@media (min-width: 600px) { .access-methods { margin-top: 60px; } }
@media (min-width: 900px) { .access-methods { display: -ms-flexbox; display: flex; margin-top: 82px; } }
@media (min-width: 1200px) { .access-methods { margin-top: 96px; } }
.access-method { padding: 28px; background: #fcf9f4; border: 1px solid #dccbb3; }
@media (min-width: 600px) { .access-method { padding: 30px; } }
@media (min-width: 900px) { .access-method { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; padding: 40px; } }
@media (min-width: 1200px) { .access-method { padding: 44px; } }
.access-method + .access-method { margin-top: 16px; }
@media (min-width: 900px) { .access-method + .access-method { margin: 0 0 0 16px; } }
.access-method h2 { margin-bottom: .8em; font-size: 21px; letter-spacing: .1em; }
@media (min-width: 600px) { .access-method h2 { font-size: 23px; } }
@media (min-width: 900px) { .access-method h2 { font-size: 24px; } }
.access-method .data-list { margin-top: 24px; }
@media (min-width: 640px) { .access-method .data-row dt { width: 9.5em; } }
.access-method .fee-period { display: block; min-width: 0; margin-right: 0; }
.data-row dt .nb { display: inline-block; }


/* ---------- お問い合わせ ---------- */
.contact-item {
  display: -ms-flexbox; display: flex;
  -ms-flex-direction: column; flex-direction: column;
  -ms-flex-align: start; align-items: flex-start;
  padding: 30px 28px;
  background: #fcf9f4;
  border: 1px solid #dccbb3;
}
.contact-item + .contact-item { margin-top: 16px; }
@media (min-width: 900px) {
  .contact-grid { display: -ms-flexbox; display: flex; }
  .contact-item { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
  .contact-item + .contact-item { margin: 0 0 0 16px; }
}
.contact-item h2 { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: #5f4f41; }
.contact-value {
  margin: .25em 0 .3em;
  font-size: 24px; font-weight: 600; letter-spacing: .04em;
  color: #6b4a2f; text-decoration: none; word-break: break-all;
}
@media (min-width: 600px) { .contact-value { font-size: 28px; } }
@media (min-width: 900px) { .contact-value { font-size: 30px; } }
a.contact-value:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.contact-item .button { margin-top: auto; }
.contact-item p:not(.contact-value) { margin-bottom: 20px; font-size: 15px; }


/* ---------- 宿泊約款・個人情報の取り扱い ---------- */
.legal-nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 28px; }
.legal-nav a {
  margin: 0 8px 8px 0;
  padding: 8px 16px;
  border: 1px solid #dccbb3; border-radius: 999px;
  background: #fcf9f4;
  font-size: 14px; text-decoration: none;
}
.legal-nav a:hover { border-color: #6b4a2f; color: #6b4a2f; }
@media (min-width: 1000px) {
  .legal-layout { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; }
  .legal-nav {
    position: -webkit-sticky; position: sticky; top: 96px;
    -ms-flex: none; flex: none; width: 200px;
    -ms-flex-direction: column; flex-direction: column;
    margin: 0 80px 0 0;
    border-left: 1px solid #dccbb3;
  }
  .legal-nav a { margin: 0; padding: 10px 0 10px 20px; border: 0; border-radius: 0; background: none; }
  .legal-content { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; }
}
@media (min-width: 1100px) { .legal-nav { top: 116px; } }
.legal-content { max-width: 44em; }
.legal-content h2 {
  position: relative;
  margin: 3em 0 1.2em;
  padding-bottom: .7em;
  border-bottom: 1px solid #dccbb3;
  font-size: 22px; letter-spacing: .1em;
}
@media (min-width: 600px) { .legal-content h2 { font-size: 25px; } }
@media (min-width: 900px) { .legal-content h2 { font-size: 27px; } }
@media (min-width: 1200px) { .legal-content h2 { font-size: 28px; } }
.legal-content h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background: #b4946d; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin: 2.2em 0 .7em; font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #6b4a2f; }
.legal-content .clause { margin: 0 0 .6em; }
.legal-content ul { margin: .4em 0 1em; padding-left: 1.4em; }
.legal-content li { margin-top: .3em; }


/* ---------- ご予約の帯（各ページの下部） ---------- */
.reservation-band { padding: 64px 0; background: #fcf9f4; border-top: 1px solid #dccbb3; }
@media (min-width: 600px) { .reservation-band { padding: 68px 0; } }
@media (min-width: 900px) { .reservation-band { padding: 92px 0; } }
@media (min-width: 1200px) { .reservation-band { padding: 104px 0; } }
.reservation-inner > div:first-child { margin-bottom: 32px; }
.reservation-band h2 { margin-bottom: .6em; font-size: 24px; line-height: 1.6; letter-spacing: .12em; }
@media (min-width: 600px) { .reservation-band h2 { font-size: 29px; } }
@media (min-width: 900px) { .reservation-band h2 { font-size: 32px; } }
@media (min-width: 1200px) { .reservation-band h2 { font-size: 34px; } }
.reservation-actions {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -ms-flex-align: center; align-items: center;
  margin-top: -24px;
}
.reservation-actions > * { margin: 24px 40px 0 0; }
.reservation-actions > :last-child { margin-right: 0; }
.reservation-phone a { font-size: 26px; font-weight: 600; letter-spacing: .06em; color: #6b4a2f; text-decoration: none; }
@media (min-width: 600px) { .reservation-phone a { font-size: 30px; } }
@media (min-width: 900px) { .reservation-phone a { font-size: 32px; } }
.reservation-phone span { display: block; font-size: 14px; color: #5f4f41; }
/* 見出しを「越後湯沢温泉／じょんのびの宿／大峰山荘へ。」の区切りで改行させる */
.reservation-band h2 .nb { display: inline-block; }
@media (min-width: 900px) {
  .reservation-inner { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
  .reservation-inner > div:first-child { -ms-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin: 0 64px 0 0; }
  .reservation-actions { -ms-flex: none; flex: none; }
}


/* ---------- フッター ---------- */
.site-footer { padding: 56px 0 28px; background: #3f2e22; color: rgba(255, 255, 255, .92); }
@media (min-width: 600px) { .site-footer { padding-top: 60px; } }
@media (min-width: 900px) { .site-footer { padding-top: 82px; } }
@media (min-width: 1200px) { .site-footer { padding-top: 88px; } }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.footer-main > * { margin-bottom: 40px; }
.footer-main > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .footer-main { display: -ms-flexbox; display: flex; }
  .footer-main > * { min-width: 0; margin: 0 56px 0 0; }
  .footer-main > :last-child { margin-right: 0; }
  .footer-brand { -ms-flex: 1.2 1 0%; flex: 1.2 1 0%; }
  .footer-nav { -ms-flex: 1.3 1 0%; flex: 1.3 1 0%; }
  .social-links { -ms-flex: .8 1 0%; flex: .8 1 0%; }
}
.brand-sub { display: block; font-size: 13px; letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.footer-name { display: block; margin: .15em 0 .7em; font-size: 32px; font-weight: 600; letter-spacing: .2em; color: #fffaf2; }
.footer-brand address { font-size: 15px; line-height: 2; }
.footer-nav {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -ms-flex-line-pack: start; align-content: flex-start;
}
.footer-nav a { width: calc(50% - 12px); padding: 8px 0; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-nav a:nth-child(odd) { margin-right: 24px; }
.footer-nav a[aria-current="page"] { color: #fff; font-weight: 700; }
.social-links {
  display: -ms-flexbox; display: flex;
  -ms-flex-direction: column; flex-direction: column;
  -ms-flex-align: start; align-items: flex-start;
}
.social-links > * + * { margin-top: 6px; }
.social-title { margin: 0 0 4px; font-size: 14px; letter-spacing: .1em; color: rgba(255, 255, 255, .75); }
.social-links a { padding: 4px 0; font-size: 15px; }
.footer-bottom {
  display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -ms-flex-align: center; align-items: center;
  margin-top: 36px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px; color: rgba(255, 255, 255, .78);
}
.footer-bottom > * { margin: 12px 32px 0 0; }
.footer-bottom .copyright { margin-left: auto; margin-right: 0; }
@media (max-width: 767.98px) { .footer-bottom .copyright { width: 100%; margin-left: 0; } }


/* ---------- 画面に固定される部品 ---------- */
/* ページの先頭へ戻るボタン */
.back-top {
  position: fixed; right: 16px; z-index: 39;
  bottom: 82px; bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  display: block;
  width: 46px; height: 46px;
  border: 1px solid #dccbb3; border-radius: 50%;
  background: #fcf9f4 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b4a2f'%20stroke-width='1.8'%3E%3Cpath%20d='M6%2014.5l6-6%206%206'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 20px 20px;
  box-shadow: 0 4px 14px rgba(63, 46, 34, .12);
}
.back-top[hidden] { display: none; }
@media (min-width: 768px) { .back-top { right: 24px; bottom: 24px; } }

/* スマートフォンの画面下の「電話する／空室確認・ご予約」バー */
.mobile-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: -ms-flexbox; display: flex;
  padding: 9px 12px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(252, 249, 244, .98);
  border-top: 1px solid #dccbb3;
  box-shadow: 0 -6px 20px rgba(63, 46, 34, .08);
}
@media (min-width: 768px) { .mobile-dock { display: none; } }
.mobile-dock a {
  display: -ms-flexbox; display: flex;
  -ms-flex-align: center; align-items: center;
  -ms-flex-pack: center; justify-content: center;
  min-width: 0; min-height: 48px;
  border-radius: 3px;
  font-size: 15px; font-weight: 500; letter-spacing: .06em; text-decoration: none;
}
.mobile-dock .dock-tel { -ms-flex: 1 1 0%; flex: 1 1 0%; border: 1px solid #6b4a2f; color: #6b4a2f; }
.mobile-dock .dock-tel::before {
  content: ""; display: block; -ms-flex: none; flex: none;
  width: 18px; height: 18px; margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b4a2f'%20stroke-width='1.6'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%203h4l2%205-3%202c1.5%203.3%202.7%204.5%206%206l2-3%205%202v4c0%202-2%202-3%202C9%2020%204%2015%203%206c0-1%200-3%202-3Z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 18px 18px;
}
.mobile-dock .dock-book { -ms-flex: 1.45 1 0%; flex: 1.45 1 0%; margin-left: 8px; background: #a3262a; color: #fff; }


/* ---------- 写真の切り抜き表示（新しいブラウザのみ） ----------
   aspect-ratio と object-fit に対応したブラウザだけで、写真を決まった比率に切り抜いて並べます。
   対応していない表示エンジンでは、写真は元の比率のまま表示されます。 */
@supports (aspect-ratio: 1 / 1) {
  .hero-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 600px) and (max-width: 899.98px) {
    .hero-photo img { aspect-ratio: 3 / 2; }
  }
  @media (min-width: 900px) {
    .photo-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
    .photo-grid .photo-wide img { aspect-ratio: 3 / 2; }
    .photo-grid .photo-tall img { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
  }
}


/* ---------- 印刷 ---------- */
@media print {
  .site-header, .mobile-dock, .back-top, .reservation-band, .skip { display: none !important; }
  body { padding: 0; background: #fff; }
}