/* =========================================================
   daito-gakki — 共有スタイル
   _rule.html と各テンプレートが同じこのファイルを読む。
   ここを直すとカタログと本番が同時に変わる（カタログが嘘をつかない）。
   ========================================================= */

/* ---- デザイントークン（色はブランド確認前の仮） ---- */
:root {
  /* 色 */
  --color-bg: #ffffff;
  --color-text: #2a2722;
  --color-muted: #7a746b;
  --color-primary: #1a3a6b; /* 仮：信頼感のある紺 */
  --color-accent: #2eb1e0;
  --color-line: #e6e1d8;
  --gray: #f2f2f2;
  /* トーンパレット（tone-blue #2eb1e0 基準の同トーン） */
  --color-tone-navy: #033f63;
  --color-tone-blue: #2eb1e0;
  --color-tone-green: #009b97;
  --color-tone-yellow: #ddbc42; /* オレンジと緑の間 */
  --color-tone-orange: #e89838;
  --color-tone-pink: #e0546e;
  --color-tone-purple: #9d44b5;
  /* 薄色トーンパレット（背景など。blueは指定値、他は仮） */
  --color-pale-navy: #eef5fa;
  --color-pale-blue: #f2fcff;
  --color-pale-accent: #f2fcff; /* アクセント連動の薄下地（is-pink等で差し替え） */
  --color-pale-green: #eefcfb;
  --color-pale-yellow: #fefaec;
  --color-pale-orange: #fef5ec;
  --color-pale-pink: #fef0f3;
  --color-pale-purple: #faf0fc;

  /* 文字 */
  --font-sans: "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Montserrat", sans-serif; /* 英語表記用 */
  --fs-xs: 1.2rem;
  --fs-sm: 1.4rem;
  --fs-base: 1.6rem;
  --fs-lg: 2rem;
  --fs-xl: 2.8rem;
  --fs-2xl: 4rem;
  --fs-h2: clamp(2.2rem, 2.6vw, 3.3rem);
  --fs-h4: clamp(2rem, calc(2.6vw - 0.2rem), 2.4rem); /* 見出し3・4共通 */
  --fs-h3: var(--fs-h4);
  --lh-base: 1.8;
  --lh-tight: 1.3;
  --lh-lead: 2.5; /* リード/本文の標準行間 */

  /* 余白・レイアウト */
  --inner: 120rem; /* コンテンツ最大幅 */
  --gutter: 4rem; /* 左右の余白 */
  --side: clamp(1.6rem, 6vw, 8rem);
  --space-sec: 12rem; /* セクション縦余白（bottom のみに使う。top は付けない） */
  --space-sec-half: calc(var(--space-sec) / 2); /* SP の 6rem にも自動追従 */
  --radius: 0.8rem;
}
/* スマホでは全セクションの縦余白を半分に（一括調整） */
@media screen and (max-width: 768px) {
  :root {
    --fs-base: 1.5rem;
    --space-sec: 6rem;
    --lh-lead: 2; /* 狭い画面で行間が空きすぎるため詰める */
  }
}

/* ---- リセット & ベース ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
} /* 1rem = 10px */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}

main {
  /* 100vw の全幅セクションのはみ出しを切る。hidden にすると position:sticky が効かなくなるので clip */
  overflow-x: clip;
}
section,
article {
  position: relative;
}

/* ---- 配色モディファイア：付けた要素以下のアクセントをピンクへ（帯・表の下地は pale-pink） ---- */
.is-pink {
  --color-accent: var(--color-tone-pink);
  --color-pale-accent: var(--color-pale-pink);
}
.is-pink .page-hero {
  background: var(--color-pale-accent);
}
.is-pink .page-hero::before {
  background-image: url(../images/bg02_pink.svg);
}
.is-pink .page-hero::after {
  background-image: url(../images/bg04_pink.svg);
}
.is-purple {
  --color-accent: var(--color-tone-purple);
  --color-pale-accent: var(--color-pale-purple);
}
.is-purple .page-hero {
  background: var(--color-pale-accent);
}
.is-purple .page-hero::before {
  background-image: url(../images/bg09_pur.svg);
}
.is-purple .page-hero::after {
  /* 紫の装飾素材は bg09_pur のみなので左右反転して使い回す */
  background-image: url(../images/bg09_pur.svg);
  transform: scaleX(-1);
}
/* ネイビーは専用装飾が無いので page-hero のデフォルト（青）装飾をそのまま使う */
.is-navy {
  --color-accent: var(--color-tone-navy);
  --color-pale-accent: var(--color-pale-navy);
}
.is-navy .page-hero {
  background: var(--color-pale-accent);
}
/* ブルーは page-hero のデフォルト配色そのもの。トークンだけ明示しておく */
.is-blue {
  --color-accent: var(--color-tone-blue);
  --color-pale-accent: var(--color-pale-blue);
}
.is-blue .page-hero {
  background: var(--color-pale-accent);
}
.is-green {
  --color-accent: var(--color-tone-green);
  --color-pale-accent: var(--color-pale-green);
}
.is-green .page-hero {
  background: var(--color-pale-accent);
}
.is-green .page-hero::before {
  background-image: url(../images/bg06_green.svg);
}
.is-green .page-hero::after {
  background-image: url(../images/bg07_green.svg);
}
/* オレンジ専用の装飾素材が無いので、色味が最も近い黄色素材を流用 */
.is-orange {
  --color-accent: var(--color-tone-orange);
  --color-pale-accent: var(--color-pale-orange);
}
.is-orange .page-hero {
  background: var(--color-pale-accent);
}
.is-orange .page-hero::before {
  background-image: url(../images/bg01_yell.svg);
}
.is-orange .page-hero::after {
  background-image: url(../images/bg05_yell.svg);
}
/* レンタルスペースDAITO 専用。屋号の指定色が既存のオレンジ(#e89838)より濃いため、
   トーンパレットを流用せずここだけ実値を持つ。装飾素材はオレンジと同じ黄色を流用 */
.is-rental {
  --color-accent: #e05600;
  --color-pale-accent: #fdf2ea;
  /* 1枚に情報を詰め込むページなので、既定の1200pxより狭くして1行を読みやすく */
  --inner: 104rem;
}
.is-rental .page-hero {
  background: var(--color-pale-accent);
}
.is-rental .page-hero::before {
  background-image: url(../images/bg01_yell.svg);
}
.is-rental .page-hero::after {
  background-image: url(../images/bg05_yell.svg);
}
/* アイコン見出しは既定で下余白を持たないので、続くカードとの間を空ける */
.is-rental .c-icon-heading {
  margin-bottom: 3rem;
}
/* 比べる対象はスタジオとルームなので、塗りを列見出しから行見出しへ移す */
.is-rental .c-data-table thead th {
  background: var(--color-pale-accent);
  color: var(--color-accent);
}
/* 左上が空のときだけ、行見出しの列と同じ塗りにして角を揃える */
.is-rental .c-data-table thead th:empty {
  background: var(--color-accent);
}
.is-rental .c-data-table tbody th {
  background: var(--color-accent);
  color: #fff;
}
/* 中央寄せリードと表が続くので、間に余白を入れて塊を分ける */
.is-rental .p-goods__top-copy + .c-data-table-wrap,
.is-rental .c-data-table-wrap + .p-goods__top-copy {
  margin-top: 4rem;
}
/* 表のあとの一文は「次はここを読む」の道しるべなので、地色を敷いて目立たせる */
.is-rental .c-data-table-wrap + .p-goods__top-copy {
  padding: 2.4rem 2rem;
  background: var(--color-pale-accent);
}
/* FVのタイトル上に置く屋号ロゴ。原寸292pxまで */
/* 箱が画像より広がると白フチだけが伸びるので、幅は中身に合わせる */
.c-lp-hero__logo {
  width: fit-content;
  max-width: 25rem;
  margin: 0 0 1.6rem;
}
.c-lp-hero__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* ロゴの文字が濃いグレーなので、写真に沈まないよう白で縁取る */
  box-shadow: 0 0 0 8px #fff;
}
/* 導入文の行間はページ内で揃える（p-goods__top-text と同じ 2） */
.is-rental .p-avitecs__text {
  line-height: 2;
}
/* 店舗が1件だけなので、PCでも2カラムにせず1枚で見せる */
.is-rental .c-classroom-list {
  grid-template-columns: 1fr;
}
/* 申込み導線はページ末尾のCTAなので、アクセント色でベタ塗りにする */
.is-rental #toiawase.p-avitecs__section--bg {
  background: var(--color-accent);
  color: #fff;
}
.is-rental #toiawase .c-sns-links__icon {
  filter: brightness(0) invert(1);
}
/* ボタン内の余白は c-link-button 側が持つので、この場所の上下余白は消す */
.is-rental #toiawase .c-link-button {
  margin-block: 0;
  border-color: #fff;
}
/* 地色はセクション側（--bg）が持つので、カードは背景も余白も持たない */
.is-rental .c-classroom-item {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.is-rental #toiawase .c-classroom-list {
  margin-bottom: 0;
}
/* 営業時間・定休日は項目名を上に置いて縦積み */
.is-rental .c-classroom-item__schedule {
  display: block;
}
.is-rental .c-classroom-item__schedule dt {
  margin-top: 1.6rem;
}
/* 1カラムだと flex のままでは横いっぱいに伸びるので、文字幅のボタンにして中央へ */
.is-rental .c-classroom-item__link {
  display: inline-flex;
  width: fit-content;
  margin: 1.2rem auto 0;
}
/* 案内文とボタンは1セットなので間を詰める */
.is-rental .c-classroom-item .p-avitecs__text--center {
  margin-bottom: 0;
}
/* ロゴと申込み導線だけなので1列。それぞれ中央に置く */
.is-rental .c-classroom-item--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.is-rental .c-classroom-item__col {
  display: flex;
  flex-direction: column;
}
/* 申込み導線は全列にまたがる帯。罫線で情報部分と分ける */
.is-rental .c-classroom-item__contact {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}
.is-rental .c-classroom-item__contact > p {
  flex-basis: 100%;
  margin: 1.6rem 0 0;
  text-align: center;
}
.is-rental .c-classroom-item__contact .c-classroom-item__link {
  margin: 0;
}
/* ロゴは全列にまたがって中央に置く */
.is-rental .c-classroom-item__logo {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 29.2rem;
  margin: 0 auto;
}
/* 店名・住所・SNSは1つの塊として詰める */
.is-rental .c-classroom-item__name {
  margin-bottom: 0.4rem;
}
.is-rental .c-classroom-item__address {
  margin-top: 0;
}
.is-rental .c-classroom-item__col .c-sns-links {
  margin-top: 0.4rem;
}
/* 先頭の dt は上余白なし（縦積み時の間隔調整用の余白を打ち消す） */
.is-rental .c-classroom-item__schedule dt:first-child {
  margin-top: 0;
}
.is-rental .c-classroom-item__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* ロゴの文字が濃いグレーなので、地色から浮かせるため白で縁取る */
  box-shadow: 0 0 0 8px #fff;
}
@media screen and (max-width: 900px) {
  .is-rental .c-classroom-item--split {
    grid-template-columns: 1fr;
  }
}
/* SPは1行が画面幅を超えるので、行の nowrap を解いて自然に折り返す */
@media screen and (max-width: 767px) {
  /* FVは文字が主役なので、ロゴはPCの半分に */
  .is-rental .c-lp-hero__logo {
    max-width: 12.5rem;
  }
  .is-rental .p-goods__top-text-line {
    white-space: normal;
  }
  /* 行見出しが1文字ずつ折り返すのを防ぐ */
  .is-rental .c-data-table tbody th {
    white-space: nowrap;
  }
  /* 設備の注記と次のブロックがくっつくので間を空ける */
  .is-rental .p-avitecs__room .c-note {
    margin-bottom: 3rem;
  }
  /* SPは1行が短く、中央寄せでは行頭が揃わず読みにくい */
  .is-rental .p-avitecs__text--center,
  .is-rental .c-frame-box__text,
  .is-rental .p-goods__top-text {
    text-align: left;
  }
}
/* スペック表が縦積みになる幅では、見出しセルを行幅いっぱいに戻す */
@media screen and (max-width: 600px) {
  .is-rental .p-avitecs__room-cols .c-spec-table th {
    width: auto;
    white-space: normal;
  }
}
/* 営業時間の注記は補足なので小さく、列幅に収めて1行のまま出す */
.is-rental .c-classroom-item__col .c-note {
  font-size: 1.2rem;
  white-space: nowrap;
}
/* SNSはボタンの下に中央で置く */
.is-rental .c-classroom-item .c-sns-links {
  flex-basis: 100%;
  justify-content: center;
  margin-top: 1rem;
}
/* 店舗ページ用の外余白（120px 80px）は l-inner の中では不要 */
.is-rental .p-shop {
  padding: 0;
}
/* 分割地図は aspect-ratio を外しているため iframe が既定の150pxになる。
   隣の地図画像と高さを合わせる */
.is-rental .p-shop__map--split .p-shop__map-embed iframe {
  height: 100%;
}
/* タイムテーブルの帯見出しは注記の続きなので、文字だけ左に寄せる */
.is-rental #timetable .p-avitecs__band-heading {
  text-align: left;
}
/* 見出し＋本文の塊と、次の小見出し・ボタンがくっつくので間を空ける */
.is-rental .p-heading-text__body {
  margin-bottom: 4rem;
}
.is-rental .c-link-button {
  margin-block: 2.4rem 4rem;
}
/* 注釈のすぐ下にトグルが続くので間を空ける */
.is-rental .c-note:has(+ .wp-block-details) {
  margin-bottom: 3rem;
}
/* 薄アクセント地のセクションに置くので、トグルは白地の箱にする */
.is-rental .wp-block-details {
  padding: 1rem 2.4rem 2.4rem;
  background: var(--color-bg);
}
.is-rental .wp-block-details summary {
  padding-inline: 0 3.2rem;
  border-top: 0;
}
/* トグルの中は白地なので、帯を白に返す --bg の指定を戻す */
.is-rental .wp-block-details .c-spec-card__specs {
  background: var(--color-pale-accent);
}
/* 教室カードは写真を主役にせず、教室名の左に小さく添える。
   横並びにするのは写真と教室名だけで、本文以下はカード幅いっぱいに使う */
.is-rental .c-spec-card__head {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
}
/* contain で出る余白に共通ルールのグレー地が見えてしまうので消す */
.is-rental .c-spec-card__media {
  background: none;
}
.is-rental .c-spec-card__media > img {
  aspect-ratio: 1;
  /* 教室のロゴや横長写真が多く、切ると内容が読めなくなるので全体を収める */
  object-fit: contain;
}
/* カード全体がリンクなので、ボタンは見た目だけの span。色はページのアクセントに追従 */
.is-rental .c-arrow-link {
  --clb: var(--color-accent);
}
/* 現行サイト踏襲の帯見出し。アクセント地に白文字で中央 */
.p-avitecs__band-heading {
  margin: 0 0 2rem;
  padding: 1rem 2rem;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* スタジオとルームを見比べられるよう横2列に。中の表は列幅に収める */
/* 列幅は写真の原寸440pxに合わせる（写真だけ細く見えるのを防ぐ） */
.p-avitecs__room-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 44rem));
  justify-content: center;
  gap: 6rem;
}
.p-avitecs__room-cols .p-avitecs__room-photo {
  max-width: none;
}
.p-avitecs__room-cols .c-data-table {
  min-width: 0;
}
/* 時刻や金額が途中で折れると読み違えるので、セルの余白を削って1行に収める */
.p-avitecs__room-cols .c-data-table th,
.p-avitecs__room-cols .c-data-table td {
  padding: 1.2rem 0.8rem;
  white-space: nowrap;
}
/* 見出し列は文言の長さぶんだけ取り、残りを本文側に回して折り返しを減らす */
.p-avitecs__room-cols .c-spec-table th {
  width: 1%;
  white-space: nowrap;
}
.p-avitecs__room-cols .c-spec-table th,
.p-avitecs__room-cols .c-spec-table td {
  padding-inline: 1rem;
}
@media screen and (max-width: 768px) {
  .p-avitecs__room-cols {
    grid-template-columns: 1fr;
  }
}
/* 部屋写真は原寸440pxまで。それ以上は伸ばさず中央に置く */
.p-avitecs__room-photo {
  margin: 2rem auto;
  max-width: 44rem;
}
.p-avitecs__room-photo img {
  width: 100%;
  height: auto;
}
/* フロアマップは原寸738pxまで。それ以上は伸ばさず中央に置く */
.p-avitecs__floor {
  margin: 4rem auto 0;
  max-width: 73.8rem;
  text-align: center;
}
.p-avitecs__floor img {
  width: 100%;
  height: auto;
}
/* 額縁ボックスの中に表を挟むときは、前後の文と表がくっつくので間を空ける */
.is-rental .c-frame-box .c-spec-table {
  margin-block: 2.4rem;
}
/* 導入セクションはFV直下で末尾も帯が区切りになるので、上下とも詰める */
.is-rental #about.p-avitecs__section {
  padding-block: 3rem;
}
/* 枠ボックス単体のセクションは、箱の枠線が余白の代わりになるので外側を詰める */
.is-rental .p-avitecs__section:has(> .l-inner > .c-frame-box) {
  padding-block: 3rem 6rem;
}
.is-rental .p-avitecs__section > .l-inner > .c-frame-box {
  margin-bottom: 0;
}

/* ---- レイアウト土台 ---- */
.l-inner {
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: 2rem;
}
.l-section {
  padding-bottom: var(--space-sec);
} /* 背景なし：bottom のみ（削除時に隙間が残らない） */
.l-section--bg {
  padding-top: var(--space-sec);
  padding-bottom: var(--space-sec);
} /* 背景あり：上下とも指定 */

/* =========================================================
   HERO（背景=Splideフェードスライド＋グラデ円にうち文字）
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 6rem;
}
.hero__bg {
  position: relative;
  z-index: 0;
  /* 中身の aspect-ratio 高さが端数でヒーローより高くなり、下にはみ出すのを防ぐ */
  overflow: hidden;
}
.hero__bg .splide__track,
.hero__bg .splide__list,
.hero__bg .splide__slide,
.hero__bg picture {
  width: 100%;
  aspect-ratio: 1440 / 810;
}
.hero__bg picture {
  display: block;
}
.hero__bg img {
  width: 100%;
  object-fit: cover;
  /* 窓が大きい時は上側を切り、写真の下端は常に見せる */
  object-position: center bottom;
  display: block;
}
/* スライダー写真の上に重ねる前面デザイン画像（円テキストより背面） */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__overlay picture {
  display: block;
  width: 100%;
}
/* height:auto だと端数の丸め差で下に隙間が出るため、親の高さに合わせて cover */
.hero__overlay img {
  width: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}
/* グラデ円＋うち文字（円は中央より右寄せ。PCはサイズ固定＝ウィンドウ幅では縮まない） */
.hero__circle {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 73%;
  transform: translate(-50%, -50%);
  width: 48rem;
  aspect-ratio: 1;
  background: url("../images/hero_bg.png") center / contain no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4.4rem;
}
.hero__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1.2;
  color: var(--color-primary);
}
.hero__since {
  margin-top: 0.4rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  color: var(--color-primary);
}
.hero__ttl {
  margin-top: 1rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}
.hero__lead {
  margin-top: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.9;
  color: #fff;
}
.hero__lead--pc {
  display: block;
  margin-top: 3rem;
  padding-inline: 2rem;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.1;
  color: var(--color-primary);
}
.hero__lead--sp {
  display: none;
  margin-top: 3rem;
  padding-inline: 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.1;
  color: var(--color-primary);
}
@media (max-width: 767px) {
  /* SP：縦写真を丸ごと見せ、円は右上・帯とリードは写真の下に流す */
  .hero {
    height: auto;
    aspect-ratio: auto;
  }
  .hero__bg {
    position: relative;
    inset: auto;
    overflow: hidden; /* 装飾円のはみ出しを写真の範囲で切る */
  }
  .hero__bg .splide__track,
  .hero__bg .splide__list,
  .hero__bg .splide__slide,
  .hero__bg picture {
    aspect-ratio: 375 / 476;
  }
  .hero__bg img {
    height: auto;
    object-fit: unset;
  }
  /* SP：前面デザイン画像は下端そろえ＋自然な高さ（object-fitの隙間を出さない） */
  .hero__overlay {
    top: auto;
    bottom: 0;
    height: auto;
  }
  .hero__overlay picture,
  .hero__overlay img {
    height: auto;
    object-fit: unset;
  }
  .hero__circle {
    top: 12rem;
    left: auto;
    right: 1.2rem;
    transform: none;
    width: min(20rem, 68vw);
    padding: 2.4rem;
  }
  .hero__en {
    font-size: 2.1rem;
  }
  .hero__since {
    margin-top: 0.2rem;
    font-size: 1rem;
  }
  .hero__ttl {
    margin-top: 1rem;
    font-size: 1.8rem;
    line-height: 1.4;
  }
  .hero__lead--pc {
    display: none;
  }
  /* リード文は写真の下・紺文字 */
  .hero__lead--sp {
    display: block;
    font-size: 1.2rem;
  }
}

/* =========================================================
   コンポーネント（ここに増やしていく。増やしたら _rule.html にも登録）
   ========================================================= */

/* ---- セクション見出し: c-heading（英語=大・日本語=小） ---- */
.c-heading {
  text-align: center;
  margin-bottom: 6rem;
}
/* SPは画面が狭く6remだと見出しと本文が離れすぎる。--space-sec と同じく半分にする */
@media screen and (max-width: 768px) {
  .c-heading {
    margin-bottom: 3rem;
  }
}
.c-heading__en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(3.6rem, 5vw, 6.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
}
.c-heading__ja {
  display: block;
  margin-top: 1.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
/* サブ見出し（説明文）：英語見出しの下に添える1行リード。短いラベルの__jaより長文向け */
.c-heading__lead {
  display: block;
  margin-top: 3.2rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: var(--lh-lead);
  color: var(--color-text);
}
/* 左寄せバリエーション（左カラム見出し等） */
.c-heading--left {
  text-align: left;
}

/* ---- 見出し2: c-icon-heading（Iconoirアイコン＋横棒＋文言） ---- */
.c-icon-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
}
.c-icon-heading__icon {
  flex-shrink: 0;
  font-size: 2.4rem;
  line-height: 1;
}
.c-icon-heading__bar {
  flex-shrink: 0;
  width: 5rem;
  height: 1px;
  background: currentColor;
}
.c-icon-heading__text {
  flex-basis: 100%;
  min-width: 0;
}
/* 色バリエーション */
/* ページのアクセント色（is-blue 等）に追従させたいとき */
.c-icon-heading--accent {
  color: var(--color-accent);
}
.c-icon-heading--blue {
  color: var(--color-tone-blue);
}
.c-icon-heading--pink {
  color: var(--color-tone-pink);
}
.c-icon-heading--green {
  color: var(--color-tone-green);
}
.c-icon-heading--orange {
  color: var(--color-tone-orange);
}
.c-icon-heading--purple {
  color: var(--color-tone-purple);
}
/* navy は lesson_accent（レッスン案内）でのみ選べる。基底に色指定が無いので明示が要る */
.c-icon-heading--navy {
  color: var(--color-tone-navy);
}

/* ---- 見出し3: アイコン・棒線なし ---- */
.c-heading-h3,
.c-heading-h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
}

/* ---- 見出し4: 左にアクセント棒（横棒 11×3px・角丸） ---- */
.c-heading-h4 {
  display: flex;
  align-items: flex-start;
}
/* 色バリエーション（c-icon-heading と同じ切替） */
.c-heading-h4--accent {
  color: var(--color-accent);
}
.c-heading-h4--blue {
  color: var(--color-tone-blue);
}
.c-heading-h4--pink {
  color: var(--color-tone-pink);
}
.c-heading-h4--green {
  color: var(--color-tone-green);
}
.c-heading-h4--orange {
  color: var(--color-tone-orange);
}
.c-heading-h4--purple {
  color: var(--color-tone-purple);
}
.c-heading-h4::before {
  content: "";
  flex-shrink: 0;
  width: 1.1rem;
  height: 0.3rem;
  margin-right: 1rem;
  border-radius: 1rem;
  background: currentColor;
  transform: translateY(calc(0.5lh - 0.15rem));
}

/* 縦書きバリエーション：英語(大)を左、日本語(小)を右に縦組み */
.c-heading--vertical {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.4rem;
  margin-bottom: 0;
  text-align: initial;
}
.c-heading--vertical .c-heading__en {
  writing-mode: vertical-rl;
}
.c-heading--vertical .c-heading__ja {
  writing-mode: vertical-rl;
  margin-top: 0;
}
/* SPは横書きに切り替え（英語＋日本語を横並び） */
@media screen and (max-width: 768px) {
  .c-heading--vertical {
    align-items: center;
    gap: 1.2rem;
  }
  .c-heading--vertical .c-heading__en {
    writing-mode: horizontal-tb;
  }
  .c-heading--vertical .c-heading__ja {
    writing-mode: horizontal-tb;
  }
}

/* 縦書きバリエーション2：PCは縦組み（英語左・日本語右）、SPは横書きで英語→日本語の縦積み */
.c-heading--vertical-stack {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.4rem;
  margin-bottom: 0;
  text-align: initial;
}
.c-heading--vertical-stack .c-heading__en {
  writing-mode: vertical-rl;
}
.c-heading--vertical-stack .c-heading__ja {
  writing-mode: vertical-rl;
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .c-heading--vertical-stack {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.8rem;
  }
  .c-heading--vertical-stack .c-heading__en {
    writing-mode: horizontal-tb;
  }
  .c-heading--vertical-stack .c-heading__ja {
    writing-mode: horizontal-tb;
  }
}

/* ---- ボタン: c-link-button（枠線＋右に矢印。hoverでaccent塗り＋文字反転） ---- */
.c-link-button {
  --clb: var(--color-accent); /* ボタン色（モディファイアで切替）。矢印もcurrentColorで追従 */
  display: inline-flex;
  z-index: 1;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 27rem;
  height: 5.4rem;
  padding-right: 3.5rem;
  border: 1px solid var(--clb);
  background: var(--color-bg);
  color: var(--clb);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.4s;
}
.c-link-button::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 101%;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  background: var(--clb);
  transition: transform 0.4s;
}
.c-link-button:hover {
  color: var(--color-bg);
}
.c-link-button:hover::before {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}
/* 色バリエーション */
.c-link-button--blue {
  --clb: var(--color-tone-blue);
}
.c-link-button--pink {
  --clb: var(--color-tone-pink);
}
.c-link-button--green {
  --clb: var(--color-tone-green);
}
.c-link-button--orange {
  --clb: var(--color-tone-orange);
}
.c-link-button--purple {
  --clb: var(--color-tone-purple);
}
/* 公開日時前：グレー。PHP側が a ではなく span で出すのでリンクにはならない */
.c-link-button--wait {
  --clb: var(--color-muted);
  cursor: default;
}
.c-link-button--wait:hover {
  color: var(--clb);
}
.c-link-button--wait:hover::before {
  transform: scaleX(0);
}
.c-link-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 3.5rem;
  font-size: 2.2rem;
}
/* PC は内容に合わせて伸ばし、長い文言でも折り返さない（矢印分だけ左右にパディング） */
@media screen and (min-width: 769px) {
  .c-link-button {
    width: fit-content;
    min-width: 27rem;
    max-width: 100%;
    padding-left: 3.5rem;
    padding-right: 6.5rem;
    white-space: nowrap;
  }
}

@media screen and (max-width: 768px) {
  /* SPは PC と違い nowrap しないので、狭い枠で2行になっても
     文字が枠に貼り付かないよう高さは下限だけ決める */
  .c-link-button {
    width: 29.5rem;
    max-width: 100%;
    min-height: 5rem;
    height: auto;
    padding-block: 0.8rem;
  }
  .c-link-button__icon {
    right: 1.9rem;
    font-size: 1.8rem;
  }
}

/* アイコンを文字の左に置く版（電話番号ボタンなど）。
   絶対配置をやめて row-reverse で並べるので、文字数に応じて幅が伸びる */
.c-link-button--icon-left {
  flex-direction: row-reverse;
  gap: 0.8rem;
  padding-right: 0;
  padding-inline: 3.5rem;
}
.c-link-button--icon-left .c-link-button__icon {
  position: static;
  right: auto;
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1;
}

/* ---- 丸矢印ボタン: c-circle-arrow（〇に→。accent枠・白背景・hoverで塗り） ---- */
.c-circle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.6rem;
  height: 5.6rem;
  border: 1px solid var(--tone, var(--color-accent));
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--tone, var(--color-accent));
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.c-circle-arrow [class^="iconoir-"] {
  font-size: 2.2rem;
}
.c-circle-arrow:hover,
a:hover .c-circle-arrow {
  background: var(--tone, var(--color-accent));
  color: var(--color-bg);
}
.c-circle-arrow--sm {
  width: 3rem;
  height: 3rem;
}
.c-circle-arrow--sm [class^="iconoir-"] {
  font-size: 1.4rem;
}

