/* ===================================
   トップページ リニューアル案  /  top-renewal.css

   デザイン方針（license-tokyo.css と同じ規則で統一）
   - 配色は 白 ／ #f5f5f5（グレー面）／ #111（墨黒）のみ。アクセント色は使わない
   - 角丸なし・影なし。1px の罫線（#e2e2e2）と矩形だけで構成する
   - 余白は広め（PC 96px ／ SP 56px）
   - 見出しは 極小EN（字間0.45em・両脇に細線）＋ 和文900 ＋ 32×2px の黒バー
   - 写真は grayscale を軽くかけ、黒のグラデーションを被せて文字を乗せる

   ★ すべて .top-body の中だけに効くよう限定しています。
     他ページの見た目には影響しません。
=================================== */

html {
    scroll-behavior: smooth;
}

/*
   ★ img に width / height 属性を付けたので、その対策です。

     属性を付けると、画像が読み込まれる前でも
     ブラウザが縦横比ぶんの場所を先に確保できるようになり、
     読み込み後に文章が飛び跳ねる現象（CLS）がなくなります。

     ただし共通の style.css は「img { max-width:100% }」だけで
     height を指定していないため、そのままだと横だけ縮んで
     縦は属性値のまま＝画像が縦につぶれます。
     height:auto を足して、縦横比を保ったまま縮むようにしています。

     ★ 写真をトリミング表示している箇所（使用事例・製品カードなど）は
       個別に height を指定しているので、そちらが優先されます。
*/
.top-body img {
    height: auto;
}

/* ---- 共通セクション ---- */
.top-body .tp-section {
    padding: 96px 20px;
    border-bottom: 1px solid #ececec;
}

.top-body .tp-section--gray {
    background: #f5f5f5;
}

.top-body .tp-section--black {
    background: #111;
    border-bottom: none;
    color: #fff;
}

.top-body .tp-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ===================================
   見出し（style.css の .ttl を上書き）
=================================== */
.top-body .tp-section .ttl {
    position: relative;
    padding: 0 0 28px;
    margin: 0 0 52px;
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #111;
    line-height: 1.35;
    text-align: center;
}

/* 100×5px の黒→白グラデーションバーを、32×2px の黒バーに差し替え */
.top-body .tp-section .ttl::after {
    width: 32px;
    height: 2px;
    background: #111;
    background-image: none;
    left: calc(50% - 16px);
    bottom: 0;
}

.top-body .tp-section .ttl .en {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: #888;
    opacity: 1;
    line-height: 1;
    margin-bottom: 16px;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.top-body .tp-section .ttl .en::before,
.top-body .tp-section .ttl .en::after {
    content: '';
    flex: 1;
    max-width: 52px;
    height: 1px;
    background: #ccc;
}

/*
   左寄せの見出し（.ttl--left）
   ★ 画面いっぱいに広げたセクション（使用事例）で使います。
     中央寄せのままだと、左端から始まる写真とそろわず、
     見出しだけが浮いて見えるためです。
     左端の細い罫線は、左寄せだと行き場がないので消しています。
*/
.top-body .tp-section .ttl--left {
    text-align: left;
}

.top-body .tp-section .ttl--left::after {
    left: 0;
}

.top-body .tp-section .ttl--left .en {
    justify-content: flex-start;
}

.top-body .tp-section .ttl--left .en::before {
    display: none;
}

/* 黒背景セクション用 */
.top-body .tp-section--black .ttl {
    color: #fff;
}

.top-body .tp-section--black .ttl::after {
    background: rgba(255, 255, 255, 0.6);
}

.top-body .tp-section--black .ttl .en {
    color: rgba(255, 255, 255, 0.4);
}

.top-body .tp-section--black .ttl .en::before,
.top-body .tp-section--black .ttl .en::after {
    background: rgba(255, 255, 255, 0.15);
}

.top-body .tp-lead {
    max-width: 760px;
    margin: -20px auto 48px;
    font-size: 0.95rem;
    line-height: 2.1;
    color: #555;
    text-align: center;
}

.top-body .tp-section--black .tp-lead {
    color: rgba(255, 255, 255, 0.65);
}

/* ===================================
   ボタン
=================================== */
.top-body .tp-btn {
    display: inline-block;
    background: #111;
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    padding: 16px 40px;
    text-decoration: none;
    letter-spacing: 0.05em;
    border: 1px solid #111;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.top-body .tp-btn:hover {
    background: #fff;
    color: #111;
}

/* 白地の上に置く、枠線だけのボタン */
.top-body .tp-btn--ghost {
    background: transparent;
    color: #111;
    border: 1px solid #111;
}

.top-body .tp-btn--ghost:hover {
    background: #111;
    color: #fff;
}

/* 黒地・写真の上に置く、枠線だけのボタン */
.top-body .tp-btn--light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.top-body .tp-btn--light:hover {
    background: #fff;
    color: #111;
    border-color: #fff;
}

.top-body .tp-btn-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 52px;
}

/* 左寄せの見出しとセットで使う、左寄せのボタン */
.top-body .tp-btn-wrap--left {
    justify-content: flex-start;
}

/* ===================================
   ヘッダーについて

   ★ 電話番号・Instagram・ハンバーガーボタンの色は、
     全ページ共通にするため css/style.css へ移しました。
     このファイルには指定がありません。
     変更するときは css/style.css の末尾を見てください。
=================================== */

/* ===================================
   01 メインビジュアル（Vegas スライダーを流用）

   ★ Vegas の挙動を前提にしています。うかつに直すと崩れるのでご注意ください。
     (1) Vegas は #slider の中身を丸ごと .vegas-wrapper へ移し、
         スライド画像は #slider の「先頭」に差し込みます。
         そのため .tp-hero-veil / .tp-hero-inner は自動的に写真の手前に来ます。
     (2) Vegas は初期化した瞬間の #slider の高さを、px で固定します。
         したがって height は指定せず、min-height と中身の余白で高さを決めます。
         height:100vh を直接指定すると、文字が入りきらないときに
         次のセクションへはみ出します。
     (3) #slider と .vegas-wrapper の両方を flex にしているのは、
         Vegas が読み込めなかった場合（CDN 障害・JS 無効）でも
         中央寄せが崩れないようにするためです。
=================================== */
.top-body .tp-hero {
    background: #111;
}

