/* =================================================================
   dep-about.css ― 当社について（親ハブ）ページ専用
   スコープ：.dep-about-page（body_classで付与）
   依存：dep-tokens.css / dep-base.css
        （.dep-sec / .dep-wrap / .dep-eyebrow / .dep-sec-title /
          .dep-sec-head / .dep-sec--white / .dep-sec--bg / .dep-ph / .dep-crumb）
   方針：共通プリミティブは再定義しない。本ページ固有のコンポーネントのみ。
   全幅：recruit/community/company と同じ手法（#content生成り＋帯は100vwで全幅化）。
================================================================= */

/* ページ地色＝生成り（帯のみ全幅で上書き／clipはdep-base済み） */
.dep-about-page #content{ background:var(--dep-bg); }

/* Astra .entry-content の既定マージン打ち消し */
.dep-about-page .entry-content p,
.dep-about-page .entry-content h1,
.dep-about-page .entry-content h2,
.dep-about-page .entry-content h3{ margin:0; }

/* ===== パンくず＝左揃え（共通仕様#4） ===== */
.dep-about-page .dep-crumb ol{ justify-content:flex-start; text-align:left; }

/* ===== ① リード帯（H1・センター） ===== */
.dep-about-page .dep-about-lead{ text-align:center; padding:24px 0 56px; max-width:none !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
.dep-about-page .dep-about-lead__ttl{
  font-size:clamp(26px,3.6vw,32px); font-weight:700; line-height:1.4;
  letter-spacing:.02em; margin:14px 0 0;
}
.dep-about-page .dep-about-lead__copy{ max-width:760px; margin:20px auto 0; }
.dep-about-page .dep-about-lead__copy p{ font-size:15.5px; color:#4a4a4a; line-height:1.95; margin:0; }

/* ===== ② 4カードグリッド（子ページ導線） ===== */
.dep-about-page .dep-about-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px;
  max-width:920px; margin:0 auto;
}
.dep-about-page .dep-about-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--dep-line); border-radius:var(--dep-radius,12px);
  overflow:hidden; text-decoration:none !important; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dep-about-page .dep-about-card:hover{
  transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-color:var(--dep-primary-light);
}
.dep-about-page .dep-about-card__photo{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.dep-about-page .dep-about-card__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.dep-about-page .dep-about-card__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.dep-about-page .dep-about-card__en{
  font-family:var(--dep-en); font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--dep-primary); text-transform:uppercase;
}
.dep-about-page .dep-about-card__body h3{ font-size:19px; font-weight:700; line-height:1.5; margin:6px 0 10px; }
.dep-about-page .dep-about-card__body p{ font-size:14px; line-height:1.85; color:#555; margin:0 0 16px; }
/* 「詳しく見る →」共通仕様#3：青テキスト＋矢印、ピル背景なし、hoverで矢印右移動 */
.dep-about-page .dep-about-card__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  color:var(--dep-primary); font-weight:700; font-size:14.5px; line-height:1.6;
}
.dep-about-page .dep-about-card__ar{ transition:transform .15s ease; }
.dep-about-page .dep-about-card:hover .dep-about-card__more{ color:var(--dep-primary-light); }
.dep-about-page .dep-about-card:hover .dep-about-card__ar{ transform:translateX(4px); }

