/* ============================================================
   A庵 余白 — 余市edition  v3.0（2026-09-13）
   ゼロから組み直し。scorpios.com の「ロケーションページ」型に準拠。

   参照した実測値（scorpios.com の CSS を取得して計測）
     ・コンテナ  .inner-section = max-width 1440 / 左右 60px(PC)・4.1667%(SP)
     ・11分割    landingcard = 45.4545% + 9.0909% + 45.4545%
     ・余白      .m_000_space = 20 / 48 / 84px の空セクション
     ・章        .bg-ritual のように背景色を章ごとに変える
     ・タイポ    px固定。本文14/20、ラベル11px・字間3px・uppercase
     ・BP        480 / 768 / 1024

   配色は A庵PV（A庵_A_0911fix.mp4）の明るいカットの実測。
     ススキと青空（10.5s）  avg #3F8C9F  暗部 #097A9A  明部 #57A4B7
     湾の俯瞰（19.5s）      avg #34555C  中 #144A57   明部 #93B7BB
     砂浜と引き波（3.5-4.5s）avg #4D5350  明部 #83817C
     波打ち際（26.5s）      avg #686963  明部 #A3A39C
     → 地は砂と紙、アクセントは海。暗い紺はやめた。
   ============================================================ */

:root{
  --ground:#F3F0E9;       /* 地＝砂と紙。PVの砂の明部 #A3A39C を大きく起こした値 */
  --raise:#E8E4D9;        /* 章の背景を1段 */
  --line:#D7D1C4;
  --ink:#14242A;          /* 墨。青緑寄り */
  --sub:#5C6E74;
  --cool:#0E7A96;         /* 海（濃）＝PV #097A9A */
  --cool-lt:#57A4B7;      /* 海（明）＝PV実測 */
  --warm:#B08A52;         /* 砂・夕陽 */
  /* ヘッダーの実高。アンカーで飛んだとき、この分だけ手前で止める */
  --head-h:78px;
  --maxw:1440px;
  /* 画面端の余白。scorpios は 4.1667%（＝390pxで16px）だが、
     和文だと端に貼りついて見えるので、モバイルは実寸で確保する */
  --pad:24px;
  --font:"Nanum Myeongjo","Zen Old Mincho",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --section-bg:var(--ground);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* 固定ヘッダーに隠れないよう、飛び先はヘッダー分＋ひと呼吸ぶん手前で止める */
:target,[id]{scroll-margin-top:calc(var(--head-h) + 40px);}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:28px;letter-spacing:.4px;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
/* v3 で入れ忘れていた段落まわりの基本。これが無いと全ページで段落が詰まる */
p{margin-bottom:26px;text-wrap:pretty;}
p:last-child{margin-bottom:0;}
/* 和文の下に置く英文ブロックの既定。個別指定があるところはそちらが勝つ */
.eng{margin-top:40px;color:var(--sub);font-size:13px;line-height:22px;letter-spacing:.28px;}
.eng p{margin-bottom:18px;}
/* フォーム内の注記は行間だけで足りる */
.field p,.cal-picked,.form-msg,.terms li p,.qa p{margin-bottom:0;}

img,video{max-width:100%;display:block;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
.en{font-family:"Nanum Myeongjo",serif;letter-spacing:.5px;}
h1,h2,h3{font-weight:400;}

/* ---- コンテナ（scorpios .inner-section）---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);position:relative;}


@media(min-width:440px){:root{--pad:32px;}}   /* 466px のアウター画面もここ */
@media(min-width:768px){:root{--head-h:96px;}}
@media(min-width:768px){:root{--pad:60px;}}

/* ---- 余白（scorpios .m_000_space）---- */
.sp{height:20px;}
@media(min-width:768px){.sp{height:48px;}}
@media(min-width:1024px){.sp{height:84px;}}
.sp.lg{height:48px;}
@media(min-width:768px){.sp.lg{height:104px;}}
@media(min-width:1024px){.sp.lg{height:168px;}}

/* ---- 章（scorpios .bg-ritual）。背景色で章を分ける ---- */
.chapter{background:var(--section-bg);}
.chapter.raise{--section-bg:var(--raise);}

/* ---- ラベル（scorpios .tag / --font-tags）---- */
.tag{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--cool);}

/* ============================================================
   ヘッダー — 志願を常駐させる（scorpios の Reserve と同じ扱い）
   ============================================================ */
.head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);
  font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);
  transition:background .4s ease,box-shadow .4s ease;
}

