/* ============================================================
   soukyu.com「デザイン書道オンライン教室」（本番 /web/）
   AFFINGER子テーマ style-affinger.css の「新オンライン教室」ブロック
   （141〜3897行・5677〜5683行）を、AFFINGER依存を外して書き直したもの。

   元CSSにあった !important・#wrapper 等の構造依存セレクタは、
   AFFINGERの初期スタイルを打ち消すためのものなので原則として持ち込まない。
   サイト共通のヘッダー・フッターは css/common.css をそのまま使用する。
   ============================================================ */
:root {
  --gold: #c8a96e;
  --gold-light: #e8d5a8;
  --gold-dark: #8b6a32;
  --red: #e74b3c;
  --red-dark: #c0392b;
  --text: #333;
  --text-light: #666;
  --serif: 'Noto Serif JP', serif;
  --sans: 'Noto Sans JP', sans-serif;
  --script: 'Pinyon Script', cursive;
  --max: 1096px;
  --max-wide: 1180px;

  /* 教室ページの生成り。common.css の --cream(#f3f2f0) をこのページだけ上書きする。
     common.css 側は --cream を一度も使っていないため影響は出ない。 */
  --cream: #f8f6f2;
}

html {
  scroll-behavior: smooth;
  font-size: 18px; /* 以下の rem 値はすべてこの 18px が基準 */
  overflow-x: hidden;
}

/* 本文の既定はゴシック。明朝は見出し・強調へ font-family: var(--serif) で個別に当てる。
   （元CSSは body に font-family を書かず、AFFINGERのゴシック指定を継承していた） */
body {
  font-family: var(--sans);
  color: var(--text);
  background: #fff;
  line-height: 1.95;
  overflow-x: hidden;
}

/* 教室ヘッダーの見た目は common.css に一本化した（ページごとに複製しない） */

/* ---------- スクロールで浮かび上がる演出 ---------- */
html.shodo-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}
.reveal,
.reveal.visible,
html.shodo-reveal-ready .reveal.visible {
  opacity: 1;
  transform: none;
}
html.shodo-reveal-ready .reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}
.reveal-left,
.reveal-left.visible,
html.shodo-reveal-ready .reveal-left.visible {
  opacity: 1;
  transform: none;
}
html.shodo-reveal-ready .reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}
.reveal-right,
.reveal-right.visible,
html.shodo-reveal-ready .reveal-right.visible {
  opacity: 1;
  transform: none;
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html.shodo-reveal-ready .reveal,
  html.shodo-reveal-ready .reveal-left,
  html.shodo-reveal-ready .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- ヒーロー ---------- */
.web-hero-shell { position: relative; overflow: hidden; background: #fff; }
.web-hero-shell > .page-breadcrumb-wrap {
  position: relative;
  z-index: 2;
  /* ヒーロー本文（.hero-inner）の左端と揃える */
  padding: 24px 40px 0;
}
.web-hero-shell > .page-breadcrumb-wrap .breadcrumb { padding-top: 0; margin-bottom: 0; }
.hero {
  background: transparent;
  position: relative;
  min-height: 650px;
  display: grid;
  align-content: start;
  /* パンくずをヘッダー寄りに保ち、見出しとの間には制作実績と同程度の余白を取る */
  padding-top: 48px;
  padding-bottom: 96px; /* ここを大きくしても、上の余白や背景の柄の大きさは変わらない */
}

/* 和柄背景：青海波 */
.hero-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

/* 左側のテキストエリア */
.hero-inner {
  grid-area: 1 / 1 / 2 / 2;
  align-self: center; /* 画像と縦の中央で高さを合わせる */
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 40px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero-text {
  max-width: 46%;
}

.hero-script {
  display: block;
  font-family: var(--script);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.hero-text h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.5;
  color: #2a2a2a;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--red);
  margin: 0 0 26px;
  letter-spacing: 0;
}

.hero-checklist {
  list-style: none;
  margin-bottom: 28px;
  padding: 0;
}

.hero-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 32px; /* AFFINGER由来（960px以上では30px。下のメディアクエリで切り替え） */
  margin: 0 0 10px;
  color: #444;
}

.hero-checklist li svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(231, 75, 60, 0.25);
}

.deadline-box {
  background: linear-gradient(135deg, #fff5f5, #fff);
  border: 1px solid #f0b0a0;
  border-radius: 8px;
  padding: 18px 22px 22px;
  margin-bottom: 24px;
  text-align: center;
}

.limited-slots {
  font-family: var(--serif);
  /* AFFINGER由来：元CSSは 1.1rem(19.8px) だが、テーマの記事設定 17px が勝っていた。
     今の見た目を保つため実効値を明示する（行間は960px以上で30pxに切り替わる）。 */
  font-size: 17px;
  line-height: 32px;
  font-weight: 700;
  color: #9c7a2a;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* 満席のときだけ効く。本番CSSではこの指定が抜けており、
   満席の文字が周囲と同じ色で埋もれていたため復活させた。 */
.limited-slots .is-full {
  color: var(--red);
}

.deadline-alert {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.95;
  color: var(--red);
  margin: 0;
}

.deadline-box .deadline-alert {
  margin-top: 16px;
}

.deadline-message {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.6;
  color: #777;
  margin: 4px 0 0;
}

.btn-primary {
  display: inline-block;
  margin-top: 14px;
  width: 100%;
  background: var(--red);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 16px 48px;
  border-radius: 50px;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(231, 75, 60, 0.3);
  text-align: center;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--red-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(231, 75, 60, 0.4);
}

/* 右側の画像エリア */
.hero-image-wrap {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  align-self: center;
  justify-self: end;
  width: 55vw;
  aspect-ratio: 1.1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.masked-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M200,0 C160,0 130,30 90,25 C60,20 45,50 45,100 C45,150 65,195 120,195 C160,195 185,160 200,120 Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M200,0 C160,0 130,30 90,25 C60,20 45,50 45,100 C45,150 65,195 120,195 C160,195 185,160 200,120 Z' /%3E%3C/svg%3E");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hero-image-wrap > .masked-img {
  height: 100%;
  vertical-align: middle;
}

.deco-circle-bg {
  position: absolute;
  width: 79%;
  height: auto;
  top: 59%;
  left: 47%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

/* ヒーロー下端の波線 */
.custom-shape-divider-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: visible;
  line-height: 0;
  z-index: 5;
}

.custom-shape-divider-bottom svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}

.custom-shape-divider-bottom .shape-fill {
  fill: #ffffff;
}

.custom-shape-divider-bottom .shape-line-1 {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2px;
}

.custom-shape-divider-bottom .shape-line-2 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 2px;
}

/* ---------- タブレット・スマホ ---------- */
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    padding-bottom: 80px;
  }
  .hero-inner,
  .hero-image-wrap {
    grid-area: auto;
    align-self: auto;
  }
  .hero-inner {
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .hero-text {
    max-width: 100%;
  }
  .hero-image-wrap {
    position: absolute;
    top: 136px;
    right: -62px;
    z-index: 1;
    display: flex;
    width: clamp(280px, 72vw, 380px);
    aspect-ratio: 1.1 / 1;
    height: auto;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }
  .masked-img {
    border-radius: 0;
    opacity: 0.96;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.14));
    object-position: center 35%;
  }
  /* 画像に重なる位置に来るため、白い縁取りで文字を読めるようにしている */
  .hero-sub {
    text-shadow:
      1px 0 0 #fff,
      -1px 0 0 #fff,
      0 1px 0 #fff,
      0 -1px 0 #fff,
      1px 1px 0 #fff,
      -1px 1px 0 #fff,
      1px -1px 0 #fff,
      -1px -1px 0 #fff,
      0 2px 8px rgba(255, 255, 255, 0.9);
  }
  .deco-circle-bg {
    display: none;
  }
  .custom-shape-divider-bottom svg {
    height: 40px;
  }
}

