/* ============================================================
  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
   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:    #888780;       /* サブテキスト */
  --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;
  flex-shrink: 0;
  /* 背景付きで視認性確保（backdrop-filter 不使用） */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.80);
  border-radius: 14px;
  padding: 10px 16px;
  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: auto;
  max-width: 180px;
  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 スライダー
  参照デザイン準拠:
    - 左テキスト＋右イラスト画像の2カラムグリッド（PC）
    - 浮遊図形（.floating-shape）で背景に奥行き
    - スライドは hero-slide--active クラスで切り替え
    - slider-controls（ドット＋前後ボタン）
    - アクセントワードに黄色下線アニメーション（.accent）
============================================================ */

/* ─── セクション全体 ─── */
/* ③ height:100svh で1画面に収める。paddingはヘッダー分のみ確保し上下均等 */
/* 画像を上に20pxはみ出させるため overflow-y は visible、横スクロールだけ hidden */
.hero {
  position: relative;
  height: 100svh;                        /* ③ min-height→height：必ず1画面に収まる */
  display: flex;
  flex-direction: column;
  justify-content: center;               /* ③ 上下中央寄せで余白を均等に */
  padding: calc(var(--header-height) + 12px) var(--container-pad) 12px;
  overflow: hidden;                      /* 縦横ともに切り抜き（非アクティブスライドのはみ出し防止） */
  background:
    radial-gradient(circle at 8% 20%, rgba(152, 219, 198, 0.28), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(230, 215, 42, 0.18), transparent 24%),
    var(--color-offwhite);
}

/* ─── 浮遊図形（背景装飾） ─── */
.floating-shape {
  position: absolute;
  display: block;
  border-radius: 45% 55% 62% 38%;
  opacity: 0.4;
  animation: floatShape 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.floating-shape--mint {
  width: 130px;
  height: 130px;
  left: -46px;
  bottom: 110px;
  background: var(--color-mint);
}

.floating-shape--yellow {
  width: 96px;
  height: 96px;
  right: -22px;
  top: 145px;
  background: var(--color-yellow);
  animation-delay: -4s;
}

/* ④ スマホではfloating-shapeをテキストに重ならないよう非表示 */
@media (max-width: 639px) {
  .floating-shape {
    display: none;
  }
}

/* ─── スライダーラッパー ─── */
/* ③ min-height は削除済み（スマホで下余白が広くなりすぎるため） */
.hero-slider {
  position: relative;                    /* 非アクティブスライド（position:absolute）の包含ブロック */
  width: min(100%, var(--container-max));
  margin: 0 auto;
  overflow: hidden;                      /* 非アクティブスライドの縦はみ出しをここで切る */
}

/* ─── 各スライド：フェード＋スライドイン ─── */
.hero-slide {
  display: grid;
  gap: 26px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.hero-slide:not(.hero-slide--active) {
  position: absolute;
  inset: 0;
}

.hero-slide--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.hero-slide__content {
  animation: softRise 0.8s ease both;
}

/* ─── 見出し ─── */
.hero h1,
.hero h2 {
  margin: 0 0 0.5em;
  max-width: 11em;
  font-family: var(--font-ja-serif);
  line-height: 1.3;
}

/* hero h1：ふたまわり小さく調整（元: clamp(28px, 8vw, 52px)） */
.hero h1 { font-size: clamp(20px, 5.5vw, 36px); }
.hero h2 { font-size: clamp(17px, 4vw, 28px); }


/* ─── アクセントワード：黄色下線アニメーション ─── */
.hero .accent {
  color: var(--color-mint-dark);
  position: relative;
  display: inline-block;
}

.hero .accent::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--color-yellow);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  animation: lineIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* ④ 非アクティブスライドの accent 下線：完全に非表示（スマホで文字に被るのを防ぐ） */
.hero-slide:not(.hero-slide--active) .accent::after {
  display: none;
  animation: none;
  transform: scaleX(0);
}

.hero-slide--active .accent::after {
  animation: lineIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes lineIn {
  to { transform: scaleX(1); }
}

/* ─── キッカー（スライド小見出し） ─── */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-dark);
  background: var(--color-mint-light);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ─── リード文 ─── */
.hero-slide__lead {
  margin: 16px 0 24px;
  color: var(--color-text-mid);
  font-size: clamp(13px, 1.8vw, 16px);
  line-height: 1.85;
}

/* ─── ボタングループ ─── */
/* ─── ボタングループ（Hero内） ─── */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ============================================================
  ボタン統一ベース
  .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;
}