/* ---- 多文字ボタン: c-text-button（テキスト＋小丸矢印を横並び・背景塗り） ---- */
.c-text-button {
  --tbtn: var(--color-accent); /* ボタン色（モディファイアで切替） */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 28rem;
  max-width: 100%;
  padding: 1rem 1.2rem 1rem 2.4rem;
  background: var(--tbtn);
  color: var(--color-bg);
  font-weight: 700;
  line-height: 1.3;
  transition: opacity 0.3s ease;
}
.c-text-button:hover {
  opacity: 0.85;
}
/* 内側の丸矢印はボタン色に追従（白地に色矢印） */
.c-text-button .c-circle-arrow {
  --tone: var(--tbtn);
}
/* 色バリエーション */
.c-text-button--blue {
  --tbtn: var(--color-tone-blue);
}
.c-text-button--pink {
  --tbtn: var(--color-tone-pink);
}
.c-text-button--green {
  --tbtn: var(--color-tone-green);
}
.c-text-button--orange {
  --tbtn: var(--color-tone-orange);
}
.c-text-button--purple {
  --tbtn: var(--color-tone-purple);
}
/* 公開日時前：グレー。PHP側が a ではなく span で出すのでリンクにはならない */
.c-text-button--wait {
  --tbtn: var(--color-muted);
  cursor: default;
}
.c-text-button--wait:hover {
  opacity: 1;
}
/* 小サイズ：小さい文字＋小丸矢印・ピル形（radius50px）・幅は内容なり。絞り込みリンク等 */
.c-text-button--sm {
  gap: 1.2rem;
  min-width: 0;
  width: fit-content;
  padding: 1rem 0.5rem 1rem 1.8rem;
  border-radius: 50px;
  background: var(--color-bg);
  color: var(--tbtn);
  box-shadow: inset 0 0 0 1px var(--tbtn);
  font-size: 1.8rem;
}
.c-text-button--sm .c-circle-arrow,
.c-text-button--sm:hover .c-circle-arrow {
  border: 0;
  background: transparent;
  color: inherit; /* ボタン文字色に追従（通常=アクセント色／hover・active=白） */
}
.c-text-button--sm.is-active,
.c-text-button--sm:hover {
  opacity: 1;
  background: var(--tbtn);
  color: var(--color-bg);
  box-shadow: none;
}

/* ---- 絞り込みボックス: c-filter-box（薄色地の角丸帯に c-text-button--sm を等幅で並べる） ---- */
.c-filter-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 1.2rem;
  margin: 0 0 5rem;
  padding: 2.5rem;
  border-radius: 1.6rem;
  background: var(--color-pale-accent); /* is-pink配下では薄ピンク */
}
.c-filter-box .c-text-button--sm {
  width: 100%;
}

/* ---- リンクリスト: b-link-list（ACFブロック。薄色地の枠に矢印リンクを折り返して並べる） ----
   カラムで組むと SP で「左列を全部→右列を全部」の順になるので、flex-wrap で左上から順に流す */
.b-link-list {
  /* page-hero のはみ出した擬似要素より前面に出す（p-section-wrap と同じ理由） */
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  margin: 0 0 5rem;
  padding: 2.5rem;
  border-radius: 1.6rem;
  background: var(--color-pale-accent);
}
/* p-section-wrap__inner が既に --side を持つので、中に入れたときの二重パディングを消す */
.p-section-wrap__inner .b-link-list__outer {
  padding-inline: 0;
}
/* ページ上部にジャンプリンクとして単体で置くとき（page-repair）。
   l-inner の 2rem では /contact/ より広くなるので、左右を --side にして
   p-section-wrap__inner 内に置いたときと同じ幅（1200-80*2=1040px）に揃える */
.b-link-list__outer--page-top {
  margin-top: 6rem;
  padding-inline: var(--side);
}
.b-link-list__item {
  flex: 0 1 calc(50% - 2rem);
}
/* 列数は PC のみ。記事本文（幅740px）だと 4rem の列間では文言が折り返すので、3・4列は列間を詰める。
   幅は 列間 × (列数-1) を引いて割る */
.b-link-list--col3,
.b-link-list--col4 {
  column-gap: 2rem;
}
.b-link-list--col3 .b-link-list__item {
  flex-basis: calc((100% - 4rem) / 3);
}
.b-link-list--col4 .b-link-list__item {
  flex-basis: calc((100% - 6rem) / 4);
}
/* イベント・お知らせ記事は p-event が既に左右余白を持つので、l-inner の余白を重ねない */
.p-event .b-link-list__outer {
  padding-inline: 0;
}
/* 色指定は is-pink 等と同じく2変数の差し替え。背景・文字・丸矢印がまとめて追従する */
.b-link-list--blue {
  --color-accent: var(--color-tone-blue);
  --color-pale-accent: var(--color-pale-blue);
}
.b-link-list--pink {
  --color-accent: var(--color-tone-pink);
  --color-pale-accent: var(--color-pale-pink);
}
.b-link-list--green {
  --color-accent: var(--color-tone-green);
  --color-pale-accent: var(--color-pale-green);
}
.b-link-list--orange {
  --color-accent: var(--color-tone-orange);
  --color-pale-accent: var(--color-pale-orange);
}
.b-link-list--purple {
  --color-accent: var(--color-tone-purple);
  --color-pale-accent: var(--color-pale-purple);
}
@media (max-width: 768px) {
  .b-link-list {
    gap: 1.6rem;
  }
  /* --col3/--col4 の指定より強くするため .b-link-list を前に付ける */
  .b-link-list .b-link-list__item {
    flex-basis: 100%;
  }
}

/* ---- テキスト＋丸矢印リンク: c-arrow-link（背景なし。文言＋小丸矢印を横並び） ---- */
.c-arrow-link {
  --clb: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--clb);
  font-weight: 700;
  text-decoration: none;
}
.c-arrow-link .c-circle-arrow {
  --tone: var(--clb);
}
.c-arrow-link--blue {
  --clb: var(--color-tone-blue);
}
.c-arrow-link--pink {
  --clb: var(--color-tone-pink);
}
.c-arrow-link--green {
  --clb: var(--color-tone-green);
}
.c-arrow-link--orange {
  --clb: var(--color-tone-orange);
}
.c-arrow-link--purple {
  --clb: var(--color-tone-purple);
}

/* ボタンの配置ラッパ（少／多文字ボタン共通。ボタンは inline なので text-align で寄せる） */
.c-btn-wrap {
  margin: 3rem 0;
  text-align: left;
}
/* テキスト矢印ボタンは余白なし */
.c-btn-wrap--flush {
  margin: 0;
}
.c-btn-wrap--center {
  text-align: center;
}
.c-btn-wrap--right {
  text-align: right;
}
/* ボタンを複数入れて縦に積む。inline-flex のボタンは並べても間隔が空かないので flex + gap で持つ */
.c-btn-wrap--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.c-btn-wrap--stack.c-btn-wrap--center {
  align-items: center;
}

/* ---- 動画埋め込み: c-video-embed（YouTube等のiframe。高さ指定がないと既定の150pxになるので比率で持つ） ---- */
.c-video-embed {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--color-text);
}
.c-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   ヘッダー header-05（component-stock より採用）
   淡色帯ヘッダー＋左ロゴ＋右2段ナビ＋2CTA／SP（≤1200px）は右ドロワー。
   トグルは .header.on（JSで付与）。本番は .header を position:fixed 化してもよい。
   ========================================================= */
/* ドロワーが閉じ位置(translateX(100%))で右にはみ出す横スクロールを防ぐ。
   overflow-x:clip はスクロールコンテナを作らないので、将来ヘッダーを sticky にしても壊れない（縦のドロワーは見える） */
/* PCヘッダーは上部固定（sticky）。ページ全体をスクロールコンテナとするため、外側の .header-05 を sticky に（内側 .header だと自身の高さ内でしか止まらない） */
.header-05 {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow-x: clip;
  font-family: var(--font-sans);
  color: var(--color-text);
}
/* mega-menuの絶対配置基準となるよう relative を維持 */
.header-05 .header {
  position: relative;
  width: 100%;
  background: var(--color-bg);
}
.header-05 a {
  color: inherit;
  text-decoration: none;
}
.header-05 .head-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 4rem;
  min-height: 11rem;
  transition: min-height 0.3s ease;
}
/* スクロール開始で上下を詰める */
.header-05.is-scrolled .head-wrap {
  min-height: 7rem;
}
.header-05 .head-l {
  width: fit-content;
  flex-shrink: 0;
  margin: 0;
  font-weight: inherit;
}
.header-05 .logo-daito img {
  display: block;
  width: auto;
  height: 4rem;
}
.header-05 .head-r nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.header-05 .head-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.header-05 .head-nav-t,
.header-05 .head-nav-b {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-05 .head-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.header-05 .head-nav .nav-tit {
  color: var(--color-text);
}
.header-05 .head-nav-t a [class^="iconoir-"] {
  font-size: 1.6rem;
  color: var(--color-muted);
}
.header-05 .head-nav-t .nav-tit {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-muted);
}
.header-05 .head-nav-b .nav-tit {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}
.header-05 .head-nav a:hover .nav-tit {
  opacity: 0.6;
}
/* 指導者の方へ：#033f63 のボーダー囲み。hoverで色反転（背景#033f63・文字白） */
.header-05 .head-nav-t a {
  padding: 0.1rem 1.6rem;
  border: 1px solid var(--color-primary);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.header-05 .head-nav-t a [class^="iconoir-"],
.header-05 .head-nav-t a .nav-tit {
  color: var(--color-primary);
}
.header-05 .head-nav-t a:hover {
  background: var(--color-primary);
}
.header-05 .head-nav-t a:hover [class^="iconoir-"],
.header-05 .head-nav-t a:hover .nav-tit {
  color: #fff;
  opacity: 1;
}
.header-05 .head-link {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.header-05 .head-link .link-box-def a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 9rem;
  height: 5rem;
  padding: 0 2.2rem;
  white-space: nowrap;
  background: var(--color-text);
  border: 1px solid var(--color-text);
  transition: opacity 0.3s ease;
}
.header-05 .head-link .link-box-def a:hover {
  opacity: 0.8;
}
.header-05 .head-link .link-tit {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-bg);
}
/* ボタン内アイコン：SVGをmaskで塗り、色は背景色で切替（濃ボタン上=白） */
.btn-ico {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  background: var(--color-bg);
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.btn-ico--file {
  --ico: url(../images/icon_file.svg);
}
.btn-ico--mail {
  --ico: url(../images/icon_mail.svg);
}
/* フッターCTAはhoverで白反転するのでアイコンも濃色へ */
.footer-03 .foot-link .link-box-def a:hover .btn-ico {
  background: var(--color-text);
}
/* ハンバーガー（PCは非表示） */
.header-05 .head-btn {
  display: none;
  padding: 0;
  border: 0;
  background: var(--color-bg);
  cursor: pointer;
}
.header-05 .head-btn-in {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-05 .head-btn-ico {
  position: relative;
  width: 2.4rem;
  height: 1.6rem;
}
.header-05 .head-btn-ico span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transition:
    top 0.3s ease,
    transform 0.3s ease,
    opacity 0.3s ease;
}
.header-05 .head-btn-ico span:nth-child(1) {
  top: 0;
}
.header-05 .head-btn-ico span:nth-child(2) {
  top: 7px;
}
.header-05 .head-btn-ico span:nth-child(3) {
  top: 14px;
}
.header-05 .head-btn-ico span:nth-child(4) {
  display: none;
}

/* メガメニュー（レッスン案内）：PCのみ。liにhover/フォーカスでヘッダー直下に全幅パネル */
.header-05 .has-mega {
  position: static;
}
.header-05 .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  /* 閉じる側に少し遅延＝リンクからパネルへポインタを移す間に消えない */
  transition:
    opacity 0.2s ease 0.15s,
    visibility 0.2s ease 0.15s;
}
.header-05 .has-mega:hover .mega-menu,
.header-05 .has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* メガメニュー持ちの印（＋。開くと×に回転） */
.header-05 .has-mega > a .has-mega__icon {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.header-05 .has-mega:hover > a .has-mega__icon,
.header-05 .has-mega.is-open > a .has-mega__icon {
  transform: rotate(45deg);
}
.header-05 .mega-menu__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  max-width: var(--inner);
  margin-inline: auto;
  padding: 3.2rem 4rem 4rem;
}
.header-05 .mega-menu .c-heading-h4 {
  margin-bottom: 1.6rem;
  font-size: 1.6rem;
  color: var(--color-tone-pink);
}
/* 店舗・教室メガのカテゴリ見出しは紫 */
.header-05 .mega-menu--text .c-heading-h4 {
  color: var(--color-tone-purple);
}
.header-05 .mega-menu .lesson-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-05 .mega-menu .lesson-group--wide .lesson-list {
  grid-template-columns: 1fr 1fr;
}
.header-05 .mega-menu .lesson-card {
  display: block;
  border: 1px solid var(--color-line);
  overflow: hidden;
  background: #fff;
  transition: border-color 0.3s ease;
}
.header-05 .mega-menu .lesson-card:hover {
  border-color: var(--color-tone-pink);
}
.header-05 .mega-menu .lesson-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト型メガメニュー（商品案内・店舗/教室）：画像カードでなく文字リンクを並べる */
.header-05 .mega-menu__inner--text {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 店舗＝1fr／教室＝3fr（1fr×3列） */
  align-items: start;
  gap: 4rem 6rem;
}
/* 商品案内はグループ分けが無いので、リストを1本で全幅に使う */
.header-05 .mega-menu__inner--products {
  grid-template-columns: 1fr;
}
/* 店舗・教室は項目数が多く縦に伸びるので、店舗列は最長ボタンの幅ぴったりにして
   余った分を教室（4カラム）に回す。文字と余白も詰めて教室名が折り返さないようにする */
.header-05 .mega-menu__inner--text:not(.mega-menu__inner--products) {
  grid-template-columns: max-content 1fr;
}
.header-05 .mega-menu__inner--text:not(.mega-menu__inner--products) .mega-links a {
  font-size: 1.4rem;
}
.header-05 .mega-menu__inner--text:not(.mega-menu__inner--products) .mega-links--col a {
  padding: 0.8rem;
}
.header-05 .mega-group {
  min-width: 0;
}
.header-05 .mega-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-05 .mega-links--col {
  flex-direction: column;
}
/* 教室グループは3カラム（店舗は1カラムのまま）。minmax(0,1fr)で3等分＝長い教室名でも列幅が崩れない */
.header-05 .mega-links--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.4rem;
}
/* 商品案内は4カラム（5項目なので2段目は1つ。左詰めのままでよい） */
.header-05 .mega-links--4col {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.4rem;
}
.header-05 .mega-links a {
  display: block;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  transition: border-color 0.3s ease;
  line-height: 1.2;
}
.header-05 .mega-links a:hover {
  border-color: var(--color-tone-purple);
}
/* 商品案内はページのアクセント色に合わせてオレンジ（店舗・教室は紫のまま） */
.header-05 .mega-menu__inner--products .mega-links a:hover {
  border-color: var(--color-tone-orange);
}
/* 店舗・教室のボタン：アイキャッチ(60×45・cover)＋タイトルの横並び */
.header-05 .mega-links--col a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
}
.header-05 .mega-links__thumb {
  flex-shrink: 0;
  width: 6rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gray);
}
.header-05 .mega-links__thumb img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* 狭いデスクトップ(〜1400px)：グローバルナビの段落ち防止に余白と間隔を詰める */
@media (max-width: 1400px) {
  .header-05 .head-wrap {
    gap: 1rem;
    padding: 0 2rem;
  }
  .header-05 .head-r nav {
    gap: 1.4rem;
  }
  .header-05 .head-nav-t,
  .header-05 .head-nav-b {
    gap: 0.8rem 1.2rem;
  }
  .header-05 .head-link {
    gap: 0.6rem;
  }
  .header-05 .head-link .link-box-def a {
    min-width: 0;
    padding: 0 1.4rem;
  }
}
/* ロゴは1300px以下で少しだけ小さく */
@media (max-width: 1300px) {
  .header-05 .logo-daito img {
    height: 3.4rem;
  }
}

@media (max-width: 1200px) {
  /* SPはヘッダー帯を固定しない（スクロールで流す）。固定するのはハンバーガーとドロワーだけ */
  .header-05 {
  position: relative;
  }
  /* テキスト型メガメニューはドロワー内で縦積み（1カラム）。
     店舗・教室のPC指定(max-content 1fr)が:not()付きで詳細度が高いため、同じ形で上書きする */
  .header-05 .mega-menu__inner--text,
  .header-05 .mega-menu__inner--text:not(.mega-menu__inner--products) {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .header-05 .mega-links {
    flex-direction: column;
  }
  /* ドロワーでは教室の3カラム・商品案内の4カラムも1列に落とす（モバイル幅で多列は窮屈なため） */
  .header-05 .mega-links--3col,
  .header-05 .mega-links--4col {
    grid-template-columns: 1fr;
  }
  /* ドロワー内ではメガメニューをタップ開閉のアコーディオンに（開閉はJSで .is-open を付け外し） */
  .header-05 .mega-menu {
    display: none;
    position: static;
    border-top: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .header-05 .has-mega.is-open .mega-menu {
    display: block;
  }
  .header-05 .mega-menu__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.6rem 0 0.4rem;
  }
  .header-05 .mega-menu .lesson-group--wide .lesson-list {
    grid-template-columns: 1fr;
  }
  .header-05 .head-wrap {
    gap: 1rem;
    padding: 0 0 0 1.5rem;
    min-height: 7rem;
  }
  .header-05 .head-l {
    width: fit-content;
  }
  .header-05 .logo-daito img {
    height: 3rem;
  }
  /* ハンバーガーだけ画面右上に固定（帯は流れてもボタンは残る） */
  .header-05 .head-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    width: 6rem;
    height: 7rem;
  }
  /* ドロワー：ハンバーガー直下(7rem)からビューポート基準で右へスライド展開。多項目はスクロールで閲覧 */
  .header-05 .head-r {
    position: fixed;
    top: 7rem;
    right: 0;
    z-index: 40;
    width: 30rem;
    max-width: 85%;
    /* ウィンドウ下端まで（ヘッダー高7rem分を差し引く）。はみ出す分は内部スクロール */
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    background: var(--color-bg);
    transform: translateX(100%);
  }
  /* transitionはハンバーガー操作後のみ有効（1200px跨ぎのリサイズで一瞬見えるのを防ぐ） */
  .header-05 .header.is-drawer-animated .head-r {
    transition: transform 0.35s ease;
  }
  .header-05 .header.on .head-r {
    transform: translateX(0);
  }
  .header-05 .head-r nav {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
    padding: 4rem 2.5rem;
  }
  /* ドロワーでは head-nav を透過させ、指導者の方へ(head-nav-t)を最下部に回す */
  .header-05 .head-nav {
    display: contents;
  }
  .header-05 .head-nav-t {
    order: 1;
  }
  .header-05 .head-nav-t,
  .header-05 .head-nav-b {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    justify-content: flex-start;
  }
  .header-05 .head-nav-t {
    gap: 1.3rem;
  }
  .header-05 .head-nav-b {
    gap: 2rem;
  }
  .header-05 .head-link {
    flex-direction: column;
    gap: 1rem;
  }
  .header-05 .head-link .link-box-def a {
    width: 100%;
    min-width: 0;
  }
  /* ハンバーガー→X */
  .header-05 .header.on .head-btn-ico span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .header-05 .header.on .head-btn-ico span:nth-child(2) {
    opacity: 0;
  }
  .header-05 .header.on .head-btn-ico span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }
}

@media (max-width: 767px) {
  /* スマホはドロワーを全幅に */
  .header-05 .head-r {
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   フッター footer-03（component-stock より採用）
   左＝ロゴ＋2CTA／右＝3列ナビ＋下に（プライバシー／コピーライト）右寄せ。SPは縦積み。
   ※SNSアイコンは不可侵ルール（画像バイナリ不可）のため省略。
   ========================================================= */
.footer-03 {
  font-family: var(--font-sans);
  color: var(--color-text);
}
.footer-03 footer {
  background: transparent;
  padding: 5rem 4rem 4rem;
}
.footer-03 a {
  color: inherit;
  text-decoration: none;
}
.footer-03 .foot-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 136rem;
  margin: 0 auto;
}
.footer-03 .foot-l {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.footer-03 .foot-logo img {
  display: block;
  width: auto;
  height: 4rem;
}
.footer-03 .foot-link {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
}
.footer-03 .foot-link .link-box-def {
  flex-shrink: 0;
}
/* CTA：hoverで白反転（枠線が残り枠ボタン化） */
.footer-03 .foot-link .link-box-def a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 18rem;
  height: 5rem;
  padding: 0 2.8rem;
  white-space: nowrap;
  background: var(--color-text);
  border: 1px solid var(--color-text);
  transition: background 0.3s ease;
}
.footer-03 .foot-link .link-box-def.ex a {
  max-width: none;
}
.footer-03 .foot-link .link-box-def a:hover {
  background: var(--color-bg);
}
.footer-03 .foot-link .link-box-def a:hover .link-tit {
  color: var(--color-text);
}
.footer-03 .foot-link .link-tit {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-bg);
  transition: color 0.3s ease;
}
/* CTAの色分け：各種お申込み=青／お問合せ=オレンジ（ヘッダー・フッター共通。基本スタイルより後に置いて上書きする） */
.header-05 .head-link .link-box-def--apply a,
.footer-03 .foot-link .link-box-def--apply a {
  background: #2eaad6;
  border-color: #2eaad6;
}
.header-05 .head-link .link-box-def--contact a,
.footer-03 .foot-link .link-box-def--contact a {
  background: #e89838;
  border-color: #e89838;
}
/* 右ナビ：3列を横並び。SPで折返し */
.footer-03 .foot-nav {
  margin-top: 6rem;
}
.footer-03 .foot-nav nav {
  display: flex;
  gap: 5rem;
}
.footer-03 .foot-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-03 .foot-nav ul:first-of-type {
  min-width: 11.8rem;
}
/* 商品案内の子リンク（1段下げ・細字） */
.footer-03 .foot-nav .foot-nav__sub {
  gap: 1.2rem;
  margin-top: 1.2rem;
  padding-left: 1.2rem;
}
.footer-03 .foot-nav .foot-nav__sub .nav-tit {
  font-weight: 500;
}
.footer-03 .foot-nav .nav-tit {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
/* nav-tit は inline のため、行間の基準は行ボックスを作る li 側になる */
.footer-03 .foot-nav li {
  font-size: 1.4rem;
  line-height: 1;
}
.footer-03 .foot-nav a:hover {
  opacity: 0.7;
}
.footer-03 .foot-copy {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 5rem;
}
.footer-03 .foot-copy .link a:hover {
  opacity: 0.7;
}
.footer-03 .foot-copy .link span {
  font-size: 1.2rem;
  font-weight: 500;
}
.footer-03 .foot-copy .copy {
  margin-top: 1.5rem;
  font-size: 1.2rem;
}

@media (max-width: 1200px) {
  .footer-03 footer {
    padding: 4rem 2rem;
  }
  .footer-03 .foot-wrap {
    flex-direction: column;
  }
  .footer-03 .foot-link {
    flex-wrap: wrap;
    margin-top: 2rem;
  }
  .footer-03 .foot-nav {
    margin-top: 4rem;
  }
  .footer-03 .foot-nav nav {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .footer-03 .foot-nav ul:first-of-type {
    min-width: 0;
  }
  .footer-03 .foot-nav .nav-tit {
    font-size: 1.2rem;
    font-feature-settings: "palt";
  }
  .footer-03 .foot-copy {
    justify-content: flex-start;
  }
  .footer-03 .foot-copy .link span {
    font-size: 1.2rem;
  }
  .footer-03 .foot-copy .copy {
    font-size: 1.1rem;
  }
}

/* =========================================================
   バナースライダー banner-02（component-stock より採用）
   Swiper：loop・centeredSlides・SP1.3枚/520:3枚/1400:4枚。左右ボタン＋ドット。
   ========================================================= */
.banner-02 {
  padding-bottom: var(--space-sec);
}
.banner-02 .sec-top-bnr {
  padding: 0;
}
.banner-02 .splide__track,
.banner-02 .splide__list,
.banner-02 .splide__slide {
  height: auto !important;
  min-height: 0 !important;
}
.banner-02 .splide__list {
  align-items: flex-start;
}
.banner-02 .slide {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
}
.banner-02 .sec-top-bnr a {
  display: block;
}
.banner-02 .sec-top-bnr .slide-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gray);
}
.banner-02 .sec-top-bnr .slide-img img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.banner-02 .sec-top-bnr a:hover img {
  opacity: 0.8;
}
.banner-02 .sec-top-bnr .slide-cap {
  display: block;
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}
/* 画像未設定時のプレースホルダ（no_image グレー枠） */
.banner-02 .sec-top-bnr a .noimg {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--gray);
}
.banner-02 .slide_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  margin: 2.5rem auto 0;
}
.banner-02 .slide-prev,
.banner-02 .slide-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
  cursor: pointer;
}
.banner-02 .slide-prev [class^="iconoir-"],
.banner-02 .slide-next [class^="iconoir-"] {
  font-size: 2rem;
}
.banner-02 .slide-pagination {
  width: auto;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.banner-02 .slide-pagination .slide-bullet {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
  cursor: pointer;
}
.banner-02 .slide-pagination .slide-bullet.is-active {
  background: var(--color-accent);
}
@media (max-width: 520px) {
  .banner-02 {
    padding-bottom: 4rem;
  }
  .banner-02 .sec-top-bnr {
    padding: 0;
  }
  .banner-02 .slide_btn {
    gap: 4rem;
    margin: 0.5rem auto;
  }
  .banner-02 .slide-prev,
  .banner-02 .slide-next {
    width: 3.2rem;
    height: 3.2rem;
  }
  .banner-02 .slide-prev::before,
  .banner-02 .slide-next::after {
    width: 0.6rem;
    height: 0.6rem;
  }
  .banner-02 .slide-pagination .slide-bullet {
    width: 0.8rem;
    height: 0.8rem;
  }
}

/* =========================================================
   ニュース news-02（component-stock より採用）
   左＝縦書きNEWS見出し＋縦タブ／右＝記事リスト＋一覧ボタン。タブ切替はJS（.js-news-tab）。
   ========================================================= */
.news-02 {
  background: var(--color-pale-blue);
  padding-top: var(--space-sec);
  margin-bottom: var(--space-sec);
}
/* single（記事詳細）の関連記事では下マージンを消す */
.single-event_lists .news-02 {
  margin-bottom: 0;
}
.news-02::before {
  top: -100px;
  left: -400px;
  width: 742px;
  height: 540px;
  background-image: url(../images/bg03_blue.svg);
}
.news-02 .p-news {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-inline: auto;
}
.news-02 .p-news-tabs,
.event-archive-01 .p-news-tabs {
  display: flex;
  width: 100%;
}
.news-02 .p-news-tabs__item,
.event-archive-01 .p-news-tabs__item {
  display: inline-block;
  color: var(--color-muted);
  text-decoration: none;
}
.news-02 .p-news-tabs__item.is-active,
.event-archive-01 .p-news-tabs__item.is-active {
  position: relative;
  color: var(--color-text);
  font-weight: 700;
}
.news-02 .p-news-tabs__item.is-active::before,
.event-archive-01 .p-news-tabs__item.is-active::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent);
}
.news-02 .p-news-tabs__item--arrow {
  padding: 1rem 0;
  font-weight: 700;
}
.news-02 .p-news-tabs__content,
.event-archive-01 .p-news-tabs__content {
  display: none;
}
.news-02 .p-news-tabs__content.is-show,
.event-archive-01 .p-news-tabs__content.is-show {
  display: block;
}
.news-02 .c-news__item,
.event-archive-01 .c-news__item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-line);
}
.news-02 .c-news__item:last-of-type,
.event-archive-01 .c-news__item:last-of-type {
  border: none;
}

/* テキスト側（日付＋カテゴリ＋本文）をまとめ、右にサムネイルを並べる */
.news-02 .c-news__body,
.event-archive-01 .c-news__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0;
}
/* サムネイル：幅は固定、高さの上限は正方形（＝幅と同じ）。正方形より低い画像はその高さのまま。
   幅がPC/SP・TOP/一覧で変わるので、100cqw で幅に追従させるため器を container にする */
.news-02 .c-news__thumb,
.event-archive-01 .c-news__thumb {
  container-type: inline-size;
  flex-shrink: 0;
  width: 15rem;
  margin-left: 2rem;
  overflow: hidden;
}
/* TOP のみサムネイルを小さく */
.news-02 .c-news__thumb {
  width: 10rem;
}
.news-02 .c-news__thumb img,
.event-archive-01 .c-news__thumb img {
  width: 100%;
  max-height: 100cqw;
  object-fit: contain;
  display: block;
}
.news-02 .c-news__item .date,
.event-archive-01 .c-news__item .date {
  display: inline-block;
  font-weight: 400;
  font-family: var(--font-en);
}
.category,
.category--primary {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  text-align: center;
}
.news-02 .c-news__item .text,
.event-archive-01 .c-news__item .text {
  margin: 0;
  font: inherit;
  transition: transform 0.2s;
}
/* リンクはタイトル・サムネイルのみ（カード全体は非リンク）。タイトルは hover で下線 */
.news-02 .c-news__item .text a:hover,
.event-archive-01 .c-news__item .text a:hover {
  text-decoration: underline;
}
.news-02 .c-link-arrow {
  display: inline-flex;
  align-items: center;
}
.news-02 .c-link-arrow__icon {
  display: inline-flex;
  margin-left: 0.6rem;
}

/* =========================================================
   event-archive-01：イベント一覧
   ========================================================= */
.event-archive-01 {
  padding-top: 6rem;
  background: none;
}
/* イベント・講座一覧（page-event_lists.php）のカテゴリごとのまとまり */
/* 指導者ページから #course で飛んでくるので、固定ヘッダーの下に潜らせない */
.p-event-lists__group {
  scroll-margin-top: 10rem;
}
.p-event-lists__group + .p-event-lists__group {
  margin-top: 8rem;
}
.p-event-lists__group .c-news__list {
  margin-top: 3rem;
}

.event-archive-01 .p-news {
  display: block;
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: var(--side);
}

.event-archive-01 .p-news__body {
  width: 100%;
  max-width: 100%;
}

.event-archive-01 .p-news-tabs {
  justify-content: flex-start;
}

.event-archive-01 .p-news-filter {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  width: 100%;
  margin: 5rem 0 5rem;
  padding: 2.5rem;
  border-radius: 1.6rem;
  background: var(--color-pale-blue);
}

.event-archive-01 .p-news-filter__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.event-archive-01 .p-news-filter__icon {
  display: none;
}

