/* ============================================================
  front.css — Sakamoto Miyu Portfolio
  役割   : トップページ（front-page.php）専用スタイル。
            ヘッダー・フッター・全ページ共通は main.css が担う。
            このファイルはトップページのみで追加読み込みされる。
  読み込み: functions.php の wp_enqueue_scripts → is_front_page() 条件
  依存   : main.css（先行読み込み済みであることを前提とする）

  構成:
    1.  カスタムプロパティ（デザイントークン）
    2.  リセット・ベーススタイル
    3.  タイポグラフィ
    4.  ユーティリティ・共通クラス
    5.  ヘッダー / ロゴ独立型
    6.  ハンバーガーメニュー / グローバルメニュー / 閉じるボタン
    7.  セクション共通見出し
    8.  Hero スライダー
    9.  Intro
   10.  Works
   11.  Service / ペルソナ誘導カード（イラストカード型）
   12.  Strength → 削除（About に統合）
   13.  About（フラット構成＋強み＋タイムライン）
   14.  Blog
   15.  Contact CTA（封筒SVG）
   16.  Footer
   17.  ボタン（.btn 系）
   18.  CTA テキストリンク
   19.  アニメーション・スクロール
   20.  レスポンシブ
============================================================ */


/* ============================================================
  1. カスタムプロパティ（デザイントークン）
============================================================ */
:root {
  /* --- カラー --- */
  --color-white:       #ffffff;
  --color-offwhite:    #fafaf8;       /* 背景ベース */
  --color-cream:       #f4f7f5;       /* セクション区切り背景（ミント極薄） */
  --color-beige:       #e8ede9;       /* ボーダー・区切り */
  --color-beige-mid:   #c8d4cc;       /* やや濃いボーダー */

  /* アクセント: ミントグリーン */
  --color-mint:        #98dbc6;
  --color-mint-light:  #e0f5ed;       /* mint 極薄（バッジ背景など） */
  --color-mint-dark:   #5db89e;       /* mint 濃め（テキスト・ボーダー） */

  /* アクセント: イエロー */
  --color-yellow:      #e6d72a;
  --color-yellow-light:#faf8d0;
  --color-yellow-dark: #b8ab00;

  /* アクセント: ピンク */
  --color-pink:        #f18d9e;
  --color-pink-light:  #fde8ec;
  --color-pink-dark:   #d06478;

  /* テキスト */
  --color-text:        #2c2c2a;       /* チャコール（メインテキスト） */
  --color-text-mid:    #6f6e67;       /* サブテキスト（WCAG AA 4.5:1 以上） */
  --color-text-light:  #b0aea8;       /* 補足テキスト */

  /* Contact CTA / Footer 用ライト背景 */
  --color-section-dark:  #e8f4ef;     /* ミント系の極薄グリーン（CTA背景） */
  --color-footer-bg:     #f0f7f4;     /* フッター背景（ミント極薄） */

  --color-line:        #06c755;       /* LINE グリーン */

  /* --- フォント --- */
  --font-en-serif:  'Cormorant Garamond', serif;   /* 英字セリフ（見出し） */
  --font-en-sans:   'DM Sans', sans-serif;          /* 英字サンセリフ（本文・UI） */
  --font-ja-serif:  'Noto Serif JP', serif;          /* 日本語セリフ */
  --font-ja-sans:   'Noto Sans JP', sans-serif;      /* 日本語サンセリフ */

  /* --- スペーシング --- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;
  --space-2xl:  9rem;

  /* --- レイアウト --- */
  --container-max:  1180px;
  --container-pad:  clamp(1.25rem, 5vw, 3rem);

  /* --- 角丸 --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* --- トランジション --- */
  --transition: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* --- ヘッダー高さ（JSスクロール制御用） --- */
  --header-height: 72px;
}


/* ============================================================
  2. リセット・ベーススタイル
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-offwhite);
  color: var(--color-text);
  font-family: var(--font-ja-sans), var(--font-en-sans), sans-serif;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* フォーカスリング（アクセシビリティ） */
:focus-visible {
  outline: 2px solid var(--color-mint-dark);
  outline-offset: 3px;
}


/* ============================================================
  3. タイポグラフィ
============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ja-serif), var(--font-en-serif), serif;
  font-weight: 400;
  line-height: 1.45;
}


/* ============================================================
  4. ユーティリティ・共通クラス
============================================================ */

/* コンテナ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
  5. ヘッダー / ロゴ独立型
  設計メモ:
    - .site-header 自体は透明なラッパー。pointer-events:none で
      ヘッダーの透明エリアをクリックスルーにする
    - .site-logo / .header-nav のみ pointer-events:auto
    - backdrop-filter はスタッキングコンテキストを生成して内部の
      position:fixed 子要素を閉じ込めるため、一切使用しない
      （box-shadow + rgba背景で同等の視覚効果を実現）
============================================================ */

/* ─── サイトヘッダー全体ラッパー ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px;
  /* ヘッダーの透明エリアはクリックスルー。子要素のみ有効 */
  pointer-events: none;
}

/* ─── ロゴ：左上に独立固定 ─── */
.site-logo {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 正円。ハンバーガー(60px)より一回り大きい70pxにして内側に余白を確保 */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  padding: 0;
  /* 背景付きで視認性確保（backdrop-filter 不使用） */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.80);
  box-shadow: 0 8px 28px rgba(44, 44, 42, 0.09);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.site-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(44, 44, 42, 0.13);
}

/* テキストロゴ（logo.png がない場合のフォールバック） */
.site-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.site-logo__en {
  font-family: var(--font-en-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.site-logo__ja {
  font-family: var(--font-ja-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--color-text-light);
}

/* ロゴ画像を使う場合 */
.site-logo__img {
  display: block;
  height: 40px;
  width: 40px;             /* 70px円の中に40px：周囲に余白がつく */
  max-width: none;
  object-fit: contain;
}

/* ─── ナビゲーションバー：右寄せ・ピル型 ─── */
.header-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.80);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(44, 44, 42, 0.09);
}

/* ─── PC用ナビリンク一覧 ─── */
.header-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav__list a {
  font-family: var(--font-en-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-mid);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  transition: color var(--transition), background-color var(--transition);
  white-space: nowrap;
}

.header-nav__list a:hover,
.header-nav__list a.is-current {
  color: var(--color-text);
  background-color: var(--color-cream);
}

/* ─── PC用CTAボタン ─── */
.header-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ja-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
  background-color: var(--color-mint);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  white-space: nowrap;
  transition: background-color var(--transition), transform var(--transition);
}

.header-cta:hover {
  background-color: var(--color-mint-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* ─── ハンバーガーボタン（スマホのみ表示） ─── */
/* 3本線は ::before / background-image / ::after の3層で描画。button は空要素 */
/* 背景色：ミントグリーン（#98DBC6）、3本線：白 */
.menu-button {
  display: none; /* PC非表示 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-mint);          /* ミントグリーン背景 */
  box-shadow: 0 2px 16px rgba(44, 44, 42, 0.13);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.menu-button:hover {
  background: var(--color-mint-dark);     /* ホバー時：ミント濃いめ */
  transform: scale(1.05);
  box-shadow: 0 4px 22px rgba(44, 44, 42, 0.18);
}

/* 上線（::before）/ 下線（::after）/ 中線（background-image）*/
/* 3本線の色：白（ミント背景に合わせて） */
.menu-button::before,
.menu-button::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: var(--color-white);         /* 白の線 */
  border-radius: 999px;
  translate: -50% 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease;
}

/* 上線：中央から -6px */
.menu-button::before {
  top: calc(50% - 6px);
}

/* 下線：中央から +6px */
.menu-button::after {
  top: calc(50% + 4.5px);
}

/* 中線：background-image で描画（白・ミント背景用） */
.menu-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='1.5'%3E%3Crect width='22' height='1.5' rx='999' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}

/* 開いたとき：上線・下線が × に変形、中線はフェードアウト */
.menu-button[aria-expanded="true"] {
  /* background-imageの中線を透明化（opacity不可のためSVG側で透明に） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='1.5'%3E%3Crect width='22' height='1.5' rx='999' fill='none'/%3E%3C/svg%3E");
}

.menu-button[aria-expanded="true"]::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-button[aria-expanded="true"]::after {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}


/* ============================================================
  6. グローバルメニュー（全画面オーバーレイ）/ 閉じるボタン
============================================================ */

/* ─── グローバルメニュー ─── */
.global-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 80px 10vw 60px;
  list-style: none;
  /* すりガラス風（backdrop-filterなし・不透明度で対応） */
  background: rgba(250, 250, 248, 0.97);
  /* 非表示状態 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* メニューアイテム */
.global-menu li {
  width: 100%;
  overflow: hidden;
}

/* メニューリンク本体 */
.global-menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;                        /* 18px → 14px：テキスト縮小に合わせて詰める */
  color: var(--color-text);
  text-decoration: none;
  /* stagger：デフォルトは下にずれて非表示 */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 下ボーダーライン */
.global-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(44, 44, 42, 0.1);
}

/* ホバー時のミントアンダーライン */
.global-menu a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-mint-dark);
  transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.global-menu a:hover::before,
.global-menu a.is-current::before {
  width: 100%;
}

/* メニューが開いたらstaggerで順番にフェードイン */
.global-menu.is-open li:nth-child(1) a { opacity: 1; transform: none; transition-delay: 0.06s; }
.global-menu.is-open li:nth-child(2) a { opacity: 1; transform: none; transition-delay: 0.12s; }
.global-menu.is-open li:nth-child(3) a { opacity: 1; transform: none; transition-delay: 0.18s; }
.global-menu.is-open li:nth-child(4) a { opacity: 1; transform: none; transition-delay: 0.24s; }
.global-menu.is-open li:nth-child(5) a { opacity: 1; transform: none; transition-delay: 0.30s; }
.global-menu.is-open li:nth-child(6) a { opacity: 1; transform: none; transition-delay: 0.36s; }

/* 連番 */
.global-menu__num {
  font-family: var(--font-en-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-mint-dark);
  letter-spacing: 0.08em;
  line-height: 1;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 6px;
  transition: color var(--transition);
}

