/* ==========================================================================
   EDITORIAL LAYOUTS (脱・箱型)
   ========================================================================== */
.editorial-title {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  margin: 0 auto 16px;
  letter-spacing: -0.01em;
  text-align: center;
  display: block;
  width: fit-content;
  background: linear-gradient(transparent 78%, rgba(100, 180, 230, 0.30) 78%);
  padding-bottom: 2px;
}
.editorial-header { text-align: center; border-bottom: 1px solid var(--c-black); padding-bottom: 24px; margin-bottom: 48px; }
.editorial-subtitle { font-size: 0.82rem; color: var(--c-gray); margin-bottom: 0; }

/* Hero Split */
/* ==============================================
   Hero Section (Transparent & Marquee)
============================================== */

/* --- 真ん中の非対称エディトリアルレイアウト --- */
.hero-split-layout {
  display: grid;
  grid-template-columns: 1fr; /* スマホでは縦並び1列 */
  gap: 40px;
  align-items: start;
  width: 100%;
}

@media (min-width: 769px) {
  .hero-split-layout {
    grid-template-columns: 1.2fr 1fr; /* PCでは左の見出しエリアを少し広く取る */
    gap: 60px;
    align-items: end; /* 下端を揃えることで空間に知的で引き締まった印象を生む */
  }
}

.hero-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 完全に左寄せ */
}

/* 既存の中央揃えを上書きして左寄せにする */
.hero-split-left .hero-title-massive {
  text-align: left;
  margin-bottom: 0; /* 下の余白はグリッドの整列に任せる */
}

/* リード文を収納する「仕様書」のようなパネル */
.lead-panel {
  border-left: 2px solid var(--c-black);
  padding-left: 24px;
}

.panel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--c-gray);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

/* 既存の中央揃えを上書きして左寄せにする */
.hero-split-right .hero-lead {
  text-align: left;
  margin: 0;
}

/* 背景画像やフィルターをなくし、大理石と動くガラス線を完全に見せる */
.hero-section.hero-transparent { 
  position: relative;
  padding-top: calc(var(--header-height) + 80px); 
  padding-bottom: 80px; 
  min-height: 80vh; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent; 
  overflow: hidden; 
}

.hero-section.hero-transparent .container {
  position: relative;
  z-index: 2; 
  margin-bottom: 40px; 
}

.hero-centered { 
  max-width: 800px; 
  margin: 0 auto; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-centered .label-tag {
  margin-bottom: 24px;
}

.hero-title-massive { 
  font-size: clamp(2rem, 5vw, 4rem); 
  font-weight: 900; 
  line-height: 1.4; 
  margin-bottom: 32px; 
  letter-spacing: 0.05em; 
  color: var(--c-black);
  text-align: center;
}

.hero-lead { 
  font-size: 1.1rem; 
  line-height: 1.8; 
  color: var(--c-dark); 
  font-weight: bold;
  text-align: center;
}

/* --- Heroセクション専用：ローディング画面明けのアニメーション --- */
/* ローディング画面が消える時間（0.6秒）を考慮し、開始を意図的に遅らせる */

.hero-anim-up {
  opacity: 0;
  animation: heroFadeUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

.hero-anim-side {
  opacity: 0;
  animation: heroFadeSide 3s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

/* --- 悩みバッジを下から登場させる（3番目に出現） --- */
.hero-anim-bottom {
  opacity: 0;
  animation: heroFadeUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) 2.0s forwards;
}

@keyframes heroFadeUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroFadeSide {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* --- 流れる悩み 2行版（ガラスの角丸長方形・マーキー） --- */
/* コンテナ全体にグラデーションマスクをかける */
.pain-marquee-container {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 1行目と2行目の隙間 */
  width: 100vw;
  max-width: 100%;
  overflow: hidden;
  z-index: 2;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  padding: 10px 0;
}

.pain-marquee-wrapper {
  display: flex;
  width: 100%;
}

.pain-marquee {
  display: flex;
  gap: 24px;
  padding-right: 24px;
  width: max-content;
  /* 1行目は右から左へ（少し遅めにして落ち着きを出す） */
  animation: marquee-scroll 35s linear infinite; 
}

/* 2行目専用：逆方向（左から右）かつ、少し速度を変えて単調さを消す */
.pain-marquee.marquee-reverse {
  animation: marquee-scroll-reverse 40s linear infinite;
}

/* PCでマウスを乗せたら一時停止する */
.pain-marquee-container:hover .pain-marquee {
  animation-play-state: paused;
}

/* ガラス感のある角丸長方形バッジ */
.pain-item {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(15, 44, 89, 0.06);
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--c-black);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.pain-item::before {
  content: "!";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: var(--c-black);
  color: var(--c-white);
  border-radius: 50%;
  font-size: 0.75rem;
  margin-right: 12px;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 逆方向のアニメーションキーフレーム */
@keyframes marquee-scroll-reverse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

/* スマホ表示時の最適化 */
@media (max-width: 768px) {
  .pain-marquee-container {
    gap: 12px;
  }
  .pain-item {
    padding: 12px 24px;
    font-size: 0.85rem;
  }
}

/* ==============================================
   FOCUS AREA (ターゲット業界リスト) - PC限定
============================================== */
.focus-area {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(15, 44, 89, 0.2); 
  width: 100%;
  max-width: 600px;
}

.focus-title {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--c-gray);
  margin-bottom: 16px;
}

.focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.focus-list li {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--c-accent); 
  position: relative;
  padding-left: 16px;
}

.focus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--c-accent);
  border-radius: 50%;
}