.event-archive-01 .p-news-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  min-width: 0;
}

.event-archive-01 .p-news-filter__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1.4;
  text-decoration: none;
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}

.event-archive-01 .p-news-filter__item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-0.1rem);
}

.c-pagination {
  margin-top: 4rem;
}

.c-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 3.8rem;
  height: 3.8rem;
  padding: 0 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    transform 0.2s;
}

.c-pagination a.page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-0.1rem);
}

.c-pagination .page-numbers.current {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.c-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
}
@media screen and (min-width: 769px) {
  .news-02 .p-news {
    width: 100%;
    max-width: 110rem;
    padding-inline: 2rem;
  }
  .news-02 .p-news__head {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 14rem;
  }
  /* 見出し14rem＋余白を差し引き、中間幅でも収まるよう上限を流動化 */
  .news-02 .p-news__body {
    width: 85%;
    max-width: calc(100% - 6rem);
  }
  /* 関連記事（タブなし）の「一覧を見る」を右寄せ＋上マージン */
  .news-02 .p-news__body > .c-link-button {
    display: flex;
    margin-top: 3.5rem;
    margin-left: auto;
  }
  /* カテゴリタブ：横並び・右付きでコンテンツの上に配置 */
  .news-02 .p-news-tabs,
  .event-archive-01 .p-news-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 3rem;
    row-gap: 1rem;
    margin-bottom: 2.5rem;
  }
  .news-02 .p-news-tabs {
    justify-content: flex-end;
  }
  .event-archive-01 .p-news-tabs {
    justify-content: flex-start;
  }
  .news-02 .p-news-tabs__item,
  .event-archive-01 .p-news-tabs__item {
    width: auto;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .news-02 .p-news-tabs__item:hover {
    transform: translateY(-0.2rem);
  }
  .news-02 .p-news-tabs__item.is-active::before,
  .event-archive-01 .p-news-tabs__item.is-active::before {
    width: 0.5rem;
    height: 0.5rem;
    inset: auto auto -0.8rem 50%;
    transform: translateX(-50%);
  }
  .news-02 .p-news-tabs__content,
  .event-archive-01 .p-news-tabs__content {
    width: 100%;
  }
  .news-02 .p-news-tabs__content .c-link-button {
    display: flex;
    margin-top: 3.5rem;
    margin-left: auto;
  }
  .news-02 .p-news__links-pc {
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
  }
  .news-02 .p-news__links-sp {
    display: none;
  }
  .news-02 .c-news__item {
    padding: 2.4rem 1.2rem;
    transition: background-color 0.2s;
  }
  .event-archive-01 .c-news__item {
    padding: 2.4rem;
    transition: background-color 0.2s;
  }
  .news-02 .c-news__item:hover .text {
    transform: translateX(0.3rem);
  }
  .news-02 .c-news__item .date,
  .event-archive-01 .c-news__item .date {
    width: 8rem;
    margin-right: 2rem;
  }
  .news-02 .c-news__item .category,
  .event-archive-01 .c-news__item .category {
    width: 11rem;
    height: 2.6rem;
    margin-right: 2rem;
    font-size: 1.2rem;
    line-height: 2.6rem;
  }
  .news-02 .c-news__item .text,
  .event-archive-01 .c-news__item .text {
    flex: 1;
  }
}
@media screen and (max-width: 768px) {
  .news-02 .p-news {
    width: 100%;
    padding-inline: 5%;
  }
  .news-02 .p-news__head {
    display: block;
    width: 100%;
    margin-bottom: 3rem;
  }
  .news-02 .p-news-tabs,
  .event-archive-01 .p-news-tabs {
    column-gap: 1.8rem;
    flex-wrap: wrap;
  }

  .event-archive-01 .p-news-filter {
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.6rem;
  }

  .event-archive-01 .p-news-filter__label {
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
  }

  .event-archive-01 .p-news-filter__icon {
    display: inline-flex;
    margin-left: auto;
    font-size: 1.8rem;
    transition: transform 0.2s;
  }

  .event-archive-01 .p-news-filter.is-open .p-news-filter__icon {
    transform: rotate(180deg);
  }

  .event-archive-01 .p-news-filter__list {
    display: none;
    width: 100%;
  }

  .event-archive-01 .p-news-filter.is-open .p-news-filter__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .event-archive-01 .p-news-filter__item {
    justify-content: center;
    width: fit-content;
  }
  .news-02 .p-news-tabs__item.is-active::before,
  .event-archive-01 .p-news-tabs__item.is-active::before {
    width: 0.4rem;
    height: 0.4rem;
    inset: -0.6rem auto auto 50%;
    transform: translateX(-50%);
  }
  .news-02 .p-news-tabs__content,
  .event-archive-01 .p-news-tabs__content {
    flex: 1;
    margin-top: 2.5rem;
    width: 100%;
  }
  .news-02 .p-news-tabs__content .c-link-button {
    display: flex;
    margin-top: 2rem;
    margin-inline: auto;
    align-self: center;
  }
  .news-02 .p-news__links-pc {
    display: none;
  }
  .news-02 .p-news__links-sp {
    display: flex;
    justify-content: flex-end;
    column-gap: 2rem;
    margin-top: 2rem;
    font-weight: 700;
  }
  .news-02 .c-news__item {
    flex-wrap: wrap;
    padding: 1.5rem 0;
  }
  .event-archive-01 .c-news__item {
    flex-wrap: wrap;
    padding: 1.8rem 1rem;
  }
  .news-02 .c-news__item .date,
  .event-archive-01 .c-news__item .date {
    width: 6rem;
    margin-right: 1rem;
    font-size: 1.1rem;
  }
  .news-02 .c-news__item .category,
  .event-archive-01 .c-news__item .category {
    width: 8rem;
    height: 1.8rem;
    font-size: 1rem;
    line-height: 1.8rem;
  }
  .news-02 .c-news__item .text,
  .event-archive-01 .c-news__item .text {
    width: 100%;
    margin-top: 1rem;
  }
  .news-02 .c-news__thumb,
  .event-archive-01 .c-news__thumb {
    width: 12rem;
    margin-left: 1.5rem;
  }
}

/* =========================================================
   サービス一覧 service-02（component-stock より採用）
   PC（≥1201）=左見出し＋右にPick Up大カード＋2列カードグリッド。
   1200以下=縦積み（大カード→カードスライダー→リンクは最下部）。カードはSplide（PC≥1201で破棄しgrid化）。
   ========================================================= */
.service-02 {
  font-family: var(--font-sans);
  color: var(--color-text);
  padding-bottom: 1rem;
}
.service-02 .inner {
  max-width: 140rem;
  margin-inline: auto;
  padding: 0 5%;
}
/* 大見出し（セクション全体） */
.service-02__intro {
  max-width: 123rem;
  margin-inline: auto;
  padding: 0 4rem 0;
}
.service-02 .home__service {
  position: relative;
  padding-bottom: var(--space-sec);
  margin-bottom: var(--space-sec);
}
/* ブロック色（--tone＝見出し/矢印などの色、--tone-pale＝塗り背景色） */
.home__service--orange {
  --tone: var(--color-tone-orange);
  --tone-pale: var(--color-pale-orange);
}
.home__service--purple {
  --tone: var(--color-tone-purple);
  --tone-pale: var(--color-pale-purple);
}
.home__service--pink {
  --tone: var(--color-tone-pink);
  --tone-pale: var(--color-pale-pink);
}
.home__service--blue {
  --tone: var(--color-tone-blue);
  --tone-pale: var(--color-pale-blue);
}
.home__service--green {
  --tone: var(--color-tone-green);
  --tone-pale: var(--color-pale-green);
}
/* 背景を塗るブロック（上白→下・薄色のグラデ・上下パディング付き） */
.home__service--filled {
  width: 90%;
  margin-inline: auto;
  padding-top: var(--space-sec);
  background: var(--tone-pale);
  border-radius: 10rem;
}
@media screen and (max-width: 768px) {
  .home__service--filled {
    width: 100%;
    border-radius: 5rem;
  }
}
/* ブロック見出し（日本語タイトル） */
.service-02 .svc-ttl {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
}
/* no_image プレースホルダ */
.service-02 .image {
  background: var(--gray);
}
.service-02 .image img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.service-02 .noimg {
  display: block;
  width: 100%;
}
/* 矢印は共通部品 .c-circle-arrow を使用（親カードhoverでも塗り） */
.service-02 .home__service__body__main a:hover .c-circle-arrow {
  background: var(--tone, var(--color-accent));
  color: var(--color-bg);
}
/* ブロック見出し(h4)もブロック色に（オーバーレイの大カードタイトルは白のまま） */
.service-02 .home__service .c-heading-h4 {
  color: var(--tone, inherit);
}
/* 見出し（左カラム） */
.service-02 .h2_heading h2 {
  display: flex;
  flex-direction: column;
}
.service-02 .h2_heading .jp {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.service-02 .h2_heading .en {
  margin-top: 1rem;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(3.6rem, 5vw, 5.8rem);
  line-height: 1.05;
}
.service-02 .h2_heading p {
  margin-top: 2.4rem;
  font-size: 1.6rem;
}
.service-02 .home__service__heading__links {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 3.2rem;
}
/* 縦積みの2ボタンは長い文言の方に幅を揃える（fit-contentのばらつき解消） */
@media screen and (min-width: 769px) {
  .service-02 .home__service__heading__links {
    display: inline-flex;
    align-items: stretch;
  }
  .service-02 .home__service__heading__links .c-link-button {
    width: auto;
  }
}
.service-02 .link_border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--color-line);
  font-size: 1.2rem;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.service-02 .link_border .text {
  font-weight: 500;
}
.service-02 .link_border:hover {
  background: var(--color-text);
  color: var(--color-bg);
}
/* 本体（右カラム） */
.service-02 .home__service__body {
  display: flex;
  flex-direction: column;
}
.service-02 .home__service__body__main {
  margin-bottom: 3rem;
}
.service-02 .home__service__body__main a {
  position: relative;
  display: block;
  overflow: hidden;
}
.service-02 .home__service__body__main .image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.service-02 .home__service__body__main .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-02 .home__service__body__main a:hover .image img {
  transform: scale(1.05);
}
.service-02 .home__service__body__main .text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 3.6rem 3.4rem;
  color: var(--color-bg);
  background: rgba(26, 26, 26, 0.5);
}
.service-02 .home__service__body__main .text .en {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-en);
  font-size: 1.2rem;
  opacity: 0.9;
}
.service-02 .home__service__body__main .text .c-heading-h4 {
  color: inherit;
}
.service-02 .home__service__body__main .text p {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.7;
  padding-right: 5.6rem;
}
.service-02 .home__service__body__main .c-circle-arrow {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 2;
}
.service-02 .home__service__body__main a > .arrow {
  display: none;
}
/* カード群 */
.service-02 .home__service__body__cards {
  margin-bottom: 4rem;
}
/* カードはSplide不使用。未初期化でも表示させ、デフォルトは縦積み（PC≥1024で2列grid化） */
.service-02 .home__service__body__cards .splide {
  visibility: visible;
}
.service-02 .home__service__body__cards .splide__track {
  overflow: visible;
}
.service-02 .home__service__body__cards .splide__list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-02 .home__service__body__cards .splide__slide {
  height: auto;
  border-top: 1px solid var(--color-line);
  padding: 2rem 0;
}
.service-02 .home_service_card {
  position: relative;
  display: flex;
  gap: 2rem;
}
.service-02 .home_service_card .image {
  flex: 0 0 14rem;
  aspect-ratio: 316 / 220;
}
.service-02 .home_service_card .text {
  flex: 1;
  padding-right: 3.6rem;
}
.service-02 .home_service_card .text__heading {
  font-size: 1.8rem;
  font-weight: 500;
}
.service-02 .home_service_card .text__description {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.service-02 .home_service_card .c-circle-arrow {
  position: absolute;
  right: 0;
  bottom: 0.4rem;
}
.service-02 .home_service_card:hover .c-circle-arrow {
  background: var(--color-accent);
  color: var(--color-bg);
}

.service-02 br.pc {
  display: none;
}

@media (min-width: 1201px) {
  .service-02 .inner {
    display: grid;
    grid-template-columns: 40rem 1fr;
    column-gap: 5rem;
    align-items: start;
  }
  .service-02 br.pc {
    display: inline;
  }
  /* カードはSplideを破棄して2列グリッド化（上罫線で区切る） */
  .service-02 .home__service__body__cards .splide__list {
    display: flex;
    flex-wrap: wrap;
    transform: none !important;
  }
  .service-02 .home__service__body__cards .splide__slide {
    width: 50% !important;
    margin: 0 !important;
    padding: 2.6rem 0;
    border-top: 1px solid var(--color-line);
  }
  .service-02 .home__service__body__cards .splide__slide:nth-child(odd) {
    padding-right: 2.5rem;
  }
  .service-02 .home__service__body__cards .splide__slide:nth-child(even) {
    padding-left: 2.5rem;
  }
}

@media (max-width: 1200px) {
  .service-02__intro {
    padding: 0 2rem 0;
  }
  .service-02 .inner {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .service-02 .home__service {
    margin-bottom: var(--space-sec);
    padding-inline: 5%;
  }
  .service-02 .home__service__heading {
    margin-bottom: 3rem;
    padding-inline: 5%;
  }
  .service-02 .home__service__body__main a {
    overflow: visible;
  }
  .service-02 .home__service__body__main .image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .service-02 .home__service__body__main .text {
    position: static;
    background: var(--color-text);
    padding: 2rem;
  }
  .service-02 .home__service__body__main .text .en {
    display: none;
  }
  .service-02 .home__service__body__main .c-heading-h4 {
    line-height: 1.3;
  }
  .service-02 .home__service__body__main .text p {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    line-height: 1.6;
    padding-right: 0;
  }
  .service-02 .home__service__body__main .c-circle-arrow {
    width: 3rem;
    height: 3rem;
    top: auto;
    bottom: -0.5em;
    right: -0.5em;
  }
  .service-02 .home__service__body__main .c-circle-arrow [class^="iconoir-"] {
    font-size: 1.4rem;
  }
  .service-02 .home__service__body__cards {
    margin-bottom: 3rem;
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .service-02 .home_service_card {
    flex-direction: row;
    gap: clamp(1rem, 1.8vw, 2rem);
  }
  .service-02 .home_service_card .image {
    flex: 0 0 clamp(8rem, 22vw, 14rem);
  }
  .service-02 .home_service_card .text {
    margin-top: 0;
    padding-right: clamp(2rem, 3.2vw, 3.6rem);
  }
  .service-02 .home_service_card .text__heading {
    font-size: clamp(1.4rem, 1.55vw, 1.7rem);
  }
  .service-02 .home_service_card .text__description {
    font-size: clamp(1.1rem, 1.18vw, 1.3rem);
  }
  .service-02 .home_service_card .c-circle-arrow {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    align-self: auto;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .service-02 .home_service_card {
    flex-direction: column;
    gap: 0;
  }
  .service-02 .home_service_card .image {
    flex: none;
    width: 100%;
  }
  .service-02 .home_service_card .text {
    padding-right: 0;
    margin-top: 1.5rem;
  }
  .service-02 .home_service_card .c-circle-arrow {
    position: static;
    align-self: flex-end;
    margin-top: 1.2rem;
  }
}

/* =========================================================
   career-01（TopCareerPaletteList／component-stock より採用）
   写真＋テキストの横並びリスト。PC（≥768）で右に丸矢印表示。
   ========================================================= */
.career-01 {
  --clr: var(--color-accent);
  font-family: var(--font-sans);
  color: var(--color-text);
}
/* 色バリエーション（矢印・__text をブロック色に合わせる） */
.career-01--blue {
  --clr: var(--color-tone-blue);
}
.career-01--pink {
  --clr: var(--color-tone-pink);
}
.career-01--green {
  --clr: var(--color-tone-green);
}
.career-01--orange {
  --clr: var(--color-tone-orange);
}
.career-01--purple {
  --clr: var(--color-tone-purple);
}
.career-01 .career-01-arrow {
  display: grid;
  place-items: center;
  width: 4.7rem;
  height: 4.7rem;
  border: 1px solid var(--clr);
  background: transparent;
  color: var(--clr);
  flex: none;
  border-radius: 50%;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.career-01 .career-01-arrow i {
  font-size: 1.8rem;
}
.career-01 .TopCareerPaletteList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.career-01 .TopCareerPaletteList__item:not(:last-child) {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}
.career-01 .TopCareerPaletteList__link {
  display: grid;
  grid-template-columns: 12rem 1fr auto;
  gap: 2rem;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
}
.career-01 .TopCareerPaletteList__photo {
  aspect-ratio: 190/127;
  overflow: hidden;
  background: var(--gray);
}
.career-01 .TopCareerPaletteList__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: 1;
  transition: scale 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.career-01 .TopCareerPaletteList__link:hover .TopCareerPaletteList__photo img {
  scale: 1.1;
}
.career-01 .TopCareerPaletteList__title {
  font-weight: 700;
  line-height: 1.75;
  font-size: var(--fs-lg);
  margin-top: 0;
  margin-block-end: 1rem;
}
.career-01 .TopCareerPaletteList__text {
  line-height: 1.75;
  font-size: var(--fs-sm);
  color: var(--clr);
}
.career-01 .TopCareerPaletteList__link .career-01-arrow {
  display: none;
}
/* SPは写真・本文・矢印の高さが揃わないので上端で揃える */
@media (max-width: 767px) {
  .career-01 .TopCareerPaletteList__link {
    align-items: flex-start;
  }
  .career-01 .TopCareerPaletteList__title {
    font-size: var(--fs-base);
    line-height: 1.6;
  }
}
@media (min-width: 768px) {
  .career-01 .TopCareerPaletteList__item:not(:last-child) {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
  }
  .career-01 .TopCareerPaletteList__link {
    grid-template-columns: 19rem 1fr auto;
    gap: 3.6rem;
    padding-inline-end: 2.8rem;
  }
  .career-01 .TopCareerPaletteList__title {
    margin-block-end: 1.5rem;
  }
  .career-01 .TopCareerPaletteList__link .career-01-arrow {
    display: grid;
  }
}

/* =========================================================
   レッスン案内：見出し＋画像カード（2列グリッド）
   ========================================================= */
.service-02 .lesson-group:not(:last-child) {
  margin-bottom: 5rem;
}
.service-02 .lesson-group .c-heading-h4 {
  margin-bottom: 2rem;
}
.service-02 .lesson-group__lead {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  line-height: var(--lh-lead);
}
.service-02 .lesson-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-02 .lesson-card {
  display: block;
  height: auto;
  border: 1px solid var(--color-line);
  overflow: hidden;
  background: #fff;
  transition: border-color 0.3s ease;
}
.service-02 .lesson-card:hover {
  border-color: var(--color-tone-pink);
}
.service-02 .lesson-card img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .service-02 .lesson-group:not(:last-child) {
    margin-bottom: 4rem;
  }
  .service-02 .lesson-list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* =========================================================
   repair-01：Repair ＆ Maintenance（service-02 の次セクション）
   ========================================================= */
.repair-01 {
  font-family: var(--font-sans);
  color: var(--color-text);
  margin-bottom: var(--space-sec);
}
.repair-01__intro {
  max-width: var(--inner);
  margin-inline: auto;
  padding: 0 var(--gutter) 2rem;
}
.message-01-list .message-01 {
  padding: 0 var(--gutter) 6rem;
  margin-bottom: 6rem;
}
.message-01-list .message-01:not(:last-child) {
  border-bottom: 1px solid var(--color-line);
}
/* 最後の項目は区切り線も次の項目も無いので、項目間用の余白は要らない */
.message-01-list .message-01:last-child {
  margin-bottom: 0;
}
/* repair-01 は最後の項目にも下ボーダー。線の下に次のセクションが続くので余白は残す */
.repair-01 .message-01-list .message-01:last-child {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 6rem;
}

/* ---- message-01（component-stock より採用） ---- */
.message-01 .p-message {
  display: flex;
  position: relative;
  margin-inline: auto;
}
.message-01 .p-message__title {
  position: absolute;
  color: var(--color-accent);
  font-weight: 400;
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}
.message-01 .p-message__line {
  display: block;
  position: absolute;
  width: 1px;
  background: var(--color-accent);
}
.message-01 .p-message .summary {
  font-weight: 500;
  font-family: var(--font-sans);
}
.message-01 .p-message__image {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: flex-end;
}
.message-01 .p-message__image .image1 {
  overflow: hidden;
  background: var(--gray);
}
.message-01 .p-message__image img {
  width: 100%;
  object-fit: cover;
}
@media screen and (min-width: 769px) {
  .message-01 .p-message {
    width: 110rem;
    max-width: 100%;
  }
  .message-01 .p-message__title {
    font-size: 1.6rem;
    top: 0;
    left: 0;
    margin-left: -4rem;
  }
  .message-01 .p-message__line {
    height: 17rem;
    inset: 12rem auto auto 1rem;
  }
  .message-01 .p-message .summary {
    width: calc(50% - 10rem);
    margin-left: 10rem;
  }
  .message-01 .p-message .summary .text {
    margin-top: 3rem;
    font-size: 1.4rem;
    line-height: var(--lh-lead);
  }
  .message-01 .p-message .summary .c-link-button {
    margin-top: 3.5rem;
  }
  .message-01 .p-message__image {
    width: 50%;
  }
  .message-01 .p-message__image .image1 {
    width: 50rem;
    max-width: 100%;
  }
  /* 偶数番目：HTMLは同一、CSSで左右反転 */
  .message-01-list .message-01:nth-child(even) .p-message {
    flex-direction: row-reverse;
  }
  .message-01-list .message-01:nth-child(even) .p-message .summary {
    margin-left: 0;
    margin-right: 10rem;
  }
  .message-01-list .message-01:nth-child(even) .p-message__image {
    justify-content: flex-start;
  }
  .message-01-list .message-01:nth-child(even) .p-message__title {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -4rem;
  }
  .message-01-list .message-01:nth-child(even) .p-message__line {
    inset: 12rem 1rem auto auto;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .message-01 .p-message {
    gap: 4rem;
  }
  .message-01 .p-message .summary {
    width: calc(50% - 7rem);
    margin-left: 7rem;
  }
  .message-01 .p-message__line {
    height: 14rem;
    inset: 10rem auto auto 1rem;
  }
  .message-01-list .message-01:nth-child(even) .p-message .summary {
    margin-left: 0;
    margin-right: 7rem;
  }
  .message-01-list .message-01:nth-child(even) .p-message__line {
    inset: 10rem 1rem auto auto;
  }
}
@media screen and (max-width: 768px) {
  .message-01 .p-message {
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    align-self: center;
  }
  .message-01 .p-message__title {
    font-size: 1.4rem;
    left: -3rem;
  }
  /* 縦書きの飾り英字は枠の左外 3rem に出る。message-01-list の中なら
     list 側の padding がその場所を確保しているが、FAQ は単体で置くので
     ここで左余白を足さないとラベルが画面外にはみ出して切れる */
  .p-faq .message-01 {
    padding-left: 2rem;
  }
  .message-01 .p-message__line {
    height: 11.5rem;
    inset: 12rem auto auto 0.8rem;
  }
  .message-01 .p-message .summary {
    order: 2;
    width: 100%;
    margin-top: 2rem;
  }
  .message-01 .p-message .summary .text {
    margin-top: 2rem;
    line-height: 2;
  }
  .message-01 .p-message .summary .c-link-button {
    display: flex;
    margin: 3rem auto 0;
  }
  .message-01 .p-message__image {
    width: 90%;
    margin-bottom: 2rem;
    margin-left: auto;
    padding-top: 3.5rem;
  }
  .message-01 .p-message__image .image1 {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================================
   purchase-01：Instrument Purchase（repair-01 の次セクション）
   ========================================================= */
.purchase-01 {
  font-family: var(--font-sans);
  color: var(--color-text);
  padding-bottom: 1rem;
}
.purchase-01__intro {
  max-width: var(--inner);
  margin-inline: auto;
  padding: 0 var(--gutter) 2rem;
}

/* =========================================================
   educator-01：For Educators（purchase-01 の次セクション）
   ========================================================= */
.educator-01 {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: url("../images/23999235.jpg") center / cover no-repeat;
  padding-top: var(--space-sec);
  padding-bottom: var(--space-sec);
  padding-inline: 5%;
  margin-bottom: var(--space-sec);
}
.educator-01__inner {
  max-width: var(--inner);
  margin-inline: auto;
  padding: 8rem 8rem;
  background: var(--color-bg);
}
.educator-01__head {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.educator-01__heading {
  margin-bottom: 0;
  text-align: left;
}
.educator-01__lead {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: var(--lh-lead);
}
.educator-01__content .c-link-button {
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .educator-01__inner {
    padding: 4rem 3rem;
  }
}

/* =========================================================
   about-01：About us
   ========================================================= */
.about-01 {
  font-family: var(--font-sans);
  color: var(--color-text);
  padding-bottom: 1rem;
  margin-bottom: var(--space-sec);
}

/* =========================================================
   case-study：導入事例型ブロック（rozai index より採用）
   ========================================================= */
.case-study {
  background: var(--color-bg);
}
.case-study__inner {
  display: grid;
  grid-template-columns: 1fr 40%;
  align-items: stretch;
  width: 100%;
  min-height: 48rem;
}
.case-study__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6rem 0 var(--side);
}
.case-study .c-heading {
  margin-bottom: 3.2rem;
}
.case-study__heading {
  margin: 0 0 2.4rem;
  font-size: clamp(2.4rem, 3vw, 4rem);
  font-weight: 700;
  line-height: 1.5;
}
.case-study__en {
  display: block;
  margin-bottom: 2.4rem;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-accent);
}
.case-study__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: var(--lh-lead);
}
.case-study__text + .case-study__text {
  margin-top: 3.2rem;
}
.case-study .c-link-button {
  margin-top: 3.2rem;
}
.case-study__photo {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 100%;
}
.case-study__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .case-study__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .case-study__content {
    order: 2;
    padding: 3rem 2rem 4rem;
  }
  .case-study__photo {
    order: 1;
  }
  .case-study__heading {
    font-size: 2.8rem;
  }
}

/* =========================================================
   recruit-01：採用ブロック（rozai index より採用）
   ========================================================= */
.recruit-01 {
  position: relative;
  margin-bottom: 0;
  background: url("../images/rec_bg.jpg") center / cover no-repeat;
}
.recruit-01__en {
  position: absolute;
  top: -0.5em;
  right: 0;
  font-family: var(--font-en);
  font-size: clamp(8rem, 12vw, 14rem);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  letter-spacing: -0.02em;
  color: var(--color-tone-blue);
  opacity: 0.9;
}
.recruit-01__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  /* 写真は左端まで全ブリード、テキスト側だけ右に余白 */
  padding: 0 var(--side) 0 0;
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 8rem;
  align-items: center;
}
.recruit-01__photo {
  overflow: hidden;
  border-radius: 2px;
  background-color: #333;
}
.recruit-01__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.recruit-01__content {
  margin-block: 4rem; /* 写真より文章が長い時も上下に余白を確保 */
}
.recruit-01 .c-heading-h3 {
  margin: 0 0 2.4rem;
  color: var(--color-tone-blue);
}
.recruit-01__text {
  margin: 0 0 3.2rem;
  font-size: 1.6rem;
  line-height: 1.9;
}
@media screen and (max-width: 768px) {
  .recruit-01__en {
    right: 5%;
    font-size: 8rem;
    z-index: 5; /* SPは写真の上に重ねる */
  }
  .recruit-01__inner {
    grid-template-columns: 1fr;
    padding: 0; /* 写真を画面幅いっぱいに */
    gap: 1.6rem; /* 写真と見出しの間を詰める */
  }
  .recruit-01__photo {
    border-radius: 0;
  }
  .recruit-01__content {
    margin-block: 0 4rem; /* 写真直下に寄せる */
    padding-inline: 5%;
  }
  .recruit-01__content .c-link-button {
    display: flex;
    margin-inline: auto;
    align-self: center;
  }
  .career-01 .TopCareerPaletteList__title {
    margin-block-end: 0;
  }
}

/* =========================================================
   下層ページヒーロー + パンくず
   ========================================================= */
.c-breadcrumb {
  padding: 1.8rem var(--side);
  background: var(--gray);
  color: var(--color-text);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.c-breadcrumb .rank-math-breadcrumb {
  max-width: var(--inner);
  margin: 0 auto;
}

.c-breadcrumb .rank-math-breadcrumb p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0;
}

.c-breadcrumb a {
  color: inherit;
  transition: color 0.2s ease;
}

.c-breadcrumb .rank-math-breadcrumb p > a:first-of-type {
  display: inline-flex;
  align-items: center;
}

.c-breadcrumb .iconoir-home {
  font-size: 1.4rem;
  line-height: 1;
}

/* SP専用改行（PCでは無効） */
br.u-sp {
  display: none;
}
@media (max-width: 768px) {
  br.u-sp {
    display: inline;
  }
}
/* PC専用改行（SPでは無効） */
br.u-pc {
  display: inline;
}
@media (max-width: 768px) {
  br.u-pc {
    display: none;
  }
}
.u-visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-breadcrumb a:hover {
  color: var(--color-accent);
}

.c-breadcrumb .separator {
  color: var(--color-accent);
}

.c-breadcrumb .last {
  color: var(--color-tone-blue);
}

.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  padding: 0 var(--gutter);
  background: var(--color-pale-blue);
  text-align: center;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.page-hero::before {
  top: -160px;
  right: -320px;
  width: 742px;
  height: 540px;
  background-image: url(../images/bg03_blue.svg);
}

.page-hero::after {
  left: -400px;
  bottom: -220px;
  width: 702px;
  height: 555px;
  background-image: url(../images/bg08_blue.svg);
}

/* 商品案内系ページ（body.is-plain-hero）は背景装飾を出さない */
.is-plain-hero .page-hero::before,
.is-plain-hero .page-hero::after {
  content: none;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero__en {
  display: block;
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: clamp(4.2rem, 7vw, 7.2rem);
  font-weight: 400;
  line-height: 1;
}

.page-hero__ja {
  margin-top: 3.2rem;
  color: var(--color-accent);
  font-size: clamp(1.7rem, 2.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.5;
}
.page-hero__banner {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 1;
  display: block;
  width: clamp(14rem, 18vw, 22rem);
  height: auto;
  margin: 0;
  border: 5px solid #fff;
  transform: translateX(-50%);
}
/* レッスン一覧ヒーロー：見出し下のバナー画像 */
.page-hero__logo {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 1.6rem auto 0;
  border-radius: 5px;
}
.page-hero__description {
  max-width: 76rem;
  margin: 1.6rem auto 3.2rem;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.9;
}
.page-hero__description p + p {
  margin-top: 0.8rem;
}

/* =========================================================
   ご入会までの流れ（p-join-flow）／よくあるご質問（p-faq）
   ※会則セクション踏襲。流れ＝淡アクセント背景、FAQ＝白背景。色は is-pink/is-purple 追従。
   ========================================================= */
.p-join-flow {
  padding: var(--space-sec-half) 0;
  background: var(--color-pale-accent);
}
.p-join-flow .p-message .summary,
.p-faq .p-message .summary {
  flex: 1;
  width: auto;
  margin-left: 10rem;
}
.p-join-flow__heading,
.p-faq__heading {
  margin-bottom: 3.2rem;
}
.p-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.p-flow__item {
  display: flex;
  gap: 2rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--color-line);
}
.p-flow__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.p-flow__title {
  margin: 0.4rem 0 0.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-accent);
}
.p-flow__text {
  font-size: 1.5rem;
  line-height: 1.9;
}
.p-flow__note {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: var(--color-muted);
}

.p-faq {
  padding: var(--space-sec-half) 0;
  background: #fff;
}
.p-faq__list {
  border-top: 1px solid var(--color-line);
}
.p-faq__item {
  border-bottom: 1px solid var(--color-line);
}
.p-faq__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem 4rem 2rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.p-faq__q::-webkit-details-marker {
  display: none;
}
.p-faq__mark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-accent);
}
.p-faq__toggle {
  position: absolute;
  top: 2.1rem;
  right: 0.4rem;
  font-size: 1.8rem;
  color: var(--color-accent);
  transition: transform 0.3s ease;
}
.p-faq__item[open] .p-faq__toggle {
  transform: rotate(180deg);
}
.p-faq__a {
  display: flex;
  gap: 1.2rem;
  padding: 0 4rem 2.4rem 0;
}
.p-faq__mark--a {
  color: var(--color-text);
}
.p-faq__atext {
  margin: 0.2rem 0 0;
  font-size: 1.5rem;
  line-height: 1.9;
}


/* ピアノレッスン：3つの約束 */
.p-piano-promise {
  padding-top: var(--space-sec-half);
  padding-bottom: var(--space-sec-half);
  background: var(--color-pale-accent);
}
.p-piano-promise .p-message .summary {
  flex: 1;
  width: auto;
  margin-left: 10rem;
}
.p-piano-promise__heading {
  margin-bottom: 3.2rem;
}
.p-piano-promise__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-piano-promise__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.p-piano-promise__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
  line-height: 1;
}
.p-piano-promise__label span {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
}
.p-piano-promise__label strong {
  font-family: var(--font-en);
  font-size: clamp(2.8rem, 3.4vw, 3.6rem);
  font-weight: 700;
}
.p-piano-promise__box {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding: 2.4rem 2rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: #fff;
}
.p-piano-promise__title {
  margin: 0 0 1.4rem;
  color: var(--color-accent);
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
}
.p-piano-promise__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .p-piano-promise__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .p-piano-promise .p-message .summary {
    width: 100%;
    margin-left: 0;
  }
}
/* =========================================================
   404ページ（p-notfound＝リニューアル案内、p-sitemap＝階層サイトマップ）
   ========================================================= */
