@charset "UTF-8";

/* ==================================================================
   ライダーズイン四万十
   公式パンフレット（2025.6）のデザインに準拠
   色・書体はすべてチラシPDFから実測して抽出したもの
   ================================================================== */

:root {
  /* --- チラシから実測した色 --- */
  --green: #00643C;
  /* RIDER'S・ロゴ円の上半分（森） */
  --green-deep: #2B5C38;
  /* 見出しの濃緑 */
  --green-dark: #004a2c;
  /* --- カンプのセクション見出しの色（大村さん 2026-09-08 版で実測） --- */
  --green-mark: #235A23;
  /* 宿泊スペース Cabin */
  --blue-mark: #55AAEB;
  /* 共用スペース Shared area */
  --brown-mark: #42210B;
  /* ご利用料金 Price ／ 最上部の英字ストリップ */
  --red-mark: #CB0000;
  /* ご利用案内 Information */

  --green-pale: #eaf2ed;
  --green-mist: #f4f8f6;

  --blue: #2990D0;
  /* SHIMANTO・点線・ロゴ円の下半分（四万十川） */
  --blue-logo: #288FCF;
  --blue-deep: #1a6ca0;
  --blue-navy: #023B54;
  --blue-pale: #e8f3fa;
  --blue-mist: #f4f9fc;

  --orange: #EA5404;
  /* INN の3文字 */
  --red: #C30E23;
  /* 強調（完全個室で／宿泊費を抑えて／コンビニ） */
  --red-bright: #E83828;

  --ink: #221815;
  --ink-70: rgba(34, 24, 21, .72);
  --ink-50: rgba(34, 24, 21, .52);
  --line: #dfe4e2;
  --paper: #ffffff;
  --paper-2: #f7f9f8;

  /* --- 書体 --- */
  --jp-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --jp-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --jp-round: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --roman: "Cinzel", "Trajan Pro", "Times New Roman", serif;


  /* --- ヒーローの位置（カンプ2026-09-08の実測値）---------------------
     ここが唯一の出どころ。PC・スマホ横長版のどちらもこの変数を使う。
     数値の根拠は .hero-rs のコメントを見ること */
  --hero-strip-top: 4.07%;
  --hero-rs-left: 4.11%;
  --hero-rs-top: 31.83%;
  --hero-rs-size: 34.1vw;
  --hero-roman-top: 45.41%;
  --hero-roman-width: 58.4%;
  /* カンプの実測は63.98%だが、そこだと2行目が川底の岩にかかって白文字が沈む。
     写真の明るさを1%刻みで走査した結果、59%がいちばん暗い
     （明るい画素 63.98%→6.7% / 59%→2.0%）。読みやすさを優先して5ポイント上げている。
     ※スマホ縦長版は切り取りが違うので別値（62%）。そちらは走査上ほぼ最適 */
  --hero-catch-top: 59%;

  --wrap: 1120px;
  /* チラシは写真も囲みもすべて直角。角丸にするのは「設備等」のような
     小さいラベルのピルだけ、という切り分けにしている */
  --r: 0;
  --r-lg: 0;
  --chip: 999px;
  --shadow: 0 2px 10px rgba(34, 24, 21, .06);
  --shadow-lg: 0 8px 26px rgba(34, 24, 21, .10);
}

/* ==================================================================
   ベース
   ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--jp-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
  /* 長音符「ー」や小書き仮名が行頭に来るのを止める（禁則） */
  line-break: strict;
}

/* 日本語を文節で折り返し、最終行に1〜2文字だけ残るのを避ける。
   未対応ブラウザでは既定の折り返しに戻るだけなので、入れて損はない */
p,
li,
dd,
dt,
th,
td,
figcaption,
.lead-sub,
.hero2-catch {
  word-break: auto-phrase;
  /* pretty は Safari だと全部の行の長さを均そうとして、指定した改行の手前でも折れる。
     Chrome と iPhone で折れ方をそろえるため普通の折り返しにしている（2026-09-14） */
  text-wrap: wrap;
}

h1,
h2,
h3,
.section-title,
.price-block-title,
.reserve-title,
.lead-title,
.sec-jp {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 電話番号・価格・固有名詞など、途中で切ってはいけないもの */
.nb {
  white-space: nowrap;
}

/* グリッドの子は既定で min-width:auto のため、中身の最小幅でトラックごと
   押し広げられる。320pxで横スクロールが出ていた原因はこれ */
.price-grid > *,
.enjoy-body > *,
.common-body > *,
.access-body > *,
.features-grid > *,
.info-cards > *,
.rooms-photos > *,
.common-sub > *,
.duo > * {
  min-width: 0;
}

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

a {
  color: var(--blue-deep);
  text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.svg-sprite {
  display: none;
}

.container {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* --- アイコン共通（線画・チラシのトーンに合わせる） --- */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}

.ico .fill {
  fill: currentColor;
  stroke: none;
}

#i-phone,
#i-fb {
  /* 塗りのアイコン */
}

.ico use[href="#i-phone"],
.ico use[href="#i-fb"] {
  fill: currentColor;
  stroke: none;
}

/* --- チラシの signature：青い点線 --- */
.dot-rule {
  height: 12px;
  background-image: radial-gradient(circle, var(--blue) 2.1px, transparent 2.3px);
  background-size: 11px 12px;
  background-repeat: repeat-x;
  background-position: center;
}

.dot-rule.green {
  background-image: radial-gradient(circle, var(--green) 2.1px, transparent 2.3px);
}

/* ==================================================================
   ヘッダー
   ================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
  height: 74px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

.brand-mark {
  height: 52px;
  width: 52px;
  flex: none;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* チラシ下部と同じ横並びのロックアップ。色もチラシどおりに分ける */
.brand-roman {
  display: flex;
  flex-direction: column;
  font-family: var(--roman);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .07em;
  white-space: nowrap;
}

.brand-roman .r1 {
  font-size: .86rem;
  color: var(--green);
}

.brand-roman .r1 em {
  font-style: normal;
  color: var(--orange);
}

.brand-roman .r2 {
  font-size: 1.16rem;
  color: var(--blue);
}

.brand-jp {
  font-family: var(--jp-mincho);
  font-weight: 600;
  font-size: .7rem;
  color: var(--ink-70);
  letter-spacing: .12em;
  white-space: nowrap;
}

.site-header nav {
  margin-left: auto;
}

.nav-links {
  display: flex;
  gap: 22px;
}

.nav-links a {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .88rem;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform .25s;
}

.nav-links a:hover {
  color: var(--blue-deep);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* ==================================================================
   ヒーロー①・② ／ リード
   大村さんのカンプ（2026 riders hp.pdf・1280pt幅）から実測して再現している。
   カンプの数値はコメントに残す。直すときはカンプと突き合わせること。
   ================================================================== */

/* --- ヒーロー① 四万十川の空撮（カンプ y-35〜825＝高さ860） --- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 860;
  overflow: hidden;
  background: #0e2b33;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

/* カンプ最上部の英字ストリップ（y38・Trajan・茶）。
   カンプでは写真の上端が白く霞んでいてそこに乗っている。Webでは切り抜きで
   霞が消える場合があるので、同じ見え方になるよう薄い白のかぶせを一枚敷いている */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.hero-strip {
  position: absolute;
  z-index: 2;
  top: var(--hero-strip-top);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--roman);
  font-weight: 700;
  font-size: clamp(.62rem, 2.58vw, 2rem);
  line-height: 1.2;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--brown-mark);
  padding: 0 12px;
}

