:root{
  --bg:#FFFFFF;
  --ink:#1C1C1C;
  --sub:#3A3A3A;
  --mute:#8E8E8A;
  --accent:#1F3A5F;
  --font:"IBM Plex Sans JP",'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --pad:clamp(24px,6vw,68px);
  --gap:clamp(96px,14vw,210px);
  --col:clamp(96px,11vw,150px);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:300;
  font-size:15px;line-height:2.15;letter-spacing:.03em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  /* 日本語の折り返し。
     狭い画面で文節単位にすると、長い文節が丸ごと次行に送られて
     右側が大きく空いてしまうため、広い画面でだけ文節送りにする。 */
  word-break:normal;
  line-break:strict;
  overflow-wrap:anywhere;
}
@media(min-width:768px){
  body{word-break:auto-phrase;}
}
/* 見出しの手動改行は、狭い画面では無効にして自然に折り返させる */
br.pc{display:inline;}
br.sp{display:none;}
@media(max-width:767px){br.pc{display:none;}br.sp{display:inline;}}
@media(min-width:768px){body{font-size:15.5px;}}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color .3s ease;}
a:hover{color:var(--accent);}
h1,h2,h3{font-weight:300;letter-spacing:.11em;line-height:1.85;margin:0;text-wrap:balance;}
p{margin:0 0 1.9em;}
p:last-child{margin-bottom:0;}

.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--pad);}
.measure{max-width:100%;}
.measure p{line-break:strict;}
section{padding-block:var(--gap);}

/* 小さな英字ラベル（罫線なし） */
.label{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mute);font-weight:400;margin:0 0 clamp(44px,6vw,80px);
}

/* header */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(8px);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{font-size:17px;font-weight:400;letter-spacing:.38em;}
.brand small{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--mute);margin-top:3px;font-weight:400;}
.gnav{display:none;gap:clamp(22px,3vw,40px);font-size:12px;letter-spacing:.12em;align-items:center;}
@media(min-width:900px){.gnav{display:flex;}}
.gnav .cta{border:1px solid #DEDEDA;padding:10px 24px;transition:border-color .35s,color .35s;}
.gnav .cta:hover{border-color:var(--accent);}

/* hero */
.hero{
  min-height:calc(100svh - 76px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(80px,12vh,150px);
}
.hero h1{font-size:clamp(28px,5.6vw,54px);font-weight:200;letter-spacing:.13em;line-height:1.9;}
.hero .lede{margin:clamp(48px,7vw,80px) 0 0;color:var(--mute);font-size:12.5px;letter-spacing:.16em;}

/* 悩み：罫線を使わず、行間と余白で拍をつくる */
.pains{list-style:none;margin:0;padding:0;}
.pains li{
  font-size:clamp(16px,2.4vw,22px);font-weight:300;
  line-height:1.95;letter-spacing:.11em;
  margin-bottom:clamp(30px,4.4vw,52px);
}
/* 狭い画面では2行になるので、行内は詰めて項目の間をあける
   （1つの塊として読ませ、4つの拍が混ざらないようにする） */
@media(max-width:767px){
  .pains li{line-height:1.8;letter-spacing:.09em;margin-bottom:42px;}
}
.pains li:last-child{margin-bottom:0;}

/* 主張 */
.thesis p{
  font-size:clamp(20px,3.2vw,32px);font-weight:200;
  line-height:2.15;letter-spacing:.12em;max-width:26em;
}
.thesis .em{color:var(--accent);}

/* 画像 */
figure{margin:0;}
.fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);}
.band{padding-block:0;}
.band .fig{aspect-ratio:3/2;}
@media(min-width:768px){.band .fig{aspect-ratio:21/9;}}
.band .cap,.split .cap{
  margin-top:16px;font-size:11px;color:var(--mute);letter-spacing:.1em;line-height:2;
}
.split{display:grid;gap:clamp(40px,6vw,88px);align-items:start;}
@media(min-width:860px){
  .split{grid-template-columns:1fr 0.78fr;}
  .split.rev{grid-template-columns:0.78fr 1fr;}
  .split.rev .txt{order:2;}
  .split.rev figure{order:1;}
}
.split .fig{aspect-ratio:4/5;}

