@charset "UTF-8";

/* =========================================================
   index.css - トップページ

   セクションのリズム
     FV          写真（全画面）
     01 Service  黒地のテキストセクション（事業一覧）
     02 Works    画像ブロック（画像左／テキスト右）
     03 Property 画像ブロック（画像右／テキスト左）
     04 Company  上＝写真の箱／下＝モルタル（768〜1024pxは上＝写真／下＝中身、1025px以上は左＝写真／右＝中身）
     05 News     明るい帯
     CTA         黒地（includes/contact.php）

   ── 画面いっぱいのセクションの高さについて ──
   ※ ※重要※ svh ではなく lvh を使うこと。
     svh は「ブラウザのバーが出ているときの高さ」なので、
     スクロールでバーが引っ込むとその分だけ高さが足りず、
     下から次のセクションが覓く（画面の低い横向きiPadで顕著）。
     lvh は常にビューポート以上になるので隙間が出ない。
     代わりにバーが出ている間は下端がバーの高さぶん切れるが、
     中身は上下中央寄せなので気づきにくい。
   ※ dvh は使わない。バーの伸縮中に高さが変わるので、
     mandatory の吸着と衝突してスクロールがガタつく。
     （WebKit Bugzilla #266835：dvh × scroll-snap のジャンク。未修正）
   ※ ※重要※ lvh の直前に vh の行を置いてフォールバックにすること。
     vh は仕様上 lvh と同値なので、新しい環境での見た目は変わらない。
     lvh 非対応の古い環境（古い Samsung Internet など）だけが
     1行目を使う。行を消すとその環境で高さの指定が丸ごと無効になる。
   ※ カルーセル中（〜1024px）は各面が height: 100% なので対象外。
========================================================= */

/* ---------------------------------------------------------
   FV（ファーストビュー）
   height は 100lvh。JSでは触らない
--------------------------------------------------------- */

.fv {
    position: relative;
    /* ※ FVの左右余白。他のセクション（--section-px）より狭めに取る。
         1rem（〜575px）→ 1.5rem（576px〜）→ 2rem（768px〜）。
       ※ ※重要※ キャッチ（.fv__container）、FV下端（.fv__bottom）、
         最新のお知らせの帯（.fv__news）の左余白がこれを見ている。
         帯の左余白がずれると、NEWS の文字とキャッチの左端が揃わなくなる。 */
    --fv-px: 1rem;
    /* ※ 以前は animation.js が --fv-height に innerHeight を入れていたが、
         ・値が svh 相当なのでバーが引っ込むと足りない
         ・読み込み時の1回きりなので回転しても更新されない
         の2点があった。lvh はブラウザが向きに追従して計算するのでJS不要。 */
    height: 100vh;
    height: 100lvh;
    min-height: 667px;   /* SP：極小端末での最低保証高さ */
    /* ※ ベース（375px未満、拡大表示の320pxなど）は上限を 667px にする。
         375px以上は下の分岐で 720px に戻す。
       ※ カルーセル中（html.is-carousel）は max-height: none で
         上書きされるので、ここが効くのはJSが動かないとき。 */
    max-height: 667px;
    /* ※ スライドのクロスフェード中は両方が半透明になる。
         背景が無いと、その瞬間だけ後ろが透けて見える。 */
    background-color: var(--color-bg-dark);
    overflow: hidden;
}

@media (min-width: 375px) {
    .fv { max-height: 720px; }
}

@media (min-width: 576px) {
    .fv {
        --fv-px: 1.5rem;
        max-height: 813px;
    }
}

@media (min-width: 768px) {
    .fv {
        --fv-px: 2rem;
        min-height: 812px;
        max-height: 900px;
    }
}

@media (min-width: 1024px) {
    .fv { max-height: 1080px; }
}

.fv__bg {
    position: absolute;
    inset: 0;
}

/* ※ 各スライドを重ねて置き、--active のものだけ表示する。
     切り替えは index.js の fvSlideshow。 */
.fv__bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* ※ 写真の見せたい位置は基本、上下左右とも中央（left center も試した）。
         写真ごとに変えるときは下の nth-child で background-position を上書きする。 */
    background-position: center center;
    background-color: var(--color-bg-dark);
    opacity: 0;
    transition: opacity 1.6s ease;
}

.fv__bg-slide--active {
    opacity: 1;
}

/* ※ 4枚は pc-fv-image01 → company-option-04-right-composition → top-service-03 → service-store-option-03 の順。
     外観（長野）→ 古民家リノベの内観 → 飲食店 → オフィス風。
     住宅から店舗へ、事業内容の順番に合わせている。
   ※ ※重要※ 1枚目は index.php の $hero_preload と同じ画像にすること。
     ずれると先読みが無駄になり、1枚目の表示も遅れる。
   ▼TODO：SP/MD/PCの3サイズで書き出して差し替える
   ※ 今は4枚とも1サイズのままなので、スマホでもPC用の重い画像を読む。
     （以前の1枚目は sp/md/pc-fv-image01 で画面幅ごとに分けていた）
   ※ 枚数を変えるときは index.php の div の数も合わせる。 */
.fv__bg-slide:nth-child(1) { background-image: url('../images/pc-fv-image01.webp'); }
.fv__bg-slide:nth-child(2) { background-image: url('../images/company-option-04-right-composition.webp'); }
.fv__bg-slide:nth-child(3) { background-image: url('../images/top-service-03.webp'); }
.fv__bg-slide:nth-child(4) { background-image: url('../images/service-store-option-03.webp'); }

.fv__overlay {
    position: absolute;
    inset: 0;
    /* ※ 英語キャッチに黒帯を敷いたので、写真を見せるために半分の濃さに落とした。
         （以前の値：0.55 → 0.3 → 0.65）
         明るい写真で日本語キャッチ・リード文が読みにくいときはここを濃くする。 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.33) 100%);
}

/* ※ パディングは外側（.fv__container）で持ち、
     内側の .fv__inner は max-width と中央寄せだけを担当する。 */
.fv__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-inline: var(--fv-px);
}

.fv__inner {
    width: 100%;
    max-width: var(--w-xl);
    margin-inline: auto;
    color: #FFFFFF;
}

.fv__catch {
    font-family: var(--font-en);
    font-size: 2.125rem;
    font-weight: 500;
    /* ※ 黒帯の行と行の間に写真が少し覗くよう 1.5（以前は 1.25）。
         詰めると帯同士がくっついて一枚の黒い箱に見える。 */
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .fv__catch { font-size: 3.5rem; }
}

@media (min-width: 1200px) {
    .fv__catch { font-size: 4.25rem; }
}

/* 英語キャッチの黒帯（1行ずつ）
   ※ 帯（::before）と文字（.fv__catch-text）を分けているのは、
     登場アニメーションで「帯が先に走り、文字が追いかける」動きにするため。
   ※ 帯の色は --color-primary（#111111）を 75% にした色（以前は 88% → 60% も試した）。
     帯の奥に写真が透けて見える濃さにしている。
   ※ ※重要※ inline-block の帯は line-height: 1.2 にして、親（.fv__catch）の 1.5 との
     差で行と行の間に写真を覗かせている。帯側を 1.5 にすると帯同士がくっつく。 */
.fv__catch-line {
    position: relative;
    display: inline-block;
    padding: 0.02em 0.25em;
    line-height: 1.2;
}

.fv__catch-line::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(17, 17, 17, 0.75);
    transform-origin: left center;
}

/* ※ 帯（::before）より前に出すため position を付ける。 */
.fv__catch-text {
    position: relative;
    display: inline-block;
}

/* ---------------------------------------------------------
   FVの登場アニメーション
   英語キャッチ：帯が左から伸び → 文字が左からワイプで現れる（1行ずつ少しずらす）
   日本語キャッチ・リード文：下からフェードアップ（キャッチの後）

   ※ 開始は index.js が .fv に .is-entered を付けたとき。
       初回：スプラッシュが消え始めて 0.7s 後
       2回目以降（スプラッシュ無し）：ページを開いて 0.2s 後
   ※ ※重要※ 隠しておく状態は html.has-js のときだけ。
     has-js は header.php の先読みスクリプトが CSS 適用前に付ける。
     JS が動かない環境で文字が消えたままにならないようにするため。
   ※ 動きを減らす設定の端末では、隠さず動かさず最初から表示する
     （全体を prefers-reduced-motion: no-preference で囲っている）。
   ※ 秒数の流れ（.is-entered から）
       1行目：帯 0〜0.6s → 文字 0.35〜1.05s
       2行目：それぞれ 0.18s 遅れ
       日本語キャッチ 1.2〜2.4s（左から右へワイプ）
       リード文 2.6〜3.8s（フェードアップ）
--------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .fv__catch-line { --fv-line-delay: 0s; }
    .fv__catch-line--2 { --fv-line-delay: 0.18s; }

    html.has-js .fv__catch-line::before { transform: scaleX(0); }
    /* ※ 日本語キャッチも英語キャッチと同じ、左から右へのワイプで出す。 */
    html.has-js .fv__catch-text,
    html.has-js .fv__sub { clip-path: inset(0 100% 0 0); }
    html.has-js .fv__lead {
        opacity: 0;
        transform: translateY(16px);
    }

    .fv.is-entered .fv__catch-line::before {
        animation: fvBandWipe 0.6s cubic-bezier(0.65, 0, 0.35, 1) var(--fv-line-delay) both;
    }

    .fv.is-entered .fv__catch-text {
        animation: fvTextWipe 0.7s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--fv-line-delay) + 0.35s) both;
    }

    /* ※ 英語キャッチと同じワイプで出す。ゆっくり見せたいので 1.2s。 */
    .fv.is-entered .fv__sub {
        animation: fvTextWipe 1.2s cubic-bezier(0.65, 0, 0.35, 1) 1.2s both;
    }

    /* ※ 日本語キャッチが出切って（2.4s）から出す。
         0.2s 間を置いて 2.6s から。重ならせない。 */
    .fv.is-entered .fv__lead {
        animation: fvFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.6s both;
    }

    /* ── 出し切ったあとは最終状態で固定する ──
       ※ ※重要※ カルーセルを下まで抜けると .carousel が display: none になる。
         上へ戻って再表示されたとき、CSSのアニメーションは頭から走り直す。
         遅延付き（リード文は 1.4s 待ち）なので、その間キャッチが消えて見える。
         iPad で「下までスクロールしたあとキャッチが出ない」の対策。
       ※ ※重要※ animation: none を必ず入れる。
         アニメーションは通常の宣言より優先されるので、
         止めないと下の opacity / clip-path が効かない。
       ※ 付けるのは index.js（.is-entered の 2.4秒後）。
         上の秒数を変えたらあちらも合わせる。 */
    .fv.is-entered-done .fv__catch-line::before {
        animation: none;
        transform: scaleX(1);
    }

    .fv.is-entered-done .fv__catch-text,
    .fv.is-entered-done .fv__sub {
        animation: none;
        clip-path: inset(0 0 0 0);
    }

    .fv.is-entered-done .fv__lead {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@keyframes fvBandWipe {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes fvTextWipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes fvFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* 日本語のキャッチコピー（サブ）
   ※ 以前は先頭にロゴのスウォッシュを意識した金の短い線（::before）を
     置いていたが外した。線が無くなったので flex にする必要もない。 */
.fv__sub {
    /* ※ ※重要※ 中身なりの幅にする。
         左から右へのワイプ（clip-path）は要素の箱を基準に切るので、
         幅いっぱいのままだと文字の無い右側にも時間を使ってしまい、
         文字は途中で出切って見える。 */
    width: fit-content;
    margin-top: 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

@media (min-width: 768px) {
    .fv__sub {
        margin-top: 2rem;
        font-size: 1.5rem;
    }
}

.fv__lead {
    margin-top: 1rem;
    /* ※ 475px未満は 0.9rem。狭い画面で行の折り返しが増えすぎないよう少し下げる。
       ※ 475px はこの文章専用の分岐。サイト共通のブレークポイントではない
         （事例・物件情報の箱や、お問い合わせ誘導の説明文と同じ）。 */
    font-size: 0.9rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 475px) {
    .fv__lead { font-size: 0.9375rem; }
}

@media (min-width: 768px) {
    .fv__lead { font-size: 1.0625rem; }
}

/* ---------------------------------------------------------
   FVの下端（左＝最新のお知らせ／右＝スクロールの合図）
   ※ 左右の余白は .fv__container と揃える（SP 1.25rem／768px〜 2.5rem）。
     スクロールの合図はこの中で右寄せになる。最大幅は持たせず、大きい画面でも右端に置く。
     お知らせだけは例外で、FVの左下の角に絶対配置する（下の .fv__news）。
   ※ 入れ物は押せないようにして、お知らせだけ押せるようにする。
     入れ物が押せると、帯の何もない所でもカルーセルのタップを拾う。
--------------------------------------------------------- */

.fv__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding-inline: var(--fv-px);
    pointer-events: none;
}

.fv__bottom-inner {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    /* ※ 最大幅は付けない（以前は --w-xl＝1440px で中央寄せ）。
         付けると幅1520px以上でスクロールの合図が画面の右端から内側へ寄る。
         どの画面幅でも、右端から左右の余白（.fv__bottom の padding）分だけ内側に置く。 */
}

/* ---- 最新のお知らせ ----
   ※ FVの左下の角にぴったり付ける（bottom: 0 / left: 0）。
     .fv__bottom の余白・最大幅には従わず、絶対配置で角に置く。
     .fv__bottom は左右下とも 0 なので、その角＝FVの角になる。
   ※ 左の余白だけ .fv__container と同じにして、NEWS の文字を
     キャッチコピーの左端に揃える（幅1520px以上はキャッチが中央寄せになるのでずれる）。
   ※ 帯はベタ塗りの --color-primary（以前は 88% の半透明）。小さい文字を読ませるため。
     ホバーでは少し明るい --color-bg-dark（#1A1A1A）にして、タイトルを金にする。
   ※ 日付とタイトルは2段にする。横一列だと 375px 幅で
     タイトルが数文字しか入らない。
   ※ ※重要※ max-width の calc は、右のスクロールの合図にかぶらないための逃げ。
     タイトルはその幅で切って「…」にする（.fv__news-body の min-width: 0 が必要）。 */
.fv__news {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    max-width: min(30rem, calc(100% - 4.5rem));
    padding: 0.75rem var(--fv-px);
    background-color: var(--color-primary);
    color: #FFFFFF;
    pointer-events: auto;
    transition: background-color var(--transition);
}

@media (min-width: 768px) {
    .fv__news {
        gap: 1.125rem;
        max-width: min(34rem, calc(100% - 6rem));
        padding: 1rem 1.75rem 1rem var(--fv-px);
    }
}

@media (hover: hover) {
    .fv__news:hover { background-color: var(--color-bg-dark); }
    .fv__news:hover .fv__news-title { color: var(--color-gold-bright); }
}

.fv__news-label {
    flex-shrink: 0;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.fv__news-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.5;
}

.fv__news-date {
    font-family: var(--font-num);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
}

.fv__news-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    transition: color var(--transition);
}

@media (min-width: 768px) {
    .fv__news-label {
        padding-right: 1.125rem;
        font-size: 1.0625rem;
    }

    .fv__news-date { font-size: 0.8125rem; }
    .fv__news-title { font-size: 0.9375rem; }
}

/* ---- スクロールの合図 ----
   ※ 縦書きの SCROLL と、FVの下端まで伸びる縦線。
     線の中を白の線が上から下へ流れる（以前は金）。
     FVは白と黒だけでまとめているので、金は使わない。
   ※ 流れる線（白100%）との差を出すため、底の線は白22%まで薄くしている（以前は35%）。
   ※ 線は下端にくっつける（下の余白を取らない）。次へ続く感じを出すため。
   ※ margin-left: auto で右端に寄せる。お知らせが0件でも右に残る。 */
.fv__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    margin-left: auto;
    color: #FFFFFF;
}