/* スマホ表示時の最適化 */
@media (max-width: 768px) {
  .hero-section.hero-bg-image { 
    min-height: 70vh;
    padding-top: calc(var(--header-height) + 40px); 
    padding-bottom: 60px; 
  }
  .hero-title-massive {
    font-size: 1.75rem; 
    line-height: 1.5;
  }
  .hero-lead {
    font-size: 0.95rem;
  }
  /* スマホではターゲットエリアを確実に非表示にする */
  .focus-area, 
  .pc-only {
    display: none !important;
  }
}

/* Audit List (巨大ナンバリング + 罫線) */
.audit-list { border-top: 1px solid var(--c-black); }
.audit-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--c-border); }
.audit-number { font-size: 3rem; font-weight: 900; color: var(--c-light); -webkit-text-stroke: 1px var(--c-border); line-height: 1; }
.audit-title { font-size: 1.25rem; margin-bottom: 16px; }
.audit-text { color: var(--c-dark); }
@media (min-width: 769px) { .audit-item { grid-template-columns: 120px 1fr; gap: 40px; } .audit-number { font-size: 5rem; } }

/* Solution Flow */
.solution-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.solution-flow { border-left: 1px solid var(--c-black); padding-left: 24px; margin-left: 8px; }
.flow-step { position: relative; margin-bottom: 40px; }
.flow-dot { position: absolute; left: -30px; top: 6px; width: 11px; height: 11px; background: var(--c-black); border-radius: 50%; }
.flow-title { font-size: 1.1rem; margin-bottom: 8px; }
.flow-text { color: var(--c-dark); font-size: 0.95rem; margin: 0; }
.solution-lead { font-size: 1.5rem; font-weight: bold; margin-bottom: 24px; line-height: 1.5; }
@media (min-width: 769px) { .solution-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Offer (黒背景) */
.offer-editorial { text-align: center; max-width: 800px; margin: 0 auto; }
.offer-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 24px; }
.offer-desc { font-size: 1.1rem; color: #ccc; margin-bottom: 40px; }
.offer-note { font-size: 0.85rem; color: #888; margin-top: 16px; }

/* Compliance */
.compliance-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.compliance-box { border: 1px solid var(--c-black); padding: 32px; }
.compliance-box-title { font-size: 1.1rem; margin-bottom: 16px; }
.compliance-list { padding-left: 20px; color: var(--c-dark); margin-bottom: 24px; }
.compliance-alert { background: var(--c-danger); color: white; padding: 12px; text-align: center; font-weight: bold; font-size: 0.9rem; }
@media (min-width: 769px) { .compliance-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ==========================================================================
   INDEX PAGE: CONCEPT & DIRECTORY (トップページ専用)
   ========================================================================== */

/* ==============================================
   Top Page: Comic Strip UI (横スクロールストーリー)
============================================== */
.comic-slider-container {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* コンテナを画面全幅に拡張 */
  padding: 0 24px;
}

/* トラック（スワイプ領域） */
.comic-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 40px;
  /* スクロールバー非表示 */
  scrollbar-width: none; 
}
.comic-track::-webkit-scrollbar { display: none; }

/* 漫画の1コマ */
.comic-panel {
  flex: 0 0 85vw; /* スマホで右端が少し見切れる幅に設定 */
  max-width: 400px; /* PCでの最大幅 */
  scroll-snap-align: center;
  position: relative;
}

@media (min-width: 769px) {
  .comic-track {
    justify-content: center; /* PCでは中央揃えで全コマ表示 */
    flex-wrap: wrap; /* 画面に収まらなければ折り返す */
  }
  .comic-panel {
    flex: 0 0 calc(50% - 12px); /* PCでは2列に並べる */
    max-width: none;
  }
  /* 最後の結論パネルは全幅にする */
  .panel-conclusion {
    flex: 0 0 100%;
  }
}

/* コマの中身（ Brutalist Corporate な太枠デザイン ） */
.comic-panel-inner {
  background: var(--c-white);
  border: 3px solid var(--c-black);
  border-radius: 8px;
  padding: 32px 24px;
  height: 100%;
  box-shadow: 8px 8px 0 rgba(15, 44, 89, 0.1); /* アメコミ風のソリッドな影 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s ease;
  opacity: 0.3; /* 初期状態は薄くしておく */
  transform: scale(0.95);
}

/* JSによって「今読んでいるコマ」になった時の発火スタイル */
.comic-panel.is-reading .comic-panel-inner {
  opacity: 1;
  transform: scale(1);
  box-shadow: 12px 12px 0 rgba(15, 44, 89, 0.15);
}

.comic-step {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: var(--c-light);
  padding: 4px 12px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 24px;
  border: 1px solid var(--c-border);
}

/* セリフ（メインコピー） */
.comic-dialogue {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-black);
  margin-bottom: 24px;
  /* 文字が下からスッと現れるアニメーションの準備 */
  overflow: hidden;
}

.comic-dialogue span {
  display: block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.comic-panel.is-reading .comic-dialogue span {
  transform: translateY(0);
}

.comic-caption {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
  margin: 0;
  border-top: 1px dashed var(--c-border);
  padding-top: 16px;
}

/* --- 特殊効果（SCENE 03：絶望） --- */
.is-shock.is-reading .comic-panel-inner {
  border-color: var(--c-danger);
  box-shadow: 12px 12px 0 rgba(211, 47, 47, 0.2);
  /* ショックで画面が揺れるアニメーション */
  animation: shockShake 0.4s ease-in-out;
}
@keyframes shockShake {
  0%, 100% { transform: scale(1) translateX(0); }
  25% { transform: scale(1.02) translateX(-4px); }
  50% { transform: scale(1.02) translateX(4px); }
  75% { transform: scale(1.02) translateX(-4px); }
}

/* --- 特殊効果（SCENE 04：損失） --- */
.is-loss.is-reading .comic-panel-inner {
  background: var(--c-light);
  border-color: var(--c-gray);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.05);
  filter: grayscale(100%);
}

/* --- 結論パネル --- */
.panel-conclusion .comic-panel-inner {
  background: rgba(15, 44, 89, 0.03); /* 監査カラーの背景 */
  border: 3px solid var(--c-accent);
  box-shadow: none;
}
.comic-conclusion-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-black);
  margin-bottom: 24px;
}
.comic-conclusion-text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-dark);
  margin: 0;
}