/* リンク */
.more{
  display:inline-flex;align-items:center;gap:14px;margin-top:clamp(34px,4.5vw,52px);
  font-size:12px;letter-spacing:.16em;font-weight:400;
}
.more::after{content:"";width:36px;height:1px;background:currentColor;transition:width .35s ease;}
.more:hover::after{width:56px;}

/* サービス・進め方：罫線ではなく左カラムの整列で構造をつくる */
.rows{display:grid;gap:clamp(48px,6.5vw,88px);}
.row{display:grid;gap:12px;}
@media(min-width:768px){
  .row{grid-template-columns:var(--col) 1fr;column-gap:clamp(24px,4vw,56px);}
}
.row .no{font-size:11px;font-weight:400;letter-spacing:.22em;color:var(--mute);padding-top:.55em;}
.row h3{font-size:clamp(17px,2.1vw,20px);font-weight:400;letter-spacing:.12em;margin-bottom:16px;}
.row p{font-size:14.5px;font-weight:300;color:var(--sub);margin:0;line-break:strict;}
.row .meta{display:block;margin-top:16px;font-size:11.5px;color:var(--mute);letter-spacing:.08em;}
.aside{
  font-size:12.5px;color:var(--mute);
  margin-top:clamp(44px,5.5vw,68px);
}
@media(min-width:768px){.aside{margin-left:calc(var(--col) + clamp(24px,4vw,56px));}}

/* 相談で聞くこと：枠を使わず、級数と字下げで浮かせる */
.qs{margin-top:clamp(72px,9vw,130px);}
@media(min-width:768px){.qs{margin-left:calc(var(--col) + clamp(24px,4vw,56px));}}
.qs .ttl{font-size:12px;font-weight:500;letter-spacing:.2em;margin:0 0 clamp(34px,4.5vw,52px);}
.qs ol{margin:0;padding:0;list-style:none;counter-reset:q;}
.qs li{
  counter-increment:q;position:relative;padding-left:2.6em;
  font-size:clamp(15px,2vw,18px);font-weight:300;line-height:2.3;letter-spacing:.07em;
  margin-bottom:clamp(20px,2.6vw,30px);line-break:strict;
}
.qs li::before{
  content:counter(q,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-size:11px;font-weight:400;letter-spacing:.18em;color:var(--mute);
}
.qs .note{margin-top:clamp(30px,4vw,44px);font-size:12.5px;color:var(--mute);line-break:strict;}

/* 対象 */
.cols{display:grid;gap:clamp(48px,7vw,96px);}
@media(min-width:860px){.cols{grid-template-columns:1fr 1fr;}}
.cols h3{font-size:13px;font-weight:500;letter-spacing:.2em;margin-bottom:clamp(26px,3.4vw,38px);}
.cols ul{list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--sub);}
.cols li{margin-bottom:clamp(16px,2.2vw,24px);}
.cols li:last-child{margin-bottom:0;}

/* 料金 */
.price-note{font-size:clamp(15px,2vw,19px);font-weight:300;line-height:2.25;letter-spacing:.1em;}
.limit{margin-top:clamp(48px,6vw,76px);font-size:13px;color:var(--mute);}

/* FAQ */
.faq details{margin-bottom:clamp(14px,2vw,20px);}
.faq summary{
  list-style:none;cursor:pointer;padding-block:10px;
  font-size:clamp(15px,1.9vw,16.5px);font-weight:400;letter-spacing:.1em;
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent);}
.faq summary::after{content:"＋";font-size:11px;color:var(--mute);flex:none;font-weight:300;}
.faq details[open] summary::after{content:"−";}
.faq .a{
  padding:6px 0 clamp(20px,2.6vw,30px);font-size:14px;color:var(--sub);
  line-break:strict;
}
@media(min-width:768px){.faq .a{padding-left:1.6em;}}