/* メニューテキスト */
/* サイズ・太さ・色を抑えて、主張しすぎない落ち着いたトーンに */
.global-menu__text {
  font-family: var(--font-ja-sans);
  font-size: clamp(18px, 4.5vw, 28px);   /* 26〜44px → 18〜28px に縮小 */
  font-weight: 400;                        /* 600（太字）→ 400（レギュラー） */
  color: var(--color-text-mid);            /* チャコール → サブテキスト色 */
  letter-spacing: 0.04em;
  line-height: 1.3;
  transition: color var(--transition), letter-spacing 0.3s ease;
}

.global-menu a:hover .global-menu__text,
.global-menu a.is-current .global-menu__text {
  color: var(--color-mint-dark);
  letter-spacing: 0.06em;
}

/* 矢印アイコン（疑似要素で描画・innerHTML不使用） */
.global-menu__arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(44, 44, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--transition), border-color var(--transition),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* → の横線 */
.global-menu__arrow::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--transition);
}

/* → の矢尻 */
.global-menu__arrow::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  right: 9px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.global-menu a:hover .global-menu__arrow,
.global-menu a.is-current .global-menu__arrow {
  background: var(--color-mint-dark);
  border-color: var(--color-mint-dark);
  color: var(--color-white);
  transform: translateX(4px);
}

/* ─── 閉じるボタン：ハンバーガーと同座標に固定 ─── */
/* × アイコンは ::before / ::after で描画。CLOSE文字は ::after の content で表示 */
/* position:fixed で header-nav のスタッキングに依存しない独立配置 */
.menu-close-button {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 101;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 16px rgba(44, 44, 42, 0.13);
  cursor: pointer;
  padding: 0;
  /* 非表示状態 */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8) rotate(-90deg);
  transition: opacity 0.28s ease,
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--transition);
}

/* メニューが開いているときだけ表示（body.menu-open を JS で付与） */
body.menu-open .menu-close-button {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) rotate(0deg);
  transition-delay: 0.1s;
}

.menu-close-button:hover {
  background: var(--color-white);
  transform: scale(1.05) rotate(0deg) !important;
}

/* × アイコン：上線（::before）・下線（::after）で描画 */
.menu-close-button::before,
.menu-close-button::after {
  content: '';
  position: absolute;
  top: calc(50% - 6px); /* CLOSE文字の高さ分を上にオフセット */
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 999px;
  translate: -50% 0;
}

.menu-close-button::before { transform: rotate(45deg); }
.menu-close-button::after  { transform: rotate(-45deg); }


/* body.menu-open 中はスクロールロック */
body.menu-open { overflow: hidden; }


/* ============================================================
  7. セクション共通見出し
============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header--left {
  text-align: left;
}

/* 英字大見出し */
.section-header__en {
  font-family: var(--font-en-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-beige-mid);
  line-height: 1;
  margin-bottom: -0.3em; /* 日本語見出しに重なるようオフセット */
}

/* 日本語見出し */
.section-header__ja {
  font-family: var(--font-ja-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text);
  position: relative;
  display: inline-block;
}

/* 日本語見出し下のミントライン */
.section-header__ja::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background-color: var(--color-mint);
  margin: 0.6rem auto 0;
}

.section-header--left .section-header__ja::after {
  margin-left: 0;
}

/* 説明文 */
.section-header__desc {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-text-mid);
  line-height: 1.9;
}

/* ライトセクション用（CTA section など） */
.section-header--light .section-header__en {
  color: var(--color-beige-mid); /* ライト背景なので通常のベージュ */
}

.section-header--light .section-header__ja {
  color: var(--color-text);
}

.section-header--light .section-header__ja::after {
  background-color: var(--color-mint);
}


/* ============================================================
  8. Hero / ファーストビュー
  構造: 文字入りの完成ビジュアルを横幅いっぱいに1枚表示
    - PC・タブレット（640px〜）: hero.png（1672×941 横長）
    - スマホ（〜639px）: sp-hero.png（1024×1536 縦長）
      → 出し分けは front-page.php の <picture> が担当
    - SEO用テキストは front-page.php 側で .visually-hidden 保持
    - 画像全体が相談CTAリンク（.hero-link）。ボタンは置かない
============================================================ */

/* ─── セクション全体：左右余白なしのフルブリード ─── */
/* 固定ヘッダー分の上部padding（＝画像の上の隙間）を、画像上端の色を
   引き伸ばした横グラデーションで埋め、画像がそのまま上へ続くように見せる。
   グラデーションの色は hero.png 上端をサンプリングした値（左=クリーム→右=空色）。 */
.hero {
  position: relative;
  padding: var(--header-height) 0 0;
  background: linear-gradient(
    90deg,
    #fbfaf6 0%,
    #f4f4f4 20%,
    #e5ecf0 40%,
    #d0edfd 55%,
    #bfe8fc 70%,
    #c9eafb 85%,
    #cbebfc 100%
  );
}

/* スマホ（sp-hero.png 表示時）は上端の色分布が異なるため差し替え（左=水色〜白→右=空色） */
@media (max-width: 639px) {
  .hero {
    background: linear-gradient(
      90deg,
      #cbddeb 0%,
      #eceef0 20%,
      #dce3ea 40%,
      #d0eaf9 55%,
      #e0f1fb 70%,
      #d0ecf9 85%,
      #c1e5f8 100%
    );
  }
}

/* ─── SEO用テキスト非表示（スクリーンリーダーには読ませる） ─── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ─── ビジュアル本体：横幅いっぱい ─── */
.hero-visual {
  margin: 0;
  animation: softRise 0.9s ease both;
}

/* ─── 画像全体をCTAリンクに ─── */
.hero-link {
  display: block;
}

.hero-link:focus-visible {
  outline: 3px solid var(--color-mint-dark);
  outline-offset: -3px;                  /* 全幅なので内側に表示 */
}

.hero-visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================
  ボタン統一ベース
  .button は Hero 内で使用しているクラス名。
  .btn と共通のスタイルを持つため、セレクタを並べて一本化する。
  形状：pill型（border-radius:999px）で統一
  強弱は modifier クラスで制御：
    強  → .btn--primary（ミント塗り）/ .btn--secondary（イエロー塗り）
    中  → .btn--outline（枠線のみ）
    弱  → .cta-text-link（アンダーラインテキスト）
    行動 → .btn--line（LINE グリーン）
============================================================ */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.8rem;
  border: 1.5px solid transparent;
  border-radius: 999px;                  /* pill型に統一 */
  font-family: var(--font-ja-sans);
  font-size: 0.88rem;
  font-weight: 500;                      /* 700→500：押し売り感を抑える */
  letter-spacing: 0.06em;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.btn:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(44, 44, 42, 0.10);
}

/* ── 強：プライマリ（ミント塗り） ── */
.btn--primary,
.button--primary {
  background-color: var(--color-mint-dark);
  color: var(--color-white);
  border-color: var(--color-mint-dark);
}

.btn--primary:hover,
.button--primary:hover {
  background-color: var(--color-mint);
  border-color: var(--color-mint);
  color: var(--color-text);
}

/* ── 強：セカンダリ（イエロー塗り）Hero のみ ── */
.btn--secondary,
.button--secondary {
  background-color: var(--color-yellow);
  color: var(--color-text);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(44, 44, 42, 0.07);
}

.btn--secondary:hover,
.button--secondary:hover {
  background-color: var(--color-yellow-dark);
  border-color: var(--color-yellow-dark);
  color: var(--color-white);
}

/* ── 中：アウトライン（枠線のみ） ── */
.btn--outline,
.button--outline {
  background-color: transparent;
  color: var(--color-text-mid);
  border-color: var(--color-beige-mid);
}

.btn--outline:hover,
.button--outline:hover {
  background-color: var(--color-mint-light);
  border-color: var(--color-mint-dark);
  color: var(--color-text);
}

/* ── ゴースト（outline と統合） ── */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-mid);
  border-color: var(--color-beige-mid);
  border-radius: 999px;
}

.btn--ghost:hover {
  background-color: var(--color-mint-light);
  border-color: var(--color-mint-dark);
  color: var(--color-text);
}

/* ── LINE ボタン ── */
.btn--line {
  background-color: var(--color-line);
  color: var(--color-white);
  border-color: var(--color-line);
}

.btn--line:hover {
  background-color: #05a847;
  border-color: #05a847;
}

/* ── ラージ（Contact CTAなど） ── */
.btn--large {
  padding: 0.9rem 2.4rem;
  font-size: 0.92rem;
  min-height: 52px;
}

/* ─── キーフレーム ─── */
@keyframes softRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none; }
}



/* ============================================================
  9. Intro
============================================================ */
.intro {
  padding: var(--space-xl) 0;
  text-align: center;
  /* 薄いグラデーション背景でひとつ格上げ */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(152, 219, 198, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 40%, rgba(230, 215, 42,  0.08), transparent 50%),
    var(--color-white);
  position: relative;
  overflow: hidden;
}

/* 上下の区切り細線（ミント） */
.intro::before,
.intro::after {
  content: '';
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: min(480px, 70%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-mint) 30%,
    var(--color-mint) 70%,
    transparent
  );
}
.intro::before { top: 0; }
.intro::after  { bottom: 0; }

.intro__lead {
  font-family: var(--font-ja-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  position: relative;
  display: inline-block;
}

/* リードテキスト両脇の引用飾り線 */
.intro__lead::before,
.intro__lead::after {
  content: '';
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2rem;
  height: 1px;
  background: var(--color-mint-dark);
  opacity: 0.5;
}
.intro__lead::before { right: calc(100% + 1rem); }
.intro__lead::after  { left:  calc(100% + 1rem); }

.intro__body {
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  color: var(--color-text-mid);
  line-height: 2.1;
}

/* ============================================================
  10. Works
============================================================ */
.works {
  padding: var(--space-xl) 0;
  background-color: var(--color-offwhite);
}

/* カードグリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* 通常カード */
.works-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-beige);
  transition: transform var(--transition), box-shadow var(--transition);
}

.works-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

.works-card__inner {
  display: block;
  height: 100%;
}

/* ④ アイキャッチ画像：デザイン統一のため非表示 */
.works-card__thumb {
  display: none;
}

.works-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.works-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.works-card__cat {
  font-family: var(--font-en-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mint-dark);
  background-color: var(--color-mint-light);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.7rem;
}

