/* Resort Club ORANGE Q 公式サイト
   トークン = usuke-design-language §6 ORANGE Q（紙・墨・オレンジは点で使う）
   モバイルファースト。PCは min-width:900px で追加するだけ */
:root{
  --paper:#FBF8F3; --kinari:#F2EDE4; --ink:#2A2318; --sub:#6B6257; --line:#E5DDCE; --orange:#E8621E; --white:#fff;
  --min:'Noto Serif JP',serif; --go:'Noto Sans JP',system-ui,sans-serif; --en:'Cinzel',serif;
  --num:'Cinzel','Didot',serif;
  --gut:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--go);font-size:15px;line-height:2;letter-spacing:.03em;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.sp{display:inline}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:640px}

.kick{font-family:var(--en);font-size:12px;letter-spacing:.34em;color:var(--orange)}
.kick-w{color:#fff;opacity:.85}
.rule{width:40px;height:2px;background:var(--orange);margin:18px 0 22px}
.h2{font-family:var(--min);font-weight:400;font-size:26px;line-height:1.6;letter-spacing:.05em}
.h2-s{font-size:22px}
.h3{font-family:var(--min);font-weight:400;font-size:17px;letter-spacing:.05em;margin-bottom:10px}
.body{margin-top:22px;font-size:15px;line-height:2.1}
.cap{font-size:11px;color:var(--sub);letter-spacing:.02em;line-height:1.7}
.cap-w{color:#fff;opacity:.8}

.btn{display:inline-block;margin-top:30px;padding:15px 34px;border:1px solid var(--ink);border-radius:999px;font-size:14px;letter-spacing:.12em;text-decoration:none;background:var(--ink);color:#fff;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn-light{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn-light:hover{background:rgba(255,255,255,.12);color:#fff}

/* ヘッダー */
.hd{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut)}
.logo{font-family:var(--en);font-size:18px;letter-spacing:.2em;color:#fff;text-decoration:none}
.logo span,.hero-logo span,.ft-logo span{color:var(--orange)}
.nav{display:none}
.hd-cta{font-size:12px;letter-spacing:.12em;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 16px}

/* ヒーロー */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero img{object-position:36% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,13,8,.72) 0%,rgba(18,13,8,.25) 45%,rgba(18,13,8,.35) 100%)}
.hero-in{position:relative;z-index:1;padding:0 var(--gut) 76px}
.hero-logo{font-family:var(--en);font-weight:400;font-size:44px;letter-spacing:.18em;line-height:1.1;margin-top:14px}
.hero-sub{font-family:var(--en);font-size:12px;letter-spacing:.5em;margin-top:10px;opacity:.9}
.hero-copy{font-family:var(--min);font-size:21px;letter-spacing:.12em;line-height:1.9;margin-top:34px;text-shadow:0 0 10px rgba(0,0,0,.4)}
.hero-cap{position:absolute;right:var(--gut);bottom:18px;z-index:1}

/* コンセプト */
.concept{padding:96px 0 0}
.concept-txt{padding:0 var(--gut)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:44px}
.facts div{border-top:1px solid var(--ink);padding-top:12px}
.facts dt{font-family:var(--num);font-size:34px;line-height:1.1}
.facts dt small{font-family:var(--min);font-size:13px;margin-left:4px}
.facts dd{font-size:11px;color:var(--sub);letter-spacing:.1em;margin-top:6px;line-height:1.6}
.concept-img{position:relative;margin-top:56px}
.concept-img img{width:100%;height:78vw;object-fit:cover;object-position:62% 50%}
.concept-img figcaption{position:absolute;left:var(--gut);bottom:12px}

/* ロケーション */
.loc{position:relative;margin-top:96px;padding:56vw var(--gut) 40px}
.loc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.loc-panel{position:relative;background:var(--paper);padding:34px 26px 26px}
.spec{display:grid;grid-template-columns:64px 1fr;margin-top:22px;border-top:1px solid var(--line)}
.spec dt,.spec dd{border-bottom:1px solid var(--line);padding:10px 0;font-size:13px;line-height:1.7}
.spec dt{color:var(--sub);font-size:12px;letter-spacing:.1em}
.loc-cap{position:absolute;right:var(--gut);top:14px;text-shadow:0 0 4px rgba(0,0,0,.5)}

/* 過ごし方 */
.exp{padding-top:96px}
.exp-hero{position:relative}
.exp-hero img{width:100%;height:92vw;object-fit:cover;object-position:40% 50%}
.exp-hero figcaption{position:absolute;left:var(--gut);bottom:12px}
.exp-side{padding:48px var(--gut) 0}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
.thumbs .wide{grid-column:1 / span 2}
.thumbs img{width:100%;height:34vw;object-fit:cover;border-radius:6px}
.thumbs .wide img{height:44vw;object-position:50% 60%}
.thumbs figcaption{font-size:11px;color:var(--sub);letter-spacing:.1em;margin-top:6px}

/* 会員権 */
.mem{padding:110px 0 0}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.plan{border-top:3px solid var(--ink);padding:18px 0 4px}
.plan .en{font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--sub)}
.plan h3{font-family:var(--min);font-weight:400;font-size:16px;letter-spacing:.06em;margin-top:2px}
.plan dl{display:grid;grid-template-columns:auto 1fr;margin-top:14px}
.plan dt,.plan dd{border-top:1px solid var(--line);padding:8px 0;font-size:12px}
.plan dt{color:var(--sub)}
.plan dd{text-align:right}
.plan dd b{font-family:var(--num);font-weight:400;font-size:20px;margin-right:3px}
.plan-main{grid-column:1 / span 2;background:var(--ink);color:#fff;border-top-color:var(--orange);padding:22px 20px 10px}
.plan-main .en{color:var(--orange)}
.plan-main dt{color:rgba(255,255,255,.62)}
.plan-main dt,.plan-main dd{border-top-color:rgba(255,255,255,.18)}
.mem-points{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.mem-points li{border-bottom:1px solid var(--line);padding:14px 0 14px 22px;position:relative;font-size:14px;line-height:1.8}
.mem-points li::before{content:"";position:absolute;left:0;top:25px;width:10px;height:2px;background:var(--orange)}
.mem-points b{font-weight:500}
.mem-note{margin-top:22px;font-size:13px;color:var(--sub)}

/* スケジュール */
.sch{padding-top:110px}
.steps{list-style:none;margin-top:44px;position:relative}
.steps::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--ink)}
.steps li{position:relative;padding:0 0 30px 34px;display:flex;flex-direction:column}
.steps .when{font-family:var(--num);font-size:20px;line-height:1.2}
.steps .dot{position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink);background:var(--paper)}
.steps b{font-family:var(--min);font-weight:400;font-size:16px;letter-spacing:.05em;margin-top:6px}
.steps small{font-size:12px;color:var(--sub)}
.steps .key .when{color:var(--orange);font-size:28px}
.steps .key .dot{background:var(--orange);border-color:var(--orange);width:15px;height:15px;left:-2px;top:10px}
.sch-strip{margin-top:60px}
.sch-strip img{width:100%;height:46vw;object-fit:cover}

