/*
  自社サービスサイト(HP・LP制作の依頼受付ページ)専用スタイル
  base.css / pattern3.css(steps流用) を読み込んだ上で追加する。
  左上固定ロゴ・右側固定の問い合わせバッジは、このページ専用(他の3パターンには付けない)。
*/

/*
  「FOR YOU」以降の本文が全体的に小さい(base.css/pattern3.cssはほぼ固定pxで、
  画面が広くなっても一切大きくならない)という指摘を受けて、画面幅に応じてゆるやかに
  大きくなる可変フォントサイズ(clamp)を用意する。ヒーローの見出し(clamp使用)と
  同じ考え方。3段階(本文/小さめの説明文/サービス行の見出し)を変数にして、
  下の各クラスへまとめて適用する。
*/
:root {
  --fs-body: clamp(15px, 0.25vw + 14px, 17px);
  --fs-small: clamp(14px, 0.25vw + 13px, 16px);
  --fs-row-title: clamp(18px, 0.25vw + 17px, 20px);
}

.section__lead,
.worry-item p,
.strength-item__title,
.step__title,
.faq-item summary,
.faq-item p {
  font-size: var(--fs-body);
}

.strength-item__desc,
.service-row__desc,
.step__desc,
.sample-card__desc {
  font-size: var(--fs-small);
}

.service-row__title {
  font-size: var(--fs-row-title);
}

/*
  各セクションの見出し(.section__title)の背後に、アクセントカラーのぼかしたグロー(丸い光)を
  敷き、文字自体にも影を付けて「背景から浮いている」印象を出す。
  backdrop-filter(背景を透かしてぼかす)ではなく、新しく敷いた光そのものをfilter:blurで
  ぼかす方式にしている(タイトルの背景はベタ塗りの色なので、backdrop-filterでは何も
  ぼけて見えない)。全セクションの見出しは.section--centerでセンタリングされているため、
  グローも中央基準で置ける。
*/
.section__title {
  position: relative;
  isolation: isolate;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 14px 28px rgba(0, 0, 0, 0.12);
}

.section__title::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 640px);
  height: 260%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-accent) 45%, transparent) 0%,
    transparent 70%
  );
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

/* 反転配色(暗い背景+明るい文字)のOUR MISSIONは、影ではなく明るいグローを強めにする */
.impact-band__text {
  position: relative;
  isolation: isolate;
  text-shadow: 0 0 30px color-mix(in srgb, var(--color-accent) 70%, transparent), 0 4px 16px rgba(0, 0, 0, 0.4);
}

/*
  OUR MISSIONの文字が「ふわっと浮き出てくる」ように、通常のフェード(base.cssの.reveal)より
  演出を強める。opacity/translateYに加えてfilter:blurを足し、ぼやけた状態から画面に入った
  瞬間にピントが合うように見せる(::before(グロー)は文字の子要素なので、親にblurをかけると
  グローごと一緒にぼやける→一緒にくっきりする、という自然な一体感になる)。
  .impact-band__labelはワンテンポ早く出る小見出しなので、同じ演出だが控えめにしておく。
*/
.impact-band__label.reveal,
.impact-band__text.reveal {
  transform: translateY(28px);
  filter: blur(10px);
  transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
}

.impact-band__label.reveal.is-visible,
.impact-band__text.reveal.is-visible {
  transform: translateY(0);
  filter: blur(0);
}

.impact-band__text::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 720px);
  height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-accent) 55%, transparent) 0%,
    transparent 70%
  );
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

/*
  セクション背景にごく薄いラジアルグラデーションの地紋を敷く。フラットな単色より
  奥行きが出て、見出しのグロー(::before)とも馴染む。色はテーマのアクセントカラーを
  ごく薄く使うので、どのテーマでも破綻しない。.sectionはbase.css共通クラスだが、
  ここでの上書きはservice.css内(=service.html)にしか効かない。
*/
.section {
  background-image: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--color-accent) 6%, transparent) 0%,
    transparent 60%
  );
  /* base.cssの.sectionは上下ともvar(--space-6)=96pxだが、上の余白だけ
     少し詰める(下の余白は次セクションとの区切りとして残す)。 */
  padding-top: var(--space-5);
}

/*
  全セクション共通の斜めバンド(水平方向の薄い斜めカット)は反応が薄かったため撤回。
  ヒーロー下のセクションは、斜めカットではなく「スタッガード(段差)」「オフセット(ずらし)」の
  2つで統一する。縦に並ぶリスト(お悩み・大切にしていること・サービス紹介)は左右に
  少しずつずらし(スタッガード)、横に並ぶグリッド(ステップ・サンプルカード)は上下に
  互い違いにずらす(オフセット)。スクロールの表示アニメーション自体はbase.css共通の
  .reveal(フェード+上へ移動)のままにして、ここでは「静止時の並び」だけをずらす。
*/

/* 「大切にしていること」のリスト幅(元は.strength-itemの親divへのインラインstyleだった) */
.strength-list {
  max-width: 640px;
  margin: 0 auto;
}

/* 縦積みリスト：奇数/偶数で左右に少しずつずらす(スタッガード) */
@media (min-width: 640px) {
  .strength-item:nth-child(odd),
  .service-row:nth-child(odd) {
    transform: translateX(-24px);
  }
  .strength-item:nth-child(even),
  .service-row:nth-child(even) {
    transform: translateX(24px);
  }
}

/*
  お悩みリストだけは「左右にずらす」意味が薄いという指摘を受けて、
  ズレ幅をごく小さく(装飾程度)に抑えつつ、代わりに「チェックが下からフェードインしながら
  順番に点灯していく」動きに意味を持たせる。base.cssの.reveal(translateY 24px→0)と
  同じ縦の動きを保ったまま、横方向だけごく小さくずらすため、hidden/visible両方の
  transformをここで明示的に指定している(nth-childの詳細度がここでは.reveal単体より
  高いため、何も指定しないとtranslateYが丸ごと消えてしまうのを防ぐため)。
*/
@media (min-width: 640px) {
  .worry-item:nth-child(odd) {
    transform: translate(-8px, 24px);
  }
  .worry-item:nth-child(even) {
    transform: translate(8px, 24px);
  }
  .worry-item.is-visible:nth-child(odd) {
    transform: translate(-8px, 0);
  }
  .worry-item.is-visible:nth-child(even) {
    transform: translate(8px, 0);
  }
}

/*
  ご依頼の流れ・SEO対応の流れは、格子状グリッド+上下互い違いオフセットをやめて、
  SERVICEなどと同じ「縦1列の番号リスト」に統一する。
  経緯: グリッド+オフセットは項目数や画面幅によって折り返す列数が変わり、
  (a)SEOは5個を3列にした際、行またぎでズレ方向が噛み合わず番号同士が重なって見える、
  (b)説明文が長い項目は折り返して2行になり、隣の行と衝突しやすい、という指摘を受けた。
  縦1列なら折り返し(複数行になる)自体が起きないため、この種の不具合が構造的に起きない。
  本文の横幅を絞ることで、1列でも間延びせず読みやすくなる(指摘の通り)。
*/
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
}