.works-card__title {
  font-family: var(--font-ja-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}

.works-card__desc {
  font-size: 0.82rem;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin-bottom: 0.8rem;
}

.works-card__tech {
  font-family: var(--font-en-sans);
  font-size: 0.72rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--color-beige);
  padding-top: 0.7rem;
  margin-bottom: 0.8rem;
}

.works-card__link {
  font-family: var(--font-en-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--transition);
}

.works-card:hover .works-card__link {
  gap: 0.7rem;
}

/* VIEW ALL カード型CTA */
/* ⑤ VIEW ALL カード：デフォルト（実績2件時）は現状維持 */
.works-card--all {
  background-color: var(--color-cream);
  border-color: var(--color-beige-mid);
  min-height: 100px;
}

.works-card__inner--all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  padding: var(--space-md);
  gap: 0;
  text-align: center;
  transition: background-color var(--transition);
}

.works-card--all:hover .works-card__inner--all {
  background-color: var(--color-beige);
}

/* ⑤ 実績3件＋VIEW ALL の4枚構成：VIEW ALL を全幅・高さ半分で中央配置 */
@media (min-width: 640px) {
  .works-grid:has(.works-card:nth-child(4)) .works-card--all {
    grid-column: 1 / -1;
    min-height: 80px;
  }

  .works-grid:has(.works-card:nth-child(4)) .works-card__inner--all {
    min-height: 100px;
    padding: var(--space-sm) var(--space-md);
  }
}

.works-card--all__en {
  font-family: var(--font-en-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-text-light);
}

.works-card--all__ja {
  font-family: var(--font-ja-sans);
  font-size: 0.85rem;
  color: var(--color-text);
}

.works-card--all__arrow {
  margin-top: 0.3rem;
  color: var(--color-mint-dark);
  font-size: 1rem;
  transition: transform var(--transition);
}

.works-card--all:hover .works-card--all__arrow {
  transform: translateX(5px);
}

.works-card--all__ja {
  font-family: var(--font-ja-sans);
  font-size: 0.85rem;
  color: var(--color-text);
  display: flex;         /* 追加：テキストと矢印を横並び */
  align-items: center;   /* 追加：垂直中央揃え */
  gap: 0.4em;            /* 追加：テキストと矢印の間隔 */
  margin-top: 0.4rem;    /* 追加：英語テキストとの間隔 */
}

/* __arrow は <i> に直接当てる */
.works-card--all__arrow {
  /* margin-top は不要になるので削除 */
  color: var(--color-mint-dark);
  font-size: 1rem;
  transition: transform var(--transition);
}

.works-card--all:hover .works-card--all__arrow {
  transform: translateX(5px);
}

/* ============================================================
  11. Service / ペルソナ誘導カード
  構造: イラスト（上）＋タイトル＋黄色ライン＋説明文（下）のLP風カード
        余白を広く・装飾は最小限で上質に
============================================================ */
.service {
  padding: var(--space-xl) 0;
  background-color: var(--color-white);
}

/* サービス3カード */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.8vw, 2.5rem);
}

.service-item {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--hairline, var(--color-beige));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* イラストエリア：4:3 固定。画像未設置でもクリーム地で高さを確保 */
.service-item__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  background-color: #faf8f1; /* イラストのクリーム背景と揃える */
  overflow: hidden;
}

.service-item__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストエリア：余白をたっぷり */
.service-item__body {
  padding: clamp(1.75rem, 2.6vw, 2.4rem) clamp(1.5rem, 2.2vw, 2rem)
           clamp(2rem, 2.8vw, 2.6rem);
}

.service-item__title {
  font-family: var(--font-ja-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--color-text);
  position: relative;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
}

/* タイトル下の黄色ライン */
.service-item__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.75rem;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-yellow);
  opacity: 0.8;
}

.service-item__desc {
  font-size: 0.87rem;
  color: var(--color-text-mid);
  line-height: 2;
}

/* ── ペルソナ選択エリア（コンパクト版） ──────────────
   Service 直下の「行き先案内」なので余白を絞り、
   アイコン左・テキスト右の横型スリムカードで場所を取らない */
.persona-section {
  background: var(--color-white);
  padding: 0 18px 24px;
}
.persona-section__inner {
  width: min(100%, 1120px);
  margin: 0 auto;
}
.persona-section__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-mid);
  text-align: center;
  margin-bottom: 16px;
}

/* persona-grid：等幅2カラム */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

/* カード：アイコン左・テキスト右の横型
   DOM順（tag → icon → h2 → p → cta）のまま grid 配置で組み替える */
.persona-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 14px;
  row-gap: 3px;
  align-items: start;
  padding: 16px 18px 14px;
  border: 1px solid var(--hairline, var(--color-beige));
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s, border-color 0.3s;
}

/* 上部カラーライン（細く・さりげなく） */
.persona-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.persona-card--active::before {
  background: linear-gradient(90deg, var(--color-mint), var(--color-yellow));
}
.persona-card--locked::before {
  background: var(--color-beige-mid);
}

.persona-card--active:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-mint);
}
.persona-card--locked {
  opacity: 0.55;
  cursor: default;
}

/* アイコン：左列を縦にまたぐ */
.persona-card__icon {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  margin-top: 2px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-mint-light);
  display: grid;
  place-items: center;
  color: var(--color-mint-dark);
  font-size: 0.9rem;
}
.persona-card--locked .persona-card__icon {
  background: var(--color-cream);
  color: var(--color-text-mid);
}

/* タグ：ピルをやめ、小さな英字キャップス風のテキストのみ */
.persona-card__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-mint-dark);
}
.persona-card--locked .persona-card__tag {
  color: var(--color-text-mid);
}

.persona-card h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.persona-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text-mid);
}

.persona-card__cta {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-mint-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.25s;
}
.persona-card--active:hover .persona-card__cta {
  gap: 10px;
}

.persona-card__lock {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-mid);
  background: var(--color-cream);
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid var(--color-beige-mid);
}



/* ============================================================
  12. Strength → 削除（内容は「13. About」の .about-strengths に統合）
============================================================ */


/* ============================================================
  13. About（旧 Strength 統合）
  レイアウト:
    about-intro     : フラットな自己紹介（最大幅 720px・中央寄せ）
                      カード装飾なし。余白とタイポグラフィで構成
                      見出し行の右上に正円の小さな写真をアクセント配置
    about-strengths : 3つの強み。罫線とタイポグラフィのみ（カードなし）
    about-timeline  : 経歴タイムライン（PC＝本文右のサイドバー / SP＝本文下）
  マーカー: Heroと同じ淡いイエロー（.about-accent）
============================================================ */

/* ── セクション全体 ── */
.about {
  padding: var(--space-xl) 0;
  background-color: var(--color-white);
}

/* ── about-body：PC 2カラム（左：自己紹介 / 右：経歴） ── */
.about-body {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* ── about-intro：フラットな自己紹介ブロック ── */
.about-intro {
  max-width: 720px;
  margin-inline: auto;
  min-width: 0;
}

/* 見出し行：左＝ラベル＋見出し / 右＝正円写真 */
.about-intro__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ラベル："About me"（短い罫線＋英字） */
.about-intro__label {
  font-family: var(--font-en-serif);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-mint-dark);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ラベル前の短い線（Introセクション装飾と統一） */
.about-intro__label::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--color-mint-dark);
  opacity: 0.6;
  flex-shrink: 0;
}

/* 見出し（イエローマーカーライン付き） */
.about-intro__heading {
  font-family: var(--font-ja-serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* プロフィール写真：正円・小さめ・アクセント程度の存在感 */
.about-intro__photo {
  margin: 0;
  flex-shrink: 0;
}

.about-intro__photo img {
  width: clamp(96px, 12vw, 128px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(152, 219, 198, 0.45);
}

/* イエローマーカーライン（Hero の .accent と同じ手法） */
.about-accent {
  /* <mark> のデフォルト背景を解除 */
  background: none;
  color: inherit;
  position: relative;
  display: inline;
  white-space: nowrap;
}

.about-accent::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--color-yellow);
  border-radius: 3px;
  z-index: -1;
  opacity: 0.55;
}

/* 本文 */
.about-intro__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-intro__body p {
  font-size: clamp(0.88rem, 1.4vw, 0.95rem);
  color: var(--color-text-mid);
  line-height: 2.1;
  text-align: left;
}

/* 本文内の強調（<em>） */
.about-intro__body em {
  font-style: normal;
  color: var(--color-mint-dark);
  font-weight: 500;
}

/* 署名：本文の締め。手紙の結びのように、左から細い罫線を敷いて右寄せ */
.about-intro__sign {
  margin-top: 1.75rem;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.8rem;
}

/* 署名前の細罫線（さりげない「結び」の演出） */
.about-intro__sign::before {
  content: '';
  flex: 1;
  max-width: 9rem;
  height: 1px;
  background: var(--hairline, var(--color-beige));
  align-self: center;
  margin-right: 0.5rem;
}

.about-intro__sign-ja {
  font-family: var(--font-ja-serif);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--color-text);
}

.about-intro__sign-en {
  font-family: var(--font-en-serif);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-text-light);
}

/* ── about-strengths：3つの強み（罫線とタイポのみ・カードなし） ── */
.about-strengths {
  max-width: 1040px;
  margin: var(--space-lg) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline, var(--color-beige));
  padding-top: clamp(2rem, 4vw, 3rem);
}

.about-strengths__item {
  padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--hairline, var(--color-beige));
}

.about-strengths__item:first-child {
  border-left: none;
}

.about-strengths__en {
  font-family: var(--font-en-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-mint-dark);
  margin-bottom: 0.5rem;
}

.about-strengths__title {
  font-family: var(--font-ja-serif);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 0.7rem;
}

.about-strengths__desc {
  font-size: 0.84rem;
  color: var(--color-text-mid);
  line-height: 2;
}

/* ── タイムライン：本文の右に添えるサイドバー（フラット） ──
   縦の細罫線で本文と区切り、雑誌のプロフィール欄のように */
.about-timeline {
  text-align: left;
  border-left: 1px solid var(--hairline, var(--color-beige));
  padding-left: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 0.35rem;
}

/* タイムラインタイトル：About me ラベルと同じ言語（短い罫線＋英字） */
.about-timeline__title {
  font-family: var(--font-en-serif);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-mint-dark);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.about-timeline__title::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--color-mint-dark);
  opacity: 0.6;
  flex-shrink: 0;
}

