/* 自動生成（scripts/build-seo.mjs）：site/index.html の <style> の写し。ここは直さず、トップの <style> を直す */
/* 案A2「ターコイズの帯」：ターコイズの帯（上下を二重の波で区切る）に白い角丸カードを置く。ライトモード固定。
   A からの直し：帯を少し明るく（白い大きな見出しと 3.08:1）、波に淡いターコイズの縁、帯の端に淡い丸の模様、帯の上の説明文は白い角丸ラベルに。 */
:root{
  color-scheme:light;
  --bg:#F5FAF9; --surface:#FFFFFF; --ink:#1F2E35; --muted:#52626B; --heading:#17424A;
  --band:#22A2A9;      /* 帯のターコイズ（白い大きな見出しと 3.08:1。A の #1E9CA3 より少し明るく） */
  --band-pale:#B4E6E8; /* 波の縁の淡いターコイズ（飾りだけ） */
  --band-hi:#3BBFC4;   /* 明るいターコイズ（飾りだけ。文字には使わない） */
  --teal:#0B767D;      /* 文字・リンクのターコイズ（白地で 5.38:1） */
  --btn:#0F8088;       /* ターコイズのボタン（白い文字と 4.70:1） */
  --btn-hover:#0B6F76; /* 同 hover（5.92:1） */ --btn-active:#095E64; /* 同 active（7.51:1） */
  --sun-hover:#FAB555; /* オレンジ hover（#33240F と 8.43:1） */ --sun-active:#EE9A1F; /* 同 active（6.63:1） */
  --teal-soft:#E0F4F4; --sun:#F7A531; --sun-ink:#33240F; --sun-soft:#FFF4DE;
  --line:#DCE8E8; --field:#6F9196; --field-bg:#F7FBFB;
  --shadow:0 6px 22px rgba(20,96,102,.07),0 1px 3px rgba(20,96,102,.05);
  --wave:clamp(28px,4.6vw,60px);
  /* 帯の端の淡い丸（文字の後ろには置かない） */
  --band-deco:radial-gradient(circle at 2.5% 30%,rgba(255,255,255,.12) 0 70px,transparent 71px),radial-gradient(circle at 97.5% 72%,rgba(255,255,255,.12) 0 90px,transparent 91px),radial-gradient(circle at 5% 64%,rgba(255,227,166,.55) 0 7px,transparent 8px),radial-gradient(circle at 95.5% 22%,rgba(255,227,166,.55) 0 9px,transparent 10px),radial-gradient(circle at 96.5% 30%,rgba(255,255,255,.35) 0 5px,transparent 6px);
  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
/* ページの上端（ヘッダーの後ろ）もターコイズ。ヒーローの帯とつながる */
body{margin:0;background:linear-gradient(var(--band),var(--band)) top / 100% 320px no-repeat,var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img,svg{max-width:100%;height:auto}
a{color:var(--teal)}
::selection{background:#CDEFF0;color:var(--ink)}
:focus-visible{outline:3px solid #0B5F65;outline-offset:3px;box-shadow:0 0 0 3px #fff;border-radius:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.35;margin:0;color:var(--heading)}
h2{font-size:clamp(24px,3.4vw,32px);font-weight:900;margin-bottom:14px}
/* 見出しの下の、やわらかい波線 */
h2::after{content:"";display:block;width:64px;height:10px;margin-top:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M2 6c5-5 9-5 14 0s9 5 14 0 9-5 14 0 9 5 14 0' fill='none' stroke='%233BBFC4' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") left center / 64px 10px no-repeat}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
.lead{color:var(--muted)}

/* header：ターコイズの上に浮かぶ白いピル型のバー */
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;width:calc(100% - 48px);max-width:1032px;margin:16px auto 0;padding:10px 12px 10px 28px;background:var(--surface);border-radius:999px;box-shadow:0 8px 24px rgba(6,70,75,.16)}
.logo{font-family:var(--display);font-weight:900;font-size:18px;color:var(--heading);text-decoration:none;line-height:1.5}
.logo small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted)}
.btn{display:inline-block;background:var(--btn);color:#fff;font-weight:700;text-decoration:none;border:0;border-radius:999px;padding:14px 30px;font-size:16px;cursor:pointer;font-family:var(--body);box-shadow:0 6px 14px rgba(15,128,136,.22);transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease}
/* hover は少し濃く・浮かせる、active は更に濃く・沈める（どちらも白い文字と 4.5:1 以上） */
.btn:hover{background:var(--btn-hover);transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,128,136,.28)}
.btn:active{background:var(--btn-active);transform:translateY(1px);box-shadow:0 2px 6px rgba(15,128,136,.24)}
.btn-sm{padding:10px 20px;font-size:14px}
/* 事前会員登録へのボタンはオレンジ（濃い文字で 7.42:1） */
.top .btn,.hero .btn,.mini-cta .btn,.signup .btn{background:var(--sun);color:var(--sun-ink);box-shadow:0 6px 14px rgba(214,128,20,.26)}
/* オレンジの hover は明るく（8.43:1）、active は少し濃く（6.63:1） */
.top .btn:hover,.hero .btn:hover,.mini-cta .btn:hover,.signup .btn:hover{background:var(--sun-hover);box-shadow:0 8px 18px rgba(214,128,20,.32)}
.top .btn:active,.hero .btn:active,.mini-cta .btn:active,.signup .btn:active{background:var(--sun-active);box-shadow:0 2px 6px rgba(214,128,20,.26)}
/* キーボードのフォーカス：上の box-shadow（影）が :focus-visible の白い縁取りを消さないよう、ボタンにも白い縁取りを重ねる */
.btn:focus-visible{box-shadow:0 0 0 3px #fff,0 6px 14px rgba(15,128,136,.22)}
.top .btn:focus-visible,.hero .btn:focus-visible,.mini-cta .btn:focus-visible,.signup .btn:focus-visible{box-shadow:0 0 0 3px #fff,0 6px 14px rgba(214,128,20,.26)}
/* 帯の上に直接置くボタンは、フォーカス枠を本文色に（帯 #22A2A9 と 4.54:1。#0B5F65 だと 2.40:1 で足りない） */
.mini-cta .btn:focus-visible{outline-color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.btn:hover,.btn:active{transform:none;transition:none}}

/* hero：ターコイズの帯＋下端の波。文章は白い角丸カードに置く */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center;padding:24px 24px 70px}
.hero::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:
  radial-gradient(circle at 4% 78%,rgba(255,255,255,.09) 0 80px,transparent 81px),
  radial-gradient(circle at 97% 34%,rgba(255,255,255,.09) 0 110px,transparent 111px),
  radial-gradient(circle at 90% 88%,rgba(255,227,166,.35) 0 9px,transparent 10px),
  radial-gradient(circle at 8% 22%,rgba(255,227,166,.35) 0 7px,transparent 8px),
  var(--band)}
.hero::after{content:"";position:absolute;z-index:-2;top:calc(100% - 1px);height:var(--wave);left:50%;width:100vw;margin-left:-50vw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V50C1200 80 960 78 720 58S240 30 0 66Z' fill='%23B4E6E8'/%3E%3Cpath d='M0 0H1440V36C1200 78 960 72 720 44S240 16 0 52Z' fill='%2322A2A9'/%3E%3C/svg%3E") center top / 100% 100% no-repeat}
.hero > div:first-child{background:var(--surface);border-radius:32px;padding:26px 34px 22px;box-shadow:0 14px 36px rgba(6,70,75,.18)}
.hero h1{font-size:clamp(32px,3.2vw,40px);font-weight:900;letter-spacing:.01em;margin-bottom:12px}
.hero .sub{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:28px;max-width:36em}
/* ヒーローの事前会員登録の特典（2026-09-26 代表の指示で、金額ではなく特典を主役にした） */
.hero-offer{background:var(--sun-soft);border:2px solid var(--sun);border-radius:22px;padding:12px 20px 14px;margin:0 0 14px}
.offer-label{display:inline-block;margin:0 0 2px;padding:3px 12px;border-radius:999px;background:#fff;color:#85560C;font-size:13px;font-weight:700}
.offer-main{margin:0;font-family:var(--display);font-weight:700;font-size:20px;color:var(--heading);line-height:1.3}
.offer-main s{font-family:var(--body);font-weight:400;font-size:17px;color:var(--muted)}
.offer-arrow{color:var(--muted);font-weight:400;margin:0 2px}
.offer-main strong{font-weight:900;font-size:38px;color:#B45309;letter-spacing:.02em;vertical-align:-3px}
.offer-sub{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.5;color:var(--heading)}
@media (min-width:900px){.offer-sub br{display:none}}
.offer-sub strong{font-weight:900;font-size:24px;color:#B45309;white-space:nowrap}
.offer-list{list-style:none;margin:10px 0 0;padding:0;font-size:14px;color:var(--ink);line-height:1.7}
.offer-list li{position:relative;padding-left:22px}
.offer-list li+li{margin-top:4px}
/* ヒーローの採用ページへのボタン（事前会員登録のボタンより控えめに、白地にターコイズの枠） */
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .btn.btn-recruit{background:#fff;color:var(--teal);border:2px solid var(--btn);box-shadow:none}
.hero .btn.btn-recruit:hover{background:var(--teal-soft)}
.hero .btn.btn-recruit:active{background:#CDEFF0}
.offer-list li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2.5px solid #B45309;border-bottom:2.5px solid #B45309;transform:rotate(-45deg)}
.hero-visual{position:relative}
.hero-visual::before{content:"";position:absolute;z-index:-1;inset:4% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,.08) 70%,transparent)}
.hero-visual img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(6,70,75,.22))}

/* 2-hour slots */
.eyebrow{display:inline-block;background:var(--teal-soft);color:var(--teal);font-weight:700;font-size:14px;border-radius:999px;padding:4px 16px;margin-bottom:12px}
.slot-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.slot-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:26px 28px;box-shadow:var(--shadow)}
.slot-card.kids{background:#FFF8EA;border-color:#F5DDB0}
.slot-card.room{background:#EAF7F7;border-color:#C6E7E8}
.slot-card .unit{font-family:var(--display);font-weight:900;font-size:clamp(28px,4vw,40px);line-height:1.2;margin:6px 0 4px}
.slot-card .unit small{font-size:16px;font-weight:700;color:var(--muted)}
.slot-card.kids .unit{color:#A8690C}
.slot-card.room .unit{color:var(--teal)}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:28px}
.timeline span{display:block;text-align:center;font-weight:700;font-size:14px;padding:12px 4px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line)}
.timeline span.on{background:var(--btn);color:#fff;border-color:var(--btn)}
.timeline-note{font-size:14px;color:var(--muted);margin-top:12px}
@media (max-width:820px){.slot-cards{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}}

/* scenes & trust */
.scenes{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.scenes li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 20px 10px 16px;font-weight:700;box-shadow:var(--shadow);word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.scenes li::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--band-hi);margin-right:10px;vertical-align:1px}
.trust{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.trust li{display:grid;grid-template-columns:32px 1fr;column-gap:14px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:var(--shadow)}
.trust li::before{content:"";grid-row:1 / span 2;width:32px;height:32px;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230F8088' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat}
.trust b{grid-column:2;display:block;font-family:var(--display);font-size:18px;margin-bottom:4px;color:var(--heading)}
.trust span{grid-column:2;color:var(--muted);font-size:15px}
.trust li:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:820px){.trust{grid-template-columns:1fr}}
@media (max-width:480px){.scenes li{border-radius:18px;font-size:15px;padding:10px 16px 10px 14px}}

/* key facts（ファーストビュー直下の要点）：帯と波にまたがる白いカード */
.keyfacts{position:relative;z-index:1;list-style:none;padding:0;margin:-36px 0 0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:0 14px 36px rgba(6,70,75,.14)}
.keyfacts li{padding:20px 14px 18px;box-shadow:0 0 0 .5px var(--line);line-height:1.6;text-align:center}
.keyfacts .k{display:block;font-size:13px;font-weight:700;color:var(--teal)}
.keyfacts b{display:block;font-family:var(--display);font-size:17px;color:var(--heading)}
.keyfacts small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media (max-width:820px){.keyfacts{grid-template-columns:1fr 1fr}.keyfacts li:last-child{grid-column:1 / -1}}

/* sections */
section{padding:64px 0}

/* ターコイズの帯（#how・#program・#price〜#flow・#signup）。上下は大きくゆるい波 */
#how,#program,#price,#flow,#signup{position:relative;background:var(--band-deco),var(--band)}
#price{background:radial-gradient(circle at 97% 12%,rgba(255,255,255,.12) 0 80px,transparent 81px),radial-gradient(circle at 3% 80%,rgba(255,227,166,.55) 0 8px,transparent 9px),var(--band)}
#flow{background:radial-gradient(circle at 2.5% 40%,rgba(255,255,255,.12) 0 76px,transparent 77px),radial-gradient(circle at 96% 8%,rgba(255,227,166,.55) 0 8px,transparent 9px),var(--band)}
#how,#program,#price,#signup{margin-top:var(--wave)}
#how,#program,#flow,#signup{margin-bottom:var(--wave)}
#how,#signup{padding:36px 0 52px}
#program{padding:48px 0 64px}
#price{padding:36px 0 60px}
#flow{padding:60px 0 52px}
#how::before,#program::before,#price::before,#signup::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--wave);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 30C220 2 470 0 720 20S1180 58 1440 14V80H0Z' fill='%23B4E6E8'/%3E%3Cpath d='M0 50C240 12 480 6 720 32S1200 72 1440 34V80H0Z' fill='%2322A2A9'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat}
#how::after,#program::after,#flow::after,#signup::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:var(--wave);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V54C1180 78 940 78 720 58S260 32 0 64Z' fill='%23B4E6E8'/%3E%3Cpath d='M0 0H1440V40C1180 74 940 70 720 46S260 18 0 50Z' fill='%2322A2A9'/%3E%3C/svg%3E") center top / 100% 100% no-repeat}
/* 帯の上の文字：見出しは白（大きく太い文字として 3:1 以上）。説明文（lead）は白い角丸ラベルに入れ、本文色で読む */
#how h2,#program h2,#price h2,#flow h2{color:#fff}
#how h2::after,#program h2::after,#price h2::after,#flow h2::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M2 6c5-5 9-5 14 0s9 5 14 0 9-5 14 0 9 5 14 0' fill='none' stroke='%23FFE3A6' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}
#how .lead,#program .lead,#price .lead{display:table;max-width:100%;background:#F2F9F9;color:var(--ink);font-weight:500;font-size:17px;line-height:1.8;border-radius:16px;padding:12px 18px;box-shadow:0 6px 16px rgba(6,70,75,.12)}
#how .illust img,#flow .flow-visual img{filter:drop-shadow(0 10px 18px rgba(6,70,75,.2))}
#how .illust-note{display:table;margin:10px auto 0;background:#F2F9F9;color:var(--muted);border-radius:14px;padding:4px 14px}

/* how */
.floors{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.floor{background:var(--surface);border-radius:28px;padding:26px 28px;box-shadow:0 10px 28px rgba(6,70,75,.14)}
.floor .tag{display:inline-block;font-family:var(--display);font-weight:900;font-size:14px;border-radius:999px;padding:3px 14px;margin-bottom:10px}
.floor.up .tag{background:var(--teal-soft);color:var(--teal)}
.floor.down .tag{background:var(--sun-soft);color:#85560C}
.floor ul{margin:10px 0 0;padding-left:1.2em}
.floor li::marker{color:var(--band-hi)}

/* apart */
.apart{position:relative;overflow:hidden;background:var(--sun-soft);border-radius:36px;padding:40px clamp(20px,5vw,52px)}
.apart::after{content:"";position:absolute;right:-70px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:rgba(247,165,49,.10)}
.apart > *{position:relative;z-index:1}

/* program（預けている2時間の過ごし方）。2026-10-16 保育の中身を主役に：3つの力ごとに遊びを2つずつ、アイコンつきの白いカードで */
#program .eyebrow{background:#fff;box-shadow:0 4px 12px rgba(6,70,75,.12)}
#program h2{font-size:clamp(28px,4vw,40px)}
.play-powers{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.play-powers > li{background:var(--surface);border-radius:26px;padding:24px 22px 20px;box-shadow:0 12px 28px rgba(6,70,75,.16)}
.play-powers h3{font-size:clamp(21px,2.2vw,24px);font-weight:900}
.play-powers h3::before{content:"";display:block;width:36px;height:6px;border-radius:999px;background:var(--sun);margin-bottom:12px}
.power-d{color:var(--muted);font-size:15px;margin:4px 0 14px}
.plays{list-style:none;padding:14px 0 0;margin:0;display:grid;gap:14px;border-top:1.5px dashed var(--line)}
.plays li{display:grid;grid-template-columns:56px 1fr;column-gap:12px;align-items:center}
.plays img{grid-row:1 / span 2;width:56px;height:56px}
.plays b{font-family:var(--display);font-size:17px;line-height:1.4;color:var(--heading)}
.plays span{color:var(--muted);font-size:14.5px;line-height:1.7}
.play-ages{margin:18px 0 0;background:var(--surface);border-radius:26px;padding:22px 26px 24px;box-shadow:0 12px 28px rgba(6,70,75,.16)}
.play-ages dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px;margin:12px 0 0}
.play-ages dl > div{background:var(--teal-soft);border-radius:18px;padding:12px 16px}
.play-ages dt{font-family:var(--display);font-weight:900;font-size:18px;color:var(--teal)}
.play-ages dd{margin:2px 0 0;color:var(--ink);font-size:15px}
.play-promise{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.play-promise li{display:flex;align-items:center;gap:8px;background:var(--sun-soft);color:var(--sun-ink);font-weight:700;font-size:15px;border-radius:999px;padding:7px 16px 7px 10px}
.play-promise li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23B45309' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat}
#program h3.program-sub{color:#fff;font-size:21px;font-weight:900;margin:36px 0 10px}
.program-cap{display:table;max-width:100%;background:#F2F9F9;color:var(--ink);font-size:15px;border-radius:14px;padding:6px 14px;margin:0}
.program-list li.is-play{background:var(--sun-soft);box-shadow:0 0 0 2px var(--sun),0 6px 18px rgba(6,70,75,.1)}
@media (max-width:900px){.play-powers{grid-template-columns:1fr}}
@media (min-width:560px) and (max-width:900px){.plays{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.play-ages dl{grid-template-columns:1fr}}
@media (max-width:520px){.play-powers > li,.play-ages{padding:20px 18px;border-radius:22px}.play-ages dl{gap:10px}.play-ages dl > div{padding:10px 14px}.play-promise{display:grid;gap:8px}.play-promise li{font-size:14px}}
.program-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.program-list li{display:grid;grid-template-columns:104px 1fr;column-gap:16px;background:var(--surface);border-radius:20px;padding:15px 20px;box-shadow:0 6px 18px rgba(6,70,75,.1)}
.program-list .t{font-family:var(--display);font-weight:700;color:var(--teal);white-space:nowrap}
.program-list b{display:block;font-family:var(--display);font-size:17px;color:var(--heading)}
.program-list span.d{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.program-note{background:var(--sun-soft);color:var(--ink);border-radius:20px;padding:16px 22px;margin:16px 0 0;font-size:15px}
/* スマホは時刻と見出しを1行に並べ、説明を下に通す（節の高さを抑える） */
@media (max-width:480px){.program-list li{grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;padding:13px 18px}.program-list li > div{display:contents}.program-list span.d{grid-column:1 / -1}}
.apart p:last-child{margin-bottom:0}

/* amenities */
.amenities{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.amenities li{padding:20px 22px;box-shadow:0 0 0 .5px var(--line);display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-content:start}
.amenities b{grid-column:2;display:block;font-family:var(--display);font-size:18px;margin-bottom:4px;color:var(--heading)}
.amenities span{grid-column:2;color:var(--muted);font-size:15px}
@media (max-width:820px){.amenities{grid-template-columns:1fr 1fr}}
/* 500px 前後の2列では文字が細切れになるので、1列にする幅を 560px に広げる */
@media (max-width:560px){.amenities{grid-template-columns:1fr}}

/* イラスト（代表が用意した画像）とアイコン（site/img/icons の SVG。scripts/gen-icons.py で生成） */
.ill{display:block;height:auto;object-fit:contain}
.illust{max-width:760px;margin:24px auto 0}
.illust img{display:block;width:100%;height:auto}
.illust-note{font-size:13px;color:var(--muted);margin:8px 0 0;text-align:center}
.keyfacts .kf-icon{display:block;width:48px;height:48px;margin:0 auto 8px}
/* パソコンでは、要点の帯まで最初の画面に収める（2026-09-26 代表の指示）。アイコンを見出しの左に小さく並べ、帯を低くする */
@media (min-width:821px){
 .hero{padding-top:14px;padding-bottom:54px}
 .hero h1{margin-bottom:10px}
 .hero .first{margin-bottom:10px}
 .hero-offer{margin-bottom:12px}
 .keyfacts{margin-top:-30px}
 .keyfacts li{padding:10px 10px 10px;line-height:1.5}
 .keyfacts small{margin-top:0}
 .keyfacts .kf-icon{display:inline-block;width:30px;height:30px;margin:0 6px 0 0;vertical-align:middle}
 .keyfacts .k{display:inline-block;vertical-align:middle;font-size:13px}
 .keyfacts b{margin-top:2px}
}
.amenities .ill{grid-column:1;grid-row:2;align-self:center;width:48px;height:48px}

/* price */
.table-scroll{overflow-x:auto;margin-top:20px;border-radius:24px;background:var(--surface);box-shadow:0 10px 28px rgba(6,70,75,.14)}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
tr:first-child th{border-top-left-radius:24px}
tr:last-child th{border-bottom-left-radius:24px}
th{font-weight:700;width:34%;background:#F4FAFA;color:var(--heading)}
td strong{font-family:var(--display);font-size:20px;color:var(--teal)}
.note{font-size:14px;color:var(--muted);margin-top:12px}
#price .note{background:#F2F9F9;border-radius:16px;padding:14px 20px;margin-top:16px}

/* flow */
.flow{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
@media (max-width:1000px){.flow{grid-template-columns:1fr 1fr}}
.flow li{counter-increment:step;background:var(--surface);border-radius:28px;padding:24px 24px;box-shadow:0 10px 28px rgba(6,70,75,.14)}
.flow li::before{content:counter(step);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:var(--sun-ink);font-family:var(--display);font-weight:900;margin-bottom:10px}
.flow li p{margin:6px 0 0}
/* ご利用の流れの画像（4コマ）。狭い幅では 2×2 に並べ替えた画像（flow-steps-grid）に切り替える */
.flow-visual{margin:24px 0 0}
.flow-visual img{display:block;width:100%;height:auto}
@media (max-width:820px){.flow-visual{max-width:520px;margin:20px auto 0}}
/* 1列になる幅では、番号を左・見出しと文章を右に並べて縦長の余白をなくす */
@media (max-width:820px){
  .flow li{display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:18px 20px}
  .flow li::before{grid-row:1 / span 2;margin:0}
  .flow li h3,.flow li p{grid-column:2}
}

/* freelance */
.fit-list{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fit-list li{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:22px 24px;box-shadow:var(--shadow)}
.fit-list b{display:block;font-family:var(--display);font-size:18px;margin-bottom:6px;color:var(--heading)}
.fit-list b::before{content:"";display:block;width:36px;height:6px;border-radius:999px;background:var(--band-hi);margin-bottom:12px}
.fit-list span{color:var(--muted);font-size:15px}
@media (max-width:820px){.fit-list{grid-template-columns:1fr}}

/* 改行位置（本番 2026-09-26 の追加に合わせる）：見出しは行の長さをそろえ、本文は最後の行が一文字だけにならないようにする。対応ブラウザは文節で折り返す */
h1,h2,h3,summary,.first,.eyebrow{text-wrap:balance;word-break:auto-phrase}
p,li,dd,dt,label,small,.lead{text-wrap:pretty}
.nw{white-space:nowrap}
/* story（代表社員の想い）と value（完全個室・休む時間）：ページ地の上の白い角丸カード */
/* カードの文章は言葉の切れ目で折り返す（auto-phrase 対応のブラウザは文節で、ほかは <wbr/> と句読点で） */
.story h2,.story p,.value h2,.value p{word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere}
.story{position:relative;overflow:hidden;max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:44px clamp(20px,6vw,64px) 40px;box-shadow:var(--shadow)}
/* 右上に淡いクリームの丸（文字の後ろには置かない） */
.story::after{content:"";position:absolute;right:-64px;top:-64px;width:168px;height:168px;border-radius:50%;background:rgba(247,165,49,.10);pointer-events:none}
.story > *{position:relative;z-index:1}
.story h2{line-height:1.55;margin-bottom:24px;padding-right:36px;text-wrap:balance}
.story p{margin:0 0 1.1em;line-height:1.95}
.story strong{font-family:var(--display);color:var(--heading)}
.story .story-em{font-family:var(--display);font-size:clamp(20px,2.6vw,24px);margin:1.4em 0 .4em}
.story .story-sign{text-align:right;font-weight:700;margin:28px 0 0;padding-top:18px;border-top:1px dashed var(--line);color:var(--muted)}
.value{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:40px clamp(20px,6vw,56px) 36px;text-align:center;box-shadow:var(--shadow)}
/* アイコンは淡いターコイズの丸に入れる */
.value .value-icon{display:block;box-sizing:content-box;width:64px;height:64px;padding:14px;margin:0 auto 14px;background:var(--teal-soft);border-radius:50%}
.value h2{text-wrap:balance}
.value h2::after{margin-left:auto;margin-right:auto;background-position:center}
.value p{margin:0 0 1em;line-height:1.95}
.value p:last-child{margin-bottom:0;font-weight:700;color:var(--teal)}
.value .value-em{font-family:var(--display);font-size:clamp(20px,2.6vw,24px);margin:1.4em 0 .4em;color:var(--heading)}
/* #trust の後ろに2枚続けて置き、#price の帯（上の波）へつなぐ */
#privateroom{padding:48px 0 16px}
#rest{padding:16px 0 56px}
@media(max-width:520px){
 .story{padding:32px 20px 28px;border-radius:26px}
 .story::after{right:-80px;top:-80px}
 .story h2{padding-right:0}
 .value{padding:30px 20px 28px;border-radius:26px}
 #privateroom{padding-top:40px}
}

/* facts */
dl.facts{display:grid;grid-template-columns:10em 1fr;margin:24px 0 0;background:var(--surface);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
dl.facts dt,dl.facts dd{margin:0;padding:14px 20px;border-bottom:1px solid var(--line)}
dl.facts dt{font-weight:700;background:var(--teal-soft);color:var(--heading)}
dl.facts dt:last-of-type,dl.facts dd:last-of-type{border-bottom:0}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 22px;margin-top:12px;box-shadow:var(--shadow)}
details[open]{border-color:#BFE3E5}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:
  linear-gradient(var(--btn),var(--btn)) center / 12px 2.4px no-repeat,
  linear-gradient(var(--btn),var(--btn)) center / 2.4px 12px no-repeat,
  var(--teal-soft)}
details[open] summary::after{background:linear-gradient(var(--btn),var(--btn)) center / 12px 2.4px no-repeat,var(--teal-soft)}
details p{margin:10px 0 0;color:var(--muted)}
.guide-links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}.guide-links a{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-weight:700;color:var(--heading);text-decoration:none}.guide-links a:hover{border-color:var(--btn)}.guide-nav{margin-top:22px}.guide-nav p{margin:0;font-weight:700;color:var(--heading)}
#faq .faq-tabs{display:none;flex-wrap:wrap;gap:8px;margin:18px 0 4px}#faq.faq-js .faq-tabs{display:flex}#faq .faq-tabs [role=tab]{font:inherit;font-size:15px;font-weight:700;line-height:1.3;min-height:44px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--heading);cursor:pointer}#faq .faq-tabs [role=tab][aria-selected=true]{background:var(--btn);border-color:var(--btn);color:#fff}#faq .faq-tabs [role=tab]:focus-visible{outline:3px solid var(--sun);outline-offset:2px}#faq .faq-cat{margin:28px 0 0;font-size:18px;color:var(--heading)}#faq.faq-js .faq-cat{display:none}@media (max-width:480px){#faq .faq-tabs [role=tab]{flex:1 1 calc(50% - 8px);font-size:14px;padding:9px 10px}}

/* form：事前会員登録は帯の上の白いカード。入力欄は枠線と薄い地色で見分けやすく */
.signup{background:var(--surface);color:var(--ink);border-radius:36px;padding:48px clamp(20px,5vw,56px);margin:0;box-shadow:0 16px 40px rgba(6,70,75,.18)}
.signup .lead{color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label,.legend{font-weight:700;font-size:15px}
input[type=text],input[type=email],select,textarea{font:inherit;padding:12px 16px;border-radius:14px;border:1.5px solid var(--field);background:var(--field-bg);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
/* フォーカス：枠をターコイズ（#0F8088、白と 4.70:1）に変え、内側 1px を足して太く見せ、外にターコイズの輪。事前会員登録・お問い合わせ共通 */
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{outline:2px solid transparent;border-color:var(--btn);background:#fff;box-shadow:inset 0 0 0 1px var(--btn),0 0 0 4px rgba(59,191,196,.35)}
textarea{resize:vertical;min-height:9em}
fieldset{border:0;padding:0;margin:0;grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips label{font-weight:500;background:var(--field-bg);border:1.5px solid #B9D3D5;border-radius:999px;padding:7px 16px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.chips label:hover{border-color:var(--field)}
.chips label:has(input:checked){background:var(--teal-soft);border-color:var(--btn);color:var(--heading);font-weight:700}
.chips input{accent-color:var(--btn);margin-right:6px}
/* :has() に対応していないブラウザ：チップの文字は input の後ろの地の文（span が無い）ので太字にできない。代わりにチェックした四角をターコイズの輪で囲む */
@supports not selector(:has(*)){
  .chips input:checked{outline:2px solid var(--btn);outline-offset:2px;box-shadow:0 0 0 5px rgba(59,191,196,.35);border-radius:3px}
  /* チェック済みでもキーボードのフォーカスは見分けられるように（太い濃い枠＋白い縁取り） */
  .chips input:checked:focus-visible{outline:3px solid #0B5F65;outline-offset:3px;box-shadow:0 0 0 3px #fff,0 0 0 8px rgba(59,191,196,.35)}
}
.consent{grid-column:1/-1;font-weight:500;font-size:14px}
.consent input{accent-color:var(--btn)}
.consent a{color:var(--teal)}
.submit{grid-column:1/-1}
.status{grid-column:1/-1;font-weight:700;min-height:1.5em}
.recaptcha-note{grid-column:1/-1;font-size:12px;color:var(--muted);margin:0}
.grecaptcha-badge{visibility:hidden}
.thanks{background:var(--teal-soft);border-radius:24px;padding:28px;margin-top:28px}

/* contact */
.contact{background:var(--surface);border-radius:36px;padding:44px clamp(20px,5vw,56px);margin:0;box-shadow:var(--shadow)}
.contact .consent a{color:var(--teal)}
.contact .thanks{background:var(--teal-soft)}

footer{background:var(--surface);border-top:1px solid var(--line);padding:32px 0 48px;font-size:14px;color:var(--muted)}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px}

/* share */
.share{text-align:center}
.share h2::after{margin-left:auto;margin-right:auto;background-position:center}
.share .lead{margin:0 auto}
.share-list{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 28px}
.share-btn{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.share-btn svg{width:56px;height:56px;border-radius:50%;box-sizing:border-box;fill:#fff;box-shadow:0 6px 14px rgba(20,96,102,.14)}
.share-btn.line svg{background:#06C755;padding:12px}
.share-btn.fb svg{background:#fff;fill:#0866FF}
.share-btn.x svg{background:#000;padding:16px}
.share-btn.copy svg{background:var(--btn);padding:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-btn:hover svg{filter:brightness(1.08)}
.share-status{min-height:1.5em;margin:12px 0 0;font-size:14px;font-weight:700;color:var(--teal)}

@media (max-width:820px){
  .hero,.floors,form{grid-template-columns:1fr}
  .hero{gap:28px}
  .flow{grid-template-columns:1fr}
  dl.facts{grid-template-columns:1fr}
  dl.facts dt{border-bottom:0}
  /* 狭い幅では帯の飾りの丸を消し、文字の後ろを無地にする */
  .hero::before{background:var(--band)}
}
/* 本文が画面の端近くまで広がる幅では、帯の端の丸が文字に重なるので消す（右上の小さい点だけ残す） */
@media (max-width:1180px){
  #how,#program,#signup{background:radial-gradient(circle at 96% 1.5%,rgba(255,227,166,.6) 0 6px,transparent 7px),var(--band)}
  #price,#flow{background:var(--band)}
}

/* Copy layout adjustments, September 2026 */
.hero .sub{margin-bottom:14px}
.cta-note{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.8}
.hero .first{font-weight:700;color:var(--teal);border-left:4px solid var(--sun);padding-left:12px;margin:-2px 0 12px;line-height:1.6}
.hero .first sup{font-size:.7em;margin-left:2px}
/* 料金の例：帯の上の白いカード */
/* 料金の例：主役は部屋の広さ（約10㎡）。金額は右（スマホでは下）に控えめに置く（2026-09-26 代表の指示） */
.price-example{padding:26px 30px;background:var(--surface);color:var(--ink);border-radius:28px;margin-top:24px;display:flex;gap:18px 32px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 10px 28px rgba(6,70,75,.14)}
.example-room{display:flex;align-items:center;gap:18px;flex:1 1 340px}
.example-icon{width:72px;height:72px;flex:none}
.example-size{font-family:var(--display);font-weight:900;font-size:56px;line-height:1.05;color:var(--teal);white-space:nowrap}
.example-size small{display:block;font-size:16px;font-weight:700;color:var(--muted);margin-bottom:4px}
.example-room-text{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.5;color:var(--heading);margin-top:6px!important}
.example-fee{flex:0 1 auto;padding-left:30px;border-left:1.5px dashed var(--line)}
@media (max-width:700px){.example-fee{flex-basis:100%;padding:16px 0 0;border-left:0;border-top:1.5px dashed var(--line)}}
.price-example p{margin:0}
.price-example .example-label{font-weight:700;font-size:15px;color:var(--muted)}
.price-example .example-total{font-family:var(--display);font-size:26px;font-weight:900;line-height:1.35;color:var(--ink);white-space:nowrap}
.price-example .example-total small{font-size:14px;margin-left:4px;white-space:nowrap;color:var(--ink)}
.price-example .example-breakdown{font-size:13px;color:var(--muted);margin-top:4px}
.signup .signup-note{font-size:14px;color:var(--muted);margin:12px 0 0}
.floor-note{clear:both;color:var(--muted);font-size:13px;margin:14px 0 0;line-height:1.8}
.mini-cta{margin:24px 0 0}
@media(max-width:520px){
 .wrap{padding-left:20px;padding-right:20px}
 .top{width:calc(100% - 20px);margin-top:10px;gap:10px;padding:8px 8px 8px 18px}
 .top .logo{font-size:15px;line-height:1.5;min-width:0}
 .top .logo small{font-size:10px;line-height:1.7;margin-top:3px}
 .top .btn-sm{font-size:12px;padding:10px 12px;white-space:nowrap;flex-shrink:0}
 .hero{padding:20px 10px 64px;gap:24px}
 .hero > div:first-child{padding:26px 20px 24px;border-radius:26px}
 .hero h1{font-size:clamp(31px,8.8vw,44px);line-height:1.4;letter-spacing:0}
 .hero .eyebrow{font-size:12px;padding:5px 12px}
 .hero .sub{font-size:16px;line-height:1.9}
 .hero .btn{display:block;text-align:center;width:100%}
 .hero-offer{padding:16px 18px}
 .offer-main strong{font-size:38px}
 .price-example{padding:20px 22px}
 .price-example .example-label{font-size:14px}
 .price-example .example-total{font-size:24px}
 .example-size{font-size:46px}
 .example-icon{width:60px;height:60px}
 .example-room{gap:14px}
 .example-room-text{font-size:18px}
 .signup h2{font-size:25px}
 .signup{border-radius:28px}
 .contact{border-radius:28px}
}

.nowrap{white-space:nowrap}
@media(max-width:600px){
 #price table{min-width:0;table-layout:fixed}
 #price th{width:40%}
 #price th,#price td{padding:14px 12px;font-size:14px;overflow-wrap:anywhere}
 #price td strong{font-size:19px;white-space:nowrap}
 #price .table-scroll{overflow:visible}
}
@media(max-width:400px){
 .top{padding-left:14px}
 .top .logo{font-size:14px;letter-spacing:0}
}