@charset "utf-8";
/* ============================================================
   筆録舎（ひつろくしゃ）LP
   形式：segmented（章ごとに地色・余白・境界で切り替わる）
   見た目の正本：selected-reference/round-2/A-pc.png / A-mobile.png
   編集する場所 → HANDOFF.md
   ============================================================ */

@font-face{font-family:'Noto Serif JP';src:url('./fonts/NotoSerifJP-variable.woff2') format('woff2');font-weight:200 900;font-display:swap;}
@font-face{font-family:'Noto Sans JP';src:url('./fonts/NotoSansJP-variable.woff2') format('woff2');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Manrope';src:url('./fonts/Manrope-variable.woff2') format('woff2');font-weight:200 800;font-display:swap;}

:root{
  /* ── 色（採用原画からの実測） ── */
  --ink-navy:#01284c;          /* FVの地。最重要の面 */
  --ink-navy-deep:#001a36;
  --gold:#a5894f;              /* 第1CTA */
  --gold-hi:#b79a5d;
  --gold-lo:#94773f;
  --green-deep:#0d2830;        /* 最終CTAの帯（3色目） */
  --green-deep-2:#071c21;
  --paper:#fdfdfc;             /* 本文の地 */
  --paper-tint:#f5f4f2;        /* カードのパネル地 */
  --paper-tint-2:#faf9f7;
  --line:#e3e1dc;
  --text:#1a1d22;
  --text-mute:#5a5e66;
  --text-on-navy:#ffffff;
  --text-on-navy-mute:#ccd6e2;

  /* ── 書体 ── */
  --serif:'Noto Serif JP',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:'Noto Sans JP',"Hiragino Sans","Yu Gothic",sans-serif;
  --num:'Manrope','Noto Sans JP',sans-serif;

  /* ── 文字サイズ ── */
  --fs-h1:clamp(32px,3.5vw,50px);
  --fs-h2:clamp(24px,2.3vw,33px);
  --fs-h2-wide:clamp(23px,2.45vw,35px);
  --fs-body:clamp(14px,1.07vw,15.5px);
  --fs-sm:13.5px;
  --fs-xs:12.5px;
  --fs-eyebrow:11.5px;
  --eyebrow-gap:18px;
  --amount-size:34px;

  /* ── 余白（狭い→約2倍） ── */
  --gap-head-body:24px;        /* 見出し → 本文 */
  --gap-copy-fig:60px;         /* 文章群 → 写真 */
  --gap-block:104px;           /* 節の上下 */
  --shell:1440px;
  --inset:80px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--serif);font-weight:400;
  font-feature-settings:"palt" 1;font-synthesis:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,dl,dd,ul,figure{margin:0;}
ul{list-style:none;padding:0;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--inset);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;padding:8px 14px;}

