@charset "utf-8";
/* =============================================================================
   refine.css — フェーズ1：デザイン品質の統一・改善
   -----------------------------------------------------------------------------
   blocks.css / concept-d.css / pages.css は変更せず、最後に読み込んで上書きします。
   全ページに同じ改善が一度に効くようにするための層です。

   実測にもとづく修正（変更理由）:
   1. 本文が1行63文字になっていた（日本語の可読上限は35〜45文字）→ 最大幅を導入
   2. セクション余白が全て120px均一でリズムがなかった → 背景の切替を基準に強弱を付ける
   3. 日本語見出しが不自然な位置で折り返していた → text-wrap / word-break で語単位に
   4. 見出しと本文のサイズ差が大きすぎた（4.8rem : 1.7rem）→ 見出しを少し下げ本文を上げる
   5. Hero写真の高さが画像ごとにバラバラだった → aspect-ratio で統一
   6. スマートフォンの縦が長すぎた → SPの余白を一段圧縮
   ========================================================================== */

:root {
  /* 日本語本文の適正行長（約38全角文字）。1remあたりの実寸に依存しない指定 */
  --measure: 34em;
  --measure-wide: 40em;
}

/* -----------------------------------------------------------------------------
   1. 本文の最大幅
   実測で最大63文字/行だった箇所を、すべて38文字前後に収める。
   中央寄せのセクションでは中央に、左寄せのセクションでは左端を維持する。
   -------------------------------------------------------------------------- */
.bk-summary__text,
.bk-vision__text,
.pg-def__desc,
.pg-note__text,
.bk-merit__text,
.d-biz__desc,
.bk-cards__text,
.pg-jobs__desc,
.d-contact__what,
.bk-articles__title,
.pg-paths__desc {
  max-width: var(--measure);
}
.pg-lead { max-width: var(--measure-wide); }
.pg-hero__lead { max-width: var(--measure); }