.step {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.step:last-child {
  border-bottom: none;
}

@media (min-width: 700px) {
  .step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

/*
  ヒーロー・左上ロゴ・右上お問い合わせ・CTAボタンで使っている「放射状グラデーション+影」の
  立体感を、他セクションの丸いアイコン/数字バッジにも展開する。pattern3.cssのデフォルト
  (ベタ塗りの円)をservice.htmlだけ上書きする(service.cssはpattern3.cssの後に読み込まれるため
  他ページ(pattern1〜3.html)には影響しない)。
*/
.worry-item__icon,
.step__num,
.strength-item__icon {
  background: radial-gradient(
    circle at top left,
    color-mix(in hsl, var(--color-accent), white 65%) 0%,
    var(--color-accent) 50%,
    color-mix(in hsl, var(--color-accent), black 55%) 100%
  );
  color: var(--color-on-accent);
  border: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 8px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.6s ease;
}

/*
  スクロールで画面に入った瞬間(親要素に.reveal.is-visibleが付いた時)だけ、
  バッジの周りにアクセントカラーの光彩を追加する。base.jsのIntersectionObserverが
  .strength-item/.stepに.is-visibleを付け外しする仕組みをそのまま使う。
  (.worry-itemだけは下の「チェック演出」専用に別のクラス(.is-checked)を使うため、
  ここからは外している)
*/
.strength-item.is-visible .strength-item__icon,
.step.is-visible .step__num {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 8px rgba(0, 0, 0, 0.25), 0 0 18px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/*
  お悩みリストのチェック(✓)は、画面に入るまでは「○(未チェック)」の輪郭だけの丸に見せ、
  その項目がしっかり画面に入ってから初めてグラデーション+チェックがポンと点灯する。
  「悩みを一つずつ確認していく」という見出しの意味と、動きそのものを一致させるための演出。
  文字(✓)自体はHTMLに残したまま、色をtransparentにして隠している。

  フェードイン(.is-visible、位置とopacity)とチェック点灯(.is-checked、アイコンの見た目)は
  あえて別クラス・別タイミングにしている。.is-visibleは他の要素と同じ閾値(15%見えた瞬間)で
  早めに付くため、そのままチェックにも使うと「スクロールして気づいた時にはもうチェック済み」に
  なってしまう。.is-checkedはjs/base.jsのinitWorryCheckが専用のIntersectionObserver
  (50%見えてから発火)で付け外しするため、実際に目で追える速さでチェックが入る。
*/
.worry-item__icon {
  border: 2px solid transparent;
  /* background(グラデーション)は状態が切り替わる瞬間にパッと切り替える(グラデーション同士は
     transitionで滑らかに補間されないため、ここでは無理に含めない)。輪郭・チェックの色・
     光彩・拡大縮小だけをなめらかにして、「ポンと点灯する」ような瞬間の切り替えにする。 */
  transition: box-shadow 0.6s ease, border-color 0.4s ease, color 0.25s ease 0.1s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.worry-item:not(.is-checked) .worry-item__icon {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: transparent;
  box-shadow: none;
  transform: scale(0.78);
}

.worry-item.is-checked .worry-item__icon {
  transform: scale(1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 8px rgba(0, 0, 0, 0.25), 0 0 18px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/*
  お悩みリストは、枠+背景を持つカード(pattern3.cssの.worry-item既定)だと硬い印象になるため、
  「対応できること」(.service-row)と同じ、下線だけで区切るリストに変える。
  枠・背景・角丸を打ち消し、下線をアクセントカラー寄りの色にする。
*/
.worry-item {
  background: none;
  border: none;
  border-radius: 0;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

/*
  4つのチェックが全て点いた後に、締めの一文を挟んで次のSERVICEセクションへつなげる。
  base.jsのSELECTORSに.worry-list__conclusionを加えているので、スクロールで画面に入った
  タイミングで(4つ目のチェックの少し後に)自動でフェードインする。
*/
.worry-list__conclusion {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-accent);
}

/*
  お悩みリストの結び文からSERVICEセクションまでの余白が間延びして見える、という
  ChatGPTレビューの指摘を受け、このセクションの下側パディングだけ約3割詰める。
*/
#for-you {
  padding-bottom: calc(var(--space-6) * 0.7);
}

@media (min-width: 900px) {
  .worry-list__conclusion {
    font-size: 21px;
  }
}

/*
  strength-item__iconは元々絵文字アイコン用の円(pattern3.cssにはない、service.css独自の要素)。
  ChatGPTレビューで「絵文字がブルー基調の上質な配色に対してややカジュアル」と指摘を受け、
  単色の線画SVGアイコンに統一した(HTML側で絵文字を<svg>に差し替え済み)。円も少し大きくして
  目立たせる。
*/
.strength-item__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* final-cta(お問い合わせ)ボタンのLINE/メールアイコンも同様に線画SVGへ統一。
   currentColorを使っているため、ボタンの文字色(プライマリ=白系/アウトライン=アクセント色)に
   自動で合わせて色が変わる。 */
.final-cta .icon {
  display: inline-flex;
  align-items: center;
}

/* サービス紹介の大きな数字(01/02/03)は円のバッジ化はせず、文字自体に
   グラデーションをかけて立体感を出す(現状の「大きな数字」らしさは残す)。 */
.service-row__num {
  background: linear-gradient(
    135deg,
    color-mix(in hsl, var(--color-accent), white 65%) 0%,
    var(--color-accent) 45%,
    color-mix(in hsl, var(--color-accent), black 60%) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 0.6s ease;
}

.service-row.is-visible .service-row__num {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent) 55%, transparent));
}

/*
  カード・行の枠線をアクセントカラーの淡いグローに変える(ネオン風アウトライン)。
  .strength-item/.service-rowは下線だけのリスト行なので、色だけ変える。
  (.worry-itemは下の「枠なし・下線区切り」の指摘を受けて別ルールに差し替えたため、
  ここからは外している)
*/
.strength-item,
.service-row {
  border-bottom-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

/*
  見出しのグロー(::before)も、スクロールで画面に入るまでは弱く、入った瞬間に
  くっきり浮かび上がるようにする。
*/
.section__title::before,
.impact-band__text::before {
  opacity: 0.35;
  transition: opacity 0.8s ease;
}

.section__title.is-visible::before,
.impact-band__text.is-visible::before {
  opacity: 1;
}

/*
  Aboutスプリット画面(ReeL社Aboutページのトップを参考)。
  見出し・ナビ・写真・ブランド名を、1画面の中で四隅と中央にずらして配置する。
  スマホ幅では絶対配置をやめ、上から順に並ぶ普通の縦積みに切り替える。
*/
.about-split {
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.about-split__eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--color-text-light);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.about-split__heading {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.about-split__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.about-split__photo {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  background: var(--color-border);
  margin: 0 auto var(--space-5);
}

.about-split__brand {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 900px) {
  .about-split {
    position: relative;
    min-height: 90vh;
    padding: var(--space-6) var(--space-4);
  }

  .about-split__eyebrow {
    position: absolute;
    top: var(--space-6);
    left: var(--space-4);
    right: var(--space-4);
    margin-bottom: 0;
  }

  .about-split__heading {
    position: absolute;
    top: 120px;
    right: var(--space-4);
    text-align: right;
    max-width: 46%;
    font-size: 32px;
    margin-bottom: 0;
  }

  .about-split__nav {
    position: absolute;
    top: 260px;
    left: var(--space-4);
    margin-bottom: 0;
  }

  .about-split__photo {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    max-width: 340px;
    margin: 0;
  }

  .about-split__brand {
    position: absolute;
    bottom: var(--space-6);
    font-size: 64px;
  }

  .about-split__brand--left {
    left: var(--space-4);
  }

  .about-split__brand--right {
    right: var(--space-4);
  }
}

/*
  左上固定ロゴ(グランアップル神戸三田を参考)。
  ヘッダーの中に置くのではなく、画面の角に独立したブロックとして固定表示し、
  スクロールしても常に同じ位置に留まるようにする。
*/
.site-fixed-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 200px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /*
    ベタ塗りだとのっぺり見えるので、外側の角(画面の左上=直角の角)を光源として
    明るく、内側(丸まっている角)に向かって暗くなる放射状グラデーションにする。
    黒を混ぜるとテーマによってはくすんだ色になるため、HSL空間で混ぜて
    色相はそのまま・明度だけを変えることで「同じ色の濃淡」に見えるようにする。
  */
  background: radial-gradient(
    circle at top left,
    color-mix(in hsl, var(--color-accent), white 35%) 0%,
    var(--color-accent) 55%,
    color-mix(in hsl, var(--color-accent), black 35%) 100%
  );
  color: var(--color-on-accent);
  text-align: center;
  padding: 18px 20px 20px;
  border-radius: 0 0 40px 0;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 10px rgba(0, 0, 0, 0.2);
}

.site-fixed-logo__eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 1;
}

.site-fixed-logo__mark {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .site-fixed-logo {
    width: 150px;
    padding: 18px 14px 22px;
    border-radius: 0 0 28px 0;
  }
  .site-fixed-logo__eyebrow {
    font-size: 10px;
  }
  .site-fixed-logo__mark {
    font-size: 21px;
  }
}

/* 固定ロゴの分だけヘッダーの左側を空ける */
.site-header {
  padding-left: 220px;
}

/*
  ナビの項目数を全セクション分(10個)に増やしたところ、PC幅でnavが折り返す不具合が出た。
  原因はbase.cssの.site-header__nav(position:absolute; left:50%; transform:translateX(-50%)
  で中央寄せ)。left:50%を使うと、幅autoの要素は「中央に置いてから幅を測る」のではなく
  「50%地点より右側の残り幅」だけを使って幅を計算してしまうため、項目が増えて必要な幅が
  ヘッダー幅の半分を超えると折り返される。widthをmax-content(中身がそのまま入る幅)に
  固定してこの制限を外す。他ページ(pattern1〜3.html)は項目数が少なく再現しないため、
  ここではservice.htmlだけに限定して直す。
*/
@media (min-width: 900px) {
  .site-header__nav {
    width: max-content;
  }
}

@media (max-width: 900px) {
  .site-header {
    padding-left: 166px;
  }
}

/*
  右上固定の問い合わせカード(グランアップル神戸三田を参考)。
  左上の.site-fixed-logoと対になるデザインとして、内側(コンテンツ側)に向く角=
  左下の角だけを大きく丸め、他の角は四角のままにしている。
*/
.corner-contact {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 28px;
  /*
    左上の.site-fixed-logoと対になるよう、同じ放射状グラデーションにする。
    こちらは右上が画面端(直角)の角なので、光源もtop rightにする。
  */
  background: radial-gradient(
    circle at top right,
    color-mix(in hsl, var(--color-accent), white 35%) 0%,
    var(--color-accent) 55%,
    color-mix(in hsl, var(--color-accent), black 35%) 100%
  );
  color: var(--color-on-accent);
  border-radius: 0 0 0 56px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -6px 10px rgba(0, 0, 0, 0.2);
}

.corner-contact__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* 単独の「お問い合わせ」リンク用(下のcontactセクションへジャンプするだけの導線) */
.corner-contact__btn--label {
  font-size: 17px;
  letter-spacing: 0.04em;
}

.corner-contact__btn .icon {
  font-size: 18px;
}

@media (max-width: 900px) {
  .corner-contact {
    padding: 12px 18px;
    border-radius: 0 0 0 36px;
    gap: 6px;
  }
  .corner-contact__btn--label {
    font-size: 16px;
  }
  .corner-contact__btn {
    font-size: 11px;
  }
  .corner-contact__btn .icon {
    font-size: 15px;
  }
}

/* ヒーロー(サービスページ専用)。写真は独立した背景レイヤー、見出し・リード文は
   それぞれ不透明パネル1枚。パネルは常に写真より上に乗るだけなので、写真の
   斜めカットと文字が重なることはない。900px以上はCSS Grid。 */
.hero--service {
  --hero-cut-top-x: 50%;
  --hero-cut-top-y: 120%;
  --hero-cut-bottom-x: 30%;
  --hero-cut-bottom-y: 10%;
  /* 見出しパネルの最大幅(見出しの最大フォントサイズと合わせて、一番長い行が
     はみ出さないように調整すること) */
  --hero-panel-max: 44rem;
  /* 見出し2・3行目の右方向の段差(1行あたり) */
  --hero-row-stagger: clamp(20px, 4vw, 72px);

  /* base.cssの汎用.hero(display:flex等)を打ち消す */
  display: block;
  min-height: 0;
  align-items: stretch;
  position: relative;
  isolation: isolate;
  background: var(--color-base);
  color: var(--color-text);
  overflow: clip;
}

.hero__media {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

/*
  ヒーローの写真も、下の画像分割コンビネーションと同じ.tile-grid/.tile-pieceの仕組みを
  流用している(js/base.jsのinitPuzzleCycleは.tile-gridを全て自動で拾うため、
  クラスを付けるだけで動く)。.tile-gridの既定サイズ(幅760px上限・正方形寄りの比率)は
  ヒーローには合わないので、.hero__tilesで.hero__media全面を覆うサイズに上書きする。
*/
.tile-grid.hero__tiles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
}

/* 文字パネルの共通スタイル: 常に不透明な背景を持つ「四角形」であることが最重要 */
.hero__panel {
  position: relative;
  z-index: 1;
  background: var(--color-base);
  padding: var(--space-4) var(--space-3);
}

.hero__eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-shadow:
    0 1px 0 var(--color-base),
    0 2px 10px color-mix(in srgb, var(--color-base) 90%, transparent),
    0 0 18px color-mix(in srgb, var(--color-base) 70%, transparent);
}

.hero__eyebrow-accent {
  color: var(--color-accent);
  font-size: 1.3em;
}

.hero__title {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.5;
  /* 背景の白ウォッシュを濃くする代わりに、文字の周りにほんのり光彩を
     つけて視認性を上げる(ChatGPTに相談して出た案)。写真の透け感を保ったまま
     読みやすくできる。光彩の色はvar(--color-base)にして、文字色(var(--color-text))
     と常に反対側の明暗になるようにしている(白文字に白い光彩だと輪郭が溶けるため)。 */
  text-shadow:
    0 1px 0 var(--color-base),
    0 2px 10px color-mix(in srgb, var(--color-base) 90%, transparent),
    0 0 18px color-mix(in srgb, var(--color-base) 70%, transparent);
}

.hero__title-line {
  display: block;
}

.hero__title-accent {
  /* 文字色を本文と同じ濃い色にして、帯(アクセントカラー)側で目立たせる。
     文字色をアクセントカラーのままにすると、写真のウォッシュで背景が
     白っぽくなった時に文字も帯も薄い色同士で沈んでしまうため。 */
  color: var(--color-text);
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--color-accent) 55%, transparent) 62%
  );
  background-repeat: no-repeat;
  padding: 0 0.06em;
}

