/* =============================================================
   住み継ぐリノベ LP – レイアウト・セクションスタイル
   design-tokens.css の変数を使用
   ============================================================= */


/* =============================================================
   BudouX（日本語の文節改行）ラッパー
   ※レイアウトに影響しないようinline。改行は文節境界（ZWSP）でのみ、
   　長すぎる文節は最終手段として折り返す
   ============================================================= */
budoux-ja {
  display: inline;
  word-break: keep-all;
  overflow-wrap: anywhere;
}


/* =============================================================
   セクション共通
   ============================================================= */
.section-padding {
  padding: 96px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-widest);
  /* 中央寄せ時、末尾の字間ぶん左に寄って見えるのを補正（letter-spacingと同値） */
  text-indent: var(--letter-spacing-widest);
  color: var(--color-button);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  /* 中央寄せ時、末尾の字間ぶん左に寄って見えるのを補正（letter-spacingと同値） */
  text-indent: var(--letter-spacing-wide);
  color: var(--color-ink);
  margin-bottom: 16px;
}

.section-lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
}


/* =============================================================
   【1】ヘッダー
   ============================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 100;
  border-bottom: 1px solid var(--color-line);
}

.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  /* ロゴ名と肩書きの行間を少しだけ広げる */
  gap: 4px;
}

.site-logo-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wide);
}

.site-logo-sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing-wide);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  letter-spacing: var(--letter-spacing-wide);
  transition: color 0.2s;
}

.site-nav a:hover {
  color: var(--color-accent);
}

.site-nav-cta {
  padding: 8px 20px;
  background-color: var(--color-button);
  color: var(--color-white) !important;
  border-radius: var(--radius-pill);
}

.site-nav-cta:hover {
  background-color: var(--color-button-hover);
}

/* ハンバーガーボタン（PCでは非表示、タブレット以下で表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* 開いた状態：×印に変形 */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =============================================================
   【2】FV
   ============================================================= */
.fv {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.fv-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.fv-bg::after {
  /* テキスト可読性確保のためのオーバーレイ（白文字向けに濃茶系を左から） */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(54, 46, 38, 0.45) 0%,
    rgba(54, 46, 38, 0.15) 50%,
    rgba(54, 46, 38, 0) 100%
  );
}

.fv-inner {
  position: relative;
  z-index: 1;
  padding: 120px 24px 80px;
}

.fv-eyebrow {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-white);
  margin-bottom: 32px;
  text-shadow: 0 2px 12px rgba(54, 46, 38, 0.7);
}

.fv-headline {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: var(--font-weight-strong);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-white);
  margin-bottom: 24px;
  /* 写真に馴染む濃茶系のシャドウで白文字の視認性を確保 */
  text-shadow: 0 2px 12px rgba(54, 46, 38, 0.7);
}

.fv-subcopy {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: var(--font-weight-base);
  color: var(--color-white);
  margin-bottom: 0;
  letter-spacing: var(--letter-spacing-wide);
  text-shadow: 0 2px 12px rgba(54, 46, 38, 0.7);
}


/* =============================================================
   【3】concerns お悩み
   ============================================================= */
.concerns {
  background-color: var(--color-beige);
}

.concerns-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.concern-item {
  padding: 32px;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  border-left: 3px solid var(--color-button);
}

.concern-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 16px;
}

.concern-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
}


/* =============================================================
   【4】中間メッセージ（縦書き＋写真ランダム配置）
   ============================================================= */
.body-message {
  background-color: var(--color-white);
  overflow: hidden;
}

.body-message-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- 縦書きコピー --- */
.body-message-text {
  writing-mode: vertical-rl;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: var(--font-weight-base);
  line-height: 2.6;
  letter-spacing: 0.2em;
  color: var(--color-ink);
  margin: 0;
  padding: 16px 0;
  flex-shrink: 0;
}