.hero-lockup {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* 巨大RS：カンプは TrajanPro-Bold 436pt（＝34.1vw）・x54〜636・y136 */
.hero-rs {
  position: absolute;
  /* カンプ2026-09-08 実測：RSの行ボックス上端はヒーロー高の22.64%、左端4.11%、幅45.5%。
     ただし書体が Trajan（ascender .985）→ Cinzel（ascender .976 / descender .371）に
     替わっているため、line-height:1 では字の載る位置がずれる。
     ベースラインがカンプと同じ72.56%に来る値を逆算して top:31.83%（ブラウザで実測）。
     字送りは0。Cinzelは細いので詰めないほうが幅がカンプと合う。 */
  left: var(--hero-rs-left);
  top: var(--hero-rs-top);
  font-family: var(--roman);
  font-weight: 700;
  font-size: var(--hero-rs-size);
  line-height: 1;
  letter-spacing: 0;
  /* カンプPDFのグラフィックス状態が ca 0.55 */
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

/* ワードマーク：カンプは x218〜529（中心29.2%）・y305〜485 */
.hero-roman {
  /* カンプ2026-09-08：1行目のベースラインが枠の 49.99%。
     Cinzel のメトリクスで逆算して top:45.41%（実測） */
  position: absolute;
  left: 0;
  top: var(--hero-roman-top);
  width: var(--hero-roman-width);
  text-align: center;
  font-family: var(--roman);
  font-weight: 700;
  color: #fff;
  line-height: 1.06;
  letter-spacing: .04em;
  text-shadow: 0 2px 22px rgba(0, 25, 35, .38);
}

.hero-roman span {
  display: block;
  text-transform: uppercase;
}

/* カンプの頭文字は 67pt、続く文字は 47pt（＝1.43倍） */
.hero-roman em {
  font-style: normal;
  font-size: 1.43em;
  line-height: .8;
}

.hero-roman .l1 { font-size: 3.67vw; }
.hero-roman .l2 { font-size: 2.66vw; padding-left: .4em; }
.hero-roman .l3 { font-size: 3.67vw; }

/* --- ヒーロー② キャビン群の空撮＋キャッチ（カンプ y717〜1562＝高さ845） --- */
.hero2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 845;
  overflow: hidden;
  background: #0e2b33;
}

.hero2-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

/* カンプ：明朝30pt 白・中央・字送り +0.27em・y1242/1292（写真の上から62%） */
.hero2-catch {
  /* カンプ2026-09-08：ヒーロー②の高さに対して上端63.98%（前は60.7%）*/
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-catch-top);
  text-align: center;
  font-family: var(--jp-mincho);
  font-weight: 500;
  font-size: clamp(.98rem, 2.34vw, 1.88rem);
  line-height: 1.7;
  letter-spacing: .27em;
  text-indent: .135em;
  color: #fff;
  /* 細い明朝を太らせたくないので、輪郭線ではなく極小のにじみで縁を作る */
  text-shadow: 0 0 3px rgba(0, 24, 38, .6), 0 2px 22px rgba(0, 30, 45, .5);
}

/* --- リード（カンプ y1579〜2600・白地・すべて中央揃え） --- */
.lead {
  background: var(--paper);
  text-align: center;
  padding: clamp(44px, 6.5vw, 88px) 20px clamp(30px, 4vw, 50px);
}

.lead-logo {
  width: clamp(58px, 5.6vw, 76px);
  margin: 0 auto clamp(22px, 3.2vw, 40px);
}

/* カンプ：明朝36pt 字送り+0.17em／「なのに」だけ28pt 字送り+0.13em */
.lead-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  font-family: var(--jp-mincho);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}

.lead-title .big {
  font-size: clamp(1.16rem, 2.81vw, 2.25rem);
  letter-spacing: .17em;
  text-indent: .085em;
}

.lead-title .mid {
  font-size: clamp(.94rem, 2.19vw, 1.75rem);
  letter-spacing: .13em;
  text-indent: .065em;
}

.lead-title.solo {
  margin-top: clamp(26px, 3.6vw, 46px);
}

/* カンプ：小塚ゴシック Light 22pt 字送り+0.10em */
/* 梟さん指定の改行。ただしPC（1280px）では2行とも1行に収まり、
   カンプでも1行なので、スマホ幅のときだけ改行させる */
.br-sp {
  display: none;
}

.lead-sub {
  margin-top: clamp(14px, 2.2vw, 26px);
  font-family: var(--jp-sans);
  font-weight: 400;
  font-size: clamp(.82rem, 1.72vw, 1.34rem);
  line-height: 1.95;
  letter-spacing: .1em;
  text-indent: .05em;
  color: var(--ink);
}