/* スワイプヒントの点滅 */
.comic-swipe-hint {
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--c-gray);
  margin-top: 16px;
  animation: flashHint 2s infinite;
}
@media (min-width: 769px) { .comic-swipe-hint { display: none; } }

/* --- 漫画セクション：ページネーションバッジ --- */
.comic-pagination {
  position: absolute;
  top: -10px;
  right: 24px;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 900;
  z-index: 10;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
@media (min-width: 769px) { .comic-pagination { display: none; } } /* PCでは全表示なので隠す */

/* ディレクトリ（目次）グリッド */
.directory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--c-black);
}
.directory-item {
  padding: 40px 0;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.dir-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.05em; }
.dir-title span { font-size: 1.2rem; color: var(--c-black); }
.dir-desc { font-size: 0.95rem; line-height: 1.8; color: var(--c-dark); margin-bottom: 24px; flex-grow: 1; }
.dir-link { font-weight: bold; color: var(--c-black); text-decoration: underline; text-underline-offset: 4px; display: inline-block; }

@media (min-width: 769px) {
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-item:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--c-border); }
  .directory-item:nth-child(even) { padding-left: 40px; }
}

/* ==============================================
   Top Page: Interactive Audit UI (インデックス切り替え)
============================================== */
.interactive-audit {
  max-width: 800px;
  margin: 0 auto;
}

