/* カナエル 共通スタイル（トップ・下層ページ共通） */
/* Layout: 写真を有機的な形で切り抜き、余白と大きな丸ゴシックで語る1カラム。悩みはLINE風の会話で見せ、相談の入口（LINE）につなげる */
:root{
  --bg:#f4f9f7; --surface:#ffffff; --tint:#e1f1ec; --tint-2:#e5f1f7; --mist:#eaf5f1;
  --ink:#1d3330; --muted:#566b67; --line-c:#d3e5df;
  --leaf:#2a7663; --leaf-deep:#0f4f40; --leaf-soft:#c8e5dc; --sky:#2f8cb5; --sky-ink:#23739a;
  --line:#06c755; --line-ink:#ffffff;
  --todo-bg:#fff4c2; --todo-ink:#7a5a00; --todo-bd:#e4c45a;
  --shadow:0 18px 50px rgba(24,84,74,.12);
  --shadow-s:0 6px 20px rgba(24,84,74,.10);
  --f-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-latin:"Quicksand","Zen Maru Gothic",sans-serif;
  --gutter-l:max(20px, env(safe-area-inset-left, 0px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px));
  --blob:58% 42% 46% 54% / 52% 44% 56% 48%;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.5;text-wrap:balance;margin:0}
p,figure,ul,ol{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
section{padding-block:clamp(84px,11vw,140px)}

/* セクションの境目の波線：セクションと同じ色の波を上（下）にはみ出させる */
.wave-top,.wave-bottom{position:relative;--wave-h:clamp(28px,4.5vw,64px);--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C220,10 470,4 720,38 C970,72 1210,74 1440,30 L1440,80 L0,80 Z'/%3E%3C/svg%3E")}
.wave-b{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C200,62 430,74 680,50 C930,26 1170,6 1440,44 L1440,80 L0,80 Z'/%3E%3C/svg%3E")}
.wave-top::before,.wave-bottom::after{content:"";position:absolute;left:0;right:0;height:var(--wave-h);background:inherit;pointer-events:none;-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat}
.wave-top::before{bottom:calc(100% - 1px)}
.wave-bottom::after{top:calc(100% - 1px);transform:scaleY(-1)}
.wave-flip.wave-top::before{transform:scaleX(-1)}
.wave-flip.wave-bottom::after{transform:scale(-1,-1)}
.nb{display:inline-block}

.label{display:flex;align-items:center;gap:12px;font-family:var(--f-latin);font-weight:700;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--leaf)}
.label::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.h2{font-size:clamp(1.65rem,3.6vw,2.6rem);letter-spacing:.06em;line-height:1.55}
.lead-s{color:var(--muted);max-width:34em}
.head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,64px)}

.todo{display:inline-block;font-family:var(--f-body);font-size:.7rem;font-weight:700;line-height:1.5;letter-spacing:.04em;background:var(--todo-bg);color:var(--todo-ink);border:1px dashed var(--todo-bd);border-radius:6px;padding:1px 7px;vertical-align:middle;white-space:nowrap}


/* Header */
header.site{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:30;padding-block:14px;transition:opacity .22s ease,transform .22s ease}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1160px;margin-inline:auto;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--line-c) 70%,transparent);border-radius:999px;padding:8px 8px 8px 22px;box-shadow:var(--shadow-s)}
.logo{--logo-h:44px;display:block;flex:none;overflow:hidden;width:calc(var(--logo-h) * 3.892);height:var(--logo-h);text-decoration:none}
.logo img{height:100%;width:auto;max-width:none}
.h-actions{display:flex;align-items:center;gap:8px}
nav.gnav{display:flex;gap:26px;font-size:.88rem;font-weight:500;transition:opacity .3s}
nav.gnav a{text-decoration:none;color:var(--muted);position:relative;white-space:nowrap}
nav.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--leaf);transform:scaleX(0);transition:transform .25s ease}
nav.gnav a:hover{color:var(--leaf)}
nav.gnav a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--mist);color:var(--leaf-deep);cursor:pointer;position:relative;padding:0}
.menu-btn span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:22px}
.menu-btn span:nth-child(3){top:28px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* スクロール後の縮小ヘッダー：シンボルマーク＋LINE＋メニュー（切り替えはフェード） */
header.site.is-swapping{opacity:0;transform:translateY(-10px)}
header.site.is-compact{padding-block:10px}
header.site.is-compact .bar{max-width:320px;padding:6px;background:color-mix(in srgb,var(--surface) 92%,transparent)}
header.site.is-compact .logo{--logo-h:40px;width:calc(var(--logo-h) * 1.03)}
header.site.is-compact nav.gnav{display:none}
header.site.is-compact .menu-btn{display:block}
/* 縮小時はLINEボタンを中央に：ロゴ｜LINE｜メニュー */
header.site.is-compact .bar{display:grid;grid-template-columns:1fr auto 1fr}
header.site.is-compact .logo{margin-left:10px}
@media (max-width:760px){header.site.is-compact .bar{padding:6px}}
header.site.is-compact .h-actions{display:contents}
header.site.is-compact .menu-btn{justify-self:end}
.h-actions .btn{white-space:nowrap}
@media (max-width:1100px){nav.gnav{display:none}.menu-btn{display:block}}
@media (max-width:760px){
  header.site .bar{padding:6px 6px 6px 18px}
  header.site .h-actions>.btn{display:none}
  .logo{--logo-h:38px}
  header.site.is-compact .bar{max-width:none}
  header.site.is-compact .h-actions>.btn{display:inline-flex}
}

/* メニュー */
.menu{position:fixed;inset:0;z-index:28;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:grid;place-items:center;padding:110px var(--gutter-r) calc(40px + env(safe-area-inset-bottom,0px)) var(--gutter-l);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.menu.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.menu-inner{width:100%;max-width:760px;display:grid;gap:40px}
.menu-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media (max-width:600px){.menu-list{grid-template-columns:1fr}}
.menu-list a{display:grid;gap:6px;white-space:nowrap;padding:20px 4px;border-bottom:1px solid var(--line-c);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2.4vw,1.4rem);transform:translateY(10px);transition:color .2s,transform .5s cubic-bezier(.2,.7,.2,1)}
.menu.open .menu-list a{transform:none}
.menu-list a small{order:-1;font-family:var(--f-latin);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf)}
.menu-list a:hover{color:var(--leaf)}
.menu-foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.menu-foot .tel{font-size:.88rem;color:var(--muted)}
.menu-foot .tel b{font-family:var(--f-latin);font-size:1.3rem;color:var(--ink);letter-spacing:.08em;user-select:all;white-space:nowrap}
html.menu-open{overflow:hidden}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--f-display);font-weight:700;text-decoration:none;border-radius:999px;padding:16px 30px;font-size:1.04rem;line-height:1.3;transition:transform .2s ease, box-shadow .2s ease, background .2s;border:2px solid transparent;text-align:left}
.btn:hover{transform:translateY(-3px)}
.btn svg{width:26px;height:26px;flex:none}
.btn .arrow{width:18px;height:18px;transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.btn-line{background:var(--line);color:var(--line-ink);box-shadow:0 10px 26px rgba(6,199,85,.32)}
.btn-line:hover{box-shadow:0 14px 32px rgba(6,199,85,.4)}
.btn-sub{background:var(--surface);color:var(--sky-ink);border-color:color-mix(in srgb,var(--sky) 60%,transparent)}
.btn-sub:hover{border-color:var(--sky)}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-sm svg{width:20px;height:20px}
.btn-note{display:block;font-size:.72rem;font-weight:500;opacity:.92;font-family:var(--f-body);letter-spacing:.04em}

/* Hero — 写真を背景いっぱいに敷き、左側に文字 */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:150px 56px;min-height:clamp(640px,92vh,920px);display:flex;align-items:center}
.hero-bg{position:absolute;top:0;right:0;bottom:0;width:min(64%,1400px);height:100%;object-fit:cover;object-position:0% 40%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%);z-index:-2;animation:zoom 1.6s cubic-bezier(.2,.7,.2,1) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 34%,transparent 52%)}
.hero-inner{width:100%;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:min(600px,46vw)}
.hero-copy{display:grid;gap:26px;min-width:0}
.badge{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:7px 16px 7px 12px;font-size:.84rem;font-weight:700;color:var(--leaf);box-shadow:var(--shadow-s)}
.badge svg{width:18px;height:18px}
.hero h1{font-size:clamp(2rem,3.5vw,3.2rem);font-weight:700;letter-spacing:.06em;line-height:1.38}
.hero h1 em{font-style:normal;color:var(--sky-ink);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.08em;height:.32em;background:var(--tint-2);border-radius:.2em;z-index:-1}
.hero .lead{font-size:clamp(1rem,1.4vw,1.1rem);color:var(--ink);max-width:28em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.cta-row .btn{min-height:74px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chips li{background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--leaf-deep);font-size:.82rem;font-weight:700;border-radius:999px;padding:5px 14px 5px 10px;display:flex;align-items:center;gap:6px}
.chips svg{width:15px;height:15px}
.float-card{position:absolute;right:var(--gutter-r);bottom:-8px;background:var(--surface);border-radius:20px;padding:12px 16px 12px 12px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow);font-size:.82rem;line-height:1.5;animation:bob 5s ease-in-out infinite}
.float-card .ic{width:38px;height:38px;border-radius:12px;background:var(--line);color:#fff;display:grid;place-items:center;flex:none}
.float-card .ic svg{width:24px;height:24px}
.float-card b{display:block;font-family:var(--f-display);font-size:.92rem}
.who{margin-top:40px;display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.8;color:var(--muted);max-width:44em}
.who svg{width:14px;height:14px;flex:none;color:var(--leaf);margin-top:3px}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:.4;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zoom{from{transform:scale(1.08)}to{transform:none}}
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}
.hero-copy>*:nth-child(5){animation-delay:.32s}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;max-width:600px}
  .float-card{display:none}
}
@media (max-width:760px){
  .hero{align-items:flex-end;min-height:0;padding-block:calc(76px + min(86vw,450px)) 40px}
  .hero-bg{top:76px;width:100%;height:min(100vw,520px);bottom:auto;object-position:23% 50%;-webkit-mask-image:none;mask-image:none}
  .hero::before{background:linear-gradient(180deg,transparent 0,transparent calc(76px + min(70vw,370px)),var(--bg) calc(76px + min(100vw,520px)))}
}

