@charset "UTF-8";

/* ============================================================
   エステティック通信 定期購読LP（page-subscription2.php 専用）
   ------------------------------------------------------------
   2026-08-16: Figmaデザイン（frame「記事-pc」node 332:5477、幅1440）より実装。
   デザインの色は既存サイトのトークンと共通（--text / --main-color / --text-light）。
   このLP固有の色・寸法だけ下記に定義する。

   ベージュ地   #f7f4ef   セクション交互の背景（波形SVGと同色）
   LINE緑       #06c755   CTAボタン
   注記グレー   #737373   ボタン下の補足テキスト

   ルート font-size は 62.5%（1rem = 10px）。Figmaのpx値をそのまま1/10でremに変換している。
   このファイルは対象ページでしか読み込まれないため、セレクタは短めでも安全。
   ============================================================ */

.subscription-page {
  --sub-beige: #f7f4ef;
  --sub-line: #06c755;
  --sub-note: #737373;
  overflow: hidden;
}

/* ------------------------------------------------------------
   共通パーツ
   ------------------------------------------------------------ */

/* セクションの境目に敷く波形。幅100%・高さautoで縦横比を保つため、画面が広いほどアーチも大きくなる。
   色違い（ベージュ／白）を、次に来るセクションの背景色に合わせて使い分ける。
   2026-08-16: 画面幅ごとに縦横比の違う3種類を<picture>のmedia属性で出し分けている。
     〜48em    _mob 版（852x101 ≒ 8:1）  細い画面でも波の形が分かるようカーブがきつい
     48em〜90em 通常版（1938x102 ≒ 19:1） デザインの基準。1440pxで75px
     90em〜    _full 版（1938x38 ≒ 51:1） 広い画面でアーチが大きくなりすぎないよう緩いカーブ
   切り替わる幅では高さが不連続に変わる（1440pxで75px→28px）。
   閲覧者は自分の画面幅で固定のため実害は無いが、ウィンドウ幅を動かすと段差として見える。 */
.sub-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  pointer-events: none;
}

.sub-wave img {
  display: block;
  width: 100%;
  height: auto;
}

/* LINEのCTAボタン。既存の .btn-line と色は同じだが、LP用にサイズが大きいので別クラスにしている。 */
.sub-btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 30.5rem;
  max-width: 100%;
  padding: 1.3rem 3.4rem 1.3rem 3rem;
  border-radius: 10rem;
  background: var(--sub-line);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.026em;
  white-space: nowrap;
}

.sub-btn-line:hover {
  filter: saturate(1.2);
}

.sub-btn-line__icon {
  width: 2.73rem;
  height: 2.6rem;
  flex-shrink: 0;
}

/* 画面下部に追従するCTA。スマホ幅でのみ表示する（下のメディアクエリで解除）。 */
.sub-fixed-cta {
  display: none;
}

/* ------------------------------------------------------------
   ヒーロー（Figma y:0〜762）
   ------------------------------------------------------------ */

.sub-hero {
  position: relative;
  padding: 14.0rem 0 18.5rem;
  background: #fff;
}

/* 左側に敷く抽象的な背景テクスチャ（Figma node 333:1679）。
   不透明度60%＋右へ向かって白にフェードさせる指定をそのまま再現している。 */
/* Figmaでは上から111pxの位置から始まっているが、そのまま実装すると
   テクスチャの上辺が横線として見えてしまうため、上端まで伸ばしている（下端の位置はデザイン通り）。 */
.sub-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 52.4rem;
  height: 76.1rem;
  opacity: 0.6;
  background: url("../images/subscription/hero-bg.png") no-repeat center center / cover;
  pointer-events: none;
}

.sub-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 82.2%);
}

/* デザイン上、表紙の左端(271px)からバッジの右端(1171.8px)までが1440pxの中央に来ている。
   その約900pxを内側の基準幅として、その中で各要素を配置する。 */
.sub-hero__inner {
  position: relative;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: flex-start;
  gap: 5.6rem;
}

.sub-hero__cover {
  width: 29.8rem;
  flex-shrink: 0;
}

.sub-hero__cover img {
  width: 100%;
  height: auto;
}

/* 表紙(y:188)より本文(y:249)が61px下から始まる */
.sub-hero__body {
  margin-top: 6.1rem;
}

/* 見出しの上に置く「エステサロン経営者は完全無料」の帯。
   背景のクリーム色はスクリーンショットからの目測なので、正確な指定があれば差し替えること。 */
.free-tag {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.4rem 1rem;
  background: #fdf4e3;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.free-tag strong {
  color: #d51b57;
}