/* ── 共通の文字 ────────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.16em;color:var(--text-mute);margin-bottom:var(--eyebrow-gap);
}
.h2{
  font-family:var(--serif);font-weight:500;font-size:var(--fs-h2);
  line-height:1.46;letter-spacing:.055em;
}
.h2--wide{font-size:var(--fs-h2-wide);letter-spacing:.07em;line-height:1.5;}
.body{
  font-size:var(--fs-body);line-height:2.05;letter-spacing:.045em;color:var(--text-mute);
  word-break:keep-all;overflow-wrap:break-word;
  margin-top:var(--gap-head-body);
}
.body--sm{font-size:var(--fs-sm);line-height:1.95;}
.body--xs{font-size:var(--fs-xs);line-height:1.9;}
.rule{border:0;border-top:1px solid rgba(255,255,255,.5);width:40px;margin:26px 0 0;}

.amount{display:inline-flex;align-items:baseline;gap:.08em;white-space:nowrap;}
.amount__number{font-family:var(--num);font-size:var(--amount-size);font-weight:600;letter-spacing:.01em;}
.amount__unit{font-size:calc(var(--amount-size) * .5);letter-spacing:.04em;}
.amount--sm{--amount-size:17px;}
.amount--sm .amount__number{font-weight:650;}

/* ── ボタン ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:1.1em;white-space:nowrap;
  min-height:51px;padding:0 26px;font-family:var(--serif);font-weight:500;
  font-size:14px;letter-spacing:.11em;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn__arrow{font-family:var(--sans);font-size:12px;transition:transform .25s ease;}
.btn:hover .btn__arrow{transform:translateX(4px);}
.btn--gold{
  background:linear-gradient(100deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  color:#fff;min-width:254px;
}
.btn--gold:hover{background:linear-gradient(100deg,#c0a468,var(--gold-hi) 45%,var(--gold));}
.btn--ghost{border:1px solid rgba(255,255,255,.62);color:#fff;min-width:277px;}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.btn--sm{min-height:36px;min-width:0;padding:0 18px;font-size:12.5px;letter-spacing:.08em;}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;}
.btn-row--center{justify-content:center;margin-top:26px;}

/* ── ヘッダー ──────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:50;background:#fcfcfd;border-bottom:1px solid var(--line);
}
.head__inner{display:flex;align-items:center;gap:40px;height:58px;}
.logo{display:flex;align-items:baseline;gap:12px;white-space:nowrap;flex:0 0 auto;}
.logo__ja{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.3em;}
.logo__kana{font-family:var(--serif);font-size:11px;letter-spacing:.18em;color:var(--text-mute);}
.nav{display:flex;gap:30px;margin-left:auto;}
.nav a{font-size:12.5px;letter-spacing:.1em;color:var(--text);padding:6px 0;border-bottom:1px solid transparent;}
.nav a:hover{border-bottom-color:var(--gold);}
.head__cta{margin-left:32px;}
.burger{display:none;}
.nav-sheet{display:none;}

/* ── s1 FV ─────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(118deg,var(--ink-navy) 0%,var(--ink-navy) 48%,var(--ink-navy-deep) 100%);
  min-height:680px;display:flex;align-items:center;
}
.hero__still{position:absolute;inset:0;z-index:-1;}
.hero__still img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero__inner{width:100%;}
.hero__copy{max-width:640px;padding-block:72px;}
.hero__title{
  font-family:var(--serif);font-weight:400;color:var(--text-on-navy);
  font-size:var(--fs-h1);line-height:1.55;letter-spacing:.085em;
}
.hero__lead{
  margin-top:26px;color:var(--text-on-navy-mute);
  font-size:var(--fs-body);line-height:2.0;letter-spacing:.05em;
}
.price{display:flex;align-items:baseline;gap:16px;margin-top:20px;color:#fff;}
.price__label{font-size:15px;letter-spacing:.09em;}

/* ── s2–s4 文章＋写真 ─────────────────────── */
.sec{position:relative;}
.sec--philosophy{background:#fefefe;padding-block:var(--gap-block) 0;}
.sec--store{background:#fefefe;padding-block:84px var(--gap-block);}
.sec--world{background:#fefefe;padding-block:0 var(--gap-block);}

.split{display:grid;gap:var(--gap-copy-fig);align-items:center;}
/* 列幅は採用原画の実測（846px幅 → 1440px換算）に合わせて固定する */
.split--copy-first{grid-template-columns:minmax(0,604fr) minmax(0,638fr);}
.split--fig-first{grid-template-columns:minmax(0,573fr) minmax(0,638fr);gap:69px;}
.split--copy-narrow{grid-template-columns:minmax(0,420fr) minmax(0,860fr);gap:0;}
.split__fig img{width:100%;}
.split__fig--bleed-r{margin-right:calc(var(--inset) * -1);}
.split__fig--wide{margin-block:0;}

/* ── s5 見せ場：紙とインクの相性 ─────────── */
.sec--affinity{background:var(--paper-tint-2);padding-block:var(--gap-block);border-top:1px solid var(--line);}
.affinity__head{
  display:grid;grid-template-columns:minmax(0,802fr) minmax(0,494fr);
  gap:var(--gap-copy-fig);align-items:end;margin-bottom:52px;
}
.affinity__head .body{margin-top:0;}
.papers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:46px 46px;}
.paper__name{font-family:var(--serif);font-weight:500;font-size:15.5px;letter-spacing:.09em;}
.paper__sub{margin-top:5px;font-size:11.5px;letter-spacing:.06em;color:var(--text-mute);}
.paper__shot{margin:22px 0 0;}
.paper__shot img{width:100%;box-shadow:0 10px 22px -12px rgba(26,29,34,.45);}
.paper__detail{display:grid;grid-template-columns:42% minmax(0,1fr);gap:18px;margin-top:22px;align-items:start;}
.paper__zoom img{width:100%;}
.specs{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;row-gap:9px;font-size:11.5px;line-height:1.5;letter-spacing:.04em;
}
.specs dt{color:var(--text-mute);}
.specs dd{margin:0;color:var(--text);}

/* ── s6 一本を仕立てる ────────────────────── */
.sec--tailor{background:#fefefe;padding-block:var(--gap-block);}
.sec--tailor .affinity__head{grid-template-columns:minmax(0,700fr) minmax(0,590fr);}
.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;}
.option{background:var(--paper-tint);padding:34px 30px 30px;}
.option__name{font-family:var(--serif);font-weight:500;font-size:15.5px;letter-spacing:.09em;}
.option__fig{margin:26px 0 0;}
.option__fig img{width:100%;}
.option__note{margin-top:26px;font-size:var(--fs-xs);line-height:1.8;letter-spacing:.04em;color:var(--text-mute);}

/* ── s7 ご相談の内容 ──────────────────────── */
.sec--services{background:var(--paper-tint-2);padding-block:var(--gap-block);}
.sec--services .h2{margin-bottom:52px;}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;}
.svc{display:grid;grid-template-columns:38% minmax(0,1fr);gap:20px;background:#fff;border:1px solid var(--line);padding:0;}
.svc__fig{margin:0;}
.svc__fig img{width:100%;height:100%;object-fit:cover;}
.svc__body{padding:26px 26px 26px 0;}
.svc__name{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.06em;line-height:1.6;word-break:keep-all;overflow-wrap:break-word;}
.badge{
  display:inline-flex;align-items:center;margin-top:10px;padding:3px 12px;
  background:var(--text);color:#fff;font-family:var(--sans);font-size:11.5px;
  font-weight:500;letter-spacing:.09em;
}
.badge .amount__unit{font-family:var(--sans);}
.svc__body .body{margin-top:12px;}

/* ── s8 安心して ──────────────────────────── */
.sec--assurance{background:var(--paper-tint-2);border-block:1px solid var(--line);}
.assurance__grid{
  display:grid;grid-template-columns:minmax(0,797fr) minmax(0,643fr);
  align-items:center;max-width:var(--shell);margin-inline:auto;
}
.assurance__copy{padding:76px var(--gap-copy-fig) 76px var(--inset);}
.assurance__fig{margin:0;align-self:stretch;}
.assurance__fig img{width:100%;height:100%;object-fit:cover;}

/* ── s9 最終CTA ───────────────────────────── */
.sec--contact{
  position:relative;overflow:hidden;
  background:linear-gradient(176deg,var(--green-deep),var(--green-deep-2));
  color:#fff;
}
.contact__leaf,.contact__box{position:absolute;inset-block:0;height:100%;width:auto;object-fit:cover;}
.contact__leaf{left:0;-webkit-mask-image:linear-gradient(to right,#000 55%,transparent);mask-image:linear-gradient(to right,#000 55%,transparent);}
.contact__box{right:0;-webkit-mask-image:linear-gradient(to left,#000 62%,transparent);mask-image:linear-gradient(to left,#000 62%,transparent);}
.contact__inner{position:relative;z-index:1;padding-block:84px;text-align:center;}
.contact__title{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.72vw,25px);
  line-height:1.7;letter-spacing:.09em;
}

/* ── フッター ─────────────────────────────── */
.site-foot{background:var(--green-deep-2);color:#fff;border-top:1px solid rgba(255,255,255,.12);}
.foot__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;}
.logo--foot .logo__kana{color:rgba(255,255,255,.66);}
.foot__note{
  max-width:var(--shell);margin-inline:auto;padding:0 var(--inset) 30px;
  font-size:11.5px;line-height:1.9;letter-spacing:.04em;color:rgba(255,255,255,.62);
}

/* ============================================================
   〜1024px
   ============================================================ */
@media (max-width:1100px){
  :root{--inset:44px;--gap-block:58px;--gap-copy-fig:30px;}
  .nav{gap:20px;}
  .nav a{font-size:12px;}
  .head__cta{margin-left:18px;}
  .papers{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px;}
}

@media (max-width:900px){
  .nav{display:none;}
  .head__cta{margin-left:auto;}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:14px;width:34px;height:40px;background:none;border:0;cursor:pointer;padding:0 5px;
  }
  .burger span{display:block;height:1px;background:var(--text);transition:transform .25s ease,opacity .2s ease;}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .nav-sheet{
    display:grid;background:#fcfcfd;border-bottom:1px solid var(--line);
    padding:6px var(--inset) 18px;
  }
  .nav-sheet[hidden]{display:none;}
  .nav-sheet a{padding:13px 0;font-size:14px;letter-spacing:.09em;border-bottom:1px solid var(--line);}
  .options,.services{grid-template-columns:1fr;}
  .svc{max-width:560px;}
  .split--copy-first,.split--fig-first,.split--copy-narrow{grid-template-columns:1fr;}
  .split--fig-first .split__fig{order:2;}
  .split__fig--bleed-r{margin-right:calc(var(--inset) * -1);}
  .affinity__head{grid-template-columns:1fr;align-items:start;gap:18px;}
  .affinity__head .body{margin-top:0;}
  .assurance__grid{grid-template-columns:1fr;}
  .assurance__copy{padding:44px var(--inset);}
  .assurance__fig img{height:230px;}
}

/* ============================================================
   スマホ（390px基準）
   PC原画の関係を保つ：同じ濃紺の一面の中に、写真 → 見出し → リード → 価格 → CTA
   ============================================================ */
@media (max-width:767px){
  .site-head .shell{padding-inline:16px;}
  .head__inner{gap:0;}
  .logo__ja{font-size:17px;letter-spacing:.2em;}
  .logo__kana{font-size:9.5px;letter-spacing:.1em;}
  .head__cta{font-size:10.5px;padding:0 10px;min-height:33px;letter-spacing:.03em;margin-left:14px;}
  .head__cta .btn__arrow{display:none;}
  .burger{margin-left:8px;width:36px;padding:0 6px;}
  :root{
    --inset:22px;--gap-block:68px;--gap-copy-fig:34px;--gap-head-body:20px;--eyebrow-gap:14px;
    --fs-h1:34px;--fs-h2:21px;--fs-h2-wide:20px;--fs-body:13.5px;--amount-size:30px;
  }
  .hero{
    min-height:0;display:block;
    background:linear-gradient(170deg,var(--ink-navy) 0%,var(--ink-navy) 55%,var(--ink-navy-deep) 100%);
  }
  .hero__still{
    position:relative;inset:auto;width:100%;z-index:0;
    aspect-ratio:941/867;   /* 採用スマホ原画の文字なし範囲と同じ比率＝切り取らない */
  }
  .hero__still img{
    height:100%;object-position:70% center;
    -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.28) 76%,transparent 88%);
            mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.28) 76%,transparent 88%);
  }
  .hero__inner{position:relative;z-index:1;margin-top:-34px;}
  .hero__copy{padding-block:0 46px;max-width:none;}
  .hero__title{line-height:1.5;letter-spacing:.06em;}
  .hero__lead{margin-top:18px;line-height:1.95;}
  .hero__lead br,.body br{display:none;}
  .hero__lead,.body,.option__note,.paper__sub,.svc__name,.contact__title,.h2{word-break:keep-all;overflow-wrap:break-word;}
  /* スマホは写真を上へ。本文に全幅を渡し、語の途中（案／内）で折れないようにする */
  .svc{grid-template-columns:1fr;gap:0;}
  .svc__fig img{width:100%;height:132px;object-fit:cover;object-position:center 55%;}
  .svc__body{padding:16px 20px 18px;}
  .rule{margin-top:20px;}
  .price{margin-top:16px;gap:12px;}
  .price__label{font-size:13.5px;}
  .btn-row{gap:11px;margin-top:22px;}
  .btn{width:100%;min-width:0;min-height:52px;font-size:13.5px;}
  .btn-row--center .btn{width:100%;}

  .papers{grid-template-columns:1fr;gap:34px;}
  .specs{font-size:12px;}
  .h2 br{display:initial;}
  .split__fig--bleed-r{margin-inline:calc(var(--inset) * -1);}
  .split__fig--wide{margin-block:0;}
  .sec--philosophy{padding-bottom:var(--gap-block);}
  .assurance__fig img{height:190px;}
  .contact__inner{padding-block:40px;}
  .contact__leaf{width:52%;-webkit-mask-image:linear-gradient(to right,#000 30%,transparent);mask-image:linear-gradient(to right,#000 30%,transparent);}
  .contact__box{width:46%;-webkit-mask-image:linear-gradient(to left,#000 34%,transparent);mask-image:linear-gradient(to left,#000 34%,transparent);}
  .contact__title{text-align:left;}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:18px;}
  .foot__inner .btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}