.p-notfound {
  padding-top: var(--space-sec-half);
}
.p-notfound__lead {
  margin-bottom: 4rem;
  line-height: 2.2;
}
.p-sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-sitemap a,
.p-sitemap__label {
  display: inline-block;
  padding: 0.6rem 0;
  font-weight: 700;
}
.p-sitemap a:hover {
  color: var(--color-accent);
}
/* 下層（各投稿・子ページ）は左罫線でぶら下げる */
.p-sitemap ul ul {
  margin: 0.2rem 0 1.6rem;
  padding-left: 2.4rem;
  border-left: 1px solid var(--color-line);
}
.p-sitemap ul ul a {
  font-weight: 400;
  font-size: 1.4rem;
  padding: 0.4rem 0;
}

@media screen and (max-width: 768px) {
  .c-breadcrumb {
    padding: 1.4rem 2rem;
  }

  .page-hero {
    min-height: auto;
    padding: 2rem 2rem;
  }

  .page-hero__ja {
    margin-top: 2rem;
  }

  .page-hero__description {
    font-size: 1.4rem;
  }

  .page-hero::before {
    top: -120px;
    right: -360px;
    transform: scale(0.6667);
    transform-origin: right top;
  }

  .page-hero::after {
    left: -320px;
    bottom: -260px;
    transform: scale(0.6667);
    transform-origin: left bottom;
  }
}
/* =========================================================
   下層記事 p-lesson
   ========================================================= */
.p-lesson {
  max-width: var(--inner);
  margin-inline: auto;
  padding: var(--space-sec) var(--side) 0;
}

.p-lesson > .c-icon-heading {
  margin-bottom: 2.4rem;
}
/* 詳細ページのタイトル（テンプレ側で常に表示＝ブロックの有無に依存しない）。色はアクセント追従 */
.p-lesson-head {
  max-width: var(--inner);
  margin-inline: auto;
  padding: var(--space-sec) var(--side) 0;
}
.p-lesson-head + .p-lesson,
.p-lesson-head + * .p-lesson {
  padding-top: 2.4rem;
}
.p-lesson-content {
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: var(--side);
}
.p-lesson__title--standalone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 1.8rem 2.4rem;
  background: var(--color-accent);
  color: #fff;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.5;
}
.p-lesson__title--standalone::before,
.p-lesson__title--standalone::after {
  content: "";
  position: absolute;
  background-color: var(--color-pale-accent);
  mask: url(../images/music-note-solid.svg) center / contain no-repeat;
  -webkit-mask: url(../images/music-note-solid.svg) center / contain no-repeat;
}
.p-lesson__title--standalone::before {
  top: -2.5rem;
  right: 0;
  width: 2em;
  height: 2em;
  rotate: 22deg;
}
.p-lesson__title--standalone::after {
  top: 2rem;
  right: 1rem;
  width: 1.2em;
  height: 1.2em;
  rotate: -18deg;
}
.p-lesson__section--intro > .p-lesson__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0 0 4rem;
  padding: 1.8rem 2.4rem;
  background: var(--color-tone-pink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.5;
}

.p-lesson__section--intro > .p-lesson__title::before,
.p-lesson__section--intro > .p-lesson__title::after {
  content: "";
  position: absolute;
  background-color: var(--color-pale-pink);
  mask: url(../images/music-note-solid.svg) center / contain no-repeat;
  -webkit-mask: url(../images/music-note-solid.svg) center / contain no-repeat;
}

.p-lesson__section--intro > .p-lesson__title::before {
  top: -2.5rem;
  right: 0;
  width: 2em;
  height: 2em;
  rotate: 22deg;
}

.p-lesson__section--intro > .p-lesson__title::after {
  top: 2rem;
  right: 5rem;
  width: 1.2em;
  height: 1.2em;
  rotate: -18deg;
}

.p-lesson__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: var(--space-sec);
}

.p-lesson__date {
  font-family: var(--font-en);
  color: var(--color-muted);
}

.p-lesson__thumb {
  margin-bottom: 4rem;
}

.p-lesson__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.p-lesson__lead {
  margin-bottom: 4rem;
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
}
.p-lesson__intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(32rem, 0.8fr);
  /* picが2行またぎでも余り高さが行間に分配されないよう、1行目は内容分だけにする */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "catchcopy pic"
    "text pic";
  row-gap: 1.6rem;
  column-gap: 5rem;
  align-items: start;
  margin-bottom: 0;
}

.p-lesson__intro-grid--no-pic {
  grid-template-columns: 1fr;
  grid-template-areas:
    "catchcopy"
    "text";
}

.p-lesson__catchcopy {
  grid-area: catchcopy;
  align-self: start;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
}

.p-lesson__intro-text {
  grid-area: text;
  align-self: start;
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
}

/* 特長・リード文（キャッチコピー下の本文。後続に本文があれば間を空ける） */
.p-lesson__intro-text .p-lesson__lead {
  margin: 0 0 1.6rem;
}
.p-lesson__intro-text .p-lesson__lead:last-child {
  margin-bottom: 0;
}

.p-lesson__intro-pic {
  grid-area: pic;
  align-self: stretch;
  overflow: hidden;
}

.p-lesson__detail-link {
  margin-top: 2.4rem;
}
.p-lesson__intro-pic img {
  display: block;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .p-lesson__intro-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "catchcopy"
      "pic"
      "text";
    gap: 2.4rem;
  }

  .p-lesson__intro-grid--no-pic {
    grid-template-areas:
      "catchcopy"
      "text";
  }

  .p-lesson__intro-pic {
    aspect-ratio: 4 / 3;
  }
}

.p-lesson .category {
  display: inline-block;
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  background: var(--color-pale-blue);
  color: var(--color-tone-blue);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.p-lesson .category--primary {
  width: 11rem;
  height: 2.6rem;
  padding: 0;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 1.2rem;
  line-height: 2.6rem;
  text-align: center;
}

.p-lesson__section {
  display: flow-root;
}

/* セクション余白は bottom に付ける（サイト共通ルール） */
.p-lesson__section {
  margin-bottom: var(--space-sec);
}

.p-lesson__block {
  margin-top: 0;
}

.p-lesson__block > .c-icon-heading {
  margin-bottom: 2.4rem;
}

.p-lesson__actions {
  margin-top: var(--space-sec);
  text-align: center;
}

/* =========================================================
   スペック表 c-spec-table（項目：内容。th=見出し列、SP(≤600)で縦積み）
   ========================================================= */
.c-spec-table {
  width: 100%;
  /* 前後の本文・注釈がどれも margin を持たないので、表側で上下の間隔を持つ */
  margin: 3rem 0;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.c-spec-table th,
.c-spec-table td {
  padding: 1.6rem 2rem;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.c-spec-table th {
  width: 24rem;
  background: var(--color-pale-accent);
  color: var(--color-accent);
  font-weight: 700;
  border-bottom: 1px solid var(--color-accent);
}
/* WYSIWYG由来の <p> の余分な余白を詰める（スペック表ブロック） */
.c-spec-table td > p:first-child {
  margin-top: 0;
}
.c-spec-table td > p:last-child {
  margin-bottom: 0;
}
.c-spec-table td a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}
@media (max-width: 600px) {
  .c-spec-table th,
  .c-spec-table td {
    display: block;
    width: 100%;
  }

  .c-spec-table tr + tr th {
    border-top: 0;
  }
}

/* =========================================================
   教室リスト c-classroom-list（店舗情報＋開講日＋申込みリンクのカード2列。SP(≤600)で1列）
   ========================================================= */
/* p-goods__shops＝商品案内ページの「取扱店」。レッスン詳細の開講教室一覧と同じ全幅帯 */
.p-lesson__section--classrooms,
.p-goods__shops {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 0;
  padding-block: clamp(2.4rem, 4vw, 5rem);
  padding-inline: max(var(--side), calc((100vw - var(--inner)) / 2 + var(--side)));
  background: var(--color-pale-accent);
}
.p-goods__shops > .c-icon-heading {
  margin-bottom: 2.4rem;
}
.p-lesson__section--classrooms .p-lesson__actions {
  margin-top: 4rem;
}

.c-classroom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0,1fr) で中身の長さに列幅を引っ張られないようにする（常に50/50） */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.c-classroom-item {
  padding: 3rem;
  border: 0;
  border-radius: 1.6rem;
  background: #fff;
  font-size: 1.6rem;
  /* TEL・メールアドレスは途中で改行できないため、極端に狭い端末でカードからはみ出す */
  overflow-wrap: anywhere;
}
.c-classroom-item__name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
.c-classroom-item__name-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1.4em;
}
.c-classroom-item__name a {
  color: var(--color-accent);
  text-decoration: none;
}
.c-classroom-item__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.c-classroom-item__address {
  margin-top: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.7;
}
.c-classroom-item__tel {
  margin-top: 0.4rem;
  font-size: 1.6rem;
}
.c-classroom-item__schedule {
  display: flex;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 0;
  font-size: 1.6rem;
  line-height: 1.7;
}
.c-classroom-item__schedule dt {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-accent);
}
.c-classroom-item__schedule dd {
  margin: 0;
  min-width: 0;
}
.c-classroom-item__link {
  display: flex;
  margin: 2.4rem auto 0;
  font-size: 1.6rem;
}
@media (max-width: 600px) {
  /* 1fr だと最小幅が min-content になり、TEL・メールの長い文字列にトラックが押し広げられて
     カードが右にはみ出す（左右の余白が揃わなくなる）。2列側と同じく minmax(0,1fr) にする */
  .c-classroom-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   下層記事 p-event（イベント投稿。p-lesson と同構造）
   ========================================================= */
.p-event {
  max-width: 90rem;
  margin-inline: auto;
  padding: var(--space-sec) var(--side);
}

.p-event > .c-icon-heading {
  margin-bottom: 2.4rem;
}

.p-event__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: var(--space-sec-half);
}

.p-event__date {
  font-family: var(--font-en);
  color: var(--color-muted);
}

.p-event__lead {
  margin-bottom: 4rem;
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
}

.p-event .category {
  display: inline-block;
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  background: var(--color-pale-blue);
  color: var(--color-tone-blue);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.p-event .category--primary {
  width: 11rem;
  height: 2.6rem;
  padding: 0;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 1.2rem;
  line-height: 2.6rem;
  text-align: center;
}

.p-event__block {
  margin-bottom: 5rem;
}

.p-event__block > .c-icon-heading {
  margin-bottom: 2.4rem;
}

/* =========================================================
   デザイン見出しブロック（ACF・単体配置用）
   ========================================================= */
.free-post.is-heading-block {
  --free-accent: var(--color-tone-blue);
  --free-pale: var(--color-pale-blue);
  margin: 3rem 0;
}

.free-post.is-heading-block h2,
.free-post.is-heading-block h3,
.free-post.is-heading-block h4,
.free-post.is-heading-block h5,
.free-post.is-heading-block h6 {
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0;
}

.free-post.is-heading-block h2 {
  display: block;
  width: 100%;
  padding: 1.2rem 2rem;
  border-radius: 0.4rem;
  background: var(--free-accent);
  color: #fff;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
}

.free-post.is-heading-block h3 {
  position: relative;
  padding-bottom: 1.2rem;
  color: var(--free-accent);
  font-size: clamp(2rem, 2.4vw, 2.6rem);
}

.free-post.is-heading-block h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--free-accent);
}

.free-post.is-heading-block h4 {
  display: block;
  width: 100%;
  padding: 1rem 1.8rem;
  border: 1px solid var(--free-accent);
  border-radius: 0.4rem;
  background: var(--free-pale);
  color: var(--free-accent);
  font-size: clamp(1.8rem, 2vw, 2.2rem);
}

.free-post.is-heading-block h5 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.8rem, 2vw, 2.2rem);
}

.free-post.is-heading-block h5::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--free-accent);
}

.free-post.is-heading-block h6 {
  font-size: 1.8rem;
  color: var(--color-text);
}

.free-post.is-accent-blue {
  --free-accent: var(--color-tone-blue);
  --free-pale: var(--color-pale-blue);
}
.free-post.is-accent-pink {
  --free-accent: var(--color-tone-pink);
  --free-pale: var(--color-pale-pink);
}
.free-post.is-accent-green {
  --free-accent: var(--color-tone-green);
  --free-pale: var(--color-pale-green);
}
.free-post.is-accent-orange {
  --free-accent: var(--color-tone-orange);
  --free-pale: var(--color-pale-orange);
}
.free-post.is-accent-purple {
  --free-accent: var(--color-tone-purple);
  --free-pale: var(--color-pale-purple);
}

@media screen and (max-width: 768px) {
  .free-post.is-heading-block h2 {
    padding: 1.1rem 1.5rem;
  }
}

/* =========================================================
   コアブロック（フロント＋エディタ共通 / px で指定）
   ========================================================= */
:root {
  --block-accent: var(--color-tone-blue);
  --block-pale: var(--color-pale-blue);
  --block-line: #cdeef8;
}

/* 段落・リンク・強調 */
.wp-block-paragraph {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: var(--lh-lead);
  word-break: break-word;
}

.wp-block-paragraph a {
  color: var(--block-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.wp-block-paragraph a:hover {
  color: var(--color-tone-navy);
  text-decoration-color: transparent;
}

.wp-block-paragraph strong,
.wp-block-paragraph b {
  font-weight: 700;
  color: var(--color-tone-navy);
}

.wp-block-paragraph em,
.wp-block-paragraph i {
  font-style: normal;
  color: var(--block-accent);
}

.wp-block-paragraph code {
  padding: 0.18em 0.45em;
  border: 1px solid var(--block-line);
  border-radius: 4px;
  background: var(--block-pale);
  color: var(--color-tone-navy);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

/* コア見出し（装飾なし・本文色＋サイズ段階） */
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 40px 0 18px;
}

h2.wp-block-heading {
  font-size: 22px;
}

h3.wp-block-heading {
  font-size: 20px;
}

h4.wp-block-heading {
  font-size: 18px;
}

h5.wp-block-heading {
  font-size: 17px;
}

h6.wp-block-heading {
  font-size: 16px;
}

/* コードブロック */
.wp-block-code {
  margin: 0 0 28px;
  padding: 20px 24px;
  overflow-x: auto;
  border-radius: 6px;
  background: #243544;
  color: #f7fbfd;
  font-size: 16px;
  line-height: 1.7;
}

.wp-block-code code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* 韻文（Verse） */
.wp-block-verse {
  position: relative;
  margin: 0 0 28px;
  padding: 36px 26px 22px 30px;
  overflow: visible;
  border-radius: 0;
  background: var(--gray);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-lead);
  white-space: pre-wrap;
}

.wp-block-verse::before {
  content: "\201C";
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: var(--font-en);
  font-size: 60px;
  line-height: 1;
  color: var(--color-muted);
}

/* 引用 */
.wp-block-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 22px 26px 22px 30px;
  border-left: 5px solid var(--block-accent);
  background: var(--block-pale);
  color: var(--color-text);
}

.wp-block-quote p:last-child {
  margin-bottom: 0;
}

/* プルクオート */
.wp-block-pullquote {
  margin: 0 0 28px;
  padding: 22px 26px;
  border-top: 3px solid var(--block-accent);
  border-bottom: 3px solid var(--block-accent);
  text-align: left;
}

.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.wp-block-pullquote p {
  font-size: 18px;
  line-height: var(--lh-lead);
  color: var(--color-text);
}

.wp-block-pullquote cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-muted);
  font-style: normal;
}

/* 埋め込みブロック */
.wp-block-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.wp-embed-aspect-4-3 iframe {
  aspect-ratio: 4 / 3;
}
.wp-embed-aspect-1-1 iframe {
  aspect-ratio: 1 / 1;
}
/* 縦型は全幅だと画面より縦に長くなるので、幅を絞って中央に置く */
.wp-embed-aspect-9-16 iframe {
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin-inline: auto;
  display: block;
}

/* 詳細ブロック */
.wp-block-details {
  margin: 0 0 28px;
}

.wp-block-details summary {
  position: relative;
  padding: 16px 32px 16px 0;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  font-weight: 700;
  text-align: left;
  list-style: none;
  cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.wp-block-details[open] summary {
  margin-bottom: 24px;
}

.wp-block-details[open] summary::after {
  content: "\2212";
}

.wp-block-details[open] {
  border-bottom: 1px solid var(--color-text);
}

/* リスト */
ul.wp-block-list,
ol.wp-block-list {
  margin: 0 0 26px;
  padding-left: 0;
  list-style: none;
}

.wp-block-list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 24px;
  font-size: 16px;
  line-height: var(--lh-base);
}

ul.wp-block-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.78em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--block-accent);
}

ol.wp-block-list {
  counter-reset: block-ol;
}

ol.wp-block-list > li {
  counter-increment: block-ol;
}

ol.wp-block-list > li::before {
  content: counter(block-ol);
  position: absolute;
  left: 0;
  top: 0.25em;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--block-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 10px;
  line-height: 1;
}

/* 区切り線 */
hr.wp-block-separator {
  height: 1px;
  margin: 40px 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--block-accent), transparent);
}

/* 表 */
.wp-block-table {
  margin: 40px 0;
}

.wp-block-table table {
  width: auto;
  border-collapse: collapse;
}

/* table を挟んで指定（WP本体の固定レイアウト指定より優先させるため） */
.wp-block-table table.has-fixed-layout {
  width: auto;
  table-layout: auto;
}

/* table を挟んで指定（WP本体の .wp-block-table th/td より優先させるため） */
.wp-block-table table th,
.wp-block-table table td {
  padding: 20px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}

/* has-fixed-layout：ボーダー色デフォルト（コア表） */
.wp-block-table table.has-fixed-layout th,
.wp-block-table table.has-fixed-layout td {
  border-color: var(--color-line);
}

/* Flexible Table Block（プラグイン既定の黒ボーダーを上書き） */
.wp-block-flexible-table-block-table {
  margin: 40px 0;
}

.wp-block-flexible-table-block-table table {
  width: auto;
  border-collapse: collapse;
}

.wp-block-flexible-table-block-table table.has-fixed-layout {
  width: auto;
  table-layout: auto;
}

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout tr td,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr td {
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-line);
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}

/* 1列目（見出し列）は内容幅にフィット＋水色背景＋太字 */
.wp-block-table table.has-fixed-layout tr > :first-child,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout tr > :first-child {
  width: 1%;
  white-space: nowrap;
  background: var(--color-pale-blue);
  font-weight: 700;
}