.sub-hero__title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.sub-hero__title span {
  color: var(--main-color);
}

.sub-hero__lead {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--text);
}

.sub-hero__action {
  margin-top: 4rem;
}

.sub-hero__note {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--sub-note);
}

/* ------------------------------------------------------------
   読むだけで、経営のヒントが増える（Figma y:762〜1303）
   ------------------------------------------------------------ */

.sub-hint {
  position: relative;
  padding: 8rem 0 18.5rem;
  background: var(--sub-beige);
}

.sub-hint__heading {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
}

/* デザインでは240px幅の3カラムが46px間隔で並び、全体(812px)が中央に来ている */
.sub-hint__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.6rem;
  max-width: 81.2rem;
  margin: 5.6rem auto 0;
  padding: 0 2rem;
}

.sub-hint__item {
  text-align: center;
}

/* 円の背景（グラデーション）ごと書き出された画像を使っている */
.sub-hint__icon {
  width: 11.6rem;
  height: 11.6rem;
  margin: 0 auto;
}

.sub-hint__name {
  margin-top: 2.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

/* 文字の下半分にだけ黄色いマーカーを敷く。文字数に応じて幅が変わるようinline要素に掛けている。 */
.sub-hint__name span {
  background: linear-gradient(transparent 48%, #ffec82 48%);
}

.sub-hint__text {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--text);
}

/* ------------------------------------------------------------
   2004年創刊の専門誌（Figma y:1303〜2001）
   ------------------------------------------------------------ */

/* 下側の余白はCTA帯側のmarginが担当するため、ここでは付けない */
.sub-magazine {
  padding: 8rem 0 0;
  background: #fff;
  text-align: center;
}

.sub-magazine__heading {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

/* 両端が切り込まれたリボン形状はSVGを背景に敷き、その上に文字を中央寄せしている */
.sub-magazine__ribbon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13.8rem;
  height: 3rem;
  margin-top: 1.2rem;
  background: url("../images/subscription/ribbon.svg") no-repeat center center / contain;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 247px幅の表紙3枚を58px間隔で並べた857pxが中央に来る。
   max-widthに左右paddingの40pxを足しているのは、box-sizing:border-boxで内側が857pxになるようにするため。 */
.sub-magazine__covers {
  display: flex;
  justify-content: center;
  gap: 5.8rem;
  max-width: 89.7rem;
  margin: 3rem auto 0;
  padding: 0 2rem;
}

.sub-magazine__covers li {
  flex: 1 1 0;
  max-width: 24.7rem;
}

.sub-magazine__covers img {
  width: 100%;
  height: auto;
}

.sub-magazine__note {
  margin-top: 4.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.sub-magazine__note span {
  color: var(--main-color);
}

/* ------------------------------------------------------------
   CTA帯（Figma y:1996〜2250 と y:3394〜3648 の2箇所、共通パーツ）
   template-parts/subscription-cta.php
   ------------------------------------------------------------ */

/* 上下の余白は前後のセクションではなくこのmarginで作っている（2箇所とも同じ間隔のため） */
.sub-cta {
  margin: 7.5rem auto;
  padding: 0 2rem;
}

/* bg_cvp.jpg は写真に暗いオーバーレイを乗せた状態で書き出されているため、CSS側の重ね合わせは不要。*/
.sub-cta__inner {
  max-width: 97.6rem;
  margin: 0 auto;
  padding: 5rem 2rem 4.9rem;
  background: url("../images/subscription/bg_cvp.jpg") no-repeat center center / cover;
  text-align: center;
  border-radius: 1.0rem
}

.sub-cta__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}

.sub-cta__note {
  margin-top: 1.5rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #fff;
}

.sub-cta__btn {
  margin: 2.7rem auto 0;
}

/* ------------------------------------------------------------
   お申し込みは1分（Figma y:2250〜2850）
   ------------------------------------------------------------ */

/* 上側の余白は直前のCTA帯のmargin-bottomが担当している */
.sub-step {
  position: relative;
  padding: 0 0 18.5rem;
  background: #fff;
  text-align: center;
}

.sub-step__heading {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

.sub-step__lead {
  margin-top: 1rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

/* 302px幅のカード3枚を40px間隔で並べた986pxが中央に来る */
.sub-step__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  max-width: 102.6rem;
  margin: 4rem auto 0;
  padding: 0 2rem;
}

/* 番号の丸がカードの上辺から19pxはみ出すため、その分をitem側の余白で確保する */
.sub-step__item {
  position: relative;
  padding-top: 1.9rem;
}

/* カード間の隙間に置く二重矢印。最後のカードの右には出さない。 */
.sub-step__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12.3rem;
  left: calc(100% + 1.1rem);
  width: 1.83rem;
  height: 3rem;
  background: url("../images/subscription/arr-step.svg") no-repeat center center / contain;
}

.sub-step__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.1rem;
  height: 6.1rem;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.sub-step__card {
  height: 100%;
  padding: 6.6rem 4.2rem 3.5rem;
  border: 0.1rem solid var(--main-color);
  border-radius: 0.8rem;
  background: #fff;
}

/* デザインでは見出し60px・説明48pxの固定高で3枚の高さを揃えている。
   カードによって行数が違う（2枚目は2行）ため、min-heightと中央寄せで同じ効果を出している。 */
.sub-step__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--main-color);
}