/* Marquee */
img.lf{width:24px;height:auto;flex:none}
img.lf-tall{width:auto;height:22px}
.badge img.lf{width:22px}
.track img.lf{width:44px}
.marquee{overflow-x:clip;background:var(--surface);padding-block:22px}
.track{display:flex;width:max-content;gap:40px;align-items:center;animation:slide 38s linear infinite}
.track span{font-family:var(--f-latin);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.2px var(--leaf);white-space:nowrap}
.track span.fill{color:var(--leaf);-webkit-text-stroke:0}
.track svg{width:26px;height:26px;color:var(--sky);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* Worries — 会話 */
.worries-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:900px){.worries-grid{grid-template-columns:1fr}}
.w-head{position:sticky;top:120px;display:grid;gap:22px}
@media (max-width:900px){.w-head{position:static}}
.chat{background:var(--mist);border-radius:36px;padding:clamp(22px,4vw,40px);display:grid;gap:14px;position:relative}
.chat-top{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);padding-bottom:12px;border-bottom:1px dashed var(--line-c);margin-bottom:6px}
.chat-top i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.msg{max-width:82%;padding:12px 18px;border-radius:22px;font-size:.98rem;line-height:1.7;box-shadow:0 2px 0 rgba(24,84,74,.04)}
.msg.me{justify-self:end;background:var(--surface);border-bottom-right-radius:6px}
.msg.me:nth-child(odd){margin-right:4%}
.reply{display:flex;gap:12px;align-items:flex-end;margin-top:14px}
.avatar{width:52px;height:52px;border-radius:50%;flex:none;background:var(--surface);border:2px dashed var(--leaf-soft);display:grid;place-items:center;font-size:.56rem;line-height:1.3;color:var(--muted);text-align:center}
.reply .msg{max-width:none;background:var(--leaf);color:#fff;border-bottom-left-radius:6px;font-family:var(--f-display);font-weight:500;font-size:1.02rem}
.reply .msg b{font-weight:700;color:#fff;background:linear-gradient(transparent 70%,rgba(255,255,255,.28) 70%)}
.read{font-size:.68rem;color:var(--muted);justify-self:end;margin-top:-8px;margin-right:6px}

/* LINE相談のスマホモック */
:root{--bubble-me:#c6f0b6}
.phone-wrap{position:relative;width:100%;max-width:400px;margin-inline:auto;padding-block:20px}
.phone{position:relative;z-index:1;background:var(--surface);border-radius:46px;padding:12px;box-shadow:0 40px 80px rgba(24,84,74,.18),0 0 0 1px color-mix(in srgb,var(--line-c) 80%,transparent)}
.ph-head{display:flex;align-items:center;gap:10px;padding:16px 14px 12px}
.ph-back{width:22px;height:22px;color:var(--ink)}
.ph-av{width:36px;height:36px;border-radius:50%;background:var(--mist);display:grid;place-items:center;overflow:hidden}
.ph-av img{width:18px}
.ph-name{display:grid;line-height:1.3}
.ph-name b{font-size:.95rem}
.ph-name small{font-size:.66rem;color:var(--muted)}
.ph-body{background:color-mix(in srgb,var(--tint) 70%,var(--surface));border-radius:30px;padding:18px 14px 22px;display:grid;gap:10px;min-height:520px;align-content:start}
.ph-day{justify-self:center;font-size:.66rem;color:var(--muted);background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:999px;padding:2px 12px;margin-bottom:4px}
.row{display:flex;align-items:flex-end;gap:6px;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.row p{margin:0;padding:9px 14px;border-radius:20px;font-size:.86rem;line-height:1.65;max-width:78%;text-align:left}
.row.me{justify-content:flex-end}
.row.me p{background:var(--bubble-me);color:#16301f;border-top-right-radius:6px}
.row.them p{background:var(--surface);border-top-left-radius:6px;max-width:72%}
.row.them b{font-weight:700;color:var(--leaf-deep)}
.stamp{font-size:.58rem;line-height:1.35;color:var(--muted);text-align:right;flex:none}
.row.them .stamp{text-align:left}
.ph-av-s{width:34px;height:34px;border-radius:50%;flex:none;align-self:flex-start;background:var(--surface);border:1.5px dashed var(--leaf-soft);display:grid;place-items:center;font-size:.46rem;line-height:1.2;color:var(--muted);text-align:center}
.typing-row{display:none}
.dots{display:flex;gap:4px;align-items:center;padding:14px 16px!important}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.ph-input{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 6px 6px;padding:10px 16px;border-radius:999px;background:var(--mist);font-size:.78rem;color:var(--muted)}
.ph-input svg{width:20px;height:20px;color:var(--leaf);opacity:.35}
.ph-input span{opacity:.45}
/* スクロールで1通ずつ届く演出（JSが .pre を付けたときだけ隠す） */
.ph-body.pre .row{opacity:0;transform:translateY(12px) scale(.98)}
.ph-body.pre .row.in{opacity:1;transform:none}
.ph-body.pre .typing-row{display:flex}
.ph-body.pre .typing-row.out{display:none}
.fl{position:absolute;z-index:0;pointer-events:none;height:auto}
.fl-1{width:150px;left:-130px;top:60px;transform:rotate(-18deg)}
.fl-2{width:170px;right:-150px;top:200px;transform:rotate(14deg)}
.fl-3{width:70px;left:-60px;bottom:40px;transform:rotate(24deg)}
@media (max-width:760px){.fl-1{width:90px;left:-40px;top:-10px}.fl-2{width:100px;right:-50px;top:auto;bottom:80px}.fl-3{display:none}.ph-body{min-height:0}}

/* AI活用 */
.ai{background:var(--tint-2)}
.ai-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.ai-grid{grid-template-columns:1fr}}
.ai .label{color:var(--sky-ink)}
.ai .h2 em{font-style:normal;color:var(--sky-ink)}
.ai-copy{display:grid;gap:22px;min-width:0}
.ai-copy .lead-s{max-width:30em}
.ai-demo{position:relative;display:grid;gap:14px;min-width:0;max-width:520px;width:100%;justify-self:center}
.prompt{background:var(--surface);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow-s);display:grid;gap:6px;width:88%;justify-self:start}
.prompt small{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--sky-ink);letter-spacing:.06em}
.prompt small svg{width:14px;height:14px}
.prompt p{font-size:.95rem;line-height:1.7}
.prompt p::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:3px;vertical-align:-.15em;background:var(--sky);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ai-arrow{justify-self:center;width:44px;height:44px;border-radius:50%;background:var(--sky);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-s)}
.ai-arrow svg{width:22px;height:22px;transform:rotate(90deg)}
.result{background:var(--surface);border-radius:24px;padding:12px;box-shadow:var(--shadow);width:88%;justify-self:end;transform:rotate(1.5deg)}
.result img{width:100%;aspect-ratio:1;max-width:100%;object-fit:cover;border-radius:14px}
.result figcaption{font-size:.78rem;color:var(--muted);padding:10px 6px 2px;display:flex;align-items:center;gap:6px}
.result figcaption svg{width:14px;height:14px;color:var(--sky);flex:none}
.ai-points{margin-top:clamp(48px,7vw,80px);list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.ai-points{grid-template-columns:1fr}}
.ai-points li{background:var(--surface);border-radius:28px;padding:28px 26px;display:grid;gap:10px;align-content:start;min-width:0}
.ai-points .ic{width:52px;height:52px;border-radius:18px;background:var(--tint-2);color:var(--sky-ink);display:grid;place-items:center}
.ai-points .ic svg{width:26px;height:26px}
.ai-points h3{font-size:1.12rem}
.ai-points p{font-size:.92rem;color:var(--muted)}
.ai-note{margin-top:28px;display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;color:var(--ink)}
.ai-note svg{width:22px;height:22px;color:var(--leaf);flex:none}

.ai-badge{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--sky-ink);font-family:var(--f-display);font-weight:700;font-size:.9rem;border-radius:999px;padding:7px 18px 7px 12px;box-shadow:var(--shadow-s)}
.ai-badge img{width:26px;height:auto}
.results{position:relative;padding:18px 0 10px}
.results .result{position:relative;z-index:1;width:100%;transform:rotate(-1deg)}
.results .result img{aspect-ratio:auto;object-fit:contain}
.peek{position:absolute;width:44%;border-radius:16px;box-shadow:var(--shadow-s);border:6px solid var(--surface)}
.peek-1{right:-4%;top:-28px;transform:rotate(7deg)}
.peek-2{left:-14%;top:34%;transform:rotate(-7deg);z-index:0;width:40%}