/* --- 番号ナビゲーション（ガラス上のスイッチ） --- */
/* --- 番号ナビゲーション（1画面・横4列等分UI） --- */
.audit-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 画面幅を正確に4等分する */
  gap: 8px; /* スマホでは隙間を最小限に */
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 44, 89, 0.1);
}

.audit-nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center; /* 狭い幅に収めるため中央揃えに変更 */
  padding: 0;
  transition: all 0.3s ease;
  opacity: 0.4; /* 非アクティブ時は薄く */
}

/* アクティブな番号のスタイル */
.audit-nav-btn.is-active {
  opacity: 1;
}

.nav-num {
  font-family: var(--font-mono);
  /* スマホ画面に合わせて文字サイズを自動縮小 */
  font-size: clamp(1.5rem, 5.5vw, 2.5rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(100, 180, 230, 0.65);
  line-height: 1;
  transition: all 0.3s ease;
}

.audit-nav-btn.is-active .nav-num {
  color: rgba(100, 180, 230, 0.80);
  -webkit-text-stroke: 0;
  text-shadow: 0 4px 8px rgba(15, 44, 89, 0.15); 
  transform: scale(1.1); 
  transform-origin: center bottom; /* 中央揃えに合わせて中心から拡大 */
}

.nav-label {
  /* 文字が折り返さない限界のサイズに自動調整 */
  font-size: clamp(0.65rem, 2.5vw, 0.85rem); 
  font-weight: bold;
  color: var(--c-black);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap; /* 【重要】文字の折り返しを強制的に禁止 */
  letter-spacing: 0; /* 狭い幅に入れるため字間を詰める */
}

/* PC表示時の最適化（ゆとりを持たせて左寄せに戻す） */
@media (min-width: 769px) {
  .audit-nav {
    gap: 24px;
    padding-bottom: 24px;
  }
  .audit-nav-btn {
    align-items: flex-start; /* PCでは左寄せが美しい */
  }
  .nav-num {
    font-size: 3rem;
  }
  .audit-nav-btn.is-active .nav-num {
    transform-origin: left bottom;
  }
  .nav-label {
    letter-spacing: 0.05em;
    font-size: 0.85rem;
  }
}

/* --- コンテンツエリア（箱なし・背景なし） --- */
.audit-content-area {
  min-height: 180px; /* 切り替え時のガタつき防止 */
  position: relative;
}

.audit-panel {
  display: none; /* 初期状態は非表示 */
}

.audit-panel.is-active {
  display: block;
  animation: panelFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes panelFadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.audit-panel-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--c-black);
  margin-bottom: 16px;
  line-height: 1.5;
}