.head.on-ground{background:rgba(243,240,233,.92);backdrop-filter:blur(10px);
  color:var(--ink);text-shadow:none;box-shadow:0 1px 0 var(--line);}
/* ロゴは正方形。PCでは小さすぎたので大きくする。
   ヒーローの上では白、抜けたら黒に差し替える */
.head .hlogo{opacity:0;pointer-events:none;transition:opacity .35s ease;}
.head.on-ground .hlogo{opacity:1;pointer-events:auto;}
.head .hlogo img{height:44px;width:auto;}
@media(min-width:768px){.head .hlogo img{height:56px;}}
.head.on-ground .hlogo img{content:url(../images/logo-black.png);}
.head nav{display:flex;gap:20px;align-items:center;}
.head nav a{padding:9px 0;}
.head nav a{opacity:.85;}
.head nav a:hover{opacity:1;}
.head .apply-link{border:1px solid rgba(255,255,255,.55);padding:9px 18px 8px;opacity:1;}
.head.on-ground .apply-link{border-color:var(--cool);color:var(--cool);}
.head .apply-link:hover{background:var(--cool);color:#fff;border-color:var(--cool);}
@media(max-width:767px){
  .head{font-size:11px;letter-spacing:1.2px;}
  .head .hlogo img{height:38px;}
  .head nav{gap:12px;}
  .head nav .hide-sp{display:none;}
  .head .apply-link{padding:8px 12px 7px;}
}

/* ============================================================
   ヒーロー（scorpios .m_a_header_place）
   向こうは logo-box を top:71.5vh に置いている＝画面の下から約3割
   ============================================================ */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ground);}
.hero video,.hero img.fallback{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,14,17,.40) 0%,rgba(6,14,17,.03) 26%,
    rgba(6,14,17,.03) 40%,rgba(6,14,17,.80) 100%);}
/* 下端から積む。top:68vh だと小さい画面でロゴが画面外に出て切れていた */
.hero .box{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) 40px;}
@media(min-width:768px){.hero .box{padding:0 var(--pad) 56px;}}
.hero .in{max-width:var(--maxw);margin:0 auto;}
.hero-logo{width:auto;height:118px;margin:0 0 14px;
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.6));}
.hero .sub{font-family:var(--mono);font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:rgba(255,255,255,.9);}
@media(min-width:768px){.hero-logo{height:168px;margin-bottom:18px;}}
@media(min-width:1024px){.hero-logo{height:196px;}}
.hero img.fallback{display:none;}

/* ============================================================
   ステートメント（scorpios .a_quote）
   ============================================================ */
/* 改行は <br> で固定してある。max-width で勝手に折り返すと
   「身体体験」のような熟語が行中で割れるので、折り返させない */
.quote p{font-size:24px;line-height:44px;letter-spacing:.2px;max-width:none;}
.quote .eng{margin-top:22px;max-width:34em;}
/* .quote p が 24px なので、英文は p まで指定しないと同じ大きさで出てしまう */
.quote .eng p{color:var(--sub);font-size:13px;line-height:22px;letter-spacing:.28px;}
@media(min-width:768px){.quote .eng p{font-size:14px;line-height:24px;}}
@media(min-width:768px){.quote p{font-size:34px;line-height:60px;}}
@media(min-width:1024px){.quote p{font-size:40px;line-height:72px;}}

/* ============================================================
   ランディングカード（scorpios .m_027_landingcard）
   11分割：画像 45.4545% / 間 9.0909% / 本文 45.4545%
   本文はカードの下端に揃える（.body の justify-content:flex-end）
   いまは各カードがページ内の内容。Phase1で /yoichi/room 等への
   リンクに変えられるよう、見出しに <a> を入れやすい形にしてある。
   ============================================================ */
