@charset "UTF-8";

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

/* ── page-hero（背景画像）のフォーカス位置 ──
   ※ 共通側（common.css の .page-hero__bg）は center（中央固定）。
     このページだけ top 45%（横中央・縦は上から45%）にしたいので上書きする。 */
.page-company .page-hero__bg {
    background-position: top 45% center;
}

/* ================================================================
   セクション見出しの装飾（ページ共通）
   ※ このページは全セクションを同じ形で揃える。
     形＝帯2本積み（上＝濃 / 下＝淡・隙間あり）。
     ヘッダー・ドロワー・フッター・トップの Philosophy と
     同じマーク（定義は common.css の .c-mark-bars2-alt）。
     パンくずの Company も同じ形を使っている。
   ※ 以前は指定がなく、common の既定（塗りつぶし正方形）のままだった。
     works / news はページ固有のマークを持っていたので、
     このページも揃えた。
   ※ 外形は --mark-size-solid（8px）。
     帯2本は面積が大きく他より重いため、一段小さい外形に揃える。
   ※ 隙間を引いた残りを2等分するので、外形が奇数pxになると
     帯の高さが端数になって輪郭がにじむ。
     0.5rem = 8px、隙間 2px → 帯 3px で割り切れる。
   ※ 色は --mark-ink（濃）/ --mark-ink-sub（淡）で持つ。
     既定は暗色。会社情報セクションだけ地が暗いので、
     そのセクション内だけ下のルールで白系に反転させる。
   ※ background-color: transparent を明示するのは、共通側の
     塗りつぶし指定（--color-text-light）を消すため。
     これがないと隙間の2pxにグレーの下地が入る。
================================================================ */

/* ── パンくず ──
   ※ ※重要※ 直下のセクションの「上端の色」に合わせる。
     ここでは会社情報（.company-outline）。
     HTML 側に .section--dark を持っているので
     --color-bg-dark（#000000）の純黒。
   ※ 共通の .breadcrumb は --color-bg（#0D0D0D）なので、
     そのままだとヒーローと会社情報の間に
     一段明るい帯が入る。
   ※ 会社情報の地を変えたときはここもセットで直すこと。
   ※ 罫線も暗背景向けにする。 */
.page-company .breadcrumb {
    background-color: #0D0D0D;
    border-bottom-color: var(--color-border-dark);
}

/* ── 英字見出しの大きさ ──
   トップの各セクション・共通CTA・施工実績と揃えてある。
   向こうの定義は index.css の「英字見出しの大きさ」ブロック、
   common.css の .sec-cta__head、works.css の .page-works 側。
   値を変えるときはセットで見直すこと。
     ベース      32〜42px
     1024px以上  42〜60px
   ※ 共通側の既定（.section-head__title）は 24〜30px → 768px以上 30〜40px。
     英字を見出しの主役にしている --swap のセクションでは
     小さいのでここで引き上げる。
   ※ ※注意※ 会社情報の英字は「Company Info」の2語で長い。
     Orbitron は字幅が広いので、狭い端末では
     2行に折り返す可能性がある。実機で確認のこと。
   ※ 詳細度 0-2-0。共通の .section-head__title（0-1-0）より強いので、
     メディアクエリの順番に関係なく勝つ。 */
.page-company .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
}

@media (min-width: 1024px) {
    .page-company .section-head__title {
        font-size: clamp(2.625rem, 4.2vw, 3.75rem);
    }
}

