/* ===================================================================
   WEBDOS.PRO - Theme (site-wide overrides)
   Save as: /assets/css/theme.css
   ------------------------------------------------------------------- */

:root{
  --site-max: 1100px;            /* 1100→必要なら 1200/1280/1440 に */
  --header-bg:   #202040;
  --header-text: #ffffff;
  --header-hover: rgba(255,255,255,.12);
  --footer-bg:   #202040;
  --footer-text: #ffffff;
  --footer-hover: rgba(255,255,255,.12);
  --logo-h: 40px;                 /* ヘッダーロゴ高さ */
  --brand: #0f172a;
  --muted: #e5e7eb;
}

/* 最大幅の統一 */
#header .global-nav, #wrapper, #footer .inner{
  max-width: var(--site-max);
  margin: 0 auto;
  width: 100%;
}
img{ max-width:100%; height:auto; display:block; }

/* ===== Header ===== */
#header{ background:var(--header-bg)!important; color:var(--header-text)!important; }
#header *{ box-sizing:border-box; }
#header .brand img{ height:var(--logo-h); width:auto; }
#header .global-nav{ padding:10px 12px; }
#header .global-nav .links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 24px; list-style:none; margin:0; padding:0;
}
#header .global-nav .links a{
  display:block; padding:12px 10px; line-height:1.2;
  color:var(--header-text)!important; text-decoration:none;
  white-space:normal; word-break:keep-all; border-radius:8px;
  transition:background-color .15s ease,color .15s ease;
}
#header .global-nav .links a:hover{ background:var(--header-hover); }
/* 英語サブタイトル（HTMLを触らず自動付与） */
#header .global-nav .links li:nth-child(1) a::after{content:"Top";display:block;font-size:.85em;opacity:.75}
#header .global-nav .links li:nth-child(2) a::after{content:"Service";display:block;font-size:.85em;opacity:.75}
#header .global-nav .links li:nth-child(3) a::after{content:"Company";display:block;font-size:.85em;opacity:.75}
#header .global-nav .links li:nth-child(4) a::after{content:"Contact";display:block;font-size:.85em;opacity:.75}
@media (max-width:768px){
  #header .global-nav{ padding:8px; }
  #header .global-nav .links{ gap:8px 12px; }
  #header .global-nav .links a{ padding:10px 8px; }
  :root{ --logo-h:48px; }
}

