@charset "UTF-8";

/* =========================================================
   service.css - 事業内容
   ・事業紹介（一般住宅リフォーム／店舗改装／エアコンサブスク／空き家再生・再販）
   ・空き家再生からの流れ
   ・物件情報／リノベーション事例への導線

   ※ 見出し・余白・色は common.css の変数に寄せる。
     このファイルで直に色を書かないこと（ゴールドは --color-gold 系）。
========================================================= */

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

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

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

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

/* ---------------------------------------------------------
   リード
   ※ 全幅の2面（1024px以上：左＝写真／右＝テキスト）。
     1024px未満は縦積み。l-inner は使わない。
--------------------------------------------------------- */

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

.service-lead__visual {
    /* ※ 縦積みのときだけ高さを比率で決める。
         ベース（576px未満）は 16:9、576px以上は 2:1 でもう一段横長にする。
         1024px以上は相手（テキスト面）の高さに合わせるので外す。 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-mute);
}

@media (min-width: 576px) {
    .service-lead__visual {
        aspect-ratio: 2 / 1;
    }
}

.service-lead__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ※ テキスト面はグレー系の面に白文字。写真と左右に並んだときの対比を出す。
   ※ 地は dark-gray-bg.webp。
     ページヒーローやアクセスで使っている mortar-bg.webp とは別の画像。
   ※ 画像は 512px の大きさで繰り返して敷く（以前は cover で引き伸ばしていた）。
     他ページの木目・モルタルの背景と同じ敷き方。
   ※ background-color は画像が読み込まれるまでの地。白文字が飛ばないよう残す。
   ※ 中の文字色は下でまとめて上書きする。 */
.service-lead__body {
    position: relative;
    padding: var(--spacing-xl) var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-gray-bg.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
    color: #FFFFFF;
}

/* ※ 英字の行頭に中抜きの正円を置く。
     トップの事例・物件情報の見出し（index.css の .sec-link__ja::before）と同じ形。
   ※ ※重要※ セレクタに .service-head を含めること。
     上の .service-head .sec-en が display: block を持っているので、
     .service-lead__en だけだと詳細度で負け、flex にならない。
     flex にならないと ::before がインラインのままなので、
     幅と高さが効かず円が線のように見える。
   ※ ※重要※ 大きさは em で持つ。文字サイズを変えたときに
     釣り合いが崩れないようにするため。
   ※ 色は currentColor。文字（黒地用の金）と同じ色になる。
   ※ 上から360度描かれる動きは animation.js の RING に
     このクラスを登録している（見た目は common.css の .js-deco-ring）。 */
.service-head .service-lead__en {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

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

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

/* ※ 黒地になるので、中の文字色をここでまとめて上書きする。
   ※ ※重要※ 金は黒地用の --color-gold-bright。
     --color-gold-deep は明るい地に乗せる文字用なので、ここでは沈む。
   ※ .service-head .sec-en と詳細度を上げるため、親を含めて書く。 */
.service-lead__body .service-head .sec-en {
    color: var(--color-gold-bright);
}

.service-lead__body .sec-title {
    color: #FFFFFF;
}

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

.service-lead__text {
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
}

@media (min-width: 1024px) {
    .service-lead__text {
        font-size: 1.05rem;
    }
}

/* ※ ミッションの一文だけ見出し級に大きくする。
     黒地に載るので金は --color-gold-bright。 */
.service-lead__mission {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: var(--color-gold-bright);
}

.service-lead__mission-note {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    .service-lead__mission {
        font-size: 1.5rem;
    }
}

/* ※ 1024px以上で左＝写真／右＝テキストの横並びにする。
     未満は縦積み（上＝テキスト／下＝写真）。 */
@media (min-width: 1024px) {
    .service-lead {
        flex-direction: row;
        align-items: stretch;
    }

    .service-lead__visual {
        flex: 0 0 50%;
        aspect-ratio: auto;
    }

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

/* ---------------------------------------------------------
   事業一覧
   ※ 見出し（番号＋日本語小＋英字大）の下に、
     左＝本文／右＝写真2枚（縦積み）を並べる。
   ※ 偶数番（--reverse）は 768px以上で左右を入れ替える（左＝写真）。
     付け外しは service.php が添字の偶奇で行う。
--------------------------------------------------------- */

/* ※ ※重要※ 上下と左右の余白はここでは持たない。
     各ブロック（.service-block）が地色と余白の両方を持ち、
     地を画面幅いっぱいに伸ばすため。
     上下に padding を戻すと、リードと最初の帯の間に白い隙間ができる。 */
.service-list {
    padding-block: 0;
}

/* ※ ブロックごとに地色を交互にする（奇数＝白、偶数＝薄いグレー）。
     ※ 一度、本文側の半分だけを塗る形（案B）も試したが、
       画面が縦に割れて見え、リードや代表挨拶の構図と重なるのでやめた。
   ※ ※重要※ 地は画面幅いっぱい、中身は --w-lg で中央に止める。
     そのため、最大幅は内側（__inner）が持つ。
   ※ ※重要※ ブロック間の margin は持たせない。
     地が連続しないと縞に見えない。間隔は上下の padding で取る。
   ※ 左右の余白はブロックが持つ（地は全幅なので、余白の内側に中身が入る）。
   ※ 上下の余白はヘッダーの高さ（--header-height）と同じ値。
     事例一覧（works.css の .works）と同じ考え方。
     画面幅で自動で段階が付くので、分岐を書かなくてよい。
     ※ ※重要※ 値の定義は common.css の :root。 */
.service-block {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    /* ※ トップの事業内容カードから #akiya などで飛んでくる。
         ブロックの上端をそのまま画面の上端に合わせる（ヘッダーの高さは考慮しない）。
         ブロックの上の余白がヘッダーの高さと同じなので、見出しはヘッダーに隠れない。
       ※ 以前は scroll-margin-top（ヘッダーの高さ＋1.5rem）で手前に止めていた。
       ※ ※重要※ animation.js のハッシュスクロールも、.service-block では
         ヘッダーの高さを引かないようにしている。戻すときはセットで。 */
}

/* ※ 偶数番の地はモルタルのテクスチャ（mortar-f4f3f1.webp）。以前はベタ塗りの --color-bg-light（#F4F3F1）。
     画像は同じ色（#F4F3F1）を基調にしたものなので、奇数番（白）との縞の見え方は変わらない。
   ※ 奇数番は無地の白のまま（地の指定なし）。
     白いモルタル（mortar-near-white-01-neutral.webp）を敷くことも試したが、
     両方テクスチャだと質感が似て縞が弱くなるのでやめた。
   ※ background-color は画像が読み込まれるまでの地。
   ※ 512px の大きさで繰り返して敷く（以前は 768px。もう少し細かくした）。
     木目の背景（works / property / news-detail）と同じ値。
     さらに細かくするときは 384px など。小さくするほどコテ跡の繰り返しが目立つ。
     ブロックは縦に高いので、cover だと模様が引き伸ばされて粗くなる。 */
.service-block:nth-child(even) {
    background-color: var(--color-bg-light);
    background-image: url('../images/mortar-f4f3f1.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

/* ※ 最大幅を持つ内側。左右の余白は外側（.service-block）が持つ。
   ※ 1200px（--w-lg）を超えたら中央寄せ。 */
.service-block__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ---- 見出し ---- */

.service-block__head {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* ※ 番号は見出しの左に置く。
     以前は写真の左上に白文字で重ねていた。
   ※ 色は罫線と同じ薄さ。見出しより目立たせない。 */
.service-block__num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: var(--color-border);
}

.service-block__heading {
    min-width: 0;
}

/* 日本語（上・小）
   ※ 行頭の印は金の中抜き正円。トップの事例・物件情報の
     日本語見出し（index.css の .sec-link__ja::before）と同じ形。
   ※ ※重要※ 大きさは em で持つ。文字サイズを変えたときに
     釣り合いが崩れないようにするため。
   ※ 塗りつぶさない。線だけで見せるのは導線バーの丸や
     ページトップの丸と同じ考え方。 */
.service-block__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
}

/* ※ 行頭の中抜きの正円。
   ※ 上から360度描かれる動きは animation.js の RING に
     .service-block__title を登録している（見た目は common.css の .js-deco-ring）。
   ※ ※重要※ 大きさは em で持つ。文字サイズを変えたときに
     釣り合いが崩れないようにするため。
   ※ 対応しているブラウザでは round() で整数pxに丸める（文字 14px のとき 8.75px → 9px）。
     半端なpxだと、スマホで1pxの線がにじんだり一部欠けたりして見えるため。
     未対応のブラウザは直前の em の指定が残る。 */
.service-block__title::before {
    content: '';
    flex: 0 0 auto;
    width: 0.625em;
    height: 0.625em;
    width: round(0.625em, 1px);
    height: round(0.625em, 1px);
    border: 1px solid var(--color-accent);
    border-radius: 50%;
}

/* 英字（下・大） */
.service-block__en {
    margin-top: 0.375rem;
    font-family: var(--font-en);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-title);
}

/* ---- 本文と写真 ---- */

.service-block__body {
    display: grid;
    gap: var(--spacing-md);
}

/* ※ 写真1枚と切り替えタブを重ねる。
     タブは絶対配置なので、写真の高さに加算されない。 */
.service-block__visual {
    position: relative;
    display: grid;
    align-content: start;
}

/* ※ 写真を重ねて入れ替えるので、入れ物は位置の基準にする。
   ※ 767px以下（縦積み）の横縦比は、ベース（575px以下）16:11、576px以上 16:10。
     以前は 4:3。お知らせ一覧のカード（news.css）と近い比率にしている。
   ※ ※重要※ 768px以上は下の分岐で aspect-ratio: auto に戻している。
     576px の分岐は必ずそれより前に置くこと。 */
.service-block__photo {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background-color: var(--color-bg-mute);
}

@media (min-width: 576px) {
    .service-block__photo {
        aspect-ratio: 16 / 10;
    }
}

/* ※ 写真は全枚重ねて置き、.is-active のものだけ見せる。
     入れ替えはクロスフェード（位置が動かないので落ち着いて見える）。
   ※ ※重要※ transition の秒数は service.js の FADE_MS と必ず揃えること。
     ずれると前の写真が先に消えて一瞬地色が覗く。
   ※ .is-active と .is-prev を付け外しするのは service.js。 */
.service-block__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.service-block__image.is-active {
    opacity: 1;
    z-index: 1;
}

/* ※ 直前まで見せていた写真。新しい写真が乗り切るまで真下に残す。
     ※ ※重要※ 消す側も同時に薄くすると、途中でどちらも半透明になり
       重ねても不透明にならない（1 - 0.5 × 0.5 = 0.75）。
       残りから箱の地色が覗いて、切り替わるたびに一瞬沈んで見える。 */
.service-block__image.is-prev {
    opacity: 1;
    z-index: 0;
    transition: none;
}

/* ---- 写真の切り替えタブ ----
   ※ logic の事業内容（.service-detail__tab）と同じ横棒。
     寸法（1.5rem × 2px）も向こうと同じ値。
   ※ ※重要※ 写真の上に重ねる（絶対配置）。
     流れの中に置くと、その分だけ写真の列が高くなり、
     反対側の本文と高さが合わなくなる。
   ※ 写真の上に乗るので色は白系。選択中だけ黒地用の金。
     logic も暗い地なので白系。 */
.service-block__tabs {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.service-block__tab {
    /* バー本体の寸法。変えるときはこの2つを触る。 */
    --tab-w: 1.5rem;
    --tab-h: 2px;

    display: flex;
    align-items: center;
    justify-content: center;
    /* 当たり判定。バーは細いので、上下に余裕を取る。 */
    width: var(--tab-w);
    height: 1.25rem;
}

/* バー本体 */
.service-block__tab::before {
    content: '';
    display: block;
    width: 100%;
    height: var(--tab-h);
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color var(--transition);
}

.service-block__tab:is(:hover, :active)::before {
    background-color: rgba(255, 255, 255, 0.8);
}

.service-block__tab.is-active::before {
    background-color: var(--color-gold-bright);
}

@media (prefers-reduced-motion: reduce) {
    .service-block__image,
    .service-block__tab::before {
        transition: none;
    }
}

/* ※ 本文列の先頭なので上の余白は取らない（以前は見出しの下にあった）。 */
.service-block__lead {
    font-size: 1.0625rem;
    font-weight: 500;
}

.service-block__text {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
}

/* ---- 対応内容のリスト ---- */

.service-block__points {
    margin-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.service-block__points li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ※ 行頭の印は金の中抜き正円（トップの日本語見出しと同じ考え方）。
   ※ 大きさは見出しの円と同じく round() で整数pxに丸める（文字 15px のとき 7.5px → 8px）。
     未対応のブラウザは直前の em の指定が残る。 */
.service-block__points li::before {
    content: '';
    position: absolute;
    top: 1.35em;
    left: 0;
    width: 0.5em;
    height: 0.5em;
    width: round(0.5em, 1px);
    height: round(0.5em, 1px);
    border: 1px solid var(--color-gold);
    border-radius: 50%;
}

/* ---- 導線ボタン ----
   ※ 左＝矢印の正方形ボックス／右＝テキスト。
     共通のお問い合わせボタンと同じ型に合わせている。 */

.service-block__link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--spacing-sm);
    padding: 0.875rem 1.5rem 0.875rem 0.875rem;
    border: 1px solid var(--color-border);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    transition: background-color var(--transition), border-color var(--transition);
}

.service-block__link:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-light);
}

.service-block__link-icon {
    position: relative;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
}

/* 矢印（右向き）。CSSだけで引く。 */
.service-block__link-icon::before,
.service-block__link-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-gold-deep);
}

