@charset "UTF-8";
/* 会社情報（company.html・message.html）専用（子CC-D）
   base.css のトークンだけを使う。新しい色・影・角丸・グラデーションは作らない */

/* 改行の出し分け（base の br-pc / br-sp で足りない帯だけ）
   co-br-narrow＝1023px 以下で改行（見出しが36px以下になる帯）
   co-br-notab ＝タブレット帯（768〜1023px）だけ改行しない（見出しパネルが狭い帯） */
.co-br-narrow { display: none; }
@media (max-width: 1023px) { .co-br-narrow { display: inline; } }
@media (min-width: 768px) and (max-width: 1023px) { .co-br-notab { display: none; } }

/* ==========================================================================
   company.html
   ========================================================================== */

/* ---- 理念：存在意義を大きなセリフで1文 → 使命と行動指針を罫の一覧 ---- */
.purpose { margin-top: 40px; text-align: center; }
/* 本文は中央に置いた塊の中で左揃え（アンカー「私たちの想い」の組み。PC は行を文で区切る） */
.purpose__body { display: inline-block; max-width: 620px; margin-top: 32px; text-align: left; font-size: 17px; line-height: 1.9; color: var(--text); }

/* 行末に1〜2文字だけ残る行を減らす（対応ブラウザのみ。非対応でも通常の折り返しになるだけ） */
.purpose__body, .creed__text, .value__text, .msg__body p, .page-hero__desc, .checker__text, .co-photo__cap { text-wrap: pretty; }

.creed { max-width: 1000px; margin: 80px auto 0; border-top: 1px solid var(--ink); }
.creed__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.creed__h { font-size: 16px; line-height: 1.75; font-weight: 500; letter-spacing: .075em; color: var(--ink); }
.creed__lead { font-family: var(--ff-serif); font-weight: 300; font-size: 30px; line-height: 1.45; color: var(--ink); }
.creed__text { margin-top: 16px; font-size: 16px; line-height: 1.85; color: var(--text); }

/* 行動指針（番号は振らない）＝行の中の小さな罫の一覧 */
.value { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; }
.value:first-child { padding-top: 0; }
.value:last-child { padding-bottom: 0; }
.value + .value { border-top: 1px solid var(--line); }
.value__title { font-family: var(--ff-serif); font-weight: 300; font-size: 26px; line-height: 1.4; color: var(--ink); }
.value__text { font-size: 16px; line-height: 1.85; color: var(--text); }

@media (max-width: 1279px) { .value__text br { display: none; } }  /* 文の区切りの改行は、幅が足りない帯では外す */
@media (max-width: 1023px) {
  .creed__lead { font-size: 26px; }
  .value { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 767px) {
  .purpose { margin-top: 28px; }
  .purpose__body { display: block; max-width: none; margin-top: 24px; font-size: 15px; line-height: 1.9; }
  .creed { margin-top: 48px; }
  .creed__row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .creed__lead { font-size: 22px; line-height: 1.55; }
  .creed__text { font-size: 15px; }
  .value { padding: 18px 0; }
  .value__title { font-size: 21px; }
  .value__text { font-size: 15px; }
}

/* ---- 数字：縦罫を長めに取る（アンカー「私たちの想い」の組み） ---- */
.co-stats .stat { padding: 40px 24px 44px; }
.co-stats .stat__note { margin-top: 6px; }
@media (max-width: 1023px) { .co-stats .stat { padding: 32px 10px 36px; } }
@media (max-width: 767px) { .co-stats .stat { padding: 24px 8px 26px; } }

/* ---- 左に見出し・右に中身（会社概要・沿革）。PC は見出しが追従する ---- */
.co-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: start; }
.co-split__head { position: -webkit-sticky; position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 1023px) {
  .co-split { grid-template-columns: 1fr; gap: 24px; }
  .co-split__head { position: static; }
}

.co-spec__note { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; font-weight: 400; color: var(--mute); }

