/* 
  KENBISOU PORTFOLIO - モダンCSS実装ガイドライン（Intrinsic Web Design）
  全てのスタイルはビューポート幅に依存せず、コンテンツの本質的な美しさと柔軟性を重視します。
*/

:root {
  /* =========================================
     カラーパレット
     ========================================= */
  --color-tiffany: #81D8D0;       /* 基調となるティファニーブルー */
  --color-tiffany-dark: #6abcb4;  /* アクセント・ホバー用の濃いティファニーブルー */
  --color-tiffany-light: #f5fdfc; /* 背景用の非常に薄いブルー */
  --color-slate-900: #0f172a;     /* メインの文字色・暗い背景 */
  --color-slate-800: #1e293b;     /* サブの暗色 */
  --color-slate-600: #475569;     /* サブの文字色 */
  --color-slate-400: #94a3b8;     /* 補助的な文字色 */
  --color-slate-300: #cbd5e1;     /* 薄いグレー */
  --color-slate-200: #e2e8f0;     /* 境界線など */
  --color-slate-100: #f1f5f9;     /* セクション背景など */
  --color-white: #ffffff;

  /* =========================================
     流動的タイポグラフィ (Fluid Typography)
     clamp(最小値, 推奨値, 最大値) でデバイス幅に応じ滑らかにスケーリング
     ========================================= */
  --font-serif: "Playfair Display", serif;
  --font-sans: "Inter", sans-serif;
  --font-body: "SiteBodyFont", "Playfair Display", serif;

  --text-xs: clamp(0.7rem, 0.05vw + 0.68rem, 0.75rem);
  --text-sm: clamp(0.8rem, 0.1vw + 0.78rem, 0.875rem);
  --text-base: clamp(1rem, 0.15vw + 0.95rem, 1.125rem);
  --text-lg: clamp(1.125rem, 0.2vw + 1.05rem, 1.25rem);
  --text-xl: clamp(1.25rem, 0.3vw + 1.15rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 0.5vw + 1.35rem, 1.875rem);
  --text-3xl: clamp(1.875rem, 0.8vw + 1.65rem, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.2vw + 1.9rem, 3rem);
  --text-5xl: clamp(3rem, 2.5vw + 2.2rem, 4.5rem);
  --text-display: clamp(3.5rem, 4vw + 2.5rem, 6rem);

  /* =========================================
     流動的スペーシング (Fluid Spacing)
     余白もビューポートに応じて自動調整
     ========================================= */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  --space-md: clamp(1.5rem, 4vw, 3rem);
  --space-lg: clamp(3rem, 6vw, 6rem);
  --space-xl: clamp(5rem, 10vw, 10rem);
  
  --section-padding-v: var(--space-xl);
  --section-padding-h: clamp(1.5rem, 5vw, 4rem);

  /* =========================================
     コンテナ共通設定
     ========================================= */
  --container-max-width: 1280px;
  --border-radius-lg: 3rem;   /* 角丸をさらに大きくして柔らかさを演出 */
  --border-radius-md: 1.5rem;
  
  /* 遊び心のあるアクセントカラー */
  --color-accent-pink: #F5E6E8;
}

/* =========================================
   フォント設定: 数字にInterを適用
   unicode-range で数字 (0-9) のみ Inter を使用し、
   それ以外は Playfair Display にフォールバック
   ========================================= */
@font-face {
  font-family: 'SiteBodyFont';
  src: local('Inter'), local('Inter-Regular');
  font-weight: 100 900;
  unicode-range: U+0030-0039, U+002E, U+002C; /* 0-9, ピリオド, カンマ */
}

/* =========================================
   アニメーション定義
   ========================================= */

