/* CSS Document */

:root{
  --paper:#EFECE4;        /* 更紙のような紙色 */
  --paper-dark:#E4E0D5;
  --ink:#22252B;          /* 墨色 */
  --indigo:#28456E;       /* 題字の紺 */
  --red:#C7402D;          /* 校正の赤ペン */
  --gray:#6D6F6A;
  --white:#FDFCF9;
  --serif:'Shippori Mincho', serif;
  --sans:'Noto Sans JP', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.9;font-size:16px;}
img{max-width:100%;}
a{color:inherit;}

/* ===== 共通パーツ ===== */
.container{max-width:1040px;margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section-label{font-family:var(--serif);font-size:13px;letter-spacing:.35em;color:var(--indigo);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:inline-block;padding:4px 14px 4px 18px;margin-bottom:22px;}
.section-title{font-family:var(--serif);font-size:clamp(26px,4vw,38px);font-weight:700;line-height:1.5;margin-bottom:18px;letter-spacing:.04em;}
.fit-oneline{white-space:nowrap;font-size:clamp(20px,3.35vw,34px);letter-spacing:.01em;}
.fit-oneline span{display:inline-block;}
@media(max-width:700px){.fit-oneline{white-space:normal;font-size:24px;}}
.section-lead{max-width:680px;color:#3c3f45;margin-bottom:48px;}
.lead-wide{max-width:none;}
.btn{display:inline-block;font-weight:700;text-decoration:none;text-align:center;border-radius:2px;transition:opacity .2s, transform .2s;}
.btn:hover{opacity:.85;transform:translateY(-1px);}
.btn-primary{background:var(--red);color:var(--white);padding:18px 44px;font-size:17px;letter-spacing:.08em;box-shadow:0 3px 0 #96301f;}
.btn-secondary{background:var(--white);color:var(--indigo);border:2px solid var(--indigo);padding:16px 40px;font-size:15px;letter-spacing:.06em;}
.redpen{position:relative;display:inline-block;font-style:normal;}
.redpen svg{position:absolute;left:-4%;bottom:-6px;width:108%;height:14px;overflow:visible;}
.redpen svg path{stroke:var(--red);stroke-width:3;fill:none;stroke-linecap:round;opacity:.85;}

/* ===== ヘッダー ===== */
header{background:var(--white);border-bottom:3px double var(--ink);position:sticky;top:0;z-index:50;}
.header-inner{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.logo{font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:.05em;line-height: 1.1;}
.logo small{display:block;font-size:10px;font-weight:500;letter-spacing:.25em;color:var(--gray);}
.header-cta{display:flex;align-items:center;gap:14px;}
.header-btn{background:var(--red);color:var(--white);text-decoration:none;font-weight:700;font-size:14px;padding:10px 20px;border-radius:2px;white-space: nowrap;}
@media (max-width: 680px) {
  .logo{line-height: 1;}
  .header-btn {padding: 10px 14px;font-size: 12.5px;}
}
/* ===== ヒーロー ===== */
.hero{background:
  repeating-linear-gradient(0deg, transparent 0 31px, rgba(34,37,43,.045) 31px 32px),
  var(--paper);
  border-bottom:1px solid var(--ink);
  overflow:hidden;}
.hero-inner{max-width:1120px;margin:0 auto;padding:12px 24px 48px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;}
.hero-copy h1{font-family:var(--serif);font-size:clamp(32px,5.2vw,54px);font-weight:800;line-height:1.55;letter-spacing:.03em;margin-bottom:24px;}
.hero-copy p.sub{font-size:clamp(15px,1.8vw,18px);max-width:520px;margin-bottom:36px;color:#33363c;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero-note{font-size:12px;color:var(--gray);margin-top:12px;}
/* 題字 + 紙面ビジュアル */
.hero-visual{display:flex;flex-direction:column;gap:18px;align-items:center;}
.daiji{font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:.22em;color:var(--white);background:var(--indigo);padding:14px 26px;line-height:1.4;text-align:center;box-shadow:4px 4px 0 rgba(34,37,43,.18);}
.daiji small{display:block;font-size:11px;font-weight:600;letter-spacing:.3em;margin-top:6px;opacity:.85;}
.hero-paper{width:330px;max-width:100%;}
.hero-paper img{width:100%;height:auto;display:block;}
@media(max-width:880px){
  .hero-inner{grid-template-columns:1fr;padding:10px 24px 36px;}
  .hero-visual{justify-content:center;}
  .hero-paper{width:280px;}
}

/* ===== 課題 ===== */
.problem{background:var(--white);}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.problem-card{background:var(--paper);border:1px solid #d8d5cc;padding:32px 26px;position:relative;}
.problem-card::before{content:"悩";position:absolute;top:-14px;left:20px;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:14px;padding:3px 9px;letter-spacing:.1em;}
.problem-card h3{font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:12px;line-height:1.7;}
.problem-card p{font-size:14px;color:#44474d;}
.problem-close{text-align:center;margin-top:56px;font-family:var(--serif);font-size:clamp(20px,3vw,28px);font-weight:700;line-height:1.8;}
@media(max-width:760px){.problem-grid{grid-template-columns:1fr;}}

/* ===== 理由 ===== */
.reasons .reason{display:grid;grid-template-columns:120px 1fr 300px;gap:36px;align-items:center;padding:44px 0;border-bottom:1px solid #c9c6bc;}
.reasons .reason:first-of-type{border-top:1px solid #c9c6bc;}
.reason-kanji{font-family:var(--serif);font-size:34px;font-weight:800;color:var(--indigo);letter-spacing:.08em;line-height:1;justify-self:center;white-space:nowrap;}
.reason-body h3{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:10px;}
.reason-body p{font-size:15px;color:#3c3f45;}
.reason-fig{border:1px solid #d8d5cc;height:180px;overflow:hidden;background:var(--white);}
.reason-fig img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:880px){
  .reasons .reason{grid-template-columns:1fr;gap:18px;text-align:left;}
  .reason-kanji{justify-self:start;}
  .reason-fig{height:140px;}
}

/* ===== 紙面イメージ ===== */
.pages{background:var(--indigo);color:var(--white);}
.pages .section-label{color:var(--white);border-color:var(--white);}
.pages .section-lead{color:#d7dee9;}
.pages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.page-card{background:var(--white);color:var(--ink);padding:20px 18px 24px;}
.page-card .pg-no{font-family:var(--serif);font-size:12px;letter-spacing:.25em;color:var(--red);border-bottom:2px solid var(--red);display:inline-block;margin-bottom:14px;padding-bottom:2px;}
.page-card h3{font-family:var(--serif);font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.6;}
.page-card ul{list-style:none;font-size:13px;color:#44474d;}
.page-card li{padding-left:14px;position:relative;margin-bottom:6px;line-height:1.6;}
.page-card li::before{content:"◦";position:absolute;left:0;color:var(--indigo);}
@media(max-width:880px){.pages-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.pages-grid{grid-template-columns:1fr;}}

/* ===== 仕様 ===== */
.spec-sizes{display:flex;gap:40px;align-items:flex-start;justify-content:center;margin:48px 0 24px;flex-wrap:wrap;}
.size-box{text-align:center;}
.size-photo{max-width:100%;margin:0 auto 18px;}
.spec-sizes .size-box{flex:1 1 380px;max-width:440px;}
.size-photo img{width:100%;height:auto;display:block;}
.size-box h4{font-family:var(--serif);font-size:16px;font-weight:700;}
.size-box p{font-size:12px;color:var(--gray);}
.spec-table{width:100%;border-collapse:collapse;margin-top:40px;background:var(--white);}
.spec-table th,.spec-table td{border:1px solid #c9c6bc;padding:14px 18px;font-size:14px;text-align:left;vertical-align:top;}
.spec-table th{background:var(--paper-dark);font-family:var(--serif);width:180px;white-space:nowrap;}
@media(max-width:640px){.spec-table th{width:110px;}}

/* ===== 料金 ===== */
.price{background:var(--white);}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.price-card{border:1px solid #c9c6bc;padding:32px 26px;background:var(--paper);}
.price-card.featured{border:1px solid #b3ad9f;background:var(--white);}
.price-card h3{font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:6px;}
.price-card .pc-scene{font-size:12px;color:var(--gray);margin-bottom:18px;min-height:3em;}
.price-card .pc-spec{font-size:13px;border-top:1px dashed #c9c6bc;border-bottom:1px dashed #c9c6bc;padding:12px 0;margin-bottom:16px;}
.price-card .pc-price{font-family:var(--serif);font-size:15px;}
.price-card .pc-price strong{font-size:30px;color:var(--red);letter-spacing:.02em;}
@media(max-width:800px){.price-grid{grid-template-columns:1fr;}}

/* ===== 制作サポート ===== */
.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.support-card{background:var(--white);border-top:6px solid var(--indigo);padding:36px 30px;box-shadow:0 2px 0 rgba(34,37,43,.08);}
.support-card:last-child{border-top-color:var(--red);}
.support-card .sc-tag{font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--gray);margin-bottom:8px;}
.support-card h3{font-family:var(--serif);font-size:20px;font-weight:700;margin-bottom:14px;}
.support-card p{font-size:14px;color:#3c3f45;margin-bottom:14px;}
.support-card ul{list-style:none;font-size:13.5px;}
.support-card li{padding-left:20px;position:relative;margin-bottom:8px;}
.support-card li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900;}
@media(max-width:760px){.support-grid{grid-template-columns:1fr;}}

/* ===== 流れ ===== */
.flow{background:var(--white);}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step;}
.flow-step{position:relative;padding:28px 18px 20px;border-left:1px solid #c9c6bc;counter-increment:step;}
.flow-step:last-child{border-right:1px solid #c9c6bc;}
.flow-step::before{content:counter(step);font-family:var(--serif);font-weight:800;font-size:34px;color:var(--indigo);display:block;line-height:1;margin-bottom:12px;}
.flow-step h3{font-family:var(--serif);font-size:15px;font-weight:700;margin-bottom:8px;}
.flow-step p{font-size:12.5px;color:#44474d;line-height:1.75;}
@media(max-width:880px){.flow-steps{grid-template-columns:1fr;}.flow-step{border:none;border-top:1px solid #c9c6bc;padding:20px 4px;}.flow-step:last-child{border-right:none;border-bottom:1px solid #c9c6bc;}}

/* ===== FAQ ===== */
.faq details{background:var(--white);border:1px solid #c9c6bc;margin-bottom:14px;}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:15.5px;list-style:none;position:relative;padding-right:52px;}
.faq summary::before{content:"問";font-family:var(--serif);color:var(--indigo);margin-right:12px;}
.faq summary::after{content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--red);font-size:20px;font-weight:400;}
.faq details[open] summary::after{content:"−";}
.faq .faq-a{padding:0 24px 22px;font-size:14.5px;color:#3c3f45;}
.faq .faq-a::before{content:"答";font-family:var(--serif);color:var(--red);margin-right:12px;font-weight:700;}

/* ===== クロージングCTA ===== */
.closing{background:var(--ink);color:var(--white);text-align:center;padding:96px 24px;}
.closing h2{font-family:var(--serif);font-size:clamp(24px,4vw,36px);font-weight:800;line-height:1.7;margin-bottom:16px;}
.closing p{max-width:620px;margin:0 auto 40px;color:#c9cbcf;font-size:15px;}
.closing-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.closing .btn-secondary{background:transparent;color:var(--white);border-color:var(--white);}

/* ===== フッター ===== */
footer{background:#181a1f;color:#9a9da3;font-size:12px;padding:28px 24px;text-align:center;line-height:2;}
footer a{color:#c9cbcf;text-decoration:none;margin:0 10px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}