/* タイムラインリスト */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各アイテム：左縦線 */
.timeline-item {
  position: relative;
  padding-left: 1.5rem;
  padding-bottom: 1.5rem;
  border-left: 1.5px solid rgba(152, 219, 198, 0.4);
}

.timeline-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* ドット（ミント塗りつぶし円） */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-mint);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1.5px var(--color-mint);
}

/* 期間ラベル：小さな英字キャップスで編集的に */
.timeline-period {
  font-family: var(--font-en-sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light);
  display: block;
  margin-bottom: 0.25rem;
}

/* 項目タイトル */
.about-timeline h5 {
  font-family: var(--font-ja-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-mid);
  margin: 0;
  line-height: 1.7;
}

/* 現在（最後の項目）だけ、さりげなく強調：黄色ドット＋濃い文字 */
.timeline-item:last-child::before {
  background-color: var(--color-yellow);
  box-shadow: 0 0 0 1.5px var(--color-yellow);
}

.timeline-item:last-child .timeline-period {
  color: var(--color-mint-dark);
}

.timeline-item:last-child h5 {
  color: var(--color-text);
  font-weight: 500;
}

/* ── アクションボタン群 ── */
.about-body__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: var(--space-md);
}


/* ============================================================
  13-R. About レスポンシブ
============================================================ */

/* ── タブレット（〜1024px）：右カラムを少し細く ── */
@media (max-width: 1024px) {
  .about-body {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 2.5rem;
  }
}

/* ── スマートフォン（〜767px） ── */
@media (max-width: 767px) {

  /* 2カラム → 縦積み（自己紹介 → タイムライン） */
  .about-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* 強み：縦積みに切り替え。縦罫線 → 横罫線 */
  .about-strengths {
    grid-template-columns: 1fr;
    max-width: 560px;
    padding-top: 0;
    border-top: none;
  }

  .about-strengths__item {
    padding-inline: 0;
    padding-block: 1.5rem;
    border-left: none;
    border-top: 1px solid var(--hairline, var(--color-beige));
  }

  .about-strengths__item:first-child {
    border-top: 1px solid var(--hairline, var(--color-beige));
  }

  /* タイムライン：縦罫線をやめ、上罫線で本文と区切る */
  .about-timeline {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline, var(--color-beige));
    padding-top: 2rem;
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
  }

  /* 折り返し防止のための改行制御 */
  .about-accent {
    white-space: normal;
  }
}

/* ── 小スマートフォン（〜480px） ── */
@media (max-width: 480px) {
  .about-body__actions {
    flex-direction: column;
    align-items: center;
  }
}
/* ============================================================
  14. Blog
============================================================ */
/* ── セクション本体（padding が消えていたのを修正） ── */
.blog {
  padding: var(--space-xl) 0;
  background-color: var(--color-offwhite);
}

/* ── カテゴリタブ（ブログ見出し下） ── */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.blog-cat {
  font-family: var(--font-ja-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-mint-dark);
  background-color: var(--color-mint-light);
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-cat:hover,
.blog-cat:focus-visible {
  color: var(--color-white);
  background-color: var(--color-mint-dark);
}

/* ── 記事カードグリッド（PC：3カラム） ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* 横スクロール矢印ナビ：PC では非表示、SP で表示（メディアクエリ内で display:flex） */
.blog-scroll-nav {
  display: none;
}

/* ── カード本体 ── */
.blog-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-beige);
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

.blog-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ── カテゴリ別カラー帯（サムネイル代替装飾） ── */
/* 高さ固定の帯。::after で右下にドット模様を重ねる */
.blog-card__accent {
  height: 40px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* ドット格子模様（::before） */
.blog-card__accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.45) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  background-position: 7px 7px;
}