/* Jobs bento */
.jobs{background:var(--surface)}
#atmosphere{background:var(--bg)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(200px,auto);gap:16px}
.job{position:relative;border-radius:28px;overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0;isolation:isolate}
.job h3{font-size:1.35rem;letter-spacing:.06em}
.job p{font-size:.9rem;line-height:1.75}
.job .en{font-family:var(--f-latin);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.job.photo{color:#fff}
.job.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.job.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,40,36,0) 30%,rgba(12,40,36,.78) 100%)}
.job.photo:hover img{transform:scale(1.05)}
.job.photo .en{color:#d4efe8}
.job.plain{background:var(--mist)}
.job.plain .en{color:var(--leaf)}
.job.plain p{color:var(--muted)}
.job.plain .big-ic{position:absolute;right:20px;top:20px;width:64px;height:64px;border-radius:20px;background:var(--surface);display:grid;place-items:center;color:var(--leaf);box-shadow:var(--shadow-s)}
.job.plain .big-ic svg{width:34px;height:34px}
.job.sky{background:var(--tint-2)}
.job.sky .en,.job.sky .big-ic{color:var(--sky-ink)}
.j-movie{grid-column:span 7;grid-row:span 2;min-height:440px}
.j-design{grid-column:span 5}
.j-ai{grid-column:span 5}
.j-sns{grid-column:span 5}
.j-data{grid-column:span 7;min-height:260px}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .j-movie,.j-data{grid-column:span 2;grid-row:auto;min-height:300px}
  .j-design{grid-column:span 2;min-height:260px}
  .j-ai,.j-sns{grid-column:span 1;min-height:240px}
}
@media (max-width:520px){.j-ai,.j-sns{grid-column:span 2;min-height:200px}}
.jobs .foot{margin-top:28px;color:var(--muted);font-size:.92rem;display:flex;gap:10px;align-items:center}
.jobs .foot svg{width:20px;height:20px;color:var(--leaf);flex:none}