@media (max-width: 768px) {
  .web-hero-shell > .page-breadcrumb-wrap { padding-right: 24px; padding-left: 24px; }
  .hero-inner {
    padding: 40px 0;
  }
  /* 見出しも画像に重なるので、hero-sub と同じく白フチを付ける */
  .hero-text h1 {
    text-shadow:
      2px 0 0 #fff,
      -2px 0 0 #fff,
      0 2px 0 #fff,
      0 -2px 0 #fff,
      1px 1px 0 #fff,
      -1px 1px 0 #fff,
      1px -1px 0 #fff,
      -1px -1px 0 #fff;
  }
}

@media (max-width: 599px) {
  .hero {
    padding: 16px;
    background-position: 10px 0px;
  }
  .sp-br {
    display: none;
  }
}

/* ============================================================
   セクション共通の枠組み
   ============================================================ */
.section {
  padding: 112px 24px;
  position: relative;
}

.section-cream {
  background: var(--cream);
  overflow: hidden;
}

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.section-inner-wide {
  max-width: var(--max-wide);
  margin: 0 auto;
}

/* 見出しブロック（金の短線 → 見出し → リード の縦並び。h2 は order:-1 で線の下へ） */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 72px;
}

.sec-head h2 {
  order: -1;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.55;
  color: #222;
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: 0.06em;
}

.sec-head p {
  font-size: 0.97rem;
  line-height: 2;
  color: #555;
  max-width: 700px;
  margin: 0 auto 20px;
}

.gold-line {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 24px;
}

.gold-line-left {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 0 24px;
}

.section-label-script {
  display: block;
  font-family: var(--script);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

/* 下余白のバリエーション */
.section-label-script--mb {
  margin-bottom: 18px;
}

.link-underline {
  color: var(--red);
  text-decoration: underline;
}

.link-red {
  color: var(--red);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.link-red:hover {
  color: var(--red-dark);
  text-decoration: underline;
}

.cta-center {
  text-align: center;
  margin: 32px 0;
}

.cta-center .btn-primary {
  width: 100%;
  max-width: 460px;
}

/* ---------- セクションの区切り装飾 ---------- */
.svg-wave-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #fff;
}

.svg-wave-divider svg {
  display: block;
  width: 100%;
  height: 56px;
}

.shape-divider-wrap {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  display: block;
}

.shape-divider-wrap svg {
  display: block;
  width: 100%;
  height: 72px;
}

/* ============================================================
   デザイン書道とは（テキスト左・動画右）
   ============================================================ */
.yt-section {
  position: relative;
  overflow: hidden;
}

.yt-section .section-inner {
  position: relative;
  z-index: 1;
}

.yt-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.yt-section-grid .yt-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.55;
  color: #222;
  margin: 0 0 20px;
  letter-spacing: 0.05em;
}