/* ふわふわと浮遊するアニメーション */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* じんわりと現れるアニメーション */
@keyframes soft-fade {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-soft-fade {
  animation: soft-fade 1.5s ease-out;
}

/* =========================================
   リセット & ベース
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-slate-800);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--color-slate-900);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

ul {
  list-style: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* =========================================
   レイアウト・ユーティリティ (Intrinsic Patterns)
   ========================================= */

/* セクションタイトルの共通ラッパー: デザインの統一と配置管理用 */
.section-title-wrapper {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
}

/* 中央寄せが必要なセクション用 */
.section-title-wrapper.text-center {
  align-items: center;
  text-align: center;
}

/* 左寄せ（デフォルト）のセクション用 */
.section-title-wrapper.text-left {
  align-items: flex-start;
  text-align: left;
}

/* 汎用テキスト・要素中央揃えユーティリティ */
.text-center {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* アクセントバー: ティファニーブルーの装飾下線 */
.accent-bar {
  width: 5rem;
  height: 4px;
  background-color: var(--color-tiffany);
  margin-top: 1rem;
}

/* デコレーション要素 */
.bg-blob-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-blob-light {
  position: absolute;
  width: 30rem;
  height: 30rem;
  background-color: rgba(129, 216, 208, 0.1);
  border-radius: 50%;
  filter: blur(100px);
  animation: float 10s ease-in-out infinite;
}

/* コンテンツの中央配置と最大幅 */
.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  /* ヒーローセクション等の端を整えるため、paddingの計算をより安定させる */
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* セクション共通の垂直余白 */
.section-padding {
  padding-block: var(--section-padding-v);
}

/* 自動調整グリッド: メディアクエリなしでレスポンシブ化 */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-item-width, 300px)), 1fr));
  gap: var(--space-md);
}

/* フレックスボックスの折り返しとギャップ */
.flex-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* =========================================
   コンポーネント固有のスタイル
   ========================================= */

/* ナビゲーション */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  z-index: 1000;
  border-bottom: 1px solid rgba(129, 216, 208, 0.2);
}

.navbar-inner {
  height: clamp(5rem, 10vh, 6rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-tiffany-dark);
  letter-spacing: 0.05em;
}

.logo span {
  font-weight: 300;
  color: var(--color-slate-400);
}

.nav-links {
  display: flex;
  gap: var(--space-md);
}

/* ビューポート依存の最小限のメディアクエリ */
@media (max-width: 900px) {
  .nav-links {
    display: none; 
  }
}

.nav-link {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-slate-600);
}

.nav-link:hover {
  color: var(--color-tiffany);
}

/* ヒーローセクション */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-xl);
  overflow: hidden;
  container-type: inline-size;
  container-name: hero;
  background-image: url('images/hero_blob_background_1775223450173.png');
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
  z-index: 0;
}

.hero-bg-accent {
  display: none; /* 画像に置き換えたため非表示 */
}

.hero-grid {
  position: relative;
  width: 100%;
  z-index: 1;
  display: grid;
  /* テキストと画像の比率を調整し、画像をより大きく主役にする */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-lg);
  align-items: center;
}

/* モバイル表示：コンテナクエリ + メディアクエリで二重対応 */
@container hero (max-width: 800px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.sp-only {
  display: none;
}

@media (max-width: 450px) {
  .badge-break {
    display: block;
  }
  .sp-only {
    display: block;
  }
}

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    padding-block: var(--space-lg);
    padding-top: calc(clamp(5rem, 10vh, 6rem) + var(--space-md));
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

.hero-description {
    font-size: var(--text-base);
    max-width: 100%;
  }

  .hero-image-wrapper {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .hero-image-main {
    aspect-ratio: 4 / 3;
    border-radius: 2rem;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-image-wrapper {
  position: relative;
  padding: 2rem;
}

.badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background-color: var(--color-white);
  color: var(--color-tiffany-dark);
  border: 1px solid rgba(129, 216, 208, 0.3);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-sm);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.hero-title {
  font-size: clamp(1.3rem, 3vw, 2.25rem);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hero-title span {
  display: inline-block;
  color: var(--color-tiffany);
  position: relative;
}

.hero-title span::after {
  display: none;
}

.hero-description {
  font-size: var(--text-lg);
  color: var(--color-slate-600);
  max-width: 35rem;
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

/* ヒーロービジュアル：指先の画像を中心にした大胆なレイアウト */
.hero-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* 余白をなくして画像を最大化 */
}

/* メイン：指先のトリートメント画像 */
.hero-image-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4rem 10rem 6rem 12rem; /* より大胆な有機的形状 */
  object-fit: cover;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.3);
  border: none; /* 白枠を削除してモダンに */
  z-index: 2;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image-main:hover {
  transform: scale(1.03) rotate(1deg);
}

/* コンテナクエリによる英雄統計カードの最適化 */
.hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 3;
}

@container hero (max-width: 600px) {
  .hero-stats {
    position: static;
    margin-top: var(--space-md);
    flex-direction: row;
    justify-content: space-around;
  }
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.stat-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgba(129, 216, 208, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-tiffany);
}

.stat-number {
  font-size: var(--text-2xl);
  font-weight: 700;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-slate-400);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ボタン */
.btn {
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary {
  background-color: var(--color-slate-900);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-slate-800);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid var(--color-slate-200);
  color: var(--color-slate-900);
}

.btn-outline:hover {
  border-color: var(--color-tiffany);
}

.btn-tiffany {
  background-color: var(--color-tiffany);
  color: var(--color-white);
  box-shadow: 0 10px 15px -3px rgba(129, 216, 208, 0.3);
}

/* プロフィールセクション */
.profile-section {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: profile;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
  gap: var(--space-lg);
  align-items: center;
}

.profile-image-container {
  position: relative;
  padding: 2rem;
}

.profile-image-mask {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* 有機的な形状のマスク */
  overflow: hidden;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
  /* 白い枠線を削除 */
  transition: transform 0.8s ease;
}

/* ホバー時の形状変化を削除 */

.profile-image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%; /* 顔が切れないように上部を優先的に表示 */
}

