@charset "UTF-8";

/* =========================================================
   company.css - 会社概要
   ・代表挨拶（iホーム様の代表画像を使用）
   ・会社情報（表形式／iホーム様の会社概要も掲載）
   ・アクセスMAP
========================================================= */

/* ---------------------------------------------------------
   セクション見出し（このページ共通の型）
--------------------------------------------------------- */

.company-head {
    margin-bottom: var(--spacing-md);
}

.company-head .sec-en {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-gold-deep);
}

.company-head--center {
    text-align: center;
}

/* ---------------------------------------------------------
   代表挨拶
   ※ 全幅の2面（1024px以上：左＝テキスト／右＝写真）。
     事業内容ページのリード（.service-lead）と同じ型。
     1024px未満は縦積み。l-inner は使わない。
--------------------------------------------------------- */

.company-greeting {
    display: flex;
    /* ※ ※重要※ 縦積みのときは写真を下にするので column-reverse。
         HTMLの並びは写真→テキストのままにして、見た目だけ入れ替える。
         HTMLを入れ替えると、768px以上の左右の並びも反転する。 */
    flex-direction: column-reverse;
}

/* ※ 写真は2枚。上段（幅いっぱい）が主、下段の左半分が副。
     右下はロゴの面（.company-greeting__mark）。
   ※ ブロック間に隙間は取らない（gap なし）。
   ※ 地はテキスト面（.company-greeting__body）と同じ画像。
     ※ ※重要※ 地を変えるときは __body とセットで直すこと。
     ※ 右下のロゴの面は別の木目（dark-oak-bg.webp）。
   ※ 縦積みのときだけ高さを比率で決める。
     ベース（576px未満）は 1:1、576〜1023px は 16:11。
     ※ ※重要※ 写真が2段なので、横長にするほど各段が薄くなる。
       人物の写真の切れ方は object-position で調整する。
     1024px以上は相手（テキスト面）の高さに合わせるので外す。 */
.company-greeting__visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr;
    aspect-ratio: 1 / 1;
    /* ※ ※重要※ この箱自身もフレックスアイテム。
         フレックスアイテムの既定は min-height: auto なので、
         これが無いと中身（写真）の高さより小さくなれず、
         aspect-ratio を超えて縦に伸びる。
       ※ 事業内容のリード（.service-lead__visual）は overflow: hidden が
         あるのでこの問題が出ていない（overflow が visible 以外なら
         最小サイズは 0 になる）。 */
    min-height: 0;
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-woody-bg.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

@media (min-width: 576px) {
    .company-greeting__visual {
        aspect-ratio: 16 / 11;
    }
}

/* ※ ※重要※ 写真は絶対配置で敷く。
     普通に置くと写真の実寸が行の高さに入り、
     入れ物の高さ（比率、またはテキスト面に合わせた高さ）を超えてしまう。
     絶対配置なら高さに関与しないので、
     1024px未満は aspect-ratio、1024px以上はテキスト面が高さを決められる。 */
.company-greeting__photo {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

/* 主：上段を幅いっぱい使う */
.company-greeting__photo--main {
    grid-column: 1 / -1;
}

/* 副：下段の左半分。右下はロゴの面。 */
.company-greeting__photo--sub {
    grid-column: 1;
}

/* ※ 右下のロゴの面。
   ※ 地は暗いオーク（dark-oak-bg.webp）。テキスト面の木目とは別の柄で、
     木の質感は揃えつつ面の切れ目を出している。
     同じ素材を使っているのは事業内容ページの流れセクション。
   ※ ロゴは枠の幅の70%。ただし 200px で止める。
     1024px以上は面が広くなるので、上限が無いとロゴが大きくなりすぎる。
   ※ ※重要※ 写真と違って切り抜かない（object-fit: contain）。
     cover にするとロゴの端が切れる。 */
.company-greeting__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 1.5rem;
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-oak-bg.webp');
    background-size: cover;
    background-position: center center;
}

.company-greeting__mark img {
    width: 70%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
}