.sub-step__text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--text);
}

/* ------------------------------------------------------------
   よくある質問（Figma y:2850〜3314）
   ------------------------------------------------------------ */

.sub-faq {
  padding: 8rem 0;
  background: var(--sub-beige);
}

.sub-faq__heading {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
}

/* 846px幅が中央に来る（max-widthに左右paddingの40pxを足している） */
.sub-faq__list {
  max-width: 88.6rem;
  margin: 4rem auto 0;
  padding: 0 2rem;
}

.sub-faq__item {
  padding: 0 2.4rem;
  border-radius: 0.8rem;
  background: #fff;
}

.sub-faq__item + .sub-faq__item {
  margin-top: 2rem;
}

/* summaryの標準三角マーカーは消して、右端に自前の矢印を置く。
   display:flex を指定するとFirefoxでもマーカーが消える。 */
.sub-faq__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 4.8rem 1.8rem 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.sub-faq__q::-webkit-details-marker {
  display: none;
}

.sub-faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  transform: translateY(-50%);
  background: url("../images/subscription/arr-faq.svg") no-repeat center center / contain;
  /* 開閉アニメーション（js/subscription.js）と同じ長さにして動きを揃えている */
  transition: transform 0.35s ease;
}

.sub-faq__item[open] .sub-faq__q::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Qは書体の関係で下方向に余白を持っており、上下中央に置くと沈んで見える。
   下に4pxのpaddingを入れると中央位置が2px上がるので、その分だけ文字を持ち上げている
   （box-sizing:border-boxなので円のサイズは3.8remのまま変わらない）。 */
.sub-faq__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.8rem;
  height: 3.8rem;
  padding-bottom: 0.4rem;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

/* 高さをアニメーションさせる対象。paddingを内側の<p>に持たせているのは、
   border-box指定だと高さをpadding未満に縮められず、閉じきる直前でカクつくため。 */
.sub-faq__body {
  overflow: hidden;
}

/* 左のpaddingは、Qバッジ(38px)＋間隔(20px)ぶん下げて質問文と頭を揃えるため */
.sub-faq__a {
  padding: 0 0 2.5rem 5.8rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--text);
}

/* ------------------------------------------------------------
   ワイド画面（1440px以上）
   波形が _full 版（緩いカーブ）に切り替わる範囲。
   remの固定値だと画面幅に対して余白が足りなく見えるため、vwで画面幅に追従させる。
   ------------------------------------------------------------ */

@media (min-width: 90em) {
  .sub-hint {
    padding: 7vw 0 12vw;
  }
}

/* ------------------------------------------------------------
   タブレット以下
   ------------------------------------------------------------ */

@media (max-width: 64em) {
  .sub-hero {
    padding: 6rem 0 14rem;
  }

  .sub-hero__bg {
    top: 0;
    width: 100%;
    height: 40rem;
  }

  .sub-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    max-width: 52rem;
    text-align: center;
  }

  .sub-hero__cover {
    width: 24rem;
  }

  .sub-hero__body {
    margin-top: 0;
  }

  .sub-hero__title {
    font-size: 2.6rem;
  }

  .sub-hero__action {
    margin-top: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sub-hint {
    padding: 6rem 0 16rem;
  }

  .sub-hint__heading {
    font-size: 2.6rem;
  }

  .sub-hint__list {
    gap: 2.4rem;
    margin-top: 4rem;
  }

  .sub-hint__icon {
    width: 9.6rem;
    height: 9.6rem;
  }

  .sub-hint__name {
    margin-top: 2rem;
    font-size: 1.6rem;
  }

  .sub-hint__text {
    font-size: 1.4rem;
  }

  .sub-magazine {
    padding: 6rem 0 0;
  }

  .sub-magazine__heading {
    font-size: 2.6rem;
  }

  .sub-magazine__covers {
    gap: 2.4rem;
  }

  .sub-magazine__note {
    margin-top: 3.2rem;
    font-size: 2rem;
  }

  .sub-cta {
    margin: 6rem auto;
  }

  .sub-cta__inner {
    padding: 4rem 2rem;
  }

  .sub-cta__title {
    font-size: 2.1rem;
  }

  .sub-step {
    padding-bottom: 12rem;
  }

  .sub-step__heading {
    font-size: 2.6rem;
  }

  .sub-step__lead {
    font-size: 1.6rem;
  }

  .sub-step__list {
    gap: 2.4rem;
  }

  .sub-step__item:not(:last-child)::after {
    left: calc(100% + 0.3rem);
  }

  .sub-step__card {
    padding: 5.6rem 2rem 3rem;
  }

  .sub-step__title {
    font-size: 1.8rem;
  }

  .sub-step__text {
    font-size: 1.4rem;
  }

  .sub-faq {
    padding: 6rem 0;
  }

  .sub-faq__heading {
    font-size: 2.6rem;
  }

  .sub-faq__q {
    font-size: 1.8rem;
  }
}