.service-block__link-icon::before {
    width: 0.75rem;
    height: 1px;
    transform: translate(-50%, -50%);
}

.service-block__link-icon::after {
    width: 0.375rem;
    height: 1px;
    transform: translate(-10%, -50%) rotate(45deg);
    transform-origin: right center;
}

/* ---- 資料のダウンロード ----
   ※ 導線ボタン（.service-block__link）と同じ幅にならないよう、
     こちらは左右に伸ばさず中身なりの幅にする。
   ※ 地を薄く敷いて、本文とは別の導線だと分かるようにする。
   ※ ※重要※ 右寄せにするので inline-flex ではなく flex＋margin-left: auto。
     本文列はブロックなので、text-align では寄せられない。 */

/* ※ 資料を見るボタン。
     共通のお問い合わせカード（common.css の .sec-cta__button、〜1024px）と同じ型。
     左＝アイコンの正方形／右＝テキスト。
   ※ ※重要※ 左の余白は0にする。アイコンの箱を枠の内側にぴったり付けるため。
   ※ ボタンの高さは左の正方形（3.5rem）が決める。 */
.service-block__file {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    margin-top: var(--spacing-sm);
    margin-left: auto;
    padding: 0 1.25rem 0 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
    text-align: left;
    transition: border-color var(--transition);
}