/* ---- 沿革：左に年月（桁を揃える）、右に出来事。縦の1px罫と小さな青い点 ---- */
.history__item { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.history__date {
  padding: 0 24px 36px 0;
  font-size: 16px; line-height: 28px; font-weight: 400; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.history__text { position: relative; padding: 0 0 36px 40px; font-size: 16px; line-height: 28px; color: var(--text); }
.history__text::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.history__text::after { content: ""; position: absolute; left: -4px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.history__item:first-child .history__text::before { top: 14px; }
.history__item:last-child .history__date,
.history__item:last-child .history__text { padding-bottom: 0; }
.history__item:last-child .history__text::before { bottom: auto; height: 14px; }
@media (max-width: 767px) {
  .history__item { grid-template-columns: 96px minmax(0, 1fr); }
  .history__date { padding: 0 12px 28px 0; font-size: 14px; line-height: 26px; }
  .history__text { padding: 0 0 28px 24px; font-size: 15px; line-height: 26px; }
  .history__text::after { top: 9px; }
  .history__item:first-child .history__text::before { top: 13px; }
  .history__item:last-child .history__text::before { height: 13px; }
}

/* ---- 本社の執務室：16:9 を内容幅いっぱいに＋キャプション ---- */
.co-photo-sec { padding-bottom: 0; }
.co-photo__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--gray-3); }
.co-photo__media img { width: 100%; height: 100%; object-fit: cover; }
.co-photo__cap { margin-top: 14px; font-size: 13px; line-height: 1.7; font-weight: 400; color: var(--mute); }

/* ==========================================================================
   message.html
   ========================================================================== */

/* 見出しの肖像（4:5）は顔の位置で切り抜く。SP は 16:9 だと頭が切れるので 4:3 に */
.msg-hero .page-hero__media img { object-position: center 20%; }
@media (max-width: 767px) { .msg-hero .page-hero__media { aspect-ratio: 4 / 3; } }

.msg__statement { margin-bottom: 48px; }
@media (max-width: 767px) { .msg__statement { margin-bottom: 32px; } }

/* 本文中の引用（1回だけ）：上に黒罫・下に灰罫、セリフ */
.prose > .msg-quote { margin: 56px 0; padding: 32px 0 34px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.msg-quote p { font-family: var(--ff-serif); font-weight: 300; font-size: 30px; line-height: 1.5; color: var(--ink); }
.prose > .msg-quote + * { margin-top: 0; }
@media (max-width: 767px) {
  .prose > .msg-quote { margin: 40px 0; padding: 24px 0 26px; }
  .msg-quote p { font-size: 22px; }
}

/* 署名：右寄せのセリフ */
.msg-sign { margin-top: 56px; text-align: right; font-family: var(--ff-serif); color: var(--ink); }
.msg-sign__co { font-size: 15px; line-height: 1.6; font-weight: 400; }
.msg-sign__name { margin-top: 8px; font-size: 15px; line-height: 1.4; font-weight: 400; }
.msg-sign__name span { margin-left: 1em; font-size: 28px; letter-spacing: .12em; }
@media (max-width: 767px) {
  .msg-sign { margin-top: 40px; }
  .msg-sign__co, .msg-sign__name { font-size: 14px; }
  .msg-sign__name span { font-size: 24px; }
}

/* 略歴（base の .sec--flush-top は SP で .sec の上下余白に上書きされるため、ここで上を0に固定） */
.msg-profile-sec { padding-top: 0; }
.msg-profile { padding-top: 16px; }
.msg-profile__name { margin: 20px 0 24px; font-family: var(--ff-serif); font-size: 26px; line-height: 1.3; font-weight: 500; letter-spacing: .08em; color: var(--ink); }
.msg-profile__kana { margin-left: 16px; font-family: var(--ff-sans); font-size: 12px; font-weight: 400; letter-spacing: .06em; color: var(--mute); }
.msg-profile__spec th { width: 160px; }
.msg-profile__back { margin-top: 32px; }
@media (max-width: 767px) {
  .msg-profile { padding-top: 16px; }
  .msg-profile__name { margin: 16px 0 16px; font-size: 22px; }
}