.card{padding-top:16px;padding-bottom:16px;}
.card .image{overflow:hidden;margin-bottom:20px;}
.card .image img{width:100%;height:100%;object-fit:cover;}
.card .content{margin-bottom:20px;display:flex;flex-direction:column;}
.card .content .body{display:flex;flex-direction:column;flex-grow:1;
  justify-content:flex-end;align-items:flex-start;}
.card h2{font-size:22px;line-height:36px;letter-spacing:1px;margin:14px 0 16px;}
.card .content p{margin-bottom:20px;}
.card .content p:last-child{margin-bottom:0;}
.card .eng{margin-top:22px;color:var(--sub);font-size:13px;line-height:22px;}
.card .eng p{margin-bottom:14px;}
@media(min-width:768px){
  .card h2{font-size:26px;line-height:42px;}
  .card .image{height:46vh;}
}
/* 2段組は 1024px から。890px（iPhone Duo のインナー画面）やタブレット縦は
   1カラムのまま受ける。768で割ると画像も本文も350px級になって窮屈になるため */
@media(min-width:1024px){
  .card .in{display:flex;}
  .card .image{width:45.4545454545%;height:40vh;margin-bottom:0;}
  .card .content{width:45.4545454545%;margin-left:9.0909090909%;margin-bottom:0;}
  .card.reverse .in{flex-direction:row-reverse;}
  .card.reverse .image{margin-left:9.0909090909%;}
  .card.reverse .content{margin-left:0;}
}
@media(min-width:1024px){.card .image{height:56vh;}}

/* ============================================================
   画像の壁（scorpios .d_5-image-wall の実測値をそのまま）
     デスクトップ  .wall{display:flex; 左右padding 0}
       左帯 33.3333%  1枚目 62.5%／下58px    2枚目 50%／左25%
       中央 33.3333%  align-self:center      画像に padding 0 15%
       右帯 33.3333%  1枚目 68.75%／左18.75%／下117px  2枚目 56.25%／左12.5%
     右の下マージンが左の倍あるので、左右で段がずれて点在して見える。
   ============================================================ */