/* ※ 576〜1023px（縦積み・写真の枠が 16:11）だけロゴを面の幅の 60% にする。
     上限（200px）はそのまま。他の幅は 70%。
   ※ ※重要※ 上の基本の指定より後ろに置くこと（同じ詳細度）。 */
@media (min-width: 576px) and (max-width: 1023px) {
    .company-greeting__mark img {
        width: 60%;
    }
}

.company-greeting__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ※ 切り抜きの中心。人物が写真の右寄りなので、右端より少し戻した位置に合わせる。 */
.company-greeting__photo--main img {
    object-position: 75% center;
}

/* ※ 1024px未満（縦積み）は横長になるので、縦を上寄せにする。
     中央のままだと頭が切れやすい。 */
@media (max-width: 1023px) {
    .company-greeting__photo--main img {
        object-position: center 25%;
    }
}

/* ※ テキスト面は暗い木目の面に白文字。
     事業内容ページのリード（.service-lead__body）と同じ扱い。
   ※ 木目は 512px の大きさで繰り返して敷く。
     リノベーション事例・物件情報・お知らせ詳細の木目の背景と同じ値。
     細かい木目なので、引き伸ばすと粗く見える。
     以前は cover（一度 512px にして cover に戻し、あらためて 512px にした）。
     写真側（.company-greeting__visual）も同じ敷き方にそろえている。
   ※ background-color は画像が読み込まれるまでの地。白文字が飛ばないよう残す。
   ※ 中の文字色は下でまとめて上書きする。 */
.company-greeting__body {
    padding: var(--spacing-xl) var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-woody-bg.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
    color: #FFFFFF;
}

/* ※ 全幅なので、広い画面では1行が長くなりすぎる。
     文章の幅だけ止めて、面の中央に置く。
   ※ 640px はトークンに無い値。--w-sm（576px）だと狭く、
     --w-md（768px）だと1行が長いため、ここだけ直書きしている。 */
.company-greeting__inner {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
}

/* ※ 768〜1023px（縦積みのまま画面が広い範囲）だけ幅を広げる。
     写真が幅いっぱいなのに文章だけ狭いと、左右の余白が大きく見えるため。
     事業内容ページのリード（.service-lead__inner）と同じ扱い。
   ※ 1024px以上は横並びになり、テキスト面自体が半分の幅になるので戻す。 */
@media (min-width: 768px) and (max-width: 1023px) {
    .company-greeting__inner {
        max-width: var(--w-md);
    }
}

/* ※ 暗い面になるので、中の文字色をここでまとめて上書きする。
   ※ ※重要※ 金は黒地用の --color-gold-bright。
     --color-gold-deep は明るい地に乗せる文字用なので、ここでは沈む。
   ※ 行頭に中抜きの正円を置く（事業内容のリードと同じ形）。
     上から360度描かれる動きは animation.js の RING に
     このクラスを登録している（見た目は common.css の .js-deco-ring）。 */
.company-greeting__en {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    color: var(--color-gold-bright);
}