/* --- 写真ランダム配置（アスペクト比固定で重なりを維持） --- */
.body-message-photos {
  position: relative;
  flex: 1;
  max-width: 820px;
  /* 幅に連動して高さも比例 → 幅が変わっても4枚の重なりが一定 */
  aspect-ratio: 820 / 1100;
}

.bm-photo {
  position: absolute;
  margin: 0;
  background-color: var(--color-gray);
  overflow: hidden;
  border-radius: var(--radius-small);
}

.bm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* あずき様のレイアウト案（PDF2）に準拠した4枚配置 */
/* 1: 事務所外観（大・横） 左上 */
.bm-photo-1 {
  width: 58%;
  aspect-ratio: 7 / 6;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 2: 木目床に光（縦長・大） 右側、事務所写真の右下角に少し重ねる */
.bm-photo-2 {
  width: 47%;
  aspect-ratio: 3 / 4;
  top: 33%;
  left: 52%;
  z-index: 2;
}

/* 3: LDK（横） 左下（事務所・カフェと均等の縦余白） */
.bm-photo-3 {
  width: 47%;
  aspect-ratio: 16 / 10;
  top: 73%;
  left: 0;
  z-index: 1;
}

/* 4: カフェスペース（縦・小） 中央左（事務所から余白をとる） */
.bm-photo-4 {
  width: 26%;
  aspect-ratio: 3 / 4;
  top: 42%;
  left: 12%;
  z-index: 3;
}


/* =============================================================
   【5】services サービス内容
   ============================================================= */
.services {
  background-color: var(--color-beige);
  position: relative;
}

/* サービスは4列のため、やや広めの幅を使って各カラムにゆとりを持たせる */
.services .container {
  max-width: 1040px;
}

.services-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.service-item {
  text-align: center;
  padding: 24px 12px;
}

.service-icon {
  margin-bottom: 16px;
}

.service-icon img {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  object-fit: contain;
}

.service-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 12px;
}

.service-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
}


/* =============================================================
   【6】cases 施工事例
   ============================================================= */
.cases {
  background-color: var(--color-white);
}

/* 事例セクションは写真を主役にするため広めの幅を使用 */
.cases .container {
  max-width: 1100px;
}

.cases-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.case-item {
  /* 写真上、テキスト下の縦積みレイアウト */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case-images {
  display: grid;
  /* BEFORE/AFTER を横並びに戻して、コンテナ幅いっぱいで大きく見せる */
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.case-text {
  /* テキストは可読性のため幅を絞って配置 */
  max-width: 800px;
}

.case-img {
  position: relative;
  margin: 0;
}

.case-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-small);
  display: block;
}

/* BEFORE画像のみ：25%の黒色オーバーレイで「時間の経過」を表現 */
.case-img-before::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-small);
  pointer-events: none;
}

.case-img figcaption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background-color: rgba(29, 26, 22, 0.7);
  color: var(--color-white);
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  z-index: 1;
  font-family: var(--font-mincho);
}

/* 事例ナンバリング（FLOWのSTEP番号と同じ見せ方：小ラベル＋大きい番号） */
.case-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.case-step-label {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

.case-step-num {
  font-size: 2.4rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.case-title {
  font-size: 1.3125rem; /* 21px */
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 16px;
  color: var(--color-accent-deep);
}

.case-summary {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: 24px;
  color: var(--color-ink-soft);
}

.case-work {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-work li {
  position: relative;
  padding-left: 20px;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  line-height: var(--line-height-base);
}

.case-work li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 8px;
  height: 1px;
  background-color: var(--color-accent);
}

.case-item-placeholder {
  opacity: 0.5;
  /* TODO: クライアントから素材到着後にplaceholderクラスを外す */
}


/* =============================================================
   【7】主役CTA：小冊子請求
   ============================================================= */
.cta-main {
  background-color: var(--color-gray);
  position: relative;
}

.cta-main-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  align-items: start;
}

/* 左カラム：コピー（上）＋キャラ（下）、右カラム：フォーム（全行） */
.cta-main-copy { grid-column: 1; grid-row: 1; }
.cta-main-character { grid-column: 1; grid-row: 2; }
.cta-main-form { grid-column: 2; grid-row: 1 / 3; }

.cta-main-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  margin: 16px 0 24px;
  color: var(--color-ink);
  /* <br>での改行のみ許可し、それ以外の自動折り返しを防ぐ */
  white-space: nowrap;
}