/* 表内の素のリンク（ボタン等のクラス付きリンクは対象外） */
.has-fixed-layout a:not([class]) {
  color: var(--block-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.has-fixed-layout a:not([class]):hover {
  color: var(--color-tone-navy);
  text-decoration-color: transparent;
}

@media screen and (max-width: 768px) {
  .wp-block-quote,
  .wp-block-code {
    padding: 18px;
  }
  /* 表はSPで全幅に。1列目(色付き見出し列)の nowrap を外して折り返させないと、
     見出し列が最長ラベルの幅まで広がって本文側が潰れる */
  .wp-block-table table,
  .wp-block-table table.has-fixed-layout,
  .wp-block-flexible-table-block-table table,
  .wp-block-flexible-table-block-table table.has-fixed-layout {
    width: 100%;
  }
  .wp-block-table table.has-fixed-layout tr > :first-child,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout tr > :first-child {
    width: auto;
    white-space: normal;
  }
  /* 1列目は幅を指定せず、2列目の最低幅で押し返して決めさせる。
     こうすると表ごとに最適な幅になり（品番表は広く・項目名だけの表は狭く）、
     表内の全行では必ず同じ幅に揃う。1列目の min-width は痩せすぎ防止。
     ※ max-width は % 指定だとテーブルセルで無視され、em 指定だと文字がはみ出すので使わない。
     3列以上の表は列が詰まるので対象外 */
  .wp-block-table table.has-fixed-layout:not(:has(tr > :nth-child(3))) tr > :first-child,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout:not(:has(tr > :nth-child(3))) tr > :first-child {
    min-width: 7em;
  }
  .wp-block-table table.has-fixed-layout:not(:has(tr > :nth-child(3))) tr > :nth-child(2),
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout:not(:has(tr > :nth-child(3))) tr > :nth-child(2) {
    min-width: 11em;
  }
  .wp-block-table table th,
  .wp-block-table table td,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout tr th,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table.has-fixed-layout tr td,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr td {
    padding: 12px;
    font-size: 14px;
  }
}
/* =========================================================
   裁ち切りSVG
   ========================================================= */
.news-02,
.event-archive-01,
.p-lesson,
.service-02,
.service-02 .home__service,
.repair-01,
.purchase-01 {
  isolation: isolate;
}

.news-02 > *,
.event-archive-01 > *,
.p-lesson > *,
.service-02 > *,
.service-02 .home__service > *,
.repair-01 > *,
.purchase-01 > * {
  position: relative;
  z-index: 1;
}

.news-02::before,
.service-02::before,
.home__service--orange::before,
.home__service--purple::before,
.home__service--pink::before,
.repair-01::before,
.purchase-01::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.service-02::before {
  top: -200px;
  right: -400px;
  width: 760px;
  height: 574px;
  background-image: url(../images/bg06_green.svg);
}

.home__service--orange::before {
  top: -100px;
  left: -400px;
  width: 702px;
  height: 555px;
  background-image: url(../images/bg05_yell.svg);
}

.home__service--purple::before {
  top: -100px;
  left: -400px;
  width: 760px;
  height: 574px;
  background-image: url(../images/bg09_pur.svg);
}

.home__service--pink::before {
  top: -100px;
  left: -400px;
  width: 768px;
  height: 583px;
  background-image: url(../images/bg04_pink.svg);
}

.repair-01::before {
  top: -100px;
  right: -400px;
  width: 742px;
  height: 540px;
  background-image: url(../images/bg03_blue.svg);
}

.purchase-01::before {
  top: -100px;
  left: -400px;
  width: 721px;
  height: 563px;
  background-image: url(../images/bg08_blue.svg);
}

@media screen and (max-width: 768px) {
  .news-02::before,
  .home__service--orange::before,
  .home__service--purple::before,
  .home__service--pink::before,
  .purchase-01::before {
    left: -350px;
    transform: scale(0.6667);
    transform-origin: left top;
  }

  .service-02::before,
  .repair-01::before {
    right: -300px;
    transform: scale(0.6667);
    transform-origin: right top;
  }

  .news-02::before {
    top: -50px;
  }

  .service-02::before {
    top: -100px;
  }

  .home__service--orange::before {
    top: -80px;
  }

  .home__service--pink::before {
    left: auto;
    right: -300px;
    transform-origin: right top;
  }
}
/* kids_lesson archive: category groups and three-column cards */
.kids-lesson-archive {
  padding-top: 6rem;
}
/* 店舗詳細の開講レッスンでは一覧アーカイブ用の上余白は不要 */
.p-shop__section--lessons .kids-lesson-archive {
  padding-top: 0;
}

.kids-lesson-group + .kids-lesson-group {
  margin-top: var(--space-sec);
}

.kids-lesson-group__title {
  margin: 0 0 3rem;
}

.kids-lesson-archive .career-01.l-inner {
  max-width: 140rem;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList {
  display: grid;
  align-items: stretch;
  gap: 3rem;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList__item,
.kids-lesson-archive .career-01 .TopCareerPaletteList__item:not(:last-child) {
  margin: 0;
  padding: 0;
  border: 0;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList__link {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 1.6rem;
  background: #fff;
  transition: opacity 0.3s ease;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList__link:hover {
  opacity: 0.85;
}
.kids-lesson-archive .career-01 .TopCareerPaletteList__link:hover .career-01-arrow {
  background: var(--clr);
  color: #fff;
}

/* 一覧は比率を固定せず、画像の高さのまま出す（TOPの career-01 は 190/127 のまま） */
.kids-lesson-archive .career-01 .TopCareerPaletteList__photo {
  width: calc(100% - 2rem);
  margin: 1rem;
  aspect-ratio: auto;
  background: #fff;
}
/* 一覧サムネは切り抜かず、画像そのものの高さで出す */
.kids-lesson-archive .career-01 .TopCareerPaletteList__photo img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList__body {
  flex: 1;
  width: 100%;
  padding: 0 2rem 4.3rem;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList__title {
  margin: 0 0 1rem;
  font-size: 1.8rem;
}

.kids-lesson-archive .career-01 .TopCareerPaletteList__link .career-01-arrow {
  display: grid;
  position: absolute;
  right: 1.8rem;
  bottom: 1.8rem;
  width: 4rem;
  height: 4rem;
}

.kids-lesson-archive__empty {
  text-align: center;
}

/* music_lesson 一覧：内側幅は event-archive-01 と同じ --inner に合わせる */
.music-lesson-archive .career-01.l-inner {
  max-width: var(--inner);
}

@media (min-width: 768px) {
  .kids-lesson-archive .career-01 .TopCareerPaletteList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .kids-lesson-archive .career-01 .TopCareerPaletteList {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* kids_lesson archive: classroom rules introduction */
.kids-lesson-rule {
  position: relative;
  isolation: isolate;
  padding: var(--space-sec-half) 0;
  background: var(--color-pale-accent);
}

.kids-lesson-rule::before {
  content: "";
  position: absolute;
  top: -16rem;
  right: -30rem;
  z-index: 0;
  width: 74.2rem;
  height: 54rem;
  pointer-events: none;
  background: url(../images/bg02_pink.svg) center / contain no-repeat;
}

.kids-lesson-rule > .l-inner {
  position: relative;
  z-index: 1;
}

.kids-lesson-rule .p-message .summary {
  flex: 1;
  width: auto;
  margin-left: 10rem;
}

.kids-lesson-rule .p-message .summary .text {
  margin-bottom: 3rem;
  line-height: var(--lh-lead);
}
.kids-lesson-rule__links {
  display: grid;
  gap: 1.2rem;
}

.kids-lesson-rule__links .c-text-button {
  width: 100%;
}

.kids-lesson-rule__links .c-text-button__label {
  min-width: 0;
}
@media (max-width: 768px) {
  .kids-lesson-rule::before {
    top: -10rem;
    right: -34rem;
    scale: 0.6667;
    transform-origin: right top;
  }

  .kids-lesson-rule .p-message .summary,
  .p-join-flow .p-message .summary,
  .p-faq .p-message .summary {
    width: 100%;
    margin-left: 0;
  }
}

/* =========================================================
   店舗・教室：一覧（shop-archive-01）／詳細（p-shop）
   ========================================================= */
.shop-archive-01 {
  padding-top: 6rem;
}
.shop-archive-01__group {
  padding-block: clamp(2.4rem, 4vw, 5rem);
}
.shop-archive-01__group + .shop-archive-01__group {
  margin-top: 6rem;
}
/* 他ページから #school で飛んでくるので、固定ヘッダーの下に潜らせない */
.shop-archive-01__group .c-icon-heading[id] {
  scroll-margin-top: 10rem;
}
.shop-archive-01__group .c-icon-heading {
  margin-bottom: 2.4rem;
}
.shop-archive-01__group .c-heading-h4 {
  margin: 4rem 0 1.6rem;
}

/* 一覧用カード：グリッド構成「店舗名|画像」「住所|画像」「電話|画像」「SNS（全幅）」。帯なし白背景でも輪郭が出るよう罫線付き */
.c-classroom-item--archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(19rem, 38%);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "name pic"
    "addr pic"
    "tel  pic"
    "sns  sns";
  column-gap: 2rem;
  border: 1px solid var(--color-accent); /* accent連動（is-purple配下では紫） */
}
.c-classroom-item--archive .c-classroom-item__name {
  grid-area: name;
  margin-bottom: 1.2rem;
}
.c-classroom-item--archive .c-classroom-item__address {
  grid-area: addr;
}
.c-classroom-item--archive .c-classroom-item__tel {
  grid-area: tel;
}
.c-classroom-item__photo {
  grid-area: pic;
  width: 100%;
}
.c-classroom-item__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
a.c-classroom-item__photo {
  transition: opacity 0.2s;
}
a.c-classroom-item__photo:hover {
  opacity: 0.75;
}
/* SNS行：丸枠なしの素アイコンでさらに小さく。ラベル（LINE用途）は極小 */
.c-classroom-item--archive .c-sns-links {
  grid-area: sns;
  gap: 1.2rem 1.4rem;
  margin-top: 2.5rem;
}
/* 実施会場一覧ブロック（b-venue-list）：写真なしの1カラムグリッド */
.b-venue-list .c-classroom-item--archive {
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "addr"
    "tel"
    "sns";
}

/* お問い合わせ（店舗）ブロック：上罫線＋中央寄せの連絡先フッター */
.b-shop-contact {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid var(--color-line);
  text-align: center;
}
.b-shop-contact__name {
  margin: 0 0 1.2rem;
  font-size: 2rem;
  font-weight: 700;
}
.b-shop-contact__name a {
  color: var(--color-accent);
  text-decoration: none;
}
.b-shop-contact__name a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.b-shop-contact__tel {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.9;
}
.b-shop-contact .b-shop-contact__sns {
  justify-content: center;
  margin-top: 3rem;
}
/* ラベル（生徒様用）はアイコンの下に極小（店舗一覧カードと同じ） */
.b-shop-contact__sns .c-sns-links__item {
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.b-shop-contact__sns .c-sns-links__label {
  font-size: 0.9rem;
}

/* お問い合わせ（複数会場）ブロック：連絡先リスト */
.b-pf-contact {
  margin-bottom: var(--space-sec);
}
/* ブロックエディタ見出しh5と同じスタイル（丸ポチ＋横並び） */
.b-pf-contact__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  font-size: clamp(1.8rem, 2vw, 2.2rem);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.b-pf-contact__title::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.b-pf-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.4rem;
}
.b-pf-contact__item {
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.6rem;
  line-height: 1.8;
}
.b-pf-contact__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.b-pf-contact__venue {
  margin: 0 0 0.4rem;
  font-weight: 700;
}
.b-pf-contact__label {
  display: inline-block;
  min-width: 8em;
  margin-right: 1rem;
  color: var(--color-accent);
}
.b-pf-contact__tel,
.b-pf-contact__email {
  margin: 0;
}
.b-pf-contact__tel a,
.b-pf-contact__email a {
  color: inherit;
  text-decoration: none;
}
.b-pf-contact__tel a:hover,
.b-pf-contact__email a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@media (max-width: 600px) {
  .b-pf-contact__label {
    display: block;
    min-width: 0;
    margin-right: 0;
  }
}
.b-venue-list .c-classroom-item__form {
  grid-area: sns;
  justify-self: start;
  margin-top: 3.2rem;
  font-size: 1.6rem;
}
/* 一覧カードのSNS：ラベル（生徒用）はアイコンの下に極小 */
.c-classroom-item--archive .c-sns-links__item {
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.c-classroom-item--archive .c-sns-links__label {
  font-size: 0.9rem;
}

.p-shop {
  max-width: var(--inner);
  margin-inline: auto;
  padding: var(--space-sec) var(--side) 0;
}
.p-shop__section {
  margin-bottom: var(--space-sec);
}
/* p-shop 側が既に左右余白を持っているので、l-inner では二重に付けない */
.p-shop > .p-shop__section > .l-inner {
  padding-inline: 0;
}
/* 全幅の帯は p-shop の外へ出るので、中身の左右余白は自分で持つ */
.p-shop > .p-shop__section--bg > .l-inner {
  padding-inline: var(--side);
}
/* 全幅の薄アクセント地セクション。白地セクションと交互に置いて切れ目を作る（中身は .l-inner で内側幅に収める） */
/* セクション見出し。前の要素とは離し、リードとは詰める（既定の 6rem は空きすぎる） */
.p-shop__section > .l-inner > .c-heading {
  margin-top: 6rem;
  margin-bottom: 3rem;
}
/* レンタル等の大セクション内で中見出しとして使うときの前後余白（本来はレッスン詳細のh1用） */
.p-shop__section .p-lesson__title--standalone {
  margin: 6rem 0 3rem;
}
.p-shop__section .p-lesson__title--standalone:first-of-type {
  margin-top: 0;
}
/* 先頭でも直前に注釈があるときは詰まって見えるので上余白を戻す */
.p-shop__section .c-note + .p-lesson__title--standalone {
  margin-top: 6rem;
}
.p-shop__section--bg {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-sec-half);
  background: var(--color-pale-accent);
}
/* 帯の中は行長を少し詰める。白地のセクションも --narrow で同じ幅に揃えられる */
.p-shop__section--bg > .l-inner,
.p-shop__section--narrow > .l-inner {
  max-width: 100rem;
}
/* 下地と同色になる表・カードは白に返す */
.p-shop__section--bg .c-data-table tbody td,
.p-shop__section--bg .c-data-table tbody th,
.p-shop__section--bg .c-step-item {
  background: var(--color-bg);
}
.p-shop__section > .c-icon-heading {
  margin-bottom: 3.2rem;
}
.p-shop__title {
  margin: 0 0 3.2rem;
  padding: 1.8rem 2.4rem;
  background: var(--color-accent);
  color: #fff;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.5;
}
.p-shop__intro {
  line-height: var(--lh-lead);
}
/* 店舗詳細のキャッチコピー＋特長・リード文（レッスン詳細と同構成） */
.p-shop__catchcopy {
  margin: 0 0 1.6rem;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
}
.p-shop__lead {
  margin: 0;
}
.p-shop__head-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  gap: 6rem;
  align-items: start;
}
.p-shop__head-intro--no-pic {
  grid-template-columns: 1fr;
}
/* 本文が短く写真が高いとき用。テキストを写真の高さの中央に置く（サービスページで使用） */
.p-shop__head-intro--center {
  align-items: center;
}
.p-shop__head-pic img {
  display: block;
  width: 100%;
  aspect-ratio: 480 / 352;
  object-fit: cover;
}
@media (max-width: 768px) {
  /* SPは写真が上・テキストが下 */
  .p-shop__head-intro {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .p-shop__head-pic {
    order: -1;
  }
}

/* お知らせ抜粋：店舗詳細内はTOPニュースの形を踏襲 */
.p-shop__news-list.news-02 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: var(--space-sec);
  padding: var(--space-sec-half) var(--side);
  background: var(--color-pale-accent);
}
.p-shop__news-list.news-02::before {
  content: none;
}
.p-shop__news-list.news-02 .p-news {
  max-width: var(--inner);
  padding-inline: 0;
}
.p-shop__news-list .p-news-tabs__content {
  margin-top: 0;
}
/* 固定記事の「重要」チップはカテゴリと区別できる色に */
.p-shop__news-list .c-news__item .category--primary {
  background: var(--color-tone-pink);
}
.c-banner-grid.p-shop__news-banners {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 3rem;
}
.p-shop__news-banners .p-shop-news-banner {
  padding: 0;
  border: 0;
  background: #f7f7f9;
}
.p-shop-news-banner__link {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #fff;
  color: var(--color-text);
}
/* 画像なしバナー：写真が無い分、文字と矢印をカードの縦中央に置く */
/* 2クラス重ねは後方の .c-banner-grid__link { display: block } に勝たせるため */
.p-shop-news-banner__link.p-shop-news-banner__link--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-shop-news-banner__media {
  display: block;
  overflow: hidden;
}
.p-shop-news-banner__media img,
.p-shop-news-banner__media .c-banner-grid__text-banner {
  width: 100%;
  aspect-ratio: 480 / 352;
  object-fit: cover;
}
/* お知らせ・最新情報のバナーは切り抜かず収める */
.news-02.p-shop__news-list .c-banner-grid__link img {
  object-fit: contain;
}
.p-shop__news-banners .p-shop-news-banner__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin: 0;
  padding: 1.6rem 2rem 1.8rem;
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-shop-news-banner__arrow {
  flex: 0 0 auto;
  --tone: var(--color-tone-purple);
}
@media (max-width: 900px) {
  .c-banner-grid.p-shop__news-banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .c-banner-grid.p-shop__news-banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-shop__news-banners .p-shop-news-banner__caption {
    font-size: 1.4rem;
  }
}
.p-shop__section--products .p-shop-news-banner__media {
  border: 1px solid var(--color-line);
}

.p-shop__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.4rem;
}
.p-shop__info-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem 4rem;
  margin-top: 3.2rem;
}
.p-shop__map {
  margin-top: 3.2rem;
  margin-bottom: 3rem;
}
.p-shop__map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  border: 0;
}
/* 地図の横に画像がある時は左右半々。無ければ地図全幅 */
.p-shop__map--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}
.p-shop__map--split .p-shop__map-embed iframe {
  aspect-ratio: auto;
}
.p-shop__map-pic {
  overflow: hidden;
}
.p-shop__map-pic img {
  display: block;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .p-shop__map--split {
    grid-template-columns: 1fr;
  }
  .p-shop__map--split .p-shop__map-embed iframe {
    aspect-ratio: 16 / 7;
  }
  .p-shop__map-pic img {
    height: auto;
  }
}

/* 店舗ギャラリー：4カラム＋クリックでライトボックス */
.p-shop__gallery-wrap {
  margin-top: 4rem;
}
.p-shop__gallery-title {
  color: var(--color-tone-purple);
  margin-bottom: 2rem;
}
.p-shop__gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-shop__gallery-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-line);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-shop__gallery-btn img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.p-shop__gallery-btn:hover img,
.p-shop__gallery-btn:focus-visible img {
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .p-shop__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ライトボックス（拡大表示） */
/* 拡大表示できる写真。img をボタンで包むので見た目のリセットだけ持たせる */
.c-zoom-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.p-shop-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 6rem var(--side);
  background: rgba(0, 0, 0, 0.85);
}
.p-shop-lightbox[hidden] {
  display: none;
}
.p-shop-lightbox__figure {
  margin: 0;
  max-width: min(96rem, 100%);
  max-height: calc(100vh - 12rem);
}
.p-shop-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  object-fit: contain;
}
.p-shop-lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
}
.p-shop-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
}
/* display:grid が UA の [hidden] に勝つので明示的に消す */
.p-shop-lightbox__nav[hidden] {
  display: none;
}
.p-shop-lightbox__nav--prev {
  left: 2rem;
}
.p-shop-lightbox__nav--next {
  right: 2rem;
}
.p-shop-lightbox__close:hover,
.p-shop-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}
body.is-shop-lightbox-open {
  overflow: hidden;
}
@media (max-width: 768px) {
  .p-shop-lightbox__nav {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
  }
  .p-shop-lightbox__nav--prev {
    left: 0.8rem;
  }
  .p-shop-lightbox__nav--next {
    right: 0.8rem;
  }
}
.p-shop__access {
  margin-top: 4rem;
}
.p-shop__access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}
.p-shop__access-head > .c-heading-h4 {
  color: var(--color-tone-purple);
}
.p-shop__access-text {
  margin-top: 2rem;
  line-height: var(--lh-lead);
}
/* SNS：店名タイトルの上に右寄せで小さく並べる */
.c-sns-links.c-sns-links--sm.p-shop__sns {
  justify-content: flex-end;
  margin-bottom: 2rem;
}
/* コース紹介／体験レッスンの小見出し：上下余白のみ（色は文字色のまま） */
.p-shop__section--cta .c-heading-h4 {
  margin: 3rem 0;
}
/* 固定記事のピン（共通）：アイコンを左右反転 */
.c-news__pin {
  display: inline-block;
  transform: scaleX(-1);
}
/* 固定記事のピン（日付の前）。ピンなし行と日付の開始位置が揃うよう左に吊り出す */
.p-shop__news-list .c-news__pin {
  margin-left: calc(-1em - 0.6rem);
  margin-right: 0.6rem;
  color: var(--color-accent);
}
/* SPは左に吊り出す余白がないので負マージンなし */@media (max-width: 768px) {
  .p-shop__news-list .c-news__pin {
    margin-left: 0;
  }
}
/* TOPお知らせの固定ピン（店舗ページと同スタイル・色は水色） */
.c-news__pin--top {
  margin-left: calc(-1em - 0.6rem);
  margin-right: 0.6rem;
  color: var(--color-tone-blue);
}
@media (max-width: 768px) {
  .c-news__pin--top {
    margin-left: 0;
  }
}
/* c-tel：電話アイコン＋番号リンク＋（用途）の横並びセット。色はaccent連動（is-pink/is-purple追従） */
.c-tel {
  display: inline-flex;
  align-items: center;
  margin-right: 2.2em;
}
.c-tel__link {
  display: inline-flex;
  align-items: center;
  margin-right: 0.3em;
  color: var(--color-accent);
}
.c-tel__icon {
  margin-right: 0.4em;
  color: currentColor;
}

/* 特長・ポイント：キャッチコピー＋本文＋リッチエディタ＋画像のグリッドセット（何個でも追加） */
.p-shop__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(32rem, 0.8fr);
  grid-template-areas:
    "catch pic"
    "text pic"
    "rich rich"
    "button button";
  row-gap: 1.6rem;
  column-gap: 5rem;
  align-items: start;
  padding: 3rem;
  border-radius: 2rem;
  background: var(--color-pale-purple);
  box-shadow: 0 0 0 30px var(--color-pale-purple);
  margin: 6rem auto 9rem;
}
.p-shop__feature--no-pic {
  grid-template-columns: 1fr;
  grid-template-areas:
    "catch"
    "text"
    "rich"
    "button";
}
.p-shop__feature-catch {
  grid-area: catch;
  margin: 0;
  font-size: var(--fs-h4);
}
.p-shop__feature-text {
  grid-area: text;
  line-height: var(--lh-lead);
}
.p-shop__feature-rich {
  grid-area: rich;
  margin-top: 1.4rem;
}
.p-shop__feature-button {
  grid-area: button;
  margin-top: 1rem;
}
.p-shop__feature-pic {
  grid-area: pic;
  align-self: stretch;
  overflow: hidden;
}
.p-shop__feature-pic img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .p-shop__feature {
    grid-template-columns: 1fr;
    grid-template-areas:
      "catch"
      "pic"
      "text"
      "rich"
      "button";
    gap: 2.4rem;
    padding: 1rem;
  }
  .p-shop__feature-pic {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   c-sns-links：SNS・LINEリンク（丸アイコン＋ラベル）
   ========================================================= */
.c-sns-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-sns-links__item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  color: #111111; /* アイコン・ラベルとも単色黒 */
}
/* 丸枠なしの素アイコン（公式SVGを単色黒で表示） */
.c-sns-links__icon {
  display: grid;
  place-items: center;
  color: currentColor;
  font-size: 2rem;
  transition: opacity 0.2s;
}
.c-sns-links__item:hover .c-sns-links__icon {
  opacity: 0.7;
}
.c-sns-links__label {
  font-size: var(--fs-xs);
  color: currentColor;
  line-height: 1.4;
}
/* 店名上のSNS行：ラベル（LINEの用途）はアイコンの下に小さく */
.p-shop__sns .c-sns-links__item {
  flex-direction: column;
  gap: 0.2rem;
}
.p-shop__sns .c-sns-links__label {
  font-size: 0.9rem;
}
/* 小サイズ（ラベルはLINE用途のみ・他は aria-label。アイコンサイズは共通2rem） */
.c-sns-links--sm {
  gap: 1rem;
}

/* =========================================================
   c-banner-grid：画像バナーのグリッド（リンク・キャプション任意）
   ========================================================= */
/* サムネイル付き画像スライダー。メインの下に小さいサムネを並べて切り替える */
.c-thumb-slider__main {
  margin-bottom: 1rem;
}
.c-thumb-slider img {
  display: block;
}
/* 選択中以外は薄くして、今どれを見ているかを分かるようにする */
.c-thumb-slider__thumbs .splide__slide {
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.c-thumb-slider__thumbs .splide__slide.is-active,
.c-thumb-slider__thumbs .splide__slide:hover,
.c-thumb-slider__thumbs .splide__slide:focus-visible {
  opacity: 1;
}

.c-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-banner-grid__item {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--color-accent); /* accent連動（is-purple配下では紫） */
}
.c-banner-grid__link {
  display: block;
}
a.c-banner-grid__link {
  transition: opacity 0.2s;
}
a.c-banner-grid__link:hover {
  opacity: 0.75;
}
.c-banner-grid__link img {
  width: 100%;
  aspect-ratio: 480 / 352;
  object-fit: cover;
}
/* 画像なしのテキストバナー（レッスンカレンダー等） */
.c-banner-grid__text-banner {
  display: grid;
  place-items: center;
  min-height: 10rem;
  padding: 1.6rem;
  border: 1px solid var(--color-accent);
  background: var(--color-pale-accent);
  color: var(--color-accent);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
}
.c-banner-grid__caption {
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: left;
}
/* 横長バナー用（--wide）：2カラム・額縁と切り抜きをやめて画像に罫線だけ */
.c-banner-grid--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 高さの違う2枚が並んでもstretchで低い方のボーダー下に余白を作らない */
  align-items: start;
}
.c-banner-grid--wide .c-banner-grid__item {
  padding: 0;
  border: 0;
}
.c-banner-grid--wide .c-banner-grid__link img {
  aspect-ratio: auto;
  object-fit: unset;
  border: 1px solid var(--color-line);
}
@media (max-width: 600px) {
  .c-banner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }
  .c-banner-grid__caption {
    font-size: 1.4rem;
  }
}

/* =========================================================
   p-section-wrap：セクション（幅の器）
   page.php のように包む要素が無いテンプレートで、中身を --inner 幅に収める
   ========================================================= */
.p-section-wrap {
  /* page-hero は position:relative なので、はみ出した ::before/::after が
     静的な後続セクションより前面に描画される。ここを positioned にして上に出す */
  position: relative;
  z-index: 1;
  padding-block: var(--space-sec-half);
}
.p-section-wrap--flush {
  padding-block: 0;
}
/* 背景ありは帯だけ画面幅いっぱいに。中身は __inner 側で --inner に収まる */
.p-section-wrap--accent {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--color-pale-accent);
}
.p-section-wrap__inner {
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: var(--side);
}

/* 見出し＋本文ブロック */
.p-heading-text__title {
  margin-bottom: 2rem;
}
.p-heading-text__body {
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
}
.p-heading-text__body > * + * {
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  .p-heading-text__body {
    font-size: 1.4rem;
  }
}

/* =========================================================
   c-data-table：多列のデータ表（見出し行あり）
   「項目：内容」の c-spec-table とは別。一覧表向け
   ========================================================= */
.c-data-table-wrap {
  overflow-x: auto;
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
  .c-data-table-wrap {
    margin-bottom: 1.6rem;
  }
}
.c-data-table {
  width: 100%;
  /* これ以上詰まると読めないので、以降は横スクロールに切り替える */
  min-width: 72rem;
  border-collapse: collapse;
  font-size: 1.6rem;
}
/* 列が3つ程度の表は、SPでも横スクロールを出さずに収める。
   列が多い表（在庫一覧など）に付けると潰れるので、付けるかどうかは表ごとに判断する */