/* Support */
.support{background:var(--surface);padding-top:0}
.support-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.support-grid{grid-template-columns:1fr}}
.s-photo{position:relative}
.s-photo figure{border-radius:200px 200px 36px 36px;overflow:hidden;aspect-ratio:4/4.6;max-width:100%}
.s-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.s-photo .cap{position:absolute;left:-12px;bottom:36px;background:var(--leaf);color:#fff;font-family:var(--f-display);font-weight:700;padding:14px 22px;border-radius:18px;box-shadow:var(--shadow);line-height:1.6}
@media (max-width:900px){.s-photo{max-width:520px}.s-photo figure{aspect-ratio:5/4;border-radius:160px 160px 32px 32px}.s-photo .cap{left:12px}}
.s-list{list-style:none;padding:0;display:grid;gap:4px;margin-top:8px}
.s-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:22px 0;border-bottom:1px solid var(--line-c)}
.s-list li:last-child{border-bottom:0}
.s-list .ic{grid-row:span 2;width:52px;height:52px;border-radius:18px;background:var(--mist);display:grid;place-items:center;color:var(--leaf)}
.s-list .ic svg{width:26px;height:26px}
.s-list h3{font-size:1.12rem}
.s-list p{font-size:.92rem;color:var(--muted);min-width:0}

.wage{margin-top:clamp(56px,8vw,96px);position:relative;border-radius:40px;background:var(--tint-2);padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 48px;align-items:center;overflow:hidden}
.wage::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:var(--blob);background:color-mix(in srgb,var(--sky) 14%,transparent)}
@media (max-width:760px){.wage{grid-template-columns:1fr}}
.wage .k{font-family:var(--f-display);font-weight:700;color:var(--sky-ink);display:grid;gap:4px}
.wage .k small{font-size:.92rem;letter-spacing:.14em}
.wage .num{font-family:var(--f-latin);font-weight:700;font-size:clamp(3.4rem,9vw,6.4rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.wage .num span{font-family:var(--f-display);font-size:.3em;margin-left:.2em;letter-spacing:.06em}
.wage p{position:relative;z-index:1;color:var(--ink);font-size:.98rem}
.wage p .sub{display:block;color:var(--muted);font-size:.86rem;margin-top:8px}

/* Atmosphere */
.atm-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
@media (max-width:860px){.atm-grid{grid-template-columns:1fr}}
.atm-photo{position:relative;border-radius:36px;overflow:hidden;min-height:420px}
.atm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atm-photo .tag{position:absolute;left:20px;bottom:20px;background:var(--surface);border-radius:999px;padding:6px 16px;font-size:.82rem;font-weight:700}
.atm-side{display:grid;gap:20px;min-width:0}
.ph-slots{display:grid;grid-template-columns:1fr 1fr;gap:20px;height:100%}
.slot{border-radius:28px;background:var(--mist);border:2px dashed var(--line-c);min-height:180px;max-width:100%;display:grid;place-items:center;text-align:center;padding:12px;font-size:.84rem;color:var(--muted);gap:6px;align-content:center}
.slot svg{width:30px;height:30px;color:var(--leaf);margin-inline:auto}
.voices{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.voices{grid-template-columns:1fr}}
.voice{background:var(--surface);border-radius:28px;padding:30px;display:grid;gap:14px;position:relative}
.voice::before{content:"“";position:absolute;right:24px;top:-6px;font-family:var(--f-latin);font-size:5rem;line-height:1;color:var(--leaf-soft)}
.voice p{color:var(--muted);font-size:.94rem}
.voice .who-v{font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700}

/* 雰囲気：3フロア＋スタッフ */
.space{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px}
@media (max-width:900px){.space{grid-template-columns:1fr}}
.floors{position:relative;overflow:hidden;isolation:isolate;background:var(--leaf-deep);color:#fff;border-radius:36px;padding:clamp(32px,4vw,52px);display:grid;align-content:space-between;gap:32px;min-height:440px}
.floors .big{font-family:var(--f-latin);font-weight:700;font-size:clamp(6.5rem,13vw,10rem);line-height:.85;letter-spacing:-.02em}
.floors .big small{font-family:var(--f-display);font-size:.2em;letter-spacing:.1em;margin-left:.3em}
.floors h3{font-size:1.35rem;margin-bottom:10px}
.floors p{color:#d1eae3;font-size:.95rem}
.floors .fl-a{position:absolute;z-index:-1;width:200px;right:-70px;top:-40px;transform:rotate(-24deg);opacity:.9}
.floors .fl-b{position:absolute;z-index:-1;width:80px;right:30px;top:130px;transform:rotate(30deg);opacity:.55}
@media (max-width:900px){.floors{min-height:340px}}
.rooms{list-style:none;padding:0;display:grid;gap:20px}
.room{display:grid;grid-template-columns:clamp(110px,14vw,170px) minmax(0,1fr);gap:22px;align-items:center;background:var(--surface);border-radius:28px;padding:14px 26px 14px 14px;min-width:0}
.room-ph{aspect-ratio:4/3;max-width:100%;border-radius:18px;background:var(--mist);border:2px dashed var(--line-c);display:grid;place-items:center;align-content:center;gap:4px;font-size:.66rem;color:var(--muted);text-align:center}
.room-ph svg{width:22px;height:22px;color:var(--leaf)}
.room h3{font-size:1.12rem;margin-bottom:4px}
.room p{font-size:.9rem;color:var(--muted)}
.staff{margin-top:clamp(88px,11vw,136px)}
.staff-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 40px;align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.staff-head h3{font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:.06em}
.staff-head p{grid-column:1/-1;color:var(--muted);max-width:40em;font-size:.95rem}
.staff-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
@media (max-width:760px){.staff-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.staff-list figure{display:grid;gap:14px}
.staff-list img{width:100%;aspect-ratio:3/4;max-width:100%;object-fit:cover;object-position:50% 18%;border-radius:200px 200px 24px 24px;background:var(--mist)}
.staff-list figcaption{display:grid;gap:2px;text-align:center}
.staff-list b{font-family:var(--f-display);font-size:1.05rem;letter-spacing:.08em}
.staff-list small{font-family:var(--f-latin);font-size:.66rem;letter-spacing:.18em;color:var(--leaf)}
.staff-note{margin-top:16px;text-align:center}
.voices{margin-top:clamp(64px,8vw,96px)}
/* 利用者さんがつくっています（カナエル通信・4コマ） */
.made{background:var(--surface)}
.made-block+.made-block{margin-top:clamp(56px,8vw,88px)}
.made-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.made-head h3{font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:.06em;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.made-head h3 small{font-family:var(--f-body);font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:.04em}
.more{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-latin);font-weight:700;font-size:.8rem;letter-spacing:.16em;color:var(--leaf);text-decoration:none;padding:8px 4px}
.more svg{width:16px;height:16px;transition:transform .2s}
.more:hover svg{transform:translateX(4px)}
.made-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0}
.post{display:grid;gap:12px;text-decoration:none;min-width:0}
.post .thumb{border-radius:22px;overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--mist)}
.post .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.post:hover .thumb img{transform:scale(1.05)}
.post .meta{display:flex;align-items:center;gap:10px}
.post .tag{font-size:.7rem;font-weight:700;color:var(--leaf-deep);background:var(--tint);border-radius:999px;padding:2px 10px}
.post time{font-family:var(--f-latin);font-size:.76rem;letter-spacing:.06em;color:var(--muted)}
.post b{font-weight:700;font-size:.95rem;line-height:1.7}
.post:hover b{color:var(--leaf)}
.komas{background:var(--tint-2);border-radius:36px;padding:clamp(28px,4vw,48px)}
.komas .made-list{gap:clamp(20px,3vw,36px)}
.koma{display:grid;gap:14px;text-decoration:none;min-width:0}
.koma .frame{background:var(--surface);border-radius:18px;padding:10px;box-shadow:var(--shadow-s);transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.komas li:nth-child(1){--r:-2deg}
.komas li:nth-child(2){--r:1.5deg}
.komas li:nth-child(3){--r:-1deg}
.koma:hover .frame{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow)}
.koma .frame img{width:100%;aspect-ratio:1;max-width:100%;object-fit:contain;border-radius:10px;background:var(--surface)}
.koma b{font-weight:700;font-size:.95rem;line-height:1.7}
.koma time{display:block;font-family:var(--f-latin);font-size:.76rem;letter-spacing:.06em;color:var(--muted);font-weight:500}
.koma:hover b{color:var(--sky-ink)}
.credit{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted)}
.credit svg{width:18px;height:18px;color:var(--leaf);flex:none}
@media (max-width:760px){
  .made-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:calc(-1 * var(--gutter-r));padding-right:var(--gutter-r)}
  .made-list>*{scroll-snap-align:start}
  .komas .made-list{padding-top:8px}
}

/* Family */
.family{padding-block:clamp(96px,11vw,140px) 0}
.family .box{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 32px;align-items:center;border:1px solid var(--line-c);border-radius:32px;padding:32px 36px;background:var(--surface)}
@media (max-width:760px){.family .box{grid-template-columns:1fr}}
.family .box>svg{width:64px;height:64px;color:var(--leaf)}
.family h2{font-size:1.3rem;margin-bottom:6px}
.family p{color:var(--muted);font-size:.94rem}

/* Flow */
.flow-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:900px){.flow-grid{grid-template-columns:1fr}}
.flow-side{position:sticky;top:120px;display:grid;gap:22px}
@media (max-width:900px){.flow-side{position:static}}
.flow-side figure{border-radius:36px 36px 36px 160px;overflow:hidden;aspect-ratio:5/4;max-width:100%}
.flow-side img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.steps{list-style:none;padding:0;display:grid;position:relative}
.steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(var(--leaf-soft) 0 8px,transparent 8px 14px)}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 22px;padding-block:20px;position:relative}
.step .n{grid-row:span 2;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--leaf-soft);display:grid;place-items:center;font-family:var(--f-latin);font-weight:700;font-size:1.15rem;color:var(--leaf);position:relative;z-index:1}
.step.first .n{background:var(--line);border-color:var(--line);color:#fff}
.step h3{font-size:1.2rem;padding-top:12px}
.step p{color:var(--muted);font-size:.93rem}
.step .pill{display:inline-block;margin-left:10px;font-family:var(--f-body);font-size:.7rem;font-weight:700;color:var(--leaf-deep);background:var(--tint);border-radius:999px;padding:2px 10px;vertical-align:middle}

/* FAQ */
.faq-sec{background:var(--surface)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px)}
.faq-grid .head{align-content:start;align-self:start;position:sticky;top:120px;margin-bottom:0}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-grid .head{position:static}}
.support .h2{font-size:clamp(1.55rem,2.8vw,2.2rem)}
.faq details{border-bottom:1px solid var(--line-c)}
.faq summary{cursor:pointer;list-style:none;padding:22px 52px 22px 0;font-weight:700;font-size:1.02rem;position:relative;display:flex;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--f-latin);font-weight:700;color:var(--leaf);flex:none;font-size:1.1rem}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--mist) no-repeat center/12px 12px linear-gradient(var(--leaf),var(--leaf)) ,var(--mist);transition:transform .25s}
.faq summary .pm{position:absolute;right:10px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--mist)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--leaf);border-radius:2px;transition:transform .25s}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq summary::after{display:none}
.faq .a{padding:0 0 24px 32px;color:var(--muted);font-size:.94rem;overflow:hidden}