/* ─── 右側：イラスト画像フレーム ─── */
.hero-visual {
  margin: 0;
}

.image-illustration {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 0.86;
  display: block;
  margin: 0 auto;
  padding: 10px;                         /* ① 16px→10px：内側余白を詰めて画像を大きく */
  border-radius: 34% 66% 45% 55% / 58% 42% 58% 42%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(250, 250, 248, 0.72)),
    radial-gradient(circle at 12% 18%, rgba(152, 219, 198, 0.32), transparent 34%);
  box-shadow: 0 14px 40px rgba(44, 44, 42, 0.09);
  transform: rotate(-1.4deg);
}

.image-illustration::before,
.image-illustration::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: inherit;
}

.image-illustration::before {
  inset: 18px -8px -10px 24px;
  background: rgba(152, 219, 198, 0.22);
  transform: rotate(4deg);
}

/* ④ ::after の黄色装飾円：スマホでは非表示（テキストへの重なり防止） */
.image-illustration::after {
  width: 76px;
  height: 76px;
  right: 6px;
  top: -10px;
  border-radius: 50%;
  background: rgba(230, 215, 42, 0.42);
  animation: iconWiggle 5.5s ease-in-out infinite;
}

@media (max-width: 639px) {
  /* ④ スマホでは ::after 装飾円を非表示 */
  .image-illustration::after {
    display: none;
  }
}

.image-illustration img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 28px;
  filter: drop-shadow(0 18px 20px rgba(44, 44, 42, 0.1));
}

.image-illustration--organize {
  border-radius: 58% 42% 54% 46% / 44% 56% 44% 56%;
  transform: rotate(1.2deg);
}

.image-illustration--organize::before {
  background: rgba(230, 215, 42, 0.2);
  transform: rotate(-4deg);
}

.image-illustration--organize::after {
  left: 4px;
  right: auto;
  top: auto;
  bottom: 2px;
  background: rgba(241, 141, 158, 0.18);
}

.image-illustration--support {
  border-radius: 46% 54% 40% 60% / 54% 44% 56% 46%;
  transform: rotate(-0.6deg);
}

.image-illustration--support::before {
  background: rgba(152, 219, 198, 0.18);
}

.image-illustration--support::after {
  background: rgba(241, 141, 158, 0.16);
}

/* ─── スライダーコントロール（ドット＋前後ボタン） ─── */
.slider-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

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

.slider-button:hover {
  background: var(--color-white);
  border-color: var(--color-mint-dark);
  transform: scale(1.08);
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 999px;
  background: rgba(44, 44, 42, 0.2);
  cursor: pointer;
  padding: 0;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.slider-dot--active {
  width: 30px;
  background: var(--color-mint);
}

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

@keyframes floatShape {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(8px, -14px, 0) rotate(8deg); }
}

@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(2.5deg) translateY(-2px); }
}

/* ─── ②タブレット以上（640px以上）：2カラムグリッド ─── */
@media (min-width: 640px) {

  /* ② タブレット（640px〜890px）：h1 を一回り小さくして窮屈感を解消 */
  .hero h1 {
    font-size: clamp(18px, 3.8vw, 26px);
  }

  .hero {
    /* ③ 上下均等・スクロールなしで収まるpadding */
    padding: calc(var(--header-height) + 16px) var(--container-pad) 16px;
  }

  .hero-slider {
    /* ③ スライダーが残り高さを使い切る */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-slide {
    /* ①② テキスト左・画像右の横並び2カラム */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    /* ③ 高さをheightベースで制御（min-heightは不要） */
    align-items: center;
  }

  .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* 画像をhero-sliderの上端から20px上にはみ出させる */
    margin-top: -20px;
    position: relative;
    z-index: 1;                          /* テキストより手前に浮かせる */
  }

  /* ① 画像をより大きく：高さ制約を付けて1画面内に確実に収める */
  .image-illustration {
    width: min(100%, 500px);
    max-height: calc(100svh - var(--header-height) - 120px);
    aspect-ratio: auto;                  /* height制約を有効にするためauto上書き */
  }

  .slider-controls {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* ─── PC（900px以上）：さらに余裕を持った2カラムグリッド ─── */
@media (min-width: 900px) {
  /* ② 900px以上ではh1をベースサイズに戻す */
  .hero h1 {
    font-size: clamp(20px, 5.5vw, 36px);
  }

  .hero {
    padding: calc(var(--header-height) + 20px) var(--container-pad) 20px;
  }

  .hero-slide {
    /* ① テキスト列をやや広く、画像列は大きく */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
  }

  /* ① PC：画像を最大限大きく表示 */
  .image-illustration {
    width: min(100%, 580px);
    max-height: calc(100svh - var(--header-height) - 100px);
  }

  .slider-controls {
    margin-top: 8px;
  }
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transform: none; }
  .floating-shape,
  .image-illustration::after { 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 / ペルソナ誘導カード
============================================================ */
.service {
  padding: var(--space-xl) 0;
  background-color: var(--color-white);
}

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

.service-item {
  padding: 2.5rem 2rem;
  background-color: var(--color-offwhite);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-beige);
  position: relative;
  overflow: hidden;
}

/* 背景装飾番号 */
.service-item__num {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  font-family: var(--font-en-serif);
  font-size: 5rem;
  font-weight: 300;
  color: var(--color-beige);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* アイコン */
.service-item__icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-mint-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  color: var(--color-mint-dark);
  font-size: 1.3rem;
}

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

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

/* ── ペルソナ選択エリア ──────────────── */
.persona-section {
  background: var(--color-white);
  padding: 64px 18px;
}
.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: 24px;
}

/* persona-grid：activeをlockedより一回り大きく */
.persona-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.persona-card--active { margin-bottom: 12px; }

/* カード */
.persona-card {
  position: relative;
  padding: 24px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(44, 44, 42, 0.07);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  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: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.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(-6px);
  box-shadow: 0 12px 32px rgba(44, 44, 42, 0.1);
  border-color: var(--color-mint);
}
.persona-card--locked {
  opacity: 0.52;
  cursor: default;
}

.persona-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-mint-dark);
  background: var(--color-mint-light);
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.persona-card--locked .persona-card__tag {
  color: var(--color-text-mid);
  background: var(--color-cream);
}