/* 中央寄せの導入文・注記は中央に置いたまま幅だけ絞る */
.bk-inner > p[style*="text-align:center"],
.bk-inner--1000 > p[style*="text-align:center"] {
  max-width: var(--measure-wide);
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   2. セクションのリズム
   背景色が切り替わる箇所を「章の変わり目」として広く取り、
   同じ背景が続く箇所は詰める。マークアップを変えずに強弱を作る。
   -------------------------------------------------------------------------- */
.bk-sec { padding-block: 96px; }
.bk-sec--cream,
.bk-sec--navy { padding-block: 128px; }

/* 同じ背景のセクションが連続したら上を詰める（間延び防止） */
.bk-sec + .bk-sec:not(.bk-sec--cream):not(.bk-sec--navy) { padding-top: 72px; }
.bk-sec--cream + .bk-sec--cream { padding-top: 88px; }

/* Hero直後の最初のセクションは詰めて、ページの入りを軽くする */
.pg-hero + .bk-sec,
.pg-anchornav + .bk-sec { padding-top: 72px; }

/* 明示的に指定したいとき用のユーティリティ */
.rh-tight { padding-block: 64px !important; }
.rh-loose { padding-block: 144px !important; }

@media (max-width: 767px) {
  .bk-sec { padding-block: 56px; }
  .bk-sec--cream,
  .bk-sec--navy { padding-block: 72px; }
  .bk-sec + .bk-sec:not(.bk-sec--cream):not(.bk-sec--navy) { padding-top: 44px; }
  .bk-sec--cream + .bk-sec--cream { padding-top: 52px; }
  .pg-hero + .bk-sec,
  .pg-anchornav + .bk-sec { padding-top: 44px; }
  .rh-tight { padding-block: 40px !important; }
  .rh-loose { padding-block: 80px !important; }
}

/* -----------------------------------------------------------------------------
   3. 日本語見出しの折り返し
   word-break:auto-phrase は文節単位で折り返す（対応ブラウザのみ）。
   非対応環境では text-wrap:balance が行長を揃える。どちらも安全に劣化する。
   -------------------------------------------------------------------------- */
h1, h2, h3,
.bk-h-center, .bk-h-accent, .bk-h-badge,
.pg-hero__title, .d-hero__title, .d-biz__name, .d-biz__sub-name,
.bk-vision__title, .bk-summary__group-title, .bk-summary__title,
.pg-def__term, .pg-paths__title, .pg-jobs__title, .d-contact__who,
.bk-points__title, .bk-merit__title, .bk-cards__title, .pg-note__lead {
  word-break: auto-phrase;
  text-wrap: balance;
}
/* 導入文も1行に1語だけ残るのを防ぐ */
.pg-hero__lead, .d-hero__lead, .pg-lead { text-wrap: pretty; }

/* -----------------------------------------------------------------------------
   4. 見出しと本文のサイズ差の調整
   従来：見出し4.8rem／本文1.7rem（差が2.8倍）→ 見出しを下げ、本文を上げる
   -------------------------------------------------------------------------- */
.bk-h-center { font-size: 4rem; margin-bottom: 48px; }
.bk-h-accent { font-size: 3.6rem; margin-bottom: 88px; }
.pg-hero__title { font-size: 4rem; }
.d-biz__name { font-size: 3.8rem; }
.d-hero--message .d-hero__title { font-size: 4.6rem; }

.bk-summary__text, .pg-def__desc, .bk-merit__text, .pg-note__text { font-size: 1.75rem; line-height: 1.95; }
.bk-vision__text { font-size: 1.85rem; }
.pg-lead { font-size: 1.85rem; line-height: 1.95; }

@media (max-width: 767px) {
  .bk-h-center { font-size: 2.6rem; margin-bottom: 32px; }
  .bk-h-accent { font-size: 2.6rem; margin-bottom: 64px; }
  .pg-hero__title { font-size: 2.6rem; }
  .d-biz__name { font-size: 2.6rem; }
  .d-hero--message .d-hero__title { font-size: 3rem; }
  .bk-summary__text, .pg-def__desc, .bk-merit__text, .pg-note__text,
  .bk-vision__text, .pg-lead { font-size: 1.65rem; line-height: 1.9; }
}

/* -----------------------------------------------------------------------------
   5. 写真の比率を揃える
   画像ごとに高さがバラバラだったため、役割ごとに aspect-ratio を固定する。
   -------------------------------------------------------------------------- */
.pg-hero__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.bk-merit__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.bk-service__media--rounded img { aspect-ratio: 4 / 3; object-fit: cover; }
.d-biz__split > figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.d-biz__sub-media img { aspect-ratio: 16 / 10; object-fit: contain; }
@media (max-width: 767px) {
  .pg-hero__media img,
  .bk-merit__media img,
  .bk-service__media--rounded img { aspect-ratio: 3 / 2; }
}

/* 人物写真は顔が切れないよう上寄りでトリミングする */
.bk-person__media img { object-position: center 28%; }

/* -----------------------------------------------------------------------------
   6. CTAの優先順位
   1画面に同じ強さのボタンを並べない。第2CTAは輪郭のみにする。
   -------------------------------------------------------------------------- */
.pg-actions .bk-btn + .bk-btn,
.d-hero__actions .bk-btn + .bk-btn {
  background-color: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
html[data-theme="dark"] .pg-actions .bk-btn + .bk-btn,
html[data-theme="dark"] .d-hero__actions .bk-btn + .bk-btn { color: #fff; border-color: #fff; }

/* -----------------------------------------------------------------------------
   7. ページ末尾の「次の行動」を全ページ共通の型にする
   -------------------------------------------------------------------------- */
.pg-next { background-color: var(--navy); color: var(--white); padding-block: 88px; }
.pg-next__inner { max-width: var(--w-1000); margin-inline: auto; padding-inline: 20px; }
.pg-next__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--white);
}
.pg-next__lead { margin: 0 0 36px; max-width: var(--measure); font-size: 1.7rem; line-height: 1.9; color: var(--white); }
.pg-next__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg-next__link {
  position: relative; top: 0;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; padding: 24px 26px;
  border: 2px solid rgba(255,255,255,.6); border-radius: 14px;
  color: var(--white); transition: all .4s;
}
.pg-next__link:hover { top: -3px; background-color: rgba(255,255,255,.08); }
.pg-next__link b { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; }
.pg-next__link span { font-size: 1.5rem; line-height: 1.7; }
@media (max-width: 767px) {
  .pg-next { padding-block: 56px; }
  .pg-next__title { font-size: 2.2rem; }
  .pg-next__list { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   8. スマートフォンでの縦圧縮
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pg-hero { padding-block: 28px 32px; }
  .pg-anchornav__inner { padding: 16px 20px; }
  .bk-vision { padding: 32px 18px 36px; }
  .bk-vision__item { padding-top: 32px; }
  .bk-vision__text { margin-bottom: 32px; }
  .bk-points { gap: 16px; }
  .bk-points__item { padding: 22px 18px; }
  .bk-summary__group + .bk-summary__group { margin-top: 40px; padding-top: 40px; }
  .bk-summary__item + .bk-summary__item { margin-top: 28px; }
  .pg-def__item { padding: 18px 0; }
  .bk-articles__list { gap: 28px; }
  .d-biz__main { padding-block: 36px 32px; }
  .d-biz__subs { gap: 20px; padding-bottom: 36px; }
}

/* -----------------------------------------------------------------------------
   9. Design Lab 専用ナビ（カテゴリ整理版）
   本番ナビとは別物。ページ数が増えたため、開閉式のカテゴリ一覧にする。
   -------------------------------------------------------------------------- */
.lab-bar__current { margin: 0; font-size: 1.3rem; color: var(--lab-muted); }
.lab-bar__current b { color: var(--lab-text); }
.lab-bar__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--lab-line); border-radius: 99px;
  background-color: var(--lab-accent); color: #0b1116;
  font: inherit; font-size: 1.3rem; font-weight: 700;
  cursor: pointer;
}
.lab-bar__toggle::after {
  content: ""; width: 0; height: 0;
  border-inline: 5px solid transparent; border-top: 6px solid currentColor;
  transition: transform .2s;
}
.lab-bar__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.lab-bar__menu { border-top: 1px solid var(--lab-line); background-color: var(--lab-bg-soft); }
.lab-bar__menu[hidden] { display: none; }
.lab-menu__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 28px;
  max-width: 1400px; margin-inline: auto; padding: 24px 20px 32px;
}
.lab-menu__cat {
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--lab-accent);
  font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; color: var(--lab-accent);
}
.lab-menu__list { margin: 0; padding: 0; list-style: none; }
.lab-menu__list li + li { margin-top: 2px; }
.lab-menu__list a {
  display: block; padding: 7px 10px; border-radius: 6px;
  color: var(--lab-text); font-size: 1.35rem; line-height: 1.5; text-decoration: none;
}
.lab-menu__list a:hover { background-color: rgba(255,255,255,.08); }
.lab-menu__list a[aria-current="page"] { background-color: var(--lab-accent); color: #0b1116; font-weight: 700; }
.lab-menu__todo { display: inline-block; margin-left: 6px; font-size: 1.1rem; color: var(--lab-warn); }
@media (max-width: 767px) {
  .lab-bar__current { width: 100%; order: 3; }
  .lab-menu__grid { grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 16px 24px; }
}

/* -----------------------------------------------------------------------------
   10. Design Lab の未確定マーカー
   -------------------------------------------------------------------------- */
.lab-todo {
  display: block;
  max-width: var(--w-1000);
  margin: 24px auto 0;
  padding: 16px 20px;
  border: 2px dashed #b8483c;
  border-radius: 10px;
  background-color: #fff8f7;
  font-size: 1.45rem;
  line-height: 1.8;
  color: #7a2f26;
}
.lab-todo b { font-weight: 700; }
html[data-theme="dark"] .lab-todo { background-color: #2a1a18; color: #ffb4a8; border-color: #ffb4a8; }

/* =============================================================================
   11. pg-acc — アコーディオン（おでかけくんFAQ）
   button + aria-expanded + aria-controls。初期状態は全て開いた状態にしており、
   JavaScriptが無効でも全文が読める（内容へのアクセスを妨げない）。
   ========================================================================== */
.pg-acc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.pg-acc__item { border-bottom: 1px solid var(--line-light); }
.pg-acc__head { margin: 0; }
.pg-acc__btn {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; padding: 22px 4px;
  border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.pg-acc__q, .pg-acc__a {
  flex: 0 0 auto; width: 1.6em;
  font-family: var(--font-num); font-size: 1.8rem; font-weight: 700; line-height: 1.5;
  color: #b8483c;
}
.pg-acc__label {
  flex: 1 1 auto;
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1.7;
  color: var(--ink-soft); word-break: auto-phrase;
}
.pg-acc__icon { flex: 0 0 auto; position: relative; width: 20px; height: 20px; margin-top: .4em; }
.pg-acc__icon::before, .pg-acc__icon::after {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 20px; height: 2px; background-color: var(--navy); transition: transform .2s;
}
.pg-acc__icon::after { transform: rotate(90deg); }
.pg-acc__btn[aria-expanded="true"] .pg-acc__icon::after { transform: rotate(0deg); }
.pg-acc__panel[hidden] { display: none; }
.pg-acc__body {
  display: flex; gap: 14px;
  margin: 0; padding: 0 4px 24px;
  max-width: var(--measure-wide);
  font-size: 1.7rem; line-height: 1.95; color: var(--ink-body);
}
.pg-acc__tools { display: flex; gap: 10px; margin: 0 0 20px; }
.pg-acc__all {
  padding: 8px 18px; border: 2px solid var(--navy); border-radius: 99px;
  background: transparent; color: var(--navy); font: inherit; font-size: 1.4rem; font-weight: 700; cursor: pointer;
}
.pg-acc__all:hover { background-color: var(--navy); color: var(--white); }
html[data-theme="dark"] .pg-acc__all { border-color: #fff; color: #fff; }
html[data-theme="dark"] .pg-acc__icon::before,
html[data-theme="dark"] .pg-acc__icon::after { background-color: #fff; }
@media (max-width: 767px) {
  .pg-acc__btn { padding: 18px 2px; gap: 10px; }
  .pg-acc__label { font-size: 1.65rem; }
  .pg-acc__body { font-size: 1.6rem; padding-bottom: 18px; }
}

/* =============================================================================
   12. pg-newslist — お知らせ一覧（検索性・日付・分類が中心）
   ========================================================================== */
.pg-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.pg-filter a {
  display: block; padding: 9px 18px;
  border: 2px solid var(--line); border-radius: 99px;
  font-size: 1.45rem; font-weight: 700; color: var(--ink-soft);
}
.pg-filter a[aria-current="true"] { background-color: var(--navy); border-color: var(--navy); color: var(--white); }
.pg-filter a[aria-current="true"]::before { content: "✓ "; }
.pg-filter a:hover { border-color: var(--navy); }

.pg-pager { display: flex; justify-content: center; gap: 8px; margin: 48px 0 0; padding: 0; list-style: none; }
.pg-pager a, .pg-pager span {
  display: flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 10px 14px;
  border: 1px solid var(--cat-navy); border-radius: 6px;
  font-size: 1.6rem; color: var(--ink-soft);
}
.pg-pager [aria-current="page"] { background-color: var(--cat-navy); color: var(--white); border-color: var(--cat-navy); }

/* お知らせ詳細：公式情報として読みやすく（記事カード風にしない） */
.pg-article { max-width: 780px; margin-inline: auto; }
.pg-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 18px; }
.pg-article__date { font-family: var(--font-num); font-size: 1.6rem; color: var(--slate); }
.pg-article__cat { padding: 4px 14px; border: 1px solid var(--navy); border-radius: 4px; font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.pg-article__title {
  margin: 0 0 40px; padding-bottom: 28px; border-bottom: 2px solid var(--line-light);
  font-family: var(--font-heading); font-size: 3.2rem; font-weight: 600; line-height: 1.6;
  word-break: auto-phrase;
}
.pg-article__body > * { max-width: 100%; }
.pg-article__body p { margin: 0 0 1.8em; font-size: 1.75rem; line-height: 2; }
.pg-article__body h2 {
  margin: 2.4em 0 .8em; font-family: var(--font-heading);
  font-size: 2.2rem; font-weight: 700; line-height: 1.6;
  padding-left: .7em; border-left: 6px solid var(--coral);
}
.pg-article__body ul { margin: 0 0 1.8em; padding-left: 1.4em; font-size: 1.75rem; line-height: 2; }
.pg-article__foot { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--line-light); }
@media (max-width: 767px) {
  .pg-article__title { font-size: 2.2rem; margin-bottom: 28px; padding-bottom: 20px; }
  .pg-article__body p, .pg-article__body ul { font-size: 1.65rem; }
}