.company-greeting__en::before {
    content: '';
    flex: 0 0 auto;
    width: 0.625em;
    height: 0.625em;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.company-greeting__title {
    color: #FFFFFF;
}

.company-greeting__text {
    margin-top: var(--spacing-sm);
}

.company-greeting__text p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.company-greeting__text p:last-child {
    margin-bottom: 0;
}

/* 代表の署名
   ※ ※重要※ 行全体を明朝体（--font-heading）にする。
     以前は名前だけ明朝体で、会社名・肩書きは本文の書体だった。 */
.company-greeting__sign {
    margin-top: var(--spacing-sm);
    text-align: right;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ※ 名前だけ大きく、白で出す。書体は上から受け継ぐ。 */
.company-greeting__name {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: #FFFFFF;
}

/* ※ 1024px以上で左＝テキスト／右＝写真の横並びにする。
     未満は縦積み（上＝テキスト／下＝写真）。 */
@media (min-width: 1024px) {
    /* ※ 左＝テキスト・右＝写真。
       ※ ※重要※ HTMLの並びは写真→テキストのままにして、
         row-reverse で見た目だけ入れ替える。
         HTMLを入れ替えると、縦積みの並びも反転する。 */
    .company-greeting {
        flex-direction: row-reverse;
        align-items: stretch;
    }

    /* ※ 高さは左のテキスト面が決める。
         写真は絶対配置なので高さに関与せず、
         伸びた分を上下の段で分け合う。 */
    .company-greeting__visual {
        flex: 0 0 50%;
        aspect-ratio: auto;
    }

    /* ※ テキスト面は上下中央。写真の高さはこの面が決める。 */
    .company-greeting__body {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        padding: var(--spacing-xxl) var(--section-px);
    }
}

/* ※ 1024〜1199px だけ左右の余白を狭めにする。
     この幅ではテキスト面が画面の半分しか無いのに
     --section-px（2.5〜3rem）だと左右が効いて文章の幅が残らないため。
   ※ 上下の余白（--spacing-xxl）は変えない。
   ※ ※重要※ 上の 1024px のブロックより後ろに置くこと。
     詳細度が同じなので、前に置くと上書きできない。 */
@media (min-width: 1024px) and (max-width: 1199px) {
    .company-greeting__body {
        padding-inline: 2rem;
    }
}

/* ---------------------------------------------------------
   会社情報
   ※ 他のセクションと同じ形：外側（セクション本体）が上下左右の余白を持ち、
     内側（__inner）が max-width と中央寄せを持つ。
   ※ 左右の余白は --section-px（画面幅で段階的に変わる）。
     直に rem を書かないこと。
--------------------------------------------------------- */

/* ※ 上下の余白はヘッダーの高さ（--header-height）と同じ値。
     事例一覧（works.css の .works）・事業一覧（service.css の .service-block）と同じ考え方。
     画面幅で自動で段階が付くので、分岐を書かなくてよい。
     ※ ※重要※ 値の定義は common.css の :root。
   ※ 地はモルタルのテクスチャ（mortar-f4f3f1.webp）。以前はベタ塗りの --color-bg-light（#F4F3F1）。
     事業内容ページの事業一覧（service.css の .service-block:nth-child(even)）と同じ画像・同じ敷き方。
     512px の大きさで繰り返す。
   ※ background-color は画像が読み込まれるまでの地。 */
.company-outline {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-light);
    background-image: url('../images/mortar-f4f3f1.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

.company-outline__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ---- 見出し ----
   ※ 日本語が上（サブ・小）、英字が下（主役・大）。
     大きさはアクセス（.company-access）と揃えている。
     ※ ※重要※ 並びだけ逆（あちらは英字が上）。見出しの階層（h2）は変えない。
   ※ 日本語の行頭に中抜きの正円を置く。
     トップの事例・物件情報の見出し（index.css の .sec-link__ja::before）と同じ形。
   ※ ※重要※ 円の大きさは em で持つ。文字サイズを変えたときに
     釣り合いが崩れないようにするため。
   ※ 明るい地なので金は --color-gold（円）と --color-gold-deep（英字）。 */
.company-outline__head {
    margin-bottom: var(--spacing-md);
}

.company-outline__ja {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

.company-outline__ja::before {
    content: '';
    flex: 0 0 auto;
    width: 0.625em;
    height: 0.625em;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
}

.company-outline__en {
    display: block;
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .company-outline__en { font-size: 2.75rem; }
}

/* ---- 表と写真の並び ----
   ※ 左＝表／右＝写真。1025px以上で横に並べる。
     未満は縦積み（表の下に写真）。
   ※ 境目はサイト共通のPCの境目（1025px）に揃えている。
     これより狭いと、項目名の列（10rem）と値の列が窄屈になる。 */
.company-outline__row {
    display: grid;
    gap: var(--spacing-md);
}

/* ※ 縦積みのときだけ高さを比率で決める。
     1025px以上は表の高さに合わせるので外す。 */
.company-outline__photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-mute);
}

.company-outline__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1025px) {
    .company-outline__row {
        grid-template-columns: 1fr 18rem;
        gap: var(--spacing-lg);
        align-items: stretch;
    }

    .company-outline__photo {
        aspect-ratio: auto;
    }
}

/* ※ 表は dl で組む。576px未満は縦積み、576px以上で左右に分ける。
     table を使わないのは、狭い画面で横スクロールを出さないため。
   ※ 値のセルの地は無地の白（--color-bg）。
     以前は白いモルタル（mortar-near-white-01-neutral.webp）を表全体に敷いていた。
     項目名のセル（濃い木目）は下で上書きする。 */
.company-table {
    border-top: 1px solid var(--color-border);
    /* ※ 右端にも罫線を引く。値のセルは地が薄いので、
         無いと右端が周りと溶けて表の輪郭が消える。
       ※ 左端は項目名のセル（濃い木目）がそのまま輪郭になるので引かない。 */
    border-right: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

/* ※ ※重要※ 項目名と値は幅に関係なく左右に並べる。
     以前は576px未満で縦に積んでいた。
     狭い画面でも並べられるよう、項目名の列と文字を小さめにする（下の分岐で広げる）。 */
.company-table__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border);
}