.wall{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.wall .side{display:none;}
.wall .mid .image{margin-bottom:22px;}
.wall .mid img{width:100%;}
.wall .text{padding-top:6px;}
/* .card h2 と同じ扱い。指定が無いと見出しと本文がくっついていた */
.wall h2{font-size:22px;line-height:36px;letter-spacing:1px;margin:14px 0 16px;}
@media(min-width:768px){.wall h2{font-size:26px;line-height:42px;}}
@media(min-width:1024px){
  .wall{display:flex;padding-left:0;padding-right:0;}
  .wall .side{display:block;flex-shrink:0;width:33.3333333333%;}
  .wall .mid{align-self:center;margin:0;max-width:33.3333333333%;width:100%;
    padding-left:0;padding-right:0;}
  .wall .mid .image{padding-left:15%;padding-right:15%;margin-bottom:32px;}
  .wall .text{padding-top:12px;}

  .wall .side.l img:first-child{max-width:62.5%;margin-bottom:58px;}
  .wall .side.l img:last-child{max-width:50%;margin-left:25%;}
  .wall .side.r img:first-child{max-width:68.75%;margin-left:18.75%;margin-bottom:117px;}
  .wall .side.r img:last-child{max-width:56.25%;margin-left:12.5%;}
}

/* ============================================================
   一日 — 左見出しが貼り付く（scorpios .m_034_stickySidebar）
   ============================================================ */
.sticky .in{border-top:1px solid var(--line);padding-top:15px;}
.sticky .side .tag{display:block;margin-bottom:18px;}
.sticky .side .note{color:var(--sub);font-size:12px;line-height:20px;max-width:17em;}
.sticky .side .note.live{color:var(--cool);margin-top:16px;}
/* スマホでは左見出しと本文が縦に並ぶので、間を空ける */
.sticky .side{margin-bottom:44px;}
@media(min-width:1024px){.sticky .side{margin-bottom:0;}}
@media(min-width:1024px){
  .sticky .in{display:flex;}
  .sticky .side{width:25%;flex-shrink:0;}
  .sticky .side .inner{position:sticky;top:92px;}
  .sticky .main{flex:1;padding-left:4.5454545455%;}
}

.day dl{display:grid;grid-template-columns:5.6em 1fr;gap:0 22px;max-width:38em;}
.day dt{font-family:var(--mono);font-size:12px;letter-spacing:.6px;color:var(--sub);
  padding:16px 0;border-top:1px solid var(--line);white-space:nowrap;}
.day dd{padding:16px 0;border-top:1px solid var(--line);font-size:15px;line-height:27px;}
.day dt.mark{color:var(--warm);}
.day dd.mark{color:var(--ink);font-size:17px;font-weight:700;}
.day dd .e{display:block;margin-top:2px;color:var(--sub);font-size:12px;line-height:20px;
  font-family:"Nanum Myeongjo",serif;letter-spacing:.28px;}
.day .clock{display:block;margin-top:3px;font-family:var(--mono);font-size:14px;
  letter-spacing:.6px;color:var(--ink);}
.day dt.mark .clock{color:var(--warm);font-weight:500;}
.day.has-clock dt{padding-bottom:14px;}
.day .note{margin-top:40px;color:var(--sub);font-size:13px;line-height:22px;max-width:38em;}
@media(max-width:519px){
  .day dl{grid-template-columns:4.8em 1fr;gap:0 14px;}
  .day dt{font-size:11px;} .day dd{font-size:14px;} .day dd.mark{font-size:15.5px;}
}

/* ============================================================
   条件 — テキストリスト（scorpios .m_0131_textlist）
   各項目が border-top で区切られ、最初の1つだけ罫が透明
   向こうの寸法：見出し12px/600/字間1.44px、本文16px/字間0.48px/行間1.375
   ============================================================ */
.list{max-width:720px;}
.list .item{border-top:1px solid var(--line);padding:32px 0;}
.list .item:first-child{border-top-color:transparent;padding-top:0;}
.list .item h3{font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:1.44px;line-height:1.25;text-transform:uppercase;color:var(--cool);}
.list .item .body{margin-top:12px;}
.list .item .body p{font-size:16px;letter-spacing:.48px;line-height:26px;}
.list .item .e{display:block;margin-top:8px;color:var(--sub);font-size:13px;line-height:21px;}
@media(min-width:768px){.list .item{padding:40px 0;}}

/* ============================================================
   映像 — 本編はリンクで開く（星のや型）
   ============================================================ */
.film .frame{position:relative;display:block;overflow:hidden;background:#000;}
.film .frame img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.58);
  transition:filter .5s ease,transform 1.2s ease;}
.film .frame:hover img{filter:brightness(.74);transform:scale(1.015);}
.film .play{position:absolute;left:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);
  display:flex;align-items:center;gap:16px;color:#fff;}
.film .play .ring{width:52px;height:52px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;}
.film .play .ring::after{content:"";width:0;height:0;margin-left:3px;
  border-left:11px solid #fff;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;}
.film .play span{font-family:var(--mono);font-size:11px;letter-spacing:3px;}
.film figcaption{margin-top:16px;color:var(--sub);font-family:var(--mono);font-size:11px;letter-spacing:1.2px;}
.modal{position:fixed;inset:0;z-index:200;background:rgba(4,9,11,.96);
  display:none;align-items:center;justify-content:center;padding:24px;}
.modal.on{display:flex;}
.modal video{width:min(1180px,100%);max-height:86svh;}
.modal .close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;opacity:.8;cursor:pointer;}
.modal .close:hover{opacity:1;}

/* ============================================================
   記録 — グリッド（全幅）
   ============================================================ */