/* Contact */
.contact .panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);border-radius:48px;overflow:hidden;background:var(--leaf-deep);color:#fff;isolation:isolate}
@media (max-width:860px){.contact .panel{grid-template-columns:1fr}}
.contact .txt{padding:clamp(36px,6vw,72px);display:grid;gap:24px;align-content:center;position:relative}
.contact .label{color:#b6e2d6}
.contact h2{font-size:clamp(1.7rem,3.8vw,2.7rem);letter-spacing:.06em;line-height:1.5}
.contact .sub{color:#d1eae3;max-width:30em}
.contact .tel{font-size:.9rem;color:#d1eae3;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.contact .tel b{font-family:var(--f-latin);font-size:1.5rem;color:#fff;letter-spacing:.08em;user-select:all;font-variant-numeric:tabular-nums}
.contact .btn-sub{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.contact .btn-sub:hover{border-color:#fff}
.contact figure{position:relative;min-height:360px}
.contact figure>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.contact figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--leaf-deep),transparent 30%)}
@media (max-width:860px){.contact figure{order:-1;min-height:280px}.contact figure::before{background:linear-gradient(0deg,var(--leaf-deep),transparent 40%)}}
.contact .bubble{position:absolute;z-index:2;right:24px;bottom:28px;display:flex;gap:10px;align-items:flex-end}
.contact .bubble p{background:var(--surface);color:var(--ink);border-radius:20px 20px 4px 20px;padding:10px 16px;font-size:.86rem;font-family:var(--f-display);font-weight:500;box-shadow:var(--shadow)}
.contact .bubble .avatar{width:56px;height:56px}

/* Footer */
footer{padding-block:72px 64px}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
@media (max-width:760px){.f-grid{grid-template-columns:1fr}}
.f-logo{width:clamp(150px,18vw,210px);height:auto;margin-bottom:24px}
.f-info{font-size:.84rem;color:var(--muted);display:grid;gap:4px}
.f-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.84rem}
.f-nav a{text-decoration:none;color:var(--muted)}
.f-nav a:hover{color:var(--leaf)}
.f-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-c);font-size:.74rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

main{overflow-x:clip}
/* ===== 余白とリズム（FV以外） ===== */
:root{--gutter-wide-l:max(20px, 4.5vw, env(safe-area-inset-left, 0px));--gutter-wide-r:max(20px, 4.5vw, env(safe-area-inset-right, 0px))}
main>section:not(.hero)>.wrap,footer>.wrap{padding-left:var(--gutter-wide-l);padding-right:var(--gutter-wide-r)}
section{padding-block:clamp(104px,13vw,188px)}
.support{padding-top:0}
.family{padding-block:clamp(110px,13vw,170px) 0}
.head{gap:22px;margin-bottom:clamp(56px,7vw,96px)}
.lead-s{line-height:2}
.bento{gap:20px}
.made-list{gap:clamp(24px,3vw,40px)}