/* 右側の丸い装飾（::after） */
.blog-card__accent::after {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

/* カラー別 */
/* AI活用：ミント */
.blog-card__accent--ai {
  background: linear-gradient(135deg, #e6f7f1 0%, #c9eee2 100%);
}

/* Web制作：イエロー */
.blog-card__accent--web {
  background: linear-gradient(135deg, #fffbe0 0%, #f3edb8 100%);
}

/* 現場・業務改善：ピンク */
.blog-card__accent--field {
  background: linear-gradient(135deg, #fdeef2 0%, #f7ced8 100%);
}

/* ── カードボディ ── */
.blog-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.blog-card__date {
  font-family: var(--font-en-sans);
  font-size: 0.72rem;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.blog-card__cat {
  font-family: var(--font-ja-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-mint-dark);
  background-color: var(--color-mint-light);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
}

.blog-card__title {
  font-family: var(--font-ja-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 0.7rem;
}

.blog-card__excerpt {
  font-size: 0.8rem;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin-bottom: 1rem;
  flex: 1;
}

.blog-card__link {
  font-family: var(--font-en-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--transition);
  margin-top: auto;
}

.blog-card:hover .blog-card__link {
  gap: 0.7rem;
}


/* ============================================================
  15. Contact CTA（封筒デザイン）
============================================================ */
.contact-cta {
  padding: var(--space-xl) 0;
  background-color: var(--color-section-dark); /* ミント極薄グリーン */
  border-top: 1px solid var(--color-beige);
}

.contact-cta__inner {
  display: flex;
  align-items: center;
  gap: 5rem;
  justify-content: center;
}

/* ── 封筒CSS ── */
.envelope {
  flex-shrink: 0;
  width: 180px;
  position: relative;
}

/* 封筒本体 */
.envelope__body {
  width: 180px;
  height: 130px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-beige-mid);
  border-radius: var(--radius-sm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* V字模様（底の折り線） */
.envelope__body::before,
.envelope__body::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-style: solid;
}

.envelope__body::before {
  left: 0;
  border-width: 0 0 65px 90px;
  border-color: transparent transparent var(--color-mint-light) transparent;
}

.envelope__body::after {
  right: 0;
  border-width: 0 90px 65px 0;
  border-color: transparent transparent var(--color-mint-light) transparent;
}

/* ふた（三角） */
.envelope__flap {
  width: 180px;
  height: 0;
  border-style: solid;
  border-width: 80px 90px 0;
  border-color: var(--color-beige-mid) transparent transparent;
  position: relative;
  z-index: 2;
  margin-bottom: -2px;
  transition: transform 0.4s ease;
}

.envelope:hover .envelope__flap {
  transform: rotateX(180deg);
  transform-origin: top center;
}

/* 封筒内の手紙 */
.envelope__letter {
  width: 130px;
  height: 80px;
  background-color: var(--color-mint-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease 0.1s;
}

.envelope:hover .envelope__letter {
  transform: translateY(-16px);
}

.envelope__letter-text {
  font-family: var(--font-ja-serif);
  font-size: 0.65rem;
  color: var(--color-mint-dark);
  text-align: center;
  line-height: 1.6;
}

/* CTAテキスト・ボタン */
.contact-cta__body {
  max-width: 500px;
}

.contact-cta__lead {
  font-family: var(--font-ja-serif);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 2.1;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.contact-cta__sub {
  font-size: 0.82rem;
  color: var(--color-text-mid);
  line-height: 1.9;
  margin-bottom: var(--space-lg);
}

.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ── 封筒SVGリンク ── */
.envelope-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.envelope-link:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 10px;
  border-radius: var(--radius-sm);
}

/* 封筒SVGラッパー */
.envelope-wrap {
  width: clamp(240px, 55vw, 400px);
  margin: 0 auto;
}

/* SVG本体 */
.envelope-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 20px rgba(44, 44, 42, 0.07));
  transition: filter var(--transition-slow);
}

.envelope-link:hover .envelope-svg,
.envelope-link:focus-visible .envelope-svg {
  filter: drop-shadow(0 14px 36px rgba(152, 219, 198, 0.22))
          drop-shadow(0 4px 10px rgba(44, 44, 42, 0.09));
}

.envelope-link:active .envelope-svg {
  filter: drop-shadow(0 4px 14px rgba(152, 219, 198, 0.18));
  transition-duration: 0.15s;
}

/* env-flap の transform-origin：HTML側インラインstyleを廃止してCSS管理 */
.env-flap-back,
.env-flap-shape {
  transform-origin: 150px 40px;
}

/* SVG各パーツ */
.env-body        { fill: #ffffff; stroke: var(--color-beige-mid); stroke-width: 1; }
.env-side-l,
.env-side-r      { fill: #EEEEED; stroke: var(--color-beige-mid); stroke-width: 0.7; }
.env-base        { fill: #E8E8E5; stroke: var(--color-beige-mid); stroke-width: 0.7; }
.env-body-stroke { fill: none;    stroke: var(--color-beige-mid); stroke-width: 1; }
.env-accent      { stroke: var(--color-mint); stroke-width: 1.5; stroke-linecap: round; }

.env-flap-shadow {
  fill: #E0E0DC;
  opacity: 0;
  transition: opacity var(--transition);
}
.envelope-link:hover .env-flap-shadow,
.envelope-link:focus-visible .env-flap-shadow {
  opacity: 1;
}

.env-flap-shape {
  fill: #ffffff;
  stroke: var(--color-beige-mid);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), fill var(--transition);
}

.env-flap-back {
  fill: var(--color-mint-light);
  stroke: #BEE8D6;
  stroke-width: 0.7;
  stroke-linejoin: round;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.25s ease;
}

.envelope-link:hover .env-flap-shape,
.envelope-link:focus-visible .env-flap-shape {
  transform: rotateX(160deg);
  fill: #F8F8F6;
}

.envelope-link:hover .env-flap-back,
.envelope-link:focus-visible .env-flap-back {
  transform: rotateX(160deg);
  opacity: 1;
}

.envelope-link:active .env-flap-shape {
  transform: rotateX(90deg);
  transition-duration: 0.18s;
}

.envelope-link:active .env-flap-back {
  transform: rotateX(90deg);
  opacity: 0.7;
  transition-duration: 0.18s;
}

/* ラベル（"Feel free to get in touch."） */
.envelope-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  font-family: var(--font-en-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-mid);
  transition: color var(--transition), gap var(--transition);
}

.envelope-link:hover .envelope-label,
.envelope-link:focus-visible .envelope-label {
  color: var(--color-text);
  gap: 0.85rem;
}

/* ラベル右側の矢印ライン */
.envelope-label-arrow {
  display: inline-block;
  width: 18px;
  height: 1px;
  background-color: var(--color-mint);
  position: relative;
  transition: width var(--transition);
}

.envelope-label-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-mint);
  border-top: 1.5px solid var(--color-mint);
  transform: rotate(45deg);
}

.envelope-link:hover .envelope-label-arrow {
  width: 26px;
}

/* reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .env-flap-shape,
  .env-flap-back,
  .env-flap-shadow,
  .envelope-svg,
  .envelope-label,
  .envelope-label-arrow {
    transition: none;
  }

  .envelope-wrap.is-nudging,
  .envelope-wrap.is-nudging .env-flap-shape {
    animation: none;
  }
}


/* ============================================================
  16. Footer
============================================================ */
.site-footer {
  background-color: var(--color-footer-bg); /* ミント極薄グリーン */
  padding: var(--space-lg) 0 var(--space-md);
  border-top: 1px solid var(--color-beige);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ロゴは右配置（order で並び替え）／ナビは左 */
.footer-logo {
  order: 2;
}

.footer-logo a {
  display: inline-flex;
}

.footer-logo__img {
  display: block;
  width: 72px;
  height: auto;
}

.footer-nav {
  order: 1;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* スマートなリンク：大文字＋広めの字間、下線はホバーで細く出す */
.footer-nav a {
  position: relative;
  font-family: var(--font-en-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: color var(--transition);
}

.footer-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.footer-nav a:hover {
  color: var(--color-text);
}

.footer-nav a:hover::after {
  transform: scaleX(1);
}

/* 左ブロック：ナビ＋法的リンクを縦に積む（PC:ロゴの左 / スマホ:ロゴの上） */
.footer-links {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

/* 法的ページリンク：ナビリンクのすぐ下に、同じ並び（左寄せ）で控えめに */
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem 1.5rem;
}
.footer-legal a {
  font-family: var(--font-ja-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-text-mid);
  transition: color var(--transition);
}
.footer-legal a:hover {
  color: var(--color-mint-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copy {
  text-align: center;
  border-top: 1px solid var(--color-beige);
  padding-top: var(--space-md);
}

.footer-copy small {
  font-family: var(--font-en-sans);
  font-size: 0.7rem;
  color: var(--color-text-light);
  letter-spacing: 0.1em;
}


/* ============================================================
  17. ボタン
  ※ .btn / .button の定義はセクション8（Hero）内にまとめて記述済み。
     ここでは追加 modifier のみ管理する。
============================================================ */

/* ── Contact CTA セクション用ラージ（btn--large は統一定義済み） ── */


/* ============================================================
  18. CTA テキストリンク・セクションCTAラッパー
============================================================ */

/* ── 弱いCTA / リンク：アンダーラインテキスト ── */
.cta-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ja-sans);
  font-size: 0.85rem;
  color: var(--color-text-mid);          /* 主張しすぎない色 */
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-beige-mid);
  padding-bottom: 0.2rem;
  transition: gap var(--transition), border-color var(--transition),
              color var(--transition);
}

.cta-text-link:hover {
  gap: 0.8rem;
  border-color: var(--color-mint-dark);
  color: var(--color-text);
}

/* セクションCTAラッパー：各強弱で上余白を調整 */
.section-cta {
  margin-top: var(--space-md);           /* 共通：上余白は控えめ（押し売り感を抑える） */
  text-align: center;
}

/* 中くらいCTA（Works後・Service後）：アウトラインボタン */
.section-cta--mid {
  margin-top: var(--space-md);
}

/* Price後：2ボタン横並び（左＝詳しく見る / 右＝見積もりを相談する）
   .btn 共通ベースで高さ・パディングは同一。min-width を揃えて同じ大きさに見せる。
   狭い画面では自然に縦積み。 */
.price-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
}
.price-cta-buttons .btn {
  min-width: 210px;
  max-width: 100%;
}
@media (max-width: 400px) {
  .price-cta-buttons .btn { min-width: 0; width: 100%; }
}

/* 弱いCTA（About後）/ リンク（Blog後）：テキストリンク */
.section-cta--weak {
  margin-top: var(--space-sm);
}


/* ============================================================
  19. アニメーション・スクロール
============================================================ */

/* フェードイン（IntersectionObserver で .is-visible を付与） */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延クラス */
.js-fade--delay-1 { transition-delay: 0.1s; }
.js-fade--delay-2 { transition-delay: 0.2s; }
.js-fade--delay-3 { transition-delay: 0.3s; }


/* ============================================================
  20. レスポンシブ
============================================================ */

/* ── タブレット（〜1024px） ── */
@media (max-width: 1024px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-cta__inner {
    gap: 3rem;
  }
}

/* ── ②ナビ切り替え：640px未満でハンバーガーメニュー ── */
/* 640px以上：PC用ナビリンク・CTAを表示、ハンバーガーを非表示 */
@media (min-width: 640px) {
  .header-nav__list,
  .header-cta {
    display: flex;
  }

  .menu-button {
    display: none;
  }
}

/* 640px未満：ハンバーガーを表示、PC用ナビを非表示 */
@media (max-width: 639px) {
  /* PC用ナビリンクとCTAを非表示 */
  .header-nav__list,
  .header-cta {
    display: none;
  }

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

  /* ナビバーのpadding調整（ハンバーガーのみになるため） */
  .header-nav {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  /* ロゴはベースの60px正円（ハンバーガーと同サイズ）をそのまま使用 */
}

/* ── スマートフォン（〜768px） ── */
@media (max-width: 768px) {
  :root {
    --space-xl: 4rem;
    --space-lg: 2.5rem;
  }

  /* ペルソナ：SP では縦積み。幅は service-list に揃える */
  .persona-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  /* Works */
  .works-grid {
    grid-template-columns: 1fr;
  }

  /* ⑤ スマホ：縦並びのためVIEW ALLカードの高さを半分に縮小 */
  .works-card--all {
    min-height: 100px;
  }

  .works-card__inner--all {
    min-height: 100px;
    padding: var(--space-sm) var(--space-md);
  }

  /* Service */
  .service-list {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Blog：SP では横スクロール（カード3枚を横並びで見せる） */
  /* .blog セクション自体は container の padding を打ち消してフル幅スクロールに */
  .blog .container {
    padding-inline: 0;
  }

  /* section-header と section-cta だけ padding を戻す */
  .blog .section-header,
  .blog .section-cta {
    padding-inline: var(--container-pad);
  }

  /* グリッドを横スクロール列に切り替え */
  .blog-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--container-pad);
    /* スクロールバーを非表示（見た目をすっきり） */
    scrollbar-width: none;
  }

  .blog-grid::-webkit-scrollbar {
    display: none;
  }

  /* カードを固定幅で並べる */
  .blog-card {
    flex: 0 0 76vw; /* 画面幅の76%。隣のカードが少し見える */
    max-width: 300px;
    scroll-snap-align: start;
  }

  /* ⑦ ブログ横スクロール矢印ナビ：SP時のみ表示（中央配置に修正） */
  .blog-scroll-nav {
    display: flex;
    align-items: center;
    justify-content: center;  /* ⑦ flex-end → center */
    gap: 8px;
    padding-inline: var(--container-pad);
    margin-bottom: 12px;
  }

  .blog-scroll-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-beige-mid);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition), border-color var(--transition),
                transform var(--transition);
  }

  .blog-scroll-btn:hover {
    background: var(--color-white);
    border-color: var(--color-mint-dark);
    transform: scale(1.08);
  }

  /* 無効状態（先頭・末尾） */
  .blog-scroll-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
  }

  /* CTA */
  .contact-cta__inner {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .envelope {
    display: none; /* SP では封筒を非表示にしてスッキリ */
  }

  .contact-cta__actions {
    justify-content: center;
  }

  /* Footer：縦積み。ロゴは右、ナビは1行で全幅に均等配置 */
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  /* 左ブロックを全幅に。ナビは1行均等、法的リンクは左寄せで折り返し */
  .footer-links {
    width: 100%;
    align-items: stretch;
  }

  .footer-logo {
    align-self: flex-end;                /* ロゴを右端へ */
  }

  .footer-nav ul {
    flex-wrap: nowrap;                   /* iPhone SEでも折り返さず1行 */
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* 6項目が375pxに収まるよう可変縮小＋字間を詰める */
  .footer-nav a {
    font-size: clamp(0.62rem, 2.9vw, 0.78rem);
    letter-spacing: 0.03em;
  }
}

/* ── 小スマートフォン（〜480px） ── */
@media (max-width: 480px) {
  .contact-cta__actions {
    flex-direction: column;
    align-items: center;
  }

  .about-body__actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ── 封筒SVGアニメーション：ナッジ ──
   IntersectionObserver等から .is-nudging を付与して使用 */
@keyframes envelope-nudge {
  0%   { transform: translateY(0)    rotate(0deg); }
  20%  { transform: translateY(-7px) rotate(-1.2deg); }
  45%  { transform: translateY(-4px) rotate(0.7deg); }
  65%  { transform: translateY(-8px) rotate(-0.5deg); }
  85%  { transform: translateY(-2px) rotate(0.3deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

@keyframes envelope-flap-peek {
  0%   { transform: rotateX(0deg); }
  30%  { transform: rotateX(-30deg); }
  55%  { transform: rotateX(-8deg); }
  75%  { transform: rotateX(-22deg); }
  100% { transform: rotateX(0deg); }
}

.envelope-wrap.is-nudging {
  animation: envelope-nudge 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.envelope-wrap.is-nudging .env-flap-shape {
  animation: envelope-flap-peek 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ============================================================
   ★ 編集的エレベーション・レイヤー v2（デザインのみ・上書き）
   ねらい：「制作費100万円クラス」の日本のサイトに共通する作法へ。
     ① 余白（間）を大胆に  ② 明朝＋広い字間の上質タイポ
     ③ 引き算（浮遊図形・ブロブ・回転・常時アニメを排除）
     ④ 直線基調の“額装”ビジュアル  ⑤ 抑制されたモーション
     ⑥ ナンバリング・細い罫線で編集的な個性を出す
   制約：緑＝信頼のベース、イエロー＝アクセントを維持（色数は増やさない）。
        テキスト・構造・配色体系は不変。このブロックを削除すれば元に戻る。
============================================================ */
:root {
  /* やわらかく重ねた影（上品なカード影） */
  --shadow-xs: 0 1px 2px rgba(44, 44, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(44, 44, 42, 0.05), 0 1px 2px rgba(44, 44, 42, 0.04);
  --shadow-md: 0 6px 18px rgba(44, 44, 42, 0.06), 0 2px 6px rgba(44, 44, 42, 0.04);
  --shadow-lg: 0 22px 52px rgba(44, 44, 42, 0.10), 0 8px 18px rgba(44, 44, 42, 0.05);

  /* 余白を一段リッチに（「間」をたっぷり） */
  --space-xl: clamp(5.5rem, 10vw, 9rem);
  /* 角丸をやわらかく統一（反復） */
  --radius-lg: 18px;

  /* 編集的レイアウト用の細罫線色（ノイズを抑えたグレージュ） */
  --hairline: #ebece8;
}

/* ============================================================
   B. タイポグラフィ／セクション見出し（編集的な反復）
============================================================ */
/* 英字ウォーターマークはごく淡く、奥に沈める */
.section-header__en {
  color: #e6ebe6;
  letter-spacing: 0.12em;
  font-weight: 300;
}
.section-header__ja {
  font-weight: 500;
  letter-spacing: 0.1em;       /* 明朝見出しを広めの字間で上品に */
}
.section-header__ja::after,
.section-header--left .section-header__ja::after,
.section-header--light .section-header__ja::after {
  width: 2.75rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-mint), var(--color-mint-dark));
}
.section-header__desc {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.02em;
}

/* ============================================================
   C. Intro：色グローを引いて無地に。引用の細罫線は編集的なので残す
============================================================ */
.intro {
  background: var(--color-white);
}
.intro__lead {
  letter-spacing: 0.06em;
  line-height: 1.95;
}

/* ============================================================
   D. アイコンタイル：（Service のイラスト化・Strength 統合により削除）
============================================================ */

/* ============================================================
   E. カード・ボタン：静止影＋ホバーで上品に浮く（反復）
============================================================ */
.works-card,
.blog-card {
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.works-card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.btn:hover,
.button:hover {
  box-shadow: var(--shadow-md);
}
.btn--large {
  padding: 1rem 2.6rem;
  letter-spacing: 0.08em;
}


/* ============================================================
   ★ 仕上げレイヤー v4（v2デザインベース＋前回の良かった要素のみ）
   方針：v2のカード・アイコン・装飾・文字サイズはそのまま活かし、
     ① 角丸の縮小（ボタン2px／カード4〜8px。ピル型・大角丸には戻さない）
     ② Priceセクション：v2のカード言語（白背景＋細枠＋薄影）で3枚カード
     ③ セクション通し番号（.section-header__no）
     ④ fade-upスクロールリビール
   のみを上書きする。色数・文言・構造は変えない。
   このブロックを削除すれば v2 デザインに戻る。
============================================================ */
:root {
  --v4-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* カードの角丸トークンを縮小（18px → 8px）。--radius-sm/md は 4px/8px のまま */
  --radius-lg: 8px;
}

/* ------------------------------------------------------------
   1. 角丸の縮小：ボタンは矩形、タグ類もピルをやめる
------------------------------------------------------------ */
.btn,
.button,
.btn--ghost {
  border-radius: 2px;
}
.blog-cat,
.persona-card__tag {
  border-radius: 2px;
}
.blog-scroll-btn {
  border-radius: 2px;
}


/* ------------------------------------------------------------
   2. セクション通し番号：右肩に (01) 〜 (07)
------------------------------------------------------------ */
.section-header {
  position: relative;
}
.section-header__no {
  position: absolute;
  top: 0.3rem;
  right: 0;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  line-height: 1;
}
.section-header__no::before { content: '('; margin-right: 0.18em; }
.section-header__no::after  { content: ')'; margin-left: 0.18em; }

@media (max-width: 759px) {
  .section-header__no { font-size: 0.9rem; }
}

/* ------------------------------------------------------------
   4. Price：料金の目安（v2のカード言語で3枚カード）
------------------------------------------------------------ */
.price {
  padding: var(--space-xl) 0;
  background-color: var(--color-offwhite);
}

.price-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

/* カード本体：白背景＋細枠＋薄影＋上辺ミントの帯（Blogカードと同じ言語） */
.price-row {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--hairline, var(--color-beige));
  border-top: 3px solid var(--color-mint);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.4rem, 2.5vw, 1.9rem);
  transition: transform var(--transition), box-shadow var(--transition);
}
.price-row:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.price-row__head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.price-row__no {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-mint-dark);
  line-height: 1;
  flex-shrink: 0;
}
.price-row__title {
  font-family: var(--font-ja-serif);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--color-text);
}
.price-row__title-en {
  display: block;
  font-family: var(--font-en-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-mint-dark);
  margin-top: 0.45rem;
}

/* 本文を伸ばして金額をカード下端に揃える */
.price-row__body { flex: 1; }

.price-row__desc {
  font-size: 0.86rem;
  line-height: 1.95;
  color: var(--color-text-mid);
}
.price-row__meta {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-beige);
}
.price-row__meta li {
  position: relative;
  padding-left: 1.5em;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  line-height: 2;
  color: var(--color-text-mid);
}
.price-row__meta li::before {
  content: '\2713';
  position: absolute;
  left: 0.1em;
  color: var(--color-mint-dark);
  font-weight: 700;
}

/* 金額：カード下部にまとめ、数字はセリフ英数字で大きく */
.price-row__price {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-beige);
  font-family: var(--font-en-serif);
  color: var(--color-text);
  line-height: 1.2;
  white-space: nowrap;
}
.price-row__unit {
  display: inline-block;
  font-family: var(--font-ja-sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--color-text-mid);
  margin-right: 0.5em;
}
.price-row__yen {
  font-size: 1.05rem;
  margin-right: 0.08em;
  color: var(--color-text-mid);
}
.price-row__num {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.price-row__tilde {
  font-family: var(--font-ja-serif);
  font-size: 0.95rem;
  color: var(--color-text-mid);
  margin-left: 0.12em;
}
.price-row__tax {
  display: inline-block;
  font-family: var(--font-ja-sans);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
  margin-left: 0.6em;
}

.price-footnote {
  margin-top: 1.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  line-height: 2;
  color: var(--color-text-mid);
  text-align: center;
}

/* ------------------------------------------------------------
   5. スクロールリビール（.fade-up は front-page.php で自動付与。
      監視は main.js の IntersectionObserver → .visible 付与）
------------------------------------------------------------ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s var(--v4-ease),
    transform 1s var(--v4-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   ★ モーションレイヤー v4.1（動きのみ・最終上書き）
   ねらい：制作費100万円クラスのサイトに共通する「上質で控えめな動き」。
     ① Hero：ビジュアルのソフトライズ（section 8 側で定義）
     ② 見出し：英字→日本語→ミントラインの順に立ち上がる階層リビール
     ③ アイコン・ベン図・タイムライン・金額のディテール時差表示
     ④ ホバーの微細な応答（ボタンの光沢・アイコンのナッジ）
   制約：JS変更なし（.fade-up.visible にのみ反応）。
        色数・レイアウト・文字サイズは変えない。
        このブロックを削除すれば v4（動きなし）に戻る。
============================================================ */

/* ------------------------------------------------------------
   2. セクション見出し：階層リビール
      （親の .section-header は fade-up で全体が浮上。
        子はさらに時差を付けて奥行きを出す）
------------------------------------------------------------ */
.section-header.fade-up .section-header__en {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--v4-ease) 0.05s, transform 1.1s var(--v4-ease) 0.05s;
}
.section-header.fade-up.visible .section-header__en {
  opacity: 1;
  transform: translateY(0);
}

.section-header.fade-up .section-header__no {
  opacity: 0;
  transition: opacity 0.8s var(--v4-ease) 0.55s;
}
.section-header.fade-up.visible .section-header__no {
  opacity: 1;
}

/* ミント下線：中央から左右へ引かれる */
.section-header.fade-up .section-header__ja::after {
  transform: scaleX(0);
  transition: transform 0.8s var(--v4-ease) 0.45s;
}
.section-header.fade-up.visible .section-header__ja::after {
  transform: scaleX(1);
}

.section-header.fade-up .section-header__desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s var(--v4-ease) 0.3s, transform 0.9s var(--v4-ease) 0.3s;
}
.section-header.fade-up.visible .section-header__desc {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   3. アイコンタイル：カード浮上のあと一拍おいて現れる
------------------------------------------------------------ */
.persona-card.fade-up .persona-card__icon {
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 0.5s var(--v4-ease) 0.3s,
    transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s; /* 軽いバウンス */
}
.persona-card.fade-up.visible .persona-card__icon {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------
   4. About：正円写真のフェード＋強みの時差表示
------------------------------------------------------------ */
.about-intro.fade-up .about-intro__photo img {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.6s var(--v4-ease) 0.35s,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.about-intro.fade-up.visible .about-intro__photo img {
  opacity: 1;
  transform: scale(1);
}

/* 経歴タイムライン：上から順に流れ込む */
.about-timeline.fade-up .timeline-item {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.7s var(--v4-ease), transform 0.7s var(--v4-ease);
}
.about-timeline.fade-up .timeline-item:nth-child(1) { transition-delay: 0.35s; }
.about-timeline.fade-up .timeline-item:nth-child(2) { transition-delay: 0.5s; }
.about-timeline.fade-up .timeline-item:nth-child(3) { transition-delay: 0.65s; }
.about-timeline.fade-up.visible .timeline-item {
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------------------------
   5. Price：金額はカード浮上のあと一拍おいて立ち上がる
------------------------------------------------------------ */
.price-row.fade-up .price-row__price {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--v4-ease) 0.45s, transform 0.7s var(--v4-ease) 0.45s;
}
.price-row.fade-up.visible .price-row__price {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   6. Contact：リード→サブ→ボタンの時差
------------------------------------------------------------ */
.contact-cta__body.fade-up .contact-cta__sub {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--v4-ease) 0.2s, transform 0.8s var(--v4-ease) 0.2s;
}
.contact-cta__body.fade-up .contact-cta__actions {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--v4-ease) 0.38s, transform 0.8s var(--v4-ease) 0.38s;
}
.contact-cta__body.fade-up.visible .contact-cta__sub,
.contact-cta__body.fade-up.visible .contact-cta__actions {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   7. ホバーの微細な応答
------------------------------------------------------------ */
/* ボタン内アイコン：矢印・封筒が少し進む */
.btn i,
.button i,
.cta-text-link i {
  transition: transform 0.35s var(--v4-ease);
}
.btn:hover i,
.button:hover i,
.cta-text-link:hover i {
  transform: translateX(3px);
}

/* 塗りボタン：光沢が一度だけ走る（ホバーイン時のみ） */
.btn--primary,
.btn--secondary,
.btn--line,
.button--primary,
.button--secondary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after,
.btn--secondary::after,
.btn--line::after,
.button--primary::after,
.button--secondary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--secondary:hover::after,
.btn--line:hover::after,
.button--primary:hover::after,
.button--secondary:hover::after {
  left: 130%;
  transition: left 0.65s ease;
}

/* 押した感触 */
.btn:active,
.button:active {
  transform: translateY(1px);
}

/* Blogカード：色帯の装飾円がゆっくり広がる */
.blog-card__accent::after {
  transition: transform 0.7s var(--v4-ease);
}
.blog-card:hover .blog-card__accent::after {
  transform: scale(1.35);
}

/* ヘッダー：スクロール後はナビの影を少し深く（main.js が .is-scrolled を付与） */
.header-nav {
  transition: box-shadow 0.4s ease;
}
.site-header.is-scrolled .header-nav {
  box-shadow: 0 6px 24px rgba(44, 44, 42, 0.10);
}

/* ------------------------------------------------------------
   8. prefers-reduced-motion：v4.1 の動きをすべて無効化
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .section-header.fade-up .section-header__en,
  .section-header.fade-up .section-header__no,
  .section-header.fade-up .section-header__ja::after,
  .section-header.fade-up .section-header__desc,
  .persona-card.fade-up .persona-card__icon,
  .about-intro.fade-up .about-intro__photo img,
  .about-timeline.fade-up .timeline-item,
  .price-row.fade-up .price-row__price,
  .contact-cta__body.fade-up .contact-cta__sub,
  .contact-cta__body.fade-up .contact-cta__actions {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .btn--primary::after,
  .btn--secondary::after,
  .btn--line::after,
  .button--primary::after,
  .button--secondary::after {
    display: none;
  }
}

/* ============================================================
   ★ 改行品質レイヤー
   目的：6段階ブレークポイント（390/520/768/900/1100/1280px）の
        すべてで「1行が2文字以下」になる折り返しを起こさない。
   手法：
     ① text-wrap: pretty … 対応ブラウザ（Chrome/Edge/Safari最新）で
        短すぎる最終行を自動回避。非対応ブラウザでは単に無視される。
        WordPressから流し込まれる可変テキスト（記事タイトル・抜粋）にも効く。
     ② .u-nobr … 語句をひとかたまり（inline-block）にして
        フレーズ単位で折り返すユーティリティ。全ブラウザで確実に効く。
   ※ 折り返し位置以外の見た目（色・サイズ・余白）は一切変更しない。
============================================================ */
.intro__lead,
.intro__body,
.section-header__desc,
.works-card__title,
.works-card__desc,
.service-item__title,
.service-item__desc,
.about-strengths__desc,
.persona-card h2,
.persona-card p,
.price-row__title,
.price-row__desc,
.price-row__meta li,
.price-footnote,
.about-intro__heading,
.about-intro__body p,
.about-timeline h5,
.blog-card__title,
.blog-card__excerpt,
.contact-cta__lead,
.contact-cta__sub {
  text-wrap: pretty;
}

/* 語句単位改行ユーティリティ：チャンク内では改行しない（見た目は不変） */
.u-nobr {
  display: inline-block;
}

/* Intro リード文：〜429px では <br> 区切りの1行分が画面幅に収まらず
   「る。」だけの行が生まれるため、最小フォントサイズのみ一段階下げて
   意図どおりの3行構成を保つ（430px以上は従来どおり） */
@media (max-width: 429px) {
  .intro__lead {
    font-size: 0.9rem;
  }
}

/* ============================================================
   ★ v5 図解・エディトリアル装飾レイヤー
   ねらい：文字中心の構成に「静かな図版」を足し、情報の構造を
        目で追えるようにする。色数・書体は既存トークンのみ使用。
   追加要素：
     ② Price ご依頼の流れ（細罫線＋点のステップ図）
     ③ Price カード背景アート（画像設置時のみ表示）
     ④ About 強みの重なり図（3円ベン図・浮遊モーション）＋定義リスト型の説明
     ⑤ Price 補足文の Note 化
   このブロックを削除すれば v4 デザインに戻る。
============================================================ */

/* ------------------------------------------------------------
   ② Price：ご依頼の流れ（細罫線＋点のステップ図）
      PC＝横一列 / SP（〜519px）＝左罫線の縦リスト
------------------------------------------------------------ */
.price-flow {
  max-width: 880px;
  margin: 0 auto clamp(2.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.price-flow__step {
  position: relative;
  text-align: center;
  padding-top: 1.9rem;
}

/* 連結線：各ステップ上部を横断（先頭・末尾は中央まで） */
.price-flow__step::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hairline, var(--color-beige));
}
.price-flow__step:first-child::before { left: 50%; }
.price-flow__step:last-child::before  { right: 50%; }

/* 点：白抜き＋ミントの輪郭 */
.price-flow__step::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  translate: -50% 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-mint-dark);
}

.price-flow__no {
  display: block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-mint-dark);
  margin-bottom: 0.35rem;
}

.price-flow__label {
  display: block;
  font-family: var(--font-ja-serif);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--color-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.price-flow__note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--color-text-mid);
}

/* SP：縦の流れに切り替え（左に罫線と点） */
@media (max-width: 519px) {
  .price-flow {
    grid-template-columns: 1fr;
    max-width: 300px;
  }

  .price-flow__step {
    text-align: left;
    padding: 0 0 1.5rem 1.75rem;
  }

  .price-flow__step::before {
    top: 0;
    bottom: 0;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .price-flow__step:first-child::before { left: 4px; top: 8px; }
  .price-flow__step:last-child::before  { right: auto; bottom: calc(100% - 8px); }

  .price-flow__step::after {
    top: 3px;
    left: 0;
    translate: 0 0;
  }

  .price-flow__no {
    display: inline-block;
    margin-right: 0.6em;
    margin-bottom: 0;
  }

  .price-flow__label {
    display: inline;
  }
}

/* ------------------------------------------------------------
   ③ Price：カード背景アート
      PHP側で画像が存在するときだけ --price-art が渡される。
      未設置時は何も表示されない（レイアウト不変）。
------------------------------------------------------------ */
.price-row {
  position: relative;
  overflow: hidden;
}

.price-row::after {
  content: '';
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: clamp(140px, 18vw, 180px);
  aspect-ratio: 1;
  background-image: var(--price-art, none);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  opacity: 0.14;
  pointer-events: none;
  z-index: 2; /* 罫線・本文より手前（クリックは透過） */
}

/* SP：カード幅が狭く金額表記（月額 ¥20,000〜 税込）と重なるため一段控えめに */
@media (max-width: 519px) {
  .price-row::after {
    width: 120px;
  }
}

.price-row > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   ④ About：強みの重なり図＋定義リスト型の説明
      PC（900px〜）＝図とリストの2カラム / SP＝図 → リストの縦積み
------------------------------------------------------------ */
.about-strengths-block {
  max-width: 1040px;
  margin: var(--space-lg) auto 0;
  border-top: 1px solid var(--hairline, var(--color-beige));
  padding-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .about-strengths-block {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
}

.strengths-diagram {
  margin: 0 auto;
  width: min(100%, 480px);
}

.strengths-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 3つの円：淡い色面を乗算で重ねる。輪郭は各色相の極細ライン */
.sd-circle {
  stroke-width: 1;
  mix-blend-mode: multiply;
}
.sd-circle--field { fill: rgba(152, 219, 198, 0.20); stroke: rgba(93, 184, 158, 0.40); }
.sd-circle--ai    { fill: rgba(230, 215, 42, 0.13);  stroke: rgba(178, 165, 32, 0.32); }
.sd-circle--web   { fill: rgba(241, 141, 158, 0.14); stroke: rgba(241, 141, 158, 0.42); }

/* 円のラベル：円の中・端からたっぷり余白をとった位置に */
.sd-label {
  font-family: var(--font-ja-serif);
  font-size: 16px;
  letter-spacing: 0.14em;
  fill: var(--color-text);
}

/* 中心テキスト：白の縁取り（paint-order）で交差する円の線から文字を守る */
.sd-center {
  font-family: var(--font-ja-serif);
  font-size: 14px;
  letter-spacing: 0.16em;
  fill: var(--color-text);
  paint-order: stroke;
  stroke: var(--color-white);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* 中心テキストの黄色アンダーライン（.about-accent のマーカーと同じ言語） */
.sd-center-underline {
  fill: var(--color-yellow);
  opacity: 0.55;
}

/* ── ふわっと浮遊：円をラベルごとゆっくり漂わせる。
      方向・周期・位相を円ごとに変え、呼吸のような揺らぎに ── */
@keyframes sd-drift-1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(0, -14px); }
}
@keyframes sd-drift-2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(7px, -11px); }
}
@keyframes sd-drift-3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-7px, -12px); }
}
.sd-float {
  animation: sd-drift-1 5s ease-in-out infinite alternate;
  will-change: transform;
}
.sd-float--2 {
  animation-name: sd-drift-2;
  animation-duration: 6.4s;
  animation-delay: -2.2s;
}
.sd-float--3 {
  animation-name: sd-drift-3;
  animation-duration: 7.6s;
  animation-delay: -4.4s;
}