.grid{column-count:2;column-gap:10px;padding:0 10px;}
@media(min-width:768px){.grid{column-count:3;column-gap:12px;padding:0 12px;}}
@media(min-width:1200px){.grid{column-count:4;column-gap:16px;padding:0 16px;}}
.grid img{width:100%;margin-bottom:8px;break-inside:avoid;}
@media(min-width:768px){.grid img{margin-bottom:12px;}}
@media(min-width:1200px){.grid img{margin-bottom:16px;}}

/* ============================================================
   締めの暗いカード（scorpios .m_029_landingcard_only_text.dark）
   ============================================================ */
.dark{position:relative;overflow:hidden;}
.dark .bg{position:absolute;inset:0;}
.dark .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(1.05);}
.dark .in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:90px var(--pad);}
@media(min-width:768px){.dark .in{padding:150px var(--pad);}}
@media(min-width:1024px){.dark .in{padding:200px var(--pad);}}
.dark .body{max-width:30em;}
.dark h2{font-size:26px;line-height:42px;letter-spacing:1px;margin:16px 0 22px;}
@media(min-width:768px){.dark h2{font-size:34px;line-height:54px;}}
.dark{color:#fff;}
.dark p{font-size:15px;line-height:28px;color:#DCE6E8;}
.dark .eng{margin-top:20px;color:#9FB3B8;font-size:13px;line-height:22px;}

/* ============================================================
   志願フォーム — サイト内で完結
   ============================================================ */
.apply .lead{max-width:34em;}
.apply .lead .note{margin-top:22px;color:var(--sub);font-size:13px;line-height:22px;}
.form{margin-top:48px;max-width:34em;}
.field{margin-bottom:34px;}
.field > label{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;color:var(--sub);}
.field input[type=text],.field input[type=email]{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--font);font-size:16px;line-height:28px;letter-spacing:.4px;
  padding:6px 0 12px;border-radius:0;transition:border-color .3s ease;}
.field input:focus{outline:none;border-bottom-color:var(--cool);}
.field input::placeholder{color:#A4ADAA;}
.field .hint{margin-top:10px;font-size:12px;line-height:20px;color:var(--sub);}
.field .err{margin-top:10px;font-size:12px;line-height:20px;color:var(--warm);display:none;}
.field.invalid .err{display:block;}
.field.invalid input,.field.invalid .cal{border-bottom-color:var(--warm);}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.cal{border-bottom:1px solid var(--line);padding-bottom:14px;transition:border-color .3s ease;}
/* 月名を左、送りを右に置く（HTMLの並びは order で入れ替える）。
   30px角で左端に寄せていたときは、矢印が飾りに見えて
   10月以降に行けることに気づかれなかった。44px角＝指で押せる大きさにし、
   押せるほうには色を入れて操作だと分かるようにしている */
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.cal-head .mo{order:1;margin-right:auto;font-family:var(--mono);font-size:12px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);}
.cal-head #cal-prev{order:2;}
.cal-head #cal-next{order:3;}
.cal-head button{background:none;border:1px solid var(--cool);color:var(--cool);
  width:44px;height:44px;cursor:pointer;font-family:var(--mono);font-size:14px;line-height:1;
  transition:background .3s ease,border-color .3s ease,color .3s ease;}
.cal-head button:hover:not(:disabled){background:var(--cool);color:#fff;}
.cal-head button:disabled{border-color:var(--line);color:var(--sub);opacity:.35;cursor:default;}
/* 何月から何月まで受けているのかを、月送りを押す前に分かるようにする */
.cal-range{margin-bottom:16px;font-size:13px;line-height:22px;color:var(--sub);}
.cal-range .en{display:block;font-size:12px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-grid .wd{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--sub);
  text-align:center;padding:8px 0;text-transform:uppercase;}
.cal-grid button{background:none;border:1px solid transparent;color:var(--ink);
  font-family:var(--mono);font-size:13px;aspect-ratio:1;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;}
.cal-grid button:hover:not(:disabled){border-color:var(--cool);}
.cal-grid button:disabled{color:#BFC7C3;cursor:default;}
.cal-grid button.on{background:var(--cool);color:#fff;border-color:var(--cool);}
.cal-grid .pad{aspect-ratio:1;}
.cal-picked{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:1px;
  color:var(--cool);min-height:20px;}

.btn{display:inline-block;margin-top:16px;padding:19px 46px 17px;background:none;
  border:1px solid var(--cool);color:var(--cool);font-family:var(--mono);font-size:12px;
  letter-spacing:2.4px;cursor:pointer;transition:background .3s ease,color .3s ease;}
.btn:hover{background:var(--cool);color:#fff;}
.btn[disabled]{opacity:.45;cursor:default;}
.btn[disabled]:hover{background:none;color:var(--cool);}
.form-msg{margin-top:28px;font-size:14px;line-height:26px;display:none;}
.form-msg.on{display:block;}
.form-msg.ok{color:var(--cool);}
.form-msg.ng{color:var(--warm);}
.form.sent .field,.form.sent .btn{display:none;}

/* ============================================================
   フッター
   ============================================================ */
.foot{border-top:1px solid var(--line);}
.foot .in{max-width:var(--maxw);margin:0 auto;padding:70px var(--pad) 46px;}
@media(min-width:768px){.foot .in{padding:86px var(--pad) 46px;}}
.foot-logo{width:auto;height:110px;margin:0 0 26px;}
.foot nav{margin-top:18px;display:flex;gap:10px 22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;}
/* 指で押せる高さを確保する */
.foot nav a{padding:9px 0;}
.foot .meta{margin-top:34px;color:var(--sub);font-family:var(--mono);font-size:11px;
  letter-spacing:1.2px;line-height:20px;}

/* ============================================================
   リビール
   ============================================================ */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s ease;}
.js .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .hero video{display:none;}
  .hero img.fallback{display:block;}
}

/* ============================================================
   宿泊（LOOP / KISIN）
   2枚組の写真＋説明。PCでは横並び、SPでは縦積み。
   ============================================================ */
.stay .row{margin-bottom:56px;}
.stay .row:last-child{margin-bottom:0;}
.stay .pics{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:24px;}
.stay .pics img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.stay .pics img.tall{aspect-ratio:2/3;}
.stay h3{font-size:20px;line-height:32px;letter-spacing:1px;margin-bottom:14px;}
.stay h3 .en{display:block;font-family:var(--mono);font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--cool);margin-bottom:8px;}
.stay .txt{max-width:34em;}
.stay .price{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--sub);}
.stay .eng{margin-top:18px;color:var(--sub);font-size:13px;line-height:21px;}
.stay .ask{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--sub);font-size:13px;line-height:22px;max-width:34em;}
@media(min-width:768px){
  .stay .pics{grid-template-columns:1fr 1fr;gap:12px;}
  .stay .row{margin-bottom:80px;}
}
@media(min-width:1024px){
  .stay .row{display:flex;gap:6%;align-items:flex-start;}
  .stay .row .pics{width:52%;flex-shrink:0;margin-bottom:0;}
  .stay .row .body{flex:1;}
  .stay .row.rev{flex-direction:row-reverse;}
}

/* ============================================================
   「まだ決まっていない」— カレンダーを畳んで、日付なしでも送れるようにする
   ============================================================ */
.undecided{display:flex;align-items:flex-start;gap:11px;margin-top:18px;cursor:pointer;
  font-size:14px;line-height:24px;}
.undecided{padding:6px 0;}
.undecided input{appearance:none;width:20px;height:20px;flex:0 0 auto;margin-top:2px;
  border:1px solid var(--line);background:transparent;transition:all .2s ease;}
.undecided input:checked{background:var(--cool);border-color:var(--cool);}
.undecided input:checked::after{content:"";display:block;width:6px;height:11px;margin:2px 0 0 5px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.undecided:hover input{border-color:var(--cool);}
.undecided .en{color:var(--sub);font-size:12px;}
/* チェックが入ったらカレンダーを畳む */
.cal.off{max-height:0;overflow:hidden;opacity:0;padding:0;border-bottom-color:transparent;
  pointer-events:none;transition:max-height .35s ease,opacity .25s ease;}
.cal{max-height:720px;opacity:1;transition:max-height .35s ease,opacity .25s ease;}

/* ご希望・ご質問（自由記述） */
.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--font);font-size:16px;line-height:28px;letter-spacing:.4px;
  padding:6px 0 12px;border-radius:0;resize:vertical;min-height:96px;
  transition:border-color .3s ease;}