.audit-panel-note {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--c-gray);
  font-weight: normal;
  margin-left: 12px;
}

.audit-panel-text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-dark);
  margin: 0;
}

/* --- 特別枠（常に表示・うっすらガラス感） --- */
.audit-special {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px dashed rgba(15, 44, 89, 0.2);
  position: relative;
}

.special-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: bold;
  background: var(--c-black);
  color: var(--c-white);
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}

.audit-special-note {
  display: block;
  font-size: 0.85rem;
  color: var(--c-danger);
  font-weight: bold;
  margin-top: 16px;
}




/* ==========================================================================
   INDEX PAGE EXTRA COMPATIBILITY
   ========================================================================== */
.index-hero-top { margin-bottom: 60px; }
.hero-label-solid { background: var(--c-white); margin-bottom: 24px; }
.index-comic-section { background: transparent; overflow: hidden; padding-bottom: 120px; }
.site-directory-title { font-size: 1.25rem; font-weight: 900; letter-spacing: 0.1em; color: var(--c-gray); }
.index-footer-cta-text { opacity: 0.8; max-width: 600px; margin-left: auto; margin-right: auto; }
.index-footer-cta-btn { color: var(--c-white); border-color: var(--c-white); }

/* ==========================================================================
   HOME RESTRUCTURE — new section styles
   ========================================================================== */

/* Utility: u-mt-24 */
.u-mt-24 { margin-top: 24px; }

/* Hero: CTA group */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 769px) {
  .hero-cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ==========================================================================
   HOME HERO — misakigumi構図 REMEDORA版
   縦書き（writing-mode: vertical-rl）/ CSS3D風背景 / 大英字コピー
   ========================================================================== */

/* ─── セクション本体 ─── */
.home-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding-top: var(--header-height, 64px);
  background: linear-gradient(
    175deg,
    #ddeaf8 0%,
    #eef4fc 28%,
    #f5f8fd 58%,
    #ffffff 100%
  );
  display: flex;
  flex-direction: column;
}

/* ─── 背景：CSS3D風装飾レイヤー ─── */
.hh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hh-model {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
}

/* パース付きグリッド台座 */
.hh-grid {
  position: absolute;
  bottom: 0;
  left: -20%;
  right: -20%;
  height: 110px;
  background-image:
    linear-gradient(rgba(15, 44, 89, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 44, 89, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: perspective(320px) rotateX(56deg);
  transform-origin: bottom center;
}

/* 白いカードブロック（Webページのミニチュア） */
.hh-block {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 44, 89, 0.06);
  box-shadow:
    0 2px 6px rgba(15, 44, 89, 0.04),
    0 10px 28px rgba(15, 44, 89, 0.07);
}

/* ナビバー風ライン */
.hh-block::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(15, 44, 89, 0.10);
}

/* 本文風ライン */
.hh-block::after {
  content: '';
  position: absolute;
  top: 34%;
  left: 12%;
  right: 30%;
  height: 1.5px;
  background: rgba(15, 44, 89, 0.06);
}

.hh-block--a {
  width: clamp(72px, 19vw, 144px);
  height: clamp(50px, 13vw, 104px);
  bottom: 42%;
  left: 3%;
  transform: rotate(-1.5deg);
}

.hh-block--b {
  width: clamp(46px, 12vw, 92px);
  height: clamp(32px, 9vw, 66px);
  bottom: 22%;
  left: 17%;
  transform: rotate(1deg);
}

.hh-block--c {
  width: clamp(58px, 15vw, 118px);
  height: clamp(40px, 10vw, 80px);
  bottom: 30%;
  left: 31%;
  transform: rotate(-0.5deg);
  opacity: 0.88;
}

.hh-block--d {
  width: clamp(38px, 9vw, 72px);
  height: clamp(26px, 7vw, 54px);
  bottom: 13%;
  left: 47%;
  transform: rotate(1deg);
  opacity: 0.70;
}