/* 見出しの型：中央ぞろえ／左右分割 */
.head.center{justify-items:center;text-align:center;margin-inline:auto;max-width:40em}
.head.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:end}
.head.split .label{grid-column:1/-1}
.head.split .lead-s{padding-bottom:.5em}
@media (max-width:860px){.head.split{grid-template-columns:1fr}}

/* 悩み：中央に大きく、会話はその下 */
.worries-grid{grid-template-columns:1fr;justify-items:center;gap:clamp(48px,6vw,80px)}
.w-head{position:static;justify-items:center;text-align:center;max-width:36em}
.worries .h2{font-size:clamp(1.9rem,4.4vw,3.1rem)}
.head.center .label::after,.w-head .label::after{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}

/* AI：ポイントはカードにせず、区切り線で横に並べる */
.ai-points{gap:0}
.ai-points li{background:none;border-radius:0;padding:4px clamp(20px,3vw,40px);border-left:1px solid color-mix(in srgb,var(--sky) 30%,transparent)}
.ai-points li:first-child{border-left:0;padding-left:0}
.ai-points .ic{background:var(--surface)}
@media (max-width:860px){
  .ai-points li{border-left:0;padding:24px 0;border-top:1px solid color-mix(in srgb,var(--sky) 30%,transparent)}
  .ai-points li:first-child{border-top:0;padding-top:0}
}

.wage{margin-top:clamp(80px,10vw,128px)}

/* よくある質問：中央の見出し＋1カラム */
.faq-grid{grid-template-columns:1fr;justify-items:center;gap:0}
.faq-grid .head{position:static;margin-bottom:clamp(48px,6vw,72px)}
.faq{width:100%;max-width:820px}

/* スプラッシュ：フォントと画像の読み込みが終わるまで表示（JSが動いたときだけ） */
.splash{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:var(--bg);transition:opacity .6s ease,visibility 0s .6s}
html.is-loading .splash{display:grid}
html.is-loaded .splash{display:grid;opacity:0;visibility:hidden}
.splash-inner{display:grid;justify-items:center;gap:28px;animation:splashIn .8s cubic-bezier(.2,.7,.2,1) both}
.splash-inner img{width:clamp(120px,22vw,170px);height:auto}
.splash-bar{width:120px;height:2px;border-radius:2px;background:var(--line-c);overflow:hidden}
.splash-bar i{display:block;width:40%;height:100%;border-radius:2px;background:var(--leaf);animation:splashBar 1.1s ease-in-out infinite}
@keyframes splashIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes splashBar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* スプラッシュ中はFVの動きを止めておき、消えてから始める */
html.is-loading .hero-bg,html.is-loading .hero-copy>*,html.is-loading .float-card{animation-play-state:paused}
html.is-loading{overflow:hidden}

/* ===== 調整：AIのポイント（英字キーワード） ===== */
.ai-points .kw{font-family:var(--f-latin);font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);display:flex;align-items:center;gap:10px}
.ai-points .kw::after{content:"";height:1px;flex:1;max-width:48px;background:currentColor;opacity:.5}

/* 日本語の改行を文節で（対応ブラウザのみ）＋段落の最終行を整える */
h1,h2,h3{word-break:auto-phrase}
p{text-wrap:pretty}

/* ===== スマホの調整 ===== */
@media (max-width:760px){
  /* ボタンは横幅をそろえて全幅に */
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%;justify-content:center;white-space:nowrap}
  .contact .cta-row .btn{min-height:68px}

  /* 中央ぞろえの説明文は左ぞろえにして読みやすく */
  .head.center .lead-s,.w-head .lead-s{text-align:left}

  /* 通信・4コマの見出し行 */
  .made-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .made-head h3{display:grid;gap:2px}

  /* 部屋のカードは縦積み（写真が上） */
  .room{grid-template-columns:1fr;padding:12px 12px 22px;gap:16px}
  .room-ph{aspect-ratio:16/9}
  .room>div{padding-inline:10px}

  /* サポートの写真：顔が入る位置で切り抜き、キャプションは写真の下へ */
  .s-photo figure{aspect-ratio:4/3.4;border-radius:140px 140px 28px 28px}
  .s-photo img{object-position:45% 15%}
  .s-photo .cap{position:static;margin:-28px 16px 0;position:relative;font-size:.95rem}

  /* AIの例：重ねた画像がキャプションにかぶらないように */
  .peek-2{display:none}
  .peek-1{width:38%;top:-18px;right:-2%}
  .results{padding-bottom:0}
}

/* カナエちゃんのアイコン */
.ph-av img{width:100%;height:100%;object-fit:cover}
.ph-av-s{border:0;overflow:hidden;background:var(--surface)}
.ph-av-s img,.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar{border:3px solid var(--surface);overflow:hidden;padding:0;box-shadow:var(--shadow-s)}

/* 部屋の写真 */
.room{grid-template-columns:clamp(150px,19vw,240px) minmax(0,1fr)}
.room-img{width:100%;aspect-ratio:16/10;max-width:100%;object-fit:cover;border-radius:18px;background:var(--mist)}
@media (max-width:760px){.room{grid-template-columns:1fr}}
.contact .bubble p{white-space:nowrap}
@media (max-width:760px){.contact .bubble{left:12px;right:12px;justify-content:flex-end}.contact .bubble p{font-size:clamp(.7rem,3.4vw,.84rem);padding:9px 14px}.contact .bubble .avatar{width:48px;height:48px}}

/* メニューを開いたときは濃い緑の背景に */
.menu{background:color-mix(in srgb,var(--leaf-deep) 97%,transparent);color:#fff}
.menu-list a{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.menu-list a small{color:#9fdcc6}
.menu-list a:hover{color:#c6f0b6}
.menu-foot .tel{color:#bfe0d4}
.menu-foot .tel b{color:#fff}


/* ===== 下層ページ共通：ページタイトル ===== */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(130px,14vw,180px) clamp(90px,10vw,140px);background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 100%)}
.page-hero::before{content:"";position:absolute;z-index:-1;width:640px;height:640px;right:-200px;top:-220px;border-radius:var(--blob);background:radial-gradient(circle at 40% 40%,var(--leaf-soft),transparent 70%);opacity:.7}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr}}
.ph-copy{display:grid;gap:20px;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--muted)}
.crumbs a{color:var(--leaf);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:.08em;line-height:1.3}
.page-hero .catch{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.45rem);color:var(--leaf-deep);line-height:1.6}
.ph-photo{position:relative;margin:0}
.ph-photo>img:first-child{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--blob);box-shadow:var(--shadow)}
.ph-leaf{position:absolute;height:auto;pointer-events:none}
.ph-leaf-1{width:120px;left:-40px;bottom:-20px;transform:rotate(-20deg)}
.ph-leaf-2{width:130px;right:-30px;top:-30px;transform:rotate(18deg)}
@media (max-width:860px){.ph-photo{max-width:520px}.ph-leaf-1{width:80px;left:-14px}.ph-leaf-2{width:90px;right:-10px}}