/*
   ★ 高さの決め方
     min-height（画面比）と .tp-hero-inner の上下余白の
     「大きいほう」で決まります。高さを変えたいときは、
     この 2 か所をセットで調整してください。
*/
.top-body #slider {
    width: 100%;
    min-height: 74vh;
    position: relative;
    text-align: center;
    background: #111;
}

.top-body #slider,
.top-body #slider > .vegas-wrapper {
    display: flex;
    align-items: center;
}

/* 写真の彩度を落として、サイト全体のモノトーンに寄せる */
.top-body #slider .vegas-slide-inner {
    filter: grayscale(35%);
}

/* 写真の上に黒を重ねて、文字が読める明るさに落とす
   （文言を中央寄せにしたので、左右ではなく上下方向のグラデーションにしています） */
.top-body .tp-hero-veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* license-tokyo は 0.82 / 0.58 / 0.2 ですが、トップの写真（slide1〜3.jpg）は
       キッチンの白物家電が写っていて明るいため、少しだけ濃くしています。 */
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.72) 0%, rgba(17, 17, 17, 0.55) 45%, rgba(17, 17, 17, 0.78) 100%);
    z-index: 1;
    pointer-events: none;
}

.top-body .tp-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    color: #fff;
}

/* ---- ヒーローの中身（ロゴ＋キャッチの2つだけ） ---- */
.top-body .tp-hero-title {
    margin: 0;
    color: #fff;
    font-weight: 900;
}

.top-body .tp-hero-logo {
    display: block;
    width: 300px;
    max-width: 68%;
    /* 左右 auto で中央に置く */
    margin: 0 auto 26px;
}

.top-body .tp-hero-catch {
    display: block;
    font-size: 1.42rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
    /* 明るい写真に切り替わっても読めるよう、うっすら影を敷く */
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* ===================================
   02 シメントアートとは
=================================== */
/*
   ★ 罫線は「コンテナに敷いたグレーを、白いカードで覆って隙間だけ見せる」
     という作り方をしていません。カード1枚ずつに outline を引いています。

     理由：表示アニメーションでカードを一時的に透明にするため、
           コンテナにグレーを敷いていると、
           カードが出てくるまでのあいだそのグレーが四角い塊として見えてしまいます。

     outline は border と違って場所を取らないので、
     gap:1px の隙間で隣り合うカードの線どうしがぴったり重なり、
     見た目は1本の罫線になります。
*/
.top-body .tp-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: transparent;
    padding: 0;
    margin: 0;
}

.top-body .tp-features li {
    position: relative;
    background: #fff;
    outline: 1px solid #e2e2e2;
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-body .tp-feature-num {
    font-size: 2.6rem;
    font-weight: 900;
    color: #ececec;
    line-height: 1;
    font-family: "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.04em;
}

/* 既存の svg アイコンは、色を抜いて右上に控えめに置く */
.top-body .tp-feature-icon {
    position: absolute;
    top: 34px;
    right: 32px;
    width: 44px;
    height: 44px;
    filter: grayscale(1);
    opacity: 0.22;
}

.top-body .tp-feature-ttl {
    font-size: 1.02rem;
    font-weight: bold;
    color: #111;
    margin: 0;
    line-height: 1.6;
}

.top-body .tp-feature-text {
    font-size: 0.86rem;
    line-height: 1.95;
    color: #666;
    margin: 0;
}

/* ===================================
   表示アニメーション（01〜04 のカード）

   ★ 動かすのは opacity と transform だけです。
     この2つはレイアウトのやり直しが起きないため、いちばん軽い動かし方です。
     クラスの付け外しは js/top-renewal.js が行います。

   ★ html.js-reveal が付いているときだけ隠します。
     JS が動かない環境では、カードは最初から見えたままになります。
=================================== */
.js-reveal .top-body .tp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.js-reveal .top-body .tp-reveal.is-shown {
    opacity: 1;
    transform: none;
}

/* 4枚を少しずつ遅らせて、順に出す */
.js-reveal .top-body .tp-features li:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .top-body .tp-features li:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .top-body .tp-features li:nth-child(4) { transition-delay: 0.24s; }

/*
   製品カードは「右から流れ込む」動きにしています。
   縦のフェードアップ（.tp-reveal）と違う方向にすることで、
   このセクションが横スワイプであることが、動きだけで伝わります。
*/
.js-reveal .top-body .tp-reveal-x {
    opacity: 0;
    transform: translateX(52px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.js-reveal .top-body .tp-reveal-x.is-shown {
    opacity: 1;
    transform: none;
}

.js-reveal .top-body .tp-products > li:nth-child(2) .tp-product-card { transition-delay: 0.09s; }
.js-reveal .top-body .tp-products > li:nth-child(3) .tp-product-card { transition-delay: 0.18s; }
.js-reveal .top-body .tp-products > li:nth-child(4) .tp-product-card { transition-delay: 0.27s; }
.js-reveal .top-body .tp-products > li:nth-child(5) .tp-product-card { transition-delay: 0.36s; }

/* 「視差効果を減らす」設定の端末では動かさない */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .top-body .tp-reveal,
    .js-reveal .top-body .tp-reveal-x {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===================================
   波のアニメーション（02 の下端）

   ★ 動きの制御は js/wave-renewal.js 側です。
     画面に入っているあいだだけ動き、
     「視差効果を減らす」設定の端末では静止画になります。
=================================== */
.top-body .tp-wave-host {
    position: relative;
    overflow: hidden;
    /* 波の高さぶん、下に余白を足しておく */
    padding-bottom: 170px;
    /* 波が境目の役目をするので、罫線は引かない */
    border-bottom: none;
}

.top-body .tp-wave-host .tp-inner {
    position: relative;
    z-index: 1;
}

.top-body .tp-wave {
    position: absolute;
    left: 0;
    /* 1px 沈めて、次のセクションとのあいだに隙間が出ないようにする */
    bottom: -1px;
    width: 100%;
    height: 130px;
    display: block;
    z-index: 0;
    pointer-events: none;
}

/* ===================================
   03 使用事例

   ★ 並べ方（2026-09-10 変更）
     以前は「3列×2段・すき間1px・写真の上に文字」でした。
     6枚が同じ大きさで並ぶため、作品ではなく一覧表に見えていたので、
     強弱をつけた組み方に変えています。

       上段： 大きな1枚（左8列ぶん）＋ 右に小さい2枚を縦積み
       下段： 3枚を等分

     ★ 上段で行を「1fr 1fr」にしているのが要点です。
       これで右の小さい2枚を足した高さが、左の大きい1枚と必ず揃います。
       auto にすると右側だけ余って、下がそろわなくなります。

     ★ 大きさは「何番目の li か」で決めています（nth-child）。
       写真の並び順を変えたいときは index.html の <li> を入れ替えてください。
       CSS を触る必要はありません。

   ★ 文字は写真の下に置いています。
     写真の上に乗せると、読ませるために黒いグラデーションが必要になり、
     いちばん見せたい塗布面の質感が隠れてしまうためです。
=================================== */

/* このセクションだけ、左右いっぱいまで使います
   （.tp-section の左右 padding を打ち消して、中の .tp-works-wrap で取り直す） */
.top-body .tp-works-sec {
    padding-left: 0;
    padding-right: 0;
}

.top-body .tp-works-wrap {
    max-width: 1760px;
    margin: 0 auto;
    /* 東京ショールームと同じ左右の余白 */
    padding: 0 clamp(16px, 2.2vw, 40px);
}

.top-body .tp-works {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 1fr auto;
    /* ★ すき間。ここを詰めるとタイル壁のように見え、高級感がなくなります */
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    border: none;
}

.top-body .tp-works > li {
    display: flex;
    background: none;
}

.top-body .tp-works a {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: none;
    text-decoration: none;
}

/* ---- 上段：左の大きな1枚 ---- */
.top-body .tp-works > li:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 1 / 9;
}

/*
   ★ 大きい1枚の高さは、右の2枚（下の 3:2）から自動的に決まります。
     行が 1fr 1fr なので「右2枚＋すき間」の高さ＝この1枚の高さです。
     min-height は、画面が狭いときにつぶれないための下限です。
*/
.top-body .tp-works > li:nth-child(1) .tp-works-image {
    flex: 1 1 auto;
    min-height: 300px;
}

/* ---- 上段：右に縦2枚 ---- */
.top-body .tp-works > li:nth-child(2) {
    grid-row: 1;
    grid-column: 9 / 13;
}

.top-body .tp-works > li:nth-child(3) {
    grid-row: 2;
    grid-column: 9 / 13;
}

/* ★ ここの縦横比が、上段全体の高さを決めています。
     大きい写真をもっと縦長にしたいときは、3 / 2 を 4 / 3 などに変えてください。 */
.top-body .tp-works > li:nth-child(2) .tp-works-image,
.top-body .tp-works > li:nth-child(3) .tp-works-image {
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
}

/* ---- 下段：3枚を等分 ---- */
.top-body .tp-works > li:nth-child(4) {
    grid-row: 3;
    grid-column: 1 / 5;
}

.top-body .tp-works > li:nth-child(5) {
    grid-row: 3;
    grid-column: 5 / 9;
}

.top-body .tp-works > li:nth-child(6) {
    grid-row: 3;
    grid-column: 9 / 13;
}

.top-body .tp-works > li:nth-child(4) .tp-works-image,
.top-body .tp-works > li:nth-child(5) .tp-works-image,
.top-body .tp-works > li:nth-child(6) .tp-works-image {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
}

/* ---- 写真 ---- */
/*
   ★ 写真は「枠」を先に決めて、そこへ絶対配置で敷いています。
     ふつうに置くと、枠の高さが元画像の縦横比に引っぱられます
     （works1.webp は 540×536 のほぼ正方形なので、
      横890pxで置くと高さも約880pxになり、間延びします）。
     position:absolute にすると、高さは枠（縦横比・行の高さ）だけで決まります。
*/
.top-body .tp-works-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #e6e6e6;
}

.top-body .tp-works-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 彩度を少しだけ落とし、マウスを乗せたときに本来の色に戻します */
    filter: grayscale(22%);
    transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.3, 1), filter 0.8s ease;
}