.yt-section-grid .yt-text p {
  font-size: 0.97rem;
  line-height: 1.95;
  color: #555;
  margin: 0;
}

.yt-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-width: 720px;
  margin: 32px auto 0;
}

.yt-section-grid .yt-wrap {
  margin: 0;
  max-width: 100%;
}

.yt-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   コンセプト＋4つの動機カード
   ============================================================ */
.concept-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 48px;
}

/* 金の短線を先頭に出しつつ、見出しをその下へ回すため order を使う */
.concept-text {
  display: flex;
  flex-direction: column;
}

.concept-text h2 {
  order: -1;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.concept-text p {
  font-size: 0.95rem;
  line-height: 2;
  color: #555;
  margin: 0 0 16px;
}

.worries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.worry-card {
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.worry-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.worry-icon svg {
  width: 100%;
  height: 100%;
  color: var(--gold);
}

.worry-card h4 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  text-align: center;
  margin: 0 0 8px;
}

.worry-card p {
  font-size: 0.875rem;
  line-height: 1.8;
  color: #666;
  text-align: center;
  margin: 0;
}

/* ============================================================
   筆文字がカタチになる（作品3枚）
   ============================================================ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 32px;
}

.work-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

/* AFFINGER由来：テーマが img へ max-width:100% を当てていた分を明示。
   width:100% にすると本番より画像が引き伸ばされるので max-width で止める。 */
.work-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

.work-card-body {
  padding: 18px;
}

.work-card h3 {
  font-family: var(--serif);
  /* AFFINGER由来：元CSSは 0.95rem(17.1px) だが、テーマの見出し設定 18px が勝っていた */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  margin: 0 0 8px;
}

.work-card p {
  font-size: 0.85rem;
  line-height: 1.75;
  color: #666;
  margin: 0;
}

/* ============================================================
   生徒の感想（横スクロールのスライダー）
   本番はSlick（jQuery）だったが、CSSのscroll-snap＋素のJSで作り直している。
   見た目（カードの寸法・余白・矢印・ドット）は本番に合わせてある。
   ============================================================ */
.voice-section {
  padding: 76px 0 40px;
  overflow: hidden;
}

.voice-section .sec-head {
  margin-bottom: 46px;
}

.voice-section .section-inner-wide {
  width: min(100%, 1900px);
  max-width: none;
  padding: 0 clamp(76px, 4.9vw, 96px);
}

.voice-slider {
  position: relative;
  padding-bottom: 58px;
}

/* 上下：カードの影が切れないよう余白を取ってからマイナスマージンで戻す
   左右：本番のスライダーが左右へ8pxずつはみ出していた（カード幅403pxになる）ため合わせる */
.voice-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: -18px -8px -34px;
  padding: 18px 0 34px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.voice-track::-webkit-scrollbar {
  display: none;
}

.voice-item {
  flex: 0 0 calc(100% / 3);
  padding: 0 16px;
  scroll-snap-align: start;
  display: flex;
}

.voice-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px;
  background: #fff;
  border: 1px solid #e5dccf;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 32px rgba(54, 43, 28, 0.08);
  outline: 1px solid rgba(200, 169, 110, 0.08);
  outline-offset: -1px;
  color: #202020;
  text-decoration: none;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

.voice-card:hover {
  transform: translateY(-2px);
  border-color: #d8c9b7;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 38px rgba(54, 43, 28, 0.1);
}

.voice-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin: 0 0 16px;
}

.voice-avatar {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.voice-card h3 {
  /* サイト共通の「見出しは明朝」に合わせる。明朝なので太さは800→600へ落とす */
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #1f1f1f;
  margin: -3px 0 0;
}

.voice-card p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.035em;
  color: #585858;
  /* 下の「続きを読む」との最低限の間隔。余りは .voice-more の margin-top:auto が吸収する */
  margin: 0 0 22px;
}

/* カード下端の「続きを読む ›」。margin-top:auto で、本文の長さが違っても位置が揃う */
.voice-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid #efe8dd;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
}

.voice-more::after {
  content: '›';
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.25s;
}

.voice-card:hover .voice-more::after {
  transform: translate(4px, -1px);
}

/* ---------- 左右の矢印 ---------- */
.voice-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 40px;
  height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62px;
  font-weight: 400;
  line-height: 0;
  color: var(--gold-dark);
  opacity: 1;
  text-align: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s;
}

.voice-nav:hover {
  opacity: 1;
}

.voice-nav:disabled {
  opacity: 0.2;
  cursor: default;
}

.voice-prev {
  left: -22px;
}

.voice-next {
  right: -16px;
}

/* ---------- 下のドット ---------- */
.voice-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.voice-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  opacity: 0.75;
  cursor: pointer;
}

.voice-dots button[aria-current='true'] {
  background: #555;
  opacity: 1;
}

.review-more-link {
  text-align: center;
  margin-top: 28px;
}

/* ============================================================
   講師紹介
   ============================================================ */
/* 中身がはみ出す装飾を切り取るセクション */
.section--clip {
  overflow: hidden;
}

.teacher-section {
  background: #fff;
  padding-bottom: 16px;
}