.hero__lead {
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-3);
  text-shadow:
    0 1px 0 var(--color-base),
    0 2px 10px color-mix(in srgb, var(--color-base) 90%, transparent),
    0 0 18px color-mix(in srgb, var(--color-base) 70%, transparent);
}

.hero__lead-accent {
  /* .hero__title-accentと同じマーカー帯。line-height:1.4に合わせて帯の位置を調整。 */
  background-image: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--color-accent) 55%, transparent) 62%
  );
  background-repeat: no-repeat;
  padding: 0 0.06em;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  /* ボタン2つをパネルの右端よりさらに右にずらす */
  transform: translateX(4em);
}

.hero__cta .btn {
  width: 100%;
  max-width: 260px;
}

/*
  「制作について相談する」は、左上の.site-fixed-logoと同じ放射状グラデーションを
  付けて立体感を出す。
*/
.hero__cta .btn--primary {
  background: radial-gradient(
    circle at top left,
    color-mix(in hsl, var(--color-accent), white 35%) 0%,
    var(--color-accent) 55%,
    color-mix(in hsl, var(--color-accent), black 35%) 100%
  );
  color: var(--color-on-accent);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -5px 8px rgba(0, 0, 0, 0.2);
}

/*
  「制作サンプルを見る」は白地+青枠(.btn--outline)は保ったまま、
  白の濃淡だけの放射状グラデーション+影を付けて立体感を出す。
  var(--color-base)を使うと、信頼ネイビーなど濃いテーマでグラデーション自体が
  暗くなり文字が読みにくくなるため、テーマに関係なく常に白系の固定色にする。
*/
.hero__cta .btn--outline {
  background: radial-gradient(
    circle at top left,
    #ffffff 0%,
    #f3f5f9 55%,
    #dde2ea 100%
  );
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -4px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 900px) {
  .hero--service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, var(--hero-panel-max));
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 640px;
    height: min(100vh - 112px, 900px);
    padding: 0;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: auto;
    border-radius: 0;
  }

  /*
    写真は常に全面表示のまま、文字を置く右上側だけ薄いベースカラーのウォッシュ+
    ぼかしを重ねて「写真がうっすら透けて見える」状態にする。左下は文字がなくなった
    ので何も重ねない(写真そのまま)。完全に消す(不透明の白)のではなく、
    色を混ぜてうっすら見せる+背景をぼかすことで、文字を読みやすくしている。
  */
  .hero__media::before {
    content: '';
    position: absolute;
    inset: 0;
    /*
      z-index指定なしだと、::beforeは疑似要素の性質上.hero__slide(実際の写真)より
      奥に描画されてしまい、不透明な写真の下に完全に隠れて見えなくなる。
      明示的にz-indexを指定して、写真より必ず手前に来るようにする。
    */
    z-index: 1;
    /*
      グラデーションの起点(transparent)は、この要素の左端(0%)ではなく
      var(--hero-cut-top-x)、つまりカットが実際に見え始める位置に合わせる。
      0%を基準にすると、見えない部分(カットの外側)で透明→色が変化しきってしまい、
      見える範囲(カットの内側)ではすでに色が乗った状態からしか見えなくなるため。
    */
    background: linear-gradient(
      to right,
      transparent var(--hero-cut-top-x),
      transparent 75%,
      color-mix(in srgb, var(--color-base) 45%, transparent) 90%,
      color-mix(in srgb, var(--color-base) 90%, transparent) 100%
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    clip-path: polygon(
      var(--hero-cut-top-x) 0,
      100% 0,
      100% var(--hero-cut-top-y)
    );
  }

  /*
    見出しパネルは背景を持たない(透明)。写真自体の斜めカットで白くなっている
    範囲に文字を置くだけなので、行ごとに背景ボックスを分ける必要がない。
    段差(斜めに沿わせる見た目)は、行ごとのpadding-leftだけで作る。
  */
  .hero__panel--heading {
    grid-column: 2;
    grid-row: 1;
    background: none;
    /* 「ホームページ・LP制作」の行を2行分上に上げる(高さが低い画面でも負値にならないようmax(0px,...)で保護) */
    padding: max(0px, calc(clamp(24px, 8vh, var(--space-6)) - 56px)) 0 0;
    /* 見出し3行をまとめて7文字分左にずらす */
    transform: translateX(-7em);
  }

  /*
    文字の色や光彩だけでなく、文字のすぐ後ろの写真自体をぼかして情報量を減らす
    (ChatGPTに相談して出た案)。白背景を足すのではなく、楕円形にbackdrop-filter:blur
    をかけ、mask-imageで中心だけくっきり・外側は自然に元の写真に戻るようにしている。
  */
  .hero__panel--heading::before,
  .hero__panel--lead::before {
    content: '';
    position: absolute;
    inset: -20px -30px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /*
      ぼかしだけでなく、色設定のベースカラーもうっすら重ねる。
      明るいテーマでは明るく、暗いテーマでは暗く自動でなじむので、
      白文字になるテーマでもコントラストが保たれる。
    */
    background: color-mix(in srgb, var(--color-base) 35%, transparent);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    z-index: -1;
    pointer-events: none;
  }

  /*
    本文(リード文)は見出しより文字が小さく行間も広いため、見出しと同じ強さの
    ぼかしだと(特に白文字になるテーマで)文字の輪郭がにじんで読みづらくなる。
    本文側だけぼかしを弱める。
  */
  .hero__panel--lead::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .hero__eyebrow,
  .hero__title-line {
    display: block;
    white-space: nowrap;
    text-align: right;
    width: 100%;
    margin-left: auto;
  }

  .hero__eyebrow {
    font-size: clamp(17px, min(1.3vw, 3vh), 23px);
    /* 「ホームページ・LP制作」だけ7文字分左にずらす */
    transform: translateX(-7em);
  }

  .hero__title {
    /* 最大値は一番長い行が--hero-panel-max(44rem=704px)をはみ出さない範囲で決めている */
    font-size: clamp(29px, min(2.9vw, 5.5vh), 51px);
  }

  /*
    右端はmargin-left:autoで常に列の右端に揃えたまま、幅だけ行ごとに狭める。
    幅が狭まった分、左端が右にずれていく(=右下がりの階段状に見える)。
    以前は:nth-child(2)/(3)で指定していたが、h1の中に.hero__eyebrowを
    入れた際に子要素の数え順がずれて3行目に段差がかからなくなっていたため、
    行番号を直接クラスで指定する方式に変更した(eyebrowの有無に影響されない)。
    段差の位置は--line-xに持たせておき、下の初回スライドイン演出の
    @keyframesからも同じ値を参照できるようにしている。
  */
  .hero__title-line--1 {
    --line-x: -7em;
  }

  .hero__title-line--2 {
    --line-x: -2.5em;
  }

  .hero__title-line--3 {
    --line-x: 1.3em;
  }

  /*
    初回ページ読み込み時だけ、3行を上から順に右からスライドインさせる演出。
    ページシャッターが開き終わる(60ms待機+0.3s transition≒360ms後)のを待ってから
    始まるよう、1行目の開始を0.5sに設定し、以降0.15sずつ遅らせている。
    animation-fill-mode:bothで、開始前は「from」の状態(透明+右にずれた位置)を
    保持し、終了後は「to」の状態(本来の段差位置)にとどまる。ループはしない
    (1回きりの演出)。
  */
  .hero__title-line {
    transform: translateX(var(--line-x, 0));
    animation: hero-title-line-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .hero__title-line--1 { animation-delay: 0.5s; }
  .hero__title-line--2 { animation-delay: 0.85s; }
  .hero__title-line--3 { animation-delay: 1.2s; }

  @keyframes hero-title-line-in {
    from {
      opacity: 0;
      transform: translateX(calc(var(--line-x, 0) + 2.5em));
    }
    to {
      opacity: 1;
      transform: translateX(var(--line-x, 0));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__title-line {
      animation: none;
      opacity: 1;
    }
  }

  .hero__cta .btn {
    font-size: 13px;
    padding: 9px 18px;
  }

  .hero__panel--lead {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    max-width: 24rem;
    padding: 0;
    margin-top: 0;
    background: none;
    /* 本文3行をまとめて5文字分左にずらす */
    transform: translateX(-5em);
  }

  .hero__lead {
    font-size: clamp(16px, min(1.15vw, 2.7vh), 20px);
  }

  .hero__lead-line {
    display: block;
    text-align: center;
  }

  .hero__lead-line:nth-child(1) {
    /* 「業種や目的に合わせて、」の上を2行分あける */
    margin-top: 2em;
  }

  .hero__lead-line:last-child {
    /* 「一点もののホームページをご提案します。」の下を2行分あける */
    margin-bottom: 2em;
  }
}

/*
  スマホ版は見出しパネルを写真の上部・やや高い位置に重ねる。文字の読みやすさは、
  帯(四角形)ではなく文字の形に沿った楕円のぼかし(::before+mask-image)で確保する。
  デスクトップ版の.hero__panel--heading::beforeと同じ手法。
  (base.cssの.hero__eyebrow/.hero__titleより後ろに置いて確実に上書きする)
*/
@media (max-width: 899px) {
  /*
    service.htmlは左上に.site-fixed-logo(固定ロゴ)を使うため、.site-header自体には
    ロゴを置いていない。base.cssの.site-header{justify-content:space-between}のままだと
    ハンバーガーボタン1つだけが左端に残ってしまうので、このページだけ中央寄せにする。
    以前設定していたpadding-left:166px(固定ロゴ分の余白)があると中央がずれるため、
    通常のpadding(var(--space-3))に戻す。
  */
  .site-header {
    justify-content: center;
    padding-left: var(--space-3);
  }

  .hero--service {
    /* 基底クラス.heroのpadding-topを打ち消す */
    padding-top: var(--space-3);
  }

  .hero__panel--heading {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    width: calc(100% - var(--space-3) * 2);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* 上下の余白をなくし、写真の上端に文字を完全にくっつける */
    padding: 0 12px;
    /* .hero__panelの不透明な背景(帯に見えていた原因)を打ち消す。
       見た目の背景は::beforeの楕円ぼかしだけにする。 */
    background: none;
  }

  .hero__panel--heading::before {
    content: '';
    position: absolute;
    inset: -4px -6px;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    background: color-mix(in srgb, var(--color-base) 55%, transparent);
    /* 文字にぴったり沿うよう、楕円の範囲を小さく・フェードも早めに切る */
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 55%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 55%);
    z-index: -1;
    pointer-events: none;
  }

  .hero__eyebrow {
    text-align: center;
    font-size: 13px;
    margin-bottom: 6px;
  }

  .hero__title {
    text-align: center;
    font-size: 21px;
    line-height: 1.35;
  }

  /*
    「他社・他店と」「差をつける。」の2行を1行にまとめて表示する
    (「ホームページ・LP制作」→「オリジナルデザインで、」→「他社・他店と差をつける。」の3行)。
  */
  .hero__title-line:nth-child(2),
  .hero__title-line:nth-child(3) {
    display: inline;
  }

  /*
    本文(リード文)は写真の下部に重ねる。.hero__panel--leadは通常フローのまま
    (CTAボタンはそのまま写真の下に続く)、.hero__lead(pタグ)だけを負のmargin-topで
    引き上げて写真の下端に重ねる。見出しと違ってabsolute配置にしないのは、
    後ろに続くCTAボタンの位置をそのまま保つため。
  */
  .hero__panel--lead {
    background: none;
    padding-top: 0;
  }

  .hero__lead {
    position: relative;
    z-index: 2;
    margin-top: -90px;
    margin-bottom: var(--space-3);
    /* 上下の余白をなくし、写真の下端に文字を完全にくっつける */
    padding: 0 12px;
    text-align: center;
  }

  .hero__lead::before {
    content: '';
    position: absolute;
    inset: -6px -8px;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    background: color-mix(in srgb, var(--color-base) 55%, transparent);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 65%);
    z-index: -1;
    pointer-events: none;
  }

  .hero__lead-line {
    display: block;
  }

  /* CTAボタンをスマホでは横並びにする(デスクトップは縦並びのまま) */
  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    transform: none;
  }

  .hero__cta .btn {
    width: auto;
    max-width: none;
    flex: 1 1 0;
    white-space: nowrap;
    font-size: 13px;
    padding: 12px 10px;
  }
}