/* ── リビール：スクロール到達時、円が時差でふわっと開き、
      文字が続いて浮かび、最後にアンダーラインが左から引かれる
      （.fade-up は front-page.php が付与。IntersectionObserver 非対応時は
       .fade-up 自体が付かないため常時表示のまま） ── */
.strengths-diagram.fade-up .sd-circle {
  opacity: 0;
  transform: scale(0.86);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 1.1s var(--v4-ease),
    transform 1.1s var(--v4-ease);
}
.strengths-diagram.fade-up .sd-label {
  opacity: 0;
  transition: opacity 1.1s var(--v4-ease) 0.25s;
}
.strengths-diagram.fade-up .sd-float--2 .sd-circle { transition-delay: 0.15s; }
.strengths-diagram.fade-up .sd-float--2 .sd-label  { transition-delay: 0.4s; }
.strengths-diagram.fade-up .sd-float--3 .sd-circle { transition-delay: 0.3s; }
.strengths-diagram.fade-up .sd-float--3 .sd-label  { transition-delay: 0.55s; }

.strengths-diagram.fade-up .sd-center {
  opacity: 0;
  transition: opacity 0.9s var(--v4-ease) 0.7s;
}
.strengths-diagram.fade-up .sd-center-underline {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.7s var(--v4-ease) 1s;
}