.top-body .tp-works a:hover .tp-works-image img {
    transform: scale(1.045);
    filter: grayscale(0);
}

/* ---- 写真の下のキャプション ---- */
.top-body .tp-works-body {
    position: static;
    padding: 16px 2px 0;
    background: none;
    color: inherit;
}

.top-body .tp-works-cat {
    margin: 0 0 7px;
    padding: 0;
    border: none;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #999;
    line-height: 1.4;
}

.top-body .tp-works-ttl {
    margin: 0;
    font-size: 0.92rem;
    font-weight: bold;
    line-height: 1.7;
    color: #111;
    transition: color 0.3s;
}

.top-body .tp-works a:hover .tp-works-ttl {
    color: #555;
}

/* 6枚を少しずつ遅らせて、順に浮かび上がらせます */
.js-reveal .top-body .tp-works > li:nth-child(2) { transition-delay: 0.07s; }
.js-reveal .top-body .tp-works > li:nth-child(3) { transition-delay: 0.14s; }
.js-reveal .top-body .tp-works > li:nth-child(4) { transition-delay: 0.10s; }
.js-reveal .top-body .tp-works > li:nth-child(5) { transition-delay: 0.17s; }
.js-reveal .top-body .tp-works > li:nth-child(6) { transition-delay: 0.24s; }

/* ===================================
   04 製品紹介
=================================== */
/*
   ★ このセクションだけ横スワイプのギャラリーにしています。

     ねらい：上下に並ぶセクションが「見出し＋格子」の繰り返しで
             単調になっていたため、ここで横方向の流れを作って変化を付ける。

     仕組み：横スクロールとスナップは全部 CSS です。
             JS（js/top-renewal.js）は矢印・ドットの表示更新だけを担当します。
             ブラウザ本来のスクロールなので、指・トラックパッドに素直に追従します。
*/
.top-body .tp-products-sec {
    /* カードを画面端まで流すため、左右の余白はセクションでは持たせない */
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

.top-body .tp-products-sec .tp-inner {
    padding: 0 20px;
}

.top-body .tp-products {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    /*
       左の余白で、カードの開始位置を .tp-inner（最大1100px）の左端に揃えます。
       画面が広いときは (画面幅 - 1100px) / 2、狭いときは 20px。

       ★ 右の余白は 20px 固定です。左右そろえて (画面幅-1100)/2 にすると、
         最後のカードの後ろに同じ幅の空白がぶら下がり、
         どれだけ画面が広くても横スクロールが終わらなくなります。
    */
    padding: 4px 20px 4px max(20px, calc((100% - 1100px) / 2));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(20px, calc((100% - 1100px) / 2));
    -webkit-overflow-scrolling: touch;
    /* スクロールバーは隠す（Firefox ／ Chrome・Safari） */
    scrollbar-width: none;
    list-style: none;
}

.top-body .tp-products::-webkit-scrollbar {
    display: none;
}

/*
   li … スクロールのスナップ位置。動かさない
   .tp-product-card … 見た目の本体。入場アニメーションはこちらにかける

   ★ 分けている理由
     入場アニメーション（translateX）を li に直接かけると、
     scroll-snap がその動きを「スクロール位置が変わった」と解釈して、
     ギャラリーが 52px ずれた状態で始まってしまいます（実測で確認）。
     動かす要素をスナップ対象の外に出すことで回避しています。
*/
.top-body .tp-products > li {
    /* ★ カードの大きさはここ。5枚が一度に収まらない幅にすることで
         「横に続きがある」ことが伝わります。 */
    flex: 0 0 340px;
    scroll-snap-align: start;
    display: flex;
}

.top-body .tp-product-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* 罫線は outline。表示アニメーションで透明にしたとき、
       下地のグレーが四角く残らないようにするためです（01〜04 と同じ考え方） */
    outline: 1px solid #e2e2e2;
    padding: 0 0 30px;
    transition: outline-color 0.3s ease;
}