/* ===== Hero / Slider ===== */
/* セクションに .full-bleed を付けると左右いっぱい表示 */
.full-bleed{
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
.hero{ position:relative; overflow:hidden; border-radius:12px; }
.hero .slides{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition:transform .5s ease; }
.hero .slide{ width:100%; height:0; padding-top:42%; position:relative; }
@media (max-width:768px){ .hero .slide{ padding-top:56.25%; } }
.hero .slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero .nav{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; }
.hero .dot{ width:10px; height:10px; border-radius:50%; background:#fff8; border:1px solid #fff; cursor:pointer }
.hero .dot.active{ background:#fff; }
.hero .btn{ position:absolute; top:50%; transform:translateY(-50%); background:#0008; color:#fff; border:0; width:36px; height:36px; border-radius:50%; cursor:pointer }
.hero .btn.prev{ left:10px } .hero .btn.next{ right:10px }

/* ===== ZIG2 ===== */
#zig2{ margin:32px 0; display:block; }
#zig2 .row{
  display:grid; grid-template-columns:minmax(420px,1fr) 1fr;
  gap:24px; align-items:center; margin-bottom:28px;
  background:#fff; padding:16px; border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
#zig2.alt .row:nth-of-type(even) .pic{ order:2; }
#zig2.alt .row:nth-of-type(even) .txt{ order:1; }
#zig2 .pic{ position:relative; overflow:hidden; border-radius:12px; aspect-ratio:4/3; }
#zig2 .pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.0); transform-origin:center center; max-width:none; }
#zig2 .txt{ min-width:320px; line-height:1.7; color:#333; }
#zig2 .txt h3{ margin:0 0 .5em; font-size:1.25rem; color:#222; }
#zig2 .txt p{ margin:0; }
@media (max-width:768px){
  #zig2 .row{ grid-template-columns:1fr; padding:12px; }
  #zig2 .txt{ min-width:0; }
  #zig2.alt .row:nth-of-type(even) .pic, #zig2.alt .row:nth-of-type(even) .txt{ order:unset; }
}

/* ===== Footer ===== */
#footer{ background:var(--footer-bg); color:var(--footer-text); padding:24px 0 28px; }
#footer a{ color:var(--footer-text); }
#footer .footer-nav .links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:16px 28px; list-style:none; padding:0; margin:0 0 12px;
}
#footer .footer-nav .links a{
  display:inline-block; text-decoration:none; line-height:1.2; padding:6px 8px;
  transition: color .2s ease, background-color .2s ease;
  border-radius:8px;
}
#footer .footer-nav .links a span{ display:block; font-size:.85em; opacity:.75; }
#footer .footer-nav .links a:hover{ background:var(--footer-hover); color:#fff; }
@media (max-width:480px){
  #footer .footer-nav .links{ gap:8px 10px; }
  #footer .footer-nav .links a{ padding:4px 6px; }
  #footer .inner{ padding:0 8px; }
}

/* ===== Buttons & Forms ===== */
.button{
  display:inline-block; background:#334155; color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:8px; border:0; cursor:pointer;
  transition: filter .15s ease, transform .02s ease;
}
.button:hover{ filter:brightness(1.05); }
.button:active{ transform: translateY(1px); }
.panel{ background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; }
.form-row{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.form-row input[type="text"], .form-row input[type="email"], .form-row textarea{
  border:1px solid #cbd5e1; border-radius:8px; padding:10px 12px; width:100%;
}
.form-row textarea{ resize:vertical; }

/* ===== Utilities ===== */
.kv .kv-img[src=""], .kv .kv-img[src="/images/"]{ display:none; } /* 空KV非表示 */
.hide{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ===== Gallery (shared) ===== */
.gallery-grid {
  display: grid;
  gap: 10px;
}
.gallery-grid[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gallery-grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width:1024px){ .gallery-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width:640px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.gallery-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}
.gallery-item img {
  width: 100%;
  height: 150px;              /* サムネ見栄え固定 */
  object-fit: cover;
  display: block;
}
.gallery-item .path {
  font-size: 12px;
  margin-top: 6px;
  color: #475569;
  word-break: break-all;
}
.gallery-item .copy {
  margin-top: 6px;
  width: 100%;
}
/* === PC: ヒーローを横に+40%、高さは固定 === */
@media (min-width:1024px){
  /* 今のPC高さに合わせて調整。例: 460〜520px あたり */
  :root{ --hero-h-pc: 460px; }

  /* 1) 横幅を+40%（中央から左右に20%ずつはみ出す） */
  /*   それぞれのページに合わせて広めにセレクタ指定 */
  #mainBanner .hero,
  .container .hero,
  #wrapper .hero{
    width: 140%;
    margin-left: -20%;      /* 左に20%ずらして中央合わせ */
    max-width: 100vw;       /* 画面よりはみ出して横スクロールしない保険 */
  }

  /* 2) 高さは固定（従来の padding-top による比率高さを無効化） */
  .hero .slide{
    height: var(--hero-h-pc);
    padding-top: 0;         /* ← これで高さを“一定”に */
  }
}
<style>
.callout-strong{
  background:#fff7ed;            /* やさしい強調（薄オレンジ） */
  border:2px solid #fdba74;      /* アクセント */
  border-radius:14px;
  padding:18px 18px 14px;
  margin:18px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.callout-strong .lead{
  display:flex; gap:8px; align-items:center;
  font-weight:800; font-size:clamp(16px,2.6vw,20px); color:#7c2d12;
}
.callout-strong .lead .dot{
  width:10px; height:10px; border-radius:50%; background:#fb923c; flex:0 0 auto;
}
.callout-strong p{margin:.45em 0; font-size:clamp(14px,2.2vw,16px); color:#7c2d12;}
.callout-strong .cta-row{ margin-top:8px }
.callout-strong .btn{
  display:inline-block; padding:.65em 1.05em; border-radius:10px;
  background:#0d47a1; color:#fff; font-weight:700; text-decoration:none;
}
.callout-strong .btn:hover{ filter:brightness(.95) }
</style>