.strengths-diagram.fade-up.visible .sd-circle {
  opacity: 1;
  transform: scale(1);
}
.strengths-diagram.fade-up.visible .sd-label,
.strengths-diagram.fade-up.visible .sd-center {
  opacity: 1;
}
.strengths-diagram.fade-up.visible .sd-center-underline {
  transform: scaleX(1);
}

/* モーション配慮：浮遊・リビールとも無効化 */
@media (prefers-reduced-motion: reduce) {
  .sd-float { animation: none; }
  .strengths-diagram.fade-up .sd-circle,
  .strengths-diagram.fade-up .sd-label,
  .strengths-diagram.fade-up .sd-center,
  .strengths-diagram.fade-up .sd-center-underline {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* SP（〜519px）：縮小率が上がるぶん図中の文字を拡大。
   アンダーラインも文字幅に合わせて広げる（geometry属性のCSS指定） */
@media (max-width: 519px) {
  .sd-label  { font-size: 24px; letter-spacing: 0.1em; }
  .sd-center { font-size: 18px; letter-spacing: 0.12em; }
  .sd-center-underline--1 { x: 268px; width: 104px; }
  .sd-center-underline--2 { x: 258px; width: 124px; }
}

/* リスト側：3カラム → 罫線区切りの縦リスト（定義リスト型） */
.about-strengths-block .about-strengths {
  max-width: none;
  margin: 0;
  display: block;
  border-top: none;
  padding-top: 0;
}

.about-strengths-block .about-strengths__item {
  border-left: none;
  border-top: 1px solid var(--hairline, var(--color-beige));
  padding: 1.2rem 0 1.3rem;
}

.about-strengths-block .about-strengths__item:first-child {
  border-top: none;
  padding-top: 0;
}

/* 520px〜：見出しを左・本文を右に置く定義リスト型 */
@media (min-width: 520px) {
  .about-strengths-block .about-strengths__item {
    display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    grid-template-areas:
      "title en"
      "title desc";
    column-gap: 1.5rem;
    align-items: start;
  }
  .about-strengths-block .about-strengths__en    { grid-area: en; margin-bottom: 0.4rem; }
  .about-strengths-block .about-strengths__title { grid-area: title; margin-bottom: 0; padding-top: 0.1em; }
  .about-strengths-block .about-strengths__desc  { grid-area: desc; }
}

/* ------------------------------------------------------------
   ⑤ Price：補足文を Note 化（中央寄せ本文 → 罫線＋ラベルの注記）
------------------------------------------------------------ */
.price-footnote {
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
  border-top: 1px solid var(--hairline, var(--color-beige));
  padding-top: 1.1rem;
}

.price-footnote::before {
  content: 'Note';
  display: block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--color-mint-dark);
  margin-bottom: 0.35rem;
}

/* PC：中央揃え（SPは左揃えのまま読みやすさ優先） */
@media (min-width: 768px) {
  .price-footnote {
    text-align: center;
  }
}

/* ------------------------------------------------------------
   SP専用改行 <br class="br-sp">
   定義が存在せず全画面幅で改行されていたバグ修正。
   768px以上（タブレット・PC）では改行しない。
------------------------------------------------------------ */
.br-sp {
  display: inline;
}

@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

/* ============================================================
   ★ モーションレイヤー v5「ふわっと層」（動きのみ・最終上書き）
   参考：fukuomakoto.coseiro.co.jp（coseiro制作）のモーション設計を
        本サイトの静かなミント言語に翻訳したもの。
     ① リビール＝やわらかい着地（わずかなオーバーシュート）
     ② イラスト・封筒・写真＝呼吸のような常時浮遊
     ③ ホバー＝ぷにっと弾むスプリング応答
     ④ Contact背景＝ミントと黄の円がゆっくり漂う
   制約：JS変更なし（既存の .fade-up / .visible / :hover にのみ反応）。
        色は既存のCSS変数のみ使用。レイアウト・文字サイズは変えない。
        このブロックを削除すれば v4.1 の動きに戻る。
============================================================ */
:root {
  /* 参考サイトの標準イージング（easeOutCubic） */
  --fuwa-ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  /* ぷにっと（オーバーシュート強め・ホバー用） */
  --fuwa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ふわっと着地（弱いオーバーシュート・リビール用） */
  --fuwa-ease-land:   cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* ------------------------------------------------------------
   ① リビール：浮上量を増やし、着地に少しだけ余韻を持たせる
------------------------------------------------------------ */
.fade-up {
  transform: translateY(36px) scale(0.985);
  transition:
    opacity 0.9s var(--fuwa-ease-out),
    transform 1.15s var(--fuwa-ease-land);
  transition-delay: var(--reveal-delay, 0ms);
}
.fade-up.visible {
  transform: none;
}

/* Hero：立ち上がりも同じ言語に（ゆっくり浮かんで、ふわっと止まる） */
.hero-visual {
  animation: softRise 1.2s var(--fuwa-ease-land) both;
  overflow: hidden;
}

/* Hero 全体がCTAリンクなので、ホバーでごくわずかに寄る */
.hero-visual img {
  transition: transform 1.2s var(--fuwa-ease-out);
}
.hero-link:hover img {
  transform: scale(1.015);
}

/* ------------------------------------------------------------
   ② 常時浮遊：呼吸のようなゆらぎ
      （参考サイトのキャラクター浮遊 ±20px/5s を、
        写真・イラスト向けに振幅を落として移植）
------------------------------------------------------------ */
@keyframes fuwa-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}

/* サービスイラスト：枠内で少し拡大した状態のまま上下にたゆたう
   （scale を掛けておくことで浮遊中も枠の余白が見えない） */
@keyframes fuwa-breathe {
  from { transform: scale(1.07) translateY(3px); }
  to   { transform: scale(1.07) translateY(-5px); }
}
.service-item__figure img {
  animation: fuwa-breathe 5.2s ease-in-out infinite alternate;
  will-change: transform;
}
/* 3枚の位相・周期をずらして「それぞれが生きている」感じに */
.service-item:nth-child(2) .service-item__figure img {
  animation-duration: 6.1s;
  animation-delay: -2.1s;
}
.service-item:nth-child(3) .service-item__figure img {
  animation-duration: 6.9s;
  animation-delay: -3.8s;
}

/* プロフィール写真（正円）：ゆっくり浮遊 */
.about-intro__photo {
  animation: fuwa-float 6s ease-in-out infinite alternate;
  animation-delay: -2s;
}

/* 封筒：本体SVGが浮遊（.envelope-wrap の nudge アニメとは別要素なので共存可） */
.envelope-svg {
  animation: fuwa-float 4.8s ease-in-out infinite alternate;
}

/* ペルソナカードのアイコン：小さくふわふわ */
.persona-card__icon i {
  display: inline-block;
  animation: fuwa-float 3.8s ease-in-out infinite alternate;
  animation-delay: -1.2s;
}

/* ------------------------------------------------------------
   ③ ホバー：ぷにっと弾むスプリング応答
------------------------------------------------------------ */
/* ボタン：スプリングで浮き上がり、押すと沈む */
.btn,
.button {
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform 0.5s var(--fuwa-ease-spring),
    box-shadow 0.5s var(--fuwa-ease-out);
}
.btn:hover,
.button:hover {
  transform: translateY(-3px) scale(1.03);
}
.btn:active,
.button:active {
  transform: translateY(0) scale(0.97);
}

/* カード類：浮上量をひと押し強める
   （transition は .fade-up のものを共有＝ゆっくりふわっと持ち上がる） */
.works-card:hover,
.blog-card:hover {
  transform: translateY(-8px);
}
.service-item:hover {
  transform: translateY(-9px);
}
.persona-card--active:hover {
  transform: translateY(-8px);
}

/* ------------------------------------------------------------
   ④ Contact CTA：背景でミントと黄の円がゆっくり漂う
      （ベン図・正円写真と同じ「円」の言語。色は既存パレットのみ）
------------------------------------------------------------ */
@keyframes fuwa-drift-a {
  from { transform: translate(0, 0); }
  to   { transform: translate(30px, 24px); }
}
@keyframes fuwa-drift-b {
  from { transform: translate(0, 0); }
  to   { transform: translate(-26px, -30px); }
}
.contact-cta {
  position: relative;
  overflow: hidden;
}
.contact-cta::before,
.contact-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.contact-cta::before {
  width: 440px;
  height: 440px;
  top: -140px;
  left: -120px;
  background: radial-gradient(circle, rgba(152, 219, 198, 0.35), rgba(152, 219, 198, 0) 68%);
  animation: fuwa-drift-a 14s ease-in-out infinite alternate;
}
.contact-cta::after {
  width: 360px;
  height: 360px;
  bottom: -120px;
  right: -90px;
  background: radial-gradient(circle, rgba(230, 215, 42, 0.14), rgba(230, 215, 42, 0) 68%);
  animation: fuwa-drift-b 18s ease-in-out infinite alternate;
}
/* 円より前面にコンテンツを保つ */
.contact-cta .container {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   ⑤ prefers-reduced-motion：v5 の動きをすべて無効化
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-visual,
  .service-item__figure img,
  .about-intro__photo,
  .envelope-svg,
  .persona-card__icon i,
  .contact-cta::before,
  .contact-cta::after {
    animation: none;
  }
  .hero-visual img,
  .btn,
  .button {
    transition: none;
  }
  .hero-link:hover img {
    transform: none;
  }
}