/* 接続縦ライン */
.hh-wire {
  position: absolute;
  background: rgba(15, 44, 89, 0.07);
}

.hh-wire--a {
  width: 1px;
  height: clamp(18px, 5vw, 36px);
  bottom: 34%;
  left: 13%;
}

.hh-wire--b {
  height: 1px;
  width: clamp(22px, 6vw, 44px);
  bottom: 28%;
  left: 27%;
}

/* ─── コンテンツ層 ─── */
.hh-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 52px;
  overflow: hidden;
}

/* 上部アイブロウ */
.hh-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(15, 44, 89, 0.45);
  margin: 0;
  flex-shrink: 0;
}

/* ─── 縦書きコピーエリア（右寄り・絶対配置） ─── */
.hh-copy-wrap {
  position: absolute;
  top: calc(var(--header-height, 64px) + 36px);
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
}

/* 縦書きテキスト行（hh-support + hh-title の横並び） */
.hh-copy-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

/* 縦書きサポートコピー（左側・小） */
.hh-support {
  writing-mode: vertical-rl;
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.12em;
  color: rgba(20, 30, 50, 0.42);
  margin: 0;
}

/* 縦書きメインタイトル（H1） */
.hh-title {
  writing-mode: vertical-rl;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* vertical-rl + column = 物理的に右→左に並ぶ（2列横並び） */
  gap: 16px;
}

/* 各縦書きspan = 1列 */
.hh-title span {
  display: block;
  font-size: clamp(2.2rem, 7.5vw, 3rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.18em;
  color: rgba(10, 28, 64, 0.88);
  position: relative;
}

/* 各spanの左側に縦ライン（最後のspan＝最左列には不要） */
.hh-title span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9px;
  width: 1px;
  background: rgba(15, 44, 89, 0.20);
}
.hh-title span:last-child::after {
  display: none;
}