/* ------------------------------------------------------------
   スマートフォン
   ------------------------------------------------------------ */

@media (max-width: 48em) {
  .sub-hero {
    padding: 4rem 0 10rem;
  }

  .sub-hero__title {
    font-size: 2.2rem;
  }

  .sub-hero__lead {
    font-size: 1.4rem;
  }

  .sub-hero__cover {
    width: 20rem;
  }

  .sub-btn-line {
    width: 100%;
    font-size: 1.6rem;
    padding: 1.3rem 2rem;
  }

  .sub-hint {
    padding: 5rem 0 9rem;
  }

  .sub-hint__heading {
    font-size: 2.2rem;
  }

  /* 3カラムでは1カラムあたりが狭くなりすぎるため、縦積みに切り替える */
  .sub-hint__list {
    grid-template-columns: 1fr;
    gap: 3.2rem;
    max-width: 32rem;
  }

  .sub-magazine {
    padding: 5rem 0 0;
  }

  .sub-magazine__heading {
    font-size: 2.2rem;
  }

  /* 表紙は「3号分が届く」ことが伝わればよいので、縦積みにせず横並びのまま縮小する */
  .sub-magazine__covers {
    gap: 1.2rem;
  }

  .sub-magazine__note {
    font-size: 1.7rem;
  }

  .sub-cta {
    margin: 5rem auto;
  }

  .sub-cta__inner {
    padding: 3.2rem 1.6rem;
  }

  .sub-cta__title {
    font-size: 1.8rem;
  }

  .sub-cta__note {
    font-size: 1.4rem;
  }

  .sub-step {
    padding-bottom: 9rem;
  }

  .sub-step__heading {
    font-size: 2.2rem;
  }

  /* 横3枚では1枚が狭くなりすぎるため縦積みにする。
     矢印は横向きのままだと流れが逆に見えるので、90度回して下向きにする。 */
  .sub-step__list {
    grid-template-columns: 1fr;
    gap: 4.4rem;
    max-width: 34rem;
  }

  .sub-step__item:not(:last-child)::after {
    top: calc(100% + 0.7rem);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .sub-step__card {
    padding: 5.6rem 2rem 3rem;
  }

  .sub-step__title,
  .sub-step__text {
    min-height: 0;
  }

  .sub-faq {
    padding: 5rem 0;
  }

  .sub-faq__heading {
    font-size: 2.2rem;
  }

  .sub-faq__item {
    padding: 0 1.6rem;
  }

  .sub-faq__q {
    gap: 1.2rem;
    padding-right: 3.2rem;
    font-size: 1.6rem;
  }

  .sub-faq__mark {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
  }

  .sub-faq__a {
    padding-left: 4.2rem;
    font-size: 1.4rem;
  }

  /* 画面下部に追従するCTA。
     iPhoneのホームインジケータに重ならないよう、env(safe-area-inset-bottom)ぶん余白を足している。 */
  .sub-fixed-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 1rem 1.6rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    box-shadow: 0 -0.2rem 0.8rem rgba(0, 0, 0, 0.08);
  }

  .sub-fixed-cta .sub-btn-line {
    width: 100%;
  }

  /* 最下部までスクロールしたときに追従ボタンがフッターを隠さないよう、下に逃げ場を作る。
     このCSSは定期購読LPでしか読み込まれないため、共通のフッターに指定しても他ページには影響しない。 */
  .site-footer {
    padding-bottom: 9rem;
  }
}