/* --- ふちが白に溶ける写真（カンプ y1996〜2493・幅748＝58.4%） --- */
.fade-photo {
  width: min(58.4%, 780px);
  margin: clamp(30px, 4.2vw, 58px) auto 0;
}

.fade-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 76% 78% at 50% 50%, #000 44%, transparent 94%);
  mask-image: radial-gradient(ellipse 76% 78% at 50% 50%, #000 44%, transparent 94%);
}

.btn-tel {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--green);
  color: #fff;
  padding: 12px 26px;
  box-shadow: 0 4px 14px rgba(0, 100, 60, .22);
  transition: transform .2s, box-shadow .2s, background .2s;
}

.btn-tel:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 100, 60, .32);
}

.btn-tel .ico {
  width: 1.5em;
  height: 1.5em;
}

.btn-tel-body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.btn-tel-label {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .04em;
  opacity: .93;
}

.btn-tel-num {
  font-family: var(--jp-round);
  font-weight: 900;
  font-size: 1.42rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.btn-tel.large {
  padding: 18px 46px;
  font-size: 1.1rem;
}

.btn-tel.large .btn-tel-num {
  /* 下限を下げないと 320px で「0880-28-」「5858」に割れる */
  font-size: clamp(1.42rem, 6.4vw, 2.5rem);
}

.btn-tel.large .ico {
  width: 1.9em;
  height: 1.9em;
}

/* ==================================================================
   セクション共通
   ================================================================== */
section {
  scroll-margin-top: 80px;
}

.about,
.cabin,
.common,
.price,
.info,
.enjoy,
.access {
  padding: 74px 0;
}

.price,
.access {
  background: var(--green-mist);
}

/* 宿泊スペースはカンプどおり白地。写真がフルブリードなので上の余白は無し */
.cabin {
  padding: 0 0 clamp(44px, 6vw, 74px);
  background: var(--paper);
}

.common {
  background: linear-gradient(180deg, var(--blue-mist) 0%, var(--paper) 100%);
}

.section-header {
  text-align: center;
  margin-bottom: 46px;
}

/* Trajan風：先頭文字だけ大きい（チラシの ACCESS / INFORMATION の組み方） */
.section-tag {
  display: block;
  font-family: var(--roman);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1;
  letter-spacing: .1em;
  color: var(--green);
}

.section-tag::first-letter {
  font-size: 1.34em;
}

.section-header.light .section-tag {
  color: var(--blue);
}

.section-title {
  margin-top: 14px;
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: clamp(1.32rem, 3.1vw, 2.05rem);
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ink);
}

.section-lead {
  margin-top: 12px;
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-70);
}

.section-lead.sunomari {
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--red);
  letter-spacing: .06em;
}

/* --- 写真の共通枠 --- */
.ph {
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.ph img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ph figcaption {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--ink-70);
  padding: 11px 14px 13px;
}

/* 解像度が足りない写真の目印。赤い「要・元データ」の札そのものは
   build_share.py の REVIEW_LOWRES_CSS にあり、確認用ビルドにだけ入る。
   本番には札は出ないので、この class を残したまま公開して構わない。
   元データを受け取ったら、その写真から lowres を外す */
.ph.lowres {
  position: relative;
}

/* ==== ヒーロー：大村さんのカンプをそのまま画像で貼っている（2026-10-06に本体へ移した） ====
   それまでは確認用ビルドにだけ入れていて、本番の index.html には入っていなかった。 */
.hero-pdf { width: 100%; background: #fff; }
.hero-pdf img { display: block; width: 100%; height: auto; }

/* 画面に出さずに、検索と読み上げにだけ渡す文字 */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==================================================================
   宿泊スペース（カンプ y2630〜3271）
   ================================================================== */

/* 写真2枚並び・フルブリード・隙間なし（カンプ：各667幅・高さ446） */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

.duo img {
  display: block;
  width: 100%;
  aspect-ratio: 667 / 446;
  object-fit: cover;
}

/* セクション見出し：かまぼこ＋英字。カンプはセクションごとに色を変えている
   宿泊スペース #235A23 ／ 共用スペース #55AAEB ／ ご利用料金 #42210B ／ ご利用案内 #CB0000 */
.sec-mark {
  --mark: var(--green-mark);
  text-align: center;
  padding: clamp(38px, 5.4vw, 68px) 20px clamp(24px, 3.4vw, 44px);
}

.sec-mark.blue {
  --mark: var(--blue-mark);
}

.sec-mark.brown {
  --mark: var(--brown-mark);
}

.sec-mark.red {
  --mark: var(--red-mark);
}

.sec-jp {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.81vw, 2.25rem);
  letter-spacing: .17em;
  text-indent: .085em;
  line-height: 1.5;
  color: var(--mark, var(--green-mark));
}

.arches {
  display: block;
  /* カンプのかまぼこ群は1280px幅で約111px＝8.4vw */
  width: clamp(70px, 8.4vw, 111px);
  height: auto;
  margin: clamp(11px, 1.5vw, 18px) auto clamp(2px, .4vw, 5px);
  fill: var(--mark, var(--green-mark));
}

.sec-en {
  font-family: "Cabin", var(--jp-round), sans-serif;
  font-weight: 600;
  font-size: clamp(1.28rem, 3.28vw, 2.62rem);
  letter-spacing: .1em;
  text-indent: .05em;
  line-height: 1.1;
  color: var(--mark, var(--green-mark));
}

/* 共用スペースの英字の下に並ぶ調理器具。カンプの字形をベクターで抜いたもの */
.sec-utensils {
  /* カンプでは1280px幅で242px＝18.9vw */
  width: clamp(160px, 18.9vw, 242px);
  height: auto;
  margin: clamp(9px, 1.2vw, 15px) auto 0;
}

/* ご利用料金の ¥。これもカンプの字形 */
.sec-yen {
  /* カンプでは1280px幅で54px＝4.2vw */
  width: clamp(26px, 4.2vw, 54px);
  height: auto;
  margin: clamp(6px, .9vw, 12px) auto clamp(2px, .5vw, 7px);
}

.sec-note {
  margin-top: clamp(8px, 1.1vw, 14px);
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: clamp(.78rem, 1.6vw, .95rem);
  letter-spacing: .06em;
  color: var(--mark, var(--green-mark));
}