/* ホバー時の画像ズーム効果を削除 */

.profile-blob {
  position: absolute;
  top: 0;
  right: 0;
  width: 15rem;
  height: 15rem;
  background-color: var(--color-accent-pink);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -1;
  animation: float 8s ease-in-out infinite;
}

.profile-signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--color-tiffany-dark);
  margin-top: var(--space-md);
  display: block;
}

/* 活動組織セクションの背景 - グリーン（ティファニーブルー）とピンクの柔らかなグラデーション */
#organizations {
  background: linear-gradient(135deg, var(--color-tiffany-light) 0%, #fff 50%, var(--color-accent-pink) 100%);
  position: relative;
  z-index: 1;
}

/* カード（活動組織用）- グラスモーフィズム & 遊び心 */
.glass-card {
  background: rgba(255, 255, 255, 0.25); /* 透過度をさらに下げて、背景のグラデーションが透けるように調整 */
  backdrop-filter: blur(25px);         /* ぼかしを少し強めて高級感を出す */
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.5); /* 境界線をより繊細に */
  padding: var(--space-md);
  border-radius: 3rem 2rem 4rem 2rem;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.1);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

/* ホバー時の挙動: ご要望に合わせて、わずかに（3px程度）大きくなる繊細な挙動に調整 */
.glass-card:hover {
  transform: translateY(-8px) scale(1.02); /* 拡大率を1.02に微増。400px幅なら8px増、視覚的に3px以上の変化を保証 */
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* ホバー時はきびきびと動かす */
}

.icon-bg {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-white);
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  position: relative;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.icon-bg::after {
  content: '';
  position: absolute;
  width: 120%;
  height: 120%;
  background-color: rgba(129, 216, 208, 0.1);
  border-radius: 50%;
  z-index: -1;
  transform: translate(10%, 10%);
}

/* カード共通 */
.card {
  background-color: var(--color-slate-100);
  padding: var(--space-md);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-slate-200);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

/* ホバー時の挙動: ボックスが少し膨らむような拡大効果を追加 */
.card:hover {
  transform: translateY(-10px) scale(1.03); /* わずかに拡大させて「膨らむ」挙動を再現 */
  border-color: var(--color-tiffany);
  background-color: var(--color-white);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); /* シャドウを深めて立体感を出す */
}

/* 実績アイテム */
.achievement-list {
  display: grid;
  gap: 0;
}

.achievement-item {
  padding-block: var(--space-md);
  padding-inline: var(--space-sm);
  border-bottom: 1px solid var(--color-slate-200);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-md);
  transition: all 0.5s ease;
}

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

@media (max-width: 640px) {
  .achievement-item {
    grid-template-columns: 1fr;
  }
}

.achievement-item:hover {
  background-color: var(--color-white);
  padding-inline: var(--space-sm);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.achievement-year {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-slate-300);
}

.achievement-item:hover .achievement-year {
  color: var(--color-tiffany);
}

.achievement-category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-tiffany-dark);
  background-color: rgba(129, 216, 208, 0.1);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.achievement-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.achievement-desc {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
}

/* フッター */
.footer {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-slate-100);
}

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

.footer-copy {
  font-size: var(--text-sm);
  color: var(--color-slate-400);
}

