/* ============================================================
   クラフトDXパートナー 共通スタイル
   和の静謐(生成り・明朝・余白) × Wellnethyネイビー
   ============================================================ */
:root{
  --washi:#f7f3ea;
  --paper:#fffdf8;
  --ink:#221d17;
  --ink-soft:#6f6557;
  --navy:#0f2a44;
  --navy-soft:#2c5282;
  --terra:#b0603c;
  --terra-deep:#96482a;
  --line:#e6ddca;
  --gold:#c29b3f;
  --shadow:0 18px 40px -18px rgba(34,25,15,.25);
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--washi); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:2; letter-spacing:.03em;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--terra);color:#fff}

/* ---- 紙の質感(ごく薄いノイズ) ---- */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(120,100,70,.05) 1px, transparent 1.4px);
  background-size:22px 22px;
}
main,header.site,footer.site{position:relative;z-index:1}

/* ============ ヘッダー ============ */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .45s ease, box-shadow .45s ease, border-color .45s;
  border-bottom:1px solid transparent;
}
header.site.scrolled{
  background:rgba(255,253,248,.92); backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:30px; width:auto}
.brand .logo-light{display:none}
header.site:not(.scrolled).on-hero .logo-dark{display:none}
header.site:not(.scrolled).on-hero .logo-light{display:block}
body.nav-open .logo-light{display:none !important}
body.nav-open .logo-dark{display:block !important}
.brand .divider{width:1px; height:22px; background:var(--line)}
.brand .name{
  font-family:var(--serif); font-weight:700; font-size:1.02rem; letter-spacing:.06em;
  color:var(--navy);
}
header.site:not(.scrolled).on-hero .name{color:#fff}
header.site:not(.scrolled).on-hero .divider{background:rgba(255,255,255,.4)}

nav.main{display:flex; gap:26px; align-items:center}
nav.main a{
  text-decoration:none; font-size:.88rem; letter-spacing:.08em; color:var(--ink);
  position:relative; padding:4px 0;
}
nav.main a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--terra); transform:scaleX(0); transform-origin:right;
  transition:transform .35s ease;
}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
header.site:not(.scrolled).on-hero nav.main a{color:#fff}
nav.main a.cta{
  background:var(--navy); color:#fff !important; padding:10px 20px; border-radius:999px;
  transition:background .3s, transform .3s;
}
nav.main a.cta:hover{background:var(--terra); transform:translateY(-1px)}
nav.main a.cta::after{display:none}

/* ハンバーガー */
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:8px; z-index:60}
.menu-btn span{
  display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;
  transition:transform .3s, opacity .3s, background .3s;
}
header.site:not(.scrolled).on-hero .menu-btn span{background:#fff}
body.nav-open .menu-btn span{background:var(--ink) !important}
body.nav-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .menu-btn span:nth-child(2){opacity:0}
body.nav-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .menu-btn{display:block}
  nav.main{
    position:fixed; inset:0; background:rgba(247,243,234,.98);
    flex-direction:column; justify-content:center; gap:30px;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  body.nav-open nav.main{opacity:1; pointer-events:auto}
  nav.main a{font-size:1.05rem; color:var(--ink) !important}
}

/* ============ ヒーロー(トップ) ============ */
.hero{
  position:relative; min-height:92svh; display:grid; place-items:end start; overflow:hidden;
  color:#fff;
}
.hero .bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.02) translateY(0)}
  to{transform:scale(1.12) translateY(-2.5%)}
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,20,26,.72) 0%, rgba(15,20,26,.25) 45%, rgba(15,20,26,.15) 100%);
}
.hero-inner{
  position:relative; z-index:2; max-width:1120px; width:100%;
  margin:0 auto; padding:0 24px 12svh;
}
.hero .eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.34em; margin-bottom:18px;
  border:1px solid rgba(255,255,255,.5); padding:6px 14px; border-radius:999px;
}
.hero h1{
  font-family:var(--serif); font-weight:700; line-height:1.5; letter-spacing:.05em;
  font-size:clamp(1.9rem, 5.2vw, 3.4rem);
}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line>span{display:inline-block; transform:translateY(110%); transition:transform 1s cubic-bezier(.19,1,.22,1)}
.hero.in h1 .line>span{transform:translateY(0)}
.hero p.sub{
  margin-top:20px; font-size:clamp(.95rem,1.6vw,1.1rem); letter-spacing:.06em;
  opacity:0; transform:translateY(14px); transition:opacity 1s .5s, transform 1s .5s;
}
.hero.in p.sub{opacity:.95; transform:none}
.hero .actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(14px); transition:opacity 1s .75s, transform 1s .75s}
.hero.in .actions{opacity:1; transform:none}