.cta-main-lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
  margin-bottom: 32px;
}

.cta-main-character {
  margin-top: 32px;
}

.cta-main-character img {
  max-width: 200px;
}

.form-card {
  background-color: var(--color-white);
  padding: 40px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.form-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  margin-bottom: 24px;
  text-align: center;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  margin-bottom: 8px;
  letter-spacing: var(--letter-spacing-base);
}

.form-row input[type="text"],
.form-row input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--font-size-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background-color: var(--color-input-bg);
}

.form-row input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.required {
  display: inline-block;
  font-size: 0.62rem;
  background-color: var(--color-orange);
  color: var(--color-white);
  padding: 3px 6px;
  border-radius: var(--radius-small);
  margin-left: 8px;
  vertical-align: middle;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 16px;
  background-color: var(--color-button);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-pill);
  margin-top: 16px;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--color-button-hover);
}

.form-notice {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-align: center;
  margin-top: 16px;
  line-height: var(--line-height-tight);
}

/* 個人情報の取り扱い同意チェック */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}

.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-button);
  cursor: pointer;
}

.form-consent label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
  cursor: pointer;
}

.form-consent a {
  color: var(--color-accent);
  text-decoration: underline;
}


/* =============================================================
   【8】flow 流れ
   ============================================================= */
.flow {
  background-color: var(--color-white);
}

.flow-list {
  list-style: none;
  counter-reset: flow-counter;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}

.flow-item {
  position: relative;
  padding: 32px;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.flow-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* 英字のみネイビーを使用（参考サイトの方針に合わせる） */
  color: var(--color-navy);
  margin-bottom: 12px;
}

.flow-step-label {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

.flow-step-num {
  font-size: 2.4rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.flow-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 12px;
}

.flow-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
}

.flow-character {
  position: absolute;
  /* 白カードのpadding（32px）に揃える */
  bottom: 32px;
  right: 32px;
}

.flow-character img {
  /* トリミング済み画像を高さ基準で揃える（キャラの大きさを統一）*/
  height: 88px;
  width: auto;
}


/* =============================================================
   【9】会社情報
   ============================================================= */
.company {
  background-color: var(--color-beige);
}

.company-inner {
  display: grid;
  /* 写真側を広げて、3枚重ね配置をしっかり見せる */
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}

.company-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 24px;
}

.company-lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
  margin-bottom: 32px;
}

.company-info {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.company-info dt {
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-xs);
  margin-top: 20px;
}

.company-info dt:first-of-type {
  margin-top: 0;
}

.company-info dd {
  color: var(--color-ink);
  margin: 4px 0 0 0;
}

/* About Us：3枚エディトリアル配置（重なり大型版）
   ※幅に比例する aspect-ratio で高さを決め、レスポンシブでも重なりがズレないようにする */
.company-photos {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
}

.company-photos figure {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--color-input-bg);
}

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

/* 上大型（メインビジュアル）— ほぼフル幅・右寄り */
.cp-main {
  width: 86%;
  aspect-ratio: 4 / 3;
  top: 0;
  right: 0;
  z-index: 1;
}

/* 下左（打合せ）— 縦長。外観写真の左下に少しだけ重ねる */
.cp-sub-l {
  width: 45%;
  aspect-ratio: 3 / 4;
  top: 46%;
  left: 0;
  z-index: 3;
}

/* 下右（執務スペース）— 横長で大きく、右に少しはみ出してアクセント */
.cp-sub-r {
  width: 66%;
  aspect-ratio: 4 / 3;
  top: 60%;
  right: 0;
  z-index: 2;
  transform: translateX(40px);
}


/* =============================================================
   【10】faq
   ============================================================= */