/* ─── 左端の縦書きREMEDORAブランド装飾 ─── */
.hh-brand-vert {
  position: absolute;
  left: 32px;
  top: calc(var(--header-height, 64px) + 8px);
  bottom: 24px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4.5svh, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.1em;
  color: rgba(15, 44, 89, 0.10);
  -webkit-text-stroke: 0.6px rgba(15, 44, 89, 0.15);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@keyframes hh-letter-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hh-bl { opacity: 0; }
body.is-loaded .hh-bl {
  animation: hh-letter-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.is-loaded .hh-bl:nth-child(1) { animation-delay: 0.05s; }
body.is-loaded .hh-bl:nth-child(2) { animation-delay: 0.22s; }
body.is-loaded .hh-bl:nth-child(3) { animation-delay: 0.39s; }
body.is-loaded .hh-bl:nth-child(4) { animation-delay: 0.56s; }
body.is-loaded .hh-bl:nth-child(5) { animation-delay: 0.73s; }
body.is-loaded .hh-bl:nth-child(6) { animation-delay: 0.90s; }
body.is-loaded .hh-bl:nth-child(7) { animation-delay: 1.07s; }
body.is-loaded .hh-bl:nth-child(8) { animation-delay: 1.24s; }

/* ─── 下部エリア（英字コピー + CTA + ラベル） ─── */
.hh-bottom {
  margin-top: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* CTA群 */
.hh-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}

.hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 18px rgba(15, 44, 89, 0.10), 0 1px 4px rgba(15, 44, 89, 0.07);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hh-btn--primary {
  background: rgba(100, 180, 230, 0.30);
  color: var(--c-black);
  border: 1.5px solid rgba(100, 180, 230, 0.50);
}

.hh-btn--ghost {
  background: transparent;
  color: var(--c-black);
  border: 1.5px solid rgba(100, 180, 230, 0.50);
}

@media (hover: hover) {
  .hh-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(15, 44, 89, 0.14);
  }
}

/* 地域ラベル */
.hh-area {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(15, 44, 89, 0.82);
  color: #fff;
  padding: 4px 12px;
  border-radius: 50px;
  margin: 0;
}

/* ─── PC ─── */
@media (min-width: 769px) {
  .home-hero {
    background: linear-gradient(
      155deg,
      #d4e7f6 0%,
      #e8f2fb 28%,
      #f4f8fd 58%,
      #ffffff 100%
    );
  }

  .hh-inner {
    padding: 40px 48px 60px;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .hh-copy-wrap {
    top: 40px;
    bottom: auto;
    right: 48px;
    gap: 12px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .hh-copy-row {
    gap: 24px;
  }

  /* PC でも writing-mode: vertical-rl を明示維持 */
  .hh-title {
    writing-mode: vertical-rl;
    flex-direction: column;
  }

  .hh-title span {
    font-size: clamp(1.8rem, 2.4vw, 3rem);
  }

  .hh-support {
    font-size: 0.85rem;
  }

  .hh-actions {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .hh-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  .hh-model { height: 56%; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-block, .hh-wire, .hh-grid { animation: none !important; transition: none !important; }
}

/* Section 2: 問題提起 — dekirukun参考: カードグリッド型 */

/* カードグリッド */
.pain-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 32px;
}
@media (min-width: 769px) {
  .pain-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* 各カード */
.pain-card {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 44, 89, 0.1);
  padding: 22px 18px 22px 20px;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.7;
  color: var(--c-black);
  box-shadow: 0 2px 8px rgba(15, 44, 89, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 4角ブラケット装飾（gradient lines） */
.pain-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60)),
    linear-gradient(rgba(100,180,230,0.60),rgba(100,180,230,0.60));
  background-size:
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px,
    12px 1.5px, 1.5px 12px;
  background-position:
    left 5px top 5px,    left 5px top 5px,
    right 5px top 5px,   right 5px top 5px,
    left 5px bottom 5px, left 5px bottom 5px,
    right 5px bottom 5px, right 5px bottom 5px;
  background-repeat: no-repeat;
}

.pain-card::after {
  display: none;
}

@media (hover: hover) {
  .pain-card:hover {
    box-shadow: 0 6px 20px rgba(15, 44, 89, 0.09);
    transform: translateY(-2px);
  }
}

/* ハイライトテキスト */
.pain-highlight {
  color: var(--c-black);
  font-weight: 900;
  background: linear-gradient(transparent 60%, rgba(100, 180, 230, 0.32) 60%);
  padding-bottom: 1px;
}

/* 7枚目カード: SP=全幅 / PC=3列中央に配置 */
@media (max-width: 768px) {
  .pain-card.pain-card-last {
    grid-column: 1 / -1;
  }
}
@media (min-width: 769px) {
  .pain-card.pain-card-last {
    grid-column: 2; /* 3列グリッドの2列目＝中央 */
  }
}

/* カード群の下の補足テキスト */
.problem-foot-text {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--c-dark);
  max-width: 680px;
  border-left: 2px solid var(--c-border);
  padding-left: 20px;
  margin-bottom: 0;
}

/* Section 3: プラン導線 — 3列audit-nav */
.audit-nav-3col {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Section 3: プラン導線 — 4列audit-nav */
.audit-nav-4col {
  grid-template-columns: repeat(4, 1fr) !important;
}

.plan-category {
  display: block;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--c-gray);
  margin-bottom: 12px;
  letter-spacing: 0.03em;
  border-left: 2px solid var(--c-accent);
  padding-left: 10px;
  line-height: 1.5;
}

/* プランパネル別カラー */
#plan-panel-1 .plan-category { border-left-color: var(--c-mini); }
#plan-panel-2 .plan-category { border-left-color: var(--c-hp); }
#plan-panel-3 .plan-category { border-left-color: var(--c-lp); }
#plan-panel-4 .plan-category { border-left-color: var(--c-support); }

.audit-nav-3col .audit-nav-btn:nth-child(1).is-active .nav-num,
.audit-nav-4col .audit-nav-btn:nth-child(1).is-active .nav-num {
  color: rgba(160, 124, 0, 0.85);
  -webkit-text-stroke: 0;
}
.audit-nav-3col .audit-nav-btn:nth-child(2).is-active .nav-num,
.audit-nav-4col .audit-nav-btn:nth-child(2).is-active .nav-num {
  color: rgba(176, 48, 48, 0.85);
  -webkit-text-stroke: 0;
}
.audit-nav-3col .audit-nav-btn:nth-child(3).is-active .nav-num,
.audit-nav-4col .audit-nav-btn:nth-child(3).is-active .nav-num {
  color: rgba(26, 155, 106, 0.85);
  -webkit-text-stroke: 0;
}
.audit-nav-4col .audit-nav-btn:nth-child(4).is-active .nav-num {
  color: rgba(130, 95, 200, 0.85);
  -webkit-text-stroke: 0;
}

/* プランパネル内CTAボタン */
#plan-panel-1 .btn-primary {
  background-color: var(--c-mini-mid);
  border-color: var(--c-mini-border);
}
#plan-panel-2 .btn-primary {
  background-color: var(--c-hp-mid);
  border-color: var(--c-hp-border);
}
#plan-panel-3 .btn-primary {
  background-color: var(--c-lp-mid);
  border-color: var(--c-lp-border);
}
#plan-panel-4 .btn-primary {
  background-color: var(--c-support-mid);
  border-color: var(--c-support-border);
}