.top-body .tp-product-card:hover {
    outline-color: #bbb;
}

/* ★ カラーチャート画像は 265×170px です。
      枠の比率を画像と揃えて、色見本が切り取られないようにしています。
      画像を差し替えるときは、この aspect-ratio も合わせてください。 */
.top-body .tp-product-image {
    width: 100%;
    aspect-ratio: 265 / 170;
    overflow: hidden;
    background: #f5f5f5;
    margin-bottom: 24px;
}

.top-body .tp-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.top-body .tp-product-card:hover .tp-product-image img {
    transform: scale(1.06);
}

.top-body .tp-product-body {
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 蛍光イエローのバッジを、白地＋1px罫線のタグに置き換え */
.top-body .tp-product-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: #555;
    background: #fcfcfc;
    border: 1px solid #ddd;
    padding: 4px 10px;
    margin: 0 0 14px;
    line-height: 1.4;
}

.top-body .tp-product-ttl {
    font-size: 1.15rem;
    font-weight: bold;
    color: #111;
    margin: 0 0 8px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.top-body .tp-product-text {
    font-size: 0.86rem;
    line-height: 1.95;
    color: #666;
    margin: 0 0 22px;
    flex: 1;
}

.top-body .tp-product-link {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    font-weight: bold;
    color: #111;
    border: 1px solid #111;
    padding: 13px 8px;
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
}

.top-body .tp-product-link:hover {
    background: #111;
    color: #fff;
}

/*
   ★ 大きな画面では中央寄せにする

     カード5枚ぶんの幅は 340px × 5 ＋ 隙間 20px × 4 ＝ 1780px です。
     左右 20px を足した 1820px 以上の画面なら全部並びきるので、
     そこからは左に余白を寄せず、左右を均等にして中央に置きます。

     ★ この指定は「並びきる」ことが確定している幅でだけ効かせています。
       横スクロールが必要な状態で justify-content:center を使うと、
       左へはみ出した部分にスクロールで到達できなくなるためです。

     ★ カード幅（340px）や隙間（20px）を変えたら、
       この 1860px も計算し直してください。
*/
@media screen and (min-width: 1860px) {
    .top-body .tp-products {
        padding-left: 20px;
        padding-right: 20px;
        scroll-padding-left: 20px;
        justify-content: center;
    }
}

/* ---- 送り操作（矢印＋ドット） ---- */
/* 全部並びきっていて送る必要がないときは、矢印もドットも出さない
   （表示・非表示は js/top-renewal.js が判定します） */
.top-body .tp-gallery-nav.is-hidden {
    display: none;
}

.top-body .tp-gallery-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 30px;
    padding: 0 20px;
}

.top-body .tp-arrow {
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
    transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}

/* 矢印の形は、正方形の2辺を残して45度回した「く」の字で作る */
.top-body .tp-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 1px solid #111;
    border-right: 1px solid #111;
    transition: border-color 0.25s;
}

.top-body .tp-arrow--next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.top-body .tp-arrow--prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.top-body .tp-arrow:hover {
    background: #111;
    border-color: #111;
}

.top-body .tp-arrow:hover::before {
    border-color: #fff;
}

/* 端まで来たら押せないことを見せる */
.top-body .tp-arrow[disabled] {
    opacity: 0.25;
    cursor: default;
    background: transparent;
    border-color: #ccc;
}

.top-body .tp-arrow[disabled]::before {
    border-color: #111;
}

.top-body .tp-products-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.top-body .tp-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid #bbb;
    background: transparent;
    cursor: pointer;
    box-sizing: content-box;
    outline-offset: 3px;
    transition: background 0.25s, border-color 0.25s;
}

.top-body .tp-dot.is-current {
    background: #111;
    border-color: #111;
}

/* ===================================
   05 東京ショールーム（Showroom）

   ★ ベンチマークは OKI 公式サイト（oki.com）の Contact セクションです。
     実際の画面を採寸して、同じ位置関係になるようにしています。

       ・黒一面。左右いっぱいまで使う
         （このセクションだけ .tp-inner＝最大1100px を使いません。
           OKI 同様、他より広く取ることで面が変わって見えます）
       ・左上：小さな EN ラベル → すぐ下に大見出し。上寄せ
       ・中央：写真。画面のほぼ中央、上下は中央ぞろえ
       ・右　：本文 → 小さな補足 → 塗りつぶしボタン。上下は中央ぞろえ
       ・見出しだけが上寄せ、他の2列は中央ぞろえ、という組み合わせが
         OKI のあの「余白の空き方」の正体です。align-self を消すと崩れます。

   ★ OKI の赤（差し色）は使いません。このサイトは白・#f5f5f5・#111 だけです。
       赤い塗りボタン → 白の塗りボタン（黒地の上でいちばん強い）
       赤い曲線　　　 → 白い線が走り抜ける背景（.tp-showroom-lines）

   ★ 面の色の並びは 白（製品紹介）→ 黒（ここ）→ グレー（販売店）→ 黒（フッター）です。
=================================== */
.top-body .tp-showroom-sec {
    position: relative;
    /* 背景の線が画面の外へはみ出すぶんを隠す */
    overflow: hidden;
    /*
       ★ 上が狭く、下が広い余白です。
         見出しを画面の上のほうに置く OKI の構図に合わせるためで、
         上下を同じにすると見出しが中央に寄って印象が変わります。
    */
    padding: 60px 0 90px;
}

