/* 専属システムコンサル LP（/consult）。白・ネイビー・チャコール・薄いグレー。金は CTA だけ、赤は価格の強調だけ */
:root{
  --navy:#14213d;
  --navy-2:#1d2f52;
  --charcoal:#2f3640;
  --text:#1f2937;
  --muted:#5b6472;
  --line:#e3e7ee;
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --gold-1:#f5cf5a;
  --gold-2:#e2a92a;
  --gold-text:#2a1f05;
  --red:#d62828;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans",Meiryo,system-ui,sans-serif;
  --wrap:1240px;
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
ul,ol{list-style:none;}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px;border-radius:4px;}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.wrap.narrow{max-width:860px;}
.sp{display:none;}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;padding:8px 16px;background:var(--navy);color:#fff;border-radius:6px;}
.skip:focus{left:8px;}

/* ボタン。CTA は金。hover は明度を少し上げるだけ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  border-radius:8px;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  transition:filter .15s ease, box-shadow .15s ease;
}
.btn-cta{
  color:var(--gold-text);
  background:linear-gradient(180deg, var(--gold-1), var(--gold-2));
  box-shadow:0 2px 8px rgba(160,110,10,.25);
}
.btn-cta:hover{filter:brightness(1.07);box-shadow:0 4px 14px rgba(160,110,10,.32);}
.btn-sm{min-height:44px;padding:0 20px;font-size:14px;}
.btn-lg{min-height:58px;width:100%;max-width:420px;padding:0 28px;font-size:17px;}

/* ヘッダー */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(6px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:24px;}
.logo{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--navy);}
.logo-main{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:.02em;}
.logo-sub{font-size:13px;font-weight:500;color:var(--charcoal);letter-spacing:.06em;}
.site-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500;}
.site-nav a:not(.btn){text-decoration:none;color:var(--charcoal);padding:8px 0;}
.site-nav a:not(.btn):hover{color:var(--navy);text-decoration:underline;text-underline-offset:6px;}
.menu-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:48px;
  height:48px;
  padding:0 12px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.menu-btn .bar{height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.menu-open .menu-btn .bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-open .menu-btn .bar:nth-child(2){opacity:0;}
.menu-open .menu-btn .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ファーストビュー：右に写真、左に文字と価格 */
.hero{position:relative;overflow:hidden;background:var(--bg-soft);}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:62%;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% center;}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--bg-soft) 0%, rgba(245,247,250,.75) 18%, rgba(245,247,250,0) 45%);
}
.hero-inner{position:relative;padding-top:56px;padding-bottom:64px;}
.hero-copy{max-width:620px;}
.hero-title{font-family:var(--serif);color:var(--navy);font-weight:700;letter-spacing:.02em;}
.ht-main{display:block;font-size:clamp(34px, 4.2vw, 54px);line-height:1.3;}
.ht-sub{display:block;margin-top:14px;font-size:clamp(26px, 3vw, 38px);line-height:1.4;}
.hero-lead{margin-top:20px;font-size:16px;color:var(--charcoal);}

/* 価格カード（ファーストビューと料金で共通） */
.price-card{
  margin-top:28px;
  padding:24px 24px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(20,33,61,.10);
}
.price-row{display:flex;align-items:center;gap:18px;}
.pn-label,.pc-label{font-size:13px;font-weight:700;letter-spacing:.04em;}
.pn-label{color:var(--muted);}
.pn-value{font-size:16px;color:var(--charcoal);white-space:nowrap;}
.pn-value s{text-decoration-thickness:1.5px;}
.price-arrow{flex:none;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:12px solid #9aa3b2;}
.price-campaign{flex:1;min-width:0;}
.pc-label{color:var(--red);}
.pc-month,.pc-year{color:var(--red);font-weight:700;line-height:1.5;white-space:nowrap;}
.pc-month strong,.pc-year strong{font-size:26px;letter-spacing:.01em;}
.pc-month span{font-size:14px;}
.off-badge{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:78px;
  height:78px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.04em;
}
.off-badge span{font-size:12px;}
.off-badge b{font-size:24px;}
.price-card .btn{margin-top:20px;max-width:none;}

/* セクション共通 */
.section{padding:88px 0;}
.sec-title{
  font-family:var(--serif);
  font-size:clamp(26px, 2.6vw, 34px);
  font-weight:700;
  line-height:1.5;
  color:var(--navy);
  text-align:center;
  letter-spacing:.04em;
}
.sec-title.left{text-align:left;}
.sec-lead{max-width:760px;margin:16px auto 0;text-align:center;color:var(--charcoal);}
.on-dark{color:#fff;}
.sec-lead.on-dark{color:rgba(255,255,255,.86);}
.icon{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.grid4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px;margin-top:44px;}

/* 悩み */
.worries{background:#fff;}
.worry-list{gap:0;}
.worry{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 20px;text-align:center;color:var(--navy);}
.worry + .worry{border-left:1px solid var(--line);}
.worry p{color:var(--text);font-size:16px;line-height:1.75;}

/* 流れ（濃いネイビー） */
.flow{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);}
.flow-list{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:16px;margin-top:48px;counter-reset:step;}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;}
.step + .step::before{
  content:"→";
  position:absolute;
  left:-14px;
  top:34px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.6);
  font-size:18px;
}
.step-icon{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;}
.step-icon .icon{width:38px;height:38px;}
.step-name{margin-top:14px;font-size:18px;font-weight:700;letter-spacing:.08em;}
.step-text{font-size:14px;color:rgba(255,255,255,.82);line-height:1.6;}