/* Section 4: REMEDORAが大切にしていること */
.home-principles-list {
  margin-top: 8px;
}
.home-principle-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 40px 0;
  border-bottom: 1px solid var(--c-border);
  align-items: start;
}
.principle-icon {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: rgba(100, 180, 230, 0.85);
  padding-top: 2px;
}
.principle-icon svg {
  width: 100%;
  height: 100%;
}
.principle-title {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--c-black);
  line-height: 1.4;
}
.principle-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
  margin: 0;
}
@media (min-width: 769px) {
  .home-principle-item {
    grid-template-columns: 80px 1fr;
    gap: 48px;
  }
  .principle-icon { width: 52px; height: 52px; }
}

/* Section 5: 実績・デモ導線 */
.cta-band-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
}
.cta-band-action {
  display: flex;
  justify-content: center;
}
.cta-band-body {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-dark);
  margin: 16px 0 0;
}
@media (min-width: 769px) {
  .cta-band-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    max-width: 640px;
    margin-inline: auto;
  }
  .cta-band-text { flex: unset; }
  .cta-band-action { flex-shrink: 0; }
}

/* Section 6: 制作の流れ導線 */
.workflow-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 769px) {
  .workflow-layout {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
    gap: 40px;
  }
  .workflow-text-col {
    text-align: center;
  }
}
.workflow-body {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-dark);
  margin: 16px 0 0;
}
.workflow-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 2px solid var(--c-black);
}
.workflow-step-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--c-black);
}
.workflow-step-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c-black);
  border-radius: 50%;
  flex-shrink: 0;
}
.workflow-step-list li.step-optional {
  color: var(--c-gray);
  font-weight: normal;
  font-size: 0.9rem;
}
.workflow-step-list li.step-optional::before {
  background: transparent;
  border: 1px solid var(--c-gray);
}

/* Section 7: Site Directory — 5th item handling */
@media (min-width: 769px) {
  .directory-item.dir-full {
    grid-column: 1 / -1;
    border-right: none !important;
    padding-right: 0 !important;
    max-width: calc(50% - 1px);
  }
}

/* ==========================================================================
   PC LAYOUT REFINEMENTS (min-width: 900px)
   ========================================================================== */
@media (min-width: 900px) {
  .audit-panel-text {
    max-width: 680px;
  }
  .interactive-audit {
    max-width: none;
  }
  .audit-nav-3col {
    grid-template-columns: repeat(3, auto) !important;
    justify-content: center;
    gap: 48px;
  }
  .audit-nav-4col {
    grid-template-columns: repeat(4, auto) !important;
    justify-content: center;
    gap: 36px;
  }
}