/* サービス3本柱 */
.service-card {
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.service-card__num {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.service-card__title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 17px;
}

.service-card__desc {
  font-size: 14px;
  color: var(--color-text-light);
}

/*
  インパクトのある一言(ReeL社Our Missionを参考)。
  背景・文字色はテーマトークンを反転させているので、明るいテーマでも暗いテーマでも
  必ず前後のセクションとコントラストが付き、明暗のリズムが生まれる。
*/
.impact-band {
  background: var(--color-text);
  color: var(--color-base);
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.impact-band__label {
  font-size: 16px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.impact-band__text {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.5;
  max-width: 16ch;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .impact-band__text {
    font-size: 44px;
    max-width: none;
  }
}

/* 対応できること: カードの繰り返しをやめ、大きな数字を使った縦積みのエディトリアル風レイアウトに */
.service-list {
  max-width: 760px;
  margin: 0 auto;
}

.service-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.service-row__num {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1;
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .service-row__num {
    font-size: 72px;
  }
}

.service-row__title {
  font-weight: 700;
  /* font-sizeはファイル冒頭のvar(--fs-row-title)(clamp)を使う */
  margin-bottom: 4px;
}

.service-row__desc {
  /* font-sizeはファイル冒頭のvar(--fs-small)(clamp)を使う */
  color: var(--color-text-light);
}

/* 選ばれる理由 */
.strength-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

/*
  ここではレイアウト系(flex配置・角丸)だけを指定する。背景色・文字色・影は
  ファイル冒頭の.strength-item__icon(グラデーションバッジ)、サイズはさらに下の
  再定義(44px)がそれぞれ担当している。以前はここでbackground/border/width/heightも
  指定していたため、後勝ちのCSSカスケードでグラデーションバッジの見た目が丸ごと
  打ち消されてしまっていた(線画SVGアイコンが背景色に埋もれて見えなくなるバグとして発覚)。
*/
.strength-item__icon {
  flex: 0 0 auto;
  border-radius: 50%;
}

.strength-item__title {
  font-weight: 700;
  margin-bottom: 4px;
}

.strength-item__desc {
  /* font-sizeはファイル冒頭のvar(--fs-small)(clamp)を使う */
  color: var(--color-text-light);
}

/* 制作サンプル: リード文のすぐ下に注意書きを詰めて置くため、section__leadの
   下マージン(基本は次のセクション本文向けの大きな余白)をここだけ狭める */
#sample .section__lead {
  margin-bottom: var(--space-2);
}
.sample-note {
  display: inline-block;
  font-size: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 14px;
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
}

/*
  SAMPLEセクションの横スクロールだけ、.inner(max-width:1120px)の外に出して画面幅いっぱいに
  広げる(2026-09-25追加: カード1枚1枚をもっと大きく見せてほしいという要望より)。
  左端は.innerの本文と揃え、右側は画面端まで使えるようにする。
*/
#sample .hscroll-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

#sample .hscroll-track {
  padding-left: max(var(--space-3), calc((100vw - var(--max-width)) / 2 + var(--space-3)));
  padding-right: var(--space-3);
}

/* 矢印ボタンが画面の端ぴったりにくっつかないよう、少し内側に余白を持たせる */
#sample .hscroll-arrow:not(.hscroll-arrow--prev) {
  right: var(--space-3);
}