.faq {
  background-color: var(--color-white);
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-line);
}

.faq-q {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 12px;
  color: var(--color-accent-deep);
}

.faq-a {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
  margin: 0;
}


/* =============================================================
   【11】サブCTA：LINE / 無料相談
   ============================================================= */
.cta-sub {
  background-color: var(--color-gray);
  text-align: center;
}

.cta-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
}

.cta-sub-card {
  display: block;
  padding: 40px 32px;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}

.cta-sub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.cta-sub-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 12px;
}

.cta-sub-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
  margin-bottom: 24px;
}

.btn-ghost {
  display: inline-block;
  padding: 12px 32px;
  background-color: transparent;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-pill);
}

.cta-sub-characters {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}

.cta-sub-characters img {
  max-width: 100px;
}


/* =============================================================
   【12】フッター
   ============================================================= */
.site-footer {
  background-color: var(--color-white);
  color: var(--color-ink);
  padding: 64px 0 32px;
  border-top: 1px solid var(--color-line);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
}

.site-footer-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: 16px;
}

.site-footer-tag {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-ink-soft);
}

.site-footer-company {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

.site-footer-copyright {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-muted);
}


/* =============================================================
   フローティングバナー（小冊子請求の常時誘導）
   画像 + 見出し + ボタン + 閉じる×ボタンのカードUI
   ============================================================= */
.floating-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  z-index: 50;
}

.floating-banner.is-hidden {
  display: none;
}

.floating-banner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background-color: transparent;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.floating-banner-close:hover {
  background-color: var(--color-input-bg);
  color: var(--color-ink);
}

.floating-banner-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.floating-banner-image {
  flex-shrink: 0;
  width: 100px;
  height: 130px;
  margin: 0;
  border-radius: var(--radius-small);
  overflow: hidden;
  background-color: var(--color-input-bg);
}

.floating-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.floating-banner-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-orange);
  color: var(--color-orange);
  border-radius: var(--radius-small);
}

.floating-banner-title {
  font-family: var(--font-mincho);
  font-size: 0.92rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin: 0;
}

.floating-banner-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--color-button);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wide);
  transition: background-color 0.2s;
}

.floating-banner-link:hover .floating-banner-button {
  background-color: var(--color-button-hover);
}


/* =============================================================
   タブレット以下：ハンバーガーメニュー（〜980px）
   ============================================================= */
@media (max-width: 980px) {

  /* ハンバーガーボタンを表示 */
  .nav-toggle {
    display: flex;
  }

  /* ナビを右からスライドインするドロワーに */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 280px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 88px 32px 32px;
    background-color: var(--color-white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav a {
    width: 100%;
    padding: 16px 4px;
    font-size: var(--font-size-md);
    border-bottom: 1px solid var(--color-line);
  }

  /* ドロワー内の小冊子請求は、ボタンのまま下部にまとめて表示 */
  .site-nav .site-nav-cta {
    margin-top: 24px;
    padding: 15px 24px;
    text-align: center;
    font-size: var(--font-size-sm);
    border-bottom: none;
    color: var(--color-white) !important;
  }

  /* ドロワーの背景オーバーレイ */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 90;
  }

  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}


/* =============================================================
   レスポンシブ対応（タブレット 〜880px）
   ============================================================= */