.cabin-intro {
  max-width: 660px;
  margin: 0 auto clamp(30px, 4vw, 50px);
  text-align: center;
}

.cabin-intro p {
  font-size: .95rem;
  line-height: 2.1;
  letter-spacing: .04em;
}

.cabin-intro strong {
  font-weight: 700;
  color: var(--green);
}

.cabin-note {
  margin-top: 18px;
  font-size: .78rem !important;
  line-height: 1.95 !important;
  color: var(--ink-50);
}

/* ==================================================================
   キャビン
   ================================================================== */
.rooms-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 46px;
}

/* 4枚を2×2で。3枚だとPCで右下が空いてバランスが崩れる */
.rooms-photos .ph img {
  aspect-ratio: 4 / 3;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue);
}

.feature-ico {
  width: 42px;
  height: 42px;
  color: var(--blue);
  stroke-width: 1.5;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--green);
  margin-bottom: 9px;
}

.feature-card p {
  font-size: .88rem;
  line-height: 1.85;
  color: var(--ink-70);
}

.warn {
  color: var(--red);
  font-weight: 700;
}

/* ==================================================================
   共用スペース
   ================================================================== */
.common-body {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: start;
  margin-bottom: 34px;
}

.common-photo img {
  aspect-ratio: 16 / 10;
}

.common-lead {
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: clamp(1.18rem, 2.5vw, 1.55rem);
  line-height: 1.75;
  color: var(--blue-deep);
  letter-spacing: .05em;
  margin-bottom: 20px;
}

.common-text p {
  margin-bottom: 15px;
  font-size: .95rem;
}

.common-text strong {
  font-weight: 700;
  color: var(--ink);
}

.common-free {
  background: var(--blue-pale);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 15px 19px;
  font-size: .9rem !important;
}

.common-free strong {
  color: var(--red);
  font-weight: 900;
}

.common-sub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 34px;
  /* max-width: 640px;  ← 削除（2026-09-29・写真を元データに差し替えたため） */
  /* margin-inline: auto; ← 削除 */
}

.common-sub .ph img {
  aspect-ratio: 4 / 3;
}

.common-list {
  display: grid;
  gap: 11px;
}

.common-list li {
  position: relative;
  padding-left: 30px;
  font-size: .92rem;
  line-height: 1.8;
}

.common-list li::before {
  content: "◆";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--blue);
  font-size: .8rem;
}

.common-list strong {
  color: var(--green);
  font-weight: 700;
}

/* ==================================================================
   料金
   ================================================================== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  /* align-items:start だと左右の箱の高さが揃わず、下枠が平行にならない。
     stretch（既定）にして、高いほうに合わせる */
  align-items: stretch;
}

.price-block {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow);
}

.price-block-title {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: 1.06rem;
  color: #fff;
  background: var(--green);
  padding: 8px 22px;
  margin-bottom: 20px;
  display: inline-block;
  border-radius: var(--chip);
  /* チラシの「設備等」ラベルと同じピル。角丸を残すのはここと access の dt だけ */
}

.price-block-title small {
  font-weight: 500;
  font-size: .74rem;
  opacity: .9;
}

.price-block-title.sub {
  background: var(--blue);
  margin-top: 32px;
}

.price-table th,
.price-table td {
  padding: 12px 6px;
  border-bottom: 1px dotted #c9d4d1;
  text-align: left;
  vertical-align: middle;
}

/* 品名の列に幅を渡す。既定だと金額側が広がって、品名が3〜6行に割れていた */
.price-table.option th {
  width: 64%;
}

.price-table.option .price-yen {
  width: 36%;
}

.price-table th {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .93rem;
  color: var(--ink);
}

.price-table th small {
  display: block;
  font-size: .74rem;
  color: var(--ink-50);
  font-weight: 400;
  line-height: 1.5;
}

.price-yen {
  text-align: right !important;
  white-space: nowrap;
  font-family: var(--jp-round);
  font-weight: 900;
  font-size: 1.24rem;
  color: var(--green);
  letter-spacing: .01em;
}

.price-yen span {
  font-size: .78rem;
  font-weight: 500;
  margin-left: 1px;
}

.price-table.stay .price-yen {
  font-size: 1.55rem;
  color: var(--red);
}

.price-notes {
  margin-top: 16px;
  display: grid;
  gap: 7px;
}

.price-notes li {
  position: relative;
  padding-left: 17px;
  font-size: .83rem;
  line-height: 1.75;
  color: var(--ink-70);
}

.price-notes li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--blue);
}

.price-notes strong {
  color: var(--green);
  font-weight: 700;
}

/* 川ちゃん指摘（2026-09-13）：キャビンの「1棟4名様まで」の直下に注意書き */
.feature-card .feature-advice {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--blue-mist);
  border-left: 3px solid var(--blue);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--ink);
}

.feature-card .feature-advice strong {
  color: var(--blue-deep);
  font-weight: 700;
}

/* 川ちゃんの指摘（2026-09-13）：4名だと狭いので3名までを勧める。
   注意ではなく提案として読ませたいので、赤ではなく青系にしている */
.price-advice {
  background: var(--blue-mist);
  border-left: 3px solid var(--blue);
  padding: 11px 14px !important;
  margin-top: 4px;
  color: var(--ink) !important;
}

.price-advice::before {
  content: none !important;
}

.price-advice strong {
  color: var(--blue-deep);
  font-weight: 700;
}

/* 製氷機の氷は有料（2026-09-13 川ちゃん指摘） */
.common-ice {
  display: block;
  margin-top: 7px;
  font-size: .86em;
  color: var(--ink-70);
}

.price-caution {
  color: var(--red) !important;
  font-weight: 500;
}

.price-caution::before {
  color: var(--red) !important;
}

/* 要確認マーク（確定したらこの span ごと削除する） */
.todo {
  display: inline-block;
  font-family: var(--jp-sans);
  font-size: .62rem;
  font-weight: 500;
  color: var(--red);
  border: 1px dashed var(--red);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  letter-spacing: .02em;
  vertical-align: middle;
}