.scroll-cue{
  position:absolute; z-index:2; right:30px; bottom:0; width:1px; height:90px; overflow:hidden;
}
.scroll-cue::before{
  content:""; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:#fff; animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{to{top:110%}}

/* ============ ページヒーロー(下層) ============ */
.page-hero{
  position:relative; min-height:52svh; display:grid; place-items:end start;
  color:#fff; overflow:hidden;
}
.page-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform 1.6s ease}
.page-hero.in .bg{transform:scale(1)}
.page-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,20,26,.7), rgba(15,20,26,.18) 60%)}
.page-hero .hero-inner{padding-bottom:7svh}
.page-hero .crumb{font-size:.78rem; letter-spacing:.2em; opacity:.85; margin-bottom:10px}
.page-hero h1{font-family:var(--serif); font-size:clamp(1.7rem,4vw,2.6rem); font-weight:700; letter-spacing:.06em}
.page-hero p.sub{margin-top:12px; opacity:.9}

/* ============ 共通レイアウト ============ */
.section{max-width:1120px; margin:0 auto; padding:90px 24px}
.section.narrow{max-width:820px}
.section-head{margin-bottom:48px}
.section-head .en{
  font-size:.74rem; letter-spacing:.34em; color:var(--terra); text-transform:uppercase;
  display:block; margin-bottom:10px;
}
.section-head h2{
  font-family:var(--serif); font-weight:700; letter-spacing:.06em;
  font-size:clamp(1.5rem,3vw,2.1rem); color:var(--navy);
}
.section-head p.lead{margin-top:16px; color:var(--ink-soft)}
.statement{
  font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,1.6rem); line-height:2.2;
  letter-spacing:.08em; color:var(--navy);
}

/* リビール */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1; transform:none}

/* ============ カード ============ */
.grid{display:grid; gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.19,1,.22,1), box-shadow .45s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:16/10; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.card:hover .thumb img{transform:scale(1.06)}
.card .body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-family:var(--serif); font-size:1.12rem; color:var(--navy); letter-spacing:.04em}
.card p{font-size:.9rem; color:var(--ink-soft); line-height:1.9}
.card .price{margin-top:auto; padding-top:12px; font-size:1rem; color:var(--terra-deep); font-weight:700}
.card .price small{font-weight:400; color:var(--ink-soft); font-size:.78rem}
.card .more{font-size:.82rem; letter-spacing:.14em; color:var(--navy); display:inline-flex; align-items:center; gap:8px}
.card .more::after{content:"→"; transition:transform .3s}
.card:hover .more::after{transform:translateX(5px)}

/* 困りごと */
.pain-list{display:grid; gap:14px}
.pain-list .item{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:18px 22px; display:flex; gap:14px; align-items:baseline; font-size:.95rem;
}
.pain-list .item::before{content:"・"; color:var(--terra); font-weight:700}