#sample .hscroll-arrow--prev {
  left: var(--space-3);
}

.sample-card {
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  /* 横スクロールの1枚として、幅を固定して並べる(ReeL社Featured Case Studyを参考) */
  flex: 0 0 88%;
  scroll-snap-align: start;
}

@media (min-width: 700px) {
  .sample-card {
    /* 画面いっぱいに近い幅で、1〜2枚分見せて横スクロールを促す(2026-09-25: 各カードを大きくするため拡大) */
    flex-basis: 62%;
  }
}

@media (min-width: 1100px) {
  .sample-card {
    flex-basis: 560px;
  }
}

/* 「サンプルを見る」ボタン: 通常の.btnは主要CTA用の大きさなので、カード内では控えめなサイズにする */
.sample-card__body .btn {
  padding: 10px 20px;
  font-size: 13px;
}

/* 文字情報を先に、写真をあとに見せる並び順(ReeL社Worksページを参考) */
.sample-card__body {
  order: 1;
  padding: var(--space-3) var(--space-2) var(--space-2);
}

.sample-card__bar {
  width: 56px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 999px;
  margin-bottom: var(--space-2);
}

/*
  ページ全体の構成が伝わるよう、フルページのスクリーンショットを
  「カード内スクロールのミニプレビュー」として見せる。
  外枠(.sample-card__image)は高さ固定・スクロールなし、
  内側(.sample-card__scroll)だけがスクロールする2重構造。
*/
.sample-card__image {
  order: 2;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-border);
  overflow: hidden;
}