/* お問い合わせ */
.contact{padding:110px 0 40px}
.form{margin-top:36px;display:grid;gap:18px}
.f{display:grid;gap:8px;font-size:13px;letter-spacing:.06em}
.f em{font-style:normal;font-size:10px;color:#fff;background:var(--orange);border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:1px}
.f input,.f select,.f textarea{font:inherit;font-size:16px;letter-spacing:.02em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree{display:flex;gap:10px;align-items:center;font-size:13px}
.agree input{width:18px;height:18px;accent-color:var(--orange)}
.btn-submit{margin-top:6px;cursor:pointer;font:inherit;font-size:14px;letter-spacing:.12em;justify-self:start}
.btn-submit[disabled]{opacity:.5;cursor:wait}
.form-msg{font-size:14px;min-height:1.5em}
.form-msg.ok{color:#2F7D4F}
.form-msg.ng{color:#B3261E}
.privacy{padding:30px 0 80px}
.privacy p{font-size:13px;color:var(--sub);line-height:1.9}

/* フッター */
.ft{background:var(--ink);color:#fff;padding:56px var(--gut) 40px;text-align:center}
.ft-logo{font-family:var(--en);font-size:22px;letter-spacing:.24em}
.ft-name{font-size:12px;letter-spacing:.14em;margin-top:10px;opacity:.85}
.ft .cap{color:rgba(255,255,255,.55);max-width:640px;margin:22px auto 0}
.ft-copy{font-size:11px;opacity:.5;margin-top:18px;letter-spacing:.1em}

/* ───────── PC ───────── */
@media (min-width:900px){
  :root{--gut:48px}
  .sp{display:none}
  body{font-size:16px}
  .hd{padding:26px var(--gut)}
  .nav{display:flex;gap:30px;margin-left:auto;margin-right:34px}
  .nav a{font-size:13px;letter-spacing:.14em;color:#fff;text-decoration:none;opacity:.9}
  .nav a:hover{opacity:1}
  .hd-cta{font-size:13px;padding:9px 22px}
  .hero::after{background:linear-gradient(90deg,rgba(18,13,8,.7) 0%,rgba(18,13,8,.35) 38%,rgba(18,13,8,0) 62%)}
  .hero-in{padding:0 var(--gut) 96px}
  .hero-logo{font-size:72px}
  .hero-copy{font-size:26px}
  .h2{font-size:34px}
  .h2-s{font-size:28px}
  .concept{display:grid;grid-template-columns:1fr 45%;align-items:stretch;padding:0}
  .concept-txt{padding:130px var(--gut) 110px calc((100vw - 1080px)/2 + var(--gut))}
  .concept .body{max-width:520px}
  .facts{grid-template-columns:repeat(4,auto);justify-content:start;gap:28px}
  .facts div{min-width:96px}
  .facts dt{font-size:40px}
  .concept-img{margin-top:0}
  .concept-img img{height:100%;min-height:720px}
  .loc{margin-top:0;min-height:760px;padding:0;display:flex;align-items:flex-end}
  .loc-panel{margin:0 0 72px calc((100vw - 1080px)/2 + var(--gut));width:470px;padding:44px 44px 36px}
  .exp{display:grid;grid-template-columns:58% 1fr;padding-top:0;align-items:stretch}
  .exp-hero img{height:100%;min-height:820px}
  .exp-side{padding:130px var(--gut) 90px 56px;max-width:560px}
  .thumbs img{height:130px}
  .thumbs .wide img{height:170px}
  .mem{padding-top:140px}
  .plans{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:18px;align-items:end}
  .plan-main{grid-column:auto;padding:28px 24px 14px}
  .plan h3{font-size:18px}
  .plan dd b{font-size:24px}
  .mem-points{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .sch{padding-top:140px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px}
  .steps::before{left:0;right:0;top:44px;bottom:auto;width:auto;height:1px}
  .steps li{padding:0 20px 0 0}
  .steps .when{height:36px;display:flex;align-items:flex-end}
  .steps .dot{position:static;margin:2px 0 14px -1px}
  .steps .key .dot{margin:0 0 12px -3px}
  .steps .key .when{font-size:34px}
  .sch-strip{margin-top:90px}
  .sch-strip img{height:380px;object-position:50% 55%}
  .contact{padding-top:140px}
}

/* 追加 9/25 定例反映 */
.hero-lead{font-size:13px;letter-spacing:.16em;margin-top:12px;opacity:.9}
.model{padding-top:110px}
.model-stage{position:relative;margin-top:36px;background:radial-gradient(120% 90% at 50% 0%,#EEF2F6 0%,var(--kinari) 70%)}
model-viewer{width:100%;height:62vh;min-height:320px;--poster-color:transparent;--progress-bar-color:var(--orange)}
.model-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:inherit;font-size:14px;letter-spacing:.12em;padding:14px 28px;border-radius:999px;border:0;background:var(--ink);color:#fff;cursor:pointer}
.model-load[hidden]{display:none}
.model-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.model-ctl button{font:inherit;font-size:13px;letter-spacing:.08em;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.model-ctl button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.uses{margin-top:40px;background:var(--kinari);padding:26px 24px}
.uses ul{list-style:none;margin-top:6px}
.uses li{padding:8px 0;font-size:14px;line-height:1.8;border-bottom:1px solid var(--line)}
.uses li:last-child{border-bottom:0}
.uses b{font-family:var(--min);font-weight:500;display:block;font-size:15px}
@media (min-width:900px){
  .hero-lead{font-size:15px}
  .model{padding-top:140px}
  model-viewer{height:min(70vh,640px)}
  .uses ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
  .uses li{border-bottom:0;border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}