@media (max-width: 880px) {

  .section-padding {
    padding: 64px 0;
  }

  /* FV */
  .fv-headline {
    font-size: 2.2rem;
  }

  /* お悩み：1列 */
  .concerns-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 中間メッセージ：スマホは「テキスト先 → 写真1・2・1」 */
  .body-message-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  /* テキストは横書きにして先頭へ */
  .body-message-text {
    writing-mode: horizontal-tb;
    text-align: center;
    order: -1;
    line-height: 2;
    letter-spacing: 0.08em;
    padding: 0;
  }

  .body-message-photos {
    position: static;
    aspect-ratio: auto;
    max-width: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .bm-photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .bm-photo img {
    height: 100%;
  }

  /* 1・2・1 のレイアウト */
  .bm-photo-1 { grid-column: 1 / -1; order: 1; }  /* 事務所（フル）*/
  .bm-photo-4 { order: 2; }                        /* カフェ（左）*/
  .bm-photo-2 { order: 3; }                        /* 木目床（右）*/
  .bm-photo-3 { grid-column: 1 / -1; order: 4; }   /* LDK（フル）*/

  /* サービス：2列 */
  .services-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* 事例：モバイルではgapを詰める */
  .case-item {
    gap: 24px;
  }

  /* 主役CTA：縦並び */
  .cta-main-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* SP：1カラムにし、DOM順（コピー→フォーム→キャラ）で縦積み */
  .cta-main-copy,
  .cta-main-character,
  .cta-main-form {
    grid-column: 1;
    grid-row: auto;
  }

  .form-card {
    padding: 32px 24px;
  }

  /* 流れ：1列 */
  .flow-list {
    grid-template-columns: 1fr;
  }

  /* 会社情報：縦並び */
  .company-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .company-info {
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
  }

  /* About Us写真：モバイルは「1・2」配置（事務所フル → 打合せ＋執務） */
  .company-photos {
    aspect-ratio: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .company-photos figure {
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3;
    transform: none;
  }

  .cp-main { grid-column: 1 / -1; }  /* 事務所（フル）*/
  .cp-sub-l,
  .cp-sub-r {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  /* サブCTA：縦並び */
  .cta-sub-grid {
    grid-template-columns: 1fr;
  }

  /* フッター */
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* 主役CTA見出し：スマホは24px */
  .cta-main-title {
    font-size: 1.5rem;
  }

  /* 各セクションのh3見出し（20px→18px） */
  .flow-title,
  .cta-sub-title,
  .form-title {
    font-size: 1.125rem;
  }

  /* 小冊子キャラ（こはく招き猫）：小さく中央寄せ */
  .cta-main-character {
    text-align: center;
  }

  .cta-main-character img {
    max-width: 130px;
    margin: 0 auto;
  }
}


/* =============================================================
   スマホ詳細（〜600px）
   ============================================================= */
@media (max-width: 600px) {

  /* サービス：1列 */
  .services-list {
    grid-template-columns: 1fr;
  }

  /* 事例：BEFORE/AFTER は縦並び（モバイル） */
  .case-images {
    grid-template-columns: 1fr;
  }

  /* FLOWキャラ：スマホのみSTEP番号の横（上部右）に移動して本文と重ならないように
     ※タブレットはPCと同じ右下配置のまま */
  .flow-character {
    top: 24px;
    bottom: auto;
    right: 20px;
  }

  .flow-character img {
    height: 60px;
  }

  /* フローティングバナー：モバイルのみ横幅いっぱい（タブレットはPCと同じ固定幅） */
  .floating-banner {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .floating-banner-image {
    width: 80px;
    height: 104px;
  }

  .floating-banner-title {
    font-size: 0.86rem;
  }
}


/* =============================================================
   タブレット専用の上書き（601〜880px）
   ※880pxブロックの後ろに置き、タブレットだけ個別調整する
   ============================================================= */
@media (min-width: 601px) and (max-width: 880px) {

  /* 小冊子CTA：キャラを「迷う、その前に。」コピーの右の空きスペースへ */
  .cta-main-inner {
    grid-template-columns: 1fr auto;
    column-gap: 32px;
    row-gap: 24px;
    align-items: center;
  }

  .cta-main-copy { grid-column: 1; grid-row: 1; }

  .cta-main-character {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: center;
    margin-top: 0;
  }

  .cta-main-character img {
    max-width: 160px;
  }

  .cta-main-form { grid-column: 1 / -1; grid-row: 2; }

  /* 中間メッセージの写真：高さを抑えて 2×2 グリッドに */
  .bm-photo-1,
  .bm-photo-3 {
    grid-column: auto;
  }
}