.sample-card__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.sample-card__scroll img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  業種別5サンプル(2026-09-25追加)はまだ実写真がないため、各サンプルの配色(--ph-color、
  インラインstyleで指定)を使ったグラデーション+絵文字のプレースホルダーにする
  (sample-cafe.html等の中で使っている.phクラスと同じ考え方)。実写真ができたら
  sample-card__scroll+imgの構成に戻す。
*/
.sample-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  background: radial-gradient(
    circle at 30% 20%,
    color-mix(in srgb, var(--ph-color, var(--color-accent)) 45%, transparent),
    color-mix(in srgb, var(--ph-color, var(--color-accent)) 15%, var(--color-surface))
  );
}

/* 各サンプルの実際のヒーロー部分のスクリーンショットを表示(2026-09-25追加) */
.sample-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.sample-card__hint {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
}

/* 写真に重ねる丸型の矢印バッジ(外枠側に固定するのでスクロールしても位置が変わらない) */
.sample-card__arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sample-card__tag {
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 4px;
}

.sample-card__title {
  font-weight: 700;
  margin-bottom: 8px;
}

.sample-card__desc {
  /* font-sizeはファイル冒頭のvar(--fs-small)(clamp)を使う */
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

/* プロフィール */
.profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.profile__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-border);
}

.profile__name {
  font-family: var(--font-heading);
  font-size: 22px;
}

.profile__role {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

.profile__bio {
  font-size: 14px;
  color: var(--color-text-light);
  text-align: left;
}

/* 料金 */
.price-note {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/*
  ---------- 画像分割コンビネーション ----------
  4列×2行=8枚のタイルが全員同じ1枚の写真をbackground-imageに持ち、
  background-size:400% 200%(4列×2行の分だけ拡大)+ タイルごとに違うbackground-positionで
  写真の担当部分だけを切り出して見せている(パズルのような凹凸はなく、単純な長方形)。
  初期状態は外側にtransformで散らしておき、js/base.jsのinitPuzzleCycleが
  .tile-gridに.is-assembledを付けたり外したりして、集まる→ばらける→次の写真、を
  繰り返す(実際の写真の差し替えはJS側でbackground-imageを書き換える)。
*/
.tile-grid {
  position: relative;
  width: min(760px, 100%);
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  overflow: hidden;
}

/*
  タイルが散らばっている間、隙間から見える背景が素っ気ないので、
  組み上がる前の「土台」としてロゴを中央に敷いておく。
  タイルより下(DOM順で先に置くことでz-index指定なしでも下に来る)にあるので、
  組み上がった写真の下には完全に隠れる。
  文字色は固定せずvar(--color-text)にすることで、色設定(テーマ)を
  Elegant Darkなど背景が濃い配色に切り替えたときも自動で読める色になる。
*/
.tile-grid__bg-logo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--color-text);
}