.service-block__file:hover {
    /* ※ ホバーで変えるのは枠線と文言の色。仕切り線も下で同じ色にする。
         明るい地なので --color-gold-deep。
       ※ 地色は変えない。事業ブロックの地が交互なので、
         ボタンだけ地を動かすと偶数番で周りとの差が分かりにくい。 */
    border-color: var(--color-gold-deep);
}

/* ※ アイコンは正方形の箱に入れる。
     右の1本線が仕切りになり、ボタンの高さもこの箱が決める。
   ※ 寸法は共通のお問い合わせカードと揃えている。 */
.service-block__file-icon {
    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);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-gold-deep);
    transition: border-color var(--transition);
}

.service-block__file:hover .service-block__file-icon {
    border-color: var(--color-gold-deep);
}

/* ※ アイコン画像の大きさ。箱（3.5rem）の中央に置く（箱が flex で中央寄せ）。
   ※ 縦横比は画像のまま（height: auto）。大きさを変えるときは width だけ触る。
     幅は 1.5rem（以前は 1.375rem。気持ち大きくした）。
   ※ 画像なので色は変えられない。ホバーで変わるのは枠線と仕切り線だけ（以前と同じ）。 */
.service-block__file-icon img {
    display: block;
    width: 1.5rem;
    height: auto;
}

