/* ══════════════════════════════════════════════════
   travel.kyuyou-lab.com  共通スタイル

   決まりごと（要件定義書より）
   - 文字サイズは6種類だけ。役割は1つずつ
   - 幅は2種類だけ（文章700px / それ以外1080px）
   - 説明文は本文色。薄い色は注記とラベルだけ
   - 緑はベタ塗り＝予約ボタンのみ。見出しは縦棒
   - 見た目のための強制改行を入れない
   ══════════════════════════════════════════════════ */

:root{
    --sumi:#252525;
    --kinari:#f7f4ee;
    --midori:#6db3a0;
    --midori-fukai:#3d7a69;
    --usu:#5a5349;          /* 注記・ラベル専用。説明文には使わない */
    --sen:#ddd5c7;

    /* 文字サイズはこの6つだけ。それぞれ役割が1つずつ */
    --fs-hero: clamp(2rem,     1.4rem  + 3.6vw,  4rem);    /* 32→64  宿名 */
    --fs-lead: clamp(1.8rem,   1.3rem  + 2.4vw,  3rem);    /* 29→48  性格・数字・評価点 */
    --fs-h2:   clamp(1.7rem,   1.35rem + 1.5vw,  2.6rem);  /* 27→42  セクション見出し */
    --fs-h3:   clamp(1.35rem,  1.2rem  + 0.6vw,  1.6rem);  /* 22→26  小見出し */
    --fs-body: clamp(1.0625rem,0.95rem + 0.35vw, 1.25rem); /* 17→20  本文 */
    --fs-small:clamp(.875rem,  0.82rem + 0.18vw, 1rem);    /* 14→16  注記・ラベル */

    /* 幅は2つだけ */
    --w-wide: 1080px;
    --w-text: 700px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--kinari);color:var(--sumi);
    font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
    font-weight:400;font-size:var(--fs-body);
    font-feature-settings:"palt";line-height:1.95;
    -webkit-font-smoothing:antialiased;
  }
  /* 日本語は語の途中で折れる。意味のまとまりを包み、その「あいだ」でだけ折る */
  .kudari{display:inline-block}
  .hi{background:linear-gradient(transparent 66%,rgba(109,179,160,.32) 66%)}

  /* ══ ヒーロー ══ */
  .hero{position:relative;height:88svh;min-height:420px;overflow:hidden}
  .hero img{width:100%;height:100%;object-fit:cover;display:block}
  .hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.74) 100%)}
  .hero-inner{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
    max-width:var(--w-wide);margin:0 auto;padding:0 5vw 9vh}
  .place{font-size:var(--fs-small);letter-spacing:.2em;opacity:.9;
    display:flex;align-items:center;gap:.8em;margin-bottom:1.2em}
  .place::before{content:"";width:2.4em;height:1px;background:currentColor;opacity:.7}
  .hero-inner h1{font-size:var(--fs-hero);font-weight:300;line-height:1.5;
    letter-spacing:.03em;text-shadow:0 1px 30px rgba(0,0,0,.4)}

  .wrap{max-width:var(--w-wide);margin:0 auto;padding:0 5vw}
  .narrow{max-width:var(--w-text)}

  /* ══ 導入 ══ */
  .verdict{padding:13vh 0 0;font-size:var(--fs-lead);font-weight:300;
    line-height:1.9;letter-spacing:.02em}
  .verdict-sub{margin-top:2em;line-height:2.15}

  /* ══ 全幅の帯：視線を横に流す ══ */
  .band{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;
    margin-top:9vh;padding:3em 0;
    border-top:1px solid var(--sen);border-bottom:1px solid var(--sen)}
  .fig{text-align:center}
  .fig span{display:block;font-size:var(--fs-small);letter-spacing:.1em;
    color:var(--usu);margin-bottom:.9em}
  .fig b{display:block;font-size:var(--fs-lead);font-weight:300;line-height:1.3}
  .fig b i{font-style:normal;font-size:var(--fs-small);margin-left:.2em}

  /* ══ セクション ══ */
  section{padding:11vh 0;border-top:1px solid var(--sen)}
  section:first-of-type{border-top:0}
  h2{font-size:var(--fs-h2);font-weight:400;letter-spacing:.06em;margin-bottom:.7em}
  h3{
    font-size:var(--fs-h3);font-weight:500;letter-spacing:.06em;
    margin-bottom:1.3em;line-height:1.45;
    padding-left:.65em;
    border-left:3px solid var(--midori);   /* ベタ塗りは目立ちすぎるため縦棒にする */
  }
  .sub{margin-bottom:2.6em;line-height:2}

  /* ══ 箇条書き ══ */
  .list{list-style:none;display:grid;gap:1.2em}
  .list li{display:grid;grid-template-columns:1.2em 1fr;gap:.7em;line-height:2;align-items:start}
  .list li::before{content:"";width:.45em;height:.45em;border-radius:50%;
    background:var(--midori);margin-top:.78em}
  /* b と span は必ず2列目に。指定しないと span が次の行の1列目（1.2em幅）へ回り、
     1文字ずつ縦に折り返す */
  .list li b{grid-column:2;font-weight:500}
  .list li span{grid-column:2;line-height:1.95;margin-top:.25em}

  .cols{display:grid;gap:3em}

  /* ══ 客室 ══ */
  .rooms{display:grid;gap:1.2em}
  .rooms div{display:grid;grid-template-columns:6.5em 1fr;gap:1.4em;
    padding-bottom:1.2em;border-bottom:1px solid var(--sen)}
  .rooms div:last-child{border-bottom:0}
  .rooms dt{font-size:var(--fs-small);color:var(--usu);letter-spacing:.06em;padding-top:.35em}
  .rooms dd{line-height:2}

  /* ══ 食事 ══ */
  .meal p{line-height:2}
  /* 見出しは緑ベタ。バッジは枠線にして役割を分ける */
  .badge{display:inline-block;border:1px solid var(--midori);color:var(--midori-fukai);
    font-size:var(--fs-small);padding:.35em 1em;letter-spacing:.06em}

  /* ══ 設備タグ ══ */
  .kit{display:flex;flex-wrap:wrap;gap:.7em}
  .kit span{white-space:nowrap;border:1px solid var(--sen);padding:.55em 1.1em;
    font-size:var(--fs-small)}

  dl.info{display:grid;grid-template-columns:7em 1fr;gap:1.3em 1.5em}
  dl.info dt{color:var(--usu);font-size:var(--fs-small);letter-spacing:.08em;padding-top:.3em}
  dl.info dd{line-height:2}

  .rating{display:flex;align-items:baseline;gap:1em}
  .rating b{font-size:var(--fs-lead);font-weight:300;line-height:1.3}
  .stars{color:var(--midori-fukai);letter-spacing:.2em}
  .rating em{font-style:normal;color:var(--usu);font-size:var(--fs-small)}
  .link{display:inline-block;margin-top:1.4em;color:var(--midori-fukai);text-underline-offset:.4em}

  /* ══ 見どころ ══ */
  .more{white-space:nowrap;color:var(--midori-fukai);text-underline-offset:.3em;margin-left:.4em}
  .around{display:grid;gap:3.4em}

  /* ══ 注記（読み手向け） ══ */
  .note{border-left:2px solid var(--sen);padding-left:1.2em;
    font-size:var(--fs-small);color:var(--usu);line-height:2;margin-top:1.8em}
  .note a{color:var(--midori-fukai);text-underline-offset:.35em}

  /* ══ 予約 ══ */
  .cta{display:block;text-align:center;background:var(--midori);color:#fff;
    padding:1.6em;text-decoration:none;letter-spacing:.14em;border-radius:2px;
    transition:opacity .2s}
  .cta:hover{opacity:.85}
  .cta-note{text-align:center;color:var(--usu);font-size:var(--fs-small);
    margin-top:1.5em;line-height:2.1}

  /* ══ 他の宿 ══ */
  .others{display:grid;gap:2.6em}
  .card{text-decoration:none;color:inherit;display:block}
  .card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
    border-radius:2px;background:var(--sen)}
  .card b{font-weight:400;line-height:1.8;display:block;margin-top:1.1em}
  .card span{font-size:var(--fs-small);color:var(--usu);letter-spacing:.08em}

  footer{border-top:1px solid var(--sen);padding:4em 0 7em;
    font-size:var(--fs-small);color:var(--usu);line-height:2.2;text-align:center}
  .sister{display:block;text-decoration:none;color:inherit;
    background:rgba(109,179,160,.11);border-left:3px solid var(--midori);
    padding:2em 1.8em;text-align:left;border-radius:2px;
    max-width:var(--w-text);margin:0 auto;transition:background .2s}
  .sister:hover{background:rgba(109,179,160,.18)}
  .sister span{display:block;font-size:var(--fs-small);letter-spacing:.16em;color:var(--midori-fukai)}
  .sister b{display:block;font-size:var(--fs-h3);font-weight:400;color:var(--sumi);margin:.5em 0 .2em}
  .sister i{font-style:normal;font-size:var(--fs-small)}
  .fine{margin-top:3em}
  /* 楽天のクレジット表示。規約で指定されたHTMLをそのまま使う（改変不可） */
  .fine a{color:var(--midori-fukai);text-underline-offset:.35em}

  /* ══════ PC ══════ */
  @media (min-width:820px){
    section{padding:13vh 0}
    .verdict{padding-top:16vh}
    .band{padding:4em 0}
    .cols-2{grid-template-columns:1fr 1fr;gap:4.5em}
    .two{grid-template-columns:1fr 1fr;column-gap:4.5em}
    .around{grid-template-columns:1fr 1fr;gap:4em 4.5em}
    .others{grid-template-columns:repeat(3,1fr)}
  }