/* =========================================================
   T-M・サポート — 会社情報ページ専用スタイル

   company.php でのみ読み込む。他ページには影響しない。

   方向：地元で長く付き合える住宅会社のページ。
   角丸カード・影・グラデーション・絵文字アイコンは使わない。
   写真・余白・罫線・番号・文字サイズの強弱だけで情報を整理する。
   ========================================================= */

:root {
    --cm-ink: #16233A;      /* ロゴの紺を落とした見出し色 */
    --cm-navy: #2C4773;     /* ロゴの紺そのまま */
    --cm-body: #4E5966;
    --cm-mute: #5F6874;
    --cm-line: #DFD8CA;
    --cm-line-soft: #EBE5D9;
    --cm-gold: #8A710F;
    --cm-rule: #DBBD24;
    --cm-paper: #FBF8F2;
}

.cm { background: #fff; }

.cm-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: 24px;
}

/* ---------------------------------------------------------
   セクション見出し ── 短い罫線＋和文だけ。英字は添えない。
   --------------------------------------------------------- */
.cm-h {
    font-size: clamp(21px, 3vw, 30px);
    font-weight: 800;
    color: var(--cm-ink);
    letter-spacing: .02em;
    line-height: 1.6;
    margin: 0 0 14px;
    padding-top: 22px;
    border-top: 2px solid var(--cm-ink);
}
.cm-h-note {
    word-break: auto-phrase;
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 700;
    color: var(--cm-navy);
    line-height: 1.9;
    margin: 0 0 16px;
}
.cm-h-lead {
    font-size: 15.5px;
    line-height: 2.1;
    color: var(--cm-body);
    max-width: 47em;
    margin: 0;
}

/* ---------------------------------------------------------
   代表メッセージ ── ページの主役。左に文章、右に大きな写真。
   --------------------------------------------------------- */
.cm-message { padding: clamp(44px, 7vw, 92px) 0 clamp(36px, 5vw, 64px); }

.cm-msg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 380px);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
@media (max-width: 900px) {
    .cm-msg-grid { grid-template-columns: 1fr; gap: 28px; }
}

.cm-msg-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--cm-gold);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.cm-msg-label::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--cm-rule);
    max-width: 70px;
}

/* 代表メッセージの書き出し。写真の横ではなく全幅で置く。 */
.cm-msg-open { margin-bottom: clamp(30px, 5vw, 56px); }

.cm-msg-lead {
    font-size: clamp(20px, 3.1vw, 34px);
    font-weight: 800;
    color: var(--cm-ink);
    line-height: 1.72;
    letter-spacing: .01em;
    margin: 0;
    /* 日本語を文節で折り返す（対応ブラウザのみ。非対応でも従来どおり） */
    word-break: auto-phrase;
}

.cm-msg-body p {
    font-size: 15.5px;
    line-height: 2.15;
    color: var(--cm-body);
    margin: 0 0 22px;
    max-width: 45em;
}
.cm-msg-body p strong { color: var(--cm-ink); font-weight: 700; }

/* 文中でひとこと立てる行 */
.cm-say {
    word-break: auto-phrase;
    font-size: clamp(19px, 2.6vw, 26px);
    font-weight: 800;
    color: var(--cm-navy);
    line-height: 1.8;
    margin: 30px 0 32px;
    padding-left: clamp(16px, 2vw, 22px);
    border-left: 3px solid var(--cm-rule);
}

/* 「いつもの人が来てくれる」── 代表メッセージの山場 */
.cm-say-big {
    margin: 42px 0 40px;
    padding: 0;
    border: 0;
}
.cm-say-big .sb-rule {
    display: block;
    width: 54px;
    height: 3px;
    background: var(--cm-rule);
    margin-bottom: 22px;
}
.cm-say-big .sb-quiet {
    display: block;
    font-size: clamp(16px, 2.2vw, 21px);
    font-weight: 500;
    color: var(--cm-mute);
    line-height: 1.8;
    margin-bottom: 6px;
}
.cm-say-big .sb-loud {
    display: block;
    word-break: auto-phrase;
    font-size: clamp(24px, 4.4vw, 42px);
    font-weight: 900;
    color: var(--cm-ink);
    line-height: 1.5;
    letter-spacing: -.01em;
}

/* 署名 */
.cm-sign {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--cm-line);
}
.cm-sign span { display: block; font-size: 13px; color: var(--cm-mute); letter-spacing: .06em; margin-bottom: 6px; }
.cm-sign b { font-size: 21px; font-weight: 800; color: var(--cm-ink); letter-spacing: .1em; }

/* 代表写真 */
.cm-msg-photo { margin: 0; }
@media (min-width: 901px) {
    .cm-msg-photo { position: sticky; top: 104px; }
}
.cm-msg-photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 16%;
    display: block;
}
.cm-msg-photo figcaption {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--cm-mute);
    line-height: 1.8;
}

/* ---------------------------------------------------------
   現場写真の帯 ── 実在する会社であることを示す
   --------------------------------------------------------- */