/* ※ ホバーで文言も枠線と同じ --color-gold-deep にする（以前は枠線と仕切り線だけ）。
   ※ 明るい地の上の文字なので --color-gold-deep（--color-gold だと白地で読めない）。 */
.service-block__file-label {
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    transition: color var(--transition);
}

.service-block__file:hover .service-block__file-label {
    color: var(--color-gold-deep);
}

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

    .service-block__en {
        font-size: 2.5rem;
    }

    /* ※ 左＝本文／右＝写真。
         ※ ※重要※ align-items: stretch（既定）にすること。
           写真を反対側の本文の高さに合わせるため。
           start にすると写真が比率なりの高さで止まる。
       ※ 列の間は 2.5rem。--spacing-lg だとこの幅では開きすぎる。 */
    .service-block__body {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: stretch;
    }

    /* ※ 1024px以上は列の間を広げる。
         ※ ※重要※ 上の 768px の指定より後ろに置くこと。
           詳細度が同じなので、前に置くと上書きできない。 */
    @media (min-width: 1024px) {
        .service-block__body {
            gap: var(--spacing-lg);
        }
    }

    /* ※ タブは絶対配置なので、写真が列の高さをそのまま使う。 */
    .service-block__visual {
        grid-template-rows: 1fr;
        align-content: stretch;
    }

    /* ※ 高さは列が決めるので比率は外す。
         比率を残すと高さがそこで確定し、本文の下に隙間ができる。
       ※ min-height: 0 が無いと、グリッドのアイテムは中身の分だけ縮まない。 */
    .service-block__photo {
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }

    /* ※ 偶数番（--reverse）は左右を入れ替える（左＝写真／右＝本文）。
       ※ ※重要※ HTMLの並び（本文→写真）は変えず、マス目の割り当てだけで入れ替える。
         HTMLを入れ替えると、768px未満の縦積みで写真が本文の上に回る。 */
    .service-block--reverse .service-block__content {
        grid-column: 2;
        grid-row: 1;
    }

    .service-block--reverse .service-block__visual {
        grid-column: 1;
        grid-row: 1;
    }
}