.persona-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-mint-light);
  display: grid;
  place-items: center;
  color: var(--color-mint-dark);
  font-size: 1rem;
}
.persona-card--locked .persona-card__icon {
  background: var(--color-cream);
  color: var(--color-text-mid);
}

.persona-card h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}
.persona-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-mid);
}

.persona-card__cta {
  margin-top: 4px;
  font-size: 13px;
  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: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-mid);
  background: var(--color-cream);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-beige-mid);
}



/* ============================================================
  12. Strength
============================================================ */
.strength {
  padding: var(--space-xl) 0;
  background-color: var(--color-cream); /* ミント極薄グリーン */
}

.strength-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.strength-item {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  border: 1px solid var(--color-beige);
  text-align: center;
  position: relative;
}

.strength-item__num {
  font-family: var(--font-en-serif);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.strength-item__icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-mint-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  color: var(--color-mint-dark);
  font-size: 1.4rem;
}

.strength-item__title {
  font-family: var(--font-ja-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
  color: var(--color-text);
}

.strength-item__desc {
  font-size: 0.83rem;
  color: var(--color-text-mid);
  line-height: 1.9;
}


/* ============================================================
  13. About
  レイアウト:
    PC（768px以上）: 2カラム（左35% 名前+写真 / 右65% 文章ブロック）
    SP（767px以下）: 縦積み（現状踏襲）
  文章ブロック: 白背景カード・ミント薄枠・大角丸・やわらか影
  マーカー:     Heroと同じ淡いイエロー（.about-accent）
============================================================ */

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

/* ── about-body：PC 2カラムグリッド ──
   max-width を広げてゆとりある横幅に */
.about-body {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  /* PC: 左35% / 右65% */
  grid-template-columns: 35% 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center; /* 左右とも縦中央揃え */
}

/* ── 左カラム：名前 ＋ 写真 ── */
.about-body__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* 名前ブロック（縦積み・中央揃え） */
.about-body__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.about-body__name-ja {
  font-family: var(--font-ja-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text);
  line-height: 1.4;
}

.about-body__name-en {
  font-family: var(--font-en-serif);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--color-text-light);
}

/* プロフィール写真：やわらかい有機的な装飾枠 */
.about-figure {
  margin: 0;
  position: relative;
  /* 装飾のはみ出しを許可するため overflow: visible */
}

/* 写真の背後にミント色の装飾シャドウ */
.about-figure::before {
  content: '';
  position: absolute;
  inset: 10px -10px -10px 10px; /* 右下にずらして重ねる */
  background: rgba(152, 219, 198, 0.25);
  border-radius: 24px;
  z-index: 0;
}

/* 右上の黄色装飾円 */
.about-figure::after {
  content: '';
  position: absolute;
  width: 54px;
  height: 54px;
  top: -14px;
  right: -14px;
  border-radius: 50%;
  background: rgba(230, 215, 42, 0.38);
  z-index: 0;
}