/* ===== 研修について ===== */
.reasons-sec{background:var(--bg)}
.reasons{display:grid;gap:clamp(64px,9vw,120px)}
.reason{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.reason:nth-child(even) .reason-img{order:2}
.reason-img{margin:0}
.reason-img img{width:100%;aspect-ratio:4/3;max-width:100%;object-fit:cover;border-radius:36px}
.reason:nth-child(odd) .reason-img img{border-radius:36px 36px 36px 140px}
.reason:nth-child(even) .reason-img img{border-radius:36px 36px 140px 36px}
.reason-txt{display:grid;gap:16px;min-width:0}
.reason .no{font-family:var(--f-latin);font-weight:700;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sky);display:flex;align-items:center;gap:12px}
.reason .no::after{content:"";width:40px;height:1px;background:currentColor;opacity:.5}
.reason h3{font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:.05em;line-height:1.55}
.reason p{color:var(--muted)}
@media (max-width:860px){.reason{grid-template-columns:1fr}.reason:nth-child(even) .reason-img{order:0}}

.courses-sec{background:var(--tint-2)}
.courses-sec .label{color:var(--sky-ink)}
.courses{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.courses{grid-template-columns:1fr}}
.course{background:var(--surface);border-radius:32px;padding:clamp(28px,3vw,40px);display:grid;gap:14px;align-content:start;min-width:0}
.course .tool{justify-self:start;font-family:var(--f-latin);font-weight:700;font-size:.82rem;letter-spacing:.1em;color:var(--sky-ink);background:var(--tint-2);border-radius:999px;padding:5px 14px}
.course h3{font-size:1.35rem;letter-spacing:.06em}
.course p{font-size:.93rem;color:var(--muted)}
.steps-mini{list-style:none;padding:16px 0 0;margin:6px 0 0;border-top:1px dashed var(--line-c);display:grid;gap:10px;counter-reset:st}
.steps-mini li{display:flex;align-items:center;gap:12px;font-size:.88rem;font-weight:700;counter-increment:st}
.steps-mini li::before{content:counter(st);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-latin);font-size:.78rem;color:#fff;background:var(--sky)}

.works-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto}
@media (max-width:760px){.works-list{grid-template-columns:none}}

.teachers-sec{background:var(--surface)}
.teachers-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-bottom:clamp(48px,6vw,72px)}
.teachers-head .head{margin-bottom:0}
@media (max-width:860px){.teachers-head{grid-template-columns:1fr}}
.teachers-txt{display:grid;gap:20px;color:var(--muted)}
.t-points{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.t-points li{display:flex;align-items:center;gap:8px;background:var(--mist);color:var(--leaf-deep);font-weight:700;font-size:.9rem;border-radius:999px;padding:8px 16px 8px 12px}
.t-points svg{width:16px;height:16px;color:var(--leaf)}
.teachers-txt .soft{font-family:var(--f-display);font-weight:500;color:var(--ink)}
.t-more{margin-top:28px;text-align:center}

.teachers-sec .h2{font-size:clamp(1.55rem,2.8vw,2.2rem)}

/* メニュー：下層ページへのリンク */
.menu-pages{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.menu-pages a{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;font-size:.88rem;font-weight:500}
.menu-pages a:hover{background:rgba(255,255,255,.12)}

/* ===== 下層ページ：小さめのページタイトル（一覧・記事など） ===== */
.ph-solo{grid-template-columns:minmax(0,1fr);max-width:820px}
.page-hero-s{padding-block:clamp(130px,13vw,170px) clamp(80px,9vw,110px)}
.page-hero-s .ph-copy{max-width:760px}

/* ===== スタッフ紹介 ===== */
.members-sec{background:var(--bg)}
.members{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
@media (max-width:900px){.members{grid-template-columns:repeat(2,minmax(0,1fr))}}
.member{display:grid;gap:16px}
.member img{width:100%;aspect-ratio:3/4;max-width:100%;object-fit:cover;object-position:50% 18%;border-radius:200px 200px 28px 28px;background:var(--mist);box-shadow:var(--shadow-s)}
.m-name{display:grid;gap:2px;text-align:center}
.m-name b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.1em}
.m-name small{font-family:var(--f-latin);font-size:.68rem;letter-spacing:.2em;color:var(--leaf)}
.pros-sec{background:var(--surface)}
.pros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:860px){.pros{grid-template-columns:1fr}}
.pros-photos{position:relative;padding:0 0 18% 0}
.pros-photos img{border-radius:28px;object-fit:cover;box-shadow:var(--shadow-s)}
.pros-photos .pp-1{width:82%;aspect-ratio:3/2}
.pros-photos .pp-2{position:absolute;width:52%;aspect-ratio:3/2;right:0;bottom:0;border:6px solid var(--surface)}
.pros-txt{display:grid;gap:20px;color:var(--muted)}
.pros-txt .h2{color:var(--ink)}

/* ===== 公式LINE ===== */
.line-sec{background:var(--bg)}
.line-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.line-grid{grid-template-columns:1fr}}
.line-card{display:grid;gap:22px;justify-items:start}
.lc-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--leaf-deep);font-weight:700;font-size:.88rem;border-radius:999px;padding:6px 16px 6px 10px;box-shadow:var(--shadow-s)}
.lc-badge svg{width:22px;height:22px;color:var(--line)}
.line-card p{color:var(--muted)}
.btn-xl{padding:20px 40px;font-size:1.15rem}
.btn-xl svg{width:30px;height:30px}
.lc-can{list-style:none;padding:0;display:grid;gap:10px}
.lc-can li{display:flex;align-items:center;gap:10px;font-weight:700}
.lc-can svg{width:18px;height:18px;color:var(--line)}
.lc-note{font-size:.82rem}
.flow-line-sec{background:var(--surface)}
.line-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:none}
@media (max-width:860px){.line-steps{grid-template-columns:1fr}}
.line-steps li{background:var(--bg);border-radius:28px;padding:30px;display:grid;gap:10px;align-content:start}
.line-steps .n{width:44px;height:44px;border-radius:50%;background:var(--line);color:#fff;display:grid;place-items:center;font-family:var(--f-latin);font-weight:700;font-size:1.1rem}
.line-steps h3{font-size:1.15rem}
.line-steps p{color:var(--muted);font-size:.93rem}

/* ===== お問い合わせ ===== */
.ways-sec{background:var(--bg)}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:900px){.ways{grid-template-columns:1fr}}
.way{position:relative;background:var(--surface);border-radius:32px;padding:clamp(28px,3vw,40px);display:grid;gap:14px;align-content:start;justify-items:start;min-width:0}
.way h3{font-size:1.25rem}
.way p{color:var(--muted);font-size:.93rem}
.way .small{font-size:.8rem}
.way-line{box-shadow:0 0 0 2px var(--line),var(--shadow)}
.way-tag{position:absolute;top:-14px;left:28px;background:var(--line);color:#fff;font-size:.78rem;font-weight:700;border-radius:999px;padding:4px 14px}
.way .tel-big{font-family:var(--f-latin);font-weight:700;font-size:clamp(1.6rem,3vw,2rem);color:var(--ink)!important;letter-spacing:.06em;user-select:all}
.form-sec{background:var(--surface)}
.cform{max-width:760px;margin-inline:auto;display:grid;gap:28px}
.f-row{display:grid;gap:10px}
.f-label{font-weight:700;display:flex;align-items:center;gap:10px}
.f-label em{font-style:normal;font-size:.7rem;color:#fff;background:var(--sky);border-radius:6px;padding:1px 8px}
.f-label em.opt{background:var(--line-c);color:var(--muted)}
.cform input[type=text],.cform textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line-c);border-radius:16px;padding:14px 18px;transition:border-color .2s,box-shadow .2s}
.cform input[type=text]:focus,.cform textarea:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 15%,transparent)}
.chips-in{display:flex;flex-wrap:wrap;gap:10px}
.chip-in{position:relative;cursor:pointer}
.chip-in input{position:absolute;opacity:0;pointer-events:none}
.chip-in span{display:inline-block;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line-c);background:var(--bg);font-size:.92rem;font-weight:500;transition:all .2s}
.chip-in input:checked+span{background:var(--leaf);border-color:var(--leaf);color:#fff}
.chip-in input:focus-visible+span{outline:3px solid var(--sky);outline-offset:2px}
.f-privacy{font-size:.82rem;color:var(--muted);background:var(--mist);border-radius:14px;padding:14px 18px}
.f-error{color:#b3261e;font-weight:700;font-size:.9rem}
.f-submit{justify-self:center;min-width:min(100%,320px);justify-content:center;border:0;cursor:pointer}
.f-demo{text-align:center;font-size:.78rem;color:var(--muted)}
.f-done{max-width:560px;margin-inline:auto;text-align:center;display:grid;gap:16px;justify-items:center;background:var(--bg);border-radius:32px;padding:40px 28px}
.f-done img{width:72px;height:72px;border-radius:50%;border:3px solid var(--surface);box-shadow:var(--shadow-s)}
.f-done h3{font-size:1.35rem}
.f-done p{color:var(--muted)}
.access-sec{background:var(--bg)}
.access{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:24px clamp(32px,5vw,80px);align-items:start}
@media (max-width:760px){.access{grid-template-columns:1fr}}
.acc-list{margin:0;display:grid}
.acc-list div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line-c)}
.acc-list dt{font-weight:700;color:var(--leaf)}
.acc-list dd{margin:0}
.acc-map{grid-column:2;justify-self:start}
@media (max-width:760px){.acc-map{grid-column:1}.acc-list div{grid-template-columns:1fr;gap:4px}}