/* 相談できる内容 */
.topics{background:var(--bg-soft);}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px rgba(20,33,61,.05);transition:box-shadow .15s ease, transform .15s ease;}
.card:hover{box-shadow:0 10px 26px rgba(20,33,61,.10);transform:translateY(-2px);}
.topic{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 22px 26px;text-align:center;color:var(--navy);}
.topic h3{font-size:18px;font-weight:700;letter-spacing:.04em;}
.topic p{color:var(--muted);font-size:15px;line-height:1.7;}

/* 実装できるところまで */
.build{display:grid;grid-template-columns:45% 55%;background:#fff;}
.build-photo{min-height:100%;}
.build-photo picture,.build-photo img{width:100%;height:100%;}
.build-photo img{object-fit:cover;}
.build-body{padding:80px clamp(32px, 6vw, 96px);align-self:center;max-width:720px;}
.build-body > p{margin-top:16px;color:var(--charcoal);}
.build-body .sec-title + p{margin-top:24px;}
.checks{margin-top:28px;display:grid;gap:12px;}
.checks li{position:relative;padding-left:36px;font-weight:500;}
.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:22px;
  height:22px;
  border-radius:4px;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* セキュリティ */
.security{background:var(--bg-soft);}
.sec-list{max-width:960px;margin-left:auto;margin-right:auto;}
.sec-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--navy);}
.sec-item h3{font-size:16px;font-weight:700;letter-spacing:.06em;}
.sec-note{max-width:760px;margin:28px auto 0;font-size:13px;line-height:1.8;color:var(--muted);text-align:center;}

/* 料金 */
.price{background:#fff;}
.price-card-wide{max-width:760px;margin:40px auto 0;padding:32px;}
.price-card-wide .price-row{justify-content:center;gap:28px;}
.price-card-wide .btn{display:flex;max-width:420px;margin:28px auto 0;}

/* よくある質問 */
.faq{background:var(--bg-soft);}
.faq-list{margin-top:36px;display:grid;gap:12px;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;}
.faq summary{
  position:relative;
  padding:18px 52px 18px 22px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--muted);}
.faq details[open] summary::after{content:"−";}
.faq details p{padding:0 22px 20px;color:var(--charcoal);}

/* 最終 CTA */
.final{position:relative;overflow:hidden;color:#fff;text-align:center;background:var(--navy);}
.final-photo{position:absolute;inset:0;}
.final-photo img{width:100%;height:100%;object-fit:cover;}
.final-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,24,46,.72), rgba(14,24,46,.84));}
.final-inner{position:relative;padding-top:104px;padding-bottom:104px;display:flex;flex-direction:column;align-items:center;}
.final-title{font-family:var(--serif);font-size:clamp(26px, 3vw, 38px);line-height:1.55;letter-spacing:.04em;}
.final-lead{margin-top:18px;color:rgba(255,255,255,.88);}
.final-copy{margin-top:28px;font-family:var(--serif);font-size:clamp(18px, 1.8vw, 22px);font-weight:600;line-height:1.8;color:var(--gold-1);}
.final .btn{margin-top:32px;}

/* フッター */
.site-footer{background:#0e182e;color:rgba(255,255,255,.75);font-size:13px;}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:28px;padding-bottom:28px;}
.footer-logo{font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;}
.footer-links a{text-decoration:none;padding:4px 0;}
.footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}

/* 出方：少しだけ上へ動きながらフェードイン（JS が .is-in を付ける。JS なし・動きを減らす設定では最初から見える） */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;}
.js .reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .card,.btn,.menu-btn .bar{transition:none;}
}