@media screen and (max-width: 768px) {
  .c-data-table--fit {
    min-width: 0;
    font-size: 1.4rem;
  }
  .c-data-table--fit th,
  .c-data-table--fit td {
    padding: 0.8rem 0.6rem;
  }
  .c-data-table--fit thead th {
    white-space: normal;
  }
}
.c-data-table th,
.c-data-table td {
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--color-line);
  line-height: var(--lh-base);
  vertical-align: middle;
}
.c-data-table thead th {
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.c-data-table td {
  background: var(--color-bg);
}
/* 金額など右寄せにしたいセル */
.c-data-table__num {
  text-align: right;
  white-space: nowrap;
}

/* =========================================================
   c-note：注釈（※〜）
   ========================================================= */
.c-note {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.c-note > li + li {
  margin-top: 0.4rem;
}
/* 注釈のあとに写真が続くときは間を空ける */
.c-note:has(+ .p-goods__figs) {
  margin-bottom: 3rem;
}
/* 表の注釈は表にくっつけ、余白は注釈の下だけに持たせる */
.c-data-table-wrap:has(+ .c-note) {
  margin-bottom: 0.8rem;
}
.c-data-table-wrap + .c-note {
  margin-top: 0;
  margin-bottom: 3rem;
}

/* =========================================================
   c-flow-list：STEPバッジ＋本文の縦並び（申込みの流れ等）
   ========================================================= */
.c-flow-list {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.c-flow-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.c-flow-item__num {
  flex: 0 0 auto;
  padding: 0.5rem 1.2rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.c-flow-item__text {
  font-size: 1.4rem;
  line-height: 1.6;
}
@media (max-width: 600px) {
  /* 幅が足りないときはバッジを上に落とす */
  .c-flow-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

/* =========================================================
   c-step-list：番号付きステップ（申込みの流れ・修理の流れ等）
   ========================================================= */
.c-step-list {
  display: grid;
  /* 項目数だけ列を作る（3個なら3列・4個なら4列）ので、モディファイアは不要 */
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 2.4rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.c-step-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2.4rem 2rem;
  border-radius: 1rem;
  background: var(--color-pale-accent);
}
/* pale-accent の帯の中に置くときは白地にしないとカードが背景に沈む */
.p-goods__block .c-step-item,
.p-goods__repair .c-step-item,
.p-goods__shops .c-step-item {
  background: var(--color-bg);
}
.c-step-item__num {
  padding: 0.4rem 1.6rem;
  border-radius: 50px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.c-step-item__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.c-step-item__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
@media (max-width: 600px) {
  .c-step-list {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

@media screen and (max-width: 768px) {
  .page-hero__banner {
    bottom: 1.2rem;
    width: 12rem;
  }

  .p-lesson__section--intro > .p-lesson__title {
    padding-right: 7rem;
  }

  .p-lesson__section--intro > .p-lesson__title::before {
    top: -1.8rem;
    right: -0.8rem;
  }

  .p-lesson__section--intro > .p-lesson__title::after {
    top: 2.4rem;
    right: 2.2rem;
  }
}

.c-sns-links__icon--mail,
.c-sns-links__icon--line,
.c-sns-links__icon--facebook,
.c-sns-links__icon--x,
.c-sns-links__icon--instagram,
.c-sns-links__icon--tiktok,
.c-sns-links__icon--threads,
.c-sns-links__icon--youtube {
  font-size: 0;
}

.c-sns-links__icon--mail::before,
.c-sns-links__icon--line::before,
.c-sns-links__icon--facebook::before,
.c-sns-links__icon--x::before,
.c-sns-links__icon--instagram::before,
.c-sns-links__icon--tiktok::before,
.c-sns-links__icon--threads::before,
.c-sns-links__icon--youtube::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.c-sns-links__icon--mail::before {
  mask-image: url(../images/icon_mail.svg);
  -webkit-mask-image: url(../images/icon_mail.svg);
}

.c-sns-links__icon--line::before {
  mask-image: url(../images/icon_line.svg);
  -webkit-mask-image: url(../images/icon_line.svg);
}

.c-sns-links__icon--facebook::before {
  mask-image: url(../images/icon_fb.svg);
  -webkit-mask-image: url(../images/icon_fb.svg);
}

.c-sns-links__icon--x::before {
  mask-image: url(../images/icon_x.svg);
  -webkit-mask-image: url(../images/icon_x.svg);
}

.c-sns-links__icon--instagram::before {
  mask-image: url(../images/icon_insta.svg);
  -webkit-mask-image: url(../images/icon_insta.svg);
}

/* TikTok / Threads は公式SVGが images に無いため公式グリフ（Simple Icons）をCSS埋め込み */
.c-sns-links__icon--tiktok::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22/%3E%3C/svg%3E");
}

.c-sns-links__icon--threads::before {
  mask-image: url(../images/icon_threads.svg);
  -webkit-mask-image: url(../images/icon_threads.svg);
}

/* YouTube も公式SVG未収録のため公式グリフ（Simple Icons）をCSS埋め込み。images に icon_youtube.svg が入ったら差し替え可 */
.c-sns-links__icon--youtube::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z%22/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z%22/%3E%3C/svg%3E");
}

/* =========================================================
   ACF BLOCK: 講師紹介モーダル
   ========================================================= */
.b-teacher-modal__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.b-teacher-modal__card {
  display: grid;
  gap: 1.2rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
.b-teacher-modal__photo {
  display: block;
  overflow: hidden;
  border-radius: 3rem;
  border: 1px solid var(--color-line);
  background: #fff;
  aspect-ratio: 4 / 3;
}
.b-teacher-modal__photo img {
  display: block;
  width: 100%;
  object-fit: cover;
  /* 人物写真なので上寄せ。中央だと顔が切れることがある */
  object-position: top center;
}
.b-teacher-modal__name {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-primary);
}
.b-teacher-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 4rem var(--side);
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}
.b-teacher-modal__overlay[hidden] {
  display: none;
}
.b-teacher-modal__dialog {
  position: relative;
  width: min(92rem, 100%);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 4rem;
  border-radius: 2rem;
  background: #fff;
}
.b-teacher-modal__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
}
.b-teacher-modal__detail-head {
  display: grid;
  grid-template-columns: minmax(18rem, 28rem) 1fr;
  align-items: stretch;
  gap: 3rem;
  margin-bottom: 3rem;
}
.b-teacher-modal__detail-photo {
  overflow: hidden;
  border-radius: 3rem;
  border: 1px solid var(--color-line);
}
/* モーダル内は写真を切り抜かず、元の縦横比のまま全体を見せる */
.b-teacher-modal__detail-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.b-teacher-modal__detail-name {
  margin: 0;
  font-size: 2.4rem;
  color: var(--color-primary);
}
.b-teacher-modal__section {
  padding-top: 2.4rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--color-line);
}
.b-teacher-modal__section h4 {
  margin: 0 0 1.2rem;
  font-size: 1.8rem;
  color: var(--color-accent);
}
.b-teacher-modal__section p,
.b-teacher-modal__text {
  margin: 0;
  line-height: 1.9;
}
.b-teacher-modal__section .c-link-button {
  margin-top: 3.2rem;
}
.b-teacher-modal__shop-name {
  font-weight: 700;
  color: var(--color-primary);
}
.b-teacher-modal__sns-title {
  margin-top: 3.2rem;
  font-weight: 700;
  color: var(--color-primary);
}
.b-teacher-modal__sns {
  margin-top: 0.8rem;
}
body.is-teacher-modal-open {
  overflow: hidden;
}
@media (max-width: 900px) {
  .b-teacher-modal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .b-teacher-modal__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .b-teacher-modal__overlay {
    padding: 2rem var(--side);
  }
  .b-teacher-modal__dialog {
    max-height: calc(100vh - 4rem);
    padding: 3.2rem 2rem 2.4rem;
  }
  .b-teacher-modal__detail-head {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
/* =========================================================
   ACF BLOCK: 自動ページ内リンク一覧
   ========================================================= */
.b-anchor-list {
  --anchor-accent: var(--color-tone-blue);
  --anchor-pale: var(--color-pale-blue);
  --anchor-line: var(--color-line);
  margin-bottom: var(--space-sec); /* セクションと同じ下余白 */
}
.b-anchor-list--pink {
  --anchor-accent: var(--color-tone-pink);
  --anchor-pale: var(--color-pale-pink);
}
.b-anchor-list--green {
  --anchor-accent: var(--color-tone-green);
  --anchor-pale: var(--color-pale-green);
}
.b-anchor-list--orange {
  --anchor-accent: var(--color-tone-orange);
  --anchor-pale: var(--color-pale-orange);
}
.b-anchor-list--purple {
  --anchor-accent: var(--color-tone-purple);
  --anchor-pale: var(--color-pale-purple);
}
.b-anchor-list__nav {
  padding: 2.4rem;
  border-radius: 1.6rem;
  background: var(--gray);
}
.b-anchor-list__nav-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.b-anchor-list__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--anchor-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--anchor-accent);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.b-anchor-list__nav-link:hover {
  background: var(--anchor-accent);
  color: #fff;
}
.b-anchor-list__nav-link--blue {
  --anchor-accent: var(--color-tone-blue);
}
.b-anchor-list__nav-link--pink {
  --anchor-accent: var(--color-tone-pink);
}
.b-anchor-list__nav-link--green {
  --anchor-accent: var(--color-tone-green);
}
.b-anchor-list__nav-link--orange {
  --anchor-accent: var(--color-tone-orange);
}
.b-anchor-list__nav-link--purple {
  --anchor-accent: var(--color-tone-purple);
}
.b-anchor-list__sections {
  display: grid;
  gap: 4rem;
  margin-top: 4rem;
}
.b-anchor-list__section {
  scroll-margin-top: 10rem;
}
.b-anchor-list__section--blue {
  --anchor-accent: var(--color-tone-blue);
  --anchor-pale: var(--color-pale-blue);
}
.b-anchor-list__section--pink {
  --anchor-accent: var(--color-tone-pink);
  --anchor-pale: var(--color-pale-pink);
}
.b-anchor-list__section--green {
  --anchor-accent: var(--color-tone-green);
  --anchor-pale: var(--color-pale-green);
}
.b-anchor-list__section--orange {
  --anchor-accent: var(--color-tone-orange);
  --anchor-pale: var(--color-pale-orange);
}
.b-anchor-list__section--purple {
  --anchor-accent: var(--color-tone-purple);
  --anchor-pale: var(--color-pale-purple);
}
.free-post.is-heading-block.b-anchor-list__heading {
  --free-accent: var(--anchor-accent);
  --free-pale: var(--anchor-pale);
  margin: 0 0 1.8rem;
}
.b-anchor-list__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.b-anchor-list__item-link {
  width: 100%;
  min-width: 0;
  white-space: normal;
  --tbtn: var(--anchor-accent);
  text-decoration: none;
}
.b-anchor-list__item-link .c-text-button__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.b-anchor-list__item-text {
  display: block;
  width: 100%;
  padding: 1rem 1.2rem 1rem 2.4rem;
  background: var(--anchor-pale);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.4;
}
.b-anchor-list__item-link:hover {
  color: var(--color-bg);
  text-decoration: none;
}
.b-anchor-list__back {
  margin: 2rem 0 0;
  text-align: right;
}
.b-anchor-list__back a {
  color: var(--anchor-accent);
  font-weight: 700;
  text-decoration: none;
}
.b-anchor-list__back a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@media (max-width: 768px) {
  .b-anchor-list__nav {
    padding: 1.6rem;
  }
  .b-anchor-list__nav-list,
  .b-anchor-list__items {
    grid-template-columns: 1fr;
  }
  .b-anchor-list__heading {
    font-size: 1.9rem;
  }
}


/* =========================================================
   商品案内カテゴリページ共通ブロック（p-goods__*）
   管楽器・ギター・エレクトーン・防音室ページで使う。見た目はピアノページ
   （下の p-piano__*）と同じ。デザイン確定後に p-piano 側を p-goods へ寄せて統合する
   ========================================================= */
/* 帯セクションは自前で上下パディングを持つので、さらに margin-bottom は付けない。
   .p-shop__section の margin-bottom が後ろにあり勝つため、複合セレクタで上書きする */
.p-shop__section.p-goods__shops,
.p-shop__section.p-goods__repair {
  margin-bottom: 0;
}
/* TOP用セクション（case-study／purchase-01 など）を p-shop の内側幅から抜いて全幅にする。
   これらは自前で内側の最大幅を持つので、p-shop の幅制限が二重にかかると崩れる */
.p-goods__wide {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* 保証セクションの導入：見出し下を半分（6rem→3rem）に詰め、リード文は中央寄せ。
   TOPの楽器買取（purchase-01）に影響させないため専用クラスでスコープする */
.p-goods__warranty .purchase-01__intro .c-heading {
  margin-bottom: 3rem;
}
.p-goods__warranty .purchase-01__intro .p-goods__text {
  margin-bottom: 3rem;
  text-align: center;
}
/* リペアは全幅の薄アクセント地。中身は --inner 幅に収める（取扱店の帯と同じ作り） */
.p-goods__repair {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-sec-half);
  padding-inline: max(var(--side), calc((100vw - var(--inner)) / 2 + var(--side)));
  background: var(--color-pale-accent);
}
/* リペア内の小見出しは、入れ子の位置に関わらず下の余白をそろえる */
.p-goods__repair .c-icon-heading {
  margin-bottom: 2.4rem;
}
/* 担当者写真：薄オレンジ地から浮かせるため白フチを付ける */
.p-goods__staff img {
  border: 10px solid #fff;
}

/* リペアは小見出しが何度も出てくるので、その直前の要素に下マージンを入れて区切る。
   見出しが p-goods__side-media の中に入っているブロックもあるので両方を対象にする */
.p-goods__repair > :has(+ .c-icon-heading),
.p-goods__repair > :not(.c-icon-heading):has(+ .p-goods__side-media) {
  margin-bottom: 6rem;
}

/* 修理料金表（SVG）。横に長い表なので1枚ずつ縦に並べ、狭い画面では横スクロールさせる */
.p-goods__repair-tables {
  display: grid;
  gap: 4rem;
  margin-bottom: 3rem;
}
/* grid項目は既定で min-width:auto のため、中の900px画像に押し広げられて figure が
   画面外まで伸び、overflow-x が働かない（＝スクロールできない）。0にして縮めるようにする */
.p-goods__repair-table {
  min-width: 0;
}
.p-goods__repair-table > .c-heading-h4 {
  margin-bottom: 1.2rem;
}
/* スクロールが起きる幅（表は最小900px。左右余白ぶん早めに始まるので1024pxを境にする）でだけ出す */
.p-goods__scroll-hint {
  display: none;
  margin: 0 0 0.8rem;
  font-size: var(--fs-xs);
}
@media (max-width: 1024px) {
  .p-goods__scroll-hint {
    display: block;
  }
}
/* 見出しは固定のまま表だけスクロールさせたいので、figure 側に overflow を持たせる */
.p-goods__repair-table figure {
  margin: 0;
  overflow-x: auto;
}
.p-goods__repair-table img {
  display: block;
  width: 100%;
  /* SVGは幅に比例して文字も縮む。900px を下回ると読めなくなるので以降は横スクロール */
  min-width: 90rem;
  height: auto;
}

/* PDF等の別窓リンクに添えるアイコン */
.p-goods__ext {
  margin-left: 0.4em;
  font-size: 1.2rem;
  vertical-align: middle;
}

/* ラインナップ／オンラインショップも p-shop の外に置かれる場合があるので、単体で幅を決める。
   p-shop の中では親が既に --inner 幅なので、二重に余白が付かないよう padding を戻す */
.p-goods__products {
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  /* page.php 直下だとヒーローに詰まるので上に余白を取る */
  margin-top: 6rem;
  padding-inline: var(--side);
}
.p-shop .p-goods__products {
  padding-inline: 0;
}

/* 店舗ごとに続けて並べるので、p-goods__products の上余白（6rem）は要らない */
.p-goods__online {
  margin-top: 0;
}

/* オンラインショップは3カラム。SP（≤900px）の2カラム指定を上書きしないよう min-width で囲う */
@media (min-width: 901px) {
  .p-goods__online .c-banner-grid.p-shop__news-banners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* バナーは横長のロゴ画像。既定の 480/352・cover だと左右が切れるので元の比率のまま出す */
.p-goods__online .p-shop-news-banner__media img {
  aspect-ratio: 480 / 236;
  object-fit: contain;
}

/* カタログの表紙は縦長なので、既定の横長トリミング（480/352・cover）をやめて全体を見せる */
.p-goods__catalog .p-shop-news-banner__media img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
/* カタログは4枚なので4カラム。SP（≤900px）の2カラム指定を上書きしないよう min-width で囲う */
@media (min-width: 901px) {
  .p-goods__catalog .c-banner-grid.p-shop__news-banners {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* SPは各バナーに枠線があるので、隙間を空けずに詰める */
@media (max-width: 768px) {
  .p-goods__catalog .c-banner-grid.p-shop__news-banners {
    gap: 0;
  }
}

/* 2カラム（p-message）の外に置く補足ブロック。--inner 幅で中央寄せ */
.p-goods__support {
  width: var(--inner);
  max-width: 100%;
  margin: 4rem auto 0;
}

/* 背景装飾は画像なので変数で色を変えられない。ページのアクセントごとに素材を差し替える
   （既定＝bg08_blue のまま。blue / navy は差し替えなし） */
.is-orange .p-goods__warranty.purchase-01::before {
  background-image: url(../images/bg05_yell.svg);
}
.is-pink .p-goods__warranty.purchase-01::before {
  background-image: url(../images/bg04_pink.svg);
}
.is-green .p-goods__warranty.purchase-01::before {
  background-image: url(../images/bg07_green.svg);
}
.is-purple .p-goods__warranty.purchase-01::before {
  background-image: url(../images/bg09_pur.svg);
}
/* 保証セクションの画像は写真でなく図版・バナーなので、切り抜かずに全体を見せる */
.p-goods__warranty .p-message__image .image1 {
  background: none;
}
.p-goods__warranty .p-message__image img {
  object-fit: contain;
}

/* case-study 型セクション：帯は全幅の薄アクセント地、中身は --inner 幅で中央寄せ */
.p-goods__about {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--color-pale-accent);
}
.p-goods__about .case-study__inner {
  max-width: var(--inner);
  margin-inline: auto;
}

/* ページ内リンクの着地位置を sticky ヘッダーの下にずらす */
.p-goods__products,
.p-goods__block,
.p-goods__wide,
.p-goods__about,
.p-goods__shops {
  scroll-margin-top: 10rem;
}

/* 導入：全幅ヒーロー＋大写真＋キャッチ＋リード */
.p-goods__top {
  padding: 0;
  /* 次のセクションとの間隔は他のセクションと同じ値で揃える */
  margin-bottom: var(--space-sec);
  overflow-x: clip;
}
.p-goods__top--has-page-hero {
  overflow-x: visible;
}
.p-goods__top--has-page-hero > .page-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: none;
}
.p-goods__top-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.6rem;
  margin-inline: auto;
  align-self: center;
}
.p-goods__top-copy {
  position: relative;
  z-index: 1;
  text-align: center;
}
/* 写真の下寄りにキャッチを白文字で重ねる（地色なし・影で可読性を確保）。
   margin-top の固定値で引き上げると、折り返しが増えたとき写真の下にはみ出して
   白文字が白背景に乗ってしまう。親(.p-goods__top-inner)基準で下端に固定する */
.p-goods__top-copy--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  padding: 0 4rem 4rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5);
}
.p-goods__top-copy--overlay .p-goods__top-title,
.p-goods__top-copy--overlay .p-goods__top-text {
  color: inherit;
}
.p-goods__top-copy--overlay .p-goods__top-title {
  margin-bottom: 2rem;
  font-size: clamp(2rem, 2.3vw, 3rem);
}
/* SPは写真が縦長なので、文字と余白を詰める */
@media screen and (max-width: 768px) {
  .p-goods__top-copy--overlay {
    padding: 0 2rem 2rem;
  }
  .p-goods__top-copy--overlay .p-goods__top-title {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.7;
  }
}
.p-goods__top-title {
  margin: 0;
  color: var(--color-accent);
  font-size: clamp(2.6rem, 3vw, 3.8rem);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.p-goods__top-text {
  max-width: 72rem;
  margin: 0 auto;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2;
  text-align: center;
}
/* 導入のキャッチ。リードより一段強く見せる */
.p-goods__top-text--catch {
  /* リードより文字が大きいぶん、行数が増えないよう幅を広めに取る */
  max-width: 84rem;
  color: var(--color-accent);
  font-size: clamp(1.6rem, 1.6vw, 2rem);
  font-weight: 700;
}
/* リード同士は続きの文章なので詰める。キャッチとの間だけ空ける */
.p-goods__top-text--catch + .p-goods__top-text {
  margin-top: 2.4rem;
}
.p-goods__top-text-line {
  white-space: nowrap;
}
/* キャッチは中央のまま、続く本文だけ左揃えにしたいとき */
.p-goods__top-copy--left .p-goods__top-text:not(.p-goods__top-text--catch) {
  text-align: left;
}
/* 導入文が top-copy に包まれず直下に置かれるケース（leader_guide）。
   他のブロックは必ず top-copy 経由なので、直下指定でここだけに効く */
.p-goods__top-inner > .p-goods__top-text {
  text-align: left;
}
/* SPは文節ごとに改行すると行が細切れになるので、句点まで続けて自然に折り返す */
@media screen and (max-width: 767px) {
  /* 左揃えにすると文字が画面端に付くので、左右に余白を入れる。
     SPはキャッチも左揃え（中央寄せでは行頭が揃わず読みにくい） */
  .p-goods__top-copy--left {
    padding-inline: 2rem;
  }
  .p-goods__top-copy--left .p-goods__top-text--catch {
    text-align: left;
  }
  /* 額縁ボックスの本文は、SPだと中央寄せでは行頭が揃わず読みにくい。
     入力側の改行もPC幅に合わせたものなので、SPでは自然に折り返す */
  .c-frame-box__text {
    text-align: left;
  }
  .c-frame-box__text br {
    display: none;
  }
  /* 見出しが語の途中で折れないよう、文節で折り返す（非対応ブラウザは従来どおり） */
  .c-frame-box__title {
    word-break: auto-phrase;
  }
}
.p-goods__top-image {
  width: 100%;
  max-width: var(--inner);
  margin: var(--space-sec-half) auto 0;
  overflow: hidden;
}
.p-goods__top-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 番号付きの大セクション（左に縦書き見出し＋透かし番号、右に本文） */
.p-goods__block {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(4rem, 7vw, 10rem);
  align-items: start;
  /* p-shop の外（page.php 直下など）に置かれても広がりすぎないよう、ブロック単体で幅を決める */
  width: 100%;
  max-width: var(--inner);
  margin: 6rem auto 9rem;
  padding: 3rem;
  border-radius: 2rem;
  background: var(--color-pale-accent);
  box-shadow: 0 0 0 30px var(--color-pale-accent);
}
.p-goods__block > .c-heading {
  grid-column: 1;
  grid-row: 1 / span 99;
  position: relative;
  margin-bottom: 0;
  padding-top: 8rem;
}
/* 番号を出さないブロックは、番号ぶんに空けていた上余白も詰める */
.p-goods__block--no-num > .c-heading {
  padding-top: 0;
}
.p-goods__block-heading-num {
  position: absolute;
  top: -0.8rem;
  left: 0;
  color: var(--color-pale-accent);
  font-size: clamp(5rem, 6vw, 6rem);
  /* 背景と同色なので multiply で下地に沈ませる（透かし表現） */
  mix-blend-mode: multiply;
  font-weight: 700;
  line-height: 1;
  writing-mode: horizontal-tb;
  pointer-events: none;
}
.p-goods__block > :not(.c-heading) {
  grid-column: 2;
}
.p-goods__block > .c-heading + .c-heading-h3 {
  margin-top: 0;
}
.p-goods__block .c-heading-h3 {
  margin-bottom: 1.5rem;
  color: var(--color-accent);
}

/* 本文・箇条書き・図版 */
.p-goods__text {
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* 段落が続くときだけ間を空ける */
.p-goods__text + .p-goods__text {
  margin-top: 2rem;
}
/* ラインナップはリード文と一覧がくっつくので間を空ける */
.p-goods__products .p-goods__text + .c-banner-grid {
  margin-top: 3.2rem;
}
/* 直後に中見出しが来るリード文は下に余白を持たせる（見出し側は先頭だけ上余白0のため） */
.p-goods__text:has(+ .p-lesson__title--standalone) {
  margin-bottom: 4rem;
}
/* 見出し直下に置くリード。中央寄せで幅を絞る */
/* 見出し直下のリード文。行長を絞って中央に置くが、本文は左寄せ */
.p-goods__text--lead {
  max-width: 72rem;
  margin-inline: auto;
  margin-bottom: 4rem;
  text-align: left;
}
.p-goods__list {
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}
.p-goods__list > li {
  position: relative;
  padding: 1rem 0 1rem 2.4rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.p-goods__list > li::before {
  content: "";
  position: absolute;
  top: 1.9rem; /* 丸の中心を1行目の中心に合わせる */
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.p-goods__list b {
  display: block;
  font-weight: 700;
}
/* 本文中のリンクはページのアクセント色＋下線 */
.p-goods__list a {
  color: var(--color-accent);
  text-decoration: underline;
}
.p-goods__list a:hover {
  opacity: 0.7;
}
.p-goods__figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
/* img を figure で包む場合があるので、ブラウザ既定の余白を消してグリッドの列に合わせる */
.p-goods__figs figure {
  margin: 0;
}
.p-goods__figs img {
  display: block;
  width: 100%;
  height: auto;
}
.p-goods__figs--single {
  max-width: calc((100% - 2rem) / 2);
}
/* 縦に積む。チラシのように1枚ずつ大きく見せたいとき */
.p-goods__figs--stack {
  grid-template-columns: minmax(0, 1fr);
  max-width: 72rem;
  margin-inline: auto;
}
.p-goods__qr {
  margin: 3rem auto 0;
  text-align: center;
}
.p-goods__qr img {
  display: block;
  width: 12rem;
  height: auto;
  margin-inline: auto;
}
.p-goods__qr figcaption {
  margin-top: 0.8rem;
  font-size: var(--fs-sm);
}
.p-goods__qr a:hover {
  opacity: 0.7;
}
/* 縦横比の違う写真を横並びにして、高さだけ揃える（幅は比率なりに変わる） */
.p-goods__figs--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.p-goods__figs--row img {
  width: auto;
  max-width: 100%;
  height: 32rem;
  object-fit: contain;
}
/* 枚数が少ないときに列数を固定する（auto-fit だと1枚あたりが小さくなるため） */
.p-goods__figs--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 縦横比の違う写真を並べるので、高さを揃えて切り抜く */
.p-goods__figs--2col img {
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--color-bg);
}
.p-goods__figs--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 768px) {
  .p-goods__figs--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 箇条書き＋右に写真の横並び */
.p-goods__side-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 35rem);
  gap: 3rem;
  align-items: start;
  margin-bottom: 3rem;
}
.p-goods__side-media .p-goods__list {
  margin: 0;
}
.p-goods__side-image {
  margin: 0;
}
.p-goods__side-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* 写真2枚を隙間なく突き合わせる（差し替えやすいよう1枚に合成せず並べる） */
.p-goods__side-image--pair {
  display: flex;
}
.p-goods__side-image--pair img {
  width: 50%;
}
@media (max-width: 768px) {
  .p-goods__block {
    grid-template-columns: 1fr;
    row-gap: 3rem;
    /* SPは box-shadow で帯が画面端まで伸びるので、内側の余白は本文の左右余白だけでよい。
       page.php 直下にブロックで置かれると外側に p-shop が無いので、ブロック自身が --side を持つ */
    padding-inline: var(--side);
    /* 既定の margin 6rem/9rem は固定値でSPでも縮まないため、セクション標準（--space-sec）に合わせる */
    margin-block: 4rem var(--space-sec);
    padding-block: 2.5rem;
  }
  /* p-shop の中にある場合は親が既に --side を持っているので二重にしない */
  .p-shop .p-goods__block {
    padding-inline: 0;
  }
  .p-goods__block > .c-heading,
  .p-goods__block > :not(.c-heading) {
    grid-column: 1;
    grid-row: auto;
  }
  /* 縦の間隔は row-gap が持つ。子側の margin と二重にしない */
  .p-goods__block > .p-goods__text {
    margin-bottom: 0;
  }
  .p-goods__block > .c-btn-wrap {
    margin-block: 0;
  }
  .p-goods__side-media {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .p-goods__figs--single {
    max-width: none;
  }
  /* SPは写真を2枚並び固定に（auto-fit だと1列になって縦に長くなる） */
  .p-goods__figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  /* 縦積み指定はSPでも1列のまま。チラシ類は2枚並びにすると文字が読めない */
  .p-goods__figs--stack {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .p-goods__top-text-line {
    display: block;
  }
}

/* =========================================================
   ピアノストアページ用ブロック
   ========================================================= */
.p-shop.p-piano {
        padding-top: 0;
        margin-bottom: 12rem;
      }
      .p-piano__workshop .message-01-list .message-01,
.p-piano__lesson .message-01-list .message-01 {
        border-bottom: 1px solid var(--color-line);
      }

      .p-piano__text {
        margin-bottom: 2rem;
        font-size: var(--fs-base);
        line-height: var(--lh-lead);
      }
      .p-piano__note {
        margin-bottom: 2rem;
        color: var(--color-muted);
        font-size: var(--fs-sm);
        line-height: var(--lh-base);
      }
      .p-piano__lead.lead-01 {
        --lead-01-primary: var(--color-primary);
        --lead-01-accent: var(--color-accent);
        --lead-01-text: var(--color-text);
        padding: 8rem 0 9rem;
        overflow-x: clip;
        color: var(--lead-01-text);
        font-family: var(--font-sans);
      }
      .p-piano__lead.lead-01 .career-intro__inner {
        display: flex;
        align-items: center;
        width: min(calc(100% - 4.8rem), 140rem);
        margin-inline: auto;
    align-self: center;
        gap: clamp(2rem, 5.5vw, 8rem);
      }
      .p-piano__lead.lead-01 .career-intro__body {
        flex: 1 1 auto;
        min-width: 0;
      }
      .p-piano__lead.lead-01 .career-intro__label {
        margin: 0 0 2.4rem;
        color: var(--lead-01-accent);
        font-size: 1.6rem;
        font-weight: 700;
      }
      .p-piano__lead.lead-01 .career-intro__title {
        margin: 0 0 2.6rem;
        color: var(--lead-01-primary);
        font-size: clamp(3.2rem, 4vw, 5rem);
        font-weight: 500;
        line-height: 1.35;
      }
      .p-piano__lead.lead-01 .career-intro__sub {
        margin: 0 0 2.2rem;
        color: var(--lead-01-primary);
        font-size: 2.4rem;
        line-height: 1.7;
      }
      .p-piano__lead.lead-01 .career-intro__text {
        margin: 0;
        font-size: 1.5rem;
        line-height: 2.1;
      }
      .p-piano__lead.lead-01 .career-intro__photo {
        flex: 0 0 50%;
        width: 50%;
        margin-right: calc(50% - 50vw);
        aspect-ratio: 16 / 11;
        overflow: hidden;
      }
      .p-piano__lead.lead-01 .career-intro__photo img {
        width: 100%;
              object-fit: cover;
      }

      .p-piano__top {
        padding: 0 0 0;
        overflow-x: clip;
      }
      .p-piano__top--has-page-hero {
        overflow-x: visible;
      }
      .p-piano__top--has-page-hero > .page-hero {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background: none;
      }
      .p-piano__top-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.6rem;
        margin-inline: auto;
    align-self: center;
      }
      .p-piano__top-copy {
      position: relative;
        z-index: 1;
        text-align: center;
      }
      .p-piano__top-title {
        margin: 0;
        color: var(--color-accent);
        font-size: clamp(2.6rem, 3vw, 3.8rem);
        font-weight: 500;
        line-height: 1.6;
        text-align: center;
      }
      .p-piano__top-text {
        max-width: 72rem;
        margin: 0 auto;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2;
        text-align: center;
      }
      .p-piano__top-text-line {
        white-space: nowrap;
      }
      @media (max-width: 767px) {
        .p-piano__top-text-line {
          display: block;
        }
      }
      .p-piano__top-image {
        width: 100%;
        margin: 0;
        overflow: hidden;
      }
      .p-piano__top-image img {
        display: block;
        width: 100%;
        height: auto;
      }
      /* ●ラベル＋説明の箇条書き（仕様書に7か所出てくる形） */
      .p-piano__list {
        margin: 0 0 3rem;
        padding: 0;
        list-style: none;
      }
      .p-piano__list > li {
      position: relative;
        padding: 1.6rem 0 1.6rem 2.4rem;
        border-bottom: 1px solid var(--color-line);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
      }
      .p-piano__list > li:first-child {
        border-top: 1px solid var(--color-line);
      }
      .p-piano__list > li::before {
        content: "";
        position: absolute;
        top: 2.4rem;
        left: 0;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: var(--color-accent);
      }
      .p-piano__list b {
        display: block;
        font-weight: 700;
      }
      /* 本文中の写真1〜3枚 */
      .p-piano__figs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
      }
      .p-piano__figs img {
        display: block;
        width: 100%;
        height: auto;
      }
      .p-piano__figs--single {
        max-width: calc((100% - 2rem) / 2);
      }
      .p-piano__lead-media {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 42rem);
        gap: clamp(3rem, 4vw, 5rem);
        align-items: start;
        margin-bottom: 4rem;
      }
      .p-piano__lead-media .c-heading-h3 {
        margin-top: 0;
        margin-bottom: 1.6rem;
      }
      .p-piano__lead-media .p-piano__text,
      .p-piano__lead-media .p-piano__figs {
        margin-bottom: 0;
      }
      .p-piano__support-figs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 3rem;
      }
      .p-piano__support-figs img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: initial;
      }
      .p-piano__usage-media {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 35rem);
        gap: 3rem;
        align-items: start;
        margin-bottom: 3rem;
      }
      .p-piano__usage-media .p-piano__list {
        margin: 0;
      }
      .p-piano__usage-image {
        margin: 0;
      }
      .p-piano__usage-image img {
        display: block;
        width: 100%;
        height: auto;
      }
      .p-piano__side-media {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 35rem);
        gap: 3rem;
        align-items: start;
      }
      .p-piano__side-media .p-piano__list {
        margin: 0;
      }
      .p-piano__side-image {
        margin: 0;
      }
      .p-piano__side-image img {
        display: block;
        width: 100%;
        height: auto;
      }
      /* 写真を縦に並べたときだけ間を空ける */
      .p-piano__side-image img + img {
        margin-top: 2rem;
      }
      .p-piano__access-section .p-shop__access-head > .c-heading-h4 {
        color: var(--color-accent);
      }
      .p-piano__access-lead {
        margin: 0 0 3rem;
        font-size: var(--fs-base);
        font-weight: 500;
        line-height: var(--lh-lead);
      }
      /* リード文の右・表の右上にSNSを置く。狭いときは折り返して右寄せのまま下に落とす */
      .p-piano__access-lead-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1.5rem 4rem;
        margin-bottom: 3rem;
      }
      .p-piano__access-lead-row .p-piano__access-lead {
        margin-bottom: 0;
      }
      .p-piano__access-sns {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 1.6rem;
      }
      .p-piano__access-title {
        margin-bottom: 1.5rem;
      }
      .p-piano__access-section .p-shop__map-embed iframe {
        height: 42rem;
      }
      .p-piano__access-gallery.p-shop__gallery-wrap {
        width: 100vw;
        margin: 4rem calc(50% - 50vw) 6rem;
        overflow: hidden;
      }
      .p-piano__access-gallery .p-shop__gallery {
        display: flex;
        width: max-content;
        gap: 2rem;
        margin: 0;
        padding: 0;
        list-style: none;
        animation: p-piano-access-slide 42s linear infinite;
      }
      .p-piano__access-gallery .p-shop__gallery-item {
        flex: 0 0 clamp(22rem, 22vw, 34rem);
      }
      .p-piano__access-gallery .p-piano__access-slide {
        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;
      }
      .p-piano__access-gallery .p-piano__access-slide img {
        display: block;
        width: 100%;
        height: 24rem;
        object-fit: cover;
      }
      @keyframes p-piano-access-slide {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(calc(-50% - 1rem));
        }
      }
      .p-piano__venue-gallery.p-shop__gallery-wrap {
        margin-top: 0;
      }
      .p-piano__venue-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem;
        margin: 3rem 0 0;
        padding: 0;
        list-style: none;
      }
      .p-piano__venue-grid figure {
        margin: 0;
      }
      .p-piano__venue-grid button {
        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;
      }
      .p-piano__venue-grid img {
        display: block;
        width: 100%;
        height: auto;
      }
      .p-piano__venue-grid figcaption {
        margin-top: 1rem;
        color: var(--color-text);
        font-size: 1.4rem;
        line-height: 1.55;
      }
      .p-piano__latest-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.4rem;
        margin: 3rem 0 0;
        padding: 0;
        list-style: none;
      }
      .p-piano__latest-link {
        display: block;
        color: inherit;
        text-decoration: none;
      }
      /* 比率の違う画像が混ざっても段の高さを揃える。バナーはロゴが端まであるので切らずに収める */
      .p-piano__latest-link img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: contain;
      }
      .p-piano__latest-caption {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 1.5rem;
        margin-top: 1rem;
        color: var(--color-text);
        font-size: 1.4rem;
        line-height: 1.55;
      }
      .p-piano__latest-name {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
      }
      .p-piano__latest-text {
        display: block;
        margin-top: 0.2rem;
      }
      .p-piano__latest-caption .c-circle-arrow {
        flex: 0 0 auto;
      }
      .p-piano__venue-name {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
      }
      .p-piano__venue-model {
        display: block;
        margin-top: 0.2rem;
      }
      .p-piano__initiative.initiative-01 {
        margin-bottom: var(--space-sec);
        color: var(--color-text);
        font-family: var(--font-sans);
      }
      .p-piano__initiative .home__initiative {
        display: flex;
        flex-direction: column;
        border-top: 0;
      }

      .p-piano__initiative .home__initiative__body ul {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.4rem;
        margin: 0;
        padding: 0;
        border-top: 0;
        border-left: 0;
        list-style: none;
      }
      .p-piano__initiative .home__initiative__body li {
        display: flex;
        border-right: 0;
        border-bottom: 0;
      }
      .p-piano__initiative .home_initiative_card {
      position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        border: 1px solid var(--color-line);
        color: inherit;
        text-decoration: none;
      }

      .p-piano__initiative .home_initiative_card .image {
        width: 100%;
        overflow: hidden;
      }
      .p-piano__initiative .home_initiative_card .image img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 297 / 210; /* A4横と同じ比率 */
        object-fit: cover;
        transition: transform 0.3s ease;
      }
      .p-piano__initiative .home_initiative_card .text {
        display: flex;
        /* 文言の行数が違ってもカードの高さがそろうよう、テキスト側で余りを吸収する */
        flex: 1;
        /* 番号を上、見出しと矢印を下の行に置くので下端で揃える */
        align-items: flex-end;
        justify-content: space-between;
        padding: 1.5rem;
      }
      .p-piano__initiative .home_initiative_card .text p {
        flex: 1;
        margin: 0;
        line-break: strict; /* 「!」だけが次行に落ちないように */
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.56;
        letter-spacing: 0.02em;
      }
      /* 番号は見出しと同じ行に置くと横幅を食って折り返すので、独立した行にする */
      .p-piano__initiative .home_initiative_card .text p::before {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--color-pale-accent);
        white-space: nowrap;
        font-size: clamp(1.8rem, 2.2vw, 2.6rem);
        font-weight: 700;
        line-height: 1;
      }
      .p-piano__initiative .home__initiative__body li:nth-child(1) .text p::before {
        content: "#01";
      }
      .p-piano__initiative .home__initiative__body li:nth-child(2) .text p::before {
        content: "#02";
      }
      .p-piano__initiative .home__initiative__body li:nth-child(3) .text p::before {
        content: "#03";
      }
      .p-piano__initiative .home__initiative__body li:nth-child(4) .text p::before {
        content: "#04";
      }
      .p-piano__initiative .home__initiative__body li:nth-child(5) .text p::before {
        content: "#05";
      }
      .p-piano__initiative .home__initiative__body li:nth-child(6) .text p::before {
        content: "#06";
      }
      .p-piano__initiative .home__initiative__body li:nth-child(7) .text p::before {
        content: "#07";
      }
      /* 先頭に#0カードが増えるパターンでは nth-child だと番号がずれるので、HTML側の data-num を優先する */
      /* attr() は疑似要素が付く要素の属性しか読めないため、番号は li ではなく p に持たせる */
      .p-piano__initiative .home__initiative__body li .text p[data-num]::before {
        content: attr(data-num);
      }
      .p-piano__initiative .home_initiative_card .c-circle-arrow {
        flex-shrink: 0;
      }
      .p-piano__initiative .home_initiative_card:hover .image img {
        transform: scale(1.06);
      }
      .p-piano__initiative .home_initiative_card:hover .c-circle-arrow {
        opacity: 0.8;
      }
      /* 縦書きの英語ラベルは文字数が多いと縦に伸びるので、小さめに組む */
      .p-piano__block .c-heading--vertical-stack .c-heading__en {
        font-size: clamp(2.4rem, 2.85vw, 3.3rem);
        letter-spacing: 0.08em;
      }
      /* 縦書きだと「!」が横倒しになるので正立させる */
      .p-piano__block .c-heading--vertical-stack .c-heading__ja {
        text-orientation: upright;
      }
      .p-piano__block {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: clamp(4rem, 7vw, 10rem);
        align-items: start;
        width: auto;
        max-width: none;
        margin: 6rem calc(-1 * var(--side)) 9rem;
        padding: 3rem;
        border-radius: 2rem;
        background: var(--color-pale-accent);
        box-shadow: 0 0 0 30px var(--color-pale-accent);
      }
      .p-piano__block > .c-heading {
        grid-column: 1;
        grid-row: 1 / span 99;
      position: relative;
        margin-bottom: 0;
        padding-top: 8rem;
      }
      .p-piano__block-heading-num {
        position: absolute;
        top: -0.8rem;
        left: 0;
        color: var(--color-pale-accent);
        font-size: clamp(5rem, 6vw, 6rem);
        mix-blend-mode: multiply;
        font-weight: 700;
        line-height: 1;
        writing-mode: horizontal-tb;
        pointer-events: none;
      }
      .p-piano__block > :not(.c-heading) {
        grid-column: 2;
      }
      .p-piano__block > .c-heading + .c-heading-h3 {
        margin-top: 0;
      }
      .p-piano__block .c-heading-h3 {
        /* margin-top: 4rem; */
        margin-bottom: 1.5rem;
        color: var(--color-accent);
      }
      .p-piano .c-arrow-link {
        margin-bottom: 3rem;
      }
      .p-piano__button-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1.6rem;
        align-items: center;
      }
      .p-piano__button-row .p-piano__tel-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        padding-inline: 3.5rem;
      }
      .p-piano__button-row .p-piano__tel-button .c-link-button__icon {
        position: static;
        right: auto;
        flex: 0 0 auto;
        font-size: 2rem;
        line-height: 1;
      }
      .p-piano__news.news-02 {
        background: var(--color-pale-accent);
      }
      @media screen and (min-width: 769px) {
        .p-piano__workshop .p-message__line {
          inset: 14rem auto auto 1rem;
        }
      }
      /* ピアノ工房・ピアノレッスン・管楽器の保証は背景装飾なし */
      .p-piano__workshop.purchase-01::before,
      .p-piano__lesson.purchase-01::before,
      .p-goods__warranty.purchase-01::before {
        content: none;
      }

      .p-piano__lesson .p-message {
        flex-direction: row-reverse;
      }
      .p-piano__lesson .p-message .summary {
        margin-right: 10rem;
        margin-left: 0;
      }
      .p-piano__lesson .p-message__image {
        justify-content: flex-start;
      }
      .p-piano__lesson .p-message__title {
        right: 0;
        left: auto;
        margin-right: -4rem;
        margin-left: 0;
      }
      /* SPは左右反転をやめて、他のメッセージ枠と同じ縦積みに戻す */
      @media screen and (max-width: 768px) {
        .p-piano__lesson .p-message {
          flex-direction: column;
        }
        .p-piano__lesson .p-message .summary {
          margin-right: 0;
        }
        .p-piano__lesson .p-message__image {
          justify-content: flex-end;
        }
        .p-piano__lesson .p-message__title {
          right: auto;
          left: -3rem;
          margin-right: 0;
        }
      }
      .p-piano__products .p-shop-news-banner__caption,
      .p-goods__products .p-shop-news-banner__caption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1rem;
      }
      .p-piano__products .p-shop-news-banner__caption .p-shop-news-banner__arrow,
      .p-goods__products .p-shop-news-banner__caption .p-shop-news-banner__arrow {
        position: static;
        flex: 0 0 auto;
        --tone: var(--color-accent);
      }
      .p-piano__owner-section {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 8rem max(var(--side), calc((100vw - var(--inner)) / 2 + var(--side)));
        background: var(--color-pale-accent);
        margin-bottom: 0;
      }
      .p-shop.p-piano__owner-article {
        margin-bottom: 0;
      }
      .p-shop.p-piano__owner-article .p-piano__owner-section {
        margin-bottom: 0;
      }
      .p-piano__access-article {
        margin-bottom: 0;
      }

      .p-piano__instagram-link {
        display: flex;
        align-items: center;
        width: fit-content;
        gap: 1.2rem;
        margin-bottom: 3rem;
        margin-left: auto;
        padding: 1.4rem 2rem;
        background: var(--color-accent);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.4;
        text-decoration: none;
      }
      .p-piano__instagram-link [class^="iconoir-"] {
        flex-shrink: 0;
        color: #fff;
        font-size: 3.4rem;
      }