/* ===== ③ 理念（アクセント帯 #daeaf7・全幅／共通仕様#1） ===== */
.dep-about-page .dep-about-vision{
  max-width:none !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; background:#daeaf7;
}
.dep-about-page .dep-about-vision .dep-eyebrow{ color:#0081CC; }
.dep-about-page .dep-about-vision .dep-sec-title{ color:#1E293B; }
.dep-about-page .dep-about-vision__list{
  max-width:760px; margin:8px auto 0; display:flex; flex-direction:column; gap:18px;
}
.dep-about-page .dep-about-vision__item{
  background:rgba(255,255,255,.55); border:1px solid #c3dcef; border-radius:12px;
  padding:22px 26px; text-align:center;
}
.dep-about-page .dep-about-vision__item p{
  font-size:clamp(16px,2vw,18px); font-weight:600; line-height:1.85; color:#1E293B;
}
.dep-about-page .dep-about-vision__item em{ font-style:normal; color:var(--dep-primary); }

/* ===== ④ 代表メッセージ（写真＋本文＋署名） ===== */
.dep-about-page .dep-about-message__grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center;
  max-width:1000px; margin:0 auto;
}
.dep-about-page .dep-about-message__photo{
  aspect-ratio:4/5; border-radius:var(--dep-radius,12px); overflow:hidden;
}
.dep-about-page .dep-about-message__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dep-about-page .dep-about-message__body .dep-sec-title{ margin-top:6px; margin-bottom:18px; }
.dep-about-page .dep-about-message__body p{ font-size:15px; color:#444; line-height:1.95; margin:0 0 14px; }
.dep-about-page .dep-about-message__sign{
  margin-top:22px; font-size:14px; color:#555; line-height:1.6;
}
.dep-about-page .dep-about-message__sign b{ font-size:19px; font-weight:700; color:var(--dep-text); margin-left:6px; }

/* ===== レスポンシブ ===== */
@media (max-width:860px){
  .dep-about-page .dep-about-grid{ grid-template-columns:1fr; gap:18px; max-width:520px; }
}
@media (max-width:768px){
  .dep-about-page .dep-about-lead{ padding:16px 0 40px; }
  .dep-about-page .dep-about-lead__ttl{ font-size:26px; }
  .dep-about-page .dep-about-message__grid{ grid-template-columns:1fr; gap:24px; }
  .dep-about-page .dep-about-message__photo{ order:-1; max-width:320px; margin-inline:auto; aspect-ratio:4/4; }
}

/* =================================================================
   ⑤ ディパーチャーズができること（3本柱＋事例）― 2026/9/7 追加
   原稿＝天野社長ご作成（2026/9/6 受領）
   🔴 このページの p / h3 は冒頭で「.dep-about-page .entry-content p{margin:0}」（詳細度 0,2,1）
      に打ち消されている。ここの余白指定は必ず 0,2,1 以上にすること
      （＝クラス2つ＋要素、または .entry-content を含める）。
      community ページで同じ競合により中央寄せが効かなくなった事例あり（2026/9/7 修正済み）。
================================================================= */
.dep-about-page .entry-content p.dep-about-can__lead{
  position:relative;
  max-width:1000px;              /* ＝ .dep-about-can__list と同じ幅（01の左端／本文の右端に揃う） */
  margin:0 auto 58px;            /* 58px＝吹き出しの下ヒゲ分を見込んだ余白 */
  padding:20px 24px;
  text-align:center;
  font-size:15.5px; color:#4a4a4a; line-height:1.95;
  border:1px dotted #7FB9E4;                                    /* フォールバック */
  border-color:color-mix(in srgb, var(--dep-primary) 55%, #fff);
}
/* 下向きの吹き出しヒゲ＝45°回転した正方形の2辺だけを点線に。
   背景を白で塗ることで、箱の下線がヒゲの幅ぶん切れて吹き出しに見える。
   ⚠ 白は .dep-sec--white（このセクションの地色）に合わせている。地色を変えたら一緒に直すこと。 */
.dep-about-page .entry-content p.dep-about-can__lead::after{
  content:""; position:absolute; left:50%; bottom:-12px;
  width:22px; height:22px;
  transform:translateX(-50%) rotate(45deg);
  background:#fff;
  border-right:1px dotted #7FB9E4;
  border-bottom:1px dotted #7FB9E4;
  border-color:color-mix(in srgb, var(--dep-primary) 55%, #fff);
  pointer-events:none;
}

.dep-about-page .dep-about-can__list{
  max-width:1000px; margin:0 auto;
}
.dep-about-page .dep-about-can__item{
  display:grid; grid-template-columns:230px 1fr; gap:40px; align-items:start;
}
.dep-about-page .dep-about-can__item + .dep-about-can__item{
  margin-top:52px; padding-top:52px; border-top:1px solid var(--dep-line);
}

/* 見出し列 */
.dep-about-page .dep-about-can__num{
  display:block; font-family:var(--dep-en); font-size:38px; font-weight:700;
  line-height:1; color:var(--dep-primary-light);
}
.dep-about-page .dep-about-can__head h3{
  font-size:24px; font-weight:700; line-height:1.4; margin:14px 0 0;
}
.dep-about-page .dep-about-can__ttl-sm{
  display:block; font-size:17px; font-weight:700; line-height:1.5;
}

/* 本文列 */
.dep-about-page .dep-about-can__body p{
  font-size:15px; color:#444; line-height:1.95; margin:0 0 16px;
}
.dep-about-page .dep-about-can__body p:last-child{ margin-bottom:0; }
.dep-about-page .dep-about-can__body p.dep-about-can__close{
  color:#333; font-weight:600;
}
/* 「くわしく見る →」共通仕様#3 */
.dep-about-page .dep-about-can__body p.dep-about-can__more{ margin-top:20px; }
.dep-about-page .dep-about-can__more a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--dep-primary); font-weight:700; font-size:14.5px; line-height:1.6;
  text-decoration:none !important;
}
.dep-about-page .dep-about-can__ar{ transition:transform .15s ease; }
.dep-about-page .dep-about-can__more a:hover{ color:var(--dep-primary-light); }
.dep-about-page .dep-about-can__more a:hover .dep-about-can__ar{ transform:translateX(4px); }

/* 事例ボックス */
.dep-about-page .dep-about-case{
  background:var(--dep-bg); border:1px solid var(--dep-line);
  border-radius:var(--dep-radius,12px); padding:24px 26px; margin-top:24px;
}
.dep-about-page .dep-about-case__en{
  font-family:var(--dep-en); font-size:11px; font-weight:600; letter-spacing:.12em;
  color:var(--dep-primary); text-transform:uppercase;
}
.dep-about-page .dep-about-case h4{
  font-size:17px; font-weight:700; line-height:1.6; margin:6px 0 14px;
}
.dep-about-page .dep-about-case p{
  font-size:14.5px; color:#4a4a4a; line-height:1.95; margin:0 0 12px;
}
.dep-about-page .dep-about-case p:last-child{ margin-bottom:0; }
.dep-about-page .dep-about-case p.dep-about-case__close{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--dep-line);
  color:#333; font-weight:600;
}

/* レスポンシブ */
@media (max-width:860px){
  .dep-about-page .dep-about-can__item{ grid-template-columns:1fr; gap:16px; }
  .dep-about-page .dep-about-can__head{ display:flex; align-items:baseline; gap:14px; }
  .dep-about-page .dep-about-can__head h3{ margin:0; }
  .dep-about-page .dep-about-can__ttl-sm{ display:inline; font-size:inherit; }
}
@media (max-width:768px){
  .dep-about-page .entry-content p.dep-about-can__lead{ padding:16px 16px; margin-bottom:44px; font-size:14.5px; }
  .dep-about-page .dep-about-can__num{ font-size:30px; }
  .dep-about-page .dep-about-can__head h3{ font-size:20px; }
  .dep-about-page .dep-about-case{ padding:20px 18px; }
}