/* ---------------------------------------------------------
   空き家再生の流れ
   ※ 外側（セクション本体）が余白、内側（__inner）が中身を持つ。
   ※ ※重要※ セクション全体を暗い面にする。地は dark-oak-bg.webp。
     ※ 以前、トップの事業内容のように「左から何％かを黒」にして
       カードが面の端をまたぐ構図を試したが、ここは横スクロールなので
       送るたびにカードと面の端の関係が変わり、層として成立しない。
     カード（白）が手前に立ち、リード（暗）→事業一覧（白）→流れ（暗）と
     面のリズムが付く。
   ※ background-color は画像が読み込まれるまでの地。白文字が飛ばないよう残す。
   ※ 地を変えるときは、下の文字色の上書きもセットで見直すこと。
--------------------------------------------------------- */

.service-flow {
    padding-block: var(--spacing-xl);
    padding-inline: var(--section-px);
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-oak-bg.webp');
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
}

/* ※ ※重要※ このセクションは max-width を指定しない。
     工程を横に送って見せるので、画面幅をそのまま使う。
     他のセクション（--w-lg で止める）とは扱いが違うので注意。
   ※ 左右の余白は外側（.service-flow）の padding-inline が持つ。 */
.service-flow__inner {
    width: 100%;
}

/* ※ カードとドットをまとめる入れ物。
     ※ 以前はここに背面の黒い面（::before）を置いていたが、
       セクション全体を黒にしたので不要になった。 */
.service-flow__band {
    position: relative;
}

/* ※ 工程は横に送って見る（全画面幅共通）。
     時間の流れなので、左から右への移動と相性がいい。
     トップのカルーセルと同じ操作に揃えている。
   ※ ※重要※ JSは使わない。scroll-snap だけで成立させる
     （トップの index.js はドラッグ込みの専用実装で、こことは別物）。
   ※ セクションの余白を負のマージンで打ち消して画面の端まで流し、
     padding で元の余白を戻す。1枚目の左端が見出しと揃う。 */
.service-flow__list {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--section-px) * -1);
    padding-inline: var(--section-px);
    overflow-x: auto;
    /* ※ ※重要※ 縦を明示的に止める。
         overflow-x だけ指定すると、仕様上 縦も auto になり、
         カードの中で縦にも動いてしまう。 */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* ※ これが無いと、スナップ位置が画面の真の左端になり余白が消える。 */
    scroll-padding-inline: var(--section-px);
    /* スクロールバーは出さない（送れることは下のドットと、次のカードの覗きで伝える） */
    scrollbar-width: none;
}

