/* finish.css：2026-11-12 すべてのCSSの最後に読む。レスポンシブの仕上げと、トップの背景（世界で買われている動き） */

/* ---------- 1. 文字の折り返し ---------- */
/* 工程の名前や短い見出しは、単語の途中で折らない */
.build-flow strong,.dh-step,.dh-flow h3,.dh-name,.dp-work-body h3,.price h3{word-break:keep-all;overflow-wrap:anywhere}
/* 金額の「（税別）」は1かたまりで折り返す */
.price-num small,.dh-price .price-num small{display:inline-block;white-space:nowrap}
@media (max-width:374px){
  .tile h3,.dh-pt h3,.dp-work-body h3{font-size:1.0625rem}
}

/* ---------- 2. タブレット（768〜1023px） ---------- */
@media (min-width:768px) and (max-width:1023px){
  /* トップ：カートの3枚は箇条書きが長いので1列 */
  #cart .tiles.is-3{grid-template-columns:minmax(0,1fr)}
  /* トップの料金：3列に入る大きさに */
  .dh-price .price-num{font-size:2.25rem}
  /* 構築ページ：デザイン見本は2列 */
  .build-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 3. 小さめのパソコン（1024〜1279px） ---------- */
@media (min-width:1024px) and (max-width:1279px){
  /* 左に見出し・右に本文の2列だと本文が狭すぎるので、見出しを上に置く */
  .seo-prose:has(> .sec-head){display:block}
  .seo-prose:has(> .sec-head) > .sec-head{position:static;margin-bottom:var(--sp-8)}
  .dh-price .price-num{font-size:2.75rem}
}

/* 工程表（8工程）と料金の3プランは、広い画面でも見出しを上に置いて全幅で並べる */
@media (min-width:1280px){
  .seo-prose:has(> .sec-head):has(> .build-flow, > .ryokin-plans){display:block}
  .seo-prose:has(> .sec-head):has(> .build-flow, > .ryokin-plans) > .sec-head{position:static;margin-bottom:var(--sp-8)}
}

/* ---------- 4. 個別の崩れ ---------- */
/* 構築ページの「期間の目安」（2列の表）は横スクロールさせない */
.build-table-sec .seo-table.is-compact{min-width:0}
/* 横スクロールが要る表の案内は、幅に関係なく出す */
.seo-table-hint.is-on{display:block}
/* 1枚だけの画像は半分の幅にしない */
.build-grid.is-2 > li:only-child{grid-column:1 / -1;max-width:760px}
/* アプリの導入の4工程：2列→4列（3＋1にしない） */
@media (min-width:768px){.install-flow .flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.install-flow .flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* トップのアプリ欄：横に流さないとき（スマホ・タブレット）も左右の余白をそろえる */
html:not(.kh-pin) .kh-track{padding-inline:var(--gutter)}

/* ---------- 5. トップの背景：世界中でオンラインで買われている動き ---------- */
/* ヒーローは z-index を持つので、ここが重なりの基準になる（屋根が飛ぶ動きを切らないよう overflow は触らない） */
.kh-world{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:1;transition:opacity .5s ease;
  -webkit-mask-image:radial-gradient(ellipse 42% 36% at 50% 50%,rgba(0,0,0,.18) 0,rgba(0,0,0,.55) 55%,#000 100%);
          mask-image:radial-gradient(ellipse 42% 36% at 50% 50%,rgba(0,0,0,.18) 0,rgba(0,0,0,.55) 55%,#000 100%)}
.kh-hero.is-past .kh-world{opacity:0}
@media (max-width:767px){
  .kh-world{-webkit-mask-image:radial-gradient(ellipse 60% 30% at 50% 50%,rgba(0,0,0,.4) 0,rgba(0,0,0,.75) 60%,#000 100%);
                    mask-image:radial-gradient(ellipse 60% 30% at 50% 50%,rgba(0,0,0,.4) 0,rgba(0,0,0,.75) 60%,#000 100%)}
}

/* ---------- 6. カートのロゴ ---------- */
.cart-mark{display:flex;align-items:center;gap:var(--sp-2);min-height:32px;margin:0;line-height:1}
.cart-mark img{display:block;width:auto;flex:none}
.cart-mark .cart-mark-sl{height:20px}
.cart-mark .cart-mark-ico{height:28px}
.cart-mark-name{font-family:"Jost","Helvetica Neue",Arial,sans-serif;font-size:1.3125rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.cart-mark-name.is-ja{font-family:var(--font-ja);font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--ls-head)}
/* 国内のカートのロゴは、3枚のカードの下に1列で並べる（カードの高さをそろえるため） */
.cart-strip{margin-top:var(--sp-6)}
.cart-strip-label{font-size:var(--fs-sm);font-weight:500;margin-bottom:var(--sp-3)}
.cart-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin:0;padding:0;list-style:none}
.cart-logos li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);min-width:0;min-height:92px;padding:var(--sp-3) var(--sp-1);border:var(--bw) solid var(--card-line);background:var(--paper);text-align:center;font-size:var(--fs-label);line-height:1.35;color:var(--ink-2);word-break:keep-all;overflow-wrap:normal}
.cart-logos li::before{content:none}
.cart-logos img{display:block;width:32px;height:32px;object-fit:contain}
@media (min-width:768px){.cart-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3)}}
.cart-tm{margin-top:var(--sp-3);font-size:var(--fs-label);color:var(--ink-3)}

/* ---------- 7. 事業についてのイラスト ---------- */
.dh-ico{display:block;width:56px;height:56px;margin-bottom:var(--sp-3)}
.dh-bars li{display:flex;align-items:center;gap:var(--sp-3)}
.dh-bar-ico{display:block;flex:none;width:40px;height:40px}
.dh-bars .dh-bar-t{min-width:0;margin:0;font-size:inherit;font-weight:500;color:var(--ink)}
.dh-bars .dh-bar-t > span{margin-left:.25em}
.dh-ill{margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--sp-2);background:var(--fig-bg);border-bottom:var(--bw) solid var(--card-line);display:flex;justify-content:center;align-items:center;padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.dh-ill img{display:block;width:100%;max-width:280px;height:auto;aspect-ratio:240 / 140}
@media (max-width:767px){
  /* スマホでは工程を「絵・番号と名前・説明」の横並びにして、縦に長くならないようにする */
  .dh-step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--sp-4);align-items:start}
  .dh-step .dh-ico{grid-row:1 / span 3;width:48px;height:48px;margin:0}
  .dh-step > :not(.dh-ico){grid-column:2}
}