.field textarea:focus{outline:none;border-bottom-color:var(--cool);}
/* 「まだ日程は決まっていません」でカレンダーを畳むとき、その説明文も一緒に畳む */
.hint.off-hint{max-height:0;margin:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .2s ease,margin .3s ease;}
.hint{max-height:120px;transition:max-height .3s ease,opacity .2s ease,margin .3s ease;}

/* 案B：質問と答え */
.qa{max-width:40em;}
.qa .q{border-top:1px solid var(--line);padding:30px 0;}
.qa .q:first-child{border-top-color:transparent;padding-top:0;}
.qa h3{font-size:17px;line-height:30px;letter-spacing:.6px;margin-bottom:12px;}
.qa p{font-size:15px;line-height:28px;color:var(--ink);margin-bottom:0;}
.qa .e{display:block;margin-top:10px;color:var(--sub);font-size:13px;line-height:21px;}
@media(min-width:768px){.qa .q{padding:36px 0;}}

/* 実際のところ：項目を立てつつ、説明は人に向けた文で */
.facts{max-width:38em;}
.facts dt{
  font-size:15px;line-height:26px;letter-spacing:1px;color:var(--cool);
  border-top:1px solid var(--line);padding-top:26px;margin-bottom:10px;}
.facts dt:first-of-type{border-top-color:transparent;padding-top:0;}
.facts dd{font-size:15px;line-height:28px;margin-bottom:30px;}
.facts dd:last-child{margin-bottom:0;}
.facts dd .e{display:block;margin-top:10px;color:var(--sub);font-size:13px;line-height:21px;
  font-family:"Nanum Myeongjo",serif;letter-spacing:.28px;}
