:root{
  --navy:#05384E;
  --navy-d:#03212E;
  --navy-l:#0A4C68;
  --cream:#F5E4B3;
  --gold:#E6CE9A;
  --gold-d:#C6A664;
  --paper:#ffffff;
  --ink:#05384E;
  --ink-soft:#3d5f70;
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
  --serif-ja:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  /* ▼ ゴシック：ラフで使われている「セザンヌ」(フォントワークス) を先頭に置いています。
       セザンヌが入っている端末ではそのまま表示され、無い端末では Zen Kaku Gothic New に落ちます。
       本番でセザンヌを確実に出すなら FONTPLUS などのWebフォント配信に差し替えてください。   */
  /* ポスター調のコピー用（丸ゴシック） */
  --maru-ja:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;
  --gothic-ja:
    "FOT-セザンヌ ProN DB","FOT-セザンヌ ProN M","FOT-セザンヌ Pro DB","FOT-セザンヌ Pro M",
    "FOT-CezanneProN-DB","FOT-CezanneProN-M","FOT-CezannePro-DB","FOT-CezannePro-M",
    "Cezanne ProN","Cezanne Pro",
    "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-ja);
  font-size:16px;line-height:2.05;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
section{overflow:hidden}
.wrap{max-width:1080px;margin:0 auto}

/* ============ 共通：出現アニメーション ============ */
/* テキスト＝text-focus-in（ぼけから焦点が合う）／画像・図版＝fade-in       */
@keyframes text-focus-in{
  0%{filter:blur(12px);opacity:0}
  100%{filter:blur(0);opacity:1}
}
@keyframes fade-in{
  0%{opacity:0}
  100%{opacity:1}
}
/* 見出しの日本語は 85% の濃さで止めたいので専用に */
@keyframes text-focus-in-soft{
  0%{filter:blur(12px);opacity:0}
  100%{filter:blur(0);opacity:.85}
}
.sec-head .ja.fx.run{animation-name:text-focus-in-soft}
.fx,.fi{opacity:0}
.fx.run{
  animation:text-focus-in 1s cubic-bezier(.550,.085,.680,.530) both;
  animation-delay:var(--d,0s);
}
/* filter が残ったままだと文字がGPU合成になり、小さい字がにじむ。
   アニメーションが終わったら外す（JSで .done を付与）                */
.fx.done{animation:none;filter:none;opacity:1}
.sec-head .ja.fx.done{opacity:.85}
.fi.run{
  animation:fade-in 1.2s cubic-bezier(.390,.575,.565,1.000) both;
  animation-delay:var(--d,0s);
}

/* ============ 共通：セクション見出し ============ */
.sec-head{
  text-align:center;
  margin:0 0 clamp(32px,4.6vw,60px);
  font-weight:400;
}
.sec-head .en{
  display:block;
  font-family:var(--serif-en);font-weight:700;
  font-size:clamp(30px,4.2vw,48px);
  letter-spacing:.015em;line-height:1.15;
}
.sec-head .ja{
  display:block;margin-top:.35em;
  font-family:var(--gothic-ja);
  font-size:clamp(10px,1vw,12px);letter-spacing:.32em;line-height:1.4;
  font-weight:400;opacity:.85;
}
/* 見出し下の飾り（罫＋ひし形）。.run が付いたら伸びる */
.sec-head{position:relative;padding-bottom:38px}
.sec-head::after{
  content:"";position:absolute;left:50%;bottom:14px;
  width:104px;height:7px;opacity:.42;
  transform:translateX(-50%) scaleX(0);
  background:
    linear-gradient(currentColor,currentColor) left center/40px 1px no-repeat,
    linear-gradient(currentColor,currentColor) right center/40px 1px no-repeat;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .35s;
}
.sec-head.run::after{transform:translateX(-50%) scaleX(1)}
.sec-head::before{
  content:"";position:absolute;left:50%;bottom:14.5px;
  width:6px;height:6px;background:currentColor;opacity:.6;
  transform:translate(-50%,50%) rotate(45deg) scale(0);
  transition:transform .7s cubic-bezier(.2,.9,.3,1.5) 1.05s;
}
.sec-head.run::before{transform:translate(-50%,50%) rotate(45deg) scale(1)}

/* 星（紺のセクションの背景） */
.stars{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stars i{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle 5s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.7}}

/* 三連シェブロン */
.only-sp{display:none}
.chev{width:38px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============ 0. ローディング（月の満ち欠け） ============ */
/* 0.00〜1.81s 出現（新月からのスタート・時計回り）／尾を引いて消える
   2.20〜3.50s 背景がメインビューの夜空へ変わる                        */
#loader{
  position:fixed;inset:0;z-index:999;
  display:grid;place-items:center;
  animation:loaderOut 0s linear 2.65s forwards;
}
@keyframes loaderOut{to{visibility:hidden;pointer-events:none}}
.loader-bg{
  position:absolute;inset:0;
  /* Bookセクションと同じ紺（#05384E）ベース。中心をわずかに明るくして奥行きを出す */
  background:radial-gradient(120% 90% at 50% 45%,#06415A 0%,var(--navy) 52%,#03293A 100%);
  animation:bgOut 1.0s ease 1.6s forwards;
}
@keyframes bgOut{to{opacity:0}}
.ring{--step:.13s;position:relative;width:clamp(250px,36vw,390px);aspect-ratio:1}
.mp{
  position:absolute;left:50%;top:50%;width:15%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(calc(var(--i)*45deg)) translateY(-272%) rotate(calc(var(--i)*-45deg));
}
.mp-in{
  display:block;width:100%;height:100%;position:relative;border-radius:50%;overflow:hidden;
  opacity:0;transform:scale(.25);
  box-shadow:inset 0 0 0 1px rgba(228,210,168,.16),0 0 15px rgba(255,228,168,.20);
  animation:
    mpIn  .55s cubic-bezier(.22,.9,.3,1.25) calc(var(--i)*var(--step)) forwards,
    mpOut .9s ease calc(var(--i)*var(--step) + .55s) forwards;
}
@keyframes mpIn{0%{opacity:0;transform:scale(.25)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes mpOut{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(.86);filter:blur(3px)}}
.disc{position:absolute;inset:0;border-radius:50%}
.disc.lit{background-image:url("../img/img_016.png");background-size:cover;background-position:center}
.disc.shade{background:#053447;transform:translateX(var(--off));filter:blur(1.6px)}

/* ============ 1. メインビュー ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(90px,12vh,140px) 6vw clamp(70px,10vh,120px);
  overflow:hidden;background:#04101f;
}
.sky{
  position:absolute;inset:0;z-index:0;
  background-image:url("../img/img_003.jpg");background-size:cover;background-position:center;
}
.sky::after{
  content:"";position:absolute;inset:auto 0 0 0;height:26%;
  background:linear-gradient(transparent,rgba(3,12,24,.6));
}
/* 霧（雲）：右から左へ */
.fog{
  position:absolute;top:-12%;left:0;width:200%;height:124%;
  pointer-events:none;will-change:transform;animation:fogDrift linear infinite;
}
.fog-i{
  width:100%;height:100%;background-repeat:repeat-x;background-size:50% 100%;
  will-change:transform;animation:fogFloat ease-in-out infinite alternate;
}
@keyframes fogDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes fogFloat{from{transform:translate3d(0,-1.6%,0)}to{transform:translate3d(0,2.2%,0)}}
.fog-back{z-index:1;animation-duration:104s}
.fog-back .fog-i{
  animation-duration:26s;filter:blur(8px);
  background-image:
    radial-gradient(ellipse 22% 13% at 6% 16%,rgba(8,26,50,.52),transparent 72%),
    radial-gradient(ellipse 17% 10% at 15% 30%,rgba(226,238,255,.20),transparent 74%),
    radial-gradient(ellipse 26% 15% at 27% 13%,rgba(8,26,50,.46),transparent 72%),
    radial-gradient(ellipse 19% 12% at 36% 26%,rgba(214,232,255,.22),transparent 74%),
    radial-gradient(ellipse 24% 14% at 49% 18%,rgba(8,26,50,.50),transparent 72%),
    radial-gradient(ellipse 20% 11% at 61% 12%,rgba(226,238,255,.18),transparent 74%),
    radial-gradient(ellipse 27% 16% at 72% 21%,rgba(8,26,50,.48),transparent 72%),
    radial-gradient(ellipse 18% 12% at 85% 15%,rgba(214,232,255,.21),transparent 74%),
    radial-gradient(ellipse 23% 14% at 95% 24%,rgba(8,26,50,.44),transparent 72%),
    radial-gradient(ellipse 24% 16% at 20% 62%,rgba(8,26,50,.40),transparent 74%),
    radial-gradient(ellipse 20% 13% at 45% 72%,rgba(226,238,255,.18),transparent 74%),
    radial-gradient(ellipse 26% 15% at 68% 66%,rgba(8,26,50,.38),transparent 74%),
    radial-gradient(ellipse 21% 14% at 90% 76%,rgba(214,232,255,.16),transparent 74%);
}
.fog-mid{z-index:3;animation-duration:68s}
.fog-mid .fog-i{
  animation-duration:19s;filter:blur(11px);
  background-image:
    radial-gradient(ellipse 27% 14% at 10% 44%,rgba(10,30,56,.34),transparent 74%),
    radial-gradient(ellipse 22% 11% at 22% 33%,rgba(255,255,255,.20),transparent 74%),
    radial-gradient(ellipse 29% 15% at 37% 52%,rgba(10,30,56,.32),transparent 74%),
    radial-gradient(ellipse 21% 12% at 52% 40%,rgba(226,238,255,.19),transparent 74%),
    radial-gradient(ellipse 28% 14% at 66% 56%,rgba(10,30,56,.33),transparent 74%),
    radial-gradient(ellipse 23% 12% at 80% 38%,rgba(255,255,255,.18),transparent 74%),
    radial-gradient(ellipse 26% 15% at 94% 50%,rgba(10,30,56,.30),transparent 74%);
}
.fog-front{z-index:4;animation-duration:41s;opacity:.9}
.fog-front .fog-i{
  animation-duration:14s;filter:blur(16px);
  background-image:
    radial-gradient(ellipse 32% 13% at 17% 26%,rgba(255,255,255,.16),transparent 76%),
    radial-gradient(ellipse 30% 12% at 40% 62%,rgba(226,238,255,.15),transparent 76%),
    radial-gradient(ellipse 34% 14% at 64% 34%,rgba(255,255,255,.14),transparent 76%),
    radial-gradient(ellipse 29% 13% at 88% 68%,rgba(226,238,255,.13),transparent 76%);
}
.fog-tex{z-index:5;animation-duration:210s;opacity:.5;mix-blend-mode:screen}
.fog-tex .fog-i{animation-duration:31s;background-image:url("../img/bg_001.svg");background-size:25% 100%}

/* ============ 実績の月バッジ（共通パーツ） ============
   裏面（無地の月）から表面（実績）へ回転して現れます。
   --dir:-1 で時計回り（上から見て）、1 にすると逆回りになります。
   画像はすべて同じ台紙サイズで書き出しているので、月の位置がぴったり重なります。 */
.bdg{position:relative;width:var(--bw);perspective:900px}
.bdg-in{
  position:relative;width:100%;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transform:rotateY(calc(var(--dir,-1) * 180deg));
}
.bf{
  display:block;width:100%;opacity:0;aspect-ratio:1080/1277;
  background-size:100% 100%;background-repeat:no-repeat;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.bf-f{position:relative}
.bf-b{position:absolute;left:0;top:0;transform:rotateY(calc(var(--dir,-1) * 180deg));
      background-image:url("../img/img_017.png")}
/* 表面の画像。差し替えはここの url だけ変えればOKです */
.b-17 .bf-f{background-image:url("../img/img_018.png")}      /* 17万部突破 */
.b-ts .bf-f{background-image:url("../img/img_019.png")} /* TSUTAYA BOOKS MARUNOUCHI */
.b-km .bf-f{background-image:url("../img/img_020.png")}    /* くまざわ書店 池袋店 */
.b-yr .bf-f{background-image:url("../img/img_021.png")}    /* 有隣堂 ルミネ横浜店 */
.b-kc .bf-f{background-image:url("../img/img_022.png")}  /* コーチャンフォー 若葉台店 */
.b-kn .bf-f{background-image:url("../img/img_023.png")}    /* 紀伊國屋書店 新宿本店 */
@keyframes bdg-flip{
  0%,25%{transform:rotateY(calc(var(--dir,-1) * 180deg))}
  100%  {transform:rotateY(calc(var(--dir,-1) * 360deg))}
}
/* 表裏の入れ替えは、回転がちょうど90度になる 62.5% の瞬間に行う */
@keyframes bdg-back { 0%{opacity:0} 25%,62.4%{opacity:1} 62.5%,100%{opacity:0} }
@keyframes bdg-front{ 0%,62.4%{opacity:0} 62.5%,100%{opacity:1} }
.bdg.run .bdg-in{animation:bdg-flip 1.2s linear both;animation-delay:var(--d,0s)}
.bdg.run .bf-b  {animation:bdg-back 1.2s linear both;animation-delay:var(--d,0s)}
.bdg.run .bf-f  {animation:bdg-front 1.2s linear both;animation-delay:var(--d,0s)}

/* バナー左の実績バッジ（PCのみ）。--n はバッジの枚数。
   821〜1199px：縦1列
   1200px〜   ：縦4枚で折り返して2列（左に4枚、右に残り）
   --btop で開始位置（上端）、--bov で重なり具合、--bmax で最大サイズ。
   枚数を増減するときは markup の style="--n:6" を書き換えてください。      */
.hero-badges{
  --n:6;
  --rows:var(--n);                  /* ← 1列あたりの枚数 */
  --bov:.055;                       /* ← 上下の詰め具合（大きいほど詰まる） */
  --btop:clamp(38px,5.2svh,70px);   /* ← 上からの開始位置。小さくすると上へ */
  --bmax:clamp(72px,8.2vw,112px);   /* ← 1枚あたりの最大幅 */
  --bw:min(var(--bmax),
           calc((95svh - var(--btop)) / (var(--rows) * 1.0724)));
  position:absolute;left:clamp(10px,2.1vw,36px);top:var(--btop);
  z-index:4;display:none;flex-direction:column;align-items:center;
  gap:0;pointer-events:none;
}
.hero-badges .bdg{margin-block:calc(var(--bw) * -1 * var(--bov))}
@media (min-width:821px){ .hero-badges{display:flex} }
@media (min-width:1200px){
  .hero-badges{
    --rows:4;
    /* 2列ぶんの幅がタイトルに掛からないところで頭打ちにしている */
    --bmax:min(clamp(110px,10.4vw,200px), calc(25vw - 188px));
    display:grid;grid-auto-flow:column;
    grid-template-rows:repeat(var(--rows),auto);
    justify-items:center;align-items:start;
    column-gap:clamp(6px,1vw,16px);row-gap:0;
  }
}
.hero-inner{position:relative;z-index:2;text-align:center;width:100%;max-width:940px}
.hero-title-wrap{margin:0}
.hero-title-img{
  width:min(58vw,600px);margin:0 auto;
  filter:drop-shadow(0 0 26px rgba(255,231,170,.22));
  animation:titleIn 1.4s ease 1.6s both;
}
/* filter をアニメーションさせると Safari で画像が一瞬白い矩形になるため、
   動かすのは opacity と transform だけにして、光彩は固定で持たせている   */
@keyframes titleIn{
  from{opacity:0;transform:translateY(14px) scale(.988)}
  to{opacity:1;transform:none}
}
.hero-author{
  margin:clamp(22px,3vw,34px) 0 0;color:#f4ecd9;
  line-height:1.3;                       /* 名前とローマ字の行間を詰める */
}
.hero-author .ja{display:block;font-size:clamp(15px,1.7vw,21px);letter-spacing:.2em}
.hero-author .en{
  display:block;margin-top:.15em;
  font-family:var(--serif-en);font-size:clamp(11px,1.1vw,14px);letter-spacing:.16em;opacity:.8;
}
.hero-catch{
  margin:clamp(38px,6vw,72px) auto 0;max-width:760px;
  font-family:var(--gothic-ja);font-weight:500;
  color:#fff;font-size:clamp(15px,1.75vw,23px);line-height:2.15;letter-spacing:.07em;
  text-shadow:0 0 26px rgba(4,18,34,.8);
}
.hero-catch span{display:block}
.hero-catch span + span{margin-top:.5em}

/* ============ 2b. リード（読者の声＋メインコピー） ============ */
.lead{
  position:relative;color:#1c3f57;text-align:center;
  background-image:url("../img/img_004.jpg");background-size:cover;background-position:center;
  padding:clamp(40px,4.6vw,64px) clamp(20px,6vw,80px) clamp(56px,6.2vw,86px);
}
.lead .wrap{position:relative;z-index:1;max-width:940px}

/* 読者の声 */
.lead-quote{margin:0}
.lead-quote p{
  margin:0;font-family:var(--serif-ja);font-weight:500;
  font-size:clamp(15px,2.05vw,30px);line-height:1.8;letter-spacing:.03em;
}
.lead-quote .src{
  font-family:var(--serif-ja);font-weight:400;
  font-size:.56em;letter-spacing:.06em;color:#5a7a8a;
  margin-left:.9em;white-space:nowrap;
}

/* メインコピー */
.lead-copy{margin:clamp(22px,2.8vw,38px) 0 0;font-family:var(--serif-ja);font-weight:600}
.lead-copy span{display:block}
.lead-copy .l1{font-size:clamp(19px,2.72vw,40px);letter-spacing:.02em;line-height:1.5}
.lead-copy .l2{
  margin-top:.26em;font-size:clamp(24px,7.9vw,66px);
  letter-spacing:.01em;line-height:1.3;font-weight:800;
}
/* 日本語書体に斜体字形はないので、行ごとにわずかに傾けている */
.lead-quote p > span,
.lead-copy .l1 > span,
.lead-copy .l2 > span{display:block;transform:skewX(-5deg)}

/* ============ 1c. 実績の月（スマホのみ・バナーの下） ============ */
/* PCはバナー左の .hero-badges、スマホはこの帯、と出し分けています */
.seam{
  display:none;position:relative;background:var(--paper);
  padding:clamp(34px,4.2vw,58px) clamp(20px,6vw,80px) clamp(4px,.6vw,10px);
}
/* 上3枚・下2枚。--bgx が左右のすき間、--bov が上下の詰め具合（大きいほど詰まる） */
.seam-moons{
  --bgx:clamp(3px,1.2vw,8px);
  --bov:.09;
  --bw:min(calc((100% - 2 * var(--bgx)) / 3), 160px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  column-gap:var(--bgx);row-gap:0;
}
.seam-moons .bdg{margin-block:calc(var(--bw) * -1 * var(--bov))}
.seam-moons .bf{filter:drop-shadow(0 2px 6px rgba(5,40,60,.16))}

/* ============ 2. News ============ */
.news{position:relative;background:var(--paper);color:var(--navy);padding:clamp(42px,5.2vw,70px) clamp(20px,6vw,80px) clamp(46px,5.8vw,76px)}
.news .wrap{position:relative;z-index:1}
.news-card .thumb i{transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.news-card:hover .thumb i{transform:scale(1.055)}
/* 横スクロールの位置を示す細いバー */
.news-bar{position:relative;height:1px;background:rgba(5,56,78,.14);margin:clamp(26px,3.4vw,40px) auto 0;max-width:420px}
.news-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--navy);transition:left .25s ease,width .25s ease}
.news-row{position:relative}
.news-track{
  display:flex;gap:clamp(18px,3vw,34px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.news-track::-webkit-scrollbar{display:none}
.news-card{flex:0 0 calc(50% - clamp(9px,1.5vw,17px));scroll-snap-align:start;text-decoration:none;color:inherit}
.news-card .thumb{
  display:block;
  border:1px solid var(--navy);
  aspect-ratio:1280/670;      /* noteのサムネイルと同じ比率＝切れない */
  overflow:hidden;background:#eef3f6;
}
.news-card .thumb i{
  display:block;width:100%;height:100%;
  background-size:cover;background-position:center;
}
/* 記事ごとのサムネイル。本番は <img src="記事のog:image"> に置き換えてください */
/* サムネイル（noteのog:imageをそのまま埋め込み） */
.th-170k {background-image:url("../img/img_005.jpg")}
.th-150k {background-image:url("../img/img_006.jpg")}
.th-shiori{background-image:url("../img/img_007.jpg")}
.th-100k {background-image:url("../img/img_008.jpg")}
.th-kanko{background-image:url("../img/img_009.jpg")}
.news-card time{
  display:block;margin-top:1.05em;
  font-family:var(--gothic-ja);font-weight:700;
  font-size:clamp(12px,1.05vw,14px);letter-spacing:.06em;
}
.news-card p{
  margin:.5em 0 0;font-family:var(--gothic-ja);font-weight:500;
  font-size:clamp(12px,1.05vw,14px);letter-spacing:.04em;line-height:1.8;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.chev-btn{
  position:absolute;top:34%;transform:translateY(-50%);
  width:52px;height:52px;border:none;background:transparent;color:var(--navy);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .2s,opacity .2s;
}
.chev-btn:hover{transform:translateY(-50%) scale(1.1)}
.chev-btn.next{right:calc(-1 * clamp(16px,3vw,56px))}
.chev-btn.prev{left:calc(-1 * clamp(16px,3vw,56px));transform:translateY(-50%) rotate(180deg)}
.chev-btn.prev:hover{transform:translateY(-50%) rotate(180deg) scale(1.1)}
.chev-btn[disabled]{opacity:.22;cursor:default}

/* ============ 2b. 引用（イラスト＋縦書き） ============ */
.quote{
  display:grid;
  grid-template-columns:48% 52%;
  /* 左半分(48%)にイラストが切れずに収まる高さ ＝ 48vw ÷ 0.75 */
  height:clamp(460px,64vw,940px);
  background:var(--navy);
}
.quote-art{position:relative;margin:0;height:100%;overflow:hidden}
.quote-art img{width:100%;height:100%;object-fit:cover;object-position:center 45%}  /* 幅の広い画面でわずかに切れる場合の基準位置 */
/* イラストの右端を紺へなじませる */
.quote-art::after{
  content:"";position:absolute;inset:0 0 0 auto;width:34%;
  background:linear-gradient(90deg,rgba(5,56,78,0) 0%,rgba(5,56,78,.55) 55%,var(--navy) 100%);
  pointer-events:none;
}
.quote-panel{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,4vw,64px) clamp(20px,3.4vw,54px);
}
/* 縦書き。--sp が1文字あたりの速さ */
.quote-text{
  --sp:58ms;
  --lh:2.2;          /* 縦書きの行間＝1列ぶんの幅 */
  margin:0;
  display:flex;flex-direction:row-reverse;align-items:flex-start;
  font-family:var(--serif-ja);
  color:#fff;
  font-size:clamp(16px,1.95vw,26px);
  letter-spacing:.1em;
}
/* 1列ぶんの幅を明示する。縦書きの子から幅を推測させると、
   ブラウザによっては幅0になって列同士が重なってしまうため                */
.qcol{position:relative;flex:0 0 auto;width:calc(var(--lh) * 1em)}
.qgap{width:2.2em}   /* 空けたい列 */
.qtx{
  display:block;width:100%;
  writing-mode:vertical-rl;
  line-height:var(--lh);
}
/* JSが入ったときだけ隠す（JSが動かない環境では普通に表示される） */
.quote-text.armed .qtx{
  clip-path:inset(0 0 100% 0);
  transition:clip-path calc(var(--n,10) * var(--sp)) steps(var(--n,10));
}
.quote-text.armed .qcol.on .qtx{clip-path:inset(0 0 0 0)}
.qcaret{
  position:absolute;left:50%;top:0;margin-left:-.5em;
  width:1em;height:2px;background:rgba(255,255,255,.9);
  opacity:0;
  transition:transform calc(var(--n,10) * var(--sp)) steps(var(--n,10));
}
.qcol.typing .qcaret{opacity:1;animation:qblink .9s step-end infinite}
.qcol.on .qcaret{transform:translateY(var(--h,0px))}
@keyframes qblink{0%,100%{opacity:1}50%{opacity:0}}

/* ============ 3. Introduction（木目） ============ */
.intro{
  position:relative;color:#fff;
  padding:clamp(44px,5.4vw,74px) clamp(20px,6vw,80px) clamp(50px,6.2vw,84px);
  background-image:url("../img/img_010.jpg");
  background-size:cover;
  background-position:center;
}
.intro::after{  /* 上下を締める陰 */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 22px 40px -22px rgba(20,10,4,.6),inset 0 -22px 40px -22px rgba(20,10,4,.6);
}
.intro::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,13,6,.34),rgba(26,13,6,.14) 42%,rgba(26,13,6,.42));
}
.intro > .wrap{position:relative;z-index:2}
.intro .sec-head{color:#fff;text-shadow:0 2px 14px rgba(20,10,4,.5)}

/* ---- 見出し左右の線画イラスト（PC・スマホ共通） ---- */
.intro-head{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(2px,2.2vw,40px);
  margin-bottom:clamp(28px,4vw,54px);
}
.intro-head .sec-head{margin-bottom:0;flex:0 0 auto}
.ill{
  flex:0 0 auto;height:auto;
  width:clamp(118px,24vw,336px);
  opacity:0;                    /* .run が付くまで隠す */
  filter:drop-shadow(0 2px 8px rgba(20,10,4,.45));
}
/* 出現：ふわっと現れながら、内側から少し外へ流れる（出たあとは静止） */
@keyframes ill-in-l{
  0%{opacity:0;transform:translate(16px,10px) scale(.94)}
  100%{opacity:.92;transform:translate(0,0) scale(1)}
}
@keyframes ill-in-r{
  0%{opacity:0;transform:translate(-16px,10px) scale(.94)}
  100%{opacity:.92;transform:translate(0,0) scale(1)}
}
.ill.run{animation:ill-in-l 1.5s cubic-bezier(.390,.575,.565,1.000) both}
.ill-r.run{animation:ill-in-r 1.5s cubic-bezier(.390,.575,.565,1.000) .18s both}
.intro-text{
  max-width:900px;margin:0 auto;text-align:left;
  font-family:var(--gothic-ja);font-weight:500;
  font-size:clamp(15.5px,1.4vw,19px);line-height:2.1;letter-spacing:.03em;
  text-shadow:0 2px 10px rgba(20,10,4,.55);
}
.intro-text p{margin:0 0 1.9em}
.intro-text p:last-child{margin-bottom:0}
.polaroids{
  /* .wrap（最大1080px）より広く見せたいので、中央基準で外へ張り出させる */
  margin:clamp(40px,5.5vw,70px) 0 0;
  width:min(124%,94vw);
  margin-left:50%;
  transform:translateX(-50%);
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(8px,1.8vw,30px);
}
/* チェキ：タップで裏返る */
.pol{
  flex:0 0 29%;
  border:none;padding:0;background:none;
  cursor:pointer;
  perspective:1200px;
  -webkit-tap-highlight-color:transparent;
  transition:filter .3s ease;
}
.pol:nth-child(1){transform:rotate(-7deg) translateY(12px)}
.pol:nth-child(2){transform:rotate(1.5deg);z-index:2}
.pol:nth-child(3){transform:rotate(5deg) translateY(16px)}
.pol:hover{filter:brightness(1.04)}
.pol-in{
  display:block;
  position:relative;
  aspect-ratio:494/574;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.85,.3,1);
  /* ここに filter を置くと 3D が平面化して裏面が出なくなるので、影は各面に持たせる */
}
.pol.is-flipped .pol-in{transform:rotateY(180deg)}
.pol-face{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 18px 30px rgba(16,7,2,.5);
}
.pol-front{display:block}
.pol-front img{width:100%;height:100%;object-fit:cover}
.pol-back{
  transform:rotateY(180deg);
  background:#f3efe4;color:var(--navy);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,2.2vw,34px);
  text-align:left;
  box-shadow:inset 0 0 0 1px rgba(5,56,78,.12);
}
.pol-back h3{
  margin:0 0 1em;
  font-family:var(--serif-ja);font-weight:500;
  font-size:clamp(13px,1.25vw,17px);letter-spacing:.06em;line-height:1.7;
}
.pol-back h3::after{
  content:"";display:block;width:34px;height:1px;margin-top:.9em;
  background:rgba(5,56,78,.4);
}
.pol-back p{
  margin:0;
  font-family:var(--gothic-ja);font-weight:500;
  font-size:clamp(11px,1.02vw,13.5px);line-height:2;letter-spacing:.02em;
  color:#2b4d5e;
}
.pol-back .back-hint{
  margin-top:1.4em;font-size:10px;letter-spacing:.16em;color:#8fa3ad;
  font-family:var(--gothic-ja);
}
.pol-note{
  margin:clamp(22px,3vw,36px) 0 0;text-align:center;
  font-family:var(--gothic-ja);
  font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.72);
  text-shadow:0 2px 8px rgba(20,10,4,.6);
}

/* ============ 3b. Preview（冒頭試し読み） ============
   ・右から左へスワイプ／ドラッグすると次のページ
   ・最終ページの次に「続きを読む」カード（LINE／Amazon）
   ・ページ画像は ../img/img_019.webp〜../img/img_020.webp。増減するときは .pv-page を足し引きすれば
     ページ数の表示とバーは自動で追従します                                   */
.pv{
  position:relative;background:var(--paper);color:var(--navy);
  padding:clamp(40px,4.8vw,66px) clamp(12px,4vw,60px) clamp(34px,4.2vw,56px);
}
.pv .wrap{position:relative;z-index:1;max-width:1180px}
.pv .sec-head{margin-bottom:clamp(20px,2.6vw,34px)}
.pv-reader{
  --pw:min(30vw, calc(72svh * .6909), 420px);
  position:relative;
}
.pv-track{
  /* 右綴じの本と同じで、1ページ目が右端。左から右へスワイプすると次のページ */
  display:flex;flex-direction:row-reverse;align-items:center;gap:clamp(10px,1.6vw,26px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:clamp(6px,1vw,14px);
  padding-inline:calc((100% - var(--pw)) / 2);
  cursor:grab;
}
.pv-track.drag{cursor:grabbing;scroll-snap-type:none}
.pv-track::-webkit-scrollbar{display:none}
.pv-page{
  flex:0 0 var(--pw);margin:0;scroll-snap-align:center;
  aspect-ratio:760/1100;position:relative;border-radius:3px;overflow:hidden;
  background:#fff;box-shadow:0 10px 26px rgba(5,56,78,.16),0 1px 3px rgba(5,56,78,.14);
  opacity:.34;transform:scale(.955);
  transition:opacity .3s ease,transform .3s ease;
}
.pv-page.on{opacity:1;transform:scale(1)}
.pv-page img{
  width:100%;height:100%;object-fit:cover;display:block;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
/* 最後の「続きを読む」カード */
.pv-end{
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(20px,2.4vw,34px) clamp(14px,1.8vw,26px);
  box-shadow:0 10px 26px rgba(5,56,78,.26);
}
.pv-end-lead{
  margin:0;font-family:var(--serif-ja);font-weight:600;
  font-size:clamp(19px,2.1vw,29px);letter-spacing:.06em;line-height:1.7;
}
.pv-end-sub{
  margin:.7em 0 0;font-family:var(--gothic-ja);font-weight:400;
  font-size:clamp(11px,1.02vw,13.5px);letter-spacing:.05em;line-height:1.9;
  color:rgba(255,255,255,.72);
}
.pv-end-btns{
  display:flex;flex-direction:column;gap:clamp(9px,1.1vw,14px);
  width:100%;max-width:280px;
}
.pv-btn{
  display:block;padding:.92em 1em;border-radius:999px;text-decoration:none;
  font-family:var(--gothic-ja);font-weight:700;
  font-size:clamp(12px,1.05vw,14.5px);letter-spacing:.06em;line-height:1.3;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.pv-btn:hover{transform:translateY(-2px)}
.pv-btn.line{background:#06C755;color:#fff;box-shadow:0 4px 14px rgba(6,199,85,.35)}
.pv-btn.line:hover{background:#05b34c}
.pv-btn.amz{background:var(--cream);color:var(--navy)}
.pv-btn.amz:hover{background:#fff}
/* 前へ／次へ */
.pv-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid rgba(5,56,78,.18);
  color:var(--navy);box-shadow:0 3px 12px rgba(5,56,78,.14);
  transition:background .2s,opacity .2s,transform .2s;
}
.pv-nav:hover{background:#fff}
.pv-nav:disabled{opacity:.2;cursor:default}
/* 右綴じなので「次へ」が左、「前へ」が右 */
.pv-nav.next{left:clamp(2px,1vw,14px)}
.pv-nav.prev{right:clamp(2px,1vw,14px)}
.pv-nav svg{width:26px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pv-nav.next svg{transform:scaleX(-1)}
/* ページ数とバー（Newsのバーと同じ作り） */
.pv-bar{position:relative;height:1px;background:rgba(5,56,78,.14);margin:clamp(20px,2.4vw,32px) auto 0;max-width:420px}
/* 右綴じに合わせて、バーも右から左へ進みます */
.pv-bar i{position:absolute;right:0;top:-1px;height:3px;background:var(--navy);transition:right .25s ease,width .25s ease}
.pv-hint{
  margin:clamp(12px,1.4vw,18px) 0 0;text-align:center;
  font-family:var(--gothic-ja);font-weight:400;
  font-size:clamp(10.5px,.92vw,12.5px);letter-spacing:.1em;color:var(--ink-soft);
  transition:opacity .4s ease;
}
.pv-hint.hide{opacity:0}

/* ============ 4. Story ============ */
.story{position:relative;background:var(--navy);color:#fff;
  padding:clamp(40px,4.6vw,62px) clamp(20px,6vw,80px) clamp(46px,5.2vw,70px)}
.story .sec-head{margin-bottom:clamp(18px,2.4vw,32px)}
.story-frame{position:relative;z-index:1}
/* あらすじの下に、小さな月の満ち欠け */
/* ページ送りのバー（Newsのバーと同じ作り。紺背景なので色だけ反転） */
/* 四隅の装飾（.corner）と重ならないよう、幅を内側に収めている */
.rv-bar{position:relative;height:1px;background:rgba(230,206,154,.22);
  margin:clamp(20px,2.6vw,32px) auto 0;width:min(420px,58%)}
.rv-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--gold);
  transition:left .25s ease,width .25s ease}
.story-frame{position:relative;max-width:1240px;margin:0 auto;padding:clamp(34px,4.4vw,62px) clamp(24px,6vw,110px)}
.corner{position:absolute;width:clamp(96px,15vw,190px);height:auto;pointer-events:none}
.corner.tl{top:0;left:0}
.corner.br{bottom:0;right:0;transform:rotate(180deg)}
/* ---- Review：1枚1人のカードを横スライド ---- */
/* PCは3枚ぴったり並ぶ幅（--cw）。左右の矢印は .rv の padding のなかに置く。
   前後にクローンがあるので、いつでも「真ん中のカードを中央に寄せる」で成立する */
.rv{
  position:relative;max-width:1080px;margin:0 auto;
  --gap:clamp(14px,2vw,26px);
  --cw:calc((100% - 2 * var(--gap)) / 3);
  padding-inline:clamp(48px,4.4vw,62px);
}
.rv-track{
  list-style:none;margin:0;padding:0;
  display:flex;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-block:8px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{
  flex:0 0 var(--cw);scroll-snap-align:center;
  position:relative;display:block;
  --R:clamp(16px,1.9vw,26px);        /* 角丸の半径 */
  aspect-ratio:1080/1350;
  padding:0;
  color:var(--navy);
  background-color:#FCFAF4;          /* わずかに黄みのある紙 */
  background-image:url("../img/bg_001.svg"); /* オイルパステルの紙目 */
  background-size:520px;
  border-radius:var(--R);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);
}
/* 右下のイラスト（傘とテーブルを1枚ずつ交互に） */
.rv-obj{
  position:absolute;right:5%;bottom:5%;pointer-events:none;
  height:auto;
}
.rv-obj.kasa{width:17%}
.rv-obj.table{width:34%}
/* 上の月・下の雲を避けて、あいた帯のなかに文字を置く（%paddingだと
   aspect-ratio と循環してカード幅が狂うので、絶対配置にしている） */
.rv-in{
  position:absolute;left:9%;right:9%;top:9%;bottom:29%;
  display:flex;flex-direction:column;justify-content:center;
}
.rv-card p{
  margin:0;text-align:center;
  font-family:var(--gothic-ja);font-weight:700;
  font-size:clamp(13px,1.18vw,16.5px);line-height:1.85;letter-spacing:.02em;
}
/* 年齢は改行せず、本文の最後にそのまま続ける */
.rv-card cite{
  font-style:normal;font-weight:500;white-space:nowrap;   /* （79歳）が途中で折れないように */
  font-size:.88em;letter-spacing:.02em;color:var(--ink-soft);
}
/* 前へ／次へ */
.rv-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(230,206,154,.45);
  color:var(--gold);
  transition:background .2s,opacity .2s,transform .2s;
}
.rv-nav:hover{background:rgba(230,206,154,.2)}
.rv-nav:disabled{opacity:.25;cursor:default}
.rv-nav.prev{left:2px}
.rv-nav.next{right:2px;left:auto}
.rv-nav svg{width:26px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rv-nav.prev svg{transform:scaleX(-1)}
.story-text{
  max-width:660px;margin:0 auto;
  font-family:var(--gothic-ja);font-weight:500;
  font-size:clamp(13px,1.15vw,15.5px);line-height:2.3;letter-spacing:.03em;
}

/* ============ 6. Writer ============ */
.writer{position:relative;background:var(--cream);color:var(--navy);
  padding:clamp(32px,3.8vw,52px) clamp(20px,6vw,80px) clamp(36px,4.2vw,58px)}
/* 見出しと写真の間を詰める（写真が上に上がる） */
.writer .sec-head{margin-bottom:clamp(18px,2.2vw,30px)}
.writer-grid{position:relative;z-index:1}
.writer-grid{
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
  gap:clamp(28px,5vw,70px);align-items:center;max-width:1080px;margin:0 auto;
}
.writer-photo{position:relative;margin:0;z-index:0}
.writer-photo::after{  /* 写真の後ろにずらした枠 */
  content:"";position:absolute;left:18px;top:18px;right:-18px;bottom:-18px;
  border:1px solid rgba(5,56,78,.3);z-index:-1;
}
.writer-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.writer-photo::before{content:"";position:absolute;inset:11px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.writer-photo figcaption{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-size:9.5px;letter-spacing:.22em;color:rgba(255,255,255,.75);
}
.writer-name{
  text-align:center;margin:0;
  font-size:clamp(28px,4vw,48px);font-weight:500;letter-spacing:.12em;line-height:1.2;
}
.writer-kana{text-align:center;margin:.35em 0 0;font-size:clamp(11px,1.1vw,14px);letter-spacing:.3em;color:#3d5f70}
.writer-bio{
  /* 「1992年、東京都生まれ。早稲田大学国際教養学部卒。」＝26文字ぶんの幅で折り返す */
  max-width:25.1em;   /* 「1992年、東京都生まれ。早稲田大学国際教養学部卒。」でちょうど折り返る幅 */
  margin:clamp(18px,2.4vw,32px) auto 0;
  text-align:left;
  font-family:var(--gothic-ja);font-weight:700;
  font-size:clamp(14px,1.35vw,18px);line-height:2.05;letter-spacing:.02em;color:#274a5b;
}

/* 著者SNS：正円のアイコンボタン */
.sns{
  /* プロフィール文と同じ幅の箱に入れて、左端をそろえる */
  max-width:25.1em;margin:clamp(18px,2.2vw,28px) auto 0;
  display:flex;gap:clamp(10px,1.1vw,14px);justify-content:center;
}
.sns a{
  width:clamp(38px,3.4vw,46px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--navy);color:var(--cream);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.sns a:hover{transform:translateY(-3px);background:var(--navy-l);box-shadow:0 8px 16px rgba(5,40,56,.3)}
.sns svg{width:48%;height:48%;display:block;fill:currentColor}
/* 各ロゴで字面の大きさが違うので、見た目がそろうよう個別に倍率をかけている */
.sns .i-x    svg{transform:scale(.94)}
.sns .i-ig   svg{transform:scale(1.08)}
.sns .i-note svg{transform:scale(1.0)}
.sns .i-yt   svg{transform:scale(1.02)}

/* ============ 7. Book ============ */
.book{position:relative;background:var(--navy);color:#fff;
  padding:clamp(34px,2.9vw,40px) clamp(20px,6vw,80px) clamp(40px,3.2vw,44px)}
/* 見出しと書影・タイトルの間を詰める */
.book .sec-head{margin-bottom:clamp(14px,1.2vw,16px)}
.book .wrap{position:relative;z-index:1}
.book-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(16px,2.6vw,38px);align-items:center;max-width:1080px;margin:0 auto;
}
/* 「月がきれいな夜に、」／「誰かに思い出してほしかった」でそれぞれ1行になる大きさ */
.book-title{text-align:center;font-weight:600;font-size:clamp(15px,1.55vw,20px);line-height:1.75;letter-spacing:.07em;margin:0}
.book-title span{display:block;white-space:nowrap}
.book-by{text-align:center;margin:1.1em 0 0;font-weight:600;font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;opacity:.9}
.book-cover{position:relative;margin:0;z-index:0}
.book-cover::before{  /* 書影の背後の月あかり */
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:165%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,236,190,.17) 0%,rgba(255,236,190,.05) 40%,transparent 66%);
  animation:moonBreath 7.5s ease-in-out infinite;
}
@keyframes moonBreath{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
}
.book-cover img{width:100%;filter:drop-shadow(0 22px 40px rgba(0,0,0,.5)) drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.book-btns{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px)}
/* 購入ボタン（遷移先は未定のためダミー） */
.btn{
  display:grid;place-items:center;min-height:52px;
  border-radius:999px;                 /* 左右が丸いピル型 */
  background:var(--cream);color:var(--navy);
  border:1px solid rgba(255,255,255,.35);
  font-family:var(--gothic-ja);font-weight:700;
  font-size:clamp(12.5px,1.02vw,14px);letter-spacing:.06em;line-height:1.4;
  text-align:center;padding:8px 16px;text-decoration:none;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-2px);background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.28)}
/* LINE導線。試し読みセクションのボタンと同じ緑 */
.btn.line{background:#06C755;color:#fff;border-color:rgba(255,255,255,.28)}
.btn.line:hover{background:#05b34c;box-shadow:0 10px 22px rgba(6,199,85,.4)}

footer{
  position:relative;
  background:var(--paper);color:var(--ink-soft);
  text-align:center;padding:clamp(26px,3vw,38px) 6vw clamp(24px,2.6vw,34px);
  font-family:var(--gothic-ja);
}
.ft-links{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(12px,1.4vw,20px);margin:0 0 clamp(14px,1.6vw,20px);
}
.ft-links a{
  color:var(--navy);text-decoration:none;
  font-size:clamp(11.5px,1vw,13px);font-weight:500;letter-spacing:.08em;
  padding-bottom:2px;border-bottom:1px solid rgba(5,56,78,.28);
  transition:color .2s,border-color .2s;
}
.ft-links a:hover{color:var(--navy-l);border-color:var(--navy-l)}
.ft-links i{width:1px;height:12px;background:rgba(5,56,78,.22);display:block}
.ft-copy{margin:0;font-size:clamp(10.5px,.9vw,12px);letter-spacing:.08em;color:#6b8492}

/* ============ スマホ ============ */
@media (max-width:820px){
  .only-sp{display:inline}
  body{font-size:15px}

  /* スマホは縦長のバナー（6:5）。背景もスマホ用の画像に差し替え、
     文字は読みやすさ優先で大きめ（vw と px の clamp で下限を確保）    */
  .hero{
    aspect-ratio:6/5;
    height:auto;min-height:0;
    /* 上を大きく空けて、タイトルが月の中心より下から始まるようにする */
    padding:15% 3.5vw 5%;
    background:#021A28;
  }
  .sky{background-image:url("../img/img_011.jpg")}
  .sky::after{display:none}
  .hero-inner{max-width:none}
  .hero-title-img{width:58vw}
  .hero-author{margin-top:3vw}
  .hero-author .ja{font-size:clamp(11px,3.1vw,16px);letter-spacing:.18em}
  .hero-author .en{font-size:clamp(7.5px,1.8vw,10px);margin-top:.25em;letter-spacing:.14em}
  .hero-catch{
    /* PC版と同じ2行に収めるため、幅に合わせてサイズを決める */
    margin-top:4.5vw;font-size:clamp(10.5px,3vw,15px);line-height:1.5;letter-spacing:.03em;
  }
  .hero-catch span + span{margin-top:.3em}
  .fog{width:400%}
  .sec-head{padding-bottom:32px}

  .lead{padding:36px 10px 50px}
  .lead-quote p{line-height:1.72}
  /* 「＿読者の感想より」は改行して右寄せ */
  .lead-quote .src{display:block;text-align:right;margin:.2em 1.1em 0 0}
  .lead-copy .l1{line-height:1.32}
  .lead-copy .l2{font-size:clamp(22px,7vw,40px);margin-top:.02em}

  .pv{padding:34px 8px 30px}
  .pv-reader{--pw:min(88vw, calc(70svh * .6909))}
  .pv-track{gap:10px}
  .pv-nav{width:38px;height:38px}
  .pv-nav svg{width:20px;height:10px}
  .pv-end-btns{max-width:260px}

  .seam{display:block;padding:28px 14px 6px}
  /* 横2個ずつ折り返す（4個なら2・2、3個なら2・1） */
  .seam{padding:26px 12px 24px}

  /* 月バッジの帯と地続きに見せるため、上の余白は詰めている */
  .news{padding:10px 20px 42px}
  .news-track{gap:14px}
  .news-card{flex:0 0 84%}
  .chev-btn{top:30%;width:44px;height:44px;background:rgba(255,255,255,.86);border-radius:50%}
  .chev-btn.next{right:-6px}
  .chev-btn.prev{left:-6px}
  .chev{width:30px;height:15px}

  .quote{grid-template-columns:1fr;height:auto}
  .quote-panel{order:1;padding:46px 18px 44px;min-height:390px}
  .quote-art{order:2}
  .quote-art img{aspect-ratio:1/1;height:auto;object-position:center 0%}
  .quote-art::after{
    inset:0 0 auto 0;width:auto;height:22%;
    background:linear-gradient(180deg,var(--navy) 0%,rgba(5,56,78,.38) 45%,rgba(5,56,78,0) 100%);
  }
  .quote-text{font-size:clamp(14px,4.3vw,16px);letter-spacing:.08em;--lh:2.1}
  .qgap{width:1.6em}

  .intro{padding:40px 20px 46px}
  /* 1行が「「プロポーズするなら元カノがいい」と」で折り返る幅 */
  .intro-text{max-width:18.6em}
  /* 見出し行だけ左右のpaddingを打ち消して、イラストを画面いっぱいに使う */
  /* 見出し行だけ左右のpaddingを打ち消して、イラストを画面いっぱいに使う。
     見出し下の飾り（罫＋ひし形）とイラストが重ならないよう、
     見出しの箱に左右の余白を持たせ＋飾りを短くし、イラストは縮小可にしている */
  .intro-head{margin-left:-18px;margin-right:-18px;gap:2px}
  .intro-head .sec-head{padding-left:12px;padding-right:12px;padding-bottom:32px}
  .intro-head .sec-head::after{width:74px;background-size:26px 1px,26px 1px}
  .ill{width:33vw;flex-shrink:1;min-width:0}
  .polaroids{
    margin-top:30px;width:100%;margin-left:0;transform:none;
    flex-direction:column;align-items:center;gap:26px;
  }
  .pol{flex:0 0 auto;width:min(76%,310px)}
  .pol:nth-child(2),.pol:nth-child(3){margin-left:0}
  .pol:nth-child(1){transform:rotate(-4deg)}
  .pol:nth-child(2){transform:rotate(2.5deg)}
  .pol:nth-child(3){transform:rotate(-2deg)}
  .pol-back p{font-size:12px;line-height:1.95}

  .story{padding:34px 20px 40px}
  .story .sec-head{margin-bottom:16px}
  .story-frame{padding:30px 12px 46px}
  .corner{width:62px}
  .rv-bar{width:min(420px,56%)}
  /* スマホは1枚表示。左右のカードがわずかに見切れる */
  .rv{--gap:10px;--cw:86%;padding-inline:0}
  .rv-card{aspect-ratio:1080/1350;--R:18px}
  .rv-in{left:9%;right:9%;top:9%;bottom:29%}
  .rv-card p{font-size:15px}
  .rv-card:not(.on){opacity:.14}
  .rv-nav{width:38px;height:38px}
  .rv-nav svg{width:20px;height:10px}
  .rv-nav.prev{left:-8px}
  .rv-nav.next{left:auto;right:-8px}

  .writer{padding:30px 20px 34px}
  .writer .sec-head{margin-bottom:16px}
  .writer-grid{grid-template-columns:1fr;gap:24px}
  .writer-photo{width:min(62%,238px);margin:0 auto}
  /* 写真の後ろのずらし枠を小さくして、名前と重ならないようにする */
  .writer-photo::after{left:12px;top:12px;right:-12px;bottom:-12px}
  .writer-name{font-size:26px}
  .writer-bio{margin-top:14px;line-height:1.95}
  /* スマホは中央そろえ */
  .sns{margin-top:18px}
  /* 折り返したときに区切り線が行末に残るので、スマホでは線を消して間隔で分ける */
  .ft-links{gap:10px 20px}
  .ft-links i{display:none}

  .book{padding:22px 20px 28px}
  .book .sec-head{margin-bottom:10px}
  .book-grid{grid-template-columns:1fr;gap:10px}
  .book-cover{order:-1;width:min(62%,250px);margin:0 auto}
  .book-title{font-size:17px;line-height:1.7}
  .book-btns{max-width:320px;margin:0 auto;width:100%}
  .btn{min-height:46px}
}

/* iPhone SE(1st)など幅の狭い端末でも、コピーがPC版と同じ2行で収まるように */
@media (max-width:359px){
  .hero-catch{font-size:9.8px;letter-spacing:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #loader{display:none}
  .fx,.fi{opacity:1}
  .bdg-in{transform:none}
  .bf-f{opacity:1}
  .bf-b{display:none}
  .ill{opacity:.92;transform:none}
  .quote-text.armed .qtx{clip-path:none}
  .qcaret{display:none}
  .hero-title-img{opacity:1}
}