/* 元CSSではこの2つが .teacher-section より後ろにあり、上の padding-bottom を上書きしている。
   順番を入れ替えると講師紹介の下余白が48px縮むので、この位置のまま動かさないこと。 */
.section--pb-sm {
  padding-bottom: 64px;
}

.section--pt-sm {
  padding-top: 64px;
}

/* セクション上端に重ねる飾り帯（画像は style="--teacher-divider-url" で渡している） */
.teacher-section::before {
  content: '';
  position: absolute;
  top: -164px;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(180px, 35.8vw, 480px);
  background: var(--teacher-divider-url, none) center top / 100% auto no-repeat;
  pointer-events: none;
  z-index: 0;
}

.teacher-section .section-inner-wide {
  position: relative;
  z-index: 1;
}

.teacher-grid {
  display: grid;
  grid-template-columns: 386px 1fr;
  gap: 56px;
  align-items: center;
}

.teacher-img-wrap {
  position: relative;
  overflow: visible;
  width: min(39.8vw, 386px);
  margin-left: -48px;
}

/* 3枚の写真を少しずつずらして重ねたコラージュ */
.teacher-photo-collage {
  position: relative;
  z-index: 1;
  width: 111%;
  aspect-ratio: 455 / 958;
  display: block;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.14));
}

.teacher-photo {
  position: absolute;
  overflow: hidden;
}

.teacher-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.teacher-photo--top {
  top: 1.4%;
  left: 2.9%;
  width: 77.4%;
  height: 34.2%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M53,0 C70,0 86,12 95,30 C104,49 97,72 82,93 C77,100 73,103 63,103 C47,104 29,98 16,89 C5,81 3,69 7,54 C12,34 23,15 38,3 C43,0 47,0 53,0 Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M53,0 C70,0 86,12 95,30 C104,49 97,72 82,93 C77,100 73,103 63,103 C47,104 29,98 16,89 C5,81 3,69 7,54 C12,34 23,15 38,3 C43,0 47,0 53,0 Z' /%3E%3C/svg%3E");
}

.teacher-photo--top img {
  transform: scale(1);
  transform-origin: center;
}

.teacher-photo--middle {
  top: 32.4%;
  left: 18.7%;
  width: 80.7%;
  height: 38.6%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M52,1 C70,1 88,11 93,27 C98,42 88,53 88,66 C88,81 78,93 63,96 C44,100 22,91 11,77 C0,64 3,45 12,26 C22,11 35,0 52,1 Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M52,1 C70,1 88,11 93,27 C98,42 88,53 88,66 C88,81 78,93 63,96 C44,100 22,91 11,77 C0,64 3,45 12,26 C22,11 35,0 52,1 Z' /%3E%3C/svg%3E");
}

.teacher-photo--bottom {
  top: 65.8%;
  left: 0;
  width: 70.9%;
  height: 33%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='-4 0 116 104' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M46,4 C64,2 91,14 100,31 C109,47 98,65 86,80 C75,93 60,100 45,98 C26,95 11,85 4,68 C-3,50 3,31 18,20 C26,13 35,5 46,4 Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='-4 0 116 104' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M46,4 C64,2 91,14 100,31 C109,47 98,65 86,80 C75,93 60,100 45,98 C26,95 11,85 4,68 C-3,50 3,31 18,20 C26,13 35,5 46,4 Z' /%3E%3C/svg%3E");
}

.teacher-photo--bottom img {
  object-fit: contain;
  transform-origin: center;
  transform: scale(1.13);
}

.teacher-photo--top,
.teacher-photo--middle,
.teacher-photo--bottom {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.teacher-body {
  display: flex;
  flex-direction: column;
}

.teacher-body h2 {
  order: -1;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.teacher-body p {
  font-size: 0.92rem;
  line-height: 2;
  color: #555;
  margin: 0 0 16px;
}

/* PCでは左のコラージュを使うので非表示。スマホでのみ出す */
.teacher-mobile-photo {
  display: none;
}

/* ---------- 細い飾り線 ---------- */
.deco-line-thin-wrap {
  background: #fff;
  padding: 8px 0;
  overflow: hidden;
}

.deco-line-thin {
  width: 102%;
  height: auto;
  display: block;
  opacity: 0.75;
  max-width: none;
}

.teacher-section + .deco-line-thin-wrap {
  margin-top: -72px;
  position: relative;
  z-index: 2;
}

.teacher-section + .deco-line-thin-wrap + .section--pt-sm {
  padding-top: 36px;
}

/* ============================================================
   6つの特徴
   ============================================================ */
.feature-num-title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #222;
  margin: 80px 0 24px;
  letter-spacing: 0.04em;
}

.feature-num-title .num {
  color: var(--gold-dark);
  font-size: 1.1em;
}

.feature-intro {
  text-align: center;
  margin-bottom: 40px;
}

.feature-intro p,
.feature-intro--2 p {
  font-size: 0.93rem;
  line-height: 1.95;
  color: #555;
  max-width: 700px;
  margin: 0 auto 24px;
}

/* ---------- 特徴1：カリキュラム ---------- */
.curriculum-box {
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 12px;
  padding: 44px 48px;
  margin: 32px 0 96px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}

.curriculum-box h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 0 0 16px;
}

