/*
 * KATACHI LP ブラッシュアップ案の共通土台。
 * 色、文字、ボタン、FAQ、フッターは現行 LP と同じ決まりに合わせる。
 * 各案は、この上にそれぞれの見せ方（動き）を足す。
 */
:root{
  --bg:#F6F5F1; --ink:#3F434A; --ink-2:#6B7078; --ink-3:#9A9EA5; --white:#FFFFFF; --grey:#F9F9F9; --line:#E6E3DC;
  --pink:#F3E2D9; --pink-2:#ECDDD6; --sage:#D9E2CF; --butter:#F5E8C4; --rose:#F7D9D3;
  --accent:#EE7543; --accent-deep:#D9622F; --accent-soft:#FBE9E0;
  --navy:#1F3A5F; --mustard:#E9A93B; --leaf:#2F6B57;
  --font:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --mincho:"Zen Old Mincho","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --latin:"Jost","Helvetica Neue",Arial,sans-serif;
  --r-sm:10px; --r-card:18px; --r-img:22px; --r-pill:999px;
  --shadow:0 18px 50px rgba(63,67,74,.10);
  --shadow-sm:0 6px 18px rgba(63,67,74,.07);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:.04em;line-height:1.45;text-wrap:balance;word-break:auto-phrase;line-break:strict}
p,li,figcaption,summary{line-break:strict}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-family:var(--latin);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:500}
.fine{font-size:13px;line-height:1.8;color:var(--ink-2)}

/* ボタン（現行 LP と同じピル型。右に丸い矢印） */
.btn{--h:54px;display:inline-flex;align-items:center;gap:12px;height:var(--h);padding:0 10px 0 26px;border-radius:var(--r-pill);font-weight:700;font-size:15px;text-decoration:none;letter-spacing:.06em;transition:transform .5s var(--ease),background .3s,box-shadow .5s var(--ease);will-change:transform}
.btn .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);transition:transform .5s var(--ease)}
.btn .ic svg{width:14px;height:14px}
.btn:hover .ic{transform:translateX(3px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 28px rgba(238,117,67,.32)}
.btn-accent:hover{background:var(--accent-deep)}
.btn-plain{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:0 26px}
.btn-plain:hover{background:var(--ink);color:#fff}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 上部の案内バー（案の比較用。本番には入れない） */
.proposal-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;gap:6px;align-items:center;padding:6px;border-radius:999px;background:rgba(31,34,40,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.25);font-size:12px}
.proposal-bar a{color:#fff;text-decoration:none;padding:7px 12px;border-radius:999px;opacity:.72;white-space:nowrap}
.proposal-bar a.on{background:#fff;color:var(--ink);opacity:1;font-weight:700}
.proposal-bar a:hover{opacity:1}
@media (max-width:600px){.proposal-bar{bottom:10px;font-size:11px}.proposal-bar a{padding:6px 9px}}

/* ヘッダー */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s,transform .5s var(--ease)}
.nav.scrolled{background:rgba(246,245,241,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(63,67,74,.06)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--latin);letter-spacing:.32em;font-size:15px;text-decoration:none;font-weight:500}
.brand svg{width:26px;height:26px}
.nav nav{display:flex;gap:28px;font-size:13px}
.nav nav a{text-decoration:none;opacity:.8}
.nav nav a:hover{opacity:1}
.nav .btn{--h:44px;font-size:14px;padding-left:20px}
.nav .btn .ic{width:28px;height:28px}
@media (max-width:900px){.nav nav{display:none}}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);position:relative;flex:none;transition:transform .5s var(--ease),background .3s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.faq details[open] .pm{background:var(--ink);color:#fff}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{padding:0 44px 20px 0;color:var(--ink-2);font-size:15px}

/* フッター */
.foot{padding:56px 0 110px;font-size:13px;color:var(--ink-2)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* 共通のスクリーンリーダー用 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 動きを減らす設定: すべての装飾的な動きを止める（各案の JS も reduce を見て止める） */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}