.service-flow__list::-webkit-scrollbar { display: none; }

/* ※ 英字を主役（大）、日本語をサブ（小）にする。
     ページヒーロー・共通のお問い合わせ誘導（.sec-cta）と同じ型。
   ※ ※重要※ このブロックは .service-head .sec-en より後ろに置くこと。
     詳細度が同じ（0-2-0）なので、前に置くと上書きできない。 */
.service-flow .sec-en {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.12em;
    color: #FFFFFF;
}

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

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

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

/* ※ 1枚のカード。中身は番号→本文→写真の縦並び。
     一度タイムラインの形（カードの上に金の線と番号の円）を試したが、この形に戻した。
   ※ ※重要※ カードは白地なので、文字色をここで戻す。
     セクションに color: #FFFFFF を指定しているので、
     これが無いと本文が白地に白文字で消える。
   ※ 見せる枚数は幅だけで変える（下の分岐）。
     半端な幅にして次のカードを少し覗かせることで、続きがあると分かる。
     割り切れる幅（例：3列ちょうど）にすると横に動くことが伝わらない。
   ※ ※重要※ service.js がこの li の位置で送りとドットを計算しているので、クラス名は変えない。 */
.service-flow__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* ※ 本文に残りを使わせて、写真をカードの下端に寄せる。
     これが無いと、本文の量によってカードごとに
     写真の位置が上下にずれ、横に並べたときに揃わない。 */
.service-flow__body {
    flex: 1;
}

/* ※ カードのフェードインはやめた（service.php の li から js-reveal を外した）。
     以前はここで nth-child ごとに transition-delay を付け、左から順に出していた。 */

.service-flow__num {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    font-family: var(--font-en);
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--color-gold-deep);
    background-color: var(--color-bg);
}

.service-flow__num span {
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.service-flow__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);
}

.service-flow__text {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
}

/* 写真 */
.service-flow__visual {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-mute);
}

.service-flow__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- 備考（NOTICE）----
   ※ 物件情報の注意書き（property.css の .property-note）と同じ型・同じ値。
     中央の NOTICE＋両側の金の横棒の見出しと、金の「※」付きの箇条書き。
     あちらを変えたときはこちらも合わせる。
     以前は「備考」の明朝の見出し＋白25%の枠線の箱（最大幅 576px）だった。
   ※ 地は塗らず、上の罫線で流れのカードと区切る。
   ※ 本文の幅は 880px（--section-width-narrow）で止めて中央に置く。
   ※ このセクションは暗い木目の地なので、色は暗い地用の値を直接持たせている。
     金は黒地用の --color-gold-bright、罫線は白25%、文章は白72%。
   ※ 行頭の「※」はCSSで付ける（HTMLに書かない）。 */
.service-flow__notes {
    max-width: var(--section-width-narrow);
    margin: var(--spacing-lg) auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* 見出し（NOTICE）
   ※ 棒の長さは --note-bar だけで調整する。
   ※ ※重要※ 後ろの棒（::after）は文字の letter-spacing 分だけ詰める。
     letter-spacing を変えたらここも合わせる。 */
.service-flow__notes-title {
    --note-bar: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold-bright);
}

.service-flow__notes-title::before,
.service-flow__notes-title::after {
    content: '';
    flex: 0 0 auto;
    width: var(--note-bar);
    height: 1px;
    background-color: var(--color-gold-bright);
}

.service-flow__notes-title::after {
    margin-inline-start: -0.22em;
}

@media (min-width: 768px) {
    .service-flow__notes-title {
        --note-bar: 2.5rem;

        font-size: 1.25rem;
    }
}

.service-flow__notes-list li {
    position: relative;
    padding-left: 1.25em;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.72);
}

.service-flow__notes-list li + li {
    margin-top: 0.5rem;
}

.service-flow__notes-list li::before {
    content: '※';
    position: absolute;
    left: 0;
    color: var(--color-gold-bright);
}

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

    /* ※ 2枚弱見せる。 */
    .service-flow__item {
        flex: 0 0 46%;
    }

    .service-flow__title {
        font-size: 1.25rem;
    }
}

