/*
Theme Name: Keito WP Theme
*/
:root{
  --brand-orange:#F26531;
  --brand-blue:#0066A4;
  --brand-deep:#004a82;
}

/* ベース */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;color:#0f172a}
a{text-decoration:none}

/* ロゴ（中央上） */
/* 上部中央ロゴ */
.site-header{
  position:fixed;
  left:50%; top:12px; transform:translateX(-50%);
  z-index:100;   /* ヒーロー画像より手前 */
}
.logo{
  color:var(--brand-orange);
  font-weight:800; letter-spacing:.08em;
  font-size:clamp(18px, 2.2vw, 26px);
  text-decoration:none;
}

/* 左メニュー（②オレンジへ変更） */
.side-nav{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column}
.side-nav a{display:flex;align-items:center;gap:6px;color:var(--brand-orange);text-decoration:none;font-size:14px;letter-spacing:.06em;margin:10px 0;opacity:.95}
.side-nav a:hover{opacity:.7}
.side-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand-orange)}

/* セクション共通 */
.fullvh{min-height:100vh;position:relative}
.center{display:grid;place-items:center}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* TOP */
.hero{background:#000;overflow:hidden}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scroll-indicator{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#fff;font-size:12px;letter-spacing:.2em}

/* ABOUT */
#about{background:#fff;color:var(--brand-orange)}
/* === ABOUT セクション調整 === */
/* 見出し：少し小さくして1行で収める（PC時） */
/* ABOUT 見出し：少し大きく（前回より+約15%）＆PCで1行 */
#about .h2{
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.03;
  font-size: clamp(48px, 7.2vw, 108px);  /* ← ほどよい最大値に調整 */
  margin:0;
}
@media (min-width:1024px){
  #about .h2{ white-space:nowrap; }
}
#about .lead{
  color:#111;            /* 本文だけ黒 */
  margin:28px auto 0;    /* 見出しから少し下げる */
  max-width:980px;       /* 横幅を広げて2行前後 */
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.95;
  text-align:center;
}

/* 大きい画面では強制的に1行化（スマホでは折り返しOK） */
@media (min-width: 1024px){
  #about .h2{ white-space: nowrap; }
}

/* 本文：少し下へ、横幅を広げて2行前後で読ませる。色は黒へ。 */
#about .lead{
  color: #111;                     /* ← この段落だけ黒 */
  margin: 28px auto 0;             /* ← 少し下に移動 */
  max-width: 980px;                /* ← 横幅を広げる（2行想定） */
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.95;
  text-align: center;
}
#about .lead{max-width:800px;text-align:center;margin:0 auto}

/* 3. Gallery — 4×2 均等。g1 問題と下段切れを解消 */
#gallery{background:#fff7f3;position:relative;overflow:hidden}
.gallery-grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px;
}
.gallery-item{border-radius:14px;overflow:hidden}
.gallery-item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.gallery-title{position:relative;z-index:10;max-width:720px;padding-left:16px}
.gallery-title h2{color:var(--brand-black);font-weight:800;font-size:clamp(28px,5vw,64px);line-height:1.15}

/* 4. Services（ダーク×カード型、ホバーで拡大） */
#services{background:var(--brand-blue);color:#fff;padding:80px 0}
.services-heading{font-weight:800;letter-spacing:.08em;margin:0 0 48px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1200px;margin:0 auto;padding:0 16px}
.service-card{background:#F26531;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px;transform:translateZ(0);transition:transform .35s ease, box-shadow .35s ease}
.service-card:hover{transform:scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.service-kicker{opacity:.9;font-size:12px;margin-bottom:8px}
.service-title{font-size:22px;margin:0 0 16px;font-weight:800}
.service-media{height:220px;border-radius:12px;overflow:hidden;margin-bottom:16px}
.service-media img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .5s ease}
.service-card:hover .service-media img{transform:scale(1.10)}
.service-list{margin:0 0 12px 16px;padding:0}
.service-list li{margin:6px 0}
.service-cta{display:inline-grid;place-items:center;width:36px;height:36px;background:#fff;color:#000;border-radius:10px;margin-left:auto}
@media (max-width:1024px){ .services-grid{grid-template-columns:1fr} }