/* ============================================================
   Migiude Design System — サービスLP共通（戦略／組織／AI推進の右腕）
   白系権威 × 明朝 × 余白。差別化は --accent 一箇所のみ。
   各LPは <link migiude.css> ＋ :root{--accent:...} を置くだけ。
   ============================================================ */
:root{
  --base:      #FAFAF8;   /* オフホワイト地 */
  --base2:     #F3F4F7;   /* 交互セクション */
  --surface:   #FFFFFF;
  --ink:       #1B2436;   /* 本文 */
  --heading:   #0E1A2E;   /* 大見出し・濃紺墨 */
  --muted:     #5A6B85;   /* 補助 */
  --navy:      #1E3A5F;   /* Migiude ブランド主色（帯・CTA） */
  --accent:    #1E3A5F;   /* サービス別アクセント（各LPで上書き） */
  --accent-soft:#7CA6F5;  /* アクセントの薄い相方（各LPで上書き可） */
  --line:      rgba(14,26,46,0.10);
  --line-2:    rgba(14,26,46,0.06);
  --font-serif:'Noto Serif JP','Georgia',serif;
  --font-sans: 'Noto Sans JP','Helvetica Neue',sans-serif;
  --font-en:   'Cormorant Garamond','Georgia',serif;
  --ease:      cubic-bezier(0.22,1,0.36,1);
  --wrap:      1080px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--base); color:var(--ink); font-family:var(--font-sans); line-height:1.9; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ── Scroll reveal ── */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* ── Header ── */
.hd{position:fixed; inset:0 0 auto 0; z-index:100; height:66px; display:flex; align-items:center; justify-content:space-between;
    padding:0 40px; transition:background .4s, box-shadow .4s, border-color .4s; border-bottom:1px solid transparent;}
.hd.scr{background:rgba(250,250,248,0.9); backdrop-filter:blur(10px); border-bottom-color:var(--line);}
.hd-logo{display:flex; align-items:baseline; gap:9px; font-family:var(--font-serif); color:var(--heading);}
.hd-logo b{font-size:18px; font-weight:700; letter-spacing:.04em;}
.hd-logo span{font-size:12px; letter-spacing:.05em; color:var(--muted);}
.hd-back{font-size:12px; letter-spacing:.08em; color:var(--muted); display:flex; align-items:center; gap:6px; transition:color .2s;}
.hd-back::before{content:'←';}
.hd-back:hover{color:var(--accent);}