/* ※ 1025px以上は3枚弱。境目はサイト共通のPCの境目に揃えている。 */
@media (min-width: 1025px) {
    .service-flow__list {
        gap: 1.5rem;
    }

    .service-flow__item {
        flex: 0 0 31%;
    }
}

/* ---------------------------------------------------------
   768px未満（縦積み）の幅
   ※ タブレット縦向き（576〜767px）で幅いっぱいに伸ばすと、
     縦に積んだ写真も文章も大きくなりすぎるので 576px（--w-sm）で止める。
   ※ 576px未満では画面幅の方が狭いので、この指定は効かない。
--------------------------------------------------------- */

@media (max-width: 767px) {
    .service-block__body,
    .service-link__list {
        max-width: var(--w-sm);
        margin-inline: auto;
    }

    /* ※ 見出しも本文と左端を揃える。 */
    .service-block__head {
        max-width: var(--w-sm);
        margin-inline: auto;
    }

    /* ※ 地の帯は全幅のまま。止めるのは中身だけなので、
         __inner には max-width を付けない。 */
}

/* ※ 768〜1023px は 768px（--w-md）で止める。
     この幅だと事業ブロックが横に間延びて、
     本文の1行が長くなりすぎる。
   ※ ※重要※ 流れセクション（.service-flow）は対象外。
     あちらは幅いっぱいの横スクロールが前提なので、
     幅を止めるとカードの送りと帯の見え方が崩れる。 */
@media (min-width: 768px) and (max-width: 1023px) {
    .service-block__head,
    .service-block__body,
    .service-link__list {
        max-width: var(--w-md);
        margin-inline: auto;
    }
}

/* ---------------------------------------------------------
   流れの進捗ドット
   ※ 今何枚目を見ているかと、全部で何段あるかを同時に示す。
--------------------------------------------------------- */

.service-flow__dots {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1rem;
}

/* ※ 未選択は中抜きの円、選択中は金で塗る。
     中抜きの円は導線バーや見出しの印と同じ考え方。
   ※ ※重要※ 丸は見た目だけ（::before）で、ボタン自体は広く取る。
     0.5rem の丸をそのままボタンにすると、指で押せない。
   ※ .is-active を付け外しするのは service.js。 */
.service-flow__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

/* ※ ※重要※ hidden を明示的に消す。
     service.js は見えている枚数から送れる回数を出し、
     余ったドットに hidden を付ける。
     ただし [hidden] の display: none はブラウザの既定の弱い指定なので、
     上の display: flex に負けて消えない。 */
.service-flow__dot[hidden] {
    display: none;
}

.service-flow__dot::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    transition: background-color var(--transition);
}

.service-flow__dot.is-active::before {
    background-color: var(--color-gold);
}

.service-flow__dot:hover::before {
    background-color: var(--color-accent-light);
}

@media (prefers-reduced-motion: reduce) {
    .service-flow__dot::before { transition: none; }
}

/* ---------------------------------------------------------
   物件情報／リノベーション事例への導線
   ※ 外側（セクション本体）が余白、内側（__inner）が max-width と中央寄せ。
--------------------------------------------------------- */

/* ※ 地は白いモルタルのテクスチャ（mortar-white.webp）。以前は地の指定が無く白だった。
     512px の大きさで繰り返して敷く（事業一覧のモルタルと同じ敷き方）。
   ※ background-color は画像が読み込まれるまでの地。 */
.service-link {
    padding-block: var(--spacing-xl);
    padding-inline: var(--section-px);
    background-color: var(--color-bg);
    background-image: url('../images/mortar-white.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

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

.service-link__list {
    display: grid;
    gap: 1.25rem;
}

/* ※ カードのフェードインを左から順にずらす。
     HTMLの並びがそのまま左→右なので、nth-child の順に遅らせればいい。
   ※ 768px未満は1列なので、上から順に出る。
   ※ リビール本体（.js-reveal）は common.css。ここは遅延だけ。 */
.service-link__list .service-link__item:nth-child(2) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .service-link__list .service-link__item {
        transition-delay: 0s;
    }
}

/* ※ 余白は変数で持つ。下端の導線バーが負のマージンでこの値を打ち消して、
     カードの端まで広がるため。余白を変えるときはこの変数だけを直す。 */
.service-link__card {
    --link-card-p: var(--spacing-md);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 14rem;
    padding: var(--link-card-p);
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
}

/* ※ 写真の上に文字を載せるので黒を敷く。濃さは共通CTA（64%）より軽くする。 */
.service-link__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color var(--transition);
}