.page-company .section-head__label {
    --label-mark: var(--mark-size-solid);
    --company-bars-gap: 2px;
    --company-bars-bar: calc((var(--mark-size-solid) - var(--company-bars-gap)) / 2);
    /* ※ 暗転前の既定は暗色（墨黒30%）で、会社情報セクション
         だけを下の .section--dark ルールで白系に反転させていた。
         全面暗転で全セクションが暗い地になったので、
         既定側を白系に入れ替える。
       ※ これにより下の .section--dark ルールは同値になるが、
         明るいセクションを戻したときのために残してある。 */
    --mark-ink: rgba(245, 244, 242, 0.85);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

.page-company .section-head__label::before {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image:
        linear-gradient(var(--mark-ink) 0 0),
        linear-gradient(var(--mark-ink-sub) 0 0);
    background-size: 100% var(--company-bars-bar);
    background-repeat: no-repeat;
    background-position:
        left top,
        left bottom;
}

/* 暗背景のセクション（会社情報）だけ、装飾の2色を白系に反転させる。
   ※ 濃淡比（0.85 / 0.35）は common.css の暗背景版に揃えてある。
   ※ 詳細度は 0-3-0。上のページ既定（0-2-0）より強い。
   ※ 上の ::before の transparent はそのまま効く。
     common.css の .section--dark にも塗りの指定があるが、
     company.css が後に読まれるので打ち消される。 */
.page-company .section--dark .section-head__label {
    --mark-ink: rgba(245, 244, 242, 0.85);
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* ================================================================
   会社情報（写真＋テーブル）
   ※ セクションの背景色は共通の .section--dark が持つ
     （--color-bg-dark / #0D0D0D）。
     色を変えるときは common.css の変数1行を直す。
================================================================ */

.page-company .company-outline {
    background-color: #0D0D0D;
}

/* ── レイアウト ──
   ベース（〜1023px）：画像 → テーブル の縦積み。
   1024px以上：画像（左）＋ テーブル（右）の横並び。

   ※ HTML の並び（画像 → テーブル）がそのまま
     見た目の並びになる。両方とも自動配置なので、
     grid-column / grid-row の明示指定は持たない。
     ※ 以前は「テーブル → 画像」の順で置き、横並びの
       ときだけ grid-column で画像を左列に移していた。
       ベースでも画像を上に出す方針に変えて廃止してある。
   ※ 順番を変えたいときは company.php の並びを直す。 */
.company-outline__body {
    display: grid;
    gap: var(--spacing-lg);
    max-width: var(--section-width-lg);
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .company-outline__body {
        /* 左（写真）：右（テーブル）＝ 1 : 1.15。
           テーブル側の情報量が多いので少し広く取る。 */
        grid-template-columns: 1fr 1.15fr;
        gap: var(--spacing-xl);
        /* 写真の高さをテーブルに合わせるため stretch。
           ※ 既定値だが、写真側の高さがこれに依存するので明示する。 */
        align-items: stretch;
        /* 横並びのときは .section__inner（最大1320px）を使い切る。
           ※ 縦1列のときの読み幅（1024px）のままだと、
             2カラムに割ったときに窮屈になる。 */
        max-width: none;
    }
}

/* ── 写真 ──
   ※ 中身（img）は絶対配置で敷き詰めるので、高さは箱側が持つ。
     ベースは 4 / 3 の横長。素材は縦長（640×800）だが、
     縦積みのときに画面を占領しすぎないよう上下を切って使う。
   ※ 1024px以上は比率を外し、高さをグリッドの stretch
     （＝右のテーブルの高さ）に任せる。
     比率が残っているとそちらが優先されて高さが揃わない。
   ※ position: relative と overflow: hidden は .js-mask
     （common.css）が持っている。クラスを外すときは
     この2行をここに書き足すこと。
   ※ 背景色は読み込み前の下地。地（#0D0D0D）に近い値にして、
     画像が来る前に明るい箱が出ないようにする。 */
.company-outline__figure {
    /* ※ イラストに差し替えたので、上のコメントの
         「素材は縦長（640×800）」は旧情報。
         現在は幅で素材ごと入れ替えている（company.php の picture）。
             ベース（〜1023px）：横長版（-h）
             1024px以上　　　：縦長版（-v） */
    aspect-ratio: 4 / 3;

    /* ※ 地（#0D0D0D）よりわずかに明るい #1A1A1A。
         object-fit: contain で余白が出るので、
         箱の場所がうっすら分かる方が収まりがよい。
         地と揃えて輪郭を消す場合は var(--color-bg-dark) にする。
       ※ 読み込み前の下地としても働く。 */
    background-color: var(--color-secondary);
}

@media (min-width: 1024px) {
    .company-outline__figure {
        aspect-ratio: auto;
        /* テーブルが短くなったときの下限（保険）。 */
        min-height: 24rem;
    }
}

/* ※ 以前は picture を挟んでいたので、包み側（.company-outline__figure picture）に
     display:block / position:absolute / inset:0 を持たせていたが、
     常時 1枚の img（CEO写真）にしたので picture は廃止。
     img 自体が下のルールで絶対配置・敷き詰めるので問題ない。
   ※ 幅で素材を切り替えたい場合は picture を復活させ、このルールも戻すこと。 */

/* ※ CEOの写真を常時配置。他の写真と揃えてグレースケールをかける。
     ※ 以前はイラストだったので grayscale なし・object-fit: contain だった。
       イラストに戻すときはこの2行（object-fit / filter）を元に戻すこと。
   ※ object-fit は cover。箱（.company-outline__figure）いっぱいに敷き、
     はみ出した側はトリミングされる。 */
.company-outline__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ※ 1024px未満（縦積み）は上から25%の位置を焦点にする。
         横長の箱に cover で入れると上下が切られるので、
         顔周りが残るよう上寄りにする。object-position は「水平 垂直」の順。
       ※ 1024px以上（横並び）は下のクエリで中央に戻す。 */
    object-position: center 25%;
    filter: grayscale(var(--photo-grayscale));
}

@media (min-width: 1024px) {
    .company-outline__image {
        object-position: center;
    }
}

/* 画像リビールの帯を白系に反転させる。
   ※ 共通の帯（.js-mask::after）は --color-primary（#0D0D0D）で描くので、
     同じ色の地の上では通過しているのが見えない。
     暗背景の見出しの帯を白抜きにしているのと同じ考え方。 */
.company-outline .js-mask::after {
    background-color: var(--color-text-inverse);
}

.company-table {
    /* 罫線と文字の色はこの4行で一括して持つ。
       ※ このテーブルは暗背景（.section--dark）の中に置くので、
         既定値を白系にしてある。
       ※ 明るい背景に戻すときはこの4行を
           --color-border / --color-title /
           --color-text / --color-text-light
         に差し替えるだけでよい（下のルールは触らない）。
       ※ 濃淡（1 / 0.8 / 0.66）はトップの理念・採用セクションと
         同じ階層に揃えてある。 */
    --table-line: var(--color-border-dark);
    --table-head-ink: var(--color-text-inverse);
    --table-data-ink: rgba(245, 244, 242, 0.8);
    --table-label-ink: rgba(245, 244, 242, 0.66);

    border-top: 1px solid var(--table-line);
}

.company-table__row {
    border-bottom: 1px solid var(--table-line);
}

.company-table__head,
.company-table__data {
    display: block;
    width: 100%;
    text-align: left;
    padding-block: 1rem;
}

@media (min-width: 768px) {
    .company-table__head,
    .company-table__data {
        display: table-cell;
        padding: 1.5rem 1rem;
        vertical-align: top;
    }
}

.company-table__head {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--table-head-ink);
    padding-bottom: 0.375rem;
}