/* ---------------------------------------------
   背景：白い線が走り抜ける装飾
   （OKI の赤い曲線にあたるもの）

   ★ しくみ
     曲線は index.html の <defs> にある path（tpl1〜tpl6）です。
     それを2回描いています。
       .tp-lines-base … ほとんど見えない下地の線（止まったまま）
       .tp-lines-run  … その上を走る白い線
     走る線は「160pxの線＋4200pxの空白」という破線で、
     破線の位置（stroke-dashoffset）を動かしているだけです。
     線が1本ずつ現れて、通り過ぎて消えていくように見えます。

   ★ 速さを変えるときは .tp-line--1〜6 の animation-duration です。
     数字が小さいほど速く飛びます。
--------------------------------------------- */
.top-body .tp-showroom-lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.top-body .tp-showroom-lines svg {
    display: block;
    width: 100%;
    height: 100%;
}

.top-body .tp-lines-base use {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.top-body .tp-lines-run use {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 160 4200;
    stroke-dashoffset: 4360;
    animation-name: tpLineRun;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-iteration-count: infinite;
    /* 画面に入るまでは止めておく（js/top-renewal.js が .is-shown を付けます） */
    animation-play-state: paused;
}

.top-body .tp-showroom-lines.is-shown .tp-lines-run use {
    animation-play-state: running;
}

@keyframes tpLineRun {
    from {
        stroke-dashoffset: 4360;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* 6本の速さと、出はじめるタイミングをずらして、ばらばらに飛ばします */
.top-body .tp-line--1 { animation-duration: 7.5s; animation-delay: 0s; }
.top-body .tp-line--2 { animation-duration: 9.5s; animation-delay: 1.1s; }
.top-body .tp-line--3 { animation-duration: 6.5s; animation-delay: 2.4s; }
.top-body .tp-line--4 { animation-duration: 5.5s; animation-delay: 0.6s; }
.top-body .tp-line--5 { animation-duration: 11s;  animation-delay: 3.2s; }
.top-body .tp-line--6 { animation-duration: 8.5s; animation-delay: 1.8s; }

/* ---------------------------------------------
   3分割の配置
--------------------------------------------- */
.top-body .tp-showroom {
    position: relative;
    /* 背景の線より手前に出す */
    z-index: 1;
    max-width: 1760px;
    margin: 0 auto;
    display: grid;
    /*
       ★ 5つの列でできています。
           1列目 max-content … 見出し（文字の幅ちょうど＋左端の余白）
           2列目 1fr         … すき間
           3列目 auto        … 写真（幅は .tp-showroom-photo の width で決めます）
           4列目 1fr         … すき間
           5列目 max-content … 本文（文字の幅ちょうど＋右端の余白）

         ★ 2列目と4列目を同じ 1fr にしているのが要点です。
           左の見出しの文字が終わった位置から写真まで、
           写真が終わった位置から右の本文の文字までが、
           画面幅が変わっても必ず同じ幅になります
           （＝写真が左右の文字のちょうど真ん中に来ます）。
           片方を固定値にすると、この均等が崩れます。

         ★ 1列目・5列目を max-content にしているのは、
           「文字の右端／左端」を基準に測るためです。
           % 指定に戻すと、文字の長さと列の幅がずれて均等でなくなります。
    */
    grid-template-columns: max-content 1fr auto 1fr max-content;
    gap: 0;
    /*
       ★ 3列とも上ぞろえです。そのうえで、写真と本文だけを
         下の margin-top で押し下げています（OKI と同じ段差）。
         中央ぞろえ（align-items: center）にすると、
         背の高い本文の列が見出しより上から始まってしまい、
         OKI の「見出しがいちばん上」という関係が崩れます。
    */
    align-items: start;
}

/* 左右の端の余白は、両端の列の内側に持たせます */
.top-body .tp-showroom-head {
    grid-column: 1;
    padding-left: clamp(16px, 2.2vw, 40px);
}

/*
   ★ 写真と本文を押し下げる量です。
     OKI では 見出しの上端から 写真まで 8.2%、本文まで 9.2%（画面幅に対して）
     空いています。その比率をそのまま vw で持たせています。
*/
.top-body .tp-showroom-photo {
    grid-column: 3;
    margin-top: clamp(48px, 8.2vw, 145px);
    /* 写真の大きさ。画面幅の 27.9%（OKI と同じ比率）で、上限は 491px です */
    width: min(27.9vw, 491px);
}

.top-body .tp-showroom-body {
    grid-column: 5;
    margin-top: clamp(56px, 9.2vw, 162px);
    padding-right: clamp(16px, 2.2vw, 40px);
}

/* ---- 左：EN ラベル＋大見出し ---- */
/* ★ ここだけ上寄せです（OKI と同じ）。中央ぞろえに戻すと構図が変わります */
.top-body .tp-showroom-head {
    align-self: start;
}

/* 頭の小さな四角は、OKI の赤い点にあたります */
.top-body .tp-showroom-en {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    color: #fff;
}

.top-body .tp-showroom-en::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: #fff;
}

.top-body .tp-showroom-ttl {
    margin: 0;
    color: #fff;
    /* 画面幅に合わせて 30px〜44px の範囲で伸び縮みします */
    font-size: clamp(1.85rem, 2.95vw, 2.75rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* ---- 中央：写真（5枚を順番に入れ替え） ---- */
.top-body .tp-showroom-slides {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 縦横比を 3:2 に固定。写真を差し替えても高さが動きません */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #1a1a1a;
}

/*
   ★ 入れ替えのしくみ
     5枚を重ねて置き、1枚ずつ順番に浮かび上がらせています。
     1周 6秒 ＝ 1枚あたり1.2秒です。

     ★ 切り替えのときに画面が一瞬暗くなる問題への対策（2026-09-10）

       以前は「前の写真が薄くなる」と「次の写真が濃くなる」を同時に行っていました。
       この方法だと、切り替えの一瞬だけ 2枚とも半透明になり、
       後ろの下地（#1a1a1a の黒）が透けて見えます。
       実測すると、写真の明るさが最大 29% 落ちていました
       （不透明度が 0.5 と 0.5 のとき、下地が 25% 見えている計算になります）。

       いまは「前の写真は不透明のまま待たせ、その上に次の写真をかぶせる」方式です。
       下に必ず不透明な写真が1枚ある状態を保つので、下地が透けません。
       そのために z-index をキーフレームで切り替えています。
         z-index: 2 … これから出てくる写真（いちばん手前でフェードイン）
         z-index: 1 … 直前まで表示していた写真（覆われるまで不透明のまま）
         z-index: 0 … 完全に隠れた写真
       ★ この z-index の指定を消すと、暗転が再発します。

     ★ 速さを変えるときは、次の3か所を必ずセットで直してください。
       どれか1つだけ変えると、重なったり間が空いたりします。
         (1) animation の 6s        … 枚数 × 1枚あたりの秒数
         (2) nth-child の delay     … 0s から「1枚あたりの秒数」きざみ
         (3) @keyframes の %        … 20%   ＝ 100 ÷ 枚数
                                        4%    ＝ 切り替えにかける時間(0.24秒) ÷ 1周
                                        25%   ＝ 20% ＋ 5%（次が覆いきるまでの待ち）
     例：1枚2秒にするなら 6s→10s、delay は 0/2/4/6/8s、
         20% はそのまま、4% は 2.4%、25% は 23% になります。
*/
.top-body .tp-showroom-slides li {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    animation: tpShowroomSlide 6s linear infinite;
}

.top-body .tp-showroom-slides li:nth-child(1) { animation-delay: 0s; }
.top-body .tp-showroom-slides li:nth-child(2) { animation-delay: 1.2s; }
.top-body .tp-showroom-slides li:nth-child(3) { animation-delay: 2.4s; }
.top-body .tp-showroom-slides li:nth-child(4) { animation-delay: 3.6s; }
.top-body .tp-showroom-slides li:nth-child(5) { animation-delay: 4.8s; }

@keyframes tpShowroomSlide {
    /* 自分の番。いちばん手前（2）に出て、前の写真の上にかぶさります */
    0%    { opacity: 0; z-index: 2; }
    4%    { opacity: 1; z-index: 2; }
    /* 表示中。次の写真が手前に来るので、こちらは1段下がります */
    20%   { opacity: 1; z-index: 1; }
    /* ★ ここが対策の要です。
         次の写真が完全に覆いきるまで、不透明のまま待たせます。
         ここで薄くすると、下地の黒が透けて一瞬暗くなります。 */
    24.9% { opacity: 1; z-index: 1; }
    /* 完全に隠れたので、ここで消します */
    25%   { opacity: 0; z-index: 0; }
    100%  { opacity: 0; z-index: 0; }
}

.top-body .tp-showroom-slides img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 黒面になじませるため、彩度をほんの少しだけ落とす */
    filter: grayscale(18%);
}

/* ---- 右：本文とボタン ---- */
.top-body .tp-showroom-catch {
    margin: 0 0 22px;
    color: #fff;
    /* ★ 本文の列に収まる上限です。これ以上大きくすると
         「シメントアートの製品を」が折り返して崩れます */
    font-size: clamp(1.05rem, 1.75vw, 1.55rem);
    font-weight: bold;
    line-height: 1.75;
    letter-spacing: 0.02em;
}

.top-body .tp-showroom-text {
    margin: 0 0 38px;
    font-size: 0.85rem;
    line-height: 1.95;
    color: #b0b0b0;
}

/*
   ボタン：OKI の赤い塗りボタンにあたります。
   黒地の上でいちばん強く見えるのは白の塗りなので、白にしています。
   矢印は、製品ギャラリーの矢印（.tp-arrow）と同じ
   「正方形の2辺だけに線を引いて45度回した く の字」です。
*/
.top-body .tp-showroom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-width: 244px;
    padding: 19px 26px;
    background: #fff;
    color: #111;
    border: 1px solid #fff;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.top-body .tp-showroom-btn::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

.top-body .tp-showroom-btn:hover {
    background: transparent;
    color: #fff;
}

.top-body .tp-showroom-btn:hover::after {
    transform: rotate(45deg) translate(3px, -3px);
}

/* 「視差効果を減らす」設定の端末では、線も写真の入れ替えも止めます */
@media (prefers-reduced-motion: reduce) {
    .top-body .tp-lines-run use {
        animation: none;
    }

    .top-body .tp-showroom-slides li {
        animation: none;
        opacity: 0;
    }

    .top-body .tp-showroom-slides li:first-child {
        opacity: 1;
    }
}

/* ===================================
   06 販売店・施工会社
=================================== */
/*
   ★ このセクションは以前 #111 の黒面でしたが、
     直下のフッターも黒のため境目が消えていました。
     グレー面（#f5f5f5）に変えて、
     白（製品紹介）→ グレー（販売店）→ 黒（フッター）と段階を付けています。
*/
.top-body .tp-dealer-list {
    max-width: 620px;
    margin: 0 auto;
    padding: 0;
    border-top: 1px solid #ddd;
}

.top-body .tp-dealer-list li {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 18px 4px;
    border-bottom: 1px solid #ddd;
    font-size: 0.95rem;
    color: #222;
    line-height: 1.7;
}

.top-body .tp-dealer-pref {
    flex-shrink: 0;
    width: 74px;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: #888;
}

.top-body .tp-dealer-note {
    text-align: center;
    font-size: 0.78rem;
    color: #999;
    line-height: 1.9;
    margin: 22px 0 0;
}

/* ===================================
   Responsive
=================================== */
@media screen and (max-width: 900px) {
    /* タブレット */
    .top-body #slider {
        min-height: 62vh;
    }

    .top-body .tp-hero-logo {
        width: 260px;
        margin-bottom: 22px;
    }

    .top-body .tp-hero-catch {
        font-size: 1.22rem;
    }

    /* 使用事例：横12列は保ったまま、割り当てを
       「大きい1枚（全幅）／2枚／3枚」に組み替えます */
    .top-body .tp-works {
        grid-template-rows: auto;
        gap: 20px;
    }

    .top-body .tp-works > li:nth-child(1) {
        grid-row: auto;
        grid-column: 1 / 13;
    }

    .top-body .tp-works > li:nth-child(2),
    .top-body .tp-works > li:nth-child(3) {
        grid-row: auto;
        grid-column: span 6;
    }

    .top-body .tp-works > li:nth-child(4),
    .top-body .tp-works > li:nth-child(5),
    .top-body .tp-works > li:nth-child(6) {
        grid-row: auto;
        grid-column: span 4;
    }

    /* 高さを引き伸ばすのをやめ、縦横比で決めます */
    .top-body .tp-works > li:nth-child(1) .tp-works-image {
        min-height: 0;
        aspect-ratio: 16 / 9;
        flex: 0 0 auto;
    }

    .top-body .tp-works > li:nth-child(2) .tp-works-image,
    .top-body .tp-works > li:nth-child(3) .tp-works-image {
        min-height: 0;
        aspect-ratio: 4 / 3;
        flex: 0 0 auto;
    }

    .top-body .tp-products > li {
        flex-basis: 300px;
    }

    /* 東京ショールーム：横3列だと窮屈なので、見出しを上の段へ出して
       「見出し」／「写真＋本文」の2段組みにします */
    .top-body .tp-showroom-sec {
        padding: 52px 0 80px;
    }

    .top-body .tp-showroom {
        grid-template-columns: 1.08fr 1fr;
        gap: 34px;
        /* 3列のときは左右の余白を両端の列に持たせていましたが、
           2列になると写真が左端に張り付くので、外側で取り直します */
        padding: 0 24px;
    }

    .top-body .tp-showroom-head {
        padding-left: 0;
    }

    .top-body .tp-showroom-body {
        padding-right: 0;
    }

    /* 上で 5列（すき間を含む）にしているので、2列ぶんに割り当て直します */
    .top-body .tp-showroom-head {
        grid-column: 1 / -1;
        margin-bottom: 6px;
    }

    /* 見出しが上の段へ出るので、押し下げは不要です。
       写真も、列いっぱいの幅に戻します */
    .top-body .tp-showroom-photo {
        grid-column: 1;
        margin-top: 0;
        width: auto;
    }

    .top-body .tp-showroom-body {
        grid-column: 2;
        margin-top: 0;
    }

    .top-body .tp-showroom-en {
        margin-bottom: 18px;
    }
}

@media screen and (max-width: 768px) {
    .top-body .tp-section {
        padding: 56px 16px;
    }

    .top-body .tp-section .ttl {
        font-size: 1.4rem;
        margin-bottom: 36px;
        padding-bottom: 22px;
    }

    .top-body .tp-lead {
        margin: -8px auto 32px;
        font-size: 0.88rem;
        line-height: 2;
        text-align: left;
    }

    /* メインビジュアル
       中身がロゴとキャッチだけなので、高さは min-height で決まります。

       ★ スマホの高さは「画面（ヘッダー80pxを除く）の 1 画面ぶん」です。

         一度 2 画面ぶんにしていましたが、iPhone で縦に長すぎたため
         1 画面ぶんに戻しました（2026-09-10）。

         - 倍率は下の --tp-hero-sp-scale だけで調整できます。
           2 なら2画面ぶん、1.5 なら1.5画面ぶんです。
         - ★ この数字は iPhone と Android で共通です。
           片方だけ変えることはできません。
           端末ごとに見え方が違うのは、アドレスバーの高さと
           画面の縦横比が機種ごとに違うためです。
         - 100lvh … アドレスバーが隠れた状態の画面の高さ。
                    100svh（アドレスバーが出ている状態）だと、
                    スクロールでアドレスバーが隠れたときに
                    画面の下に次のセクションが覗いてしまいます。
                    lvh にしておくと、どちらの状態でも画面いっぱいになります。
         - 1行目の 100vh は、lvh に未対応の古いブラウザ用の控えです。
         - 80px はヘッダーの高さなので、ヘッダーを変えない限り触りません。 */
    .top-body #slider {
        --tp-hero-sp-scale: 1;
        min-height: calc((100vh - 80px) * var(--tp-hero-sp-scale));
        min-height: calc((100lvh - 80px) * var(--tp-hero-sp-scale));
    }

    /* ★ 文字（ロゴ＋キャッチ）の位置
       高さが 2 画面ぶんになったため、上下中央のままだと
       文字が最初の 1 画面から外れて見えなくなります。
       そこで上寄せにして、下の margin-top で
       「最初の 1 画面のほぼ中央」に置いています。
       ※ .tp-hero-veil（黒のグラデーション）は position:absolute で
         #slider の全体を覆うので、上寄せにしても影響しません。 */
    .top-body #slider,
    .top-body #slider > .vegas-wrapper {
        align-items: flex-start;
    }

    .top-body .tp-hero-inner {
        padding: 26px 20px;
        /* 0.4 ＝ 最初の1画面の 40% の位置。文字を上下に動かすならこの数字です */
        margin-top: calc((100vh - 80px) * 0.4);
        margin-top: calc((100lvh - 80px) * 0.4);
    }

    /* スマホは文字が全幅に乗るため、縦方向のグラデーションに切り替える */
    .top-body .tp-hero-veil {
        background: linear-gradient(180deg, rgba(17, 17, 17, 0.8) 0%, rgba(17, 17, 17, 0.66) 40%, rgba(17, 17, 17, 0.86) 100%);
    }

    .top-body .tp-hero-logo {
        width: 200px;
        max-width: 62%;
        margin-bottom: 16px;
    }

    .top-body .tp-hero-catch {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .top-body .tp-btn {
        display: block;
        text-align: center;
        padding: 15px 20px;
    }

    /* 使用事例（スマホ）
       1枚目と6枚目を全幅、あいだの4枚を2列にします。
       ★ .tp-section の padding をショートハンドで指定し直しているため、
         左右いっぱいに広げる指定がここで打ち消されます。指定し直しています。 */
    .top-body .tp-works-sec {
        padding-left: 0;
        padding-right: 0;
    }

    .top-body .tp-works-wrap {
        padding: 0 16px;
    }

    .top-body .tp-works {
        gap: 16px 12px;
    }

    .top-body .tp-works > li:nth-child(1),
    .top-body .tp-works > li:nth-child(6) {
        grid-column: 1 / 13;
    }

    .top-body .tp-works > li:nth-child(2),
    .top-body .tp-works > li:nth-child(3),
    .top-body .tp-works > li:nth-child(4),
    .top-body .tp-works > li:nth-child(5) {
        grid-column: span 6;
    }

    .top-body .tp-works > li:nth-child(1) .tp-works-image {
        aspect-ratio: 16 / 10;
    }

    .top-body .tp-works > li:nth-child(6) .tp-works-image {
        aspect-ratio: 16 / 9;
    }

    .top-body .tp-works-body {
        padding-top: 12px;
    }

    .top-body .tp-works-ttl {
        font-size: 0.85rem;
        line-height: 1.65;
    }

    /* 東京ショールーム（スマホ）
       見出し → 写真 → 本文 の1列に積みます */
    .top-body .tp-showroom-sec {
        padding: 46px 0 64px;
    }

    .top-body .tp-showroom {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 16px;
    }

    .top-body .tp-showroom-head,
    .top-body .tp-showroom-photo,
    .top-body .tp-showroom-body {
        grid-column: 1;
        margin-top: 0;
    }

    .top-body .tp-showroom-en {
        margin-bottom: 14px;
    }

    .top-body .tp-showroom-ttl {
        font-size: 1.55rem;
        line-height: 1.6;
    }

    .top-body .tp-showroom-catch {
        font-size: 1.06rem;
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .top-body .tp-showroom-text {
        font-size: 0.85rem;
        margin-bottom: 28px;
    }

    /* スマホでは横いっぱいのボタンにします */
    .top-body .tp-showroom-btn {
        display: flex;
        width: 100%;
        min-width: 0;
        padding: 17px 22px;
    }

    /* 背景の線は、狭い画面では細かく見えすぎるので少し控えめに */
    .top-body .tp-lines-run use {
        stroke: rgba(255, 255, 255, 0.7);
    }

    /* スマホでは走る線を6本→4本に減らします。
       線を1本動かすたびに描き直しが起きるため、
       非力な端末での負荷を下げる目的です。下地の線は6本のままです。 */
    .top-body .tp-line--3,
    .top-body .tp-line--5 {
        display: none;
    }

    /* 製品紹介（スマホ）
       横スワイプの仕組みは PC と共通です。ここでは大きさだけ調整します。

       ★ .tp-section の padding をショートハンドで再指定しているため、
         基本指定の padding-left:0 が打ち消されます。
         カードを画面端まで流すには、ここで指定し直す必要があります。 */
    .top-body .tp-products-sec {
        padding-left: 0;
        padding-right: 0;
    }

    .top-body .tp-products-sec .tp-inner {
        padding: 0 16px;
    }

    .top-body .tp-products {
        gap: 12px;
        padding: 4px 16px;
        scroll-padding-left: 16px;
    }

    .top-body .tp-products > li {
        /* 次のカードが少し覗く幅にして、横に動くことを伝える */
        flex-basis: 82%;
    }

    .top-body .tp-product-card {
        padding-bottom: 24px;
    }

    .top-body .tp-product-body {
        padding: 0 20px;
    }

    .top-body .tp-product-ttl {
        font-size: 1.05rem;
    }

    /* 指で送れるので、スマホでは矢印を出さずドットだけにする */
    .top-body .tp-arrow {
        display: none;
    }

    .top-body .tp-gallery-nav {
        margin-top: 22px;
    }

    /* 波 */
    .top-body .tp-wave-host {
        padding-bottom: 110px;
    }

    .top-body .tp-wave {
        height: 80px;
    }

    /* シメントアートとは */
    .top-body .tp-features {
        grid-template-columns: 1fr;
    }

    .top-body .tp-features li {
        padding: 26px 22px;
    }

    .top-body .tp-feature-icon {
        top: 24px;
        right: 22px;
        width: 36px;
        height: 36px;
    }

    /* 使用事例 */
    .top-body .tp-works-image {
        height: 240px;
    }

    .top-body .tp-works-body {
        padding: 48px 16px 16px;
    }

    .top-body .tp-works-ttl {
        font-size: 0.88rem;
    }

    /* ==========================================================
       販売店・施工会社（スマホ）

       このセクションだけ縦を詰めています。
       .tp-dealer-sec を付けているのは、
       「使用事例」も同じグレー面（tp-section--gray）のため、
       そちらまで一緒に詰まってしまうのを避けるためです。
       ========================================================== */
    .top-body .tp-dealer-sec {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .top-body .tp-dealer-sec .ttl {
        margin-bottom: 24px;
        padding-bottom: 18px;
    }

    .top-body .tp-dealer-sec .tp-lead {
        margin: -4px auto 20px;
        line-height: 1.85;
    }

    /* 県名を上に積むと1件あたり2行ぶんになるため、横並びに戻す。
       390px でも「三重県 ＋ エスアンドジー株式会社」は1行に収まります。 */
    .top-body .tp-dealer-list li {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
        padding: 12px 2px;
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .top-body .tp-dealer-pref {
        width: 58px;
        font-size: 0.64rem;
        letter-spacing: 0.1em;
    }

    .top-body .tp-dealer-note {
        margin-top: 14px;
        font-size: 0.72rem;
        line-height: 1.7;
    }

    .top-body .tp-btn-wrap {
        margin-top: 36px;
    }

    .top-body .tp-dealer-sec .tp-btn-wrap {
        margin-top: 24px;
        gap: 10px;
    }

    .top-body .tp-dealer-sec .tp-btn {
        padding: 13px 16px;
        font-size: 0.88rem;
        letter-spacing: 0;
    }

    /* ==========================================================
       フッター（スマホ）

       共通の style.css では、スマホでも
       ・リンク 1.1rem ／ 間隔 25px
       ・ロゴ 200px ／ SNS 40px
       のままで、390px の画面では文字が大きく行送りもばらついています。
       ここで文字サイズと間隔を詰めています。

       ★ style.css 自体は他ページと共通のため触っていません。
         .top-body を付けて、トップページの中だけに効くようにしています。
       ========================================================== */
    .top-body .footer-nav {
        gap: 12px 20px;
        font-size: 0.92rem;
        margin: 0 16px;
        padding: 22px 0 16px;
    }

    .top-body .footer-nav2 {
        gap: 18px;
        font-size: 0.72rem;
        margin: 0 16px;
        padding-top: 0;
    }

    .top-body .footer-logo {
        margin-top: 18px;
    }

    .top-body .footer-logo img {
        width: 150px;
    }

    .top-body .footer-sns {
        gap: 14px;
        margin: 6px 0 0;
    }

    .top-body .footer-sns li {
        width: 34px;
    }

    .top-body .copy-light {
        font-size: 0.66rem;
        padding-top: 6px;
    }

    /* Instagram の追尾バー（style.css の .ig-fixed-bar）が
       画面下に固定で乗るため、その高さぶんフッターの下に余白を足す。
       これがないとコピーライトがバーに隠れます。 */
    .top-body #footer {
        padding-bottom: 62px;
    }
}