.fv__scroll-text {
    writing-mode: vertical-rl;
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.fv__scroll-line {
    position: relative;
    width: 1px;
    height: 3.5rem;
    background-color: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

@media (min-width: 768px) {
    .fv__scroll-line { height: 4.75rem; }
}

.fv__scroll-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #FFFFFF;
    transform: scaleY(0);
    transform-origin: top;
    animation: fvScroll 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ※ 上から伸びて（0〜50%）、下へ抜ける（50〜100%）。
     50% と 50.1% で transform-origin を上→下に切り替えている。 */
@keyframes fvScroll {
    0%    { transform: scaleY(0); transform-origin: top; }
    50%   { transform: scaleY(1); transform-origin: top; }
    50.1% { transform: scaleY(1); transform-origin: bottom; }
    100%  { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
    .fv__scroll-line::after { animation: none; }
}

/* =========================================================
   事業内容（.sec-service）
   黒地に英字ラベル＋4事業のカード。写真を使わないセクション。
========================================================= */

/* ※ パディングは一番外側（セクション本体）で持ち、
     内側の __inner は max-width と中央寄せだけを担当する。 */
.sec-service {
    padding-block: var(--spacing-xxl);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-light);
}

.sec-service__inner {
    /* ※ 1024px未満は --w-md（768px）で止める。
         カード2列のままタブレット幅いっぱいに広げると
         1枚が大きすぎて間延びして見えるため。
       ※ 1024px以上は下のスナップ用ブロックで --w-lg（1200px）に戻す。 */
    max-width: var(--w-md);
    margin-inline: auto;
}

/* ※ 1024px未満ではこの見出しは使わない。
     各画面の上に出す .sec-service__label が代わりになる。
     カードが1枚〜2枚ずつの画面になっているので、
     セクションの先頭に1つだけ置いても
     1枚目に吸着した時点で画面外に流れてしまう。
   ※ ※重要※ 見た目の指定はここに書くこと。
     display だけを切り替えても、フォントや色が
     無ければ1024px以上で素の文字になる。
   ※ 1024px以上は下のスナップ用ブロックで縦書きになり、
     右側へ絶対配置される。 */
.sec-service__en {
    display: none;
    font-family: var(--font-en);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    /* ※ 黒面の上に乗るので明るいゴールド */
    color: var(--color-accent-light);
}

/* ---- 見出しのまとまり（英字＋日本語）----
   ※ ※重要※ カルーセル中はこの箱ごと絶対位置で浮かせる（下のカルーセルのブロック）。
     英字と日本語を別々に浮かせると、間隔を保つのが難しい。
   ※ index.js の fitCards がこの箱の高さ（＋下マージン）を測っている。
     クラス名を変えるときはセットで。
   ※ 1025px以上は縦書きの __en に役割を譲るので、下の分岐で丸ごと隠す。 */
.sec-service__head {
    margin-bottom: 1rem;
}

/* 日本語の見出し
   ※ 他セクション（リノベーション事例・物件情報・会社概要・お知らせ）と同じく、
     「英字が主役／日本語がサブ」の並びに揃える。
   ※ 中央寄せで両側に金の横棒。会社概要（.sec-company__ja）と同じ型。
     英字が上・日本語が下という並びが同じなので、あちらに揃えている。
     （事例・物件情報・お知らせは左寄せなので「金の中抜き正円」）
   ※ ※重要※ 以前は横棒を英字側（__label）に付けていた。
     上下どちらにも装飾があると詰まって見えるので、日本語側だけにする。
   ※ 黒面の上に乗るので文字は白。英字（ゴールド）と同じ色にすると
     金が2行続いて重くなる。棒だけ金にする。
   ※ 棒の長さは --service-ja-bar だけで調整する。 */
.sec-service__ja {
    --service-ja-bar: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.75);
}

.sec-service__ja::before,
.sec-service__ja::after {
    content: '';
    flex: 0 0 auto;
    width: var(--service-ja-bar);
    height: 1px;
    background-color: var(--color-accent-light);
}

/* ※ ※重要※ 後ろの棒（::after）は文字の letter-spacing 分だけ詰める。
     字間は最後の文字の後ろにも付くので、そのままだと
     後ろの隙間だけ広くなる。letter-spacing を変えたらここも合わせる。 */
.sec-service__ja::after {
    margin-inline-start: -0.18em;
}

@media (min-width: 768px) {
    .sec-service__ja {
        --service-ja-bar: 2.5rem;

        gap: 1rem;
        font-size: 0.9375rem;
    }
}

/* ---- スライダーのカウンター（576px未満）----
   ※ 見出しと上下対称に、カードの塊の下へ置く。
   ※ 総数は index.php が $services の件数から出す。
     現在の番号は index.js の serviceSlider が書き換える。
   ※ カウンターがあるのはスライダーのセクションだけなので、
     576px以上ではセクションごと消える。個別に隠す指定は要らない。 */
.sec-service__counter {
    margin-top: 1rem;
    font-family: var(--font-num);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

.sec-service__counter-current {
    color: var(--color-accent-light);
}

/* ※ 各画面の上に出す見出し。
   ※ ※重要※ カードの真上（.sec-service__inner の直下）に流し込む。
     以前は面の上端に絶対配置していたが、カードが上下中央にあるため
     見出しだけが離れて別物に見えていた。
   ※ __inner の直下なので、1枚でも2枚並びでも
     text-align: center だけでカードの中央に揃う。 */
.sec-service__label {
    margin-bottom: 0;
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    /* ※ 黒面の上に乗るので白。以前は明るいゴールドだった。
       ※ 金は日本語見出し（__ja）の両脇の棒だけが持つ。
       ※ この見出しが出るのは 1024px 以下だけ（1025px以上は __head ごと非表示）。
         1025px以上の縦書き見出し（__en）はゴールドのまま。 */
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .sec-service__label { font-size: 1.75rem; }
}

/* ---- 1025px以上の縦書き見出し（英字＋日本語）----
   ※ 右が英字、左が日本語。縦書きの読み順に合わせている。
   ※ 位置と並びは下の 1025px の分岐で指定する。
   ※ 1024px以下は横書きの __head（英字＋日本語）が受け持つので出さない。 */
.sec-service__vertical {
    display: none;
}

/* 縦書きの日本語見出し（1025px以上）
   ※ ※重要※ ここは黒面ではなく明るい地（--color-bg-light）の上に来る。
     見出しはカードの右端と画面の右端の中間に置いていて、黒面は左70%までだから。
     なので文字は墨色、棒は明るい地でも見える濃いゴールド（--color-gold-deep）にする。
     スマホ側の __ja（黒面の上）とは地が逆なので、色を合わせないこと。
   ※ ※重要※ 棒の幅・太さは論理プロパティで指定する。
     縦書きなので文字の上下に出る。width / height だと短い横棒になる。
   ※ 棒の長さは --service-vertical-bar だけで調整する。 */
.sec-service__en-ja {
    --service-vertical-bar: 2.5rem;

    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-heading);
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);
    font-weight: 500;
    letter-spacing: 0.28em;
    white-space: nowrap;
    color: var(--color-title);
}

.sec-service__en-ja::before,
.sec-service__en-ja::after {
    content: '';
    flex: 0 0 auto;
    inline-size: var(--service-vertical-bar);
    block-size: 1px;
    background-color: var(--color-gold-deep);
}

/* ※ ※重要※ 後ろの棒（::after）は文字の letter-spacing 分だけ詰める。
     letter-spacing を変えたらここも合わせる。 */
.sec-service__en-ja::after {
    margin-inline-start: -0.28em;
}

@media (min-width: 1025px) {
    /* 縦書きの見出しに戻るのでこちらは不要（日本語ごと隠す） */
    .sec-service__head { display: none; }

    /* ※ ※重要※ 入れ物に writing-mode: vertical-rl を掛けて
         flex-direction: column にすると、子が右から左へ並ぶ。
         DOMの順は英字→日本語なので、右が英字・左が日本語になる。
         row にすると縦に積み上がるので注意。
       ※ 子（__en / __en-ja）は writing-mode を受け継ぐので、
         それぞれに書く必要は無い。 */
    .sec-service__vertical {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        writing-mode: vertical-rl;
    }

    .sec-service__en {
        display: block;
    }
}

/* ---- カード ---- */

/* ※ ※重要※ マークアップを2種類出してここで切り替える。
     〜575px ：--slider（4枚の横スライダー）を使う
     576px以上：--pair（2枚）を使う
   ※ JS側の data-pane もこの切り替えに合わせている。
     ブレークポイントを変えるときは index.js も直す。 */
.sec-service--pair {
    display: none;
}

/* ※ 4枚で1面（--quad）は、幅576〜1024px かつ高さ 1180px以上のときだけ使う。
     表示の切り替えと見た目は、下のカルーセルのブロックの後ろにまとめてある。 */
.sec-service--quad {
    display: none;
}

@media (min-width: 576px) {
    .sec-service--slider {
        display: none;
    }

    .sec-service--pair {
        display: block;
    }
}

/* ※ 2枚入りのセクション。カードを横に並べる。
     同じ入れ物の中にあるので、幅は必ず揃う。
   ※ min-height は入れない。中身が多いカードが
     行の高さを決められるようにする。 */
.sec-service__row {
    display: flex;
    gap: 1rem;
}

.sec-service__row .sec-service__item {
    flex: 1;
    min-width: 0;
}

.sec-service__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- 576px未満：4枚を横スライダーにする ----
   ※ 以前は1枚ずつの面を4つ縦に送っていた。面の半分を事業内容が使うので、
     1面にまとめて横に送る形にした。
   ※ 横の送りはブラウザのスクロールスナップに任せる。自前で書くと、
     縦（面の送り）との取り合いを全部捕まえることになる。
   ※ ※重要※ touch-action は先祖との共通部分が効く。
     カルーセルは .carousel__pane に touch-action: none を掛けて
     縦スワイプをJSで引き受けているので、ここだけ pan-x にしても
     面側が none のままだと横に動かせない。
     下のカルーセルのブロックで、576px未満のときだけ面側も pan-x にしている。
   ※ index.js のタッチ処理にも軸判定を入れてある
     （横優勢の指では面を送らない）。セットで見ること。 */
.sec-service__track {
    display: flex;
    gap: 1rem;
    /* ※ ※重要※ 入れ物の幅を超えないように固める。
         これが無いと、カードの並びが入れ物を押し広げて
         画面からはみ出し、横にスクロールしなくなる。 */
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    /* ※ 端まで送ったときに、後ろのページが一緒に動かないようにする。 */
    overscroll-behavior-x: contain;
    /* ※ スクロールバーは出さない。右に見えている次のカードが合図になる。 */
    scrollbar-width: none;
}

.sec-service__track::-webkit-scrollbar {
    display: none;
}

/* ※ カードはトラックの 76%。残りで次のカードの端を見せる。
     375px幅の端末で、次のカードが 50px 前後見える計算。
   ※ 高さはカルーセル側（--sv-card-h）が渡す。
     カルーセルが動かないときは中身なりの高さになる。 */
.sec-service__track > .sec-service__item {
    flex: 0 0 76%;
    scroll-snap-align: start;
}

/* ※ ※重要※ 最後の1枚だけは右端合わせで止める。
     start のままだと、最後のカードの吸着位置がスクロールの終端を
     超えてしまい、右に余白を作らないと吸着できない。
     end にすれば、余白を作らずにカードの右端で止まる。
   ※ 止まる位置はトラックの右端＝セクションの左右余白を引いた右端。
     1枚目の左端と左右対称になる。 */
.sec-service__track > .sec-service__item:last-child {
    scroll-snap-align: end;
}

.sec-service__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* ※ min-height は入れない。
         入れ物の min-height: fit-content が
         中身（画像の下限＋本文の実寸）を拾えなくなる。 */
    flex: 1;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* カードの画像
   ※ ▼TODO：各事業の写真を用意して差し替える（素材未支給。ファイル名は仮）
   ※ 画像が無い間は薄い面で表示される
   ※ ※重要※ ホバーで拡大するのは「画像」であって
     「画像の配置部分」ではない。配置部分ごと transform すると
     下の本文の上にかぶさるので、背景画像を ::before に持たせ、
     配置部分側で overflow: hidden して切り抜く。 */
.sec-service__card-media {
    position: relative;
    /* ※ カードの高さが固定なので、本文を除いた残りを画像が受け持つ。
         aspect-ratio で高さを決めるとカードの高さに収まらない。
       ※ min-height で下限を持たせて、本文が長いカードでも
         写真が消えないようにする。 */
    flex: 1;
    min-height: 9rem;
    background-color: var(--color-bg-light);
    overflow: hidden;
}

.sec-service__card-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.sec-service__card:hover .sec-service__card-media::before {
    transform: scale(1.04);
}

/* ※ セクションをカードの数だけ繰り返す作りなので、
     nth-child ではなく data-service で判別する。 */
/* ※ 01（空き家のリノベーション）は仮素材。以前は alternatives/ の中を参照していた。 */
.sec-service__card-media[data-service="01"]::before { background-image: url('../images/renovation-d-after.webp'); }
.sec-service__card-media[data-service="02"]::before { background-image: url('../images/top-service-02.webp'); }
.sec-service__card-media[data-service="03"]::before { background-image: url('../images/top-service-03.webp'); }
.sec-service__card-media[data-service="04"]::before { background-image: url('../images/service-aircon-option-01.webp'); background-position: 60% center; }

.sec-service__card-body {
    display: flex;
    flex-direction: column;
    /* ※ カードの残りをすべて受け持つ。
         これが無いと本文が中身なりの高さになり、
         下の View more の margin-top: auto が効かない。
       ※ ※重要※ min-height: 0 を入れないこと。
         入れると本文の中身なりの高さが伝わらず、
         カードの min-height: fit-content が
         本文分を見落とす。 */
    flex: 1;

    /* ※ 番号（.sec-service__card-num）をタイトルの左上に置くための基準。 */
    position: relative;

    /* ※ テキストボックスの地は白いモルタル調のテクスチャ。
         カード本体の background-color（--color-bg）は残してあるので、
         画像が読み終わるまでは白で表示される。
       ※ 下端の導線バーは自分の背景色（黒）を持っているので、テクスチャは透けない。
       ※ 以前は mortar-texture-05-pure-white.webp。 */
    background-image: url('../images/mortar-near-white-01-neutral.webp');
    background-size: cover;
    background-position: center;

    /* ※ ※重要※ 余白は直接書かず変数で持つ。
         下端の導線バー（.sec-service__card-more）が負のマージンで
         この余白を打ち消して、カードの端まで広がるため。
         余白は 768px・1025px で変わるが、変数にしておけばバー側は触らなくてよい。 */
    --card-body-px: 1.25rem;
    --card-body-py: 1.5rem;
    padding: var(--card-body-py) var(--card-body-px);
}

@media (min-width: 768px) {
    .sec-service__card-body {
        --card-body-px: 1.75rem;
        --card-body-py: 1.75rem;
    }
}

/* カードの番号（01〜04）
   ※ タイトルの左上に置く。基準は .sec-service__card-body。
   ※ ※重要※ 絶対位置なので、本文の高さには加算されない。
     本文の上の余白（--card-body-py）の中に収めているので、
     余白を狭くするとタイトルにかぶる。セットで見ること。
   ※ 1025px以上と --quad の横型（画像左・本文右）でも、
     本文の左上＝タイトルの左上なので同じ指定のまま位置が合う。
   ※ 以前は画像の左上に白文字で重ねていたが、
     明るい写真だと読みにくいので本文側に戻している。 */
.sec-service__card-num {
    /* ※ 本文の左端から外側へ出す量。ここだけで調整する。
         ベースの余白は 1.25rem（20px）なので、1.25rem でカードの左端ちょうど。
         それを超えると .sec-service__card の overflow: hidden で切れる。 */
    --card-num-shift: 0.875rem;
    /* ※ 本文の上端（タイトルの行頭）から上へ持ち上げる量。ここだけで調整する。
         小さくするほど下がる。番号の高さは 0.875rem（14px）なので、
         これを下回るとタイトルにかぶる。 */
    --card-num-rise: 0.75rem;

    position: absolute;
    top: calc(var(--card-body-py) - var(--card-num-rise));
    left: calc(var(--card-body-px) - var(--card-num-shift));
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    /* ※ 明るい地（モルタル調のテクスチャ）の上の文字なので
         --color-gold-deep（common.css のゴールドの例外）。 */
    color: var(--color-gold-deep);
}

.sec-service__card-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .sec-service__card-title { font-size: 1.25rem; }
}

.sec-service__card-text {
    margin-top: 0.875rem;
    /* ※ 下端の導線バーとの最低限のすき間。
         カードに余りがあるときはバーの margin-top: auto がその分を広げる。 */
    margin-bottom: 1.25rem;
    /* ※ 1024px以下（カルーセルの幅）は 0.9rem（以前は 0.875rem）。
         1025px以上は下の分岐で 0.875rem のまま。 */
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

@media (min-width: 1025px) {
    .sec-service__card-text { font-size: 0.875rem; }
}

/* カード下端の導線バー
   ※ 左＝英字ラベル／右＝矢印の丸ボタン。
     事例・物件情報の導線バー（.sec-link__more）と同じ型に揃えている。
     以前は右寄せのテキスト＋丸ボタン（width: fit-content ＋ margin-left: auto）だった。
   ※ ※重要※ 左右・下の負のマージンで本文の余白（--card-body-*）を打ち消し、
     カードの端まで帯を広げている。本文の余白を直接書き換えると帯がずれるので、
     必ず .sec-service__card-body の変数の方を直すこと。
   ※ 黒帯なので、カードが黒面に乗ると帯と地の明るさがほぼ同じになる。
     カードの白い枠線（.sec-service__card の border）が下端を支えている。 */
.sec-service__card-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    margin-top: auto;
    margin-inline: calc(var(--card-body-px) * -1);
    margin-bottom: calc(var(--card-body-py) * -1);
    padding: 0.625rem var(--card-body-px);
    background-color: var(--color-primary);
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #FFFFFF;
}

/* 矢印。細い線で描き、円形の枠で囲う（以前は四角の枠）。
   ※ ※重要※ 矢印はSVGの1本のパスで描く。
     以前は軸を ::before、矢じりを ::after の45度回転で作っていたが、
       ・位置合わせを % でやっていたため先端が 0.3px ほど手前で止まる
       ・斜めの1px線がアンチエイリアスで軸より太くにじむ
     という2点の問題があった。パスなら継ぎ目も太さの差も出ない。
   ※ 大きさは --service-btn、線の太さは --service-stroke を触る。 */
.sec-service__card-more-btn {
    --service-btn: 2.5rem;
    --service-stroke: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--service-btn);
    height: var(--service-btn);
    flex-shrink: 0;
    /* ※ 黒帯の上に乗るので白の半透明。--color-border（#DCDAD6）だと明るすぎる。 */
    border: 1px solid rgba(255, 255, 255, 0.45);
    /* ※ 円形の枠（以前は四角の枠）。ドロワー・フッターのナビの丸枠＋矢印と揃えている。 */
    border-radius: 50%;
    /* ※ ホバーで描く金の円（::after）の基準 */
    position: relative;
    transition: border-color var(--transition), color var(--transition);
}