@media (min-width: 768px) {
    .company-table__head {
        width: 14rem;
        padding-left: 0;
        border-right: 1px solid var(--table-line);
    }
}

/* 1024px以上は右カラムに入ってテーブル自体が狭くなる。
   ※ table-layout: auto では width はあくまで目安なので、
     テーブルの幅が足りないと見出し列を縮められ、
     1文字ずつ折り返されて縦書きのようになる。
     nowrap で折り返しを禁じ、幅は内容に追従させる。
   ※ 一番長い見出しは「代表取締役」。実効幅はそれに揃うので、
     調整が必要なのは下限（min-width）だけ。
   ※ width: auto を明示するのは、768px以上の 14rem を消すため。 */
@media (min-width: 1024px) {
    .company-table__head {
        width: auto;
        min-width: 7rem;
        white-space: nowrap;
    }
}

.company-table__data {
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--table-data-ink);
    padding-top: 0;
}

@media (min-width: 768px) {
    .company-table__data {
        padding-top: 1.5rem;
        padding-right: 0;
    }
}

.company-table__link {
    transition: opacity var(--transition);
}

.company-table__link:hover {
    opacity: 0.65;
}

/* TEL / FAX の区切り。
   ※ 番号と同じ濃さだと区切りが番号の一部に見えるので一段落とす。
   ※ 左右の余白は em で持つ。文字サイズを変えても比率が崩れない。 */