.todo-link {
  outline: 2px dashed var(--red);
  outline-offset: 3px;
}

/* ==================================================================
   ご利用案内
   ================================================================== */
.checktime-card {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--green);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  margin-bottom: 40px;
  box-shadow: var(--shadow);
}

.checktime-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}

.checktime-item .ico {
  width: 26px;
  height: 26px;
  color: var(--blue);
  margin-bottom: 2px;
}

.checktime-label {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .87rem;
  color: var(--green);
  letter-spacing: .06em;
}

.checktime-value {
  font-family: var(--jp-round);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: .01em;
}

.checktime-value small {
  font-size: .68em; /* 2026-09-29：川ちゃん指定で少し大きめに（.5em→.68em） */
  font-weight: 700;
}

.checktime-note {
  font-size: .78rem;
  color: var(--ink-70);
  line-height: 1.65;
}

.checktime-divider {
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 4px, transparent 4px 9px);
  flex: none;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.info-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform .25s, box-shadow .25s;
}

.info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.info-ico {
  width: 38px;
  height: 38px;
  color: var(--blue);
  stroke-width: 1.5;
  margin-bottom: 12px;
}

.info-card h3 {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--green);
  margin-bottom: 9px;
}

.info-card p {
  font-size: .88rem;
  line-height: 1.85;
  color: var(--ink-70);
}

.info-card strong {
  color: var(--ink);
  font-weight: 700;
}

.info-card.accent {
  background: var(--green);
  border-color: var(--green);
}

.info-card.accent .info-ico,
.info-card.accent h3 {
  color: #fff;
}

.info-card.accent p {
  color: rgba(255, 255, 255, .88);
}

.info-card.accent strong {
  color: #fff;
}

.info-tel {
  display: block;
  margin-top: 14px;
  font-family: var(--jp-round);
  font-weight: 900;
  font-size: 1.52rem;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
}

.info-card.highlight {
  background: #fdf2f3;
  border: 2px solid var(--red);
}

.info-card.highlight .info-ico,
.info-card.highlight h3 {
  color: var(--red);
}

.info-card.highlight strong {
  color: var(--red);
  font-weight: 900;
}

.info-card.onsen {
  grid-column: span 2;
  background: var(--blue-mist);
  border-color: var(--blue);
}

.onsen-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dotted var(--blue);
  font-size: .86rem;
}

.onsen-list dt {
  font-family: var(--jp-round);
  font-weight: 700;
  color: var(--blue-deep);
  white-space: nowrap;
}

.onsen-list dd {
  color: var(--ink);
}

.onsen-link {
  display: inline-block;
  margin-top: 13px;
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .9rem;
  color: var(--blue-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.onsen-note {
  margin-top: 8px;
  font-size: .75rem !important;
  color: var(--ink-50);
}

/* ==================================================================
   楽しみ方
   ================================================================== */
.enjoy {
  background: var(--paper);
}

.enjoy-body {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 46px;
  align-items: start;
}

.enjoy-photo img {
  aspect-ratio: 3 / 4;
}

.enjoy-item {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dotted #c9d4d1;
}

.enjoy-item h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex-wrap: wrap;
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--green-deep);
  margin-bottom: 11px;
}

.enjoy-item h3 .ico {
  width: 27px;
  height: 27px;
  color: var(--blue);
  stroke-width: 1.5;
}

.enjoy-item p {
  font-size: .92rem;
  color: var(--ink-70);
}

.tick-list {
  display: grid;
  gap: 8px;
}

.tick-list li {
  position: relative;
  padding-left: 26px;
  font-size: .92rem;
  line-height: 1.8;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-pale);
}

.enjoy-caution {
  margin-top: 12px;
  font-size: .8rem !important;
  color: var(--red) !important;
  background: #fdf2f3;
  border-radius: var(--r);
  padding: 11px 15px;
  line-height: 1.75;
}

.enjoy-sns {
  padding-top: 4px;
}

.sns-guide {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: 14px;
}

.sns-btns {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}

.btn-sns {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  color: #fff;
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .2s, opacity .2s;
}

.btn-sns:hover {
  transform: translateY(-2px);
  opacity: .92;
}

.btn-sns .ico {
  width: 1.35em;
  height: 1.35em;
}

.btn-sns.insta {
  background: linear-gradient(45deg, #f9a03f 0%, #e4405f 42%, #8a3ab9 100%);
}

.btn-sns.fb {
  background: #1877f2;
}

.btn-sns em {
  font-style: normal;
  font-size: .72rem;
  opacity: .85;
}

/* ==================================================================
   アクセス
   ================================================================== */
.access-body {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 34px;
  align-items: stretch;
}

.access-info {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow);
}

.access-list {
  display: grid;
  gap: 0;
}

.access-list dt {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .8rem;
  color: #fff;
  background: var(--blue);
  border-radius: var(--chip);
  padding: 3px 15px;
  justify-self: start;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.access-list dd {
  font-size: .95rem;
  line-height: 1.8;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dotted #c9d4d1;
}

.access-list dd:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.access-list dd small {
  font-size: .8rem;
  color: var(--ink-50);
}

.access-tel {
  font-family: var(--jp-round);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--green);
  letter-spacing: .02em;
  white-space: nowrap;
}

.access-map {
  min-height: 400px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.access-map iframe {
  display: block;
  height: 100%;
  min-height: 400px;
}

/* パンフレットの地図（2026-09-13 川ちゃんのご希望で追加）。
   スマホでは細かいので、タップで拡大できるよう素のまま置いている */
.access-flyer-map {
  margin-top: clamp(20px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
}

.access-flyer-map img {
  width: 100%;
  height: auto;
}

.access-flyer-map figcaption {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink-70);
  padding: 11px 14px 13px;
}

/* 管理人（そっと折りたたむ） */
.host-details {
  margin-top: 34px;
  background: var(--paper);
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
}

.host-details summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 22px;
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .9rem;
  color: var(--ink-70);
  display: flex;
  align-items: center;
  gap: 9px;
}

.host-details summary::-webkit-details-marker {
  display: none;
}

.host-details summary::before {
  content: "＋";
  color: var(--blue);
  font-weight: 700;
}