/* contact */
.contact h2{font-size:clamp(20px,3vw,30px);font-weight:200;line-height:2;letter-spacing:.13em;max-width:24em;}
.contact .btn{margin-top:clamp(44px,5.5vw,68px);}
.contact .sub{margin-top:28px;font-size:12px;color:var(--mute);}

/* footer */
.site-foot{padding-block:clamp(72px,9vw,120px) clamp(48px,6vw,72px);}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end;}
.fnav{display:flex;flex-wrap:wrap;gap:18px 30px;font-size:11.5px;letter-spacing:.12em;}
.copy{width:100%;font-size:11px;color:var(--mute);letter-spacing:.08em;line-height:2.3;margin-top:12px;}

/* mobile menu */
.menu-btn{
  display:block;background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--font);font-size:10.5px;font-weight:400;letter-spacing:.24em;color:var(--ink);
}
@media(min-width:900px){.menu-btn{display:none;}.overlay{display:none;}}
.overlay{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.overlay.open{opacity:1;pointer-events:auto;}
.overlay nav{display:flex;flex-direction:column;gap:34px;}
.overlay a{font-size:18px;font-weight:300;letter-spacing:.18em;}
.overlay .close{
  position:absolute;top:26px;right:var(--pad);background:none;border:0;
  font-family:var(--font);font-size:10.5px;font-weight:400;letter-spacing:.24em;color:var(--ink);cursor:pointer;padding:6px 0;
}
body.locked{overflow:hidden;}

/* reveal
   JSが動く環境（html.js）でだけ隠す。JSが読めない場合はそのまま表示される。 */
.rv{opacity:1;transform:none;}
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease-out,transform .9s cubic-bezier(.16,.8,.3,1);}
html.js .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none;}}

/* ============================================
   下層ページ共通
   ============================================ */
.page-head{padding-block:clamp(72px,10vw,140px) clamp(48px,6vw,80px);}
.page-head .label{margin-bottom:clamp(28px,3.5vw,40px);}
.page-head h1{font-size:clamp(24px,3.6vw,38px);font-weight:200;letter-spacing:.14em;line-height:1.95;}
.page-head .lede{margin-top:clamp(30px,4vw,44px);font-size:14.5px;color:var(--sub);line-break:strict;}
.page-body{padding-block:0 clamp(96px,12vw,180px);}

/* 下層ページ上部の帯画像（本文幅・6:1。狭い画面では細すぎるため3:1） */
.page-band{margin:0 0 clamp(56px,7vw,96px);}
.page-band .fig{aspect-ratio:6/1;}
@media(max-width:767px){.page-band .fig{aspect-ratio:3/1;}}

/* パンくず代わりの戻り導線 */
.back{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11.5px;letter-spacing:.16em;color:var(--mute);
}
.back::before{content:"";width:26px;height:1px;background:currentColor;}
.back:hover{color:var(--accent);}

/* ============================================
   フォーム
   ============================================ */
.form{max-width:46em;}
.field{margin-bottom:clamp(30px,4vw,42px);}
.field > label,.field .lbl{
  display:block;font-size:12px;font-weight:400;letter-spacing:.14em;
  margin-bottom:14px;
}
.req{font-size:10px;letter-spacing:.14em;color:var(--accent);margin-left:10px;}
.opt{font-size:10px;letter-spacing:.14em;color:var(--mute);margin-left:10px;}
.hint{display:block;margin-top:10px;font-size:11.5px;color:var(--mute);line-height:2;line-break:strict;}