.about-figure img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  /* ミント薄枠 */
  border: 2px solid rgba(152, 219, 198, 0.45);
  box-shadow:
    0 8px 28px rgba(44, 44, 42, 0.09),
    0 2px 8px  rgba(152, 219, 198, 0.18);
  position: relative;
  z-index: 1;
}

/* ── 右カラム：文章ブロック ── */
.about-body__right {
  display: flex;
  flex-direction: column;
}

/* ── about-card：装飾文章ブロック（Introと統一感） ──
   白背景・ミント薄枠・大角丸・やわらかい影 */
.about-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(152, 219, 198, 0.40);
  border-radius: 26px;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:
    0 4px 24px rgba(44, 44, 42, 0.06),
    0 1px 4px  rgba(152, 219, 198, 0.12);
  text-align: left;
}

/* ラベル："About me" */
.about-card__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.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

/* カード内見出し */
.about-card__heading {
  font-family: var(--font-ja-serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

/* イエローマーカーライン（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-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

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

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

/* ── about-lower：ベン図 ＋ タイムライン ── */
.about-lower {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  max-width: 1040px;       /* about-body と横幅を揃える */
  margin-inline: auto;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

/* ── タイムライン外枠 ── */
.about-timeline {
  flex: 0 0 350px;
  max-width: 350px;
  text-align: left;
  background-color: var(--color-white);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
}

/* タイムラインタイトル */
.about-timeline__title {
  font-family: var(--font-en-serif);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-beige);
}

/* タイムラインリスト */
.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.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  display: block;
  margin-bottom: 0.2rem;
}

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

/* ── ベン図（SVG）── */
.about-venn {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0; /* flex縮小を許可 */
}

.venn-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
}

/* 三円（塗り＋ストローク） */
.venn-circle {
  fill-opacity: 0.18;
  stroke-width: 1;
  transition: fill-opacity var(--transition);
}

/* 現場経験：ミント */
.venn-circle--field {
  fill: var(--color-mint);
  stroke: var(--color-mint-dark);
  stroke-opacity: 0.4;
}

/* AI活用：ピンク */
.venn-circle--ai {
  fill: var(--color-pink);
  stroke: var(--color-pink-dark);
  stroke-opacity: 0.4;
}

/* Web制作：イエロー */
.venn-circle--web {
  fill: var(--color-yellow);
  stroke: var(--color-yellow-dark);
  stroke-opacity: 0.4;
}

/* ホバー時に少し濃く */
.about-venn:hover .venn-circle--field { fill-opacity: 0.26; }
.about-venn:hover .venn-circle--ai    { fill-opacity: 0.26; }
.about-venn:hover .venn-circle--web   { fill-opacity: 0.26; }

/* 中央ドット */
.venn-center {
  fill: var(--color-mint-dark);
  filter: drop-shadow(0 2px 8px rgba(93, 184, 158, 0.35));
  transition: r var(--transition), fill var(--transition);
}

.about-venn:hover .venn-center {
  fill: var(--color-mint);
}

/* ⑥ "only" 小文字：視認性向上のため拡大（7px → 10px） */
.venn-center-only {
  font-family: var(--font-en-serif);
  font-size: 10px;
  font-style: italic;
  font-weight: 300;
  fill: var(--color-white);
  letter-spacing: 0.1em;
  opacity: 0.85;
}