.host-details[open] summary::before {
  content: "－";
}

.host-inner {
  display: grid;
  grid-template-columns: minmax(0, clamp(220px, 30%, 330px)) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3.2vw, 42px);
  padding: 14px 22px 32px;
}

/* 川ちゃんの写真はトリミングしない。両手を広げた形と、足元の
   「ライダーズイン四万十」の看板まで入って一枚の絵になっている */
.host-photo {
  background: var(--paper);
  box-shadow: var(--shadow);
}

.host-photo img {
  width: 100%;
  height: auto;
}

.host-text {
  min-width: 0;
}

.host-name {
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--green);
}

.host-name small {
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-50);
  letter-spacing: .02em;
}

.host-nick {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .84rem;
  color: var(--blue-deep);
  margin-bottom: 14px;
}

.host-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: .86rem;
  line-height: 1.85;
  margin-bottom: 18px;
}

.host-facts dt {
  font-family: var(--jp-round);
  font-weight: 500;
  color: var(--ink-50);
  white-space: nowrap;
}

.host-facts dd {
  color: var(--ink-70);
}

.host-route-label,
.host-motto-label {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--green);
  margin-bottom: 7px;
}

/* 0才〜120才までの道のり。点線でつないでチラシの signature に寄せる */
.host-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-bottom: 18px;
}

.host-route span {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .82rem;
  color: var(--ink-70);
  white-space: nowrap;
}

.host-route span+span::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 8px;
  vertical-align: .28em;
  background-image: radial-gradient(circle, var(--blue) 1px, transparent 1.2px);
  background-size: 5px 2px;
  background-repeat: repeat-x;
}

.host-route .goal {
  font-weight: 700;
  color: var(--orange);
}

.host-motto {
  list-style: none;
  counter-reset: motto;
  margin-bottom: 18px;
}

.host-motto li {
  counter-increment: motto;
  font-size: .88rem;
  line-height: 1.95;
  color: var(--ink);
}

.host-motto li::before {
  content: counter(motto);
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green);
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .72rem;
  vertical-align: .1em;
}

.host-msg {
  border-left: 3px solid var(--blue);
  padding-left: 15px;
  font-size: .88rem;
  line-height: 2;
  color: var(--ink-70);
}

.host-msg p+p {
  margin-top: 10px;
}

.host-msg p:last-child {
  color: var(--ink);
}

/* ==================================================================
   予約
   ================================================================== */
.reserve {
  padding: 76px 0;
  background:
    linear-gradient(rgba(0, 74, 44, .9), rgba(0, 74, 44, .9)),
    url("./images/hero-river-aerial.jpg") center/cover no-repeat;
  text-align: center;
  color: #fff;
}

.reserve-mark {
  width: 78px;
  margin: 0 auto 20px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .28));
}

.reserve-title {
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 2.15rem);
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.reserve-lead {
  font-family: var(--jp-round);
  font-weight: 500;
  font-size: .98rem;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 30px;
}

.reserve .btn-tel {
  background: #fff;
  color: var(--green);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .26);
}

.reserve .btn-tel:hover {
  background: #fff;
  color: var(--green-dark);
}

.reserve-note {
  margin-top: 22px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .8);
}

/* PCでは、予約電話のすぐ下に文字つきのSNS導線を見せる。
   スマホは画面下の固定バーに同じ導線があるため、重複させない。 */
.reserve-sns {
  margin-top: 34px;
}

.reserve-sns > p {
  margin-bottom: 13px;
  font-family: var(--jp-round);
  font-size: .9rem;
  color: rgba(255, 255, 255, .9);
}

.reserve-sns-links {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.reserve-sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 158px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--jp-sans);
  font-weight: 700;
  transition: background .2s, transform .2s;
}

.reserve-sns-link:hover {
  background: rgba(255, 255, 255, .24);
  transform: translateY(-2px);
}

.reserve-sns-link .ico {
  width: 21px;
  height: 21px;
}

@media (max-width: 700px) {
  .reserve-sns {
    display: none;
  }
}

/* ==================================================================
   フッター
   ================================================================== */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 46px 0;
  text-align: center;
}

/* 左右の余白が無く、375pxで文字が画面端まで伸びて電話番号が割れていた */
.footer-inner {
  width: min(100% - 40px, 720px);
  margin-inline: auto;
}

.footer-logo {
  height: 92px;
  width: auto;
  margin: 0 auto 12px;
}

.footer-jp {
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .1em;
  color: var(--ink);
  margin-bottom: 14px;
}

.footer-desc {
  font-size: .85rem;
  color: var(--ink-70);
  line-height: 1.9;
}

.footer-sns {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.footer-sns a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--blue-deep);
  transition: background .2s, color .2s, border-color .2s;
}

.footer-sns a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.footer-sns .ico {
  width: 19px;
  height: 19px;
}

/* 本公開時に削除する */
.footer-draft {
  margin-top: 26px;
  font-size: .76rem;
  color: var(--red);
  border: 1px dashed var(--red);
  border-radius: var(--r);
  padding: 9px 16px;
  display: inline-block;
}

/* ==================================================================
   レスポンシブ
   ================================================================== */