.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form input[type=url],
.form select,
.form textarea{
  width:100%;background:#F6F6F4;border:0;border-radius:0;
  font-family:var(--font);font-size:16px;font-weight:300;letter-spacing:.03em;
  color:var(--ink);line-height:1.9;padding:16px 18px;
  transition:background .3s ease,box-shadow .3s ease;
  -webkit-appearance:none;appearance:none;
}
.form textarea{min-height:13em;line-height:2.05;resize:vertical;}
.form select{
  background-image:linear-gradient(45deg,transparent 50%,#8E8E8A 50%),linear-gradient(135deg,#8E8E8A 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 1px),calc(100% - 16px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:46px;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;background:#fff;box-shadow:0 0 0 1px var(--accent);
}
.form input::placeholder,.form textarea::placeholder{color:#B5B5B0;}

/* 同意 */
.agree{display:flex;gap:14px;align-items:flex-start;margin-top:clamp(40px,5vw,60px);font-size:13px;color:var(--sub);}
.agree input{margin-top:.45em;width:15px;height:15px;accent-color:var(--accent);flex:none;}
.agree a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}

/* 送信 */
.submit{margin-top:clamp(44px,5.5vw,64px);}
.submit:disabled{opacity:.35;cursor:default;}
.submit:disabled .arw{width:56px;}

/* ハニーポット */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* エラー */
.errors{margin-bottom:clamp(36px,4.5vw,52px);font-size:13.5px;color:#A6382E;}
.errors ul{margin:12px 0 0;padding-left:1.3em;}
.errors li{margin-bottom:6px;}

/* 補足ブロック */
.notes{margin-top:clamp(72px,9vw,120px);font-size:13px;color:var(--mute);}
.notes p{margin-bottom:1.6em;line-break:strict;}

/* 完了 */
.done h1{font-size:clamp(22px,3.2vw,32px);font-weight:200;letter-spacing:.14em;line-height:2;}
.done .msg{margin-top:clamp(34px,4.5vw,50px);font-size:14.5px;color:var(--sub);line-break:strict;}

/* 規約系 */
.doc{max-width:100%;}
.doc h2{font-size:14px;font-weight:500;letter-spacing:.18em;margin:clamp(48px,6vw,76px) 0 clamp(18px,2.4vw,26px);}
.doc h2:first-child{margin-top:0;}
.doc p,.doc li{font-size:14px;color:var(--sub);line-break:strict;}
.doc ul{margin:0 0 1.9em;padding-left:1.3em;}
.doc li{margin-bottom:8px;}
.doc .updated{margin-top:clamp(56px,7vw,88px);font-size:11.5px;color:var(--mute);}

/* ============================================
   読み物ページ（考え方など）
   ============================================ */
.chapter{display:grid;gap:14px;margin-bottom:clamp(76px,9.5vw,132px);}
@media(min-width:768px){
  .chapter{grid-template-columns:var(--col) 1fr;column-gap:clamp(24px,4vw,56px);}
}
.chapter .no{font-size:11px;font-weight:400;letter-spacing:.22em;color:var(--mute);padding-top:.6em;}
.chapter h2{
  font-size:clamp(18px,2.4vw,23px);font-weight:400;letter-spacing:.13em;line-height:1.9;
  margin-bottom:clamp(26px,3.2vw,38px);
}
.chapter .body{max-width:100%;}
.chapter .body p{font-size:15px;line-height:2.3;margin-bottom:1.9em;line-break:strict;}
.chapter .body p:last-child{margin-bottom:0;}
.chapter .body .lead{color:var(--ink);}
.chapter .body ul{list-style:none;margin:0 0 1.9em;padding:0;}
.chapter .body ul li{
  font-size:15px;line-height:2.3;margin-bottom:1.5em;padding-left:2.2em;position:relative;
  line-break:strict;
}
.chapter .body ul li::before{
  content:attr(data-n);position:absolute;left:0;top:0;
  font-size:11px;letter-spacing:.16em;color:var(--mute);line-height:3.1;
}
.chapter .body ul li:last-child{margin-bottom:0;}

/* 引用のように置く一文 */
.pull{
  font-size:clamp(19px,2.8vw,28px);font-weight:200;letter-spacing:.13em;line-height:2.15;
  max-width:25em;margin:clamp(76px,9vw,120px) 0;
}
.pull .em{color:var(--accent);}

/* 読み物中の帯画像 */
.reading-band{margin:clamp(76px,9vw,120px) 0;}
.reading-band .fig{aspect-ratio:3/2;}
@media(min-width:768px){.reading-band .fig{aspect-ratio:21/9;}}

/* 末尾の導線 */
.pagecta{margin-top:clamp(24px,4vw,56px);}
.pagecta p{font-size:15px;line-height:2.3;margin-bottom:clamp(40px,5vw,56px);line-break:strict;}
.pagecta .row-btn{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;}


/* 読み物中の引用（実例の一行） */
.chapter .body .quote{
  font-size:clamp(15.5px,1.95vw,17.5px);font-weight:300;letter-spacing:.08em;line-height:2.15;
  margin:clamp(30px,3.6vw,42px) 0;padding-left:.6em;color:var(--ink);
}
.chapter .body strong{font-weight:500;}

/* ============================================
   会社概要
   ============================================ */
.info{display:grid;gap:clamp(24px,3vw,32px);max-width:100%;}
.info .set{display:grid;gap:8px;}
@media(min-width:600px){
  .info .set{grid-template-columns:9.5em 1fr;column-gap:clamp(20px,3vw,40px);align-items:baseline;}
}
.info dt{font-size:11.5px;font-weight:400;letter-spacing:.18em;color:var(--mute);}
.info dd{margin:0;font-size:14.5px;color:var(--sub);line-height:2.1;line-break:strict;}
.info dd .note{display:block;margin-top:6px;font-size:12px;color:var(--mute);}


/* ============================================
   ボタン
   丸がボタン幅いっぱいに伸び、文字が白く反転する。
   休止時は矢印の先端だけが見え、ホバーで軸が現れて右へ進む。
   ============================================ */
.btn,.submit{
  position:relative;display:inline-block;vertical-align:middle;
  width:100%;max-width:264px;padding:0;
  background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-size:13.5px;font-weight:400;letter-spacing:.2em;
  color:var(--ink);
}
.btn .circle,.submit .circle{
  position:relative;display:block;margin:0;width:54px;height:54px;
  background:var(--ink);border-radius:27px;
  transition:width .45s cubic-bezier(.65,0,.076,1);
}
.btn .icon,.submit .icon{
  position:absolute;top:0;bottom:0;margin:auto;
  transition:.45s cubic-bezier(.65,0,.076,1);
}
.btn .icon.arrow,.submit .icon.arrow{
  /* 円(54px)の中心は27px。矢じり(8px)は right:0 なので
     中心 = left + width - 4 になる。左右の中心をここで合わせている。 */
  left:11px;width:20px;height:1px;background:transparent;
}
.btn .icon.arrow::before,.submit .icon.arrow::before{
  content:"";position:absolute;top:-3.5px;right:0;width:8px;height:8px;
  border-top:1px solid #fff;border-right:1px solid #fff;
  transform:rotate(45deg);
}
.btn .btn-text,.submit .btn-text{
  position:absolute;inset:0;margin:0 0 0 68px;padding:16px 0;
  color:var(--ink);line-height:1.6;text-align:center;
  transition:color .45s cubic-bezier(.65,0,.076,1);
}
.btn:hover .circle,.submit:hover .circle{width:100%;}
.btn:hover .icon.arrow,.submit:hover .icon.arrow{background:#fff;transform:translateX(16px);}
.btn:hover .btn-text,.submit:hover .btn-text{color:#fff;}
.btn:focus-visible,.submit:focus-visible{outline:1px solid var(--accent);outline-offset:8px;}
.submit:disabled{opacity:.35;cursor:default;}
.submit:disabled .circle{width:54px;}

@media(prefers-reduced-motion:reduce){
  .btn .circle,.submit .circle,.btn .icon,.submit .icon,
  .btn .btn-text,.submit .btn-text{transition:none;}
}

/* ヘッダーの「相談する」も枠をやめる */
.gnav .cta{
  border:0;border-bottom:1px solid var(--ink);
  padding:0 1px 5px;
  transition:color .35s ease,border-color .35s ease;
}
.gnav .cta:hover{border-color:var(--accent);}

/* スパム防止のクイズ */
.field .qtext{
  font-size:16px;font-weight:400;letter-spacing:.1em;
  margin:0 0 14px;color:var(--ink);
}