/* ============ 帯(写真+文) ============ */
.band{
  position:relative; overflow:hidden; border-radius:18px; color:#fff;
  padding:70px 40px; margin:0 24px;
}
.band-wrap{max-width:1120px; margin:0 auto}
.band .bg{position:absolute; inset:0; background-size:cover; background-position:center; will-change:transform}
.band::after{content:""; position:absolute; inset:0; background:rgba(15,26,38,.62)}
.band .inner{position:relative; z-index:2; max-width:640px}
.band h2{font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.8rem); margin-bottom:18px; letter-spacing:.06em}
.band ul{list-style:none; display:grid; gap:12px}
.band li{padding-left:22px; position:relative; font-size:.95rem; line-height:1.9}
.band li::before{content:""; position:absolute; left:0; top:.75em; width:10px; height:1px; background:var(--gold)}

/* ============ 数字・料金 ============ */
.price-block{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:38px 34px; text-align:center;
}
.price-block .label{font-size:.82rem; letter-spacing:.22em; color:var(--ink-soft)}
.price-block .num{
  font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.2rem); color:var(--navy);
  font-weight:700; letter-spacing:.04em; line-height:1.3;
}
.price-block .num small{font-size:.45em; color:var(--ink-soft); font-weight:400}
.price-block .note{font-size:.8rem; color:var(--ink-soft); margin-top:8px}

/* ステップ */
ol.steps{list-style:none; counter-reset:s; display:grid; gap:0}
ol.steps li{
  counter-increment:s; position:relative; padding:20px 0 20px 58px;
  border-bottom:1px solid var(--line);
}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{
  content:"0" counter(s); position:absolute; left:0; top:22px;
  font-family:var(--serif); font-size:1.1rem; color:var(--terra); letter-spacing:.05em;
}
ol.steps .t{font-weight:700; color:var(--navy); display:block; font-size:1rem}
ol.steps .d{font-size:.88rem; color:var(--ink-soft); line-height:1.9}

/* FAQ */
details{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:0 20px; margin-bottom:12px}
summary{cursor:pointer; padding:16px 0; font-weight:700; font-size:.95rem; color:var(--navy); list-style:none; position:relative; letter-spacing:.04em}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋"; position:absolute; right:2px; color:var(--terra); font-weight:400; transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details .a{font-size:.9rem; color:var(--ink-soft); padding:0 0 18px; line-height:1.95}

/* ============ ボタン ============ */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:var(--navy); color:#fff; border:none; border-radius:999px;
  padding:16px 38px; font-family:var(--sans); font-size:.98rem; font-weight:700; letter-spacing:.1em;
  transition:background .35s, transform .35s, box-shadow .35s;
}
.btn:hover{background:var(--terra); transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(150,72,42,.55)}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.65)}
.btn.ghost:hover{background:rgba(255,255,255,.14); box-shadow:none}

/* ============ CTAフォーム ============ */
.cta-section{
  background:var(--navy); color:#fff; margin-top:40px;
}
.cta-section .section{padding:80px 24px}
.cta-section .section-head .en{color:var(--gold)}
.cta-section .section-head h2{color:#fff}
.cta-section p.pitch{opacity:.85; font-size:.95rem; margin-bottom:34px}
.cta-form{display:grid; gap:14px; max-width:560px}
.cta-form select{
  width:100%; padding:15px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07); color:#fff; font-family:var(--sans); font-size:1rem;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a227' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.cta-form select:invalid{color:rgba(255,255,255,.55)}
.cta-form select option{color:var(--ink); background:#fff}
.cta-form select:focus{outline:none; border-color:var(--gold); background-color:rgba(255,255,255,.12)}
.cta-form input,.cta-form textarea{
  width:100%; padding:15px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07); color:#fff; font-family:var(--sans); font-size:1rem;
  transition:border-color .3s, background .3s;
}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(255,255,255,.55)}
.cta-form input:focus,.cta-form textarea:focus{outline:none; border-color:var(--gold); background:rgba(255,255,255,.12)}
.cta-form button{
  background:var(--terra); color:#fff; border:none; border-radius:10px;
  padding:17px; font-size:1.02rem; font-weight:700; letter-spacing:.1em; cursor:pointer;
  transition:background .3s, transform .3s;
}
.cta-form button:hover{background:var(--terra-deep); transform:translateY(-1px)}
.cta-form button:disabled{opacity:.55; transform:none}
.cta-form .status{font-size:.84rem; opacity:.8; min-height:1.6em}