/* アニメーション用 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロール時にふわっと浮き出るアニメーションの初期状態 */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(40px); /* オフセットを少し大きくして動きを分かりやすく */
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* スクロール時に活性化した際の状態 */
.fade-in-active {
  opacity: 1;
  transform: translateY(0); /* !important を削除してホバー時の transform を優先させる */
}

/* STORYセクション（物語風レイアウト） */
.story-wrapper {
  display: grid;
  gap: var(--space-xl);
}

.story-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
  gap: var(--space-lg);
  align-items: center;
}

.story-item:nth-child(even) .story-content-order {
  order: -1;
}

@media (max-width: 900px) {
  .story-item:nth-child(even) .story-content-order {
    order: 0;
  }
}

.story-image-wrapper {
  position: relative;
}

.story-image-mask {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: border-radius 1s ease-in-out;
}

.story-item:nth-child(even) .story-image-mask {
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}

.story-image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.story-item:hover .story-image-mask img {
  transform: scale(1.05);
}

.story-number {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  color: var(--color-tiffany);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.story-text-h {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

/* STORYセクション（雑誌風レイアウト / マガジングリッド） */
.bg-warm-beige {
  background-color: #fdfaf7; /* 温かみのある生成り色 */
  color: var(--color-slate-800);
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .magazine-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
}

.magazine-item-1 {
  grid-column: 1 / 8;
  grid-row: 1;
  z-index: 1;
}

.magazine-item-1-text {
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: end;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: var(--space-lg);
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.05);
  z-index: 2;
  margin-bottom: -2rem; /* 下に突き出す */
  border-radius: var(--border-radius-lg);
}

.magazine-item-2 {
  grid-column: 6 / 12;
  grid-row: 3;
  z-index: 1;
  margin-top: -2rem; /* 上の要素と少し重ねる */
}

.magazine-item-2-text {
  grid-column: 1 / 7;
  grid-row: 3;
  align-self: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: var(--space-lg);
  box-shadow: -20px 20px 60px rgba(0, 0, 0, 0.05);
  z-index: 2;
  margin-right: -3rem; /* 画像に食い込ませる */
  border-radius: var(--border-radius-lg);
}

.magazine-item-3 {
  grid-column: 2 / 8;
  grid-row: 5;
  z-index: 1;
  margin-top: -4rem;
}

.magazine-item-3-text {
  grid-column: 7 / 13;
  grid-row: 5;
  align-self: start;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  padding: var(--space-lg);
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.05);
  z-index: 2;
  margin-top: 2rem;
  border-radius: var(--border-radius-lg);
}

.drop-cap {
  font-family: var(--font-serif);
  float: left;
  font-size: 4rem;
  line-height: 0.8;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  color: var(--color-tiffany);
  font-weight: bold;
}

.side-note {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-tiffany-dark);
  margin-bottom: var(--space-xs);
  display: block;
}

.magazine-image-mask {
  width: 100%;
  aspect-ratio: 1 / 1; /* すべて正方形に固定 */
  border-radius: 1rem; /* 少し角丸を控えめにし、雑誌の切り抜き感を出す */
  overflow: hidden;
  box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.2);
}

.magazine-image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.magazine-grid:hover .magazine-image-mask img {
  transform: scale(1.03);
}

/* 既存の物語スタイルをオーバーライド */
.story-text-h.dark {
  color: var(--color-slate-900);
}
.story-text-p.dark {
  color: var(--color-slate-600);
}

/* Contact Form 7 連携用のスタイル */
.cf7-input,
.cf7-textarea {
  width: 100% !important;
  padding: 1rem !important;
  background-color: var(--color-slate-50) !important;
  border: 1px solid var(--color-slate-100) !important;
  border-radius: var(--border-radius-md) !important;
  font-family: inherit;
  font-size: inherit;
}

.wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 0.5rem;
}

.wpcf7-not-valid-tip {
  font-size: var(--text-xs);
  color: #ff4d4d;
  margin-top: 0.25rem;
}

/* =========================================
   コンタクトセクション SNSリンクグリッド
   ========================================= */
.contact-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.625rem;
  margin-top: 2.5rem;
}

.contact-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-tiffany);
  border-radius: 0.75rem;
  background-color: var(--color-tiffany);
  color: var(--color-slate-900);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.contact-social-link:hover {
  background-color: var(--color-tiffany-dark);
  border-color: var(--color-tiffany-dark);
  color: var(--color-white);
}