@media (max-width: 768px) {
        .p-piano__instagram-link {
          width: 100%;
          justify-content: center;
          font-size: 1.5rem;
        }
        .p-piano__block {
          grid-template-columns: 1fr;
          row-gap: 3rem;
        }
        .p-piano__block > .c-heading,
        .p-piano__block > :not(.c-heading) {
          grid-column: 1;
          grid-row: auto;
        }
        .p-piano__lead-media,
        .p-piano__support-figs,
        .p-piano__venue-grid,
        .p-piano__usage-media,
        .p-piano__latest-grid,
        .p-piano__side-media {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .p-piano__figs--single {
          max-width: none;
        }
        .p-piano__access-section .p-shop__map-embed iframe {
          height: 28rem;
        }
      }
      @media (max-width: 900px) {
        .p-piano__initiative .home__initiative__body ul {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .p-piano__initiative .home_initiative_card {
          padding: 0;
        }

      }
      @media (max-width: 767px) {
        /* SPも2カラムのまま。画像はA4横の比率を保つ */
        .p-piano__initiative .home__initiative__body ul {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 1.5rem;
        }
        /* カードが細いので、番号を上に逃がして文言の折り返しを減らす */
        .p-piano__initiative .home_initiative_card .text {
          padding: 1rem;
        }
        .p-piano__initiative .home_initiative_card .text p {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.2rem;
          font-size: 1.3rem;
          line-height: 1.5;
        }
        .p-piano__initiative .home_initiative_card .text p::before {
          font-size: 1.8rem;
        }
      }
      @media (max-width: 767px) {
        .p-piano__top {
          padding: 5rem 0 0;
        }
      }







/* =========================================================
   グランドピアノ商品一覧ページ
   ========================================================= */
.p-grand-piano {
  max-width: var(--inner);
  margin-inline: auto;
  /* --space-sec は bottom 用。ヒーロー直下の上余白は他ページ（/goods/ 等）と同じ半分にする */
  padding: var(--space-sec-half) var(--side) 0;
}
.p-grand-piano__section > .c-heading {
  margin-bottom: 2.4rem;
  text-align: center;
}
.p-grand-piano__intro-section {
  padding-bottom: 7rem;
}
.p-grand-piano__intro-lead {
  max-width: 78rem;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.p-grand-piano__guide-section {
  max-width: var(--inner);
  margin: 0 auto 7rem;
  padding-inline: var(--side);
}
.p-grand-piano__maintenance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
}
/* カード1枚のときは左半分に寄るので、カード幅は2カラム時と同じまま中央に置く */
.p-grand-piano__maintenance-list--single {
  grid-template-columns: minmax(0, calc(50% - 1.2rem));
  justify-content: center;
}
.p-grand-piano__guide-section .p-grand-piano__maintenance-title {
  margin: 0 0 2rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.4rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.35;
}
.p-grand-piano__maintenance-body {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
/* 画像なしだと本文が画像用の14rem列に入って細く折り返すので、1カラムにして全幅を渡す */
.p-grand-piano__maintenance-body--no-image {
  grid-template-columns: minmax(0, 1fr);
}
.p-grand-piano__maintenance-seal {
  margin: 0;
}
.p-grand-piano__maintenance-seal img {
  display: block;
  width: 100%;
  height: auto;
}
.p-grand-piano__maintenance-text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.p-grand-piano__maintenance-text p {
  margin: 0;
}
.p-grand-piano__maintenance-button {
  margin-top: 1.2rem;
}
.p-grand-piano__archive {
  display: grid;
  gap: 3rem;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 8rem;
  padding: 8rem var(--side);
  background: var(--color-pale-accent);
}
.p-grand-piano__archive > * {
  width: min(100%, var(--inner));
  margin-inline: auto;
  /* グリッド項目の既定 min-width:auto だと、中のデータ表の最小幅(72rem)が
     そのまま項目幅になって狭い画面ではみ出すため 0 に落とす（表は中で横スクロール） */
  min-width: 0;
}
.p-grand-piano__archive > .c-heading {
  margin-bottom: 2rem;
  text-align: center;
}
/* 中身は複数行の注記なので、行長だけ絞って中央に置き、本文は左寄せ */
.p-grand-piano__archive-lead {
  width: min(100%, 78rem);
  margin: -0.6rem auto 2rem;
  text-align: left;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* 3カラム版：小見出し＋カード群を1グループとして繰り返す */
.p-grand-piano__group + .p-grand-piano__group {
  margin-top: 6rem;
}
/* グループの小見出し／データ表の小見出しに共通で使う。色はページのアクセントに追従 */
.p-grand-piano__table-title {
  margin-top: 4rem;
  margin-bottom: 1.6rem;
  color: var(--color-accent);
}
/* 3カラム版は帯の中でグループの区切り（6rem）が効くので上余白は控えめに */
.p-grand-piano__archive--3col .p-grand-piano__table-title {
  margin-top: 2rem;
}
/* リードの下は grid の gap だけで足りるので余白を持たせない */
.p-grand-piano__archive--3col .p-grand-piano__archive-lead {
  margin-bottom: 0;
}
/* カード群をまとめて3列に並べ、カードの中は写真が上・テキストが下の縦積みにする */
.p-grand-piano__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  /* stretch で行内のカードを同じ高さにして下端をそろえる */
  align-items: stretch;
}
.p-grand-piano__cards .p-grand-piano__card {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 2.5rem;
}
/* 3カラムでは figure を body 内（商品名の直後）に置くので、order での並べ替えは不要。左寄せにする */
.p-grand-piano__cards .p-grand-piano__photo {
  align-items: flex-start;
  margin-bottom: 1.6rem;
}
.p-grand-piano__cards .p-grand-piano__stores {
  justify-content: flex-start;
}
.p-grand-piano__cards .p-grand-piano__head {
  flex-direction: column;
  gap: 1.2rem;
}
@media (max-width: 1024px) {
  .p-grand-piano__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .p-grand-piano__cards {
    grid-template-columns: 1fr;
  }
}

.p-grand-piano__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(28rem, 38rem);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: start;
  padding: clamp(2.4rem, 4vw, 4rem);
  border: 1px solid var(--color-accent);
  border-radius: 3rem;
  background: #fff;
}
/* カード最上部の見出し。SPは写真を order:-1 で上へ送るので、それより前に置く。
   カードの gap は列用に3〜6rem取ってあるため、負のマージンで見出しだけ本文に寄せる */
.p-grand-piano__card-heading {
  grid-column: 1 / -1;
  order: -2;
  margin: 0 0 calc(1.6rem - clamp(3rem, 5vw, 6rem));
  color: var(--color-accent);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.p-grand-piano__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.6rem;
}
.p-grand-piano__title-block {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.p-grand-piano__seals {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.6rem;
}
.p-grand-piano__seals:empty {
  display: none;
}
.p-grand-piano__seals img {
  display: block;
  width: auto;
  max-width: 9rem;
  height: 5.6rem;
  object-fit: contain;
}
.p-grand-piano__name {
  margin: 0 0 0.6rem;
  color: var(--color-text);
  font-size: clamp(2.6rem, 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
}
.p-grand-piano__maker {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}
.p-grand-piano__stores {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-grand-piano__store-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem 0.4rem 0.8rem;
  border-radius: 0.4rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.p-grand-piano__store-link .c-circle-arrow {
  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  border-color: #fff;
  color: var(--color-accent);
  background: #fff;
}
.p-grand-piano__store-link .c-circle-arrow span {
  font-size: 1.2rem;
}
.p-grand-piano__lead {
  margin: 0 0 1.8rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.p-grand-piano__spec {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 1rem;
  font-size: var(--fs-base);
  line-height: 1.65;
}
.p-grand-piano__spec div {
  display: flex;
  gap: 1rem;
}
.p-grand-piano__spec dt {
  min-width: 4.5rem;
  font-weight: 700;
}
.p-grand-piano__spec dd {
  margin: 0;
}
.p-grand-piano__price-area {
  margin: 1.6rem 0 1rem;
}
.p-grand-piano__price-note {
  margin: 0 0 0.8rem;
  font-size: var(--fs-base);
  line-height: 1.6;
}
.p-grand-piano__variant-name {
  margin: 0 0 0.4rem;
  color: var(--color-text);
  /* すぐ上の価格注記と同じ大きさ・太さに揃える */
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
}
.p-grand-piano__price {
  margin: 0 0 1rem;
  color: var(--color-text);
  font-size: clamp(2.2rem, 2.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
}
.p-grand-piano__price span {
  margin-left: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0;
}
.p-grand-piano__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.p-grand-piano__external-icon {
  color: var(--color-accent);
  font-size: 1.6rem;
}
.p-grand-piano__lineup {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}
.p-grand-piano__lineup-title {
  margin: 0 0 2rem;
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
}
.p-grand-piano__lineup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin: 0 0 0.5rem;
}
.p-grand-piano__lineup-name {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-grand-piano__lineup-head .p-grand-piano__lineup-name {
  margin: 0;
}
/* 2件目以降だけ空ける（1件目は見出しの margin で足りている） */
.p-grand-piano__lineup-item + .p-grand-piano__lineup-item .p-grand-piano__lineup-head {
  margin-top: 2rem;
}
.p-grand-piano__lineup-price {
  margin: 0 0 0.4rem;
  font-size: var(--fs-base);
  line-height: 1.6;
}
.p-grand-piano__lineup-note {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  line-height: 1.6;
}
/* カード上部の展示店舗は右寄せなので、商品名の右に並べるここでは左寄せに戻す */
.p-grand-piano__stores--lineup {
  justify-content: flex-start;
}
.p-grand-piano__contact {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding: 2.4rem var(--side);
  background: var(--color-pale-accent);
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.7;
}
.p-grand-piano__contact-inner {
  width: min(100%, 72rem);
  margin-inline: auto;
}
.p-grand-piano__contact-title {
  margin: 0 0 1.2rem;
  color: var(--color-text);
  font-weight: 700;
}
.p-grand-piano__contact-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 1rem 3rem;
}
.p-grand-piano__contact-text {
  margin: 0;
}
.p-grand-piano__contact a {
  color: var(--color-accent);
  text-decoration: none;
}
.p-grand-piano__photo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  align-self: start;
}
.p-grand-piano__photo .p-grand-piano__stores {
  width: 100%;
}
.p-grand-piano__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.p-grand-piano__photo-slider {
  width: 100%;
}
.p-grand-piano__photo-slider .splide__track {
  width: 100%;
}
.p-grand-piano__photo-slider .splide__slide {
  display: grid;
  place-items: center;
}
.p-grand-piano__photo-slider .splide__pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  padding: 0;
}
.p-grand-piano__photo-slider .splide__pagination li {
  display: flex;
}
/* button は padding 由来の最小幅で楕円になるので、padding と min-width を潰して正円にする */
.p-grand-piano__photo-slider .splide__pagination__page {
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: #fff;
  opacity: 1;
  aspect-ratio: 1 / 1;
}
.p-grand-piano__photo-slider .splide__pagination__page.is-active {
  transform: none;
  background: var(--color-accent);
}
.p-grand-piano__products {
  width: min(100%, var(--inner));
  margin: var(--space-sec) auto;
  padding-inline: var(--side);
}
@media (max-width: 768px) {
  .p-grand-piano__maintenance-list {
    grid-template-columns: 1fr;
  }
  /* SPで横並びのままだと本文の列が219pxしかなく、ボタンの文言が2行に割れる。
     縦積みにして本文とボタンに全幅を渡す（シールは元の大きさのまま） */
  .p-grand-piano__maintenance-body {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .p-grand-piano__maintenance-seal {
    width: 11rem;
    margin-inline: auto;
  }
  .p-grand-piano__card {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  /* SPは gap が 2.4rem に変わるので打ち消す量も合わせる */
  .p-grand-piano__card-heading {
    margin-bottom: -0.8rem;
  }
  .p-grand-piano__photo {
    order: -1;
    max-width: 34rem;
    margin-inline: auto;
    align-self: center;
  }
  .p-grand-piano__head {
    flex-direction: column;
    gap: 1.2rem;
  }
  .p-grand-piano__contact-list {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .p-grand-piano__stores {
    justify-content: flex-start;
  }
  .p-grand-piano__price {
    font-size: 2.2rem;
  }
  .p-grand-piano__price span {
    font-size: 1.2rem;
  }
}










/* 店舗詳細：開講レッスン（画像なしテキストリンク） */
.p-shop__lesson-link-groups {
  display: grid;
  gap: 4rem;
}
.p-shop__lesson-link-title {
  margin-bottom: 2rem;
}
.p-shop__lesson-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-shop__lesson-link {
  width: 100%;
  min-height: 5.6rem;
}

@media (max-width: 600px) {
  .p-shop__lesson-link-list {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   c-spec-card：写真＋名前＋スペック行のカード
   中古在庫・製品タイプ・展示店舗など「写真＋項目値」を並べる場面で共通利用
   ========================================================= */
.c-spec-card-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.2rem 2.4rem;
  margin: 0 0 4rem;
  padding: 0;
  list-style: none;
}
.c-spec-card-list--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c-spec-card-list--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 元画像が横長（3:1）のバナー的な写真を、切らずにその比率のまま見せる */
.c-spec-card-list--wide-media .c-spec-card__media img {
  aspect-ratio: 3 / 1;
}
.c-spec-card-list--square-media .c-spec-card__media img {
  aspect-ratio: 1 / 1;
}
.c-spec-card-list--square-media .c-spec-card__link {
  gap: 0.5rem;
}
.c-spec-card {
  display: flex;
  flex-direction: column;
}
.c-spec-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.6rem;
  color: inherit;
  text-decoration: none;
}
.c-spec-card__media {
  display: block;
  overflow: hidden;
  background: var(--gray);
}
.c-spec-card__media > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}
a.c-spec-card__link:hover .c-spec-card__media > img {
  transform: scale(1.04);
}
/* 写真が複数あるとき、主写真の下に残りを小さく全部並べる */
.c-spec-card__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* 枚数が変わっても等幅で埋まる */
  gap: 0.4rem;
  margin-top: 0.4rem;
}
/* 枚数が違ってもカードの高さがそろうよう、サムネは固定高さにする */
.c-spec-card__thumbs img {
  display: block;
  width: 100%;
  height: 6rem;
  object-fit: cover;
}
/* 本文が伸びてもボタンの位置がそろうように */
.c-spec-card__body {
  flex: 1;
}
.c-spec-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.c-spec-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0; /* h4 で使うとブラウザ既定の上下余白が付くので消す（間隔は __link の gap で持つ） */
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.6;
}
/* 矢印は名前の右横。最下部に落とす既定指定を打ち消す */
.c-spec-card__name .c-spec-card__arrow {
  flex-shrink: 0;
  align-self: center;
  margin-top: 0;
}
.c-spec-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
/* 項目：値の定義リスト（dt＝項目／dd＝値）。薄アクセント地の帯にする */
.c-spec-card__specs {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 1.4rem 1.6rem;
  background: var(--color-pale-accent);
  font-size: var(--fs-sm);
}
/* 展示商品が複数あるときは dl を分けて置く。その間隔 */
.c-spec-card__specs + .c-spec-card__specs {
  margin-top: 1.2rem;
}
.c-spec-card__specs dt {
  color: var(--color-muted);
}
.c-spec-card__specs dd {
  margin: 0;
  font-weight: 700;
}
/* 矢印はリンクの最下部へ落とす（本文量が違ってもそろう） */
.c-spec-card__arrow {
  align-self: flex-end;
  margin-top: auto;
}
.c-spec-card__button {
  width: 90%;
  margin: 1.6rem auto 0;
}

@media screen and (max-width: 1024px) {
  .c-spec-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 600px) {
  .c-spec-card-list,
  .c-spec-card-list--3col {
    grid-template-columns: 1fr;
  }
}
/* 正方形カード（貸出機材の「その他」）はSPでも2列を保つ */
@media screen and (max-width: 600px) {
  .c-spec-card-list--square-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   c-frame-box：罫線だけの額縁ボックス（英語ラベル＋大見出し＋本文）
   ========================================================= */
.p-goods__top .c-frame-box {
  margin-top: var(--space-sec-half);
}
.c-frame-box {
  max-width: 88rem;
  margin: 0 auto 4rem;
  padding: 5rem 4rem;
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
  text-align: center;
}
/* 額縁ボックスを横に3つ並べる。薄アクセント地の帯に --plain と組み合わせて置く想定 */
.c-frame-box-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
/* 地色の上に白い箱として置くので、枠線と外側の余白を落とす。
   本文量が揃わないので、ボタンだけ下端に落として横並びの足並みを揃える */
.c-frame-box--plain {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 3rem;
  border: 0;
}
/* 横3列だと1列の幅が狭いので、見出しは単独の箱より一段小さく */
.c-frame-box--plain .c-frame-box__title {
  font-size: var(--fs-h4);
}
/* 横並びだと1行が短く、中央寄せでは行頭が揃わず読みにくいので本文だけ左寄せ。
   下余白はボタンとの最低間隔（ボタン側に付けるとリンクの当たり判定が広がる） */
.c-frame-box--plain .c-frame-box__text {
  margin-bottom: 2.4rem;
  text-align: left;
}
/* 本文の量がカードごとに違うので、ボタンだけ下端に落として足並みを揃える */
.c-frame-box--plain .c-text-button {
  margin-top: auto;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .c-frame-box-list {
    grid-template-columns: 1fr;
  }
}
/* 箱の上半分だけ地色を敷く。箱の padding を打ち消して端まで伸ばす */
.c-frame-box__head {
  margin: -5rem -4rem 4rem;
  padding: 5rem 4rem;
  background: var(--color-pale-accent);
}
.c-frame-box__en {
  display: block;
  margin-bottom: 1.6rem;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.c-frame-box__title {
  margin: 0 0 2rem;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
}
.c-frame-box__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* 強調したい本文（キャンペーン条件など） */
.c-frame-box__text--strong {
  font-weight: 700;
}
/* 箱の中の注釈は行頭を揃えたいので左寄せ。本文より一段小さく */
.c-frame-box .c-note {
  margin-top: 2.4rem;
  font-size: var(--fs-xs);
  text-align: left;
}
/* 本文を2つ並べたときの間隔と、箱の中に置くボタンの下余白 */
.c-frame-box__text + .c-frame-box__text {
  margin-top: 2.4rem;
}
.c-frame-box .c-btn-wrap {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .c-frame-box {
    padding: 3rem 2rem;
  }
  .c-frame-box__head {
    margin: -3rem -2rem 3rem;
    padding: 3rem 2rem;
  }
}

/* =========================================================
   LPのFV c-lp-hero（防音室・ピアノストアなど色踏襲LPで共用）
   色はすべて --color-accent 参照なので .is-purple / .is-orange で切替わる
   ========================================================= */
.c-lp-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-bottom: var(--space-sec-half);
}
.c-lp-hero__band {
  grid-row: 1;
  grid-column: 1 / 6;
  min-height: 46rem;
  background: var(--color-accent);
}
/* 上下に 4rem ずつ内側へ寄せて、背面の紫ベタを上下にはみ出させる */
.c-lp-hero__photo {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 4 / -1;
  margin: 4rem 0;
}
/* 明るい写真でも白文字が読めるよう、コピー側（左）だけ暗幕をかける */
.c-lp-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 62%);
}
.c-lp-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* コピーは左揃えで、背面の紫ベタから写真へまたがせる */
.c-lp-hero__copy {
  z-index: 2;
  grid-row: 1;
  grid-column: 1 / 9;
  align-self: center;
  padding-left: var(--side);
  color: #fff;
  text-shadow: 0 0 2rem rgba(0, 0, 0, 0.35);
}
.c-lp-hero__title {
  margin: 0;
  font-size: clamp(2.2rem, 3.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
}
/* 横線＋英語タグライン（文字が左、線が右。row-reverse で DOM 順を保ったまま入れ替え） */
.c-lp-hero__tagline {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  margin: 1.2rem 0 0;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.3em;
}
.c-lp-hero__rule {
  flex: 0 0 auto;
  width: clamp(6rem, 14vw, 22rem);
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}
.c-lp-hero__en {
  margin: 3.2rem 0 0;
  font-family: var(--font-en);
  font-size: clamp(4rem, 8vw, 10rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
/* ピアノストアだけ、英語ラベルの位置に和文の店名が入るので全体を一段小さくする */
.c-lp-hero--store .c-lp-hero__title {
  font-size: clamp(2rem, 2.8vw, 3.6rem);
}
.c-lp-hero--store .c-lp-hero__en {
  font-size: clamp(2.4rem, 4.4vw, 5.6rem);
}
.c-lp-hero__sub {
  margin: 0.6rem 0 0;
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 2.6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
}
.c-lp-hero__lead {
  max-width: 52rem;
  margin: 2.4rem 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* 既定の52remだと折り返す長さの文を、<br>で切った行のまま収めたいとき */
.c-lp-hero__lead--wide {
  max-width: 60rem;
}
/* 写真を複数枚のスライドにする場合（1枚のときは <img> を直接置く）。
   フェードは非表示スライドが絶対配置になり高さを失うので、トラック側にも比率を持たせる */
.c-lp-hero__slider .splide__track,
.c-lp-hero__slider .splide__list,
.c-lp-hero__slider .splide__slide {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.c-lp-hero__slider .splide__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   防音室ページ p-avitecs（page-avitecs.php）
   ========================================================= */
/* 上下余白は全セクション共通（背景ありの帯に合わせる） */
.p-avitecs__section {
  padding-block: var(--space-sec-half);
}
/* 薄アクセント地の帯。中のスペック表は下地と同色になるので白に返す */
.p-avitecs__section--bg {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--color-pale-accent);
}
.p-avitecs__section--bg .c-spec-card__specs {
  background: var(--color-bg);
}
/* ---- 防音室 お問い合わせCTA: p-avitecs__contact（ページ末尾のアクセント地の帯） ----
   レンタルの #toiawase と同じ趣旨だが、あちらは .is-rental 限定なのでここで別に持つ */
.p-avitecs__contact {
  padding-block: var(--space-sec-half);
  background: var(--color-accent);
  color: #fff;
}
.p-avitecs__contact-lead {
  margin: 0 0 1.6rem;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.7;
  font-weight: 700;
}
.p-avitecs__contact-text {
  max-width: 88rem;
  margin: 0 auto 4rem;
  line-height: 1.9;
  text-align: center;
}
.p-avitecs__contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-avitecs__contact-item {
  display: flex;
}
.p-avitecs__contact-caution {
  margin: 4rem 0 0;
  font-size: 1.3rem;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 768px) {
  /* SPは折り返しが増えて中央揃えだと行頭がガタつくので左寄せに戻す */
  .p-avitecs__contact-text,
  .p-avitecs__contact-caution {
    text-align: left;
  }
  .p-avitecs__contact-list {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }
}

/* 上から200pxが白、そこから下は薄アクセント地（ハードストップの2色） */
.p-avitecs__section--grad {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: linear-gradient(to bottom, var(--color-bg) 200px, var(--color-pale-accent) 200px);
}
.p-avitecs__section > .l-inner > .c-heading {
  margin-bottom: 4rem;
}
.p-avitecs__text {
  margin: 0 0 2.4rem;
  font-size: var(--fs-base);
  line-height: var(--lh-lead);
}
.p-avitecs__text--center {
  margin-bottom: 4rem;
  text-align: center;
}
/* SPは折り返しが増えて中央揃えだと行頭がガタつくので左寄せに戻す。
   このクラスはレンタル系とも共用なので、防音室の体験セクション(--grad)だけに限定する */
@media (max-width: 768px) {
  .p-avitecs__section--grad .p-avitecs__text--center {
    text-align: left;
  }
}
.p-avitecs__text--right {
  text-align: right;
}
.p-avitecs__intro {
  margin-bottom: 5rem;
}
.p-avitecs__intro-catch {
  margin: 2rem 0 1.2rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-accent);
}
/* 防音室ページだけバナーの下余白を半分に（下に X 導線が続くため） */
.p-avitecs .banner-02 {
  padding-bottom: var(--space-sec-half);
}


/* ページ内メニュー。スクロールしたらヘッダー(.header-05 は z-index:50)の前面に固定する。
   高さをスクロール後のヘッダー帯(7rem)に合わせ、帯ごと覆い隠す */
.p-avitecs__nav {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 1px;
  background: var(--color-accent);
}
.p-avitecs__nav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 7rem;
  max-width: var(--inner);
  margin-inline: auto;
}
.p-avitecs__nav-item {
  display: flex;
  align-items: center;
  padding: 1.6rem 2.8rem;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease;
}
.p-avitecs__nav-item:hover,
.p-avitecs__nav-item.is-current {
  background: rgba(255, 255, 255, 0.18);
}
/* ドロワーやメガメニューを開いている間だけヘッダーを前面へ（サブナビの下に潜らせない） */
.header-05:has(.header.on),
.header-05:has(.has-mega:hover),
.header-05:has(.has-mega:focus-within),
.header-05:has(.has-mega.is-open) {
  z-index: 70;
}
/* サブナビの下にアンカー先が潜らないように（防音室・ピアノストア共通） */
main:has(.p-avitecs__nav) [id] {
  scroll-margin-top: 9rem;
}

@media screen and (max-width: 1200px) {
  /* サブナビは画面右上の固定ハンバーガーより前面（帯が覆い隠す） */
  main:has(.p-avitecs__nav) [id] {
    scroll-margin-top: 12rem;
  }
}

@media screen and (max-width: 768px) {
  /* 6項目を横3×縦2で収める */
  .p-avitecs__nav-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .p-avitecs__nav-item {
    justify-content: center;
    /* 3列×2段でSPの画面をかなり占めるので、行の高さを詰める */
    padding: 0.8rem 0.4rem;
    font-size: var(--fs-xs);
    line-height: 1.2;
    text-align: center;
  }
}

/* 防音室の下層ページ用ヒーロー。page-hero の装飾（::before/::after）は使わず、
   薄アクセント地に大きな英字＋日本語を左寄せで置く */
.p-avitecs__page-hero {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: var(--space-sec-half);
  padding: 6rem 0;
  background: var(--color-pale-accent);
  text-align: center;
}
.p-avitecs__page-hero-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(4rem, 6vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}
.p-avitecs__page-hero-ja {
  margin: 1.6rem 0 0;
  color: var(--color-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 中古一覧は上に詰め、下は半分の余白にする */
.p-used-page .p-avitecs__section {
  padding-top: 0;
  padding-bottom: calc(var(--space-sec-half) / 2);
}
/* 色地の帯は中身が縁につくので上余白を戻す */
.p-used-page .p-avitecs__section--bg,
.p-used-page .p-avitecs__section--grad {
  padding-top: var(--space-sec-half);
}
.p-used-page #stock {
  margin-bottom: var(--space-sec-half);
}

@media screen and (max-width: 768px) {
  .p-avitecs__page-hero {
    padding: 4rem 0;
  }
}

/* 中古一覧・施工事例の2ボタンを横並びに */
.p-avitecs__used-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  justify-content: center;
}

/* ピックアップバナー直下の X 導線 */
.p-avitecs__x {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  margin-top: 2.4rem;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.p-avitecs__x:hover {
  opacity: 0.7;
}

.p-avitecs__license {
  margin: var(--space-sec-half) 0;
  font-size: 13px;
  text-align: center;
  color: var(--color-text);
}

/* 専用金利・レンタル：アクセント色のベタ帯 */
.p-avitecs__offer {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-sec-half);
  background: var(--color-accent);
  color: #fff;
}
.p-avitecs__offer-grid {
  display: grid;
  grid-template-columns: 1fr;
}
/* 2つの間に仕切りの縦線 */
.p-avitecs__offer-item {
  padding-inline: 5rem;
}
.p-avitecs__offer-item:first-child {
  padding-left: 0;
}
.p-avitecs__offer-item:last-child {
  padding-right: 0;
}
.p-avitecs__offer-item + .p-avitecs__offer-item {
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.p-avitecs__offer-title {
  margin: 0 0 2rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
}
.p-avitecs__offer-catch {
  margin: 0 0 1.2rem;
  font-size: var(--fs-lg);
  font-weight: 700;
}
.p-avitecs__offer-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.8;
}
/* PCは中央寄せ（SPは行が詰まって読みにくいので左寄せのまま） */
@media screen and (min-width: 769px) {
  .p-avitecs__offer {
    text-align: center;
  }
}

.p-avitecs__section .c-heading-h4 {
  margin-bottom: 2.4rem;
}
/* 製品情報と関連製品・オプションの区切り */
#option.p-avitecs__section {
  border-top: 1px solid var(--color-line);
}

/* 展示店舗：1展示商品＝横1行（画像／店名＋ボタン／スペック）。展示商品が2つある店舗は2行になる */
.p-avitecs__shops {
  display: grid;
  gap: 5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-avitecs__shop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
}
/* スペック表は4分割のうち3-4列目。複数あるときはこの中で詰めて縦に積む */
.p-avitecs__shop-specs {
  display: grid;
  gap: 1.6rem;
  grid-column: 3 / -1;
}
/* 帯の下地が薄アクセントなので白に返す */
.p-avitecs__shop .c-spec-card__specs {
  background: var(--color-bg);
}
.p-avitecs__shop-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.p-avitecs__shop-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
/* クリックで上の大きい枠に表示する（選択中は枠線） */
.p-avitecs__shop-thumb {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.p-avitecs__shop-thumb.is-active {
  border-color: var(--color-accent);
}
.p-avitecs__shop-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.p-avitecs__shop-name {
  margin: 0 0 1.6rem;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
}
/* c-text-button の min-width 280px が列からはみ出すので解除する */
.p-avitecs__shop-button {
  width: 100%;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  .p-avitecs__shop {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* 1カラムでは列指定を解除する（3列目が無いので暗黙の列ができてしまう） */
  .p-avitecs__shop-specs {
    grid-column: auto;
  }
}

/* 売却までの流れ（HTML+CSSの図。分岐はスマホ幅でも横並びのまま折り返す） */
/* 売却までの流れの図（avitecs_purchase_flow.svg）。中の文字は折り返せないので、狭い画面は横スクロールで見せる */
.p-avitecs__flow-svg {
  margin: 0 0 4rem;
  overflow-x: auto;
}
.p-avitecs__flow-svg img {
  display: block;
  width: 100%;
  min-width: 70rem;
  height: auto;
}
/* SPは縦組みの専用SVGに切り替わるので、横スクロールは不要 */
@media screen and (max-width: 768px) {
  .p-avitecs__flow-svg img {
    min-width: 0;
  }
}

.p-avitecs__flow {
  margin: 0 0 4rem;
}
.p-avitecs__flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  padding: 1.6rem 2rem;
  border-radius: 0.8rem;
  background: var(--color-pale-accent);
}
.p-avitecs__flow-num {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
}
.p-avitecs__flow-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
/* 矢印はSVG。縦線だけを伸縮させ、矢じりは固定サイズなので長さが変わっても形が崩れない */
.p-avitecs__flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 4.8rem;
  padding-top: 0.8rem;
  color: var(--color-accent);
}
/* 丸い端（stroke-linecap）が切れないよう overflow を許可する */
.p-avitecs__flow-arrow-line {
  display: block;
  flex: 1;
  width: 4px;
  min-height: 0.8rem;
  overflow: visible;
}
.p-avitecs__flow-arrow-head {
  display: block;
  width: 20px;
  height: 14px;
}
/* 分岐の縦線を、合流先まで伸ばす */
.p-avitecs__flow-arrow--grow {
  flex: 1;
  width: 100%;
}
/* 分岐は2カラム。狭い画面でも横並びのまま文字だけ折り返す */
.p-avitecs__flow-branch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}
.p-avitecs__flow-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 「2」の箱から分岐ラベルまでを線でつなぐ */
.p-avitecs__flow-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 2.4rem;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--color-accent);
}
.p-avitecs__flow-pill {
  margin-top: 2.4rem;
  padding: 0.5rem 1.6rem;
  border-radius: 50px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.p-avitecs__flow-box {
  width: 100%;
  margin: 0;
  padding: 1.6rem;
  border: 1px solid var(--color-accent);
  border-radius: 0.8rem;
  background: var(--color-bg);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: center;
}

.p-avitecs__cta {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  margin-top: 6rem;
  padding: 5rem 4rem;
  background: var(--color-pale-accent);
}
/* 他ページから #access で飛んでくるので、固定ヘッダーの下に潜らせない */
.p-piano__access-section {
  scroll-margin-top: 10rem;
}
/* ページ内リンクで飛んだとき、固定ヘッダーの下に潜らせない */
.p-shop__section[id] {
  scroll-margin-top: 10rem;
}
/* 大セクション内でアイコン見出し・小見出しを使うときの下余白 */
.p-shop__section > .l-inner > .c-icon-heading {
  margin-bottom: 2.4rem;
}
.p-shop__section > .l-inner > .c-heading-h3 {
  margin-bottom: 2rem;
}
/* 写真なしのお知らせ用。1カラムにして上余白も詰める */
.p-avitecs__cta--text {
  grid-template-columns: 1fr;
  margin-top: 0;
  margin-bottom: 3rem;
  padding: 3rem 4rem;
}
/* 白地＋アクセント色の細枠。中身は中央寄せ（臨時休業など短いお知らせ用） */
.p-avitecs__cta--outline {
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
  text-align: center;
}
.p-avitecs__cta--text .c-heading-h3 {
  margin-bottom: 1.6rem;
}
/* 本文はエディタ入力なので、中の p の余白をここで持つ */
.p-avitecs__cta-body .p-goods__text > p {
  margin: 0;
}
.p-avitecs__cta-body .p-goods__text > p + p {
  margin-top: 2rem;
}
.p-avitecs__cta-body .p-goods__text ul,
.p-avitecs__cta-body .p-goods__text ol {
  margin: 1.6rem 0 0;
  padding-left: 2rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .p-avitecs__cta--text {
    padding: 2.4rem 2rem;
  }
  .p-avitecs__cta--text .c-heading-h3 {
    font-size: 1.6rem;
    line-height: 1.6;
  }
}
/* 日程などの短い行が続くので行間は詰める */
.p-avitecs__cta--text .p-goods__text {
  line-height: var(--lh-base);
}
.p-avitecs__cta-image {
  margin: 0;
}
.p-avitecs__cta-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 15px solid var(--color-bg);
}
.p-avitecs__cta-body .p-avitecs__text {
  margin-top: 1.6rem;
}

/* レンタルのロゴ（外部サイトへのリンク） */
.p-avitecs__offer-logo {
  display: inline-block;
  margin-top: 2.4rem;
  max-width: 26rem;
  transition: opacity 0.3s ease;
}
.p-avitecs__offer-logo:hover {
  opacity: 0.75;
}
.p-avitecs__offer-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.p-avitecs__cta .p-avitecs__text {
  margin-bottom: 3rem;
}

@media screen and (max-width: 768px) {
  .c-lp-hero {
    grid-template-columns: 1fr;
  }
  .c-lp-hero__band {
    display: none;
  }
  .c-lp-hero__photo {
    grid-column: 1;
    margin: 0;
  }
  .c-lp-hero__copy {
    grid-row: 2;
    grid-column: 1;
    padding: 2.4rem 1.5rem 3rem;
    background: var(--color-accent);
    text-shadow: none;
  }
  /* 狭い画面では字間を詰めて、キャッチとタグラインの折返しを防ぐ */
  .c-lp-hero__title {
    font-size: 2rem;
    letter-spacing: 0.06em;
  }
  .c-lp-hero__tagline {
    gap: 1rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
  }
  .c-lp-hero__en {
    margin-top: 2rem;
  }
  .c-lp-hero__lead {
    max-width: none;
    font-size: var(--fs-sm);
  }
  .p-avitecs__offer-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .p-avitecs__offer-item,
  .p-avitecs__offer-item:first-child,
  .p-avitecs__offer-item:last-child {
    padding-inline: 0;
  }
  .p-avitecs__offer-item + .p-avitecs__offer-item {
    border-left: 0;
  }
  .p-avitecs__cta {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding: 3rem 2rem;
  }
  .p-avitecs__cta-image {
    max-width: 20rem;
    margin-inline: auto;
  }
}

/* =========================================================
   中古防音室ページ p-used（page-avitecs-used.php）
   カードの型はグランドピアノ一覧を参考に、防音室ページの紫トーンで組む
   ========================================================= */
/* 額縁の中に置く注意事項リンク。枠の下端に余白を残さない */
.p-used__notice-link {
  margin-bottom: 0;
}

/* 防音室TOPのおすすめ中古から #アンカーで飛んでくるので、固定ヘッダーの下に潜らせない */
.p-used__card {
  padding: 4rem;
  background: var(--color-bg);
  scroll-margin-top: 10rem;
}
.p-used__card + .p-used__card {
  margin-top: 4rem;
}
/* 商品名はカードの最上部。写真とテキストはその下に横並び */
.p-used__head {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2.4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-line);
}
.p-used__name {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
}
/* 品番と「3.0畳 Dr-35」は同じ行に並べて高さを節約する */
.p-used__title-block {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  align-items: baseline;
}
.p-used__sub {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-muted);
}
/* 状態バッジ。売約済はグレーに落とす */
.p-used__status {
  flex: 0 0 auto;
  padding: 0.5rem 1.6rem;
  border-radius: 50px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.p-used__status.is-talking {
  background: var(--color-tone-yellow);
}
.p-used__status.is-sold {
  background: var(--color-muted);
}

/* 左＝写真スライダー＋間取り図／右＝備考＋スペック表 */
.p-used__inner {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
/* お問い合せ（価格の下）。ラベル＋電話番号＋Webフォームボタン */
.p-used__contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 2.4rem;
  padding: 1.6rem 2rem;
  background: var(--gray);
}
.p-used__contact-label {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.p-used__contact-body .c-tel {
  margin-bottom: 1rem;
}
/* c-text-button の min-width 280px が枠からはみ出すので解除する */
.p-used__contact-body .c-text-button {
  width: 100%;
  min-width: 0;
}
.p-used__contact-body .c-tel__link {
  color: var(--color-text);
  font-size: var(--fs-lg);
}
/* 写真は切らずに全体を見せる */
.p-used__slider .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--gray);
}
/* 矢印・ドットは TOPバナー（banner-02）と同じチューム */
.p-used__slider .slide_btn {
  display: flex;
  gap: 2.4rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.6rem;
}
.p-used__slider .slide-prev,
.p-used__slider .slide-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.p-used__slider .slide-prev:hover,
.p-used__slider .slide-next:hover {
  background: var(--color-accent);
  color: #fff;
}
.p-used__slider .slide-prev [class^="iconoir-"],
.p-used__slider .slide-next [class^="iconoir-"] {
  font-size: 1.8rem;
}
.p-used__slider .slide-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}
.p-used__slider .slide-bullet {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg);
  cursor: pointer;
}
.p-used__slider .slide-bullet.is-active {
  background: var(--color-accent);
}
/* 間取り図はスライダーの下。線画なので小さめの固定幅で中央に置く */
.p-used__plan {
  max-width: 300px;
  margin: 2.4rem auto 0;
  padding: 1.6rem;
  border: 1px solid var(--color-line);
}
.p-used__plan img {
  display: block;
  width: 100%;
  height: auto;
}