/* ── Shared section frame ── */
.sec{padding:130px 40px; position:relative;}
.sec.alt{background:var(--base2);}
.inner{max-width:var(--wrap); margin:0 auto;}
.eyebrow{font-family:var(--font-en); font-size:15px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
         display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.eyebrow::before{content:''; width:34px; height:1px; background:var(--accent); opacity:.5;}
.sec-ttl{font-family:var(--font-serif); font-weight:700; color:var(--heading); font-size:clamp(28px,4vw,44px); line-height:1.42; letter-spacing:.01em; margin-bottom:22px;}
.sec-ttl em{font-style:normal; color:var(--accent);}
.sec-lead{font-size:16px; color:var(--muted); line-height:2; max-width:640px; margin-bottom:64px;}
.chapno{position:absolute; top:70px; right:40px; font-family:var(--font-en); font-weight:300; font-size:clamp(70px,10vw,132px);
        line-height:1; color:var(--line-2); letter-spacing:-.03em; user-select:none; pointer-events:none;}

/* ── HERO ── */
.hero{min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:120px 40px 90px; background:linear-gradient(180deg,#fff 0%, var(--base) 100%);}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.hero-inner{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; width:100%;}
.hero-eyebrow{font-family:var(--font-en); font-size:15px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.hero-eyebrow::before{content:''; width:40px; height:1px; background:var(--accent);}
.hero-eyebrow .sub{color:var(--muted); letter-spacing:.16em;}
.hero-ttl{font-family:var(--font-serif); font-weight:700; color:var(--heading); font-size:clamp(40px,6.6vw,82px); line-height:1.22; letter-spacing:.01em; margin-bottom:34px;}
.hero-ttl em{font-style:normal; color:var(--accent);}
.hero-sub{font-size:17px; color:var(--ink); line-height:2.05; max-width:600px; margin-bottom:44px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.kln{display:block; overflow:hidden;}
.kln>span{display:inline-block; transform:translateY(112%); transition:transform 1s var(--ease);}
body.loaded .hero-ttl .kln:nth-child(1)>span{transition-delay:.15s;}
body.loaded .hero-ttl .kln:nth-child(2)>span{transition-delay:.30s;}
body.loaded .hero-ttl .kln>span{transform:none;}
.hero-eyebrow,.hero-sub,.hero-cta{opacity:0; transform:translateY(14px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
body.loaded .hero-eyebrow{opacity:1; transform:none; transition-delay:.1s;}
body.loaded .hero-sub{opacity:1; transform:none; transition-delay:.55s;}
body.loaded .hero-cta{opacity:1; transform:none; transition-delay:.75s;}
.hero-scroll{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-en); font-size:12px; letter-spacing:.22em; color:var(--muted);}
.hero-scroll .ln{width:1px; height:52px; background:linear-gradient(var(--accent),transparent); animation:sc 2.2s var(--ease) infinite;}
@keyframes sc{0%{transform:scaleY(0); transform-origin:top;}45%{transform:scaleY(1); transform-origin:top;}55%{transform:scaleY(1); transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 40px; font-size:14px; font-weight:700; letter-spacing:.08em; border-radius:2px; cursor:pointer; transition:all .3s var(--ease); border:1.5px solid transparent;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(30,58,95,.28);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line); font-weight:500;}
.btn-ghost:hover{border-color:var(--navy); transform:translateY(-2px);}
.btn-light{background:#fff; color:var(--navy);}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18);}

/* ── Migiude concept band ── */
.concept{background:var(--navy); color:#fff; padding:64px 40px;}
.concept-inner{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center;}
.concept-mark{font-family:var(--font-en); font-size:15px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.55); writing-mode:vertical-rl;}
.concept-body p{font-size:16px; line-height:2.1; color:rgba(255,255,255,.86);}
.concept-body b{color:#fff; font-weight:600;}
.concept-body .fwd{color:#9DBBEA; font-weight:600;}

/* ── Problem ── */
.prob{display:grid; grid-template-columns:1fr 1fr; gap:0 56px;}
.prob-item{border-top:1px solid var(--line); padding:30px 0; display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;}
.prob-num{font-family:var(--font-en); font-size:40px; font-weight:300; line-height:1; color:var(--accent); opacity:.55;}
.prob-item h3{font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--heading); line-height:1.6; margin-bottom:8px;}
.prob-item p{font-size:14px; color:var(--muted); line-height:1.95;}

/* ── Solution overview (accent bg) ── */
.solv{background:linear-gradient(135deg,#EEF1F7 0%, #F3F4F7 60%, #FBFAFF 100%);}
.solv .sec-ttl{max-width:820px;}

/* ── System pillars ── */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:34px 32px; position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;}
.pillar::before{content:''; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--accent),var(--accent-soft)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);}
.pillar:hover{transform:translateY(-5px); box-shadow:0 18px 42px rgba(30,58,95,.12); border-color:transparent;}
.pillar:hover::before{transform:scaleX(1);}
.pillar.wide{grid-column:1 / -1;}
.pillar-head{display:flex; align-items:baseline; gap:16px; margin-bottom:14px;}
.pillar-num{font-family:var(--font-en); font-size:34px; font-weight:400; color:var(--accent); line-height:1;}
.pillar h3{font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--heading); line-height:1.5;}
.pillar p{font-size:14px; color:var(--muted); line-height:2;}
.pillar .tag{display:inline-block; margin-top:16px; font-family:var(--font-en); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:100px; padding:4px 14px;}

/* ── Before / After ── */
.ba{display:grid; grid-template-columns:1fr 56px 1fr; gap:0; align-items:stretch; margin-bottom:56px;}
.ba-card{border:1px solid var(--line); border-radius:6px; padding:34px 32px; background:var(--surface);}
.ba-card.before{background:var(--base2);}
.ba-card.after{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; background:linear-gradient(135deg,#F4F7FC,#FDFDFF);}
.ba-label{font-family:var(--font-en); font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:14px;}
.ba-card.after .ba-label{color:var(--accent);}
.ba-card p{font-size:15px; line-height:2.05; color:var(--ink);}
.ba-card b{font-weight:700; color:var(--heading);}
.ba-card.after b{color:var(--accent);}
.ba-arrow{display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--accent);}

/* ── Model / flow ── */
.flow{background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:grid; grid-template-columns:repeat(4,1fr);}
.step{padding:38px 26px; text-align:center; position:relative; border-right:1px solid var(--line);}
.step:last-child{border-right:none;}
.step:not(:last-child)::after{content:'→'; position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:var(--line); font-size:20px; z-index:2; background:var(--surface); padding:2px;}
.step-ico{height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--accent);}
.step-num{font-family:var(--font-en); font-size:30px; font-weight:400; color:var(--accent); line-height:1; margin-bottom:8px;}
.step h3{font-size:16px; font-weight:700; color:var(--heading); margin-bottom:8px;}
.step p{font-size:13px; color:var(--muted); line-height:1.85;}

/* ── Note cases ── */
.note-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.note-card{background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s;}
.note-card:hover{transform:translateY(-4px); box-shadow:0 16px 38px rgba(14,26,46,.10);}
.note-thumb{aspect-ratio:16/9; background:linear-gradient(135deg,#E8EEF9,#F3F4F7); overflow:hidden;}
.note-thumb img{width:100%; height:100%; object-fit:cover;}
.note-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1;}
.note-title{font-family:var(--font-serif); font-size:15.5px; font-weight:600; color:var(--heading); line-height:1.6;}
.note-exc{font-size:13px; color:var(--muted); line-height:1.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.note-link{font-size:12px; letter-spacing:.1em; color:var(--accent); font-weight:700; margin-top:auto;}
.note-coming{grid-column:1/-1; border:1px dashed var(--line); border-radius:6px; padding:56px 24px; text-align:center; color:var(--muted); font-size:14px; line-height:2;}
.note-more{text-align:center; margin-top:36px;}

/* ── CTA ── */
.cta{background:var(--navy); color:#fff; text-align:center; padding:120px 40px; position:relative; overflow:hidden;}
.cta::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%);}
.cta-inner{position:relative; z-index:2; max-width:720px; margin:0 auto;}
.cta h2{font-family:var(--font-serif); font-size:clamp(28px,4vw,46px); font-weight:700; line-height:1.5; margin-bottom:22px;}
.cta p{font-size:15px; color:rgba(255,255,255,.72); line-height:2; margin-bottom:44px;}
.cta-btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ── Series nav ── */
.series{padding:110px 40px; background:var(--base2);}
.series-grid{max-width:var(--wrap); margin:34px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.series-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:32px 30px; transition:transform .35s var(--ease), box-shadow .35s;}
.series-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(14,26,46,.10);}
.series-card .no{font-family:var(--font-en); font-size:14px; letter-spacing:.2em; color:var(--muted);}
.series-card h3{font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--heading); margin:10px 0 8px;}
.series-card p{font-size:13px; color:var(--muted); line-height:1.9;}
.series-card .go{margin-top:16px; font-size:12px; letter-spacing:.1em; display:inline-flex; align-items:center; gap:6px;}
.series-card.sk .no,.series-card.sk h3,.series-card.sk .go{color:#1E3A5F;}
.series-card.hr .no,.series-card.hr h3,.series-card.hr .go{color:#1F5F5B;}
.series-card.ai .no,.series-card.ai h3,.series-card.ai .go{color:#2563EB;}
.series-card.now{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
.series-card.now .no,.series-card.now h3,.series-card.now .go{color:var(--accent);}
.series-card .badge{font-family:var(--font-en); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); float:right;}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 0; cursor:pointer; font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--heading);}
.faq-q::after{content:'+'; font-size:24px; font-weight:300; color:var(--accent); flex-shrink:0; transition:transform .3s;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .3s; font-size:14px; color:var(--muted); line-height:2;}
.faq-item.open .faq-a{max-height:340px; padding-bottom:26px;}

/* ── Footer ── */
.ft{background:#0A1220; color:rgba(255,255,255,.4); text-align:center; padding:44px 40px; font-size:12px; letter-spacing:.08em;}
.ft a{color:rgba(255,255,255,.62);}

/* ── Responsive ── */
@media (max-width:820px){
  .sec{padding:90px 24px;} .hd{padding:0 20px;} .concept{padding:48px 24px;}
  .concept-inner{grid-template-columns:1fr; gap:22px;} .concept-mark{writing-mode:horizontal-tb; letter-spacing:.24em;}
  .prob{grid-template-columns:1fr; gap:0;} .pillars{grid-template-columns:1fr;} .pillar.wide{grid-column:auto;}
  .flow{grid-template-columns:1fr 1fr;} .step:nth-child(2n)::after{display:none;} .step{border-bottom:1px solid var(--line);}
  .ba{grid-template-columns:1fr; gap:0;} .ba-arrow{transform:rotate(90deg); padding:10px 0;}
  .note-grid{grid-template-columns:1fr;} .series-grid{grid-template-columns:1fr;} .chapno{top:40px; right:24px;}
  .hero{padding:110px 24px 80px;}
}
@media (max-width:480px){
  .sec{padding:70px 16px;} .hero{padding:100px 16px 70px;} .hero-cta{flex-direction:column;} .btn{width:100%; justify-content:center;}
  .flow{grid-template-columns:1fr;} .step::after{display:none!important;}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.kln>span,.hero-eyebrow,.hero-sub,.hero-cta{transition:none!important; transform:none!important; opacity:1!important;}
  .hero-scroll .ln{animation:none;}
}