/* ⑥ "me." 大文字：視認性向上のため拡大（13px → 20px） */
.venn-center-me {
  font-family: var(--font-en-serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  fill: var(--color-white);
  letter-spacing: 0.04em;
}

/* 英字キャプション */
.venn-label-en {
  font-family: var(--font-en-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--color-text-light);
}

/* 日本語ラベル */
.venn-label-ja {
  font-family: var(--font-ja-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  fill: var(--color-text);
}

/* ── アクションボタン群 ── */
.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）：カラム比率・gap 調整 ── */
@media (max-width: 1024px) {
  .about-body {
    grid-template-columns: 38% 1fr;
    gap: 2.5rem;
  }

  /* about-lower：gap を詰める */
  .about-lower {
    gap: 2rem;
  }
}

/* ── スマートフォン（〜767px）：縦積みに切り替え ── */
@media (max-width: 767px) {

  /* 2カラム → 縦積み */
  .about-body {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  /* 左カラム：中央揃えを維持 */
  .about-body__left {
    align-items: center;
  }

  /* 写真：SP では横幅を少し抑える */
  .about-figure img {
    max-width: 200px;
  }

  /* 右上装飾円：SP では少し小さく */
  .about-figure::after {
    width: 38px;
    height: 38px;
    top: -10px;
    right: -10px;
  }

  /* 文章カード：文字を左寄せ */
  .about-card {
    text-align: left;
  }

  /* about-lower：縦積み */
  .about-lower {
    flex-direction: column;
    gap: 2rem;
  }

  /* タイムライン：SP では幅制限を解除 */
  .about-timeline {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  /* ベン図：SP では小さく */
  .venn-svg {
    max-width: 280px;
  }

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

/* ── 小スマートフォン（〜480px） ── */
@media (max-width: 480px) {
  .about-body__actions {
    flex-direction: column;
    align-items: center;
  }
}
/* ============================================================
  14. Blog
/* タイムライン外枠 */
.about-timeline {
  background-color: var(--color-white);
  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-beige);
  margin-bottom: var(--space-md);
}

/* タイムラインリスト */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 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);
}

/* 期間ラベル（"4 Years" 等） */
.timeline-period {
  font-family: var(--font-en-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  display: block;
  margin-bottom: 0.2rem;
}

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


/* ============================================================
  14. Blog
============================================================ */
/* ── セクション本体（padding が消えていたのを修正） ── */
.blog {
  padding: var(--space-xl) 0;
  background-color: var(--color-offwhite);
}

/* ── 記事カードグリッド（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);
}

.footer-logo a {
  display: flex;
  flex-direction: column;
}

.footer-logo .logo-en {
  color: var(--color-text);
}

.footer-logo .logo-ja {
  color: var(--color-text-mid);
}

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

.footer-nav a {
  font-family: var(--font-en-sans);
  font-size: 0.8rem;
  color: var(--color-text-mid);
  letter-spacing: 0.06em;
  transition: color var(--transition);
}

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

.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);
}

/* 弱い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,
  .strength-list {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* About lower：タブレットでは gap を詰める */
  .about-lower {
    gap: 2rem;
  }

  .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;
  }

  /* ハンバーガー出現と同時にロゴを小さく */
  .site-logo__img {
    height: 28px;                        /* PC: 40px → 28px */
  }

  .site-logo {
    padding: 7px 12px;                   /* 枠のpaddingも合わせて詰める */
  }
}

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

  /* Hero */
  /* ③ SP：padding-top:0 で上下均等に */
  .hero-slide__content {
    padding-top: 0;
  }

  /* ① SP：画像がテキストを圧迫しないよう高さ上限を設定 */
  .image-illustration {
    max-height: 38svh;
  }

  /* accent下線：SPでは文字の後ろに潜り込ませて視認性を確保 */
  /* z-index:-1 で h1 テキストの下レイヤーに移動 */
  .hero .accent {
    z-index: 0;
  }
  .hero .accent::after {
    z-index: -1;
    bottom: 0;                           /* 文字ベースラインに揃え、重なりを最小化 */
    height: 4px;
    opacity: 0.55;                       /* 透過で主張を抑える */
  }

  .hero-slide__text br {
    display: none;
  }

  .hero-scroll {
    display: none;
  }

  /* ペルソナ：SP では縦積みに変更 */
  .persona-grid {
    grid-template-columns: 1fr;
  }

  /* ペルソナ：active / locked の高さ差をリセット */
  .persona-card--active {
    margin-bottom: 0;
  }

  /* 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;
  }

  /* Strength */
  .strength-list {
    grid-template-columns: 1fr;
  }

  /* About：SP では写真サイズを少し抑える */
  .about-figure img {
    max-height: var(--about-photo-max-height);
  }

  /* About lower：SP では縦積み */
  .about-lower {
    flex-direction: column;
    gap: 2rem;
  }

  /* タイムライン：SP では幅制限を解除 */
  .about-timeline {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  /* ベン図：SP では小さく */
  .venn-svg {
    max-width: 240px;
  }

  /* 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 */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .footer-nav ul {
    gap: 1rem;
  }
}

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

  .contact-cta__actions {
    flex-direction: column;
    align-items: center;
  }

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

/* ── ② 極小スマートフォン（〜385px）：h1を一回り小さく ── */
@media (max-width: 385px) {
  /* ② 385px以下ではh1を小さくして折り返しを抑える */
  .hero h1 {
    font-size: 17px;
  }

  /* ② kicker・lead・ボタンも少し詰めてFVに収める */
  .hero-kicker {
    font-size: 10px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }

  .hero-slide__lead {
    font-size: 12px;
    margin: 10px 0 16px;
  }
}

/* ── 封筒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;
}