/* ============================================================================
   refined.css — 引き算のリデザイン（2026-08-26）
   ----------------------------------------------------------------------------
   クラシル・SmartHR を実測して得た設計指針を適用する層。
     ① 色は3つ（濃紺・白/クリーム・テラコッタ）。テラコッタは"点"でしか使わない
     ② 角丸は2種類だけ（カード12px / 完全な円のみ）。画像は角丸にしない
     ③ 浮遊装飾・雲・太陽・イラストの重ね置きは全廃
     ④ 見出しは「大きさ」で存在感を出す。太さで押さない
     ⑤ 余白を1.5倍。1画面に詰め込まない
   warm-theme.css の後に読み込んで上書きする。
   ========================================================================== */

:root {
  --ink: #1f2b3f;          /* 主役：ほぼ黒に近い濃紺 */
  --ink-soft: #5b6577;     /* 本文の弱い色 */
  --ink-faint: #97a0b0;    /* 補足・キャプション */
  --paper: #ffffff;
  --paper-warm: #fbf9f5;   /* ほんのり温かい紙色 */
  --cream: #fdf6e9;        /* Heroのクリーム地（クラシル#FFF5E1を温かく調整） */
  --line: #e7e4de;         /* 罫線 */
  --accent: #c05f38;       /* テラコッタ：アクセントのみ */
  --radius-card: 12px;
}

/* ── ① 装飾の全廃 ───────────────────────────────── */
.scroll-decor,
.hero-sky,
.sky-cloud,
.hero-sun,
.sky-birds,
.hero-scene,
.hero-scene--inline,
.hero-scroll-indicator { display: none !important; }

/* ── ② 色の整理：パステルの面を紙色に統一 ──────────── */
body { background: var(--paper); color: var(--ink); }
.promises-section,
.services,
.partners-section.cases-section,
.sns-section,
.media-section,
.incense-why { background: var(--paper-warm) !important; }
.leadership-section,
.news-section,
.magazine-preview,
.about-preview,
.stats-section,
.logo-section { background: var(--paper) !important; }
.faq-section { background: var(--paper-warm) !important; }

/* テラコッタは「アクセントのみ」。面には塗らない */
.section-heading__ja,
.about-title,
.page-title,
.content-section h2,
.promise-card__title,
.service-item__title,
.leader-card__name,
.stat-card__number,
.cta-card__title { color: var(--ink); }
.promise-card__num,
.leader-card__role,
.service-item__label,
.incense-why__stat-num { color: var(--accent); }

/* 桜色のタグ → 罫線だけの静かなタグに */
.leader-card .leader-card__tags span,
.logos .pill {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  font-weight: 500;
}

/* ── ③ 角丸を2種類に統一（画像は角丸にしない）──────── */
.promise-card, .leader-card, .case-card, .magazine-card,
.sns-card, .hero-flagship, .cta-card, .news-item, .service-item,
.faq-section details, .stat-card {
  border-radius: var(--radius-card) !important;
}
.leader-card__photo img, .hero-flagship__media img,
.case-card__logo img, .magazine-card__img img, .services-photo img {
  border-radius: 0 !important;
}

