/* =========================================================
   gyousho.com トップページ（2026-10 改装）
   正本のデザイン案: sites/clean-ishikawa/_design/top_mockup.html
   1〜2画面目: upnode.jp 型／中盤「選ばれる理由」: くまざわ型／コラム: 湘南クラウド型
   約束ごと: 枠線なし・影なし・角丸30px・文字の太さは400/500（くまざわ型の見出しのみ700）
   色・書体の変数は chrome.css の :root
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ja);font-weight:400;color:var(--text);background:#fff;font-size:15px;line-height:1.85;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* 画像（読み込み前は淡い青を敷く） */
.ph{display:block;width:100%;height:auto;object-fit:cover;object-position:center;background:#d9e8f7}

/* ---------- 1画面目 ---------- */
.fv{background:var(--blue);color:#fff;position:relative;overflow:hidden;padding-top:84px}
.fv h1,.fv p{margin:0}
.fv-wave{position:absolute;right:-20vw;top:-30vw;width:70vw;height:70vw;border-radius:50%;background:rgba(255,255,255,.07)}
.fv-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:calc(100svh - 84px);padding:40px 0 72px}
.fv-word{font-family:var(--en);font-weight:400;font-size:clamp(48px,6.6vw,92px);line-height:.95;letter-spacing:-.01em}
.fv-sub{font-family:var(--en);font-size:12px;letter-spacing:.04em;margin-top:12px}
.fv-sub span{font-family:var(--ja);margin-left:4px}
.fv h1{font-family:var(--hd);font-weight:500;font-size:clamp(30px,3.8vw,48px);line-height:1.45;letter-spacing:.08em;margin:40px 0 22px}
.fv-lead{font-size:16px;line-height:1.95;font-weight:500;max-width:30em}
.fv-cta{position:relative;display:inline-block;margin-top:44px}
.fv-cta .pill{padding:20px 46px;font-size:17px;min-width:320px;justify-content:center}
.zero{position:absolute;left:-18px;top:-40px;width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--blue-d);display:grid;place-items:center;text-align:center;font-size:10px;line-height:1.1}
.zero b{display:block;font-family:var(--en);font-weight:500;font-size:22px}
.fv-photo{position:relative}
.fv-photo .ph{aspect-ratio:5/6;border-radius:var(--r)}
.fv-points{position:absolute;left:-28px;bottom:32px;display:grid;gap:8px}
.fv-points li{list-style:none;background:#fff;color:var(--blue-d);border-radius:999px;padding:9px 20px;font-size:14px;font-weight:500;width:max-content}

/* ---------- 2画面目：案内カードの帯 ---------- */
.rail{position:relative;background:var(--blue);padding:8px 0 72px}
.rail-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:72px;padding:0 72px;scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}
.rc{flex:0 0 400px;scroll-snap-align:start;background:#fff;border-radius:var(--r);padding:22px 26px;display:grid;grid-template-columns:1fr 104px;gap:16px;align-items:center}
.rc .tag{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--blue);color:#fff;font-size:13px;line-height:1;border-radius:999px;padding:7px 14px}
.rc .lead{display:block;color:var(--blue-d);font-size:14px;font-weight:500;margin-top:14px;line-height:1.4;white-space:nowrap}
.rc .ttl{display:block;color:var(--blue-d);font-family:var(--hd);font-weight:500;font-size:22px;line-height:1.3;margin-top:2px}
.rc .go{display:inline-flex;align-items:center;gap:8px;font-size:12px;margin-top:12px;color:var(--muted)}
.rc .go i,.more i{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px}
.rc .ph{width:104px;aspect-ratio:1;border-radius:18px}
.rail-btn{position:absolute;top:50%;margin-top:-32px;width:40px;height:64px;border:0;border-radius:12px;background:#fff;color:var(--blue-h);font-size:20px;cursor:pointer}
.rail-prev{left:16px}.rail-next{right:16px}

/* ---------- セクション見出し（upnode型） ---------- */
.sec{padding:120px 0}
.bg-sky{background:var(--sky)}
.bg-blue{background:var(--blue);color:#fff}
.en{font-family:var(--en);font-weight:300;font-size:clamp(56px,7vw,88px);line-height:.9;color:var(--blue-h);letter-spacing:-.01em}
.bg-blue .en{color:#fff}
.en-sub{font-size:13px;color:var(--blue-h);margin-top:12px;letter-spacing:.08em}
.bg-blue .en-sub{color:#fff}
.catch{font-family:var(--hd);font-weight:400;font-size:clamp(24px,2.8vw,32px);line-height:1.5;color:var(--blue-h);letter-spacing:.06em;margin-top:44px}
.desc{margin-top:18px;max-width:34em;color:var(--muted)}
.catch-s{font-size:clamp(20px,2vw,24px);line-height:1.8}
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}

/* ---------- Message（代表の想い。くまざわ「Our Mind」の位置） ---------- */
.msg{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center}
.msg .ph{aspect-ratio:4/5;border-radius:var(--r)}
.msg-years{display:flex;align-items:baseline;gap:10px;margin-top:40px;color:var(--blue-h)}
.msg-years b{font-family:var(--en);font-weight:300;font-size:96px;line-height:.9}
.msg-years span{font-family:var(--hd);font-weight:500;font-size:18px;letter-spacing:.08em}
.msg .catch{margin-top:20px}
.nb{display:inline-block}
.msg-body{margin-top:24px;color:var(--muted);line-height:2.1}
.msg-body p+p{margin-top:1em}
.msg-sign{margin-top:28px;font-family:var(--hd);font-weight:500;font-size:20px;letter-spacing:.12em}
.msg-sign small{display:block;font-family:var(--ja);font-size:12px;color:var(--muted);letter-spacing:.06em}

/* ---------- Service ---------- */
.svc{display:grid;gap:20px}
.svc-card{display:grid;grid-template-columns:220px 1fr;gap:28px;background:#fff;border-radius:var(--r);padding:26px;align-items:center}
.svc-card .ph{aspect-ratio:1;border-radius:20px}
.svc-card .tag{display:inline-block;background:var(--sky);color:var(--blue-d);font-size:12px;border-radius:999px;padding:4px 12px;margin-right:6px}
.svc-card h3{font-family:var(--hd);font-weight:500;font-size:24px;color:var(--blue-d);margin:10px 0 8px;letter-spacing:.06em}
.svc-card p{font-size:14px;color:var(--muted);line-height:1.8}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--blue-d)}

/* ---------- Feature（くまざわ型：山形の区切り・中央見出し・白カード・暖色の線画アイコン） ---------- */
.kf{position:relative;background:#e3f1f6;padding:40px 0 150px}
.kf-edge{position:absolute;left:0;width:100%;height:70px;display:block}
.kf-edge.top{top:-69px}.kf-edge.bot{bottom:-1px}
.kf-head{text-align:center}
.kf-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;font-family:var(--en);font-weight:500;font-size:13px}
.kf-en{font-family:var(--en);font-weight:500;font-size:14px;color:#2ea7e0;margin-top:6px;letter-spacing:.04em}
.kf-ttl{display:inline-flex;align-items:center;gap:22px;font-family:var(--hd);font-weight:700;font-size:clamp(24px,2.6vw,30px);color:#123f78;letter-spacing:.1em;margin-top:6px}
.kf-ttl::before,.kf-ttl::after{content:"";width:0;height:26px;border-left:2px dashed #2ea7e0}
.kf-ttl::before{transform:rotate(-24deg)}.kf-ttl::after{transform:rotate(24deg)}
.kf-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1020px;margin-inline:auto;gap:20px;margin-top:44px}
.kf-card{background:#fff;border-radius:18px;padding:44px 20px 40px;text-align:center}
.kf-card svg{width:60px;height:60px;stroke:#e4a428;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kf-card h3{font-family:var(--hd);font-weight:700;font-size:19px;line-height:1.75;letter-spacing:.1em;color:#231815;margin-top:22px}
.kf-card h3 em{font-style:normal;color:#123f78}
.kf-more{text-align:center;margin-top:44px}
.kf-more a{display:inline-flex;align-items:center;gap:10px;background:#2ea7e0;color:#fff;border-radius:999px;padding:11px 24px;font-size:14px;font-weight:500}
.kf-mascot{position:absolute;left:9%;bottom:30px;width:96px;height:96px;z-index:1;pointer-events:none}
@media (max-width:860px){.kf-mascot{left:20px;width:72px;height:72px;bottom:34px}}

/* ---------- For / Flow ---------- */
.for{background:#fff;color:var(--text);border-radius:var(--r);padding:40px 44px}
.for h3{font-family:var(--hd);font-weight:500;font-size:20px;color:var(--blue-d);margin-bottom:14px}
.for li{list-style:none;padding:12px 0 12px 30px;position:relative;font-size:15px}
.for li+li{border-top:1px dashed #cfdced}
.for li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;border-radius:50%;background:var(--lime)}
.flow{display:grid;gap:14px;counter-reset:s}
.flow li{list-style:none;display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:center;background:rgba(255,255,255,.12);border-radius:22px;padding:20px 26px}
.flow li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--en);font-weight:300;font-size:40px;line-height:1}
.flow b{display:block;font-family:var(--hd);font-weight:500;font-size:18px;letter-spacing:.06em}
.flow span{font-size:14px;opacity:.9}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:16px}
.faq details{background:#fff;border-radius:var(--r);padding:6px 34px}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 24px;gap:12px;align-items:center;padding:20px 0;font-weight:500;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq .a::before{font-family:var(--en);font-weight:300;font-size:40px;line-height:1;color:var(--blue-h)}
.faq summary::before{content:"Q"}
.faq summary::after{content:"+";font-family:var(--en);font-weight:300;font-size:26px;color:var(--blue-h);text-align:right}
.faq details[open] summary::after{content:"−"}
.faq .a{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:0 0 24px;color:var(--muted)}
.faq .a::before{content:"A"}

/* ---------- Column（湘南クラウド型） ---------- */
.bg-cream{background:var(--cream)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:56px}
.col .ph{aspect-ratio:16/10;border-radius:14px;background:#efe9df;color:#8a7a62}
.col .meta{display:flex;gap:12px;align-items:center;margin-top:18px}
.col .cat{font-size:11px;color:#fff;background:#1a86c8;border-radius:2px;padding:2px 8px;line-height:1.6}
.col time{font-family:var(--en);font-size:12px;color:var(--muted)}
.col h3{font-family:var(--hd);font-weight:500;font-size:17px;line-height:1.7;letter-spacing:.08em;margin-top:12px}
.col p{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.pill-line{border:1px solid var(--blue-h);color:var(--blue-h)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contact .catch{color:#fff}
.contact p{margin-top:16px;opacity:.95}
.contact-box{background:#fff;color:var(--text);border-radius:var(--r);padding:40px;display:grid;gap:14px;text-align:center}
.contact-box .pill{justify-content:center;padding:20px;font-size:16px}
.contact-box .num{font-family:var(--en);font-size:34px;color:var(--blue-d);line-height:1.1}
.contact-box small{color:var(--muted);font-size:12px}

/* ---------- スマホ ---------- */
@media (max-width:860px){
  .fv{padding-top:68px}
  .msg{grid-template-columns:1fr;gap:36px}.msg .ph{aspect-ratio:4/3;object-position:center top}.msg-years b{font-size:72px}
  .fv-in{grid-template-columns:1fr;gap:36px;min-height:0;padding:28px 0 56px}
  .rail-track{padding:0 20px;scroll-padding-inline:20px}
  .fv-cta{display:block}.fv-cta .pill{min-width:0;width:100%}
  .fv-photo .ph{aspect-ratio:4/3}
  .fv-points{left:12px;bottom:12px}
  .rc{flex-basis:300px;grid-template-columns:1fr 80px}.rc .ph{width:80px}.rc .ttl{font-size:19px}
  .rail-btn{display:none}
  .sec{padding:84px 0}
  .split,.contact{grid-template-columns:1fr;gap:36px}
  .svc-card{grid-template-columns:1fr}.svc-card .ph{aspect-ratio:16/9}
  .kf-grid{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  .for{padding:28px 24px}.faq details{padding:4px 22px}
}
@media (max-width:700px){.fv-photo .ph{object-position:center 8%}}
@media (max-width:520px){.kf-card{padding:32px 12px}.kf-card h3{font-size:16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}