.tile-grid__bg-eyebrow {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.tile-grid__bg-mark {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 66px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .tile-grid__bg-eyebrow {
    font-size: 12px;
  }
  .tile-grid__bg-mark {
    font-size: 28px;
  }
}

.tile-piece {
  position: absolute;
  width: 25%;
  height: 50%;
  background-size: 400% 200%;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.tile-piece--r0c0 { top: 0; left: 0; background-position: 0% 0%; }
.tile-piece--r0c1 { top: 0; left: 25%; background-position: 33.333% 0%; }
.tile-piece--r0c2 { top: 0; left: 50%; background-position: 66.667% 0%; }
.tile-piece--r0c3 { top: 0; left: 75%; background-position: 100% 0%; }
.tile-piece--r1c0 { top: 50%; left: 0; background-position: 0% 100%; }
.tile-piece--r1c1 { top: 50%; left: 25%; background-position: 33.333% 100%; }
.tile-piece--r1c2 { top: 50%; left: 50%; background-position: 66.667% 100%; }
.tile-piece--r1c3 { top: 50%; left: 75%; background-position: 100% 100%; }

/*
  組み上がり方のパターンを3種類用意し、js/base.jsのinitPuzzleCycleが写真を切り替えるたびに
  .tile-gridのdata-pattern(1〜3)を順番に変えてループさせる。パターン内でも8枚それぞれ
  移動方向・回転・拡大縮小をバラバラにして、単調な「一斉に中央へ集まる」動きを避けている。
*/

/* パターン1: 外側の四隅・四辺から、回転を付けて集まる */
.tile-grid[data-pattern="1"] .tile-piece--r0c0,
.tile-grid:not([data-pattern]) .tile-piece--r0c0 { transform: translate(-170%, -130%) rotate(-14deg); }
.tile-grid[data-pattern="1"] .tile-piece--r0c1,
.tile-grid:not([data-pattern]) .tile-piece--r0c1 { transform: translate(-55%, -150%) rotate(9deg); }
.tile-grid[data-pattern="1"] .tile-piece--r0c2,
.tile-grid:not([data-pattern]) .tile-piece--r0c2 { transform: translate(55%, -150%) rotate(-9deg); }
.tile-grid[data-pattern="1"] .tile-piece--r0c3,
.tile-grid:not([data-pattern]) .tile-piece--r0c3 { transform: translate(170%, -130%) rotate(14deg); }
.tile-grid[data-pattern="1"] .tile-piece--r1c0,
.tile-grid:not([data-pattern]) .tile-piece--r1c0 { transform: translate(-170%, 130%) rotate(11deg); }
.tile-grid[data-pattern="1"] .tile-piece--r1c1,
.tile-grid:not([data-pattern]) .tile-piece--r1c1 { transform: translate(-55%, 150%) rotate(-7deg); }
.tile-grid[data-pattern="1"] .tile-piece--r1c2,
.tile-grid:not([data-pattern]) .tile-piece--r1c2 { transform: translate(55%, 150%) rotate(7deg); }
.tile-grid[data-pattern="1"] .tile-piece--r1c3,
.tile-grid:not([data-pattern]) .tile-piece--r1c3 { transform: translate(170%, 130%) rotate(-11deg); }

.tile-grid[data-pattern="1"].is-assembled .tile-piece--r0c0,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r0c0 { transition-delay: 0.16s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r0c1,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r0c1 { transition-delay: 0.06s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r0c2,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r0c2 { transition-delay: 0.1s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r0c3,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r0c3 { transition-delay: 0.2s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r1c0,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r1c0 { transition-delay: 0.22s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r1c1,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r1c1 { transition-delay: 0s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r1c2,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r1c2 { transition-delay: 0.13s; }
.tile-grid[data-pattern="1"].is-assembled .tile-piece--r1c3,
.tile-grid:not([data-pattern]).is-assembled .tile-piece--r1c3 { transition-delay: 0.04s; }

/* パターン2: 上段は上から、下段は下からのカーテン、左から右へ順番に降りてくる */
.tile-grid[data-pattern="2"] .tile-piece--r0c0 { transform: translate(0, -230%); }
.tile-grid[data-pattern="2"] .tile-piece--r0c1 { transform: translate(0, -230%); }
.tile-grid[data-pattern="2"] .tile-piece--r0c2 { transform: translate(0, -230%); }
.tile-grid[data-pattern="2"] .tile-piece--r0c3 { transform: translate(0, -230%); }
.tile-grid[data-pattern="2"] .tile-piece--r1c0 { transform: translate(0, 230%); }
.tile-grid[data-pattern="2"] .tile-piece--r1c1 { transform: translate(0, 230%); }
.tile-grid[data-pattern="2"] .tile-piece--r1c2 { transform: translate(0, 230%); }
.tile-grid[data-pattern="2"] .tile-piece--r1c3 { transform: translate(0, 230%); }

.tile-grid[data-pattern="2"].is-assembled .tile-piece--r0c0,
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r1c0 { transition-delay: 0s; }
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r0c1,
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r1c1 { transition-delay: 0.09s; }
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r0c2,
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r1c2 { transition-delay: 0.18s; }
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r0c3,
.tile-grid[data-pattern="2"].is-assembled .tile-piece--r1c3 { transition-delay: 0.27s; }

/* パターン3: それぞれ違う角度・大きさから回転しながら定位置に収まる */
.tile-grid[data-pattern="3"] .tile-piece--r0c0 { transform: translate(-90%, -90%) rotate(-100deg) scale(0.25); }
.tile-grid[data-pattern="3"] .tile-piece--r0c1 { transform: translate(70%, -110%) rotate(85deg) scale(0.3); }
.tile-grid[data-pattern="3"] .tile-piece--r0c2 { transform: translate(-70%, -110%) rotate(-75deg) scale(0.35); }
.tile-grid[data-pattern="3"] .tile-piece--r0c3 { transform: translate(95%, -85%) rotate(110deg) scale(0.25); }
.tile-grid[data-pattern="3"] .tile-piece--r1c0 { transform: translate(-95%, 85%) rotate(95deg) scale(0.3); }
.tile-grid[data-pattern="3"] .tile-piece--r1c1 { transform: translate(70%, 110%) rotate(-90deg) scale(0.25); }
.tile-grid[data-pattern="3"] .tile-piece--r1c2 { transform: translate(-70%, 110%) rotate(80deg) scale(0.35); }
.tile-grid[data-pattern="3"] .tile-piece--r1c3 { transform: translate(90%, 90%) rotate(-105deg) scale(0.3); }

.tile-grid[data-pattern="3"].is-assembled .tile-piece--r0c0 { transition-delay: 0s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r0c1 { transition-delay: 0.07s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r0c2 { transition-delay: 0.14s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r0c3 { transition-delay: 0.21s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r1c0 { transition-delay: 0.1s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r1c1 { transition-delay: 0.17s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r1c2 { transition-delay: 0.03s; }
.tile-grid[data-pattern="3"].is-assembled .tile-piece--r1c3 { transition-delay: 0.24s; }

.tile-grid.is-assembled .tile-piece {
  transform: translate(0, 0) rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tile-piece {
    transition: none;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/*
  ---------- 業種別セクション組み合わせお試し(試作、#builder) ----------
  「業種ごとにセクションのサンプルを複数用意し、選んで組み合わせた結果をその場で確認したい」
  という要望への第一弾試作。まずは「飲食店・カフェ」1業種、ヒーロー・お悩み訴求の
  2セクション×3パターンだけを実装している(2026-09-23、ミトフと合意)。
  ボタンで選んだパターンだけを.is-activeにして表示するシンプルな仕組み(js/base.jsのinitBuilder)。
  実在の写真がまだないため、写真部分はアクセントカラーのグラデーション+絵文字で
  プレースホルダー表示にしている(=実際の制作物ではなくレイアウト確認用のサンプル)。
  当初はページ本文に直接埋め込んでいたが、セールスページの流れから浮く・ページが長くなる
  という指摘を受けて、SAMPLEセクションのボタンから開くポップアップに変更した
  (js/base.jsのinitBuilderModal、以下の.builder-modal*)。
*/
.builder-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
}

.builder-modal.is-open {
  display: block;
}

.builder-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.builder-modal__panel {
  position: relative;
  max-width: 960px;
  margin: 60px auto;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--color-base);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.builder-modal__close {
  position: sticky;
  top: 0;
  float: right;
  width: 36px;
  height: 36px;
  margin: 12px 12px 0 0;
  border: none;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
}

@media (max-width: 700px) {
  .builder-modal__panel {
    margin: 24px 12px;
    max-height: calc(100vh - 48px);
  }
}

/*
  セクションが9個に増え、選ぶたびに下のプレビューまで大きくスクロールする必要があった
  (指摘を受けて修正)。PC幅(900px以上、ベース作成自体がPC限定のため)では左に選択リスト・
  右にプレビューの2カラムにして、選んだ内容がすぐ隣で確認できるようにする。
  それぞれ独立してスクロールする(.builder__controls/.builder__previewにmax-height+overflow-y)。
*/
.builder__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 900px) {
  /*
    左(選択リスト)と右(プレビュー)がそれぞれ別々にスクロールしていると、指摘の通り
    「左が詰まって、右のセクションと合っていない」状態になる。外側の.builder-modal__panel
    だけがスクロールする1本のスクロールバーにして、各行の高さをjs/base.jsの
    alignBuilderRowsで右のセクションに合わせることで、左右の位置がスクロールしても
    ずれないようにする。
  */
  .builder {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .builder__controls {
    flex: 0 0 300px;
    /*
      右のプレビュー側(.builder__slot)は隙間なく縦に並んでいるため、こちらも隙間を0にし、
      各.builder__groupの高さ(min-height、alignBuilderRowsが設定)だけで間隔を作る。
      gapを残したままだと、下に行くほど左右のズレが積み重なってしまう。
    */
    gap: 0;
    margin-bottom: 0;
  }
  .builder__group {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    box-sizing: border-box;
  }
  .builder__preview {
    flex: 1;
    margin: 0;
  }
}

/*
  ラベルの下にコンボボックス、という縦積みに戻した(横並びは一度試したが、
  ラベルの下でよいとの指摘を受けた)。.builder__groupは、右のプレビューの
  対応するセクションと高さを揃えるため、js/base.js(alignBuilderRows)が
  min-heightをインラインで付け外しする。
*/
.builder__group-label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--color-text-light);
}

/*
  以前はセクションごとにボタンの列(.builder__option)だったが、9セクション分だと
  縦に長くなりすぎるため、1セクション1行のコンボボックス(<select>)に変更した
  (2026-09-23)。
*/
.builder__select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.builder__preview {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-base);
}

.builder__preview-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.builder__variant {
  display: none;
}

.builder__variant.is-active {
  display: block;
}

.builder__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: radial-gradient(
    circle at 30% 20%,
    color-mix(in srgb, var(--color-accent) 35%, transparent),
    color-mix(in srgb, var(--color-accent) 12%, var(--color-surface))
  );
  color: var(--color-text);
}

/* ヒーローA: 写真重視・シンプル型 */
.builder__hero-a .builder__photo--full {
  height: 260px;
}

.builder__hero-a-text {
  padding: 24px;
  text-align: center;
}

.builder__hero-a-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.builder__hero-a-title {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.5;
}

/* ヒーローB: コラージュ型 */
.builder__hero-b-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.builder__hero-b-grid .builder__photo {
  aspect-ratio: 1;
  font-size: 32px;
}

.builder__hero-b-text {
  padding: 24px;
  text-align: center;
}

/*
  ヒーローC: 分割型。.builder__hero-cに直接display:flexを指定すると、
  .builder__variant(display:none)より後ろにあるため非表示時も強制的に表示されてしまう
  (is-activeでない他の候補も常に見えてしまうバグとして発覚)。.is-activeとセットの
  セレクタにして、選ばれている時だけflexにする。
*/
.builder__hero-c.is-active {
  display: flex;
  flex-direction: column;
}

.builder__hero-c .builder__photo--half {
  height: 180px;
}

.builder__hero-c-text {
  padding: 24px;
  text-align: center;
}

@media (min-width: 700px) {
  .builder__hero-c.is-active {
    flex-direction: row;
    align-items: stretch;
  }
  .builder__hero-c .builder__photo--half {
    height: auto;
    flex: 1 1 45%;
  }
  .builder__hero-c-text {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
}

/* お悩みA: チェックリスト型 */
/* .builder__hero-cと同じ理由で、display:flexは.is-activeとセットにする */
.builder__worry-a.is-active {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.builder__worry-a-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.builder__worry-a-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.builder__worry-a-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* お悩みB: アイコングリッド型 */
.builder__worry-b-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 24px;
}

.builder__worry-b-card {
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.builder__worry-b-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

/* お悩みC: シンプル箇条書き型 */
.builder__worry-c-list {
  padding: 24px 24px 24px 44px;
  list-style: disc;
}

.builder__worry-c-list li {
  margin-bottom: 8px;
  color: var(--color-text-light);
}

/*
  セクションを10種類に拡張(2026-09-23)。「必要なし」を選んだセクションは
  js/base.jsが.builder__slotに.is-skippedを付けて丸ごと非表示にする。
  各セクションの3パターンは、できるだけ使い回せる共通ブロック(帯・行リスト・
  アイコンリスト・カードグリッド・タグ・引用文・星評価・フォーム風)で組んでいる
  (セクションごとに1からデザインするとCSSが膨大になるため)。
*/
.builder__slot.is-skipped {
  display: none;
}

.builder__pad {
  padding: 24px;
}

.builder__center {
  text-align: center;
}

/* 帯(コンセプト・ミッション向け、impact-bandと同じ考え方の反転配色) */
.builder__band {
  padding: 32px 24px;
  text-align: center;
  background: var(--color-text);
  color: var(--color-base);
}

.builder__band-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.builder__quote {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.6;
}

.builder__quote--mark {
  font-style: italic;
}

.builder__quote-sm {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* 行リスト(番号/アイコン+タイトル+説明が縦に並ぶ、サービス紹介・ご利用の流れ・FAQ向け) */
.builder__row-list {
  display: flex;
  flex-direction: column;
}

.builder__row-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.builder__row-list-item:last-child {
  border-bottom: none;
}

.builder__row-list-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.builder__row-list-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.builder__row-list-desc {
  font-size: 13px;
  color: var(--color-text-light);
}

/* アイコン+文章の縦リスト(こだわり・強み向け) */
.builder__icon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.builder__icon-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.builder__icon-list-icon {
  flex: 0 0 auto;
  font-size: 22px;
}

/* カードグリッド(サービス・強み・ギャラリー・流れなど、複数セクションで使い回す) */
.builder__grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.builder__grid-card {
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.builder__grid-card-icon {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
}

.builder__grid-card-num {
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 2px;
}

/* タグ(サービス紹介の「タグ型」向け) */
.builder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.builder__tag {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 13px;
}

/* お客様の声カード */
.builder__voice-card {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.builder__voice-name {
  font-size: 13px;
  color: var(--color-text-light);
  text-align: right;
}

.builder__stars {
  color: var(--color-accent);
  font-size: 20px;
  margin-bottom: 4px;
}

/* お問い合わせのフォーム風プレースホルダー(実際に送信はできない見た目だけのサンプル) */
.builder__form-mock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.builder__form-field {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-light);
  font-size: 13px;
}

/*
  ベース作成はPCのみ対応。トリガーボタンの下に案内文を用意しておき、js/base.jsが
  スマホ幅(700px未満)でのクリック時にこちらを表示に切り替える(通常は非表示)。
*/
.builder__mobile-note {
  display: none;
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-light);
}

.builder__mobile-note.is-visible {
  display: block;
}

/* 送信フォーム(お名前・メールアドレス→Formspree経由でミトフに通知) */
.builder__submit {
  max-width: 900px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.builder__submit-label {
  font-weight: 700;
  margin-bottom: 4px;
}

.builder__submit-desc {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

.builder__submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.builder__input {
  flex: 1 1 200px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-family: inherit;
}

.builder__submit-status {
  margin-top: var(--space-2);
  font-size: 13px;
}

.builder__submit-status.is-error {
  color: #C0392B;
}

.builder__submit-status.is-success {
  color: var(--color-accent);
}