@charset "UTF-8";

/* =========================================================
   company.css - 会社概要ページ専用スタイル
   ========================================================= */

/* ===== 会社情報レイアウト（左：縦書きタイトル／右：テーブル＋マップ） =====
   ベースは縦積み（タイトル→テーブル→マップ）、768px以上で
   左に縦書きタイトル、右に本体（テーブル＋マップ）を横並びにする。
   ※ トップの news / works の縦書きタイトルレイアウトに合わせる。 */
.company-info__layout {
    max-width: var(--section-width-sm);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .company-info__layout {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-lg);
        max-width: var(--section-width-lg);
    }
}

/* 縦書きタイトル（company-head-v.png）。
   トップの news / works の縦書きタイトルと同じ、
   白背景・角丸ボックスに frame.svg の飾り枠を重ねる。
   ベースは中央寄せで上に、768px以上で左カラム（幅固定）。
   ※ 飾り枠は .home-works__title::before / .news__title::before と同じ border-image。
   ※ 親に overflow:hidden を付けないこと（border-image が切られる）。 */
.company-info__title {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--spacing-md);
    padding: 1.25rem;
    background-color: var(--color-cream-white);
    border-radius: var(--radius-lg);
}

.company-info__title::before {
    content: "";
    --frame-inset: 6px;

    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    border: 34px solid transparent;
    border-image: url("../images/frame.svg") 34 35 / 34px 35px / 0 stretch;
    pointer-events: none;
}

/* ベース（〜767px）：横書き見出し画像（company-head-h.png・幅基準）。
   768px以上：縦書き見出し画像（company-head-v.png・高さ基準）に切り替える。
   ※ トップの news / works と同じ出し分け。 */
.company-info__title-img-h {
    display: block;
    width: 100%;
    height: auto;
    max-width: 212px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .company-info__title-img-h {
        max-width: 240px;
    }
}

.company-info__title-img-v {
    display: none;
}

@media (min-width: 768px) {
    .company-info__title {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    /* ベースの横書きを非表示、縦書きを表示 */
    .company-info__title-img-h {
        display: none;
    }

    .company-info__title-img-v {
        display: block;
        width: auto;
        height: auto;
        max-height: 280px;
        margin-inline: auto;
    }
}

/* 右カラム本体（テーブル→マップを縦積み） */
.company-info__main {
    width: 100%;
}

@media (min-width: 768px) {
    .company-info__main {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* イメージマップ（テーブル内・指定番号の下の colspan 行） */
.company-table__map-row td {
    padding-top: 1.25rem;
}

/* 小見出し（イメージマップ）と画像：ベースは縦並び・中央寄せ、576px以上で横並び */
.company-info__map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 576px) {
    .company-info__map {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
}

.company-info__illust-img {
    min-width: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

@media (min-width: 576px) {
    .company-info__illust-img {
        flex: 0 0 75%;
    }
}

/* イメージマップの小見出し（576px以上で画像と横並び・th と同じ 25%幅）
   ベース（〜575px）：縦並びなので中央揃えにする。 */
.company-info__illust-title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    text-align: center;
}

/* ベース（〜575px）：「イラストMAP」を1行にする（<br> を無効）。
   576px以上（狭い 25%列）では下の @media で <br> を復活させて2行に戻す。 */
.company-info__illust-title br {
    display: none;
}

@media (min-width: 576px) {
    .company-info__illust-title {
        flex: 0 0 25%;
        text-align: left;
    }

    .company-info__illust-title br {
        display: inline;
    }
}

/* ===== 会社情報テーブルの囲い（クリーム地＋frame.svg の飾り枠） =====
   施工事例カード・FAQカード・見出しボックスと同じ飾り枠。
   ※ 飾り枠は border-image の9スライス（.home-works__title::before 等と同じ）。
   ※ 親に overflow:hidden を付けないこと（border-image が切られる）。 */
.company-table__wrap {
    position: relative;
    padding: 2rem;
    background-color: var(--color-cream-white);
    border-radius: var(--radius-lg);
}

@media (min-width: 576px) {
    .company-table__wrap {
        padding: 2.5rem;
    }
}

.company-table__wrap::before {
    content: "";
    --frame-inset: 8px;

    position: absolute;
    inset: var(--frame-inset);
    z-index: 1;
    border: 34px solid transparent;
    border-image: url("../images/frame.svg") 34 35 / 34px 35px / 0 stretch;
    pointer-events: none;
}

/* テーブルのすぐ上に置く帯画像（company-frame.webp）。
   囲いの内側・テーブルの上に全幅で表示し、下に余白を取る。
   ※ 飾り枠（::before・z-index:1）と重なっても見えるよう前面に出す。 */
.company-table__frame-img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table th,
.company-table td {
    text-align: left;
    vertical-align: top;
    padding: 1.1rem 0.5rem;
    border-bottom: 2px dashed var(--color-border);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
}

@media (min-width: 768px) {

    .company-table th,
    .company-table td {
        font-size: 1.05rem;
    }
}

.company-table tr:last-child th,
.company-table tr:last-child td {
    border-bottom: none;
}

.company-table th {
    width: 25%;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* 下線を消す行（電話番号→携帯電話を1つのまとまりに見せる）。 */
.company-table__row--no-border th,
.company-table__row--no-border td {
    border-bottom: none;
}

/* 電話番号セルの注記（営業お断り）。番号の下に小さく添える。 */
.company-table__note {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.company-table td a {
    color: var(--color-primary);
    transition: color var(--transition);
}

.company-table td a:hover {
    color: var(--color-primary-dark);
}