.sec-service__card-more-btn svg {
    /* ※ 金の円（::after）より前面に出す */
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.sec-service__card-more-btn path {
    stroke: currentColor;
    stroke-width: var(--service-stroke);
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* ※ ホバーでは矢印（currentColor）をゴールドにし、
     円の枠は真上から360度、金の線を描く（下の ::after）。
     以前は枠線ごと一瞬で金にしていた。
   ※ ラベル（View Renovation など）は親にあるので墨黒のまま。 */
.sec-service__card:hover .sec-service__card-more-btn {
    color: var(--color-accent-dark);
}

/* ── 円の枠：ホバーで真上から360度、金の線を描く ──
   ※ 事例／物件情報の導線バー（.sec-link__more-btn::after）と同じ仕組み・同じ速さ。
     薄い枠（ボタン自身の border）を下敷きにして、同じ大きさの金の円を重ね、
     conic-gradient のマスクで見せる角度を 0deg → 360deg に広げる。
   ※ 角度の変数 --link-ring は導線バーの所で @property 登録済み（同じ index.css）。
   ※ ※重要※ inset は -1px。絶対配置の基準は枠線の内側なので、
     0 にすると金の円が下敷きの枠の内側にずれて二重線に見える。
   ※ 離したときは巻き戻さず、フェードで消してから角度を 0 に戻す。 */
.sec-service__card-more-btn::after {
    --link-ring: 0deg;

    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid var(--color-accent-dark);
    border-radius: 50%;
    -webkit-mask: conic-gradient(#000 var(--link-ring), transparent 0);
    mask: conic-gradient(#000 var(--link-ring), transparent 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, --link-ring 0s linear 0.25s;
}

.sec-service__card:hover .sec-service__card-more-btn::after {
    --link-ring: 360deg;
    opacity: 1;
    /* ※ 入るときはすぐ見せて、角度だけ時間をかけて広げる。 */
    transition: opacity 0s, --link-ring 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ※ アニメーションを控える設定では描かずに、金の円をそのまま出す。
   ※ ※重要※ 上の :hover の指定より後ろに置くこと。 */
@media (prefers-reduced-motion: reduce) {
    .sec-service__card-more-btn::after,
    .sec-service__card:hover .sec-service__card-more-btn::after {
        transition: none;
    }
}

/* ---------------------------------------------------------
   左70%の黒面

   ※ 黒面を単独で置くと「塗り残しがある」だけに見える。
     カードが面の右端をまたぐことで、
     「奥に黒面／手前にカード」という層ができて奥行きになる。
     カードが黒面の中に収まるとこの効果は出ないので、
     幅（70%）を変えるときは必ずカードの上を通る位置にする。

   ※ 全幅で適用する。スマホはカード1列なので、
     70%の端は各カードの上を通る。ちゃんと「またぐ」構図になる。
--------------------------------------------------------- */

.sec-service {
    position: relative;
    /* ※ 黒面の幅。ここだけで調整する。
         80%（〜767px）→ 75%（768px〜）→ 70%（1025px〜）。
       ※ ※重要※ 広げすぎると黒面の端がカードをまたがず、
         塗り残しがあるだけに見える。必ずカードの上を通る位置にする。 */
    --service-dark-w: 80%;
}

@media (min-width: 768px) {
    .sec-service { --service-dark-w: 75%; }
}

@media (min-width: 1025px) {
    .sec-service { --service-dark-w: 70%; }
}

.sec-service::before {
    content: '';
    position: absolute;
    /* 左端から --service-dark-w（右に残りの地を残す） */
    inset: 0 calc(100% - var(--service-dark-w)) 0 0;
    background-color: var(--color-bg-dark);
}

/* ※ 黒面は背後なので、中身を手前に上げる */
.sec-service__inner {
    position: relative;
    z-index: 1;
}

/* =========================================================
   02-03 導線セクション（.sec-link）
   ・SP　　：画像 → テキストの縦積み
   ・768px〜：画像とテキストの横並び。--reverse で左右を入れ替える
   ・画像は各モディファイアで background-image を指定する。
     素材が無い間は .sec-link__media の背景色（黒）で表示される。
========================================================= */

/* ※ スナップのため、それぞれ画面高さいっぱいにする。
     768px以上は上下に並んで2つで100lvh（各 50lvh）。

   ※ 低い画面でもつぶれないよう下限を持たせる。
     下限はテキスト側の実寸から逆算している。
       日本語 34px ＋ 英字 48px ＋ 説明文2行 96px
       ＋ View more 44px ＋ 上下 padding 64px = 約286px
     縦積み（〜767px）はこれに画像分を足して 32rem。
     横並び（768px〜）はテキスト側だけが高さを決めるので 18rem。 */
.sec-link {
    height: max(100vh, 32rem);
    height: max(100lvh, 32rem);
    /* ※ 箱を浮かせるための地。
         ※ 見えるのは 768px 未満（縦積み）だけ。
           768px 以上は画像と箱が左右で面を埋めるので見えない。
         ※ ※重要※ 事例（works）はウォールナットの陰のような茶（R58 G48 B41）。物件情報は下の .sec-link--property で上書き。
           無彩色にしないこと。
           写真の木部（床・家具）と地をつなげるための色。
           彩度を上げるとチョコレートのような甘さが出て安っぽくなる。
           （以前は暖色寄りの暗いグレー #35322E。黒寄りの茶 #2A221C、焦げ茶 #33281F も試した）
           箱や罫線（#F4F3F1 / #E3E1DE / #DCDAD6）はどれも
           赤が青より 4〜6 高い暖かいグレー。
           その隣に #4A4A4A のような無彩色を置くと、
           濁って見えたり青みがかって冷たく見える。
         ※ 画像エリア（.sec-link__media は #1A1A1A）よりは明るさを保つ。
           これ以上暗くすると、写真が無いときに画像エリアとの境目が消える。
         ※ ※重要※ 地を白や明るいグレーに振るときは、
           箱側の色とセットで見直すこと。
           例えば #DCDAD6 にすると property の箱（#E3E1DE）と
           7ステップしか差が無く、箱の輪郭が消える。
         ※ トークンには無い値。他の暗い面も暖色に寄せることになったら、
           :root に移すこと。今はここだけなので直書き。 */
    background-color: #3A3029;
}

/* ※ 物件情報の地。色は茶色にする前の暖色寄りの暗いグレー（R53 G50 B46）。
   ※ ※重要※ 上の .sec-link より後ろに置くこと。同じ詳細度なので、前に置くと打ち消される。
   ※ 地にテクスチャ（dark-gray-bg.webp）を敷く。
     見えるのは縦積み（〜767px）だけなので、768px以上は下の分岐で外す。
   ※ 背景色は消さない。画像が読み終わるまでの地になる。 */
.sec-link--property {
    background-color: #35322E;
    background-image: url('../images/dark-gray-bg.webp');
    background-size: cover;
    background-position: center;
}

/* ※ 事例（works）の地だけ、木のテクスチャを敷く。
     地が見えるのは縦積み（〜767px）だけなので、768px以上は下の分岐で外す。
   ※ 背景色（#3A3029）は消さない。画像が読み終わるまでの地になる。
   ※ 地が見えるのは箱の周りの帯の部分だけなので、写真の中心はほぼ隠れる。
     見せたい木目が端に来るときは background-position で寄せる。 */
.sec-link--works {
    background-image: url('../images/oak-bg.webp');
    background-size: cover;
    background-position: center;
}

/* ※ ※重要※ 以前はここに黒のオーバーレイ（::before で40%）を重ねて
     テクスチャの主張を押さえていたが、木目が見えなくなるので外した。
     濃さを落としたいときは画像側で調整する。 */

    /* ※ （記録）以下は削除した黒のオーバーレイの説明。
       ※ ※重要※ 写真（.sec-link__media）と箱（.sec-link__box）は
         どちらも position を持っていてこの ::before より後に描かれるので、
         覚いている地の帯の部分だけが暗くなる。
       ※ 濃さは --works-ground-overlay だけで調整する。
         背景色（#3A3029）も残してあるので、画像の読み込み前は
         その色の上にこの黒が乗る。
       ※ 当たり判定は持たせない。地は押せない面なので、
         万が一重なってもリンクを邘らないようにする。 */
/* ※ 768px以上は画像と箱が左右で面を埋めるので、地は見えない。
     テクスチャを外して、背景色だけに戻す。 */
@media (min-width: 768px) {
    .sec-link--works,
    .sec-link--property {
        background-image: none;
    }
}

@media (min-width: 768px) {
    .sec-link {
        height: max(50vh, 18rem);
        height: max(50lvh, 18rem);
    }
}

.sec-link + .sec-link {
    border-top: 1px solid var(--color-border);
}

/* ※ 入れ物は div。リンクはテキスト側（.sec-link__body）だけで、
     画像は押せない。 */
.sec-link__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    .sec-link__inner {
        flex-direction: row;
        align-items: stretch;
    }

    /* PCで左右を入れ替える（HTMLの順序は変えない） */
    .sec-link--reverse .sec-link__inner {
        flex-direction: row-reverse;
    }
}

/* ---- 画像側 ----
   ※ リノベーション事例は2枚を横並び、物件情報は4枚を 2x2 に配置する。
     枚数を変えるときは index.php 側の .sec-link__media-item の数と
     下の grid-template の両方を直す。 */

.sec-link__media {
    position: relative;
    display: grid;
    gap: 2px;
    /* ※ 縦積み（〜767px）はテキストを除いた残りを受け持つ。
         割合で固定すると、面が低いときに
         テキスト側が足りなくなる。
       ※ 下限を持たせて、写真がつぶれないようにする。 */
    flex: 1;
    min-height: 14rem;
    background-color: var(--color-bg-dark);
    overflow: hidden;
}

@media (min-width: 768px) {
    .sec-link__media {
        flex: 0 0 58%;
        min-height: 0;
    }
}

/* 各コマ。画像未支給の間は背景色（黒）で表示される。
   ※ 背景画像を ::before に持たせているのは、
     将来拡大などの演出を入れるときに
     コマの位置を動かさずに済ませるため。
   ※ 現在はホバーで拡大させていない。 */
.sec-link__media-item {
    position: relative;
    display: block;
    background-color: var(--color-bg-dark);
    overflow: hidden;
}

.sec-link__media-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* 2枚横並び */
.sec-link--works .sec-link__media {
    grid-template-columns: repeat(2, 1fr);
}

/* ※ 縦長のスマホだけ上下2段にする。
     画像1枚の形は「画像エリアの横縦比 ÷ 2」なので、
     縦長の画面で横2列にすると 1:2 前後の細長い短冊になり、
     横構図の住宅写真の左右が大きく切れる。
     上下2段なら 1.4:1 前後の横長になる。
   ※ 768px以上は画像エリア自体が横長なので、横2列のままが良い。
     （PC 1440×900 で 417×450 とほぼ正方形。上下2段にすると 3.7:1）
   ※ property は 2x2 のまま。枚数で物件の多さを見せる面なので別扱い。
   ※ ※重要※ ここだけ max-width を使っている（他は min-width 統一）。
     「768px未満かつ高さ720px以上」というレンジ指定なので、
     min-width だけでは書けない。
   ※ 高さの境目は 720px（以前は 768px）。
   ※ メディアクエリの height はブラウザのバーの伸縮では変わらないので、
     スクロール中に切り替わる心配はない。 */
@media (max-width: 767px) and (min-height: 720px) {
    .sec-link--works .sec-link__media {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
}

/* 4枚 2x2 */
.sec-link--property .sec-link__media {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/* ▼TODO：本番の施工写真が支給されたら差し替える */
/* ビフォーアフター（左＝before／右＝after）
   ※ ※重要※ 順番を入れ替えないこと。
     横並びは左から右、縦積み（767px未満かつ高さ768px以上）は上から下なので、
     どちらも 1番目が before になる。
   ※ 仮素材。本番の施工写真が支給されたら差し替える。 */
/* ---- 事例：ビフォー → アフターの切り替え ----
   ※ 面に入ってから 1秒後に、左から右へワイプしてアフターに切り替わる。
     合図は animation.js の worksSwap が付ける .is-after。
   ※ ::before がビフォー、::after がアフター。
     ::after を clip-path で右から隠しておき、左から開いて見せる。
   ※ ※重要※ JSが動かない環境ではビフォーのまま。
     どちらも成立する写真にすること。
   ※ 表示位置（center center）はビフォー・アフターで揃える。
     ずれると切り替わる瞬間に写真が跨んだように見える。
     （以前は 60% center） */
.sec-link--works .sec-link__media-item::before,
.sec-link--works .sec-link__media-item::after {
    background-position: center center;
}

/* ※ 1枚目だけ左寄り（25% center）にする。
   ※ ※重要※ ビフォー・アフターの両方に掛ける。
     片方だけだと切り替わる瞬間に写真が跨んだように見える。 */
.sec-link--works .sec-link__media-item:nth-child(1)::before,
.sec-link--works .sec-link__media-item:nth-child(1)::after {
    background-position: 25% center;
}

/* ビフォー（初期表示） */
.sec-link--works .sec-link__media-item:nth-child(1)::before { background-image: url('../images/matched-before-01-cafe-tenant-dark-v2.webp'); }
.sec-link--works .sec-link__media-item:nth-child(2)::before { background-image: url('../images/works-reference-before-option-01.webp'); }

/* アフター（左から右へ開く） */
.sec-link--works .sec-link__media-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.sec-link--works .sec-link__media-item:nth-child(1)::after { background-image: url('../images/service-store-option-01.webp'); }
.sec-link--works .sec-link__media-item:nth-child(2)::after { background-image: url('../images/fv-option-02.webp'); }

.sec-link--works.is-after .sec-link__media-item::after {
    clip-path: inset(0 0 0 0);
}

/* ※ 動きを控える設定ではワイプせずに切り替える。 */
@media (prefers-reduced-motion: reduce) {
    .sec-link--works .sec-link__media-item::after {
        transition: none;
    }
}

.sec-link--property .sec-link__media-item:nth-child(1)::before { background-image: url('../images/renovation-e-after.webp'); }
.sec-link--property .sec-link__media-item:nth-child(2)::before { background-image: url('../images/top-property-03.webp'); background-position: 25% center; }
.sec-link--property .sec-link__media-item:nth-child(3)::before { background-image: url('../images/property03.webp'); background-position: 75% center; }
.sec-link--property .sec-link__media-item:nth-child(4)::before { background-image: url('../images/fv-option-01.webp'); }

/* ---- テキスト側 ---- */

/* ※ 縦積み（〜767px）は中身なりの高さ。
     割合で固定すると、面が低いときに
     見出しや説明文が押し込まれて縮む。
     テキストは必要な高さを先に取り、余りを画像に回す。
   ※ 768px以上は横並びなので、下の分岐で flex: 1 に戻す。
   ※ 余白はここではなく内側の .sec-link__box が持つ。 */
.sec-link__body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

/* ※ 実際の白面。
   ※ 〜767px は左右にマージンを取り（475px未満 1.25rem／475px〜 1.5rem／576px〜 2rem）、
     ※重要※ 会社概要の写真の箱（.sec-company__head）も同じ左右マージン。セットで直す。
     上は負のマージンで画像に少し食い込ませて浮かせる。
     事業内容の「奥に面／手前にカード」と同じ考え方。
   ※ ※重要※ position を入れる。
     画像側（.sec-link__media）が position: relative なので、
     こちらが位置指定無しだと後ろの画像が上に描かれる。
   ※ ※重要※ 余白（--link-body-px / py）はこの箱が持つ。
     下端の導線バーが負のマージンでこの値を打ち消して
     箱の幅いっぱいに伸びるので、両方が同じ値を見る必要がある。
     帯は画面端ではなく、この箱の端で止まる。 */
.sec-link__box {
    --link-body-px: 1.25rem;
    --link-body-py: 2rem;
    /* ※ 深い面（--color-bg-mute）の上で使う罫線の色。
         既定の --color-border（#DCDAD6）だと明度が近すぎて線が消える。
       ※ ※重要※ ここ一か所で持つ。property の箱と
         works の導線バーの両方が参照している。 */
    --link-border-mute: #CFCCC7;

    position: relative;
    z-index: 1;
    /* ※ 札（.sec-link__badge）の大きさをこの箱の幅から決めるための入れ物。
         cqw が使えない環境では、札側に書いた rem の
         フォールバックがそのまま使われる。 */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ※ 上：画像に食い込ませる重なり分（狭い画面は浅め）
       左右：浮かせるための余白
       下：面の下端との余白
       ※ 475px未満は左右・下とも 1.25rem。
         475px以上は 1.5rem、576px以上は 2rem（下の分岐）。 */
    margin: -2rem 1.25rem 1.25rem;
    padding: var(--link-body-py) var(--link-body-px);
    /* ※ 面の色は works と property で分ける。
         ※ 真っ白は使わない。色相を足さず明度だけで差をつける。
           works：オフホワイト（事例。明るく見せる）
           property：一段深い薄いグレー（物件情報。落ち着かせる）
         ※ property 側はこの下の分岐で上書きする。 */
    background-color: var(--color-bg-light);
}

/* ※ 面が深くなると、中の罫線（導線バーの上線と
     矢印ボックスの仕切り）が見えなくなる。
     この箱の中だけ --color-border を一段深くして逃がす。
   ※ 子要素は var(--color-border) を見ているので、
     ここで上書きすれば個別に直さなくてよい。 */
.sec-link--property .sec-link__box {
    --color-border: var(--link-border-mute);

    background-color: var(--color-bg-mute);
}

/* ※ 導線バーだけ相手の面の色にする。
     works は下に来る property の色（--color-bg-mute）、
     property は上の works の色（--color-bg-light）。
     バーが次の面の色を先に見せる形になり、
     2つのセクションがつながって見える。
   ※ ※重要※ works 側は地が深くなるので、罫線も深い方に替える。
     既定の --color-border（#DCDAD6）のままだと
     --color-bg-mute（#E3E1DE）と明度がほぼ同じで、
     バーの上線と矢印ボックスの仕切りが消える。
   ※ property 側は箱で既に深い罫線に替えてあるのでそのまま。 */
.sec-link--works .sec-link__more {
    --color-border: var(--link-border-mute);

    background-color: var(--color-bg-mute);
}

.sec-link--property .sec-link__more {
    background-color: var(--color-bg-light);
}

/* ※ 物件情報の箱にだけ付ける「無料見学実施中」の札。
   ※ ※重要※ 押せない表示にとどめる。.sec-link__body が丸ごと <a> なので、
     ここをリンクにすると <a> の入れ子になる。
   ※ 箱の右上にぴったり付ける（top: 0 / right: 0）。
     ヘッダーのハンバーガーと同じ考え方で、
     余白を取らず面の角に揃える。
     ※ 基準は .sec-link__box（position: relative を持っている）。
     ※ 箱の上の余白（--link-body-py＝2rem）の中に収まるので、
       見出しや本文とは重ならない。
   ※ 黒地＋白の文字。ハンバーガー（黒の正方形に白の線）と揃えている。
   ※ ※重要※ 正方形にするので、改行は index.php 側の <br> で
     明示する（無料見学／実施中）。
     幅に任せて折り返すと「無料見学実／施中」のように
     意味の切れ目でないところで割れる。
   ※ ※重要※ 大きさは箱の幅の 25%（cqw）。以前は 22.5%（さらに前は 20%）。
     基準の入れ物は .sec-link__box（container-type: inline-size）。
     文字も同じ入れ物を見るので、札の大きさに追従する。
     ※ 1行目の「無料見学」は 4文字。字間込み（0.08em）を含めて
       約 4.3文字分なので、札幅の 25cqw に対して 2.8cqw なら
       左右に余白が残る。
       文言を長くするときはこの比率を見直すこと。
     ※ 狭い画面で小さくなりすぎないよう、文字は 11px を下限にする。
     ※ ※重要※ 上限は 5.5rem。768px以上では箱が広くなるので、
       25% だと札が 150px 前後になる（22.5% で 135px 前後、20% で 120px 前後）。
       文字側の上限（0.75rem）も 5.5rem のときの比率に合わせてある。
       片方だけ変えると、札が上限に当たったあとに
       文字だけ肥え続けるので必ずセットで直すこと。
     ※ ※重要※ cqw の前に rem の行を置いてフォールバックにすること。
       コンテナクエリ未対応の環境では cqw の行が丸ごと無効になるので、
       消すと幅も文字の大きさも指定が無くなる。 */
.sec-link__badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    width: min(25cqw, 5.5rem);
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-dark);
    /* ※ 本文用の Noto Sans JP。見出しと同じ明朝体だと
         小さい文字で線が飛び、黒地の上で特に読みにくい。
       ※ ※重要※ 太さは 500。header.php で読んでいる Noto Sans JP は
         400 / 500 / 700 の3つだけなので、600 にすると
         ブラウザが 700 を選んで意図より太くなる。 */
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-size: clamp(0.6875rem, 2.8cqw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-align: center;
    color: #FFFFFF;
    transition: color var(--transition);
}

/* ※ ホバーは地の黒は変えず、文字だけ金にする。
     他の導線（導線バー、フッター）と揃えている。
   ※ 黒地の上なので、黒地用の金（--color-gold-bright）を使う。
     ドロワーや FV のお知らせの帯と同じ値。 */
.sec-link__badge:hover {
    color: var(--color-gold-bright);
}

@media (min-width: 475px) {
    /* ※ 475px以上は重なりを深くする。
         狭い画面で -2.5rem だと画像が詰まって見えるので、
         475px未満だけ -2rem に浅くしている。
       ※ 475px はこの箱専用の分岐。
         サイト共通のブレークポイント（576/768/1024…）ではない。
       ※ ※重要※ ベースの margin ショートハンドより後ろに置くこと。
         前に置くと同じ詳細度で上書きされて効かない。 */
    .sec-link__box {
        margin-top: -2.5rem;
        /* ※ 475px未満は 1.25rem。ここから 1.5rem に広げる。 */
        margin-inline: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 576px) {
    /* ※ 浮かせる余白を少し広げる。
         画面が広がると 1.5rem では箱が端に寄って見える。
       ※ 上（画像への重なり）は変えない。
       ※ ※重要※ このブロックは下の 768px より前に置くこと。
         後ろに置くと 768px以上の margin: 0 を打ち消す。 */
    .sec-link__box {
        margin: -2.5rem 2rem 2rem;
    }
}

@media (min-width: 768px) {
    /* ※ 横並びになるので、残りの幅を受け持つ。 */
    .sec-link__body { flex: 1; }

    /* ※ 横並びでは浮かせない。画像と左右に並ぶので重ねる相手がいない。
       ※ 高さが半分になるので上下は 2rem のまま、左右だけ広げる。
       ※ 背景色は戻さない。幅いっぱいの面になるが、
         works / property の色分けは全幅で保つ。 */
    .sec-link__box {
        --link-body-px: 2.5rem;
        flex: 1;
        min-height: 0;
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .sec-link__box { --link-body-px: 4rem; }
}

/* ※ 1025px以上は、事例（works）のテキストブロックの上に線を引く。
     すぐ上の事業内容セクションの右側（明るい地 --color-bg-light）と、
     works の箱（同じ --color-bg-light）が同じ色でつながり、境目が消えるため。
   ※ 線の色は導線バー（.sec-link__more）の上の線と同じ --link-border-mute（#CFCCC7）。
     テキストブロックの上下の線を同じ色に揃えるため（以前は --color-border＝#DCDAD6）。
     変数は .sec-link__box が持っているので、ここからそのまま参照できる。
   ※ 1025px はサイトのPCレイアウトの境目（1024pxまではカルーセル）。 */
@media (min-width: 1025px) {
    .sec-link--works .sec-link__box {
        border-top: 1px solid var(--link-border-mute);
    }
}

/* ※ 見出し・説明文のまとまり。
     導線バーを下端に置くため、残りの高さをここが受け持つ。
     これが無いと、中央寄せの対象にバーも含まれて
     バーが下端へ行かない。 */
.sec-link__body-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

/* ---------------------------------------------------------
   事例・物件情報の切り替え

   ※ ※重要※ マークアップを2種類出してここで切り替える。
     〜767px ：--solo（それぞれ1面）
     768px以上：.sec-link-pair（2つで1面）
   ※ JS側の data-pane もこの切り替えに合わせている。
--------------------------------------------------------- */

.sec-link-pair {
    display: none;
}

@media (min-width: 768px) {
    .sec-link--solo {
        display: none;
    }

    /* ※ 2つを縦に並べて、合わせて1画面にする。 */
    .sec-link-pair {
        display: flex;
        flex-direction: column;

        /* ※ ※重要※ 入れ物にも高さを持たせる。
             中の .sec-link は flex: 1（＝flex-basis: 0%）なので、
             入れ物の高さが決まっていないと .sec-link 側の 50lvh は
             使われず、2つ合わせても「中身なりの高さ」にしかならない。
             1024pxまではカルーセルが height: 100% で上書きするため
             気づきにくいが、1025px以上（従来レイアウト）では
             2つで画面を埋められなくなる。
           ※ 下限は .sec-link の下限（18rem）× 2。 */
        height: max(100vh, 36rem);
        height: max(100lvh, 36rem);
    }

    /* ※ 中の2つは入れ物の半分ずつ。
         高さは入れ物から配分されるので、
         .sec-link 側の max(50lvh, 18rem) は使われない。 */
    .sec-link-pair .sec-link {
        flex: 1;
        min-height: 0;
    }
}

/* =========================================================
   見出しの主役の切り替え（英字 / 日本語）

   ※ index.php の $body_class にある heading-en-first を
     heading-ja-first に書き換えるだけで主従が入れ替わる。
     マークアップは触らなくてよい。
   ※ h2 は英字側に付いたままなので、日本語主役で確定するときは
     index.php の h2 / p も入れ替えること（見た目は先に確認できる）。
========================================================= */

.sec-link__en {
    font-family: var(--font-en);
    text-transform: uppercase;
}

/* ※ 日本語の左に金の中抜き正円を置く。主役・補助のどちらでも付く。
     ※ ※重要※ アクセントの形は「日本語が英字の上にあるか」で分けている。
       上にある（事例・物件情報・お知らせ）：左に金の中抜き正円
       下にある（会社概要・お問い合わせ誘導）：両側に金の横棒
     ※ 一度右に金の横棒（::after）を試したが外した。
       戻すときは width: 2.5rem / height: 1px / background-color: var(--color-accent)。
       フッターの見出し（.footer__nav-title::before）と同じモチーフ。
     ※ 左に置くのもフッターに合わせている。右に置くと
       日本語の文末に付く形になり、「・」や誤字に見える。
     ※ ※重要※ 大きさは em で持つ。heading-en-first（16px）と
       heading-ja-first（26〜32px）で文字サイズが倍以上変わるので、
       px 固定だと主役を入れ替えたときに釣り合いが崩れる。
     ※ 塗りつぶさない。線だけで見せるのは導線バーの丸や
       ページトップの丸と同じ考え方。
     ※ グラデーションは使わない（1pxの細線だと中央が抜けて見えるため）。 */
.sec-link__ja {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-heading);
}

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

/* ---- 英字を主役にする ---- */

.heading-en-first .sec-link__ja {
    margin-bottom: 0.625rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

.heading-en-first .sec-link__en {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    color: var(--color-title);
}

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

/* ---- 日本語を主役にする ---- */

.heading-ja-first .sec-link__ja {
    margin-bottom: 0.5rem;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

.heading-ja-first .sec-link__en {
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    /* ※ 明るい箱の上の文字なので --color-gold-deep */
    color: var(--color-gold-deep);
}

@media (min-width: 768px) {
    .heading-ja-first .sec-link__ja { font-size: 2rem; }
}

.sec-link__text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--color-text-light);
}

/* ※ 1200px以上は箱の左右余白（--link-body-px）が 4rem に広がるので、
     説明文も少し大きくする。事例・物件情報の両方に効く。 */
@media (min-width: 1200px) {
    .sec-link__text { font-size: 1rem; }
}

/* ---- 下端の導線バー ----
   ※ テキスト側の全幅に敷く帯。左に矢印の正方形、右にラベルを右寄せ。
   ※ ※重要※ 全幅にするため、負のマージンで .sec-link__body の
     パディングを打ち消している。値は --link-body-px / --link-body-py
     を参照しているので、余白を変えるときは変数側だけを直す。 */
.sec-link__more {
    display: flex;
    align-items: stretch;
    margin-top: 2rem;
    margin-inline: calc(var(--link-body-px) * -1);
    margin-bottom: calc(var(--link-body-py) * -1);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* 矢印の正方形。
   ※ 高さを明示するので、親の stretch では伸びない。
     バーの高さはこの正方形が決める。
   ※ 矢印の描き方は事業内容カードの導線と揃えている（1本のパス）。 */
.sec-link__more-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-right: 1px solid var(--color-border);
    transition: color var(--transition);
}

/* 正方形の中の丸い枠。
   ※ 要素を増やさず ::before で描く。矢印はこの上に重なる。
   ※ 円の大きさを変えるときは width / height を同じ値で直す。
     translate で中心を合わせているので、マージンの調整は不要。 */
.sec-link__more-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: border-color var(--transition);
}

/* ── 円の枠：ホバーで真上から360度、金の線を描く ──
   ※ 灰色の円（::before）はそのまま下敷きにして、
     同じ大きさの金の円（::after）を重ねる。
     conic-gradient のマスクで見せる角度（--link-ring）を
     0deg → 360deg に広げる。conic-gradient は真上（12時）から
     時計回りなので、上から描かれる。
   ※ ※重要※ --link-ring は @property で角度として登録している。
     登録しないとカスタムプロパティは補間されず、一瞬で円が出る。
     （@property 非対応の環境はその見え方になるが、崩れはしない）
   ※ 離したときは線を巻き戻さず、フェードで消してから角度を 0 に戻す。
     巻き戻すと反時計回りに消えていく動きになり、うるさい。
   ※ ※重要※ 大きさ・位置は ::before と必ず同じにする。
     ずれると灰色と金の二重線に見える。
   ※ 描く速さは下の :hover 側の 0.6s。 */
@property --link-ring {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.sec-link__more-btn::after {
    --link-ring: 0deg;

    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-accent-dark);
    border-radius: 50%;
    -webkit-mask: conic-gradient(#000 var(--link-ring), transparent 0);
    mask: conic-gradient(#000 var(--link-ring), transparent 0);
    opacity: 0;
    pointer-events: none;
    /* ※ 離したとき：0.25s で消してから、角度を一瞬で 0 に戻す。 */
    transition: opacity 0.25s ease, --link-ring 0s linear 0.25s;
}

.sec-link__more-btn svg {
    /* ※ 円（::before）より前面に出す */
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.sec-link__more-btn path {
    stroke: currentColor;
    stroke-width: 1;
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* ラベル。右端は上の本文と揃うようテキスト側のパディングに合わせる。 */
.sec-link__more-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    padding-inline: 1rem var(--link-body-px);
    transition: color var(--transition);
}

/* ※ 面全体を押せるようにする当たり判定。
     バー自体は下端にしか無いが、::after を箱の大きさに広げて
     箱のどこを押してもリンクが働くようにしている。
   ※ ※重要※ .sec-link__more 自身に position を付けないこと。
     付けるとこの ::after がバーの中だけに収まる。
     基準は .sec-link__box（position: relative）。
   ※ 無料見学の札は z-index: 2 でこの上に出してあるので、
     札だけは別のリンクとして押せる。 */
.sec-link__more::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* ※ ホバーは面のリンク（.sec-link__more）で拾う。
     ::after が箱全体に広がっているので、
     箱のどこにカーソルがあっても反応する。
     画像はリンクの外なので、そこに乗せても反応しない。
     塗りつぶさず、矢印とラベルをゴールドにする。
     円の枠は真上から金の線を描く（.sec-link__more-btn::after）。
   ※ 矢印は動かさない。円の中に収まっているので、
     動かすと枠にぶつかって見える。 */
.sec-link__more:hover .sec-link__more-btn {
    color: var(--color-accent-dark);
}

.sec-link__more:hover .sec-link__more-btn::after {
    --link-ring: 360deg;
    opacity: 1;
    /* ※ 入るときはすぐ見せて、角度だけ時間をかけて広げる。 */
    transition: opacity 0s, --link-ring 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ※ アニメーションを控える設定では描かずに、金の円をそのまま出す。
   ※ ※重要※ このブロックは上の :hover の指定より後ろに置くこと。
     同じ詳細度なので、前に置くと :hover 側の transition に打ち消される。 */
@media (prefers-reduced-motion: reduce) {
    .sec-link__more-btn::after,
    .sec-link__more:hover .sec-link__more-btn::after {
        transition: none;
    }
}

.sec-link__more:hover .sec-link__more-label {
    color: var(--color-accent-dark);
}

/* =========================================================
   04 会社概要（.sec-company）
   〜767px：上＝写真の箱（見出し）／下＝モルタルの地（ロゴ・円・ボタン）。
     事例・物件情報の 767px以下を上下反転した型。
   768〜1024px：上＝写真／下＝中身の縦並び（高さ 667px 未満は左右）。
   1025px以上：左＝写真／右＝中身の左右レイアウト。
   （どちらもこのブロックの末尾にある）
   ※ background-attachment: fixed は iOS Safari の再描画バグがあるため使わない。
========================================================= */

/* ※ スナップのため常時 100lvh。
     ※ overflow: hidden なので、中身が高さを超えると上下が切れる。
       スマホは上下の余白を詰めて収まるようにしている。
     ※ 低い画面でも切れないよう下限を持たせる。
       ※ 円はどの幅でも横1列（スマホでは 1個約106px）。
           英字 40px ＋ 日本語 40px ＋ 円 1段 約110px
           ＋ View Company 98px ＋ 上下 padding 96px = 約390px
       ※ 40rem は円が2段だった頃の値で、今はかなり余裕がある。
       ※ 768px以上は円が1段になるが、上下の padding が増えるので
         合計は同じくらいになる。共通で 40rem。 */
.sec-company {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: max(100vh, 40rem);
    height: max(100lvh, 40rem);
    padding-block: var(--spacing-lg);
    padding-inline: var(--section-px);
    /* ▼仮：company-option-04.webp。正式な写真が支給されたら差し替える。
         （以前は nagano.webp）
       ※ 1025px以上は左の写真枠（::before）でも同じ画像を使うので、
         変数で持っている。差し替えは --company-image の1か所だけ。 */
    --company-image: url('../images/company-option-04.webp');
    background-color: var(--color-bg-dark);
    background-image: var(--company-image);
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
}

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

.sec-company::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
}

.sec-company__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--section-width-narrow);
    margin-inline: auto;
    /* ※ 円の大きさをこの箱の幅（cqw）から決めるための入れ物。 */
    container-type: inline-size;
}

/* ※ 英字（Company）が主役、日本語（会社概要）がサブ。
   ※ 見出しは中央寄せの1か所だけなので、事例・物件情報より大きくしている。
   ※ heading-en-first / heading-ja-first の切り替えはここでは使わない。
     お知らせと同じく直接書いている。主従を入れ替えるときは
     index.php の h2 / p も入れ替えること。 */
.sec-company__en {
    font-family: var(--font-en);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .sec-company__en { font-size: 3.5rem; }
}

/* 日本語のサブタイトル
   ※ 中央寄せで、両側に金の横棒。要素を増やさず ::before / ::after で描く。
   ※ 暗い面（写真＋黒）の上なので明るいゴールド（--color-accent-light）。
   ※ 事例・物件情報・お知らせの日本語見出しは左寄せで「金の中抜き正円」。
     ここは中央寄せなので左右対称の横棒にしている。
   ※ 棒の長さは --company-ja-bar だけで調整する。 */
.sec-company__ja {
    --company-ja-bar: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.9);
}

.sec-company__ja::before,
.sec-company__ja::after {
    content: '';
    flex: 0 0 auto;
    width: var(--company-ja-bar);
    height: 1px;
    background-color: var(--color-accent-light);
}

@media (min-width: 768px) {
    .sec-company__ja {
        --company-ja-bar: 2.5rem;

        gap: 1rem;
        margin-top: 1rem;
        font-size: 1.125rem;
    }
}

/* ロゴとキャッチコピーのまとまり
   ※ ※重要※ 2つの間隔はここの gap で管理する。
     ロゴやキャッチコピーに margin を持たせない。
   ※ 下の3つの円との隔たりはこの箱の margin-bottom が持つ。
     値は幅ごとのブロックで指定する。
   ※ align-items: center なので、ロゴ側に margin-inline: auto は要らない。 */
.sec-company__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* 白抜きロゴ
   ※ 既定では隠しておき、見せ方は幅ごとのブロックで指定する。
     767px以下：下の「767px以下は写真の箱＋モルタル」のブロック
     768px以上：下の 768px以上のブロック
   ※ 大きさの指定が無いまま表示すると、画像が原寸で出てしまう。
   ※ 周りの金の円（circle-deco.png）は付けない。一度入れて外した。
     下に3つの円が並ぶので、ロゴにも付けると円が多すぎる。
     付けるときはドロワー下部（.drawer__footer-logo）と同じ作りにする。 */
.sec-company__logo {
    display: none;
}

/* ※ ※重要※ object-fit は使わない。切り抜き＋縮小の経路に入ると
     描画が荒れる（768px以上のブロックのコメント参照）。 */
.sec-company__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ロゴの下のキャッチコピー
   ※ 乗るのはモルタルの地（767px以下）または右側のモルタル面（768px以上）なので白。
   ※ ※重要※ ロゴは幅ごとに表示を切り替えているが、この行はどの幅でも出す。
     ロゴが出ない幅でもキャッチコピーだけは残る。
   ※ 上のロゴとの隔たりはここでは取らない（以前は margin-top: 1rem）。
     ロゴ側の margin-bottom で調整する。
   ※ 下の円との隔たりは .sec-company__info の margin-top（2.5rem）が持つ。
   ※ 字間を広めに取っているので、文言を長くすると狭い幅で折り返る。 */
.sec-company__catch {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
    .sec-company__catch { font-size: 1.125rem; }
}

/* ロゴ・円・View Company のまとまり。
   ※ 767px以下ではモルタルの地を敷いた箱になる。768px以上ではただの入れ物。
   ※ 幅いっぱいにしておく。768〜1024px の縦並びは親が align-items: center なので、
     指定が無いと中身なりの幅に縮む。中身は各要素の margin: auto と
     text-align: center（セクションから引き継ぎ）で中央に来る。 */
.sec-company__body {
    width: 100%;
}

/* ※ 各項目を円形の装飾画像で囲って横並びにする。 */
.sec-company__info {
    /* ※ 円どうしのすき間。円の大きさの計算にも使うので変数で持つ。
         768px以上・1025px以上は下の左右レイアウトのブロックで広げる。 */
    --company-circle-gap: 0.75rem;

    display: flex;
    justify-content: center;
    gap: var(--company-circle-gap);
    margin-top: 2.5rem;
}

/* ---- 円は左から順に出す ----
   ※ ※重要※ 合図は親（.sec-company__info）の js-reveal が受け取るが、
     親自身は動かさない。動かすと 3つまとめてフェードしてしまう。
     common.css の .js-reveal をここで打ち消している。
   ※ 子を個別に監視しないのは、横並びだとほぼ同時に画面に入り、
     左からの順番が保証されないため。遅延で順番を作る。
   ※ ※重要※ 隠しておく状態は html.has-js のときだけ。
     JSが動かない環境で円が消えたままにならないようにする。
   ※ 遅延は 0 → 0.15s → 0.3s。最後の円が出切るのは合図から約 1.1秒後。 */
.sec-company__info.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    html.has-js .sec-company__info-item {
        opacity: 0;
        transform: translateY(2rem);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    html.has-js .sec-company__info-item:nth-child(2) { transition-delay: 0.15s; }
    html.has-js .sec-company__info-item:nth-child(3) { transition-delay: 0.3s; }

    html.has-js .sec-company__info.is-revealed .sec-company__info-item {
        opacity: 1;
        transform: none;
    }
}

/* ※ ※重要※ 円はどの幅でも横1列（3つ並び）。折り返して 2＋1 にはしない。
     その代わり、円の大きさを入れ物（__inner）の幅と画面の高さから決めて縮める。
       円の幅 ＝ min（上限 11rem、（入れ物の幅 − すき間×2）÷ 3、22svh）
     375px のスマホでは約 106px まで小さくなる。
   ※ 円の内側の余白と文字の大きさも円の幅（--company-circle-w）に比例させる。
     円が 11rem のときに従来の値（余白 1.75rem・文字 0.8125rem）になる係数。
     小さいときは文字に下限（値 10px・ラベル 9px）を設けている。
   ※ --company-circle-w はラベル・値にも引き継がれ、そこでも同じ入れ物の
     cqw で計算されるので、同じ値になる。
   ※ 円は aspect-ratio: 1 で保つ。中身は中央揃え。 */
.sec-company__info-item {
    /* ※ ※重要※ 入れ物の幅（cqw）だけでなく、画面の高さ（svh）でも上限を掛ける。
         横向きのタブレットや、PCで縦に縮めたウィンドウだと、
         幅は広いのに高さが足りず、円と View Company が面からはみ出すため。
       ※ lvh ではなく svh を使う。ブラウザのバーが出ているときの
         狭い方の高さを見るので、バーが出てもはみ出さない。
         svh は固定値なので、バーの伸縮で円の大きさが変わることもない。
       ※ 22svh は高さ 800px でちょうど上限（11rem）に当たる値。
         もっと早く縮めたいならこの数字を下げる。
       ※ ※重要※ 下限は 7rem（112px）。max() で囲っている。
         ※ 狭いスマホだと、3つ並べるには入れ物の幅が足りなくなる。
           円は flex-shrink: 0 なので、足りない分は左右にはみ出し、
           .sec-company の overflow: hidden で切れる。
         ※ 切れるのを避けたいときは、下限を高さの項目だけに掛ける
           （min(11rem, cqwの式, max(7rem, 22svh))）か、下限を下げる。 */
    --company-circle-w: max(7rem, min(11rem, calc((100cqw - var(--company-circle-gap) * 2) / 3), 22svh));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-shrink: 0;
    width: var(--company-circle-w);
    aspect-ratio: 1 / 1;
    /* ※ 中身が装飾の円にかからないよう余白を大めに取る（円の幅の16%） */
    padding: calc(var(--company-circle-w) * 0.16);
    background-image: url('../images/circle-deco.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

.sec-company__info-label {
    font-family: var(--font-en);
    /* ※ 円の幅に比例（11rem のとき 0.6875rem）。下限 9px。 */
    font-size: clamp(0.5625rem, calc(var(--company-circle-w) * 0.0625), 0.6875rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.sec-company__info-value {
    /* ※ 円の幅に比例（11rem のとき 0.8125rem）。下限 10px。 */
    font-size: clamp(0.625rem, calc(var(--company-circle-w) * 0.074), 0.8125rem);
    line-height: 1.7;
    letter-spacing: 0.04em;
    /* ※ 語の途中で改行させない。
         「リノベーション」（7文字）は、円が小さいとき（375px で約106px、文字は下限 10px）
         中身の幅とほぼ同じで、折り返すと「リノベーショ／ン」になる。
         keep-all なら1行のままで、はみ出しても円の内側の余白に収まる。
       ※ 改行したいときは index.php 側で <br> を入れる。
         7文字を超える文言にするときは、円からはみ出さないか必ず確かめること。 */
    word-break: keep-all;
}

/* 会社概要ページへの導線（View Company）
   ※ 共通のお問い合わせボタン（〜1024px の横型）と同じ型。
     左＝矢印の正方形（右の1本線が仕切り）／右＝ラベル。
     ボタンの高さは正方形（3.5rem）が決める。
   ※ 矢印は事業内容カード・事例／物件情報の導線バーと同じSVG（index.php の $arrowSvg）。
   ※ 正方形の中に丸い枠を入れる。事例／物件情報の導線バー（.sec-link__more-btn）と同じ型。
     お問い合わせボタンは丸い枠なしなので、そこだけ違う。
   ※ 仕切り線は外枠と同じ色。ホバーでも必ず一緒に変える。 */
.sec-company__more {
    display: inline-flex;
    align-items: stretch;
    margin-top: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: background-color var(--transition), border-color var(--transition);
}

.sec-company__more-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    transition: border-color var(--transition);
}

/* 正方形の中の丸い枠。
   ※ 要素を増やさず ::before で描く。矢印はこの上に重なる。
   ※ 大きさは導線バーの円（.sec-link__more-btn::before）と同じ 2.25rem。
     translate で中心を合わせているので、大きさを変えるときは
     width / height を同じ値で直すだけでよい。
   ※ 色は外枠・仕切り線と同じ。ホバーではこの円は白50%のままで、
     上に重ねた白の円（::after）が描かれる。 */
.sec-company__more-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: border-color var(--transition);
}

.sec-company__more-btn svg {
    /* ※ 円（::before）より前面に出す */
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

/* ── 丸い枠：ホバーで真上から360度、白の線を描く ──
   ※ 事例／物件情報の導線バー（.sec-link__more-btn::after）と同じ仕組み。
     白50%の円（::before）を下敷きにして、同じ大きさの円（::after）を重ね、
     conic-gradient のマスクで見せる角度を 0deg → 360deg に広げる。
   ※ 色は金ではなく半透明の白。ホバーがお問い合わせボタンと同じ
     「白が強まる」動きなので、それに合わせている。
     値は外枠のホバーと同じ白60%。下敷きの白50%に重なるので、
     描かれた部分はおよそ白80%の明るさに見える。
     もっと控えめにするなら --company-ring-color の透明度を下げる
     （0.2 で外枠と同じ白60%相当になる）。
   ※ 角度の変数 --link-ring は導線バーのところで @property 登録済み。
     ここでもそれを使う（inherits: false なので干渉しない）。
   ※ ※重要※ 大きさ・位置は ::before と必ず同じにする。
     ずれると二重線に見える。
   ※ 離したときは巻き戻さず、フェードで消してから角度を 0 に戻す。 */
.sec-company__more-btn::after {
    --link-ring: 0deg;
    --company-ring-color: rgba(255, 255, 255, 0.6);

    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid var(--company-ring-color);
    border-radius: 50%;
    -webkit-mask: conic-gradient(#000 var(--link-ring), transparent 0);
    mask: conic-gradient(#000 var(--link-ring), transparent 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, --link-ring 0s linear 0.25s;
}

.sec-company__more-btn path {
    stroke: currentColor;
    stroke-width: 1;
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.sec-company__more-label {
    display: flex;
    align-items: center;
    padding-inline: 1.5rem 1.75rem;
}

/* ホバーは共通のお問い合わせボタン（a.sec-cta__button:hover）と同じ動き。
   地をうっすら明るくして、外枠と仕切り線を白60%に強める。
   文字と矢印の色は変えない。
   ※ ※重要※ 値は common.css の a.sec-cta__button:hover と揃えている。
     お問い合わせ側を変えたらこちらも合わせる。
   ※ 丸い枠だけはお問い合わせボタンに無い要素なので、
     真上から白の線を描く動き（.sec-company__more-btn::after）を付けている。 */
.sec-company__more:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

.sec-company__more:hover .sec-company__more-btn {
    border-right-color: rgba(255, 255, 255, 0.6);
}

.sec-company__more:hover .sec-company__more-btn::after {
    --link-ring: 360deg;
    opacity: 1;
    /* ※ 入るときはすぐ見せて、角度だけ時間をかけて広げる。
         速さは導線バーの円と揃えている。 */
    transition: opacity 0s, --link-ring 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ※ アニメーションを控える設定では描かずに、白の円をそのまま出す。
   ※ ※重要※ 上の :hover の指定より後ろに置くこと。 */
@media (prefers-reduced-motion: reduce) {
    .sec-company__more-btn::after,
    .sec-company__more:hover .sec-company__more-btn::after {
        transition: none;
    }
}

/* ---------------------------------------------------------
   会社概要：767px以下は「上＝写真の箱／下＝モルタルの地」
   ※ 事例・物件情報の 767px以下（上＝幅いっぱいの画像／下＝浮かせた箱）を
     上下反転した型。
       上：写真（nagano）の箱。左右に余白を取って浮かせ、見出しを乗せる。
             下端を 2rem 下の地に食い込ませる（事例の箱の -2rem と同じ）。
       下：モルタルの地（幅いっぱい）にロゴ・円・View Company。
     写真の箱の周りの地は、事例・物件情報と同じ暖色の暗いグレー（#35322E）。
   ※ 写真の箱は見出しの入れ物（__head）そのもの。背景に写真を敷いている。
     高さは 264px 固定。残りの高さは下の地（__body）がすべて受け持つ（以前は写真の箱が残りを受け持っていた）。
     白文字が空に溶けないよう、写真に薄い黒（35%）を重ねている。
   ※ セクション全体の写真と黒のオーバーレイ（セクションの背景と ::before）は使わない。
   ※ 円の大きさは下の地（__body）の幅から決める。地には左右の余白があるので、
     __inner の幅で計算すると円がはみ出す。
   ※ 高さ 667px のとき（375px幅）：上の余白 20px＋写真の箱 264px＋下の地 約415px（重なり 32px）。
     縦に長い画面では下の地だけが伸びる。
   ※ ここだけ max-width を使っている。
     768px以上は左右・縦並びの別の作りなので、min-width で書くと
     ここで変えた指定を 768px以上で全部戻す必要が出てしまう。
--------------------------------------------------------- */
@media (max-width: 767px) {
    .sec-company {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        /* 写真の箱の周りの地（事例・物件情報の地と同じ色） */
        background-color: #35322E;
        background-image: none;
    }

    .sec-company::before {
        display: none;
    }

    .sec-company__inner {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        max-width: none;
    }

    /* ※ 写真の箱の周りに見える地。
         以前はセクション全体の写真＋黒のベールがそのまま見えていた。
         明るい地にして、写真の箱とモルタルの地を浮かせる。
       ※ ※重要※ セクションの背景画像とベール（::before）はこの幅では使わない。
         768px以上の左右レイアウトでは ::before を写真の枠に流用しているので、
         消すのはこのブロックの中だけにすること。 */
    /* ※ 地の色は --color-bg-mute（#E3E1DE）。
         物件情報の箱と同じ色なので、面を続けて送ったときにトーンが揃う。
       ※ もっと濃くしたいときは直書きになる。
         #D5D1CA と #C9C4BC を試したが、どちらも暗すぎた。 */
    .sec-company {
        background-color: var(--color-bg-mute);
        background-image: none;
    }

    .sec-company::before {
        content: none;
    }

    /* 上：写真の箱（見出し入り） */
    .sec-company__head {
        position: relative;
        /* ※ 下の地に重ねるので前面に出す */
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 0 0 264px;
        /* ※ 上・左右とも同じ余白。値は事例・物件情報の箱の左右と同じ（475px以上は下の分岐で広げる）。
             以前は上だけヘッダーの高さ分（--header-height）を逃がしていた。
           ※ ※重要※ ヘッダー（左上のロゴ・右上のハンバーガーの正方形）は固定で上に乗るので、
             写真の箱の上の左右の角はロゴとハンバーガーに隠れる。 */
        margin: 1.25rem 1.25rem 0;
        padding: 1.5rem;
        background-color: var(--color-bg-dark);
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
            var(--company-image);
        background-size: cover;
        background-position: 40% center;
    }

    /* 下：モルタルの地（ロゴ・円・View Company） */
    .sec-company__body {
        /* ※ 円の大きさの基準（cqw）をこの箱にする */
        container-type: inline-size;
        /* ※ 写真の箱を 2rem 食い込ませる。その分、上の余白を増やす。 */
        margin-top: -2rem;
        /* ※ 左右は 1.5rem（576〜767px は下の分岐で 2rem）。以前は 1.25rem。 */
        padding: calc(2rem + 1.75rem) 1.5rem 2rem;
        /* ※ 地は濃いモルタル調テクスチャ（mortar-bg.webp）。1枚を cover で敷く。
             512px の繰り返しや dark-gray-bg.webp も試したが、元の形に戻した。
             画像は繋ぎ目のないタイルではないので、繰り返さない。
           ※ background-color は画像の読み込み前に出る色。画像の平均に近い、暖色寄りのほぼ黒。
           ※ ※重要※ 768px以上の右側の地（.sec-company）も同じ指定。変えるときはセットで。 */
        background-color: #221F1C;
        background-image: url('../images/mortar-bg.webp');
        background-size: cover;
        background-position: center;
    }

    /* ※ ロゴは画面の高さに応じて縮める（上限 8rem）。 */
    .sec-company__logo {
        display: block;
        width: min(8rem, 16svh);
    }

    .sec-company__brand {
        margin-bottom: 1.25rem;
    }

    .sec-company__info {
        margin-top: 0;
    }

    .sec-company__more {
        margin-top: 1rem;
        /* ※ 下の地（__body）が縦フレックスなので、何もしないと横幅いっぱいに伸びる。
             中身なりの幅のまま中央に置く。 */
        align-self: center;
    }

    /* ※ 下の地は、写真の箱（264px）を除いた残りの高さをすべて受け持つ。
         ロゴ・円・View Company はその中で上下中央に置く。
       ※ 上のブロックの .sec-company__body に足している。同じ詳細度なので後ろに置くこと。 */
    .sec-company__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 0 auto;
    }
}

/* ※ 写真の箱（__head）の上・左右の余白を、事例・物件情報のテキストボックス（.sec-link__box）の左右と揃える。
     475px未満 1.25rem（上のブロック）／475px〜 1.5rem／576px〜 2rem
     上の余白も左右と同じ値にする。
   ※ ※重要※ .sec-link__box の左右マージンと必ず同じ値にする。
     片方だけ変えると、面を送ったときに箱の幅がずれて見える。
   ※ ※重要※ 上の 767px以下のブロック（margin のショートハンド）より後ろに置くこと。
     同じ詳細度なので、前に置くと打ち消される。 */
@media (min-width: 475px) and (max-width: 767px) {
    .sec-company__head { margin: 1.5rem 1.5rem 0; }
}

@media (min-width: 576px) and (max-width: 767px) {
    .sec-company__head { margin: 2rem 2rem 0; }

    /* ※ 下の地（ロゴ・円・View Company）の左右の余白。ベースは 1.5rem。 */
    .sec-company__body { padding-inline: 2rem; }
}

/* ---------------------------------------------------------
   会社概要：768px以上は左右レイアウト
   ※ 左＝写真＋見出し（Company／会社概要）／右＝ロゴ・円・View Company。
     フッター／お問い合わせの横並びと同じ考え方。
   ※ 事例（画像左）→ 物件情報（画像右）→ 会社概要（画像左）と
     画像の位置が交互に入れ替わる並びになる。
   ※ ※重要※ 768px から左右にする。事例・物件情報が横並びになる幅と揃えている。
     ただし 768〜1024px（高さ 667px以上）は、このブロックの後ろの分岐で
     「上＝写真／下＝中身」の縦並びに上書きしている。
     左右のままなのは 1025px以上と、768〜1024px の高さ 667px 未満。
     768〜1024px は右側（下側）が狭いので、上下の余白を詰めている。
     1025px以上は下の分岐で余白と円のすき間を広げる。
   ※ 比率は --company-media-ratio（写真側の割合、0〜1の数値）で持つ。
     見出しの幅の計算で割り算をするので、% ではなく数値にしている。
   ※ ※重要※ 0.42 は上の物件情報（テキスト42：画像58）の境目と揃えた値。
     .sec-link__media の 58% を変えるときはこちらも合わせる。
     右は円を3つ横1列に並べるので広めに取っている。
     50% にすると 1025〜1280px で円が小さくなりすぎる。
   ※ 写真枠は ::before を流用する（767px以下では暗いオーバーレイ）。
   ※ 右側の地は濃いモルタル調テクスチャ（mortar-bg.webp、1枚を cover で敷く）。
     セクション本体の背景として指定している（下の .sec-company）。
--------------------------------------------------------- */
@media (min-width: 768px) {
    .sec-company {
        --company-media-ratio: 0.42;
        --company-media-w: calc(var(--company-media-ratio) * 100%);
        justify-content: flex-end;
        padding: 0;

        /* ── 右側の地：濃いモルタル調テクスチャ（mortar-bg.webp） ──
           ※ 画像は繋ぎ目のないタイルではないので、繰り返さず cover で敷く。
           ※ 変遷：--color-bg-dark（#1A1A1A）のベタ塗り → CSS のノイズ → warm-gray-bg.webp
             → mortar-bg.webp（cover）。
             その後 dark-gray-bg.webp や 512px の繰り返しも試したが、この形に戻した。
           ※ 左側は写真の枠（::before）が覆うので、見えるのは右側だけ。
           ※ background-color は画像の読み込み前に出る色。画像の平均に近い、暖色寄りのほぼ黒。
           ※ ※重要※ 767px以下の下の地（.sec-company__body）も同じ指定。変えるときはセットで。 */
        background-color: #221F1C;
        background-image: url('../images/mortar-bg.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .sec-company::before {
        right: auto;
        width: var(--company-media-w);
        background-color: transparent;
        /* ※ 写真の上に黒を重ねて、右の黒地との明るさの差を詰める。
             見出し（Company）が乗るが、大きい英字1語だけなので
             1024px以下（0.55）より薄くしている。読みにくければ上げる。
           ※ 濃さは --company-media-overlay だけで調整する。
             要素を増やさず、背景の重ね塗り（上＝黒、下＝写真）で描いている。 */
        --company-media-overlay: rgba(0, 0, 0, 0.35);
        background-image:
            linear-gradient(var(--company-media-overlay), var(--company-media-overlay)),
            var(--company-image);
        background-size: cover;
        /* ※ 横長の写真を縦長の枠で切り抜くので、左右が大きく落ちる。
             主峰が枠の中央付近に来るよう、少し左寄りに合わせている。 */
        background-position: 40% center;
    }

    /* ※ パディングはセクションではなく右側（__inner）で持つ。
       ※ container-type は円の大きさを右側の幅から決めるため。 */
    .sec-company__inner {
        width: calc(100% - var(--company-media-w));
        max-width: none;
        margin-inline: 0;
        /* ※ 768〜1024px は上下を詰める。カルーセルの面（下限 667px）に
             ロゴ・円・View Company を収めるため。1025px以上は下の分岐で広げる。 */
        padding: var(--spacing-lg) 2rem;
        container-type: inline-size;
    }

    /* ※ 見出し（Company＋会社概要の2行）は左の写真の上に置く。
       ※ ※重要※ マークアップは __inner の中のまま。
         767px以下は従来どおり円の上に出し、
         ここでだけ絶対配置で __inner の左外＝写真枠の上へ出している。
         2行まとめて動かすので、動かすのは h2 ではなく __head。
       ※ 基準は __inner（position: relative）。
         __inner の幅はセクションの (1 - 比率)、写真枠は比率なので、
         写真枠の幅＝ __inner の幅 × 比率 ÷ (1 - 比率)。
         比率を変えても --company-media-ratio だけで追従する。
       ※ 上下は __inner の中央。__inner がセクションの上下中央にあるので、
         見出しもセクションの中央に来る。 */
    .sec-company__head {
        position: absolute;
        top: 50%;
        right: 100%;
        width: calc(100% * var(--company-media-ratio) / (1 - var(--company-media-ratio)));
        padding-inline: 2rem;
        transform: translateY(-50%);
    }

    /* ※ 見出しが左へ抜けたので、円の上の余白は要らない。
         残すと右の中身が上下中央からその分だけ下にずれる。 */
    .sec-company__info {
        --company-circle-gap: 1.25rem;
        margin-top: 0;
    }

    /* ※ 円の上の白抜きロゴ。
       ※ ※重要※ 切り抜き（aspect-ratio: 3/2 ＋ object-fit: cover）は使わない。
         この組み合わせだとブラウザが切り抜いてから縮小する経路に入り、
         1280px の画像を 200px 前後まで落とすと品質の低い縮小になる。
         最初の描画だけきれいで、再描画で荒いものに置き換わる。
       ※ 画像は正方形で、ロゴの上下に透明の余白が大きく入っている。
         切り抜かない分だけ見た目が小さくなるので、幅を大きめに取って
         下の余白を詰めている（以前は 10〜14rem ＋ margin-bottom 2rem）。
       ※ 切り抜きたくなったら、CSSではなく画像側を 3:2 で書き出すこと。
       ※ 幅は画面幅に合わせて 12〜17rem。 */
    .sec-company__logo {
        display: block;
        width: clamp(12rem, 19vw, 17rem);
    }

    .sec-company__brand {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 1025px) {
    /* ※ 上下の余白はヘッダーの高さ（--header-height）に合わせる。
         この列は画面の上端から始まるので、右上のハンバーガーが上に乗る。
         以前は --spacing-xxl（5.5rem）固定で、たまたま 1025px時のヘッダーと同じ値だった。
         1440px以上でヘッダーが大きくなるので、変数を見る形に揃えている。
       ※ 左右の 2.5rem はこの列の内側の余白。
         セクションの端の余白（--section-px）とは別のものなので直書きのまま。 */
    .sec-company__inner {
        padding: var(--header-height) 2.5rem;
    }

    .sec-company__info {
        --company-circle-gap: 2rem;
    }
}

/* ---------------------------------------------------------
   会社概要：幅768〜1024px（カルーセルの幅）は縦並び
   ※ 上＝写真＋見出し（COMPANY／会社概要）、下＝モルタルの地にロゴ・円・View Company。
     左右レイアウトは 1025px以上だけ。
     （当初は高さ 1180px以上だけ縦並びにしていたが、768〜1024px 全体に広げた）
   ※ 左右レイアウト（上の 768px以上のブロック）を上書きして、向きだけ縦にする。
     写真の高さの割合は左右のときの幅と同じ --company-media-ratio（0.42）。
       写真の高さ ＝ セクションの 42%、下の地 ＝ 残りの 58%
   ※ 見出しは左右のときと同じく __inner 基準の絶対配置。
     __inner の上外＝写真の上に出す。写真の高さは __inner の高さ × 比率 ÷ (1 - 比率)。
   ※ ※重要※ 高さ 667px 以上（＝カルーセルが動くとき）だけにしている。
     割合で分けるにはセクションの高さが決まっている必要があるが、
     667px 未満は通常スクロールで高さが中身なりになり、写真が中身に重なる。
     667px 未満は左右レイアウトのまま。数字は index.js の mqOn と揃える。
   ※ ※重要※ 下の地は高さの 58% しかないので、横向き（1024×768）など
     高さの低い画面では中身が入り切らない。
     ロゴと円の大きさに画面の高さ（svh）の上限を設け、余白も少し詰めている。
       高さ 667px のとき：下の地 約387px、中身 約382px
     中身を増やすときは、高さ 667px で収まるか必ず確かめること。
   ※ ここだけ max-width と min-height を使っている。
     「カルーセルが動く幅・高さだけ」なので min-width だけでは書けない。
--------------------------------------------------------- */
/* ※ ▼試験中：768px以上をすべて左右レイアウトにしている。
     下の縦並びのブロックを止めるため、条件の min-height を
     当たらない値（99999px）にしてある。
   ※ ※重要※ 戻すときは (min-height: 99999px) を (min-height: 667px) に戻すだけ。
     ブロックの中身は何も触っていない。 */
@media (min-width: 768px) and (max-width: 1024px) and (min-height: 99999px) {
    .sec-company {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
    }

    /* 写真の枠：左の幅 42% → 上の高さ 42% */
    .sec-company::before {
        right: 0;
        bottom: auto;
        width: auto;
        height: var(--company-media-w);
        background-position: center;
    }

    /* 下の地：残りの高さを持ち、中身を上下中央に置く */
    .sec-company__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 0 0 calc((1 - var(--company-media-ratio)) * 100%);
        width: 100%;
        /* ※ 下の地は高さが限られるので、上下の余白を 2rem に詰める。 */
        padding: 2rem;
    }

    /* ※ ロゴと円は画面の高さに応じて縮める（高さの低い横向き対策）。
         縦に長い画面では上限（ロゴ 10rem・円 11rem）に当たるので影響しない。 */
    .sec-company__logo {
        width: min(10rem, 16svh);
    }

    .sec-company__brand {
        margin-bottom: 1.5rem;
    }

    .sec-company__info-item {
        --company-circle-w: min(11rem, calc((100cqw - var(--company-circle-gap) * 2) / 3), 20svh);
    }

    .sec-company__more {
        margin-top: 2rem;
    }

    /* 見出し：__inner の上外（＝写真の上）。写真と同じ高さにして上下中央に置く。 */
    .sec-company__head {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: calc(100% * var(--company-media-ratio) / (1 - var(--company-media-ratio)));
        transform: none;
    }
}

/* =========================================================
   05 お知らせ（.sec-news-link）
   画像を持たないので、明るい帯にしてリズムを変えている。
========================================================= */

/* ※ 上下の余白はヘッダーの高さ（--header-height）に合わせる。
     画面幅で変わる値なので、4rem（〜575px）・4.5rem（576px〜）・5.5rem（1025px〜）と
     自動で段階が付く。以前は --spacing-xl（4rem固定）。
   ※ ※重要※ 値の定義は common.css の :root。
     ヘッダーの高さを変えるとこのセクションの余白も変わる。
   ※ 地は #ECEAE8。--color-bg-light（#F4F3F1）と --color-bg-mute（#E3E1DE）の中間。
     フッター（--color-bg-light）よりわずかに深くして、下に向かって明るくなる流れを作っている。
   ※ トークンには無い値なので直書き。
     他の面でも使うことになったら :root に移すこと。
   ※ ※重要※ これ以上深くすると --color-border（#DCDAD6）との差が無くなり、
     リストの罫線が見えなくなる。 */
.sec-news-link {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    background-color: #ECEAE8;
}

.sec-news-link__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* ※ ※重要※ ベースは --w-sm（576px）、768px以上は --w-md（768px）で止める。
         768px以上で打ち止まりなので、1025px以上でも広がらない。
       ※ 以前はベース 768px、1025px以上は上限なしだった。 */
    max-width: var(--w-sm);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .sec-news-link__inner {
        max-width: var(--w-md);
    }
}

/* ※ 1025px以上は上限を外す。セクションの左右余白を引いた幅いっぱいに広がる。
   ※ 1025px はサイトのPCレイアウトの境目（1024pxまではカルーセル）。 */
@media (min-width: 1025px) {
    .sec-news-link__inner {
        max-width: none;
    }
}

/* ※ ※重要※ 768px以上は「見出しが上・リストが下（3列の横並び）」にする。
     以前は「見出しが左・リストが右」の左右分割だったが、
     そのまま3列にすると 768px で 1列 120px 前後になって読めない。
   ※ 見出しの左右振り分け（英字＋日本語が左／View more が右）は
     768px未満と同じグリッドをそのまま使う。 */
@media (min-width: 768px) {
    .sec-news-link__inner {
        gap: 2.5rem;
    }
}

/* ※ 見出しと導線を左右に振る。
     見出しが左（1列目に英字と日本語を2行）、
     View more が右（2列目を2行分またぐ）。
   ※ flex だと英字・日本語・導線が横に3つ並んでしまうので、
     マークアップを変えずに済ませるグリッドで組む。
   ※ ※重要※ この型は全幅で使う。768px以上でも見出しは上に来るので、
     左に見出し・右に導線という並びがそのまま生きる。 */
.sec-news-link__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 1rem;
}

.sec-news-link__ja,
.sec-news-link__en {
    grid-column: 1;
}

/* ※ 英字が主役、日本語がサブ。事例・物件情報と同じ型。
     ※ あちらは heading-en-first / heading-ja-first で切り替えているが、
       ここは切り替えの対象にしていないので直接書く。
       主従を入れ替えるときは index.php の h2 / p も入れ替えること。 */
.sec-news-link__ja {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}

/* ※ 日本語の左に金の中抜き正円。事例・物件情報と同じ。
     大きさは em で持つのも同じ。 */
.sec-news-link__ja::before {
    content: '';
    flex: 0 0 auto;
    width: 0.625em;
    height: 0.625em;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
}

.sec-news-link__en {
    font-family: var(--font-en);
    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) {
    .sec-news-link__en { font-size: 2.75rem; }
}

.sec-news-link__more {
    /* ※ 見出しの右。英字と日本語の2行分にまたがる（全幅共通）。 */
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: end;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-primary);
}

/* ※ 横棒の長さが変わってもボタン全体の幅が伸びないようにする。
     幅は 3rem で固定して場所を確保し、見える長さだけ scaleX で伸ばす。
     width を変えるとボタンが横に伸びて、
     周りのレイアウトが動いてしまう。
   ※ 以前は会社概要の導線（View more）も同じ手法だった。
     今は左に矢印の正方形を持つ型（View Company）に変えている。 */
.sec-news-link__more::after {
    content: '';
    display: inline-block;
    width: 3rem;
    height: 1px;
    margin-left: 0.75rem;
    vertical-align: middle;
    background-color: var(--color-accent-dark);
    transform: scaleX(0.667);
    transform-origin: left center;
    transition: transform var(--transition);
}

.sec-news-link__more:hover::after {
    transform: scaleX(1);
}

/* ---- 最新4件のリスト ----
   ※ リスト自体に線は引かない（以前は border-top）。
     区切りは項目ごとの「上の線」が持つので、
     縦積みでも一番下に線が残らない。 */

.sec-news-link__list {
    /* ※ 件数・列数は下の「幅ごとの表示件数と列数」で切り替える。 */
}

/* 0件のときの文言（PHP側に分岐を増やさない） */
.sec-news-link__list:empty::before {
    content: 'お知らせは準備中です。';
    display: block;
    padding-block: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* ── 項目の上の線：左端だけ濃い短い線＋残りは薄い線 ──
   ※ フッターの見出し下線（.footer__nav-title）や
     ドロワーの区切り線（.drawer__item）と同じ表現。
   ※ 薄い線（全幅）は背景で描き、濃い線（左端）は ::after が持つ。
     ホバーで伸ばすのは濃い線の方だけなので、別の要素にしている。
   ※ ※重要※ 濃い側の長さは割合（0〜1）で持つ。
     scaleX で伸ばすので、rem の固定値だと静止時の長さと合わせられない。
   ※ 濃い側は金にしない。フッターと同じ、薄い線より数段濃い暖かいグレー。
   ※ 長さと色はこの2つの変数だけで調整する。
   ※ 全幅共通。以前は 767px以下だけ 1色の下線（border-bottom）だった。 */
.sec-news-link__item {
    --news-line-accent: 0.1;
    --news-line-strong: #A8A39B;

    /* ※ 濃い線（::after）の基準 */
    position: relative;
    background-image: linear-gradient(var(--color-border) 0 0);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: left top;
}

/* ── 濃い線：ホバーで右へ伸びる ──
   ※ ドロワーのリンク（.drawer__link::after）と同じ仕組み・同じ速さ。
   ※ width ではなく transform を動かす。レイアウトを起こさないので
     動きが滑らかになる。
   ※ イージングは easeOutCubic。0.6s かけてゆったり伸ばす。 */
.sec-news-link__item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--news-line-strong);
    transform: scaleX(var(--news-line-accent));
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.sec-news-link__item:hover::after {
    transform: scaleX(1);
}

/* ※ ※重要※ 並びはどの幅でも同じ。
     1行目：日付＋カテゴリ／2行目：タイトル
     以前は 576px以上で横並び（日付の右にタイトル）にしていた。 */
.news-brief {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block: 1rem;
}

/* ---- 幅ごとの表示件数と列数 ----
   ※ PHP側は常に4件取得している（index.php の $config['dspNum']）。
     何件見せるかはここで切り替える。
   ※ ※重要※ 件数と列数は必ず揃える。さもないと最後の行だけ欠けて見える。
       〜767px    ：3件（縦積み。縦に長くなりすぎるので 4件目は出さない）
       768〜1199px：4件（2列×2行。1列 324px 前後）
       1200px〜   ：4件（4列。1列 270px 前後）
   ※ PHPの取得件数を変えたときはここも直す。 */
.sec-news-link__item:nth-child(4) {
    display: none;
}

/* ---- 768px以上：リストを横並びにする ----
   ※ ※重要※ 区切りは列ごとの上の線にする。
     縦積みのときの下線（__item の border-bottom）と
     リスト全体の上線は消す。残すと線が二重になる。
   ※ ※重要※ .news-brief の 576px の横並びを打ち消すので、
     必ずあのブロックより後ろに置くこと。
     列が狭いので、日付・カテゴリとタイトルは縦に積む。 */
@media (min-width: 768px) {
    .sec-news-link__item:nth-child(4) {
        display: block;
    }

    .sec-news-link__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .sec-news-link__item {
        /* ※ ※重要※ グリッドの子は min-width が auto なので、
             中身の最小幅が 1fr の取り分を超えると、
             その列だけ広がって列幅が揃わなくなる。 */
        min-width: 0;
    }

    /* ※ 列が狭いので、上下の余白だけ少し広げる。
         並び（縦積み）はベースと同じなので、ここでは触らない。 */
    .news-brief {
        padding-block: 1.25rem 0;
    }
}

/* ※ 1200px以上は 1行に4列。
     ※ ※重要※ __inner の上限が 768px なので、1列 180px 前後になる。
       狭すぎると感じたら、2列（2行）のままにするか、
       __inner の上限を上げる。 */
@media (min-width: 1200px) {
    .sec-news-link__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ※ ※重要※ ホバーで文字の色は変えない。
     以前は日付・カテゴリ・タイトルをまとめて金（--color-accent-dark）に
     していたが、文字量が多いので金の面積が広くなり、安っぽく見えた。
     ホバーの合図は上の線が伸びる演出（.sec-news-link__item::after）が受け持つ。
     ドロワーのリンクと同じ考え方。
   ※ 金はカテゴリのタグや見出しの装飾に取っておく。 */

.news-brief__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.news-brief__date {
    font-family: var(--font-en);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

/* ※ カテゴリのバッジはお知らせ一覧のバッジ（news.css の .news-card__cat）と同じ色。
     薄い枠線（--color-border）＋濃いグレーの文字（--color-secondary）。地は透明。
   ※ ※重要※ 色を変えるときは両方直すこと。
     大きさと余白はこちらの方が小さい（トップは文字が小さいため）。そこは揃えていない。
   ※ 変遷：白地に薄い罫線 → 黒地に白文字 → この形。
   ※ セクションの地（#ECEAE8）と枠線（#DCDAD6）の差が小さいので、
     枠が淡すぎるときは一段濃い #A8A39B に上げる（一覧側とセットで）。 */
.news-brief__cat {
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--color-border);
    background-color: transparent;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
}

.news-brief__title {
    flex: 1;
    min-width: 0;
    /* ※ 475px未満は 0.9rem。狭い画面で行の折り返しが増えすぎないよう少し下げる。
       ※ 475px はこの文字専用の分岐。サイト共通のブレークポイントではない
         （FVのリード文や、事例・物件情報の箱と同じ）。 */
    font-size: 0.9rem;
    line-height: 1.7;
}

@media (min-width: 475px) {
    .news-brief__title { font-size: 0.9375rem; }
}

/* =========================================================
   カルーセル（1024px未満）

   ※ html.is-carousel が付いている間だけ有効。
     付け外しは index.js の carousel が行う。
   ※ 面を transform で入れ替えるので、スクロール位置を使わない。
     CSSのスナップと違って、1スワイプ＝1面が保証される。
   ※ 1024px以上ではこのブロックは一切効かない。
     .carousel はただの入れ物に戻り、従来のレイアウトになる。
========================================================= */

/* ※ カルーセル中は背後のページを動かさない。
     面を固定しているので、スクロールされると二重に動く。 */
html.is-carousel,
html.is-carousel body {
    overflow: hidden;
    height: 100%;
}

/* ※ カルーセルを抜けたあともスクロールバーは出さない。
     カルーセル中は出ないので、抜けた瞬間に現れると
     幅が変わってレイアウトがカクッと動く。
   ※ スクロール自体はできる。見た目を消すだけ。 */
html.is-carousel-page {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧Edge */
}

html.is-carousel-page::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
}

/* ※ カルーセル中はCSSの吸着を切る。
     面を transform で動かしているので、
     ブラウザの吸着と衝突する。 */
html.is-carousel {
    scroll-snap-type: none;
}

html.is-carousel .carousel {
    position: fixed;
    inset: 0;
    /* ※ ※重要※ 背後のページより確実に前に出す。
         CTAの中身に z-index: 1 があるので、
         こちらも 1 だと後から書かれた側が前に来る。
       ※ 器に背景色は敷かない。各面が自分の背景を持っているし、
         敷くと抜ける瞬間に黒い画面が挙さまって見える。 */
    z-index: 100;
    overflow: hidden;
}

/* ※ カルーセルを抜けたあとは .carousel ごと隠す。
     中身（FV〜会社概要）は通常のフローに戻るので、
     残しておくと先頭にFVが並んでしまう。
   ※ 上へ戻るときは JS が .is-released を外して
     カルーセルを復帰させる。 */
html.is-released .carousel {
    display: none;
}

/* ※ カルーセルを抜けたあと、中身が画面より短いときの下の余白を埋める。

   ※ .carousel を隠したあとに残るのは「お知らせ＋ページ末尾」だけ。
     縦長の画面（iPad Pro 12.9インチの縦 1024×1366 など）だと
     この2つでは画面を埋め切れず、フッターの下に
     body の地の白が帯になって出る。
   ※ body を縦のフレックスにして、余った高さを
     ページ末尾→お問い合わせ誘導の順に渡す（下の .sec-cta の指定）。
   ※ .is-released が付くのは 1024px以下だけなので、
     .page-end はまだただの div（1025px以上のグリッドではない）。
     ここをフレックスにしても横並びのレイアウトには影響しない。
   ※ ※重要※ ヘッダー・ドロワー・スプラッシュは position: fixed なので
     フレックスの子にならない。body をフレックスにしても位置は変わらない。
   ※ 余りの受け手は写真のあるお問い合わせ誘導。フッターは伸ばさない。 */
/* ※ ※重要※ is-released だけでなく is-carousel の間も同じ指定を掛ける。
     カルーセルの最後の面から下へ抜けるとき、面が上へ滑っていく 0.6秒の間は
     まだ is-carousel のままで、その後ろにお知らせ以降のページが見えている。
     is-released だけだと、この間は余りの高さが埋まらず、
     縦長の画面（iPad Pro 縦）でフッターの下に白い帯が出て、
     抜け終わった瞬間に埋まる（白が一瞬見える）。
     カルーセル中の .carousel は position: fixed なのでフレックスの子にはならず、
     面の見え方には影響しない。 */
html.is-carousel body,
html.is-released body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100lvh;
}

html.is-carousel .page-end,
html.is-released .page-end {
    display: flex;
    flex-direction: column;
    /* ※ 伸びるはしても縮むはしない */
    flex: 1 0 auto;
}

/* ※ 余った高さはお問い合わせ誘導（写真＋黒の面）に渡し、中身を上下中央に置く。
   ※ 以前はフッターに渡してコピーライト帯を下端に寄せていたが、
     明るい地のままナビと帯の間が大きく空き、中身のない余白に見えた。
     写真の面が伸びる分には「空いている」感じが出ない。
   ※ フッターは中身なりの高さのまま、ページの一番下に来る。
   ※ 写真と黒のオーバーレイ（.sec-cta::after）は inset: 0 なので、
     伸びた分もそのまま覆う。
   ※ __inner は縦フレックスの子になるが、既定の stretch で幅いっぱいになり、
     max-width と margin-inline: auto でこれまでどおり中央に来る。 */
html.is-carousel .page-end .sec-cta,
html.is-released .page-end .sec-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
}

/* ※ 抜けたあとは普通のスクロールにする。
     お知らせ・CTA・フッターは高さがまちまちなので、
     吸着させるとかえって見づらい。 */
html.is-released {
    scroll-snap-type: none;
}

html.is-carousel .carousel__pane {
    position: absolute;
    inset: 0;
    /* ※ 面は画面ぴったり。
       ※ ※重要※ 下限は 667px。
         iPhone SE 第2/第3世代（375×667）が
         現役の端末で一番低い画面なので、そこを基準にする。
         これより低い環境（SE第1世代など）では
         面の下が切れるが、レイアウト自体は崩れない。
       ※ index.js の PANE_MIN と揃えること。 */
    height: 100%;
    min-height: 667px;
    /* ※ ブラウザのスクロールを切る。
         JSが touchmove を引き受けるために必要。
       ※ ※重要※ ベース（576px未満）は pan-x。
         あの幅では事業内容が横スライダーなので、横方向だけ指で動かせる。
         touch-action は先祖との共通部分が効くので、面が none のままだと
         中の .sec-service__track で pan-x を指定しても横に動かせない。
         576px以上はスライダーが無いので、下の分岐で none に戻す。
       ※ 縦はどちらも許可しないので、面の送りはいずれもJSが引き受ける。
       ※ 中身が入り切らないときは index.js の fitCards が
         カードの高さを縮める。ここでは切るだけ。 */
    touch-action: pan-x;
    overflow: hidden;
}

@media (min-width: 576px) {
    html.is-carousel .carousel__pane {
        touch-action: none;
    }
}

/* ※ ※重要※ 面を重ねて置いているので、背景を持たないセクションが
     あると後ろが透ける。.sec-link はベースで --color-bg-dark を
     持たせてあるので、ここでは何もしない。
     （以前はここで白を敷いていた。地を黒にしたので不要になった。
       ベースの色を変えるとカルーセル中の見え方も変わる。）
   ※ .carousel__pane に一括で背景を敷かないこと。会社概要のような
     「写真＋半透明の黒」のセクションが混ざって全体が薄くなる。 */

/* ※ ※重要※ カルーセル中は --solo 同士の区切り線を消す。
     ベースの .sec-link + .sec-link の border-top は、
     通常フローで事例と物件情報が縦に並ぶときの境目。
     カルーセルではそれぞれが別の面なので境目は要らない。
   ※ 残しておくと、面を送るときにこの1pxの線が
     次の面の上端と一緒に画面を下から上へ横切って見える。
   ※ ペア（768px以上）の中の線は残す。
     あちらは1つの面の上下を分ける本来の区切り。 */
html.is-carousel .sec-link--solo + .sec-link--solo {
    border-top: 0;
}

/* ※ 面の中身も面と同じ下限を持たせる。
     ※ ※重要※ min-height: 0 だと、面が 667px でも
       セクションは画面高さのまま縮む。
       中身だけが小さく見える原因になる。
     ※ 事例・物件情報は 768px以上で 2つ入りになるので、
       単体の --solo だけを対象にする。 */
html.is-carousel .fv,
html.is-carousel .sec-link--solo,
html.is-carousel .sec-company {
    height: 100%;
    min-height: 667px;
    max-height: none;
}

html.is-carousel .sec-service--slider,
html.is-carousel .sec-service--pair {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* ※ 面と同じ下限。中身だけが縮むのを防ぐ。 */
    min-height: 667px;
    /* ※ ※重要※ ヘッダー（ロゴとハンバーガーの正方形）分の
         逃がしはここ（セクション側）で持つ。
         __inner 側に持たせると、__inner のパディングボックスの
         中心とカードの中心がズレ、
         見出しの絶対位置（bottom: 50% + カードの半分）が合わなくなる。 */
    padding-block: var(--header-height) 0;
}

/* ※ 576px未満は 1枚用だけ、576px以上は 2枚用だけを使う。
     ベース側の切り替えをここでも保つ。 */
html.is-carousel .sec-service--pair {
    display: none;
}

@media (min-width: 576px) {
    html.is-carousel .sec-service--slider {
        display: none;
    }

    html.is-carousel .sec-service--pair {
        display: flex;
    }
}

/* ※ ※重要※ 面からカードまで高さを伝える。
     途中の入れ子（__inner）に高さが無いと、
     カードが伸びない。
   ※ ※重要※ ここにはパディングを入れない。
     見出しの絶対位置がこの要素の 50%（パディングボックス基準）を
     見ているので、パディングが入るとカードの中心とずれる。
     ヘッダー分の逃がしはセクション側で持っている。
   ※ 幅の上限は下の分岐で決める。 */
html.is-carousel .sec-service__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

/* ※ 面を送るとき、カードと見出しだけフェードさせる。

   ※ ※重要※ 面（セクション）そのものを透かさないこと。
     .carousel には背景を敷いていないので、面を透かすと
     切り替えの途中で背後のページ（お知らせ）が見えてしまう。
     地色と黒面はセクション側が持っているので、
     中身（__inner）だけ薄くすれば面は画面を覆ったまま。
   ※ カードの枠線（1px）が上端を通り抜けるのが目に付く、という
     症状への対処。ヘッダーのバーは背景を持たないので、
     何もしないと線がそのまま見える。
   ※ 出るときは速く（300ms）、入るときはゆっくり（600ms）。
     送り始めは面の動きが速いので、出る側は早めに消したい。
   ※ ※重要※ 入る側の 600ms は index.js の DURATION と揃えること。
   ※ 現在の面かどうかは index.js が aria-hidden で持っている。
     クラスを増やさずにそれを使う。 */
html.is-carousel .sec-service .sec-service__inner {
    transition: opacity 600ms ease;
}

html.is-carousel .sec-service[aria-hidden="true"] .sec-service__inner {
    opacity: 0;
    transition: opacity 300ms ease;
}

/* ※ スライダーのときは画面幅いっぱい。
   ※ ※重要※ margin-inline（ベースの auto）を 0 に戻すこと。
     縦フレックスの子に左右 auto マージンが残っていると
     align-items: stretch が効かず、入れ物の幅が中身なりになる。
     幅が確定しないと、カードの幅（%）も見出しの中央位置も狂う。
   ※ min-width: 0 と max-width: 100% で、トラックの中身に
     押し広げられないようにする。 */
html.is-carousel .sec-service--slider .sec-service__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

/* ※ ※重要※ 2枚並ぶときは --w-md（768px）で止める。
     タブレット幅いっぱいに広げると
     1枚が大きすぎて間延びして見える。
   ※ max-width: none をこの後ろに書かないこと。
     同じ詳細度なら後から書いた方が勝つ。 */
html.is-carousel .sec-service--pair .sec-service__inner {
    max-width: var(--w-md);
    margin-inline: auto;
}

/* ※ カードは面いっぱいにしない。
     上下に余白が残って、カードが浮いて見える。
   ※ 60svh は「面に入るカード全体」の高さ。
     1枚のときはその1枚が 60svh、
     2枚並ぶときは行全体で 60svh。
   ※ ※重要※ 下限は rem で固定せず、min-height: fit-content で
     中身なりにする。説明文を増やしても自動で追従する。 */

/* ※ カードの高さは index.js の fitCards が
     --sv-card-h に入れる。
     現在は 60svh に固定している（デザイン検討中の設定）。
     中身が入り切らないときに広げる動きは止めてあるので、
     面に収まらない分は上下が切れる（戻し方は index.js の fitCards のコメント）。
   ※ JSが動く前の初期値として 60svh を入れておく。
   ※ ※重要※ 値を変えるときは index.js の base（vh * 0.60）と必ずセットで。 */
html.is-carousel .carousel {
    --sv-card-h: 60svh;
}

/* ※ 576px未満のスライダー。カードの幅は .sec-service__track 側で決めているので、
     ここでは高さだけ渡す（flex は上書きしない）。 */
html.is-carousel .sec-service--slider .sec-service__item {
    height: var(--sv-card-h);
}

/* 2枚並ぶときは行自体を同じ高さにし、中の2枚はいっぱいに伸ばす */
html.is-carousel .sec-service__row {
    flex: 0 0 auto;
    height: var(--sv-card-h);
    align-items: stretch;
}

html.is-carousel .sec-service__row .sec-service__item {
    height: auto;
    min-height: 0;
}

/* ※ ※重要※ 横並びのときは2枚の画像の高さを揃える。
     flex: 1 のままだと本文の量で残りが変わり、
     タイトルが2行のカードだけ画像が小さくなる。
     割合で固定すれば、本文の長さに関係なく揃う。 */
html.is-carousel .sec-service__row .sec-service__card-media {
    flex: 0 0 45%;
}

/* ※ カルーセルが動かないとき（高さ667px未満の通常スクロール、
     アニメーションを控える設定など）も、横並びの2枚の画像の高さを揃える。
   ※ ※重要※ 上の 45% は使えない。通常スクロールではカードの高さが
     中身なり（決まっていない）なので、割合の基準が無い。
     代わりに横縦比で高さを決める。2枚は同じ幅なので、高さも必ず揃う。
     本文の量の差は本文側（flex: 1）が吸収し、View の導線は下端に揃う。
   ※ ※重要※ ここだけ max-width を使っている（他は min-width 統一）。
     1025px以上はカードが「画像左・本文右」の横型になり、
     画像は高さいっぱいに伸ばすので横縦比を持たせてはいけない。
     指定の詳細度が高いので、min-width で書いて後から戻すと
     1025px以上の指定を打ち消してしまう。
   ※ 576px 未満はカード1枚ずつなので対象外。
   ※ 横縦比は 16:10。カルーセル時の見え方（横長め）に近づけている。 */
@media (min-width: 576px) and (max-width: 1024px) {
    html:not(.is-carousel) .sec-service__row .sec-service__card-media {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
    }
}

/* ※ 黒面は面ごとに左右を入れ替える。
     カルーセルで送るたびに向きが変わるので、
     同じ型の面が続いても単調にならない。
   ※ 向きは PHP 側で --dark-left / --dark-right を付けている。
   ※ ※重要※ html.is-carousel ではなく幅で切り替える（1024px以下で交互）。
     高さ667px未満はカルーセルにならず通常スクロールになるが、
     そのときもカルーセルと同じく交互にするため。
     縦に並んでも左右の黒面が交互になるので、ジグザグに見える。
     （アニメーションを控える設定でカルーセルが止まっているときも同じ）
   ※ 1025px以上は従来どおり左のまま。下の 1025px の分岐で戻している。
     1025 は index.js の mqOn（max-width: 1024px）と揃えること。 */
.sec-service--dark-right::before {
    inset: 0 0 0 calc(100% - var(--service-dark-w));
}

@media (min-width: 1025px) {
    .sec-service--dark-right::before {
        inset: 0 calc(100% - var(--service-dark-w)) 0 0;
    }
}

/* ---------------------------------------------------------
   事業内容：4枚で1面（.sec-service--quad）

   ※ 幅576〜1024px かつ 画面の高さ 1180px以上のときだけ、2枚ずつ（--pair）の
     代わりに 2×2 のセクションを出す。縦に長いタブレットの縦向きが対象。
     スマホは高さが 1180px に届かないので対象外。
   ※ カードは 1025px以上と同じ「画像左・本文右」の横型。
     縦積みのまま2段にすると、1段の高さが足りず本文の下（View の導線）が切れる。
     横型なら画像はカードの高さいっぱいに伸びるので、2枚の画像も必ず揃う。
   ※ ※重要※ カルーセル中の1段の高さ（--sv-card-h）は index.js の fitCards が
     2段分で計算する。段の間隔（1rem）は fitCards の QUAD_GAP と必ず揃える。
   ※ ※重要※ このブロックはカルーセルの --pair の表示切り替えと、
     高さの短い画面用の横縦比の指定より後ろに置くこと。
     同じ詳細度の指定を上書きしているので、前に置くと効かない。
   ※ ここだけ max-width と min-height を使っている。
     「カルーセルの幅のうち、縦に長い画面だけ」なので min-width だけでは書けない。
--------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 1024px) and (min-height: 1180px) {
    .sec-service--pair {
        display: none;
    }

    .sec-service--quad {
        display: block;
    }

    /* ※ 2段の間隔。index.js の QUAD_GAP（16px）と揃える。 */
    .sec-service--quad .sec-service__row + .sec-service__row {
        margin-top: 1rem;
    }

    /* ---- カード：画像左・本文右の横型（1025px以上と同じ値）---- */
    .sec-service--quad .sec-service__card {
        flex-direction: row;
        min-height: 0;
    }

    .sec-service--quad .sec-service__card-media {
        flex: 0 0 45%;
        min-height: 0;
    }

    .sec-service--quad .sec-service__card-body {
        flex: 1;
        min-width: 0;
        --card-body-px: 1.5rem;
        --card-body-py: 1.5rem;
    }

    /* ※ カルーセルが動かないときの「画像を横縦比で揃える」指定を打ち消す。
         横型では画像は高さいっぱいに伸ばすので、横縦比を持たせてはいけない。 */
    html:not(.is-carousel) .sec-service--quad .sec-service__row .sec-service__card-media {
        flex: 0 0 45%;
        aspect-ratio: auto;
    }

    /* ---- カルーセル中 ---- */
    html.is-carousel .sec-service--pair {
        display: none;
    }

    html.is-carousel .sec-service--quad {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        /* ※ 面と同じ下限。--pair と同じ考え方。 */
        min-height: 667px;
        /* ※ ヘッダー分の逃がしはセクション側で持つ（--pair と同じ理由）。 */
        padding-block: var(--header-height) 0;
    }

    html.is-carousel .sec-service--quad .sec-service__inner {
        max-width: var(--w-md);
        margin-inline: auto;
    }

    /* ※ JS（fitCards）が値を入れる前や測れなかったときの初期値。2段分に直す。
         基本の 60svh のままだと、1段ずつ 60svh になって面から大きくはみ出す。
       ※ ※重要※ ベースの html.is-carousel .carousel（--sv-card-h: 60svh）と
         同じ詳細度なので、このブロックが後ろにあることで効いている。 */
    html.is-carousel .carousel {
        --sv-card-h: calc((60svh - 1rem) / 2);
    }

    /* ※ 見出しは2段分のカードの上端に合わせる。
         カードの塊の高さ ＝ 1段 × 2 ＋ 間隔 1rem なので、その半分は
         「1段分（--sv-card-h）＋ 0.5rem」。 */
    html.is-carousel .sec-service--quad .sec-service__head {
        bottom: calc(50% + var(--sv-card-h) + 0.5rem);
    }
}

/* ※ 見出し（Service）はカード基準の絶対位置で置く。
     ※ カードは __inner の中で上下中央なので、
       「中央＋カードの半分」がカードの上端になる。
       そこに下辺を合わせ、margin-bottom で間隔を取る。
     ※ フローに置くと見出しの分だけカードが下にずれるので、
       カードの位置を固定したいときは絶対位置の方が確実。
     ※ --sv-card-h は index.js の fitCards() が入れるカードの高さ。
     ※ 見出しはカードの上に浮くが、カードは中央なので
       上に必要な隔たりは見出しの高さ×2。
       fitCards() でその分を引いている。 */
html.is-carousel .sec-service__head {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: calc(50% + var(--sv-card-h) / 2);
}

/* ※ カウンターは見出しと上下対称に、カードの塊の下へ浮かせる。
   ※ ※重要※ 流れの中に置くと、その分だけカードの塊が上にずれる。
     見出しと同じく絶対位置にして、カードの位置に影響させない。 */
html.is-carousel .sec-service__counter {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(50% + var(--sv-card-h) / 2);
    margin-top: 0;
    padding-top: 0.875rem;
}

/* ---------------------------------------------------------
   まとめられた面（.is-grouped）

   ※ 事例と物件情報は 768px以上で 2つで1面。
     上下に分ける（各 50%）。
     元々「写真とテキストの帯」なので、
     上下に重ねる方が自然に見える。
   ※ 事業内容はこの仕組みを使わない。
     2枚入りのセクションを直接出している。

   ※ ※重要※ 下半分のずらしに top を使わない。
     JSは translateY で面を動かしているので、
     top でずらすと画面外への移動量と合わなくなり、
     別の面を見ているときに居残る。
     margin-top なら面と一緒に動く。
   ※ margin-top の % は「親の幅」が基準なので使わない。
     横長の画面だと意図より大きくずれる。svh で渡す。
--------------------------------------------------------- */

/* ---------------------------------------------------------
   事例・物件情報（カルーセル）

   ※ ※重要※ 事業内容と同じくマークアップを2種類出している。
     〜767px ：--solo（それぞれ1面）
     768px以上：.sec-link-pair（2つで1面）
     1つのセクションを height: 50% にして並べると、
     中身が半分の高さに押し込まれて縮む。
--------------------------------------------------------- */

html.is-carousel .sec-link-pair {
    height: 100%;
    min-height: 667px;
}

/* ※ ※重要※ display は 768px 以上だけ。
     ここで無条件に flex にすると、
     ベースの display: none を上書きして
     767px以下でも 2つ入りが表示され、
     --solo と重なって画像が二重に見える。 */
@media (min-width: 768px) {
    html.is-carousel .sec-link-pair {
        display: flex;
        flex-direction: column;
    }
}

/* ※ 中の2つは面の半分ずつ。
     ベースの max() の下限は外す。
     残っていると 2つで面を超えて下にはみ出す。 */
html.is-carousel .sec-link-pair .sec-link {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* =========================================================
   1画面1セクションの切り替え（スクロールスナップ）
   ※ 打ち合わせで出ていたTikTok風の上下スワイプ演出。
     外すときはこのブロックごと削除すればよい。

   ── 入力装置で役割を分ける ──
   マウス・トラックパッド：JSが引き受け、800msのイージングで動かす。
   タッチ：CSSのネイティブな吸着に任せる。JSは一切触らない。

   ── なぜタッチでJSを使わないのか ──
   iOS Safari には、body / html に scroll-snap を指定すると
   window.scrollTo が壊れる不具合がある（Apple Developer Forums）。
   またWebKitは、勢いのあるスワイプで一気に末端まで飛ぶ
   （Blinkは飛ばない）という違いもある。
   さらに web.dev は「scrollTo が必ず指定位置で止まると
   想定してはいけない」と明記している。
   アドレスバーの出入りや慣性スクロールと衝突するので、
   タッチはブラウザに任せるのが確実。

   ── なぜ mandatory でよいのか ──
   W3Cの指針では、mandatory は「スナップ対象がページ全体を
   覆っているとき」に限るべきとされている。
   逆に言えば、覆っていれば使ってよい。
   ※ ※重要※ CTAとフッターまで吸着点にしているのはそのため。
     抜くと「どの吸着領域にも属さない区間」ができ、
     その部分が見られなくなる。

   MDN の「中身がはみ出す場合は mandatory を使わないこと」
   という警告についても、仕様上、吸着領域が画面より大きいときは
   「その領域が画面を覆っている位置はすべて有効」になるので、
   長いセクションの中は普通にスクロールできる。

   ※ iOS Safari の window.scrollTo が壊れる不具合は、
     JSでスクロールを動かす場合だけの問題。
     タッチではJSを動かさないので影響しない。

   ── 適用範囲 ──
   トップページ（.page-index）だけ。下層ページは通常のスクロール。
========================================================= */

/* ※ 吸着は mandatory。ただし下の吸着点が
     FVからフッターまでを隔てなく覆っていることが前提。
     吸着点を減らすときは、間に空白区間ができないか必ず確かめる。 */
html {
    scroll-snap-type: y mandatory;
}

/* ※ JSが切り替えを引き受けたらCSSの吸着は切る。
     両方効いていると、rAF で動かしている途中で
     ブラウザが吸着させようとして動きが濁る。
   ※ このクラスが付くのはマウス操作の端末だけ。
     タッチ端末では付かないので、上の proximity がそのまま残る。 */
html.js-section-scroll {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* ※ 事業内容はセクション単位ではなくカード単位で吸着させる。
     〜575px：1枚ずつ
     576px以上：1行（2枚）ずつ。行の先頭にあたる奇数番目だけ吸着点にする。
   ※ カードは吸着の単位の中で上下中央に置いているので、
     1枚目だけずらすような指定は入れない。 */
.page-index .sec-service__item {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

@media (min-width: 576px) {
    /* ※ ※重要※ .sec-service__list が2列になる 576px と揃える。
         2列なのに各カードが吸着点だと、
         同じ位置に2つ吸着点が重なる。 */
    .page-index .sec-service__item:nth-child(even) {
        scroll-snap-align: none;
    }
}

/* ※ 1025px以上は事業内容が 2セクションで 1画面。
     1つ目だけを吸着点にする。
   ※ ※重要※ index.js の SELECTOR と必ず揃えること。 */
@media (min-width: 1025px) {
    .page-index .sec-service__item {
        scroll-snap-align: none;
    }

    .page-index .sec-service--pair-1 {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .page-index .sec-service--pair-2 {
        scroll-snap-align: none;
    }
}

.page-index .fv,
.page-index .sec-link,
.page-index .sec-company,
.page-index .sec-news-link,
.page-index .sec-cta,
.page-index .footer {
    scroll-snap-align: start;

    /* ※ normal は既定値。勢いよくスクロールしたときに
         途中の区切りを飛ばせる。always にすると
         1回の操作で必ず1セクションしか進まなくなる。 */
    scroll-snap-stop: normal;
}

@media (min-width: 768px) {
    /* ※ 768px以上は事例と物件情報で2つで1画面（各 50svh）なので、
         物件情報は吸着点にしない。
         768px未満はそれぞれ 100svh なので両方吸着点にする。 */
    .page-index .sec-link--property {
        scroll-snap-align: none;
    }
}

@media (min-width: 1025px) {
    /* ---- 事業内容：従来の見た目に戻す ----
       ※ 1024pxまではカルーセル。カードは 1枚用（--single）と
         2枚用（--pair）の両方を出して切り替えている。
       ※ 1025px以上は 2枚用（2セクション）を使う。
         以前は 1つのセクション（100svh）に 2×2 のグリッドだった。
           上下の padding：3remずつ
           行間：1.5rem
         同じ高さになるよう、各セクションを 50svh にして
         行間の半分（0.75rem）をすき間側に入れる。
           以前：（100svh - 6rem - 1.5rem）/ 2 = 50svh - 3.75rem
           現在：50svh - 3rem - 0.75rem = 50svh - 3.75rem */
    .sec-service--slider {
        display: none;
    }

    .sec-service--pair {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* ※ 2つで合わせて 100lvh。各行は 50lvh。
           ※ ※重要※ 下限は rem で固定せず、
             min-height: fit-content で中身なりにする。
             説明文を増やしても自動で追従する。 */
        height: 50vh;
        height: 50lvh;
        min-height: fit-content;
    }

    .sec-service--pair-1 {
        padding-block: var(--spacing-lg) 0.75rem;
    }

    .sec-service--pair-2 {
        padding-block: 0.75rem var(--spacing-lg);
    }

    .sec-service__inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex: 1;
        width: 100%;
        max-width: var(--w-xl);

        /* ※ inner の右端から画面の右端までの距離。
             画面が広いときは中央寄せの余白、
             狭いときはセクションの padding（--section-px）になる。
           ※ ※重要※ 上の max-width と必ず同じ値を使うこと。
             ずれると下の SERVICE の位置が狂う。
           ※ ※重要※ 余白は --section-px を参照する。
             固定値を書くと、1025px・1200px で余白が変わったときにずれる。 */
        --sv-side: max(var(--section-px), calc((100vw - var(--w-xl)) / 2));
    }

    /* ※ セクションタイトルは縦書きで、
         「カードの右端」と「画面の右端」の中間に置く。

       ── right の式の内訳 ──
       カードの右端から画面右端までの隔たりは
           15%（innerの残り） + --sv-side
       その中点は画面右端から
           （15% + --sv-side）/ 2
       inner の右端基準に直すと
           7.5% - --sv-side / 2
       ※ translate(50%, -50%) で要素自身の中心をその点に合わせている。

       ※ ※重要※ 1つ目のセクションが持つが、
         以前は 100svh の中央だった。
         現在は親が 50svh なので、
         2つ分の中央に置くには 100% 下にずらす。 */
    .sec-service--pair-1 .sec-service__vertical {
        position: absolute;
        top: 100%;
        right: calc(7.5% - var(--sv-side) / 2);
        transform: translate(50%, -50%);
    }

    .sec-service--pair-1 .sec-service__en {
        font-size: clamp(1.5rem, 2.2vw, 2.25rem);
        letter-spacing: 0.3em;
        white-space: nowrap;
    }

    /* ※ カードの入れ物は inner の85%幅。残りの15%が右のタイトル分。
         右に余白ができることで、左70%の黒面の端が
         右列のカードの上を確実に通る。
       ※ 列間は以前と同じ 1.5rem。
       ※ 下限を中身なりにするため min-height: 0 は入れない。 */
    .sec-service__row {
        flex: 0 0 85%;
        gap: 1.5rem;
    }

    .sec-service__item {
        min-height: 0;
    }

    /* 画像左・本文右の横型にする
       ※ ※重要※ 縦積みのままだと画像が潰れる。
         754pxの画面高さだと1行 279pxしか無く、
         本文だけで約213px 使うので画像に 66px しか残らない。 */
    .sec-service__card {
        flex-direction: row;
        min-height: 0;
    }

    .sec-service__card-media {
        flex: 0 0 45%;
        min-height: 0;
    }

    .sec-service__card-body {
        flex: 1;
        min-width: 0;
        --card-body-px: 1.5rem;
        --card-body-py: 1.5rem;
    }

    /* ---- 事例・物件情報：2つで合わせて1画面 ----
       ※ 高さはベース側で 50lvh を指定済み。
       ※ テキスト側の上下余白は --link-body-py（2rem）で全幅共通。
         以前はここで padding-block を詰めていたが、
         ベースと同じ値になったので不要になった。 */
}

/* =========================================================
   1025px以上の事業内容の上下余白

   ※ 事業内容は 2セクションで 1画面なので、
     上の余白は 1つ目、下の余白は 2つ目が持つ。
     間の 0.75rem ずつ（合わせて 1.5rem）は行間なので触らない。
   ※ PC幅で 3rem（--spacing-lg）だと、カードが上下の端に寄って
     詰まって見えるので、下限をヘッダーの高さ（--header-height）に上げる。
     1025px以上は 5.5rem。以前は 5rem 固定（さらに前は 1200px以上だけ 5rem）。
   ※ ※重要※ 値の定義は common.css の :root。
     ヘッダーの高さを変えるとこの余白も変わる（お知らせセクションも同じ）。
   ※ ※重要※ 1025px のブロックより後ろに置くこと。
     同じ詳細度なので、前に置くと打ち消されて効かない。
   ※ セクションの高さ（50lvh）は変わらないので、広げた分だけ
     カードの高さが減る。
========================================================= */

@media (min-width: 1025px) {
    .sec-service--pair-1 {
        padding-block: var(--header-height) 0.75rem;
    }

    .sec-service--pair-2 {
        padding-block: 0.75rem var(--header-height);
    }
}

/* =========================================================
   カルーセルをやめて通常スクロールにする条件
   （1024px以下は高さ667px未満、1025px以上は高さ720px未満、
     および幅320px未満）

   ※ 面の下限が 667px（iPhone SE 第2/第3世代）なので、
     それより低いと面の下が切れて読めない部分が出る。
     対象：旧端末、スマホの横向き、PCで縦に縮めたウィンドウなど。
   ※ ※重要※ 幅 320px 未満もこちらに含める。
     面の中身（カード・見出し・写真）が入り切らずレイアウトが崩れるため。
     高さとは別の理由だが、「通常スクロールに落とす」対応は同じなので、
     条件を並べて同じブロックにまとめている。
   ※ ※重要※ PC幅（1025px以上）だけ境目を 720px に上げている。
     カルーセルの 667px とは別の値なので、条件を幅ごとに分けている。
   ※ ※重要※ JS側も同じ条件で止めている
     （index.js の mqOn に (min-width: 320px) と (min-height: 667px)、
       mqWide に (min-height: 720px)）。
     数字を変えるときは必ずセットで。
   ※ カルーセル側の指定は html.is-carousel が付かなくなるので
     自動で外れる。ここで戻すのは通常フロー側の高さと吸着。
========================================================= */

@media (max-width: 1024px) and (max-height: 666px),
       (min-width: 1025px) and (max-height: 719px),
       (max-width: 319px) {
    html {
        scroll-snap-type: none;
    }

    /* ※ ※重要※ FVだけは高さを 667px の固定に落とす。
         height: auto にすると、中の .fv__container の height: 100% が
         解決できず（親が不定になる）コンテナが中身なりの高さになる。
         justify-content: center が効かなくなり、
         キャッチコピーが上に寄る。
       ※ 667px は .fv の min-height と同じ値。
         ファーストビューが潰れるのを防ぐ下限なので、
         ここだけは画面を超えて良い（スクロールで見せる）。 */
    .fv {
        height: 667px;
        max-height: none;
    }

    /* ※ 他は画面いっぱいの高さをやめて、中身なりに戻す。 */
    .sec-link,
    .sec-link-pair,
    .sec-company {
        height: auto;
        max-height: none;
        min-height: 0;
    }

    /* ※ 1025px以上の事業内容（2セクションで1画面）も解除する。 */
    .sec-service--pair {
        height: auto;
    }
}

/* ※ 浮かせている箱の重なりも浅くする。
     面の高さを解除して全体が詰まるので、
     食い込みが強いと画像が残らない。
   ※ ※重要※ 幅の条件を忘れないこと。
     768px以上は横並びで margin: 0（重なり無し）なので、
     幅を絞らないとここがそれを打ち消してしまう。 */
@media (max-height: 666px) and (max-width: 767px),
       (max-width: 319px) {
    .sec-link__box {
        margin-top: -1.5rem;
    }

    /* ※ 事例・物件情報は、低い画面でもそれぞれ 576px は保つ。
         上のブロックで一度中身なりの高さに戻しているが、
         そのままだと写真が下限（14rem）まで縮んで帯になる。
       ※ 768px 未満なので対象は --solo の2つ。
         .sec-link-pair はこの幅では display: none。
       ※ ※重要※ min-height ではなく height を渡すこと。
         中身（.sec-link__inner）が height: 100% なので、
         親が auto のままだと 100% が解決できず、
         中身なりの高さ（約474px）で止まって
         面の下に地の色が帯になって残る。
         height なら写真側（flex: 1）が余りを受け持つ。
       ※ 中身が 576px を超えるときは伸ばす。 */
    .sec-link {
        height: 576px;
        min-height: fit-content;
    }
}

/* =========================================================
   低い画面のうちPC幅（幅1025px以上・高さ720px未満）

   ※ 上のブロックで一度中身なりの高さに戻しているが、
     幅が広いまま低くなるとカードや写真が横に間延びして見える。
     PC幅だけ 1画面分の下限を 768px にし、
     足りない分はスクロールで見せる（吸着は切ったまま）。
   ※ ※重要※ 必ず上の低い画面のブロックより後ろに置くこと。
     あちらが height: auto / min-height: 0 で高さを解除しているので、
     前に置くと同じ詳細度で打ち消されて効かない。
   ※ FV は上で height: 667px にしているが、
     min-height の方が勝つので PC幅では 768px になる。
========================================================= */

@media (min-width: 1025px) and (max-height: 719px) {
    .fv,
    .sec-link-pair,
    .sec-company {
        min-height: 768px;
    }

    /* ※ 事業内容は2セクションで1画面なので、1つあたり半分。
       ※ ※重要※ min-height ではなく height を上書きする。
         1025px以上の指定が min-height: fit-content で
         中身なりの下限を持っているので、それを潰さないようにする。 */
    .sec-service--pair {
        height: 384px;
    }

    /* ※ 事例・物件情報は通常は2つで1面（各 50%）だが、
         ここは吸着を切っているので 2つで画面を埋める制約がない。
         384px（768の半分）だと写真が低くなるので、
         それぞれを 576px の面として扱う（ペア全体で 1152px）。
       ※ 他の面の 768px より低いのは、ここだけ 2つ縦に並ぶので、
         高くするとペア全体が長くなりすぎるため。
       ※ ※重要※ flex を 0 0 auto に戻すこと。
         768px以上の指定が flex: 1（＝flex-basis: 0%）なので、
         縦並びでは flex-basis が主軸の大きさとして優先され、
         height だけ書いても効かない。
       ※ 中身（.sec-link__inner）は height: 100% なので、
         min-height ではなく height を渡すこと。auto のままだと
         中身なりの高さになり、面の下に白地が残る。 */
    .sec-link-pair .sec-link {
        flex: 0 0 auto;
        height: 576px;
    }
}

/* ※ アニメーションを控える設定の環境では切る。
     意図しないスクロールの引っ張りが負担になる人がいるため。 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-snap-type: none;
    }
}