.curriculum-box p {
  font-size: 0.88rem;
  line-height: 1.95;
  color: #555;
  margin: 0 0 6px;
}

.curriculum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin-top: 24px;
}

.curriculum-item h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  text-align: left;
  margin: 0 0 8px;
}

.curriculum-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--red);
  border-radius: 50%;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--serif);
  flex-shrink: 0;
  line-height: 1;
}

.curriculum-box ul {
  list-style: disc;
  padding-left: 20px;
}

.curriculum-box ul li {
  font-size: 0.86rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 4px;
}

.curriculum-box .note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #888;
  margin: 16px 0 0;
  font-style: italic;
}

/* ---------- 特徴2：学習システム ---------- */
.system-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 32px auto 96px;
}

.system-card {
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.system-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-icon svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
}

.system-card h4 {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  text-align: left;
  margin: 0 0 6px;
}

.system-card p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

/* ---------- 特徴3：添削 ---------- */
.tensaku-intro {
  max-width: 1020px;
  margin: 0 auto 32px;
}

.tensaku-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto 56px;
}

.tensaku-wrap img {
  width: 100%;
  height: auto; /* AFFINGER由来：テーマの img 既定。無いと height 属性のまま縦が縮む */
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.tensaku-wrap p {
  font-size: 0.92rem;
  line-height: 2;
  color: #555;
  margin: 0;
}

.tensaku-flow-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 0 0 20px;
}

.tensaku-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px auto 96px;
  max-width: 960px;
}

.flow-card {
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  position: relative;
}

.flow-num {
  width: 32px;
  height: 32px;
  background: var(--gold-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 auto 10px;
}

.flow-card h5 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 0 0 6px;
}

.flow-card p {
  font-size: 0.8rem;
  line-height: 1.65;
  color: #666;
  margin: 0;
}

/* ---------- 特徴4：セミナー ---------- */
.seminar-section {
  margin-bottom: 88px;
}

.seminar-section-label {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}

.seminar-section-desc {
  font-size: 0.92rem;
  line-height: 1.85;
  color: #555;
  text-align: center;
  max-width: 780px;
  margin: 0 auto 28px;
}

.seminar-list-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 40px 0 20px;
}

.seminar-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
}

.seminar-more-link {
  text-align: center;
  margin-top: 24px;
}

.seminar-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  display: block;
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.seminar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

.seminar-image-wrapper {
  overflow: hidden;
}

.seminar-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.seminar-card:hover img {
  transform: scale(1.04);
}

.seminar-card-title {
  background: #fff;
  padding: 12px 14px;
  font-size: 0.84rem;
  color: #444;
  line-height: 1.6;
}

/* 3つの特徴は生成りの面で1つの塊にまとめ、下の写真カード3枚と別グループに見せる */
.seminar-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
  background: var(--cream);
  border-radius: 10px;
  padding: 36px 32px;
}

.seminar-feature-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seminar-feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seminar-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}

.seminar-check svg {
  width: 14px;
  height: 14px;
}

.seminar-feature-head strong {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
}

.seminar-feature-item p {
  /* AFFINGER由来の17px/32pxは本文サイズが勝っていたもの。文字が大きく見にくいとの
     指摘を受け、元々意図されていた0.86rem（コメント参照）に戻した。 */
  font-size: 0.86rem;
  line-height: 1.8;
  color: #666;
  padding-left: 38px;
  margin: 0;
}

/* ---------- 特徴5：デジタルスキル ---------- */
.digital-section {
  position: relative;
  margin-bottom: 96px;
}

/* 背景に薄く敷く波形の飾り */
.digital-deco {
  position: absolute;
  bottom: -86px;
  left: 50%;
  transform: translateX(-50%);
  width: 101vw;
  height: auto;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  display: block;
  max-width: none;
}

.digital-wrap {
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 56px;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* 元CSSには margin-bottom: 4px もあるが、.feature-num-title 側の
   margin 一括指定に打ち消されて効いていない（下余白は24pxのまま）ので持ち込まない。 */
.digital-heading {
  text-align: left;
}

.digital-p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: #555;
  margin: 0 0 14px;
}

.digital-img-wrap img {
  width: 38%;
  height: auto; /* AFFINGER由来：テーマの img 既定 */
  display: block;
  top: 107px;
  position: absolute;
}

/* PCでは右側の画像を使うのでスマホ用は隠す */
.digital-mobile-photo {
  display: none;
}

/* ---------- 特徴6：オンライン展示会 ---------- */
.exhibition-section {
  position: relative;
  margin: 0 0 96px;
}

.exhibition-heading {
  margin-top: 72px;
}

.exhibition-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 44px;
  align-items: center;
  margin: 34px 0 38px;
}

.exhibition-visual {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(48, 38, 24, 0.12);
}

.exhibition-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: inherit;
  pointer-events: none;
}

.exhibition-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.exhibition-copy {
  border-left: 1px solid #e8e0d0;
  padding-left: 34px;
}

.exhibition-copy p {
  font-size: 0.86rem;
  line-height: 1.9;
  color: #555;
  margin: 0 0 16px;
}