/* ============ フッター ============ */
footer.site{
  background:#0b1f33; color:rgba(255,255,255,.8); font-size:.85rem;
}
footer.site .inner{
  max-width:1120px; margin:0 auto; padding:44px 24px;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center;
}
footer.site a{color:rgba(255,255,255,.8); text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .links{display:flex; gap:22px; flex-wrap:wrap}
footer.site .logo{display:flex; align-items:center; gap:10px}
footer.site .logo img{height:24px; opacity:.95}

/* ============ 数字の帯(実績カウンター) ============ */
.stats{align-items:stretch}
.stat{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:28px 24px; text-align:center;
}
.stat{text-align:left}
.stat h3{
  font-family:var(--serif); font-size:1.18rem; font-weight:700;
  color:var(--navy); line-height:1.7; letter-spacing:.04em;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.stat p{font-size:.88rem; color:var(--ink-soft); line-height:1.9}

/* ============ 無料ツールバナー ============ */
.free-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--terra);
  border-radius:14px; padding:26px 28px; text-decoration:none;
  transition:transform .45s cubic-bezier(.19,1,.22,1), box-shadow .45s;
}
.free-banner:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.free-banner .en{font-size:.72rem; letter-spacing:.3em; color:var(--terra)}
.free-banner h3{font-family:var(--serif); font-size:1.15rem; color:var(--navy); margin:4px 0 6px}
.free-banner p{font-size:.88rem; color:var(--ink-soft); margin:0}
.free-banner .more{font-size:.88rem; font-weight:700; color:var(--navy); white-space:nowrap}
.free-banner .more::after{content:" →"; transition:margin .3s}
.free-banner:hover .more::after{margin-left:4px}

/* ============ 代表紹介(トップ) ============ */
.owner{display:flex; gap:26px; align-items:flex-start}
.owner img{width:130px; border-radius:14px; box-shadow:var(--shadow); flex-shrink:0}
.owner p{margin-bottom:10px}
.owner .name-line{font-family:var(--serif); font-size:1.05rem; color:var(--navy)}
.owner a{color:var(--navy); font-size:.9rem; font-weight:700; text-decoration:none}
.owner a:hover{color:var(--terra)}
@media(max-width:640px){.owner{flex-direction:column}}

/* ============ 下書きバナー ============ */
.draftbar{
  background:#5c4632; color:#f5ede2; font-size:.82rem;
  padding:9px 16px; text-align:center; letter-spacing:.05em; position:relative; z-index:60;
}
.todo{
  background:#fdf6d8; border:2px dashed #c9a227; border-radius:10px;
  padding:14px 16px; margin:16px 0; font-size:.88rem; color:#5c4a10;
}

/* ============ その他 ============ */
.legal-table{width:100%; border-collapse:collapse; font-size:.9rem; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.legal-table th,.legal-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.legal-table tr:last-child th,.legal-table tr:last-child td{border-bottom:none}
.legal-table th{white-space:nowrap; color:var(--ink-soft); font-weight:600; width:11em; background:rgba(230,221,202,.25)}
@media(max-width:640px){.legal-table th{width:8em}}

.about-photos{display:grid; grid-template-columns:1fr 1.6fr; gap:20px; align-items:start}
@media(max-width:720px){.about-photos{grid-template-columns:1fr}}
.about-photos img{border-radius:14px; box-shadow:var(--shadow)}
.caption{font-size:.78rem; color:var(--ink-soft); margin-top:8px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .hero h1 .line>span{transform:none}
  .hero p.sub,.hero .actions{opacity:1; transform:none}
}