.service-link__card:hover::before {
    background-color: rgba(0, 0, 0, 0.38);
}

.service-link__card > * {
    position: relative;
    z-index: 1;
}

/* ※ 行頭に中抜きの正円を置く。
     トップの事例・物件情報の見出し（index.css の .sec-link__ja::before）と同じ形。
   ※ ※重要※ 大きさは em で持つ。文字サイズを変えたときに
     釣り合いが崩れないようにするため。
   ※ 色は currentColor。文字（黒地用の金）と同じ色になる。 */
.service-link__en {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold-bright);
}

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

.service-link__ja {
    margin-top: 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    letter-spacing: 0.08em;
}

.service-link__text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* ---- 下端の導線バー ----
   ※ トップの事例・物件情報（index.css の .sec-link__more）と同じ型。
     左＝矢印の正方形／右＝ラベルを右寄せ。
   ※ ※重要※ 全幅にするため、負のマージンでカードのパディング（--link-card-p）を
     打ち消している。余白を直接書き換えると帯がずれるので、変数側を直すこと。
   ※ 写真の上なので罫線は白。トップは明るい面なので --color-border を使っている。 */
.service-link__more {
    display: flex;
    align-items: stretch;
    margin-top: 1.5rem;
    margin-inline: calc(var(--link-card-p) * -1);
    margin-bottom: calc(var(--link-card-p) * -1);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: border-color var(--transition);
}

/* 矢印の正方形
   ※ 高さを明示するので、バーの高さはこの正方形が決める。
   ※ 寸法（正方形 3.5rem、円 2.25rem、矢印 1.25rem）はトップと同じ値。 */
.service-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 rgba(255, 255, 255, 0.5);
    transition: border-color var(--transition);
}

/* 正方形の中の丸い枠（下敷き）
   ※ 円の大きさを変えるときは width / height を同じ値で直す。
   ※ ホバーでもこの円は白50%のまま。上に重ねた白の円（::after）が描かれる。 */
.service-link__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 で動かすには登録が要る。
   ※ ※重要※ 別名で登録すること。
     --link-ring は index.css（トップだけ）、--pagetop-ring は common.css が使っている。 */
@property --service-link-ring {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* 描かれる円
   ※ ※重要※ 金にしない。トップの会社概要のボタン（.sec-company__more-btn::after）と同じく、
     白のまま濃さを上げる。下敷きの白50%に重なるので、描かれた部分は
     およそ白80%の明るさに見える。
   ※ ※重要※ 大きさ・位置は ::before と必ず同じにする。ずれると二重線に見える。 */
.service-link__more-btn::after {
    --service-link-ring: 0deg;

    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.6);
    border-radius: 50%;
    -webkit-mask: conic-gradient(#000 var(--service-link-ring), transparent 0);
    mask: conic-gradient(#000 var(--service-link-ring), transparent 0);
    opacity: 0;
    pointer-events: none;
    /* ※ 離したとき：0.25s で消してから、角度を一瞬で 0 に戻す。 */
    transition: opacity 0.25s ease, --service-link-ring 0s linear 0.25s;
}

/* ※ ホバーで罫線を白60%に強める（トップの会社概要のボタンと同じ動き）。 */
.service-link__card:hover .service-link__more {
    border-top-color: rgba(255, 255, 255, 0.6);
}

.service-link__card:hover .service-link__more-btn {
    border-right-color: rgba(255, 255, 255, 0.6);
}

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

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

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

/* ラベル。右端は上の本文と揃うようカードの余白に合わせる。 */
.service-link__more-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    padding-inline: 1rem var(--link-card-p);
}

@media (prefers-reduced-motion: reduce) {
    .service-link__more-btn::after,
    .service-link__card:hover .service-link__more-btn::after {
        transition: none;
    }
}

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

    .service-link__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .service-link__card {
        min-height: 18rem;
    }
}