.exhibition-points {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.exhibition-points li {
  position: relative;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

.exhibition-points li::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ============================================================
   理論的指導法
   ============================================================ */
.theory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.theory-label {
  font-family: var(--serif);
  font-size: 0.88rem;
  color: #999;
  margin-bottom: 6px;
}

.theory-heading {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}

.theory-text p {
  font-size: 0.92rem;
  line-height: 2;
  color: #555;
  margin: 0 0 16px;
}

.section-label-script--mb20 {
  margin-bottom: 20px;
}

.theory-right {
  position: relative;
}

/* 背景に散らす金色のドット */
.theory-dots {
  position: absolute;
  top: -18px;
  left: -76px;
  width: 220px;
  height: auto;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.theory-img-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

/* 写真を有機的な形に切り抜く枠 */
.theory-masked-img {
  --theory-img-scale: 1;
  --theory-img-x: 0px;
  --theory-img-y: 0px;
  width: 100%;
  aspect-ratio: 600 / 470;
  height: auto;
  overflow: hidden;
  display: block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 470' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M174,36 C228,23 276,32 324,47 C366,59 432,45 480,75 C540,112 576,202 570,282 C564,363 516,414 432,442 C342,470 204,460 126,423 C60,390 12,319 12,244 C6,179 42,113 102,71 C126,52 150,40 174,36 Z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 470' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M174,36 C228,23 276,32 324,47 C366,59 432,45 480,75 C540,112 576,202 570,282 C564,363 516,414 432,442 C342,470 204,460 126,423 C60,390 12,319 12,244 C6,179 42,113 102,71 C126,52 150,40 174,36 Z' /%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.13));
}

.theory-photo-image {
  max-width: none;
  position: absolute;
  top: 30px;
  left: -62px;
  width: 123%;
  /* AFFINGER由来：元CSSは height:100% だが、テーマの img 既定 height:auto が勝っていた */
  height: auto;
  object-fit: cover;
  display: block;
  transform-origin: center;
  transform: translate(var(--theory-img-x), var(--theory-img-y)) scale(var(--theory-img-scale));
}

.theory-caption {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin-left: 40px;
}

.theory-caption p {
  font-size: 0.88rem;
  line-height: 1.85;
  color: #555;
  margin: 0 0 10px;
}

.theory-caption a {
  font-family: var(--serif);
  font-size: 0.88rem;
  color: var(--red);
  text-decoration: underline;
}

/* ---------- 左寄せの見出しブロック ---------- */
.sec-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sec-head-left h2 {
  order: -1;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.65;
  color: #222;
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.sec-head-left p {
  font-size: 0.95rem;
  line-height: 2;
  color: #555;
  margin: 0 0 16px;
}

/* 「なぜデザイン書道なのか」ブロックだけ中央寄せにする */
.theory-second {
  margin-top: 72px;
  align-items: center;
  text-align: center;
}

.theory-second p,
.theory-second .bullet-list {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.theory-second .bullet-list {
  text-align: left;
  width: fit-content;
}

/* 元CSSには .theory-second .bullet-list li { padding-left: 12px } もあるが、
   実際には ul.bullet-list li の 16px が効いていたので持ち込まない。 */
.theory-second .bullet-list li::before {
  left: 0;
}

ul.bullet-list {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}

ul.bullet-list li {
  padding-left: 16px;
  position: relative;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 5px;
  line-height: 1.7;
}

ul.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

ul.bullet-list li strong {
  color: #333;
}

.theory-bullet-list {
  margin-bottom: 18px;
}

/* ============================================================
   受講生だけの特典
   ============================================================ */
.benefit-label {
  font-family: var(--serif);
  font-size: 0.85rem;
  line-height: 1.95;
  color: #999;
  margin: 0 0 6px;
  letter-spacing: 0.05em;
}

/* 金の短線より上に出すため order を使う */
.sec-head .benefit-label {
  order: -2;
}

.benefit-heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.45;
  color: #222;
  margin: 0 0 20px;
  letter-spacing: 0.06em;
}

.gold-line--mb20 {
  margin-bottom: 20px;
}

.benefit-box {
  border: 1.5px solid var(--gold-light);
  border-radius: 12px;
  padding: 32px 36px;
  margin-top: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.benefit-illust {
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-illust svg {
  width: 100%;
  max-width: 100px;
  height: auto;
}

.benefit-body h3 {
  font-family: var(--serif);
  /* AFFINGER由来：テーマの見出し設定（上下余白20px・色#1a1a1a）が勝っていた。
     行間は600px以上で30pxへ切り替わる（下のメディアクエリ） */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 20px 0;
}

.benefit-body p {
  /* AFFINGER由来：元CSSは 0.88rem だが、テーマの本文設定 17px が勝っていた。
     行間は600px以上で30pxへ切り替わる（下のメディアクエリ） */
  font-size: 17px;
  line-height: 1.85;
  color: #666;
}

.benefit-list {
  list-style: none;
  padding: 0;
  border-left: 1px solid #e8e0d0;
  padding-left: 32px;
}

.benefit-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #555;
  margin: 0 0 14px;
}

.benefit-list li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}

/* ============================================================
   月謝・お申し込み
   ============================================================ */
.price-box {
  background: #fff;
  border: 2px solid var(--gold-light);
  border-radius: 16px;
  padding: 36px;
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(200, 169, 110, 0.15);
}

.price-box h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  text-align: center;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid #e8e0d0;
}

.price-label {
  font-size: 0.92rem;
  line-height: 1.95;
  color: #666;
  margin: 16px 0 4px;
}

.price-value {
  font-family: var(--serif);
  font-size: 1rem;
  color: #444;
}

.price-num {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 700;
  color: #222;
  line-height: 1;
}

.price-note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #777;
  margin: 12px 0 20px;
}

.price-note span {
  color: var(--red);
  font-weight: 700;
}

.price-nofee {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 0;
}

.price-nofee li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  margin: 0;
  padding: 0;
}

.price-nofee li svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gold);
}