/* タブレット */
@media (max-width: 1080px){
  .site-nav{gap:20px;}
  .logo-sub{display:none;}
  .hero-photo{width:55%;}
  .hero-copy{max-width:560px;}
}

/* スマホ・縦のタブレット：1 カラム。メニューはハンバーガー */
@media (max-width: 767px){
  :root{--header-h:64px;}
  .wrap{padding:0 20px;}
  .pc{display:none;}
  .sp{display:inline;}
  .logo-main{font-size:24px;}
  .logo-sub{display:inline;font-size:11px;}
  .menu-btn{display:flex;}
  .site-nav{
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 20px 20px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(20,33,61,.10);
    font-size:16px;
  }
  .menu-open .site-nav{display:flex;}
  .site-nav a:not(.btn){padding:14px 4px;border-bottom:1px solid var(--line);}
  .site-nav .btn{margin-top:16px;min-height:52px;font-size:16px;}

  .hero-photo{width:100%;}
  .hero-photo img{object-position:72% center;}
  .hero-photo::after{background:linear-gradient(180deg, rgba(245,247,250,.97) 0%, rgba(245,247,250,.92) 38%, rgba(245,247,250,.35) 62%, rgba(245,247,250,.1) 100%);}
  .hero-inner{padding-top:32px;padding-bottom:28px;}
  .ht-main{font-size:clamp(28px, 8.4vw, 36px);}
  .ht-sub{margin-top:10px;font-size:clamp(22px, 6.4vw, 28px);}
  .hero-lead{margin-top:14px;font-size:15px;line-height:1.8;}
  /* 価格は縦に積む：通常価格 → キャンペーン。OFF の丸はカードの右上 */
  .price-card{position:relative;margin-top:96px;padding:18px 18px 16px;}
  .price-row{display:block;}
  .price-normal{display:flex;align-items:baseline;gap:10px;padding-right:76px;}
  .pn-value{font-size:14px;}
  .price-arrow{display:block;margin:8px 0 6px 4px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #9aa3b2;border-bottom:0;}
  .pc-month strong,.pc-year strong{font-size:24px;}
  .pc-month span{font-size:13px;}
  .off-badge{position:absolute;top:14px;right:14px;width:64px;height:64px;font-size:11px;}
  .off-badge b{font-size:20px;}
  .off-badge span{font-size:10px;}
  .btn-lg{min-height:56px;font-size:17px;max-width:none;}

  .section{padding:60px 0;}
  .sec-title{font-size:clamp(23px, 6.6vw, 28px);}
  .sec-lead{font-size:15px;text-align:left;}
  .grid4{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin-top:28px;}
  .worry-list{gap:12px;}
  .worry{padding:18px 8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(20,33,61,.05);}
  .worry + .worry{border-left:1px solid var(--line);}
  .worry p{font-size:14px;}
  .icon{width:38px;height:38px;}

  /* 流れは 5 つを縦に並べる（横に詰めない） */
  .flow-list{grid-template-columns:minmax(0, 1fr);gap:0;margin-top:32px;max-width:400px;margin-left:auto;margin-right:auto;}
  .step{flex-direction:row;align-items:center;gap:16px;text-align:left;padding:12px 0;}
  .step + .step::before{content:"↓";left:34px;top:-14px;transform:translateX(-50%);font-size:15px;}
  .step-icon{flex:none;width:64px;height:64px;}
  .step-icon .icon{width:30px;height:30px;}
  .step-name{margin-top:0;font-size:17px;min-width:5.5em;}
  .step-text{font-size:14px;}

  .topic{padding:22px 12px 20px;}
  .topic h3{font-size:15px;}
  .topic p{font-size:13px;}

  .build{grid-template-columns:minmax(0, 1fr);}
  .build-photo{aspect-ratio:16 / 10;}
  .build-body{padding:44px 20px 56px;}
  .build-body > p{font-size:15px;}

  .sec-item{padding:20px 8px;}
  .sec-item h3{font-size:15px;}
  .sec-note{text-align:left;}

  .price-card-wide{padding:20px 16px;margin-top:28px;}
  .price-card-wide .btn{max-width:none;margin-top:20px;}

  .faq summary{padding:16px 46px 16px 16px;font-size:15px;}
  .faq summary::after{right:16px;}
  .faq details p{padding:0 16px 18px;font-size:15px;}

  .final-inner{padding-top:72px;padding-bottom:72px;}
  .final-lead{font-size:15px;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
}

/* 360px 前後 */
@media (max-width: 389px){
  .pc-month strong,.pc-year strong{font-size:22px;}
  .pc-label{font-size:12px;}
}