.p-used__lead {
  margin: 0 0 2.4rem;
  font-size: var(--fs-sm);
  line-height: 1.9;
}
/* スペック・価格はグランドピアノ一覧と同じ形（罫線なし・価格を大きく） */
.p-used__spec {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
}
.p-used__spec > div {
  display: flex;
  gap: 1.6rem;
}
.p-used__spec dt {
  flex: 0 0 auto;
  min-width: 7rem;
  font-weight: 700;
}
.p-used__spec dd {
  margin: 0;
}
.p-used__price-area {
  margin-top: 2.4rem;
}
.p-used__price {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(2.4rem, 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
}
.p-used__price span {
  margin-left: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
}
.p-used__price-note {
  margin-top: 1rem;
}

/* 売約済（折りたたみ）。在庫一覧のすぐ下なので上の余白は詰める */
.p-used__sold-section {
  padding-top: 0;
}
.p-used__sold {
  border: 2px solid var(--color-accent);
  background: var(--color-bg);
}
.p-used__sold-summary {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.4rem;
  cursor: pointer;
  color: var(--color-accent);
  font-size: 1.8rem;
  font-weight: 700;
  list-style: none;
}
.p-used__sold-summary::-webkit-details-marker {
  display: none;
}
.p-used__sold-toggle {
  color: var(--color-accent);
  font-size: 2rem;
  transition: transform 0.3s ease;
}
.p-used__sold[open] .p-used__sold-toggle {
  transform: rotate(180deg);
}
.p-used__sold-list {
  display: grid;
  gap: 5px;
  padding: 0 2.4rem 2.4rem;
}
/* 売約済は写真・価格なしの簡易カード */
.p-used__card--sold {
  padding: 2.4rem;
  border: 1px solid var(--color-line);
}
.p-used__card--sold .p-used__head {
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
}
.p-used__card--sold .p-used__name {
  font-size: var(--fs-lg);
}
.p-used__card--sold .p-used__spec {
  font-size: var(--fs-sm);
}
.p-used__notice li {
  margin-bottom: 1.2rem;
}

@media screen and (max-width: 768px) {
  .p-used__card {
    padding: 2rem;
  }
  .p-used__head {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .p-used__name {
    font-size: 2.2rem;
  }
  .p-used__card--sold .p-used__name {
    font-size: 1.8rem;
  }
  /* 中古一覧はスマホで内側を90%幅にする */
  .p-used-page .l-inner {
    width: 90%;
    padding-inline: 0;
  }
  .p-used__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  /* 間取り図は小さめの中央寄せ */
  .p-used__plan {
    max-width: 150px;
    margin: 2rem auto 0;
    padding: 0.8rem;
  }
  .p-used__spec > div {
    gap: 1rem;
  }
  /* お問い合わせはラベルを上に置いて縦積み */
  .p-used__contact {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.6rem;
  }
  .p-used__card + .p-used__card {
    margin-top: 2.4rem;
  }
  .p-used__price {
    font-size: 2.4rem;
  }
  .p-used__price span {
    font-size: 1.2rem;
  }
}
/* =========================================================
   施工事例 p-case（page-avitecs-case.php）
   一覧＝写真カードのグリッド／詳細＝リード＋写真の並び
   ========================================================= */
.p-case__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-case__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.p-case__thumb {
  display: block;
  overflow: hidden;
  background: var(--gray);
}
.p-case__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.p-case__link:hover .p-case__thumb img {
  transform: scale(1.04);
}
.p-case__body {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.6rem;
}
.p-case__name {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.5;
}
.p-case__arrow {
  flex: 0 0 auto;
}

/* 詳細 */
.p-case__title {
  margin: 0 0 2.4rem;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
}
.p-case__lead {
  margin: 0 0 4rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* 工程の見出し（1日目・2日目…）。アクセント色の帯 */
.p-case__step {
  margin: 0 0 2.4rem;
  padding: 1rem 2rem;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
}
.p-case__photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem 2rem;
  margin: 0 0 4rem;
  padding: 0;
  list-style: none;
}
.p-case__photo figure {
  margin: 0;
}
.p-case__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--gray);
}
.p-case__photo figcaption {
  margin-top: 0.8rem;
  font-size: var(--fs-sm);
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-case__list,
  .p-case__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.6rem;
  }
}

/* 商品案内一覧（固定ページテンプレート） */
.p-goods-index {
  margin-bottom: 0;
}
.p-goods-index__banner {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-sec-half);
  margin-left: calc(50% - 50vw);
}
.p-goods-index__news {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-sec-half);
  margin-left: calc(50% - 50vw);
  padding-right: max(var(--side), calc((100vw - var(--inner)) / 2 + var(--side)));
  padding-left: max(var(--side), calc((100vw - var(--inner)) / 2 + var(--side)));
}
/* 背景だけを ::after で背面に敷き、page-hero のはみ出し装飾を「背景の上・中身の下」に通す。
   セクションごと沈めると見出しやリストまで装飾に隠れる。
   ::before は .news-02 が別の装飾で使用中（この画面では content:none で殺している）ので ::after を使う。
   クラス2つ分の特異度にしているのは、管理画面のカスタムCSS（z-index:-1）に打ち勝つため。
   ここに z-index を効かせると重なりの文脈ができて ::after が装飾より下に行けなくなる */
.p-goods-index__news.p-goods-news {
  position: relative;
  z-index: auto;
  /* news-02 の装飾用 isolation を解除。付いたままだと ::after が閉じ込められて背面に行けない。
     この画面は .news-02::before を content:none で殺しているので、閉じ込める対象はもう無い */
  isolation: auto;
  background: transparent;
}
.p-goods-index__news.p-goods-news::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-pale-accent);
}
.p-goods-index__products {
  margin-top: 0;
  margin-bottom: var(--space-sec-half);
}
.p-goods-index__support-section {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  padding: var(--space-sec-half) max(var(--side), calc((100vw - var(--inner)) / 2 + var(--side)));
  background: var(--color-pale-accent);
}
.p-goods-index__support-links {
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .p-goods-index__banner,
  .p-goods-index__news,
  .p-goods-index__products {
    margin-bottom: 4rem;
  }
  .p-goods-index__support-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ピアノ調律・修理 */
.p-tuning__intro,
.p-tuning__section,
.p-tuning__contact {
  max-width: var(--inner);
  margin-inline: auto;
  margin-bottom: var(--space-sec-half);
  padding: var(--space-sec) var(--side) 0;
}
.p-tuning__intro {
  /* ヒーロー直下なので上余白は他ページと同じ半分にする（--space-sec は bottom 用） */
  padding-top: var(--space-sec-half);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(30rem, 0.95fr);
  gap: 4rem;
  align-items: center;
}
.p-tuning__intro .c-heading {
  margin-bottom: 2.4rem;
}
.p-tuning__intro .c-heading__ja {
  word-break: keep-all;
  overflow-wrap: normal;
}
.p-tuning__intro .c-heading-h3 {
  margin-bottom: 1.4rem;
  color: var(--color-accent);
}
.p-tuning__text,
.p-tuning__lead,
.p-tuning__area p,
.p-tuning__notes,
.p-tuning__service-card p,
.p-tuning__voice-list p,
.p-tuning__work-list p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.p-tuning__text + .p-tuning__text,
.p-tuning__lead + .p-tuning__lead {
  margin-top: 1.2rem;
}
.p-tuning__intro-image {
  margin: 0;
  overflow: hidden;
}
.p-tuning__intro-image,
.p-tuning__intro-image img,
.p-tuning__service-card figure,
.p-tuning__service-card img,
.p-tuning__work-image,
.p-tuning__work-image img {
  border-radius: 0;
}
.p-tuning__intro-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.p-tuning__contact {
  margin-top: var(--space-sec-half);
  padding-top: 0;
}
.p-tuning__contact-inner {
  max-width: var(--inner);
  margin-right: auto;
  margin-left: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2.4rem;
  align-items: center;
  padding: 2.8rem 3.2rem;
  border-radius: 1.2rem;
  background: var(--color-pale-accent);
}
.p-tuning__contact-title {
  color: var(--color-accent);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}
.p-tuning__contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-tuning__contact-list li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.p-tuning__contact-list span {
  color: var(--color-accent);
  font-weight: 700;
}
.p-tuning__contact-list a {
  font-weight: 700;
}
.p-tuning__section > .c-heading {
  margin-bottom: 3rem;
  text-align: center;
}
.p-tuning__section > .c-icon-heading {
  margin-bottom: 2.4rem;
}
.p-tuning__reason-list,
.p-tuning__voice-list,
.p-tuning__work-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-tuning__reason-list li,
.p-tuning__voice-list li,
.p-tuning__work-list li {
  padding: 2.4rem;
  border: 1px solid var(--color-accent);
  border-radius: 1rem;
  background: #fff;
}
.p-tuning__reason-list span {
  display: inline-flex;
  margin-bottom: 1.2rem;
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.p-tuning__reason-list h3,
.p-tuning__service-card h3,
.p-tuning__voice-list h3,
.p-tuning__work-list h3 {
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}
.p-tuning__work-list li {
  padding: 1.3rem;
}
.p-tuning__work-image {
  margin: 0 0 1.6rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.p-tuning__work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-tuning__area {
  margin-top: 3rem;
  padding: 2.4rem;
  border-radius: 1rem;
  background: var(--color-pale-accent);
}
.p-tuning__area .c-heading-h3 {
  margin-bottom: 1.2rem;
}
.p-tuning__area p + p {
  margin-top: 0.6rem;
}
.p-tuning__note {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.p-tuning__price,
.p-tuning__voice {
  width: 100vw;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);
  padding: var(--space-sec-half) 0 var(--space-sec-half);
  background: var(--color-pale-accent);
}
.p-tuning__price > *,
.p-tuning__voice > * {
  max-width: var(--inner);
  margin-inline: auto;
  padding-right: var(--side);
  padding-left: var(--side);
}
.p-tuning__table-wrap {
  overflow-x: auto;
}
.p-tuning__price-table {
  width: 100%;
  min-width: 72rem;
  border-collapse: collapse;
  background: #fff;
  font-size: var(--fs-base);
}
.p-tuning__price-table th,
.p-tuning__price-table td {
  padding: 1.6rem 2rem;
  border: 1px solid var(--color-line);
  text-align: left;
  line-height: 1.6;
}
.p-tuning__price-table thead th {
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
}
.p-tuning__price-table tbody th {
  color: var(--color-accent);
  font-weight: 700;
}
.p-tuning__notes {
  margin: 2rem auto 0;
  padding-right: var(--side);
  padding-left: calc(var(--side) + 1.2em);
}
.p-tuning__notes li + li {
  margin-top: 0.6rem;
}
.p-tuning__service-list {
  display: grid;
  gap: 2.4rem;
}
.p-tuning__price + .p-tuning__services,
.p-tuning__voice + .p-tuning__workshop {
  padding-top: var(--space-sec-half);
}
.p-tuning__service-card {
  display: grid;
  grid-template-columns: 32rem minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 2.4rem;
  border-radius: 1.2rem;
  background: var(--color-pale-accent);
}
.p-tuning__service-card figure {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.p-tuning__service-card img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}
.p-tuning__service-card .c-arrow-link {
  margin-top: 1.6rem;
}
.p-tuning__voice-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.p-tuning__workshop .p-tuning__lead {
  max-width: 82rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.p-tuning__work-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 3rem;
}
.p-tuning__contact--bottom {
  margin-bottom: 0;
  padding-bottom: var(--space-sec);
}
@media (max-width: 1024px) {
  .p-tuning__reason-list,
  .p-tuning__voice-list,
  .p-tuning__work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-tuning__contact-inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .p-tuning__intro,
  .p-tuning__service-card {
    grid-template-columns: 1fr;
  }
  .p-tuning__section,
  .p-tuning__contact {
    padding-top: 4rem;
  }
  .p-tuning__intro {
    padding-top: var(--space-sec-half);
  }
  .p-tuning__contact {
    margin-top: 0;
  }
  .p-tuning__contact-inner {
    padding: 2.4rem 2rem;
  }
  .p-tuning__reason-list,
  .p-tuning__voice-list,
  .p-tuning__work-list {
    grid-template-columns: 1fr;
  }
}
/* PC専用で閉じる。無条件だと上の max-width:768px の1カラム指定を打ち消し、
   SPで本文とスライダーが横並びのまま画面外にはみ出す */
@media screen and (min-width: 769px) {
  .p-tuning__intro {
    grid-template-columns: minmax(min(100%, 58rem), 1fr) minmax(28rem, 42rem);
  }
}
.p-tuning__intro-body {
  min-width: 0;
}
.p-tuning__intro .c-heading__en {
  font-size: clamp(3.8rem, 4.5vw, 5.8rem);
}
.p-tuning__intro .c-heading__ja,
.p-tuning__intro .c-heading-h3 {
  display: block;
  width: auto;
  max-width: none;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
}
.p-tuning__intro .c-heading-h3 {
  line-height: 1.5;
  /* 見出しが長い文章になったので折り返しを許可する（上のh2は1行のまま）。
     keep-all のままだと日本語が一切分割されず、SPで枠からはみ出す */
  white-space: normal;
  word-break: normal;
}
@media (max-width: 768px) {
  .p-tuning__intro .c-heading__ja,
  .p-tuning__intro .c-heading-h3 {
    white-space: normal;
  }
}