/* かんたんCMS — 公開サイトのヘッダーとトップページ(セクション)。3 テーマで色だけでなく構図・余白・線を変える */

/* ---------- ヘッダー:小さい画面ではロゴとメニューのボタンを 1 行に。検索はメニューの中 ---------- */
.site .site-header{position:relative;flex-wrap:wrap;row-gap:10px}
.site .site-menu{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site .site-menu-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--btn-radius,6px);background:var(--card);color:var(--fg);font:inherit;font-size:.9em;cursor:pointer}
.site .site-menu-toggle .bars{width:18px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
.site .site-nav a{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:860px){
  .site .site-header,.site.header-center .site-header{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 20px}
  .site .site-menu-toggle{display:inline-flex}
  .site .site-name{font-size:1.02em}
  .js .site .site-menu:not(.open){display:none}
  .site .site-menu{flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px;padding:4px 0 10px}
  .site .site-nav{flex-direction:column;gap:0}
  .site .site-nav a{border-bottom:1px solid var(--line);padding:0 2px}
  .site .site-search{margin:8px 0 0;width:100%}.site .site-search input{flex:1;width:auto;min-height:44px}.site .site-search button{min-height:44px;padding:0 16px}
}

/* ---------- トップの共通 ---------- */
.site.is-home .site-main{max-width:none;padding:0}
.home{--wrap:1100px;--gutter:max(20px,calc((100% - var(--wrap)) / 2));--pad:96px;--band:var(--card);--strong:var(--heading)}
.home-sec{position:relative;padding:var(--pad) var(--gutter);margin:0}
.home-sec:nth-child(even){background:var(--band)}
.home h2{border:0;padding:0;margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.3;letter-spacing:.02em;color:var(--strong)}
.home h3{margin:0 0 6px;font-size:1.12em;color:var(--strong)}
.sec-head{max-width:760px;margin:0 0 40px}
.sec-kicker{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:.82em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d)}
.sec-no{font-variant-numeric:tabular-nums}
.sec-lead{margin:14px 0 0;color:var(--muted);font-size:1.05em;line-height:1.9}
.sec-more{margin:24px 0 0}
.sec-more a,.home .news-list a{font-weight:600}
.sec-edit{position:absolute;top:14px;right:14px;z-index:5;background:#1d2327;color:#fff!important;font-size:12px;line-height:1;padding:8px 12px;border-radius:999px;text-decoration:none;opacity:.88}
.sec-edit:hover,.sec-edit:focus-visible{opacity:1}
.ai-caption{margin:10px 0 0;font-size:.78em;color:var(--muted)}
.home img{display:block;max-width:100%;height:auto}

/* ボタン(押しやすい大きさ:高さ 48px) */
.btn-main,.btn-sub{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:var(--btn-radius);font-weight:700;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.btn-main{background:var(--accent);color:#fff!important;border:2px solid var(--accent)}
.btn-main:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn-sub{border:2px solid currentColor;color:inherit!important}
.btn-sub:hover{background:rgba(127,127,127,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- ヒーロー ---------- */
.sec-hero{padding:0}
.hero{position:relative;display:grid;align-items:center;min-height:clamp(520px,80vh,760px);overflow:hidden}
.site .hero-title{margin:0;font-size:clamp(34px,5.6vw,66px);line-height:1.22;font-weight:800;letter-spacing:.01em;color:inherit;word-break:keep-all;overflow-wrap:anywhere}
.hero-kicker{margin:0 0 16px;font-size:.92em;font-weight:700;letter-spacing:.12em;opacity:.9}
.hero-lead{margin:22px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.95;max-width:34em}
/* 写真あり:写真を全面に、左側を暗くして白い文字を載せる */
.hero.has-photo{color:#fff}
.hero.has-photo .hero-media{position:absolute;inset:0}
.hero.has-photo .hero-photo{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero.has-photo .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,20,.88) 0%,rgba(8,12,20,.72) 38%,rgba(8,12,20,.18) 68%,rgba(8,12,20,0) 100%)}
.hero.has-photo .hero-text{position:relative;z-index:1;padding:80px var(--gutter);max-width:calc(var(--gutter) + 640px)}
.hero.has-photo .btn-sub{color:#fff!important}
.hero-caption{position:absolute;right:16px;bottom:12px;z-index:1;margin:0;color:#fff;background:rgba(0,0,0,.45);padding:3px 10px;border-radius:999px}
/* 写真なし:業種のイラストと左右に分ける */
.hero.has-art{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;padding:72px var(--gutter);background:var(--hero-soft,var(--card));color:var(--strong)}
.hero.has-art .hero-media{order:2}
.hero-art{display:block;width:100%;height:auto}
.art-generic{position:relative;aspect-ratio:4/3}
.art-generic span{position:absolute;border-radius:24px;background:var(--accent);opacity:.18}
.art-generic span:nth-child(1){inset:8% 30% 30% 4%}.art-generic span:nth-child(2){inset:30% 6% 6% 34%;opacity:.3}.art-generic span:nth-child(3){inset:46% 52% 14% 18%;opacity:.5}

/* ---------- 業種のイラスト(SVG)の色:テーマの色を使う ---------- */
.hero-art .art-grid path{stroke:var(--line);stroke-width:1;fill:none}
.hero-art .stop-hi{stop-color:#eef2f7}.hero-art .stop-lo{stop-color:#aab4c3}
.hero-art .art-face-top{fill:#e9eef5;stroke:var(--strong);stroke-width:1.5}
.hero-art .art-face-left{fill:#c9d2de;stroke:var(--strong);stroke-width:1.5}
.hero-art .art-face-right{fill:#dbe2ec;stroke:var(--strong);stroke-width:1.5}
.hero-art .art-bore{fill:#b6c1cf;stroke:var(--strong);stroke-width:1.5}.hero-art .art-bore-in{fill:#8d99aa;stroke:var(--strong);stroke-width:1}
.hero-art .art-hole{fill:#8d99aa;stroke:var(--strong);stroke-width:1}
.hero-art .art-detail{stroke:var(--strong);stroke-width:1;opacity:.45;fill:none}
.hero-art .art-metal{fill:url(#artMetal);stroke:var(--strong);stroke-width:1.5}.hero-art .art-end{fill:#c9d2de;stroke:var(--strong);stroke-width:1.5}
.hero-art .art-ring{fill:#dbe2ec;stroke:var(--strong);stroke-width:1.5}.hero-art .art-ring-in{fill:var(--hero-soft,var(--card));stroke:var(--strong);stroke-width:1.5}.hero-art .art-ring-side{fill:none;stroke:var(--strong);stroke-width:1.5}
.hero-art .art-dim path{stroke:var(--accent);stroke-width:1.5;fill:none}.hero-art .art-center{stroke-dasharray:14 4 3 4;opacity:.8}.hero-art .art-ext{opacity:.7}
.hero-art .art-accent-fill{fill:var(--accent)}
.hero-art .art-label text{fill:var(--accent-d);font:600 15px/1 ui-monospace,Menlo,Consolas,monospace}
.hero-art .art-callout{fill:none;stroke:var(--accent);stroke-width:1.5}
.hero-art .art-sky{fill:url(#artSky)}.hero-art .stop-sky-hi{stop-color:#fbf6ea}.hero-art .stop-sky-lo{stop-color:#efe3cc}
.hero-art .stop-glow-hi{stop-color:#ffe7a8}.hero-art .stop-glow-lo{stop-color:#f6c766}
.hero-art .art-sun{fill:#f6d58a;opacity:.7}
.hero-art .art-trunk{stroke:#6b4f35;stroke-width:10;stroke-linecap:round}.hero-art .art-leaf{fill:var(--accent);opacity:.85}.hero-art .art-leaf2{fill:var(--accent);opacity:.6}
.hero-art .art-roof{fill:none;stroke:#5a4030;stroke-width:16;stroke-linejoin:round;stroke-linecap:round}.hero-art .art-roof-line{fill:none;stroke:#3d2c20;stroke-width:3;stroke-linejoin:round}
.hero-art .art-wall{fill:#d9b98f;stroke:#5a4030;stroke-width:3}
.hero-art .art-wood{stroke:#b8935f;stroke-width:1.5}
.hero-art .art-window{fill:#fff4d6;stroke:#5a4030;stroke-width:3}.hero-art .art-frame{stroke:#5a4030;stroke-width:3}
.hero-art .art-door{fill:#8a6141;stroke:#5a4030;stroke-width:3}.hero-art .art-knob{fill:#f6d58a}
.hero-art .art-light{fill:#ffe7a8;opacity:.45}.hero-art .art-ground{stroke:#5a4030;stroke-width:3;stroke-linecap:round}
.hero-art .art-log-out{fill:#e2c79c;stroke:#8a6141;stroke-width:3}.hero-art .art-ring-line{fill:none;stroke:#b58a5c;stroke-width:1.5}

/* ---------- サービス紹介 ---------- */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.svc{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;transition:border-color .15s}
.home-sec:nth-child(even) .svc{background:var(--bg)}
.svc:hover{border-color:var(--accent)}
.svc-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.svc-body{padding:22px 22px 24px}
.svc-no{display:block;font-size:.8em;font-weight:800;letter-spacing:.1em;color:var(--accent-d);margin-bottom:6px}
.svc:not(.has-img) .svc-no{font-size:2.4em;line-height:1;margin-bottom:14px}
.svc p{margin:0;color:var(--muted);font-size:.95em}

/* ---------- サンプル紹介 ---------- */
.sample-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.sample{background:var(--bg);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden}
.sample-media img,.sample-art{width:100%;aspect-ratio:4/3;object-fit:cover}
.sample-art{display:grid;place-items:center;background:var(--hero-soft,var(--card));padding:12px}
.sample-art .hero-art,.work-art .hero-art{width:100%;height:100%;object-fit:contain}
.sample-body{padding:20px 22px 22px}
.sample dl{margin:12px 0 0;display:grid;gap:0}
.sample dl div{display:grid;grid-template-columns:5.5em 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:.93em}
.sample dt{color:var(--muted);font-weight:600}.sample dd{margin:0}

/* ---------- 施工イメージ(大 1+小 2) ---------- */
.works-grid{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:20px}
.work{position:relative;margin:0;border-radius:var(--card-radius);overflow:hidden;background:var(--card);min-height:220px}
.work-main{grid-row:1/3}
.work img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.work-art{position:absolute;inset:0;display:grid;place-items:center;background:var(--hero-soft,var(--card))}
.work figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;display:flex;flex-direction:column;gap:2px}
.work figcaption span{font-size:.88em;opacity:.92}

/* ---------- 考え方・取り組み ---------- */
.values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.values .sec-head{margin-bottom:24px}
.values-body p{margin:0 0 1em;line-height:1.95}
.values-body ul{list-style:none;padding:0;margin:0}
.values-body li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--line)}
.values-body li::before{content:"";position:absolute;left:4px;top:1.15em;width:12px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.values-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--card-radius)}
.values-art{background:var(--hero-soft,var(--card));border-radius:var(--card-radius);padding:20px}

/* ---------- 流れ ---------- */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;counter-reset:f}
.flow li{position:relative;padding:0 0 0 0}
.flow-no{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:1.1em;margin-bottom:14px;position:relative;z-index:1}
.flow li:not(:last-child)::before{content:"";position:absolute;top:24px;left:56px;right:-12px;height:2px;background:var(--line)}
.flow p{margin:0;color:var(--muted);font-size:.93em}

/* ---------- お知らせ・お問い合わせ ---------- */
.home .news-list{max-width:860px}
.contact-band{display:grid;gap:40px;align-items:center;background:var(--contact-bg,var(--accent-d));color:#fff;border-radius:var(--card-radius);padding:56px clamp(24px,5vw,64px)}
.contact-band.has-img{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.contact-band h2,.contact-band .sec-kicker,.contact-band .sec-lead{color:#fff}
.contact-band .sec-lead{opacity:.92}
.contact-band .sec-head{margin-bottom:8px}
.contact-band .btn-main{background:#fff;color:var(--accent-d)!important;border-color:#fff}
.contact-band .btn-main:hover{background:transparent;color:#fff!important}
.contact-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:calc(var(--card-radius) - 2px)}
.contact-band .ai-caption{color:#fff;opacity:.8}
.sec-contact{background:var(--bg)!important}

/* =========================================================
   テーマ:コーポレート — 左右分割・整ったグリッド・細い製図線・金属の控えめなグラデーション
   ========================================================= */
.site.theme-corporate .home{--hero-soft:linear-gradient(135deg,#f5f8fc,#e8eef7);--band:#f5f7fa;--strong:#0f1f3d}
.site.theme-corporate{--accent-d:#1d4ed8}
.site.theme-corporate .hero{font-weight:500}
.site.theme-corporate .hero-title{font-weight:800}
.site.theme-corporate .hero.has-art{background-image:linear-gradient(rgba(15,31,61,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,31,61,.06) 1px,transparent 1px),linear-gradient(135deg,#f5f8fc,#e6edf7);background-size:32px 32px,32px 32px,auto}
.site.theme-corporate .sec-kicker::before{content:"";width:32px;height:2px;background:var(--accent)}
.site.theme-corporate .svc,.site.theme-corporate .sample{border-radius:4px;border-top:3px solid var(--accent)}
.site.theme-corporate .contact-band{--contact-bg:linear-gradient(120deg,#0f2a5c,#1e4fa3)}

/* =========================================================
   テーマ:ナチュラル — 大きな余白・少しずらした図と文章・見出しは明朝・柔らかい輪郭
   ========================================================= */
.site.theme-natural .home{--pad:120px;--hero-soft:#f3ecdf;--band:#f6f0e4;--strong:#3b2f25}
.site.theme-natural{--accent-d:#4d6b32}
.site.theme-natural.accent-blue{--accent-d:#2f5680}.site.theme-natural.accent-orange{--accent-d:#8a4f1c}.site.theme-natural.accent-red{--accent-d:#8a3434}.site.theme-natural.accent-purple{--accent-d:#5d4380}
.site.theme-natural .home h2,.site.theme-natural .hero-title,.site.theme-natural .home h3{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","BIZ UDPMincho","Noto Serif JP",serif;font-weight:600;letter-spacing:.06em}
.site.theme-natural .hero-title{font-weight:600;line-height:1.4}
/* 写真は全面にせず、右にずらして額のように */
.site.theme-natural .hero.has-photo{color:var(--strong);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding:72px var(--gutter);background:var(--hero-soft)}
.site.theme-natural .hero.has-photo .hero-media{position:relative;inset:auto;order:2}
.site.theme-natural .hero.has-photo .hero-media::after{display:none}
.site.theme-natural .hero.has-photo .hero-media::before{content:"";position:absolute;inset:28px -18px -28px 28px;border-radius:28px;background:var(--accent);opacity:.18}
.site.theme-natural .hero.has-photo .hero-photo{position:relative;border-radius:28px;aspect-ratio:4/3;height:auto}
.site.theme-natural .hero.has-photo .hero-text{padding:0;max-width:none}
.site.theme-natural .hero.has-photo .btn-sub{color:var(--strong)!important}
.site.theme-natural .hero-caption{right:calc(var(--gutter) + 12px);bottom:20px}
.site.theme-natural .hero.has-art .hero-art{border-radius:28px}
.site.theme-natural .sec-kicker{letter-spacing:.2em}
.site.theme-natural .sec-kicker::after{content:"";flex:0 0 40px;height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 10px)}
.site.theme-natural .svc,.site.theme-natural .sample{border-radius:20px;border-color:#e3d7c2}
.site.theme-natural .svc-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
@media (min-width:861px){.site.theme-natural .svc-grid>li:nth-child(even){margin-top:44px}}
.site.theme-natural .values{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.site.theme-natural .values-media{transform:translateY(24px)}
.site.theme-natural .flow-no{background:transparent;color:var(--accent-d);border:2px solid var(--accent)}
.site.theme-natural .flow li:not(:last-child)::before{background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);opacity:.6}
.site.theme-natural .contact-band{--contact-bg:#4d4032;border-radius:28px}
.site.theme-natural .btn-main,.site.theme-natural .btn-sub{border-radius:999px}

/* =========================================================
   テーマ:モダン — 墨色・非対称・大きな番号・線画・局所的な光
   ========================================================= */
.site.theme-modern .home{--hero-soft:radial-gradient(800px 420px at 80% 30%,rgba(88,166,255,.18),transparent 60%),#0d1117;--band:#11161d;--strong:#ffffff}
.site.theme-modern{--accent-d:#79b8ff}
.site.theme-modern.accent-green{--accent-d:#56d364}.site.theme-modern.accent-orange{--accent-d:#ffa657}.site.theme-modern.accent-red{--accent-d:#ff7b72}.site.theme-modern.accent-purple{--accent-d:#d2a8ff}
.site.theme-modern .home h2::before{display:none}
.site.theme-modern .hero-title{font-size:clamp(36px,6.6vw,84px);letter-spacing:-.01em;line-height:1.12}
.site.theme-modern .hero.has-photo .hero-media::after{background:linear-gradient(90deg,rgba(5,8,12,.94) 0%,rgba(5,8,12,.78) 45%,rgba(5,8,12,.25) 75%,rgba(5,8,12,.1) 100%)}
.site.theme-modern .hero.has-photo::before{content:"";position:absolute;z-index:1;left:var(--gutter);top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--accent),transparent);opacity:.6}
.site.theme-modern .hero-kicker{color:var(--accent-d)}
.site.theme-modern .btn-main{color:#0d1117!important}
.site.theme-modern .hero.has-art{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);color:#fff}
/* 見出しは左に大きな番号、右に見出し(非対称) */
.site.theme-modern .sec-head{display:grid;grid-template-columns:auto 1fr;column-gap:28px;max-width:900px}
.site.theme-modern .sec-head .sec-kicker{grid-row:1/4;flex-direction:column;align-items:flex-start;gap:4px;margin:0}
.site.theme-modern .sec-head .sec-no{font-size:4.2em;line-height:.9;font-weight:800;color:transparent;-webkit-text-stroke:1.5px var(--accent);letter-spacing:0}
.site.theme-modern .svc,.site.theme-modern .sample{background:#161b22;border-color:#2a313c;border-radius:12px}
.site.theme-modern .svc:hover,.site.theme-modern .sample:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 40px rgba(88,166,255,.12)}
.site.theme-modern .svc:not(.has-img) .svc-no{font-size:3.4em;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.site.theme-modern .flow-no{background:transparent;border:1.5px solid var(--accent);color:var(--accent-d);border-radius:12px}
.site.theme-modern .flow li:not(:last-child)::before{background:linear-gradient(90deg,var(--accent),transparent)}
.site.theme-modern .contact-band{--contact-bg:radial-gradient(600px 300px at 90% 0%,rgba(88,166,255,.35),transparent 60%),#161b22;border:1px solid #2a313c}
.site.theme-modern .contact-band .btn-main{color:#0d1117!important}
.site.theme-modern .values-art,.site.theme-modern .work-art{background:#161b22}
.site.theme-modern .hero-art .art-face-top{fill:#1c2430}.site.theme-modern .hero-art .art-face-left{fill:#141b24}.site.theme-modern .hero-art .art-face-right{fill:#18202b}
.site.theme-modern .hero-art .art-bore,.site.theme-modern .hero-art .art-end,.site.theme-modern .hero-art .art-ring{fill:#202a37}.site.theme-modern .hero-art .art-bore-in,.site.theme-modern .hero-art .art-hole{fill:#0d1117}
.site.theme-modern .hero-art .stop-hi{stop-color:#2b3646}.site.theme-modern .hero-art .stop-lo{stop-color:#141b24}
.site.theme-modern .hero-art .art-face-top,.site.theme-modern .hero-art .art-face-left,.site.theme-modern .hero-art .art-face-right,.site.theme-modern .hero-art .art-bore,.site.theme-modern .hero-art .art-metal,.site.theme-modern .hero-art .art-ring,.site.theme-modern .hero-art .art-ring-side,.site.theme-modern .hero-art .art-end{stroke:#8fb8ff}
.site.theme-modern .hero-art .art-sky{fill:#161b22}.site.theme-modern .hero-art .art-wall{fill:#2a2420}

/* ---------- 小さい画面(本文 16〜18px・左右 20px・セクションの間 56px・320px 幅でも崩れない) ---------- */
@media (max-width:860px){
  .home{--pad:56px}
  .site.theme-natural .home{--pad:64px}
  .hero{min-height:0}
  .hero.has-photo{min-height:clamp(480px,88vh,640px);align-items:end}
  .hero.has-photo .hero-text{padding:48px 20px 64px;max-width:none}
  .hero.has-photo .hero-media::after,.site.theme-modern .hero.has-photo .hero-media::after{background:linear-gradient(180deg,rgba(8,12,20,.15) 0%,rgba(8,12,20,.55) 40%,rgba(8,12,20,.9) 100%)}
  .hero.has-photo .hero-photo{object-position:62% center}
  .hero.has-art,.site.theme-modern .hero.has-art{grid-template-columns:1fr;gap:28px;padding:40px 20px 56px}
  .hero.has-art .hero-media{order:0}
  .site.theme-natural .hero.has-photo{grid-template-columns:1fr;gap:28px;padding:32px 20px 56px;align-items:start}
  .site.theme-natural .hero.has-photo .hero-media{order:0}
  .site.theme-natural .hero.has-photo .hero-media::before{inset:14px -8px -14px 14px}
  .site.theme-natural .hero-caption{right:28px;bottom:auto;top:calc(32px + 12px)}
  .site.theme-modern .hero.has-photo::before{display:none}
  .hero-actions a{flex:1 1 220px}
  .sec-head{margin-bottom:28px}
  .site.theme-modern .sec-head{grid-template-columns:1fr}
  .site.theme-modern .sec-head .sec-kicker{grid-row:auto;flex-direction:row;align-items:center;gap:12px;margin-bottom:8px}
  .site.theme-modern .sec-head .sec-no{font-size:2.4em}
  .works-grid{grid-template-columns:1fr;grid-template-rows:none}
  .work-main{grid-row:auto}
  .work{min-height:0;aspect-ratio:4/3}
  .values,.site.theme-natural .values{grid-template-columns:1fr;gap:28px}
  .site.theme-natural .values-media{transform:none}
  .flow{grid-template-columns:1fr;gap:0}
  .flow li{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding-bottom:22px}
  .flow-no{grid-row:1/3;margin:0}
  .flow li:not(:last-child)::before{top:52px;bottom:4px;left:23px;right:auto;width:2px;height:auto}
  .contact-band,.contact-band.has-img{grid-template-columns:1fr;padding:40px 22px}
  .sec-edit{top:8px;right:8px}
}
@media (max-width:360px){.home h2{font-size:24px}.hero-title{font-size:30px}.sample dl div{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.svc,.btn-main,.btn-sub{transition:none}.site.theme-natural .values-media{transform:none}}

/* ---------- 管理画面:テーマの比較プレビュー ---------- */
.compare-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.cmp-frame{height:560px;overflow:hidden;border:1px solid #dcdcde;border-radius:4px;margin-bottom:12px;position:relative}
.cmp-inner{width:1200px;transform:scale(.3);transform-origin:0 0;pointer-events:none}
.cmp-inner .sec-edit{display:none}
@media (min-width:1500px){.cmp-inner{transform:scale(.36)}}
.home-form fieldset{border:1px solid #dcdcde;border-radius:4px;padding:10px 14px;margin:14px 0}
.home-form .row{display:flex;flex-wrap:wrap;gap:10px}.home-form .row label{flex:1 1 160px}
.home-item{border-top:1px solid #f0f0f1;padding-top:6px;margin-top:6px}
/* 写真の上の見出しは白 */
.site .hero.has-photo .hero-title{color:#fff}
.site .hero.has-art .hero-title,.site.theme-natural .hero.has-photo .hero-title{color:var(--strong)}
.site.theme-modern .hero .hero-title{color:#fff}
.site.theme-natural .hero-title{font-size:clamp(30px,4.4vw,54px);letter-spacing:.04em;line-height:1.45}
@media (max-width:860px){.site.theme-natural .hero-title{font-size:clamp(28px,7.4vw,40px)}}
.svc-art{aspect-ratio:3/2;display:grid;place-items:center;background:var(--hero-soft,var(--card));padding:10px;overflow:hidden}
.svc-art .hero-art{width:100%;height:100%}
.site.theme-natural .hero.has-photo .hero-caption{position:static;grid-column:2;justify-self:end;margin-top:-36px;background:rgba(59,47,37,.75)}
@media (max-width:860px){.site.theme-natural .hero.has-photo .hero-caption{grid-column:1;grid-row:2;margin-top:-20px}}
.site.theme-natural .hero.has-photo .hero-media{grid-column:2;grid-row:1}
.site.theme-natural .hero.has-photo .hero-text{grid-column:1;grid-row:1}
.site.theme-natural .hero.has-photo .hero-caption{grid-column:2;grid-row:2;margin-top:-8px}
@media (max-width:860px){
  .site.theme-natural .hero.has-photo .hero-media{grid-column:1;grid-row:1}
  .site.theme-natural .hero.has-photo .hero-caption{grid-column:1;grid-row:2;margin-top:-12px}
  .site.theme-natural .hero.has-photo .hero-text{grid-column:1;grid-row:3}
}
/* スマホのヒーロー:写真を上に(部品・家が見える位置で切り取る)、文字はその下に。暗い空白をつくらない */
@media (max-width:860px){
  .site:not(.theme-natural) .hero.has-photo{display:block;min-height:0;background:#0b0f16}
  .site:not(.theme-natural) .hero.has-photo .hero-media{position:relative;inset:auto;aspect-ratio:4/3;overflow:hidden}
  .site:not(.theme-natural) .hero.has-photo .hero-media::after{background:linear-gradient(180deg,rgba(11,15,22,0) 55%,rgba(11,15,22,.85) 100%)}
  .site:not(.theme-natural) .hero.has-photo .hero-text{padding:20px 20px 44px}
  .site:not(.theme-natural) .hero.has-photo .hero-caption{top:12px;bottom:auto;right:12px}
  .site.industry-precision .hero-photo{object-position:74% 62%}
  .site.industry-house .hero-photo{object-position:64% 50%}
}