@media (max-width: 1024px) {
  .nav-links,
  .brand-jp {
    display: none;
  }

  .nav-inner {
    justify-content: center;
  }

  .site-header nav {
    margin-left: 0;
  }

  .features-grid,
  .info-cards,
  .common-sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-card.onsen {
    grid-column: span 2;
  }

  .common-body,
  .enjoy-body,
  .access-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .enjoy-photo img {
    aspect-ratio: 16 / 9;
  }

  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  body {
    font-size: 15px;
  }

  .br-sp {
    display: inline;
  }

  /* 管理人紹介は1列に。写真は縦長なので、画面いっぱいだと長くなりすぎる */
  .host-inner {
    grid-template-columns: 1fr;
    padding: 14px 16px 26px;
  }

  .host-photo {
    max-width: 300px;
    margin-inline: auto;
  }

  /* カンプは写真が画面の一番上から始まる。スマホではヘッダーを出さない
     （1ページものなので、スクロールで全部たどれる） */
  .site-header {
    display: none;
  }

  /* ヒーローは横長のままだと写真が痩せるので、スマホでは縦長に切る */
  .hero {
    aspect-ratio: 3 / 4;
  }

  .hero2 {
    aspect-ratio: 4 / 5;
  }

  /* スマホではロックアップを中央に置く（カンプの左寄せは1280幅の構図） */
  .hero-rs {
    left: 50%;
    top: 26%;
    transform: translateX(-50%);
    font-size: 68vw;
  }

  .hero-roman {
    left: 0;
    width: 100%;
    top: 42%;
  }

  .hero-roman .l1,
  .hero-roman .l3 {
    font-size: 7.4vw;
  }

  .hero-roman .l2 {
    font-size: 5.4vw;
  }

  .hero2-catch {
    /* 写真の明るさを実測：56%＝白い砂利の帯（明るさ118・明るい画素17%）で
       白文字が埋もれる。62%＝川面のいちばん暗いところ（明るさ80・明るい画素0%）。
       カンプの値も62.1%だった */
    top: 62%;
    font-size: 4.4vw;
    letter-spacing: .22em;
    text-indent: .11em;
  }

  .fade-photo {
    width: min(84%, 460px);
  }

  .lead-title .big {
    font-size: 5.3vw;
    letter-spacing: .14em;
    text-indent: .07em;
  }

  .lead-title .mid {
    font-size: 4.2vw;
  }

  .lead-sub {
    font-size: 3.7vw;
    letter-spacing: .06em;
    text-indent: .03em;
  }

  .sec-jp {
    font-size: 5.3vw;
  }

  .sec-en {
    font-size: 6.4vw;
  }

  .about,
  .cabin,
  .common,
  .price,
  .info,
  .enjoy,
  .access {
    padding-left: 0;
    padding-right: 0;
  }

  .about,
  .common,
  .price,
  .info,
  .enjoy,
  .access {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .section-header {
    margin-bottom: 32px;
  }

  .features-grid,
  .info-cards,
  .common-sub,
  .rooms-photos {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .rooms-photos .large {
    grid-row: auto;
  }

  .rooms-photos .large img {
    aspect-ratio: 3 / 2;
  }

  .info-card.onsen {
    grid-column: auto;
  }

  .price-block {
    padding: 24px 18px;
  }

  .price-block-title {
    font-size: .96rem;
    padding: 7px 17px;
  }

  .price-table th {
    font-size: .88rem;
  }

  .price-yen {
    font-size: 1.1rem;
  }

  .price-table.stay .price-yen {
    font-size: 1.32rem;
  }

  .checktime-card {
    flex-direction: column;
    gap: 20px;
    padding: 24px 18px;
  }

  .checktime-divider {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--blue) 0 4px, transparent 4px 9px);
  }

  .access-info {
    padding: 24px 20px;
  }

  .access-map,
  .access-map iframe {
    min-height: 300px;
  }

  .host-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .reserve {
    padding: 54px 0;
  }

  .btn-tel.large {
    padding: 16px 26px;
    width: 100%;
  }

  .footer-logo {
    height: 76px;
  }

  .site-footer {
    padding-bottom: 46px;
  }
}

/* ==================================================================
   見出しを灰色の帯の上下まん中に置く（2026-09-13 梟さん指示）
   対象：共用スペース・ご利用料金・ご利用案内・アクセス。
   もともと「section の上余白」＋「見出しの上余白」が二重になっていて、
   見出しの上が下の約3倍空いていた（スマホ 88px／24px、PC 142px／44px）。
   section の上余白を0にして、見出しの上下を同じ値にそろえる。
   値はスマホ・PCとも、元の上下の合計を半分ずつに分けたもの。
   目で見てずれていたら、--band-gap-adjust で見出しだけ上下に動かす。
   メディアクエリより後ろに置いて、スマホ側の指定にも勝たせている。
   ================================================================== */
:root {
  --band-gap: clamp(56px, 7.25vw, 93px);
  --band-gap-adjust: 0px;
}

.common,
.price,
.info,
.access {
  padding-top: 0;
}

.common .sec-mark,
.price .sec-mark,
.info .sec-mark,
.access .sec-mark {
  padding-top: calc(var(--band-gap) + var(--band-gap-adjust));
  padding-bottom: calc(var(--band-gap) - var(--band-gap-adjust));
}

/* ご利用料金は最後が文字の行（表示価格は全て税込みです）で、行の下に行間ぶんの
   すき間が出る。そのぶん（実測3.8px）だけ下を詰めて、上下を同じにしている */
.price .sec-mark {
  padding-bottom: calc(var(--band-gap) - var(--band-gap-adjust) - 3.8px);
}

/* ==================================================================
   スマホの改行調整（2026-09-13 梟さんがスマホで見ながら指示）
   改行位置は index.html の <br class="br-sp">（スマホだけ有効）で決めている。
   ================================================================== */
/* 「調味料」と「電子レンジ」の間の「・」。スマホは改行で区切るので出さない */
.sep-pc { display: inline; }

/* 注意書きは左揃え（中央揃えだと行頭がそろわない） */
.feature-card .feature-advice,
.price-advice {
  text-align: left;
}

@media (max-width: 700px) {
  .sep-pc { display: none; }

  /* ※駐車・駐輪スペースは〜 は左揃え */
  .cabin-note {
    text-align: left;
  }
}

@media (max-width: 700px) {
  /* 紹介文のかたまりは画面の真ん中、各行の頭は左でそろえる（2026-09-14 梟さん指示）。
     幅をいちばん長い行に合わせて左右中央に置き、中は左揃えにしている */
  .cabin-intro p:not(.cabin-note) {
    width: fit-content;
    margin-inline: auto;
    text-align: left;
  }
}

@media (max-width: 700px) {
  /* 行はすべて <br> で決めてあるので、スマホではこの紹介文だけ自動の折り返しを止める。
     幅を最長行ぴったりにしているため、iPhone で文字幅がわずかに違うだけで
     「約6畳の天然木／フローリング」と折れていた（2026-09-14 大村さんのiPhoneで確認）。
     最長行は13文字なので、320pxの小さい機種でもはみ出さない */
  .cabin-intro p:not(.cabin-note) {
    white-space: nowrap;
  }
}