.company-table__sep {
    margin-inline: 0.5em;
    color: var(--table-label-ink);
}

/* 所在地（本社・倉庫）の並び */
.company-table__place {
    display: block;
}

.company-table__place + .company-table__place {
    margin-top: 0.625rem;
}

.company-table__place-label {
    display: inline-block;
    min-width: 3.25rem;
    margin-right: 0.75rem;
    padding: 0.0625rem 0.5rem;
    font-family: var(--font-family);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--table-label-ink);
    border: 1px solid var(--table-line);
}

/* ================================================================
   アクセスマップ
   ※ 背景の枠装飾（四辺を帯で囲うアニメーション）は
     いったん外した。中身の地図が border 付きの長方形2枚なので、
     その外側にもう一枚長方形の枠を描くと四角が三重になり、
     上下の黒いセクションに挟まれた白い帯域の中で
     装飾に見えなかった。
     入れ直すときは、地図の角に沿わせるL字（強みのカードと同じ）か、
     横帯だけの開いた形から検討する。
================================================================ */

/* ── セクションの地（上から下への勾配）──
   上端 #111111 → 下端 #0D0D0D。
   ※ トップの強み（index.css の .index-strengths）、
     対応地域（service.css の .service-area）、
     施工実績（works.css の .works-list）と同じ持ち方。
   ※ 下端をページ背景（--color-bg ＝ #0D0D0D）と同値にして
     次の共通CTA へつなげる。
   ※ 色を変えるときは下の2つの変数だけを触る。
   ※ background-color も下端色で持つ。
     HTML 側の .section--light（--color-bg-light ＝ #1F1F1F）を
     確実に打ち消すため。
   ※ 詳細度 0-2-0。.section--light（0-1-0）より強いので
     読み込み順に依存せずに勝つ。 */
.page-company .company-map {
    --map-bg-top: var(--color-bg-raise);
    /* 上端：#111111 */
    --map-bg-bottom: var(--black-3);
    /* 下端：#0D0D0D */

    background-color: var(--map-bg-bottom);
    background-image: linear-gradient(to bottom,
        var(--map-bg-top) 0%,
        var(--map-bg-bottom) 100%);
}

.company-map__list {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .company-map__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

.company-map__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    /* ※ 見出しの下線。色は他の罫線と揃えて --color-border（白15%）。
         padding-bottom が文字と線の間隔、margin-bottom が線と地図の間隔。 */
    border-bottom: 1px solid var(--color-border);
}

/* ※ 暗転前は墨黒の面に白文字。黒地では面が消えて
     ラベルに見えなくなるので、白面に黒文字へ反転する。
     カテゴリバッジ・必須バッジと同じ扱い。 */
.company-map__title-label {
    display: inline-block;
    min-width: 3.25rem;
    padding: 0.125rem 0.625rem;
    font-family: var(--font-family);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--black-3);
    background-color: var(--color-text-inverse);
}

.company-map__frame {
    /* 地図のモノクロ量。ホバーで 0%（カラー）に戻る。
       ※ 共通の --photo-grayscale 系は参照しない。
         写真（35%）・実績（45%）とは目的が違い、
         地図は色そのものが情報（緑＝公園・青＝水域）なので
         独立した値として持つ。
       ※ タッチ端末はホバーがないのでこの値のままになる。
         上げすぎるとスマホで地図が読みにくくなる。 */
    --map-grayscale: 45%;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .company-map__frame {
        aspect-ratio: 4 / 3;
    }
}

.company-map__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(var(--map-grayscale));
    transition: filter 0.6s ease;
}

.company-map__frame:hover iframe {
    filter: grayscale(0%);
}