/* ---------- お支払い方法のアコーディオン ---------- */
.payment-wrap {
  max-width: 640px;
  margin: 32px auto 0;
}

.payment-wrap h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  text-align: center;
  margin: 0 0 16px;
}

.payment-desc {
  font-size: 0.88rem;
  line-height: 1.95;
  color: #666;
  text-align: center;
  margin: 0 0 20px;
}

.pay-item {
  border: 1px solid #e8e0d0;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.pay-toggle {
  background: var(--cream);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  user-select: none;
}

.pay-toggle:hover {
  background: #f0ece4;
}

.pay-toggle .arrow {
  transition: transform 0.3s;
  font-size: 0.8rem;
  color: var(--gold-dark);
}

.pay-toggle.open .arrow {
  transform: rotate(180deg);
}

.pay-content {
  display: none;
  padding: 16px 18px;
  background: #fff;
}

.pay-content.open {
  display: block;
}

.pay-content ul {
  list-style: disc;
  padding-left: 20px;
}

.pay-content ul li {
  font-size: 0.87rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 6px;
}

/* ---------- ご入会までの流れ ---------- */
.flow-section-wrap {
  max-width: 860px;
  margin: 48px auto 0;
  border-top: 1px solid #e8e0d0;
  padding-top: 48px;
}

.flow-section-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  text-align: center;
  margin: 0 0 12px;
}

.flow-section-desc {
  font-size: 0.88rem;
  line-height: 1.95;
  color: #666;
  text-align: center;
  margin: 0 0 28px;
}

.apply-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 32px auto 40px;
}

.apply-step {
  text-align: center;
  padding: 24px 14px;
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.step-num {
  width: 40px;
  height: 40px;
  border: 2px solid var(--gold-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-dark);
  margin: 0 auto 12px;
}

.apply-step h4 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 0 0 8px;
}

.apply-step p {
  font-size: 0.8rem;
  line-height: 1.65;
  color: #666;
  text-align: center;
  margin: 0;
}

/* ============================================================
   よくあるご質問
   ============================================================ */