/* ==================================================================
   メニュー（2026-09-23 川下さんのご依頼）
   参考：https://toowashimanto.jp/ 右上に固定したボタンと、全画面のメニュー。
   1024px以下で出す（それより広い画面はヘッダーの並びで足りるため）。
   置き場所は仮。大村さんと相談して決める
   ================================================================== */
.menu-btn,
.menu-panel {
  display: none;
}

.menu-btn {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: 64px;
  height: 64px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(34, 24, 21, .12);
  -webkit-tap-highlight-color: transparent;
}

.menu-bars {
  display: block;
  width: 24px;
  height: 15px;
  position: relative;
}

.menu-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
}

.menu-bars i:nth-child(1) { top: 0; }
.menu-bars i:nth-child(2) { top: 6.5px; }
.menu-bars i:nth-child(3) { top: 13px; }

.menu-btn-label {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--green);
}

/* --- 開いた中身 --- */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  padding: 0 0 40px;
}

.menu-panel[hidden] {
  display: none !important;
}

.menu-close {
  align-self: flex-end;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}

.menu-close-x {
  width: 20px;
  height: 20px;
  position: relative;
}

.menu-close-x::before,
.menu-close-x::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
}

.menu-close-x::before { transform: rotate(45deg); }
.menu-close-x::after { transform: rotate(-45deg); }

.menu-inner {
  width: min(100% - 48px, 520px);
  margin-inline: auto;
}

.menu-lead {
  font-family: var(--jp-mincho);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: var(--green-mark);
  margin-bottom: 14px;
}

.menu-list li + li {
  border-top: 1px dotted #c9d4d1;
}

.menu-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 2px;
  color: var(--ink);
}

.menu-jp {
  font-family: var(--jp-round);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .06em;
}

.menu-en {
  font-family: var(--roman);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--blue);
  text-transform: uppercase;
}

.menu-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  padding: 15px;
  background: var(--green);
  color: #fff;
}

.menu-tel .ico {
  width: 1.5em;
  height: 1.5em;
}

.menu-tel-label {
  display: block;
  font-family: var(--jp-round);
  font-size: .72rem;
  letter-spacing: .04em;
  opacity: .92;
}

.menu-tel-num {
  display: block;
  font-family: var(--jp-round);
  font-weight: 900;
  font-size: 1.42rem;
  letter-spacing: .02em;
}

.menu-sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.menu-sns a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  color: var(--blue-deep);
}

.menu-sns .ico {
  width: 20px;
  height: 20px;
}

/* メニューを開いている間は後ろを動かさない */
body.menu-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .menu-btn {
    display: flex;
  }

  .menu-panel:not([hidden]) {
    display: flex;
  }
}

/* ==================================================================
   スマホ下部の固定連絡バー（2026-09-24）
   参考：さくら堂サイトの、画面下に常に見える連絡導線。
   ライダーズは予約電話を広く、Instagram / Facebookを並べる。
   ================================================================== */
.mobile-contact-bar {
  display: none;
}

/* 色はスマホ・PC共通（幅に関わらず同じボタン色にする） */
.mobile-contact-tel {
  background: var(--green);
}

.mobile-contact-instagram {
  background: #689f38; /* 2026-09-29：#c13584 から変更（梟さん指定・案B 落ち着いた若草色） */
}

.mobile-contact-facebook {
  background: #1877f2;
}

@media (max-width: 700px) {
  body {
    /* フッターやボタンが固定バーの下に隠れないようにする */
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .mobile-contact-bar {
    position: fixed;
    z-index: 190;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr;
    min-height: calc(68px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 2px solid #fff;
    box-shadow: 0 -5px 20px rgba(34, 24, 21, .2);
    line-height: 1.25;
  }

  .mobile-contact-bar a {
    min-width: 0;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-contact-tel {
    gap: 7px;
    padding: 7px 5px;
  }

  .mobile-contact-tel .ico {
    width: 22px;
    height: 22px;
    flex: none;
  }

  .mobile-contact-label,
  .mobile-contact-number {
    display: block;
    white-space: nowrap;
    font-family: var(--jp-round);
  }

  .mobile-contact-label {
    margin-bottom: 2px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .03em;
  }

  .mobile-contact-number {
    font-size: clamp(.86rem, 4vw, 1.02rem);
    font-weight: 900;
    letter-spacing: .01em;
  }

  .mobile-contact-sns {
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px;
    border-left: 2px solid #fff;
    font-family: var(--jp-sans);
    font-size: clamp(.55rem, 2.6vw, .68rem);
    font-weight: 700;
    letter-spacing: .01em;
  }

  .mobile-contact-sns .ico {
    width: 25px;
    height: 25px;
  }

  /* Instagram・Facebookの色は幅に関わらず共通のため上（767行付近）で指定 */
}

/* PCでも連絡先を出しっぱなしにする（2026-09-29）
   参考：さくら堂サイトの、右下に浮かぶ「電話（白地）＋色つき正方形」の横並び。 */
@media (min-width: 701px) {
  .mobile-contact-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    position: fixed;
    z-index: 150;                 /* メニュー(200/210)より下、本文より上 */
    right: 20px;
    bottom: 20px;
    left: auto;
    width: auto;
  }

  .mobile-contact-bar a {
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(34, 24, 21, .18);
  }

  .mobile-contact-tel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 20px;
    background: #fff;
    color: var(--green);
  }

  .mobile-contact-tel .ico {
    width: 26px;
    height: 26px;
    flex: none;
  }

  .mobile-contact-label,
  .mobile-contact-number {
    display: block;
    white-space: nowrap;
    font-family: var(--jp-round);
  }

  .mobile-contact-label {
    margin-bottom: 2px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #767676;
  }

  .mobile-contact-number {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .mobile-contact-sns {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 76px;
    min-height: 64px;
    padding: 8px;
    color: #fff;
    text-align: center;
    font-family: var(--jp-sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .01em;
  }

  .mobile-contact-sns .ico {
    width: 22px;
    height: 22px;
  }
}