/* ══ OMISEAI LP v3（2026-10-22）══
   和紙×明朝の見た目をやめ、今どきのWebサービスの見た目に切り替える（本人「AI時代に作ったサイト感まるでない」「オートライトの方がまだマシ」）。
   参考: autowrite.jp ＝ 全部ゴシック・濃い文字色・明るい灰色に方眼・白い角丸カード・見出し2行目だけグラデーション。
   zen.css の値（--z-*）を上書きして全体を一度に切り替える。差し色は OMISEAI の柿色のまま。
   文字色は背景とのコントラスト比 4.5 以上にする（本文 --z-text2・補足 --z-text3 とも）。 */
:root{
  --z-bg:#f4f4f2;
  --z-bg2:#ecece8;
  --z-paper:#ffffff;
  --z-line:rgba(20,20,30,.08);
  --z-line2:rgba(20,20,30,.16);
  --z-text:#16161d;
  --z-text2:#3a3a44;
  --z-text3:#5c5c66;
  --z-acc:#d9481f;
  --z-acc2:#b83a16;
  --z-grad:linear-gradient(90deg,#d9481f 0%,#f08a24 100%);
  --z-serif:'Noto Sans JP',system-ui,sans-serif;
  --z-sans:'Noto Sans JP',system-ui,sans-serif;
}
body{
  background-color:var(--z-bg);
  background-image:
    repeating-linear-gradient(0deg,rgba(150,150,165,.14) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(150,150,165,.14) 0 1px,transparent 1px 48px);
  color:var(--z-text);
  font-family:var(--z-sans);
}

/* 見出し：太いゴシック。字間は詰めすぎない */
.section-title{font-family:var(--z-sans);font-weight:800;letter-spacing:.01em;line-height:1.4;color:var(--z-text);font-size:clamp(1.6rem,3vw,2.3rem)}
.section-desc{color:var(--z-text2);font-size:1.02rem;line-height:1.9}
.section-label{font-family:var(--z-sans);font-weight:700;font-size:.74rem;letter-spacing:.14em;color:var(--z-acc);background:rgba(217,72,31,.08);border-radius:999px;padding:6px 14px}
.section-label::before,.section-label::after{display:none}

/* 冒頭：2行目の見出しだけグラデーション */
.hero-v3 h1 .nb:last-child{background:var(--z-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-v3 .hero-eyebrow{background:#fff;color:var(--z-acc)}
.hero-v3 .hero-sub{color:var(--z-text2)}

/* ボタン：角丸・塗り */
.cta-btn{border-radius:999px;background:var(--z-acc);box-shadow:0 10px 24px -12px rgba(217,72,31,.6)}
.cta-btn:hover{background:var(--z-acc2)}
.cta-ghost{border-radius:999px;background:#fff;border:1px solid var(--z-line2);color:var(--z-text)}
.header .nav-cta{border-radius:999px}
.header{background:rgba(244,244,242,.85)}
.lang-switch{border-radius:999px}

/* カード類：白・大きめの角丸・薄い枠 */
.aeo-flow{gap:18px}
.aeo-node,.tier-card,.faq-item,.pain-row,.hero-deliverables,.hs-bar{background:#fff;border:1px solid var(--z-line);border-radius:20px;box-shadow:0 1px 2px rgba(20,20,30,.04),0 12px 32px -20px rgba(20,20,30,.18)}
.aeo-node{padding:26px 24px}
.aeo-node.aeo-core{background:#fff;border-color:rgba(217,72,31,.35)}
.aeo-node h4{font-weight:800;font-size:1.05rem;color:var(--z-text)}
.aeo-node .aeo-ex{color:var(--z-acc);font-weight:700}
.aeo-node p{color:var(--z-text2);font-size:.95rem}
.aeo-ic{background:rgba(217,72,31,.08);border-radius:12px;color:var(--z-acc)}
.pain-stack{display:grid;gap:12px}
.pain-row{padding:18px 20px;border-bottom:1px solid var(--z-line)}
.pain-body p{color:var(--z-text);font-weight:700}
.pain-row .pain-sub,.pain-sub{color:var(--z-text2)}
.tier-card{padding:30px 28px}
.tier-card.featured{border:2px solid var(--z-acc)}
.tier-name{font-weight:800;color:var(--z-text);letter-spacing:.02em}
.tier-cap,.tier-feat{color:var(--z-text2)}
.tier-flag{border-radius:999px}
.faq-item{margin-bottom:10px;padding:0 22px}
.faq-q{color:var(--z-text);font-weight:700}
.faq-a-inner{color:var(--z-text2)}
.plan-note p{color:var(--z-text2)}
.diet-figs img{border-radius:24px}
.diet-figs figcaption{font-family:var(--z-sans);font-weight:800}
.diet-figs figcaption small,.diet-note,.hs-note,.hv-tag{color:var(--z-text3)}
.story-text h3{font-family:var(--z-sans);font-weight:800}
.story-badge{font-family:var(--z-sans)}
/* 背景の帯：方眼の上に薄い面を重ねて区切る */
.diet,.problem,.pricing{background:rgba(255,255,255,.55)}
.chat{background:transparent}
/* 最後のセクション：濃紺に近い墨色 */
.final{background:#16161d}
.final .section-title{color:#fff}
.final .section-desc{color:rgba(255,255,255,.78)}
.final .hs-note{color:rgba(255,255,255,.7)}
/* 冒頭の下の3項目 */
.hero-v3 .hero-deliverables{border-radius:0 0 24px 24px;box-shadow:0 20px 40px -28px rgba(20,20,30,.3)}
.hero-deliverables strong{font-family:var(--z-sans);font-weight:800;color:var(--z-text)}
.hero-deliverables small{color:var(--z-text3)}
.hero-deliverables span{font-family:var(--z-sans);font-weight:800;color:var(--z-acc)}
/* 紙メニューの絵は和の雰囲気を残す（実際の紙メニューの見立て） */
.before-mock .bm-title,.deliv-paper .dp-head,.deliv-paper .dp-row b{font-family:'Zen Old Mincho','Noto Serif JP',serif}

/* ── 文字の濃さ（コントラスト比 4.5 以上に）── */
:root{--z-acc:#c2410c;--z-acc2:#9a3412;--z-acc-text:#b13a0d;--z-grad:linear-gradient(90deg,#c2410c 0%,#ea7a18 100%)}
.section-label{color:#9a3412;background:rgba(194,65,12,.1)}
.aeo-node .aeo-ex,.hero-deliverables span,.hero-v3 .hero-eyebrow,.hero-sub em,.hero-v3 .lang-chips .more{color:var(--z-acc-text)}
.tier-flag{background:var(--z-acc2);color:#fff}
.tier-flag.tier-flag-sub{color:var(--z-text3)}
#proof p[style],.tier-card p[style]{color:var(--z-text3)!important}
.final .section-label{color:#fdba74!important;background:rgba(253,186,116,.12)}
.footer,.footer p,.footer a,.footer-copy,.footer ruby,.footer rt{color:rgba(255,255,255,.82)!important}
.footer-copy span{color:rgba(255,255,255,.72)!important}

/* ── 見出し：1行目＝何のサービスか、2行目＝何が良いか（グラデーション）── */
.hero-v3 h1{display:flex;flex-direction:column;align-items:center;gap:.18em}
.hero-v3 h1 .h1-what{font-size:.5em;font-weight:800;color:var(--z-text);letter-spacing:.02em;background:none;-webkit-background-clip:border-box;background-clip:border-box}

/* ── アイコンをふわっと動かす（動きを減らす設定の人には動かさない）── */
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes iconPop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1)}}
.aeo-ic,.pain-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:rgba(194,65,12,.1);color:var(--z-acc)}
.aeo-ic svg,.pain-ic svg{width:22px;height:22px;animation:iconFloat 3.2s ease-in-out infinite}
.aeo-node:nth-child(3) .aeo-ic svg{animation-delay:.4s}
.aeo-node:nth-child(5) .aeo-ic svg{animation-delay:.8s}
.pain-row:nth-child(2) .pain-ic svg{animation-delay:.5s}
.pain-row:nth-child(3) .pain-ic svg{animation-delay:1s}
.aeo-node:hover .aeo-ic svg,.pain-row:hover .pain-ic svg{animation:iconPop .5s ease-out}
@media(prefers-reduced-motion:reduce){.aeo-ic svg,.pain-ic svg{animation:none!important}}

/* ── 冒頭の見出しと補足（本人「なんで左寄せで3行？」「メインキャッチに句読点はいらない」）── */
.hero-v3 h1{font-size:clamp(2.1rem,4.6vw,3.7rem)}
.hero-v3 h1 .h1-main{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.4em;background:var(--z-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-v3 h1 .h1-main .nb{background:none}
.hero-v3 h1 .nb:last-child{background:none}
.hero-v3 h1 .h1-main{background:var(--z-grad);-webkit-background-clip:text;background-clip:text}
.hero-v3 .hero-sub{max-width:none;margin:22px auto 0;text-align:center}
.hero-v3 .hero-sub .sub-line{display:block}
@media(max-width:768px){.hero-v3 h1 .h1-main{flex-direction:column;align-items:center}}
/* グラデーションは言葉のまとまりごとに当てる（親の flex に当てると子の文字に効かない） */
.hero-v3 h1 .h1-main{background:none!important;color:inherit}
.hero-v3 h1 .h1-main .nb{background:var(--z-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;padding-bottom:.06em}
/* アレルギー・食事スタイル：実際の画面の動画1本（2枚の画像の代わり） */
.diet-video{display:flex;justify-content:center;margin-top:40px}
.diet-video figure{margin:0;width:340px;max-width:86%}
.diet-video video{display:block;width:100%;height:auto;border-radius:28px;border:8px solid #1d1915;background:#1d1915;box-shadow:0 30px 60px -30px rgba(20,20,30,.5)}
.diet-video figcaption{margin-top:14px;font-weight:800;color:var(--z-text)}
/* AIが分からないところは店主に聞く（HITL） */
.owner{padding:90px 0;background:#fff}
.owner-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:44px auto 0;text-align:left}
.owner-step{background:var(--z-bg);border:1px solid var(--z-line);border-radius:20px;padding:22px 20px}
.owner-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:var(--z-acc);color:#fff;font-weight:800;font-size:.9rem}
.owner-step h3{margin:12px 0 12px;font-size:1.08rem;font-weight:800;color:var(--z-text)}
.owner-shot{background:#fff;border:1px solid var(--z-line);border-radius:14px;padding:10px;display:flex;align-items:center;justify-content:center;min-height:120px}
.owner-shot img{display:block;max-width:100%;height:auto;border-radius:8px}
.owner-shot-row{gap:10px;flex-wrap:wrap}
.owner-shot-row img{max-width:62%}
.owner-shot-row .owner-ans{max-width:26%}
.owner-step p{margin-top:12px;font-size:.92rem;line-height:1.75;color:var(--z-text2)}
.owner-badges{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:30px}
.owner-badges>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.owner-badges small{font-size:.82rem;color:var(--z-text3)}
.badge-ok{font-weight:800;color:#0f7a4b;background:#e6f6ee;border-radius:999px;padding:6px 14px}
.badge-ai{font-weight:700;color:#3a3a44;background:#f1f0ec;border-radius:999px;padding:6px 14px}
@media(max-width:768px){.owner{padding:64px 0}.owner-flow{grid-template-columns:1fr}}
.tier-feat .feat-sub{display:block;margin-top:2px;font-size:.84em;color:var(--z-text3)}
.tier-feat .feat-txt{display:block;min-width:0}