.cm-band { margin: clamp(20px, 4vw, 44px) 0 0; }
.cm-band figure { margin: 0; }
.cm-band img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
@media (max-width: 700px) { .cm-band img { aspect-ratio: 16 / 10; } }
.cm-band figcaption {
    max-width: 1180px;
    margin: 14px auto 0;
    padding-inline: 24px;
    font-size: 13px;
    color: var(--cm-mute);
    line-height: 1.9;
}

/* ---------------------------------------------------------
   理念 ── 01 / 02 / 03。カードにせず、番号と罫線で組む。
   --------------------------------------------------------- */
.cm-values { padding: clamp(48px, 7vw, 96px) 0; background: var(--cm-paper); }

.cm-values-head { margin-bottom: clamp(30px, 5vw, 52px); }

.cm-list { border-top: 1px solid var(--cm-line); }
.cm-row {
    display: grid;
    grid-template-columns: clamp(72px, 9vw, 132px) minmax(0, 1fr);
    gap: 0 clamp(18px, 3vw, 40px);
    padding: clamp(26px, 3.6vw, 40px) 0;
    border-bottom: 1px solid var(--cm-line);
    align-items: start;
}
@media (max-width: 560px) {
    .cm-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
}
/* 罫線と同じ黄（#DBBD24）だと、地の色に対して1.75しかなく数字が読みにくい。
   罫線はそのままに、文字になるここだけ濃い黄にする（3.46）。 */
.cm-num {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    color: #9C8412;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.cm-row h3 {
    margin: 0 0 12px;
    font-size: clamp(17px, 2.4vw, 22px);
    font-weight: 800;
    color: var(--cm-ink);
    letter-spacing: .02em;
    line-height: 1.6;
}
.cm-row p {
    margin: 0;
    font-size: 15px;
    line-height: 2.1;
    color: var(--cm-body);
    max-width: 45em;
}

/* ---------------------------------------------------------
   誠実を、行動に。── 4項目。カードにせず、罫線で仕切った2列。
   --------------------------------------------------------- */
.cm-action { padding: clamp(48px, 7vw, 96px) 0; }
.cm-action-head { margin-bottom: clamp(30px, 5vw, 52px); }

.cm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--cm-line);
}
@media (max-width: 760px) { .cm-grid { grid-template-columns: 1fr; } }

.cm-cell {
    padding: clamp(24px, 3.4vw, 38px) 0;
    border-bottom: 1px solid var(--cm-line);
}
/* 2列のときだけ、右列に内側の余白と縦罫を入れる */
@media (min-width: 761px) {
    .cm-cell:nth-child(odd)  { padding-right: clamp(24px, 3.4vw, 48px); border-right: 1px solid var(--cm-line); }
    .cm-cell:nth-child(even) { padding-left: clamp(24px, 3.4vw, 48px); }
}
.cm-cell .cm-cell-num {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--cm-gold);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.cm-cell h3 {
    margin: 0 0 12px;
    font-size: clamp(16.5px, 2.2vw, 20px);
    font-weight: 800;
    color: var(--cm-ink);
    line-height: 1.65;
    letter-spacing: .01em;
}
.cm-cell p {
    margin: 0;
    font-size: 15px;
    line-height: 2.1;
    color: var(--cm-body);
}

/* ---------------------------------------------------------
   会社概要 ── いちばん簡素に。細い罫線だけ。
   --------------------------------------------------------- */
.cm-outline { padding: clamp(48px, 7vw, 92px) 0 clamp(60px, 8vw, 104px); background: var(--cm-paper); }
.cm-outline-head { margin-bottom: clamp(26px, 4vw, 40px); }

.cm-table { width: 100%; border-collapse: collapse; }
.cm-table th,
.cm-table td {
    text-align: left;
    vertical-align: top;
    padding: 18px 0;
    border-bottom: 1px solid var(--cm-line);
    font-size: 15px;
    line-height: 1.95;
}
.cm-table th {
    width: 190px;
    font-weight: 700;
    color: var(--cm-mute);
    letter-spacing: .06em;
    padding-right: 24px;
}
.cm-table td { color: var(--cm-ink); }
.cm-table tr:first-child th,
.cm-table tr:first-child td { border-top: 1px solid var(--cm-line); }
/* 電話番号・メールのリンク。スマホで指が当たるよう高さ24px以上にする。 */
.cm-table td a { display: inline-block; padding: 4px 0; color: var(--cm-navy); font-weight: 700; }
.cm-table td .note { display: block; font-size: 13px; color: var(--cm-mute); margin-top: 4px; }

@media (max-width: 620px) {
    .cm-table, .cm-table tbody, .cm-table tr, .cm-table th, .cm-table td { display: block; width: auto; }
    .cm-table th {
        border-bottom: 0;
        padding: 16px 0 2px;
        font-size: 13px;
    }
    .cm-table td { padding: 0 0 16px; }
    .cm-table tr:first-child td { border-top: 0; }
    .cm-table tr:first-child th { border-top: 1px solid var(--cm-line); }
}

/* ---------------------------------------------------------
   動きは控えめに
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cm * { animation: none !important; transition: none !important; }
}