/* ── ④ ボタン：ピル型をやめ、静かな矩形に ───────────── */
.btn, .hero-cta, .hero-flagship__cta, .nav-cta, .btn--primary, .btn--outline {
  border-radius: 6px !important;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  font-weight: 700;
}
.btn--primary, .hero-cta--primary, .hero-flagship__cta, .nav-cta {
  background: var(--ink) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
}
.btn--primary:hover, .hero-cta--primary:hover, .hero-flagship__cta:hover, .nav-cta:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn--outline, .hero-cta--secondary {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
.btn--outline:hover, .hero-cta--secondary:hover { background: var(--ink) !important; color: #fff !important; }

/* ── ⑤ タイポ：大きさで見せ、太さは抑える ──────────── */
.hero-title {
  font-size: clamp(2.8rem, 6.4vw, 6rem) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.hero-title-accent { color: var(--accent) !important; }
.hero-label { color: var(--ink-faint) !important; font-weight: 500 !important; letter-spacing: 0.2em !important; }
.hero-subtitle { color: var(--ink-soft) !important; font-size: 1rem !important; line-height: 2.1 !important; max-width: 34em; }

.section-heading__ja {
  font-size: clamp(2rem, 4.2vw, 3.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}
.page-title { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.content-section h2 { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.about-title { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.promise-card__title, .service-item__title { font-weight: 700 !important; }
.cta-card__title { font-weight: 700 !important; }

/* ── ⑥ 余白：詰め込まない ─────────────────────────── */
.promises-section, .leadership-section, .incense-why, .services,
.stats-section, .media-section, .news-section, .partners-section,
.magazine-preview, .sns-section, .about-preview, .faq-section {
  padding-top: clamp(5rem, 9vw, 9rem) !important;
  padding-bottom: clamp(5rem, 9vw, 9rem) !important;
}
.section-heading { margin-bottom: clamp(2.5rem, 4vw, 4rem) !important; }

/* ── ⑦ カード：影を消し、線で構造を見せる ───────────── */
.promise-card, .leader-card, .case-card, .magazine-card, .sns-card, .stat-card {
  box-shadow: none !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
}
.promise-card:hover, .leader-card:hover, .case-card:hover, .magazine-card:hover {
  border-color: var(--ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── ⑧ Hero：クリーム地に見出しだけ → フルブリード写真 ──
      （クラシル方式：ヒーローに要素を置かない。説明と導線は画像の下）── */
.hero {
  display: block !important;
  background: var(--cream) !important;
  min-height: auto !important;
  padding: calc(var(--header-height) + clamp(3rem, 6vw, 6.5rem)) 0 0 !important;
  text-align: center;
}
.hero-bg, .hero-overlay { display: none !important; }
.hero-content {
  display: block !important;
  max-width: 1000px; margin: 0 auto;
  padding: 0 var(--space-xl) clamp(2.5rem, 5vw, 4.5rem) !important;
}
.hero-text { text-align: center; }
.hero-label { display: none !important; }

/* 見出しはブランド色で大きく（クラシルは見出し自体がブランド色） */
.hero-title {
  color: var(--accent) !important;
  font-size: clamp(2.6rem, 7vw, 6.4rem) !important;
  line-height: 1.18 !important;
  margin-bottom: 0.35em !important;
}
.hero-title-accent { color: var(--accent) !important; }
.hero-en {
  color: var(--accent); font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 2.1rem);
  letter-spacing: 0.02em; line-height: 1.4; margin: 0;
  font-family: var(--font-display, inherit);
}

/* フルブリード画像 */
.hero-visual { width: 100%; line-height: 0; }
.hero-visual img {
  width: 100%; height: clamp(300px, 42vw, 560px);
  object-fit: cover; object-position: center 62%; display: block;
}

/* 画像の下：説明と導線 */
.hero-lead { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(1rem, 2vw, 2rem); background: var(--paper); }
.hero-lead__text {
  font-size: 1.02rem; line-height: 2.1; color: var(--ink-soft);
  max-width: 40em; margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.hero-lead .hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-lead .hero-cta { min-width: 260px; justify-content: center; padding: 18px 32px; }
.hero-lead .hero-doc-link { display: inline-block; margin-top: 2rem; }
@media (max-width: 600px) {
  .hero-lead .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-lead .hero-cta { min-width: 0; width: 100%; }
}

/* ── 旗艦ブランド：横位置のカード ─────────────────── */
.flagship-section { padding: clamp(4rem, 7vw, 7rem) 0; background: var(--paper); }
.hero-flagship {
  display: grid; grid-template-columns: 46% 1fr;
  max-width: none !important; margin: 0 !important;
  box-shadow: none !important; border: 1px solid var(--line) !important;
  overflow: hidden;
}
.hero-flagship__media { aspect-ratio: auto !important; height: 100%; min-height: 340px; }
.hero-flagship__badge {
  background: var(--ink) !important; border-radius: 3px !important;
  letter-spacing: 0.14em; font-size: 0.6rem !important;
}
.hero-flagship__body { padding: clamp(2rem, 4vw, 3.5rem) !important; align-self: center; }
.hero-flagship__brand { font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important; letter-spacing: 0.02em; }
.hero-flagship__tagline { font-size: 1rem !important; margin-bottom: 2rem !important; color: var(--ink-soft); }
.hero-flagship__cta { width: auto !important; display: inline-flex !important; padding: 15px 32px !important; }
.hero-flagship__founders { margin-top: 2.5rem !important; padding-top: 2rem !important; }
@media (max-width: 767px) {
  .hero-flagship { grid-template-columns: 1fr; }
  .hero-flagship__media { min-height: 240px; }
}

/* ── ⑨ ヘッダー：静かに ─────────────────────────── */
.site-header { border-bottom: 1px solid var(--line); }
.nav-doc { color: var(--ink-soft) !important; font-weight: 500 !important; }

/* ── ⑩ 数字・統計：色を使わず大きさで ─────────────── */
.stat-card__number { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.03em; }
.sns-hero__number { color: var(--ink) !important; }
.media-badge { border-radius: 3px !important; background: var(--ink) !important; font-weight: 600; letter-spacing: 0.1em; }
.news-item__cat { border-radius: 3px !important; background: var(--ink) !important; font-weight: 600; }

/* CTA：夜の面は残すが色数を絞る */
.cta-section { background: var(--ink) !important; }
.cta-section::before { display: none !important; }

@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-height) + 2rem) !important; }
  .hero-visual img { height: 260px; }
}

/* ── ⑪ ナビ：ブランド色・太字（クラシル方式） ───────── */
.main-nav .nav-link { color: var(--accent) !important; font-weight: 700 !important; font-size: 0.94rem !important; }
.main-nav .nav-link:hover { color: var(--ink) !important; }
.nav-magazine .mag-label { color: inherit; }

/* ── ⑫ 見出しの揃えを全セクション「中央」に統一 ─────────
      （中央と左寄せの混在が最も雑に見える。お手本は全て中央）── */
.section-heading,
.services-intro,
.news-header,
.magazine-header,
.partners-desc,
.services-intro__desc { text-align: center !important; }

.section-heading { display: block !important; }

/* 「すべて見る」リンクを持つ見出し行：横並びをやめて縦に積む */
.news-header,
.magazine-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-md) !important;
}
.news-header .section-heading,
.magazine-header .section-heading { margin-bottom: 0 !important; }
.section-more { order: 2; }

/* 説明文は中央に置いて幅を絞る（読みやすさ優先） */
.partners-desc,
.services-intro__desc,
.incense-why__body p,
.sns-hero__desc {
  max-width: 46em; margin-left: auto !important; margin-right: auto !important;
}

/* 事業紹介：左右2カラムの導入部も中央に */
.services-intro { display: block !important; }
.services-intro .section-heading { margin-bottom: var(--space-lg) !important; }

/* 会社紹介：見出しと本文を中央に */
.about-content { text-align: center; }
.about-desc { margin-left: auto; margin-right: auto; }
.about-link { justify-content: center; }

/* SNSの数字ブロックも中央に */
.sns-hero { justify-content: center; text-align: center; }

/* ── ⑬ 約物（、。）の視覚補正 ────────────────────────
   行末の「、」「。」は文字の右側が大きく空くため、
   中央揃えにすると日本語だけ左にズレて見える（実測で約30px）。
   見出しを右へ押し戻して"見た目の中央"を揃える。 */
.hero-title { text-indent: 0.3em; }
.section-heading__ja:not(:empty) { text-indent: 0.06em; }