/* ※ 項目名の地は濃い木目（oak-bg.webp）。
   ※ ※重要※ 地が暗いので文字は白にする。
     --color-text-light のままだと読めない。
   ※ ※重要※ セルごとに画像を敷くので、行ごとに柄の切り取り位置が変わる。 */
.company-table__label {
    flex: 0 0 7.5rem;
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    background-image: url('../images/oak-bg.webp');
    background-size: cover;
    background-position: center center;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
}

.company-table__value {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.8;
}

@media (min-width: 576px) {
    .company-table__label {
        flex-basis: 10rem;
        padding: 1rem 1.5rem;
        font-size: 0.875rem;
        letter-spacing: 0.06em;
    }

    .company-table__value {
        padding: 1rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* 表の中の注記（※日曜日は完全予約制 など） */
.company-table__note {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* 表の中のリンク（公式サイト・SNS） */
.company-table__value a {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-gold);
    color: var(--color-gold-deep);
    transition: opacity var(--transition);
}

.company-table__value a:hover {
    opacity: 0.7;
}

/* ---- 関連会社（iホーム様）---- */

.company-partner {
    margin-top: var(--spacing-xl);
}

/* 見出し（関連会社のラベル＋社名）
   ※ 以前は「関連会社」の見出し（__title）と説明文（__note）の下に、社名の小見出しがあった。
     1段にまとめたので、セクション内の先頭になる（上の余白は持たない）。
   ※ 行頭の印は中抜きの金の正円。
     他の見出しの行頭の円（.company-outline__ja など）と揃えている。
   ※ ※重要※ 円の大きさは em で持つ。文字サイズを変えたときに
     釣り合いが崩れないようにするため。
   ※ この円は描画のアニメーションを付けていない（animation.js の RING に登録していない）。 */
.company-partner__sub {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

.company-partner__sub::before {
    content: '';
    flex: 0 0 auto;
    width: 0.625em;
    height: 0.625em;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
}

/* 「関連会社」のラベル
   ※ 社名の前に小さく薄く添え、右の細い線で社名と区切る。
     見出しの主役は社名。 */
.company-partner__label {
    flex: 0 0 auto;
    padding-right: 0.75rem;
    border-right: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.company-partner__name {
    min-width: 0;
}

@media (min-width: 768px) {
    .company-partner__sub {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------
   768px未満（縦積み）の幅
   ※ タブレット縦向き（576〜767px）で幅いっぱいに伸ばさず、
     576px（--w-sm）で止める。
   ※ 576px未満では画面幅の方が狭いので、この指定は効かない。
--------------------------------------------------------- */

@media (max-width: 767px) {
    .company-outline__inner,
    .company-access__body {
        max-width: var(--w-sm);
        margin-inline: auto;
    }
}

/* ※ 768〜1023px は 768px（--w-md）で止める。
     この幅では表と写真がまだ縦積み（1025px以上で横並び）なので、
     --w-lg（1200px）まで伸ばすと表の1行が長くなりすぎる。 */
@media (min-width: 768px) and (max-width: 1023px) {
    .company-outline__inner {
        max-width: var(--w-md);
        margin-inline: auto;
    }
}

/* ---------------------------------------------------------
   アクセス
   ※ r-doboku の会社概要と同じ型。暗い面に白文字で、
     768px以上は左＝所在地と道順・右＝地図の2列。
   ※ 地はモルタルのテクスチャ（トップの会社概要・ページヒーローの左面と同じ画像）。
--------------------------------------------------------- */

.company-access {
    position: relative;
    padding-block: var(--spacing-xl);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/mortar-bg.webp');
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    overflow: hidden;
}

.company-access__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ※ 暗い面なので見出しの色を上書きする。
   ※ 英字を主役（大）、日本語をサブ（小）にする。
     事業内容ページの流れセクション（.service-flow）と同じ型。
   ※ ※重要※ このブロックは .company-head .sec-en より後ろに置くこと。
     詳細度が同じ（0-2-0）なので、前に置くと上書きできない。 */
.company-access .sec-en {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .company-access .sec-en { font-size: 2.75rem; }
}

/* ※ 日本語タイトルの両側に金の横棒を置く。
   ※ 中央寄せなので左右両方に置く。片側だけだと中心がずれて見える。
   ※ 棒の長さと色は .service-flow__ja と揃えている。
   ※ 見出しの階層（h2）は変えない。大きさの主役を入れ替えているだけ。 */
.company-access__ja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
}

.company-access__ja::before,
.company-access__ja::after {
    content: '';
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1px;
    background-color: var(--color-accent-light);
}

.company-access__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.company-access__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

/* ---- 所在地 ---- */

.company-access__address {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
}

.company-access__address-icon {
    flex: 0 0 auto;
    /* ※ 1行目の中央に合わせる（1行の高さとアイコンの差の半分だけ下げる）。 */
    margin-top: calc((1lh - 1rem) / 2);
    font-size: 1rem;
    color: var(--color-gold-bright);
}

/* ---- 道順 ---- */

.company-access__guide {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.company-access__guide-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.company-access__guide-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* ※ アイコンは正方形の箱に入れる（共通のお問い合わせボタンと同じ考え方）。
     丸い枠は使わない。ここは押せない目印なので、動きのある円とは分けている。 */
.company-access__guide-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 1.0625rem;
    color: var(--color-gold-bright);
}

.company-access__guide-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.company-access__guide-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-gold-bright);
}

.company-access__guide-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.company-access__guide-text a {
    font-family: var(--font-num);
    letter-spacing: 0.04em;
    transition: color var(--transition);
}

.company-access__guide-text a:hover {
    color: var(--color-gold-bright);
}

/* ---- 地図 ---- */

.company-access__map-outer {
    position: relative;
}

.company-access__map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    transition: border-color var(--transition);
}

/* ※ 地図にマウスを乗せたとき、枠線を金にする。
     地図は動かせる（ドラッグ・拡大できる）ので、操作できる面だと分かるようにする。
   ※ 暗い面の上なので金は黒地用の --color-gold-bright。
   ※ iframe の上にマウスがあるときも、親（この箱）の :hover は効く。
   ※ (hover: hover) で囲む。タッチ端末では地図を触ったあと金のまま残るため。 */
@media (hover: hover) {
    .company-access__map-wrap:hover {
        border-color: var(--color-gold-bright);
    }
}

.company-access__map-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 576px) {
    .company-access__map-wrap {
        aspect-ratio: 2 / 1;
    }
}

@media (min-width: 768px) {
    .company-access {
        padding-block: var(--spacing-xxl);
    }

    .company-access__body {
        grid-template-columns: 1fr 1fr;
        /* ※ 768〜1023px は 3rem。この幅だと --spacing-xl（4rem）では
             左右の列が細くなりすぎる。広げるのは1024px以上（下の分岐）。 */
        gap: 3rem;
        align-items: stretch;
    }

    /* ※ 地図は左の列と同じ高さまで伸ばす。
         比率固定のままだと左右で高さがそろわない。 */
    .company-access__map-outer,
    .company-access__map-wrap {
        height: 100%;
    }

    .company-access__map-wrap {
        aspect-ratio: auto;
    }
}

/* ※ 1024px以上で列の間を広げる。 */
@media (min-width: 1024px) {
    .company-access__body {
        gap: var(--spacing-xl);
    }
}