.faq-wrap {
  max-width: 740px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-q {
  background: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.faq-q:hover {
  background: var(--cream);
}

.faq-q-mark {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-dark);
  flex-shrink: 0;
  line-height: 1.4;
  border-right: 1.5px solid var(--gold-light);
  padding-right: 14px;
}

.faq-q-text {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: #333;
  flex: 1;
  line-height: 1.6;
}

.faq-arrow {
  flex-shrink: 0;
  color: var(--gold-dark);
  font-size: 0.8rem;
  margin-top: 3px;
  transition: transform 0.3s;
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
}

.faq-a {
  display: none;
  padding: 20px 24px 20px 48px;
  background: var(--cream);
  border-top: 1px solid #e8e0d0;
  font-size: 0.9rem;
  color: #555;
  line-height: 2;
}

.faq-item.open .faq-a {
  display: block;
}

/* ---------- 最後のCTA ---------- */
.deadline-container {
  text-align: center;
  margin: 40px 0 24px;
}

.deadline-container--mt {
  margin-top: 56px;
}

.deadline-container .deadline-alert {
  display: inline-block;
  background: #fff5f5;
  border: 1px solid #f0b0a0;
  border-radius: 6px;
  padding: 10px 24px;
  font-family: var(--serif);
  /* 元CSSには font-size: 1rem もあるが、.deadline-alert 側の 0.92rem が勝っていたので入れない */
  color: var(--red);
  font-weight: 700;
  margin-bottom: 8px;
}

.deadline-container .deadline-message {
  font-size: 0.87rem;
  color: #777;
}

.final-cta-box {
  max-width: 640px;
  margin: 56px auto 0;
  padding: 28px 32px 32px;
  background: linear-gradient(135deg, #fff5f5, #fff);
  border: 1px solid #f0b0a0;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(231, 75, 60, 0.08);
}

.final-cta-box .deadline-container {
  margin: 0 0 18px;
}

.final-cta-box .deadline-alert {
  margin: 16px 0 8px;
}

.final-cta-box .deadline-message {
  margin: 0;
}

.final-cta-box .cta-center {
  margin: 0;
}

.final-cta-box .btn-primary,
.cta-center--wide .btn-primary {
  max-width: 520px;
}

/* ============================================================
   セクション2〜4のタブレット・スマホ調整
   ============================================================ */
/* AFFINGER由来：テーマの記事設定は600px以上で行間30px、それ未満は32px
   （32pxは上の各ルールで指定済み）。 */
@media (min-width: 600px) {
  .hero-checklist li,
  .limited-slots {
    line-height: 30px;
  }
  /* 特典ボックスの見出しだけ 600〜959px では 32px */
  .benefit-body h3 {
    line-height: 32px;
  }
}

/* AFFINGER由来：特典ボックスは960px以上で行間が30pxに揃う */
@media (min-width: 960px) {
  .benefit-body h3,
  .benefit-body p {
    line-height: 30px;
  }
}

@media (max-width: 1200px) {
  .voice-section .section-inner-wide {
    padding: 0 54px;
  }
  .voice-track {
    margin: -16px -8px -30px;
    padding: 16px 0 30px;
  }
  .voice-card {
    min-height: 560px;
    padding: 44px 36px 40px;
  }
  .voice-prev {
    left: -42px;
  }
  .voice-next {
    right: -42px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 72px 18px;
  }
  .section-inner,
  .section-inner-wide {
    width: 100%;
  }
  .yt-section-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .concept-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .works-grid {
    grid-template-columns: 1fr;
  }
  /* 講師紹介：PCのコラージュをやめ、1枚の横長写真を見出しの下に置く。
     元CSSにはここに .teacher-section { padding-bottom: 32px } もあったが、
     後続の .section 一括指定に打ち消されて効いていなかったので持ち込まない。 */
  .teacher-section::before {
    top: -58px;
    height: 150px;
  }
  .teacher-section + .deco-line-thin-wrap {
    margin-top: 0;
  }
  .teacher-section + .deco-line-thin-wrap + .section--pt-sm {
    padding-top: 56px;
  }
  .teacher-grid {
    grid-template-columns: 1fr;
  }
  .teacher-img-wrap {
    display: none;
  }
  .teacher-mobile-photo {
    order: -1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 22px auto 26px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  }
  .teacher-mobile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    display: block;
  }
  /* 6つの特徴：多くのグリッドを1列（添削の流れだけ2列）に落とす */
  .curriculum-box {
    padding: 24px 20px;
  }
  .curriculum-grid {
    grid-template-columns: 1fr;
  }
  .system-grid {
    grid-template-columns: 1fr;
  }
  .tensaku-wrap {
    grid-template-columns: 1fr;
  }
  .tensaku-flow {
    grid-template-columns: 1fr 1fr;
  }
  .seminar-container {
    grid-template-columns: 1fr;
  }
  .seminar-features {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }
  .seminar-feature-item p {
    padding-left: 0;
  }
  /* デジタルスキル：右の画像をやめ、見出しの下に1枚置く */
  .digital-wrap {
    grid-template-columns: 1fr;
  }
  .digital-img-wrap {
    display: none;
  }
  .digital-mobile-photo {
    display: block;
    width: 100%;
    margin: 18px 0 22px;
  }
  .digital-mobile-photo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .digital-deco {
    opacity: 0.4;
  }
  .exhibition-section {
    margin-bottom: 72px;
  }
  .exhibition-heading {
    margin-top: 56px;
  }
  .exhibition-showcase {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 28px 0 32px;
  }
  .exhibition-copy {
    border-left: 0;
    padding-left: 0;
  }
  /* 理論・料金：2列を1列へ（入会の流れだけ2列） */
  .theory-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .theory-masked-img {
    height: auto;
  }
  .apply-flow {
    grid-template-columns: 1fr 1fr;
  }
  /* このセクションだけ左右の余白は section-inner-wide 側で取るため 0 に戻す */
  .voice-section {
    padding: 66px 0 42px;
  }
  .voice-section .section-inner-wide {
    padding: 0 18px;
  }
  .voice-card {
    min-height: 430px;
    padding: 34px 28px 32px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.85) inset,
      0 10px 24px rgba(48, 38, 24, 0.075);
  }
  .voice-card h3 {
    font-size: 1rem;
    line-height: 1.58;
  }
  .voice-card p {
    font-size: 0.9rem;
    line-height: 1.95;
  }
  .voice-nav {
    font-size: 54px;
  }
  .voice-prev {
    left: -12px;
  }
  .voice-next {
    right: -12px;
  }
}

@media (max-width: 640px) {
  .cta-center .btn-primary,
  .final-cta-box .btn-primary {
    max-width: none;
  }
  /* 特典ボックス：3列を縦積みにし、右のチェックリストは上に線を引く */
  .benefit-box {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .benefit-illust {
    justify-content: flex-start;
  }
  .benefit-illust svg {
    max-width: 72px;
  }
  .benefit-list {
    border-left: 0;
    border-top: 1px solid #e8e0d0;
    padding-left: 0;
    padding-top: 20px;
  }
  .final-cta-box {
    padding: 22px 18px 24px;
    margin-top: 40px;
  }
}

/* 【本番からの意図的な変更】本番は 560px 以上で3枚表示のままのため、
   560〜768px でカードが細くなりすぎ、見出しが1文字ずつ縦に折り返して読めなくなっていた。
   ここでは 768px 以下をすべて1枚表示にして、その崩れを解消している。 */
@media (max-width: 768px) {
  /* 1枚表示＋両端のカードを少し覗かせる。
     トラックを左右18pxずつ広げ、その分だけ項目を狭めることで、
     真ん中のカードは本文の幅にそろえたまま両隣が見えるようにしている。 */
  .voice-track {
    margin-left: -18px;
    margin-right: -18px;
  }
  .voice-item {
    flex: 0 0 calc(100% - 36px);
    scroll-snap-align: center;
  }
}

@media (max-width: 540px) {
  .worries-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}