@media(min-width:768px){
  .facts dt{padding-top:32px;}
  .facts dd{margin-bottom:36px;}
}

/* Turnstile（設定されているときだけ出る） */
.ts-slot{display:none;}
.ts-slot.on{display:block;margin-top:26px;}

/* ============================================================
   ニセコ（.snow）— 淡い雪の写真なので、暗く落とさず明るいまま使う。
   文字は濃色。写真の抜けている右側へ寄せる。
   ============================================================ */
.snow{position:relative;overflow:hidden;color:var(--ink);}
.snow .bg{position:absolute;inset:0;}
.snow .bg img{width:100%;height:100%;object-fit:cover;}
/* 左から白をかぶせて、右の抜けを残したまま文字の下を整える */
.snow::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(244,246,247,.10) 0%,rgba(244,246,247,.62) 42%,rgba(244,246,247,.88) 100%);}
.snow .in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:120px var(--pad);}
@media(min-width:768px){.snow .in{padding:170px var(--pad);}}
@media(min-width:1024px){.snow .in{padding:220px var(--pad);}}
.snow .body{max-width:28em;margin-left:auto;}
.snow .tag{color:var(--cool);}
.snow h2{font-size:26px;line-height:42px;letter-spacing:1px;margin:16px 0 22px;font-weight:400;}
@media(min-width:768px){.snow h2{font-size:34px;line-height:54px;}}
.snow p{font-size:15px;line-height:28px;}
.snow .pre{margin-top:26px;font-size:14px;line-height:26px;color:var(--sub);}
.snow .pre a{color:var(--cool);text-decoration:underline;}
.snow .eng{margin-top:22px;color:var(--sub);font-size:13px;line-height:22px;}

/* 以前インラインで書いていた分。CSP から style の unsafe-inline を外すためクラス化 */
.lead-note{font-size:18px;line-height:32px;}
.ask a,.pre a,.stay .ask a{text-decoration:underline;}