/* ===== 一覧ページ ===== */
.list-sec{background:var(--bg)}
.filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(36px,5vw,56px)}
.filter button{font:inherit;font-weight:700;font-size:.9rem;padding:10px 22px;border-radius:999px;border:1.5px solid var(--line-c);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .2s}
.filter button.on{background:var(--leaf);border-color:var(--leaf);color:#fff}
.post-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(20px,2.5vw,32px)}
@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.post-grid{grid-template-columns:1fr}}
.koma-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row!important;overflow:visible!important;margin-right:0!important;padding-right:0!important}
@media (max-width:760px){.koma-grid{grid-template-columns:1fr!important}}
.komas-page{padding:clamp(28px,4vw,56px)}
.komas-page li:nth-child(3n+1){--r:-1.5deg}
.komas-page li:nth-child(3n+2){--r:1.2deg}
.komas-page li:nth-child(3n){--r:-.8deg}
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(48px,6vw,72px);font-family:var(--f-latin);font-weight:700}
.pager a,.pager span{min-width:44px;height:44px;display:inline-grid;place-items:center;border-radius:999px;text-decoration:none;color:var(--ink);padding:0 14px}
.pager a{background:var(--surface);border:1.5px solid var(--line-c)}
.pager a svg{width:16px;height:16px;margin-left:6px;display:inline}
.pager a:last-child{display:inline-flex;align-items:center}
.pager .cur{background:var(--leaf);color:#fff}
.pager .dots{color:var(--muted)}
.diary-list{list-style:none;padding:0;display:grid;gap:20px;max-width:960px;margin-inline:auto}
.diary{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:center;background:var(--surface);border-radius:32px;padding:16px;text-decoration:none;transition:box-shadow .3s,transform .3s}
.diary:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.diary .thumb{border-radius:22px;overflow:hidden;aspect-ratio:16/9}
.diary .thumb img{width:100%;height:100%;object-fit:cover}
.d-body{display:grid;gap:8px;padding-right:16px}
.d-body time{font-family:var(--f-latin);font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.d-body b{font-family:var(--f-display);font-size:1.25rem}
.d-body .ex{font-size:.9rem;color:var(--muted)}
.d-body .more{padding:4px 0}
@media (max-width:700px){.diary{grid-template-columns:1fr}.d-body{padding:4px 8px 8px}}
.diary-rel{max-width:none}
.diary-rel .d-body .ex{display:none}

/* ===== 記事ページ ===== */
.article-sec{padding-block:clamp(130px,13vw,170px) clamp(64px,8vw,96px);background:linear-gradient(180deg,var(--tint) 0,var(--bg) 360px)}
.article-sec .wrap{max-width:880px}
.a-head{display:grid;gap:18px;margin-bottom:clamp(32px,4vw,48px)}
.a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.84rem;color:var(--muted)}
.a-meta .tag{font-size:.74rem;font-weight:700;color:var(--leaf-deep);background:var(--tint);border-radius:999px;padding:2px 12px}
.a-meta time{font-family:var(--f-latin);letter-spacing:.06em}
.a-meta .kind{font-weight:700;color:var(--leaf)}
.a-head h1{font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.6;letter-spacing:.04em}
.a-video{position:relative;display:block;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:clamp(40px,5vw,56px)}
.a-video img{width:100%;aspect-ratio:16/9;object-fit:cover}
.a-video .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--leaf-deep);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .25s}
.a-video .play svg{width:36px;height:36px;margin-left:4px}
.a-video:hover .play{transform:scale(1.08)}
.a-video .v-cap{position:absolute;left:16px;bottom:16px;background:var(--surface);color:var(--ink);font-size:.82rem;font-weight:700;border-radius:999px;padding:6px 14px}
.a-comic,.a-eyecatch{margin:0 0 clamp(40px,5vw,56px)}
.a-comic{background:var(--surface);border-radius:28px;padding:14px;box-shadow:var(--shadow)}
.a-comic img{width:100%;border-radius:16px}
.a-eyecatch img{width:100%;border-radius:28px;box-shadow:var(--shadow-s)}
.a-body{font-size:1.02rem;line-height:2.1;display:grid;gap:1.2em}
.a-body h2{font-size:1.35rem;margin-top:1.2em;padding-left:16px;border-left:4px solid var(--leaf);line-height:1.6}
.a-body h3{font-size:1.15rem;margin-top:.8em}
.a-body ul,.a-body ol{margin:0;padding-left:1.4em}
.a-body strong{background:linear-gradient(transparent 62%,var(--tint) 62%)}
.a-share{margin-top:clamp(48px,6vw,72px);padding-top:32px;border-top:1px solid var(--line-c);display:flex;justify-content:center}
.related-sec{background:var(--surface)}
.related-sec .komas{background:none;padding:0}