@charset "UTF-8";

/* =========================================================
   kentoazumi Works – Base Styles
   ========================================================= */
   
/* ========== Core Tokens ========== */
:root{
  --bg:#0a0d12;
  --panel:#0f131a;
  --panel-2:#121825;
  --text:#e8eef6;
  --muted:#a6b0bf;
  --brand:#00A6FE;
  --brand-2:#59C1FF;
  --line:#1f2633;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:16px;
  --wrap:1120px;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.7;
  color:var(--text);
  background:linear-gradient(180deg,#07090d,#0b0f15 30%,#0a0d12);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-top: var(--header-height, 60px); /* fixed header 分 */
}

.container{ width:min(var(--wrap),92%); margin-inline:auto }

/* ========== Header (fixed) ========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background-color:rgba(10,13,18,.7);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; min-height:60px }
.brand{ display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px }
.brand b{ color:var(--brand) }

/* ========== Nav (common) ========== */
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  line-height:1;
  cursor:pointer;
}
.nav-list{
  display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center;
}
.nav-list a{
  color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px;
}
.nav-list a:hover{ background:var(--panel-2) }

/* ========== Mobile Nav (≤ 959px): デフォは“右上ポップアップ箱” ========== */
@media (max-width:959px){
  .site-header{ position:fixed }
  .nav-toggle{ display:inline-block; position:relative; z-index:10010; pointer-events:auto }

  .nav{ position:relative }
  .nav-list{
    position:absolute;
    top:calc(var(--header-height,60px) + 8px);
    right:4%;
    left:auto;
    flex-direction:column;
    gap:8px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    width:min(280px,92%);
    box-shadow:var(--shadow);
    display:none;
    z-index:10000;
    pointer-events:none;
    visibility:hidden;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav-list.open{
    display:flex;
    pointer-events:auto;
    visibility:visible;
    opacity:1;
    transform:translateY(0);
  }

  /* サブメニュー（モバイルはタップで .open） */
  .has-submenu{ width:100% }
  .submenu{
    display:none; list-style:none; padding:6px 8px; margin:6px 0 0;
    border-left:2px solid var(--line);
  }
  .submenu.open{ display:block }
}

/* ========== Desktop Nav (≥ 960px): hover menus ========== */
@media (min-width:960px){
  .submenu{
    position:absolute; top:calc(100% + 8px); left:0; min-width:200px;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:6px; margin:0; list-style:none; box-shadow:var(--shadow);
    display:none;
  }
  .submenu li a{ display:block; padding:10px 12px; border-radius:8px; color:var(--text); text-decoration:none }
  .submenu li a:hover{ background:var(--panel-2) }
  .has-submenu{ position:relative }
  .has-submenu:hover > .submenu{ display:block }
}

/* ========== Submenu Toggle (shared) ========== */
.submenu-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--text); text-decoration:none; cursor:pointer;
}
.submenu-toggle:hover{ background:var(--panel-2) }
.caret{ font-size:12px; opacity:.8 }

/* ========== Buttons ========== */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid transparent }
.btn-primary{ background:linear-gradient(180deg,var(--brand),var(--brand-2)); color:#00121c; box-shadow:0 8px 24px rgba(0,166,254,.28) }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-ghost{ border-color:var(--line); color:var(--text); background:transparent }
.btn-ghost:hover{ background:var(--panel) }
.btn-outline{ border-color:var(--brand); color:var(--text) }
.btn-outline:hover{ background:rgba(0,166,254,.08) }

/* お問い合わせボタン */
.nav .btn.btn-primary.contact-btn{
  background:linear-gradient(180deg,#00A6FE,#29AAFF);
  color:#fff;
  font-weight:700;
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  line-height:1;
  box-shadow:0 6px 16px rgba(0,166,254,.25) inset, 0 2px 6px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.nav .btn.btn-primary.contact-btn:hover,
.nav .btn.btn-primary.contact-btn:focus{
  background:linear-gradient(180deg,#29AAFF,#00A6FE);
  box-shadow:0 6px 16px rgba(0,191,255,.28) inset, 0 4px 10px rgba(0,0,0,.3);
  transform:translateY(-1px);
}

/* ========== Home hero etc. ========== */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.hero-inner{ padding:80px 0 64px }
.hero h1{ font-size:clamp(28px,4vw,44px); line-height:1.25; margin:0 0 12px }
.hero .lead{ color:var(--muted); font-size:clamp(15px,2.2vw,18px); margin:0 0 24px }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap }
.hero-bg{
  position:absolute; inset:auto -20% -30% -20%; height:42vh; pointer-events:none;
  background:
    radial-gradient(60vh 60vh at 60% 40%, rgba(0,166,254,.18), transparent 60%),
    radial-gradient(40vh 40vh at 20% 70%, rgba(89,193,255,.15), transparent 60%);
  filter:blur(30px);
}
@media (min-width:900px){ .br-md{ display:none } }

/* ========== Sections / Cards / Grids ========== */
.section{ padding:64px 0; border-top:1px solid var(--line) }
.section.alt{ background:linear-gradient(180deg,#0b0f15,#0c1118) }
.section-title{ font-size:clamp(22px,3vw,28px); margin:0 0 20px; letter-spacing:.3px }

.grid{ display:grid; gap:18px }
.cards-3{ grid-template-columns:repeat(1,1fr) }
@media (min-width:720px){ .cards-3{ grid-template-columns:repeat(3,1fr) } }

.card{
  background:linear-gradient(180deg,#0e131b,#0c1118);
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.card h3{ margin:0 0 8px; font-size:18px }
.card p{ margin:0 0 10px; color:var(--muted) }

/* ========== Plans ========== */
.plan{text-align:left}
.plan .price{ font-size:28px; font-weight:700; margin:6px 0 10px }
.plan .price span{ font-size:16px; font-weight:600; opacity:.9 }
.plan .unit{ font-size:14px; color:var(--muted) }
.plan .btn{ margin-top:8px }
.plan.featured{ position:relative; outline:2px solid rgba(0,166,254,.35) }
.plan .badge{
  position:absolute; top:12px; right:12px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#00121c; font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px;
}

/* ========== Cases / News ========== */
.cases{ grid-template-columns:repeat(1,1fr) }
@media (min-width:720px){ .cases{ grid-template-columns:repeat(3,1fr) } }
.case{ background:linear-gradient(180deg,#101723,#0e1420); border:1px dashed var(--line); border-radius:var(--radius); padding:16px }

.news-list{ list-style:none; padding:0; margin:0 }
.news-list li{ display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line) }
.news-list time{ color:var(--muted); min-width:100px }

/* ========== About ========== */
.about dl{
  display:grid; grid-template-columns:220px 1fr; gap:12px 20px;
  margin:0; padding:24px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)
}
.about dt{ margin:0; color:var(--muted); font-weight:600; letter-spacing:.02em; align-self:center }
.about dd{ margin:0; color:var(--text); line-height:1.8 }
.about dt, .about dd{ position:relative; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.about dl > dt:last-of-type, .about dl > dt:last-of-type + dd{ border-bottom:none }

.about a, .about a[href^="mailto:"]{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.25);
  transition:color .25s ease, border-color .25s ease;
}
.about a:hover, .about a[href^="mailto:"]:hover{ color:var(--brand); border-color:var(--brand) }

@media (max-width:720px){
  .about dl{ grid-template-columns:1fr; padding:16px }
  .about dt{ padding-bottom:4px; border-bottom:none }
  .about dd{ padding-top:0; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.06) }
  .about dl > dd:last-child{ border-bottom:none }
}

/* ========== Contact / Forms ========== */
.section-contact{
  background:
    radial-gradient(60vh 60vh at 80% -10%, rgba(0,166,254,.12), transparent 60%),
    linear-gradient(180deg,#0b0f15,#0b0f15);
}
.contact-form{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.form-grid{ grid-template-columns:1fr 1fr }
.form-grid .full{ grid-column:1/-1 }
label{ display:grid; gap:8px; font-weight:600 }

/* 共通フィールド（input / textarea / select） */
input, textarea, select{
  width:100%;
  background:#0b1017;
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 12px;
  border-radius:12px;
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,166,254,.18);
}

/* 件名だけ幅を短めに制御 */
#subject{
  width:100%;
  max-width:480px;   /* ←好みに応じて400～480pxで調整 */
  display:block;
}

.req{
  margin-left:8px;
  font-size:12px;
  color:#00121c;
  background:var(--brand);
  padding:2px 6px;
  border-radius:999px;
  vertical-align:middle;
}
.form-note{
  color:var(--muted);
  font-size:13px;
  margin-top:10px;
}

.label-title{ display:inline-flex; align-items:center; gap:6px }
.req.sm{ font-size:.7rem; padding:1px 6px }
.req.lg{ font-size:.85rem; padding:3px 10px }


/* ========== Footer ========== */
.site-footer{ border-top:1px solid var(--line); background:#0b0f15; padding:24px 0; text-align:center }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:8px }
.copy, .site-footer .footer-copy{ margin:0; color:var(--muted); font-size:.9rem }
.footer-links{ display:flex; gap:14px; list-style:none; margin:0; padding:0 }
.footer-links a{ color:var(--muted); text-decoration:none }
.footer-links a:hover{ color:var(--text) }

.logo-icon{ width:1.2em; height:1.2em; vertical-align:middle; margin-right:.4em }

/* ========== Bullet kill switch ========== */
ul.list, .list, .list li, .card ul, .card ul li{
  list-style:none !important; list-style-type:none !important;
  padding-left:0 !important; margin-left:0 !important;
}
.list li::marker{ content:"" !important }

/* ========== Related companies ========== */
.related-companies{ padding:40px 0; background:#0e0e0e }
.related-companies .section-title{ font-size:1.8rem; font-weight:700; color:#fff; margin-bottom:20px; display:inline-block }

.related-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
@media (max-width:768px){ .related-list{ grid-template-columns:1fr } }

.related-card{
  background:#111; border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.related-card:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.35); border-color:rgba(0,166,254,.35) }

.related-card > a{ display:flex; align-items:center; gap:18px; padding:16px 18px; color:inherit; text-decoration:none }
.logo-lockup{ width:92px; height:auto; flex-shrink:0; transition:transform .28s ease, box-shadow .28s ease; border-radius:8px }
.related-card:hover .logo-lockup{ transform:scale(1.06); box-shadow:0 6px 16px rgba(0,166,254,.3) }

.related-info h3{ margin:0 0 6px; font-size:1.22rem; color:#2196F3 }
.related-info p{ margin:0; font-size:.95rem; color:#cfcfcf }
.related-info a{ color:#2196F3; text-decoration:none }
.related-info a:hover{ text-decoration:underline }
.related-info a:visited{ color:#2196F3 }

/* ========== PRIVACY PAGE ONLY (#privacy-policy) ========== */
#privacy-policy .page-hero--policy{
  position:relative;
  padding:88px 0 64px;
  color:#fff;
  background:
    radial-gradient(1200px 600px at 20% 80%, #0e2b3d 0%, transparent 60%),
    radial-gradient(900px 520px at 85% -20%, rgba(0,166,254,.25) 0%,透明 70%),
    linear-gradient(180deg,#0a0f16 0%, #070b11 100%);
  overflow:hidden;
}
#privacy-policy .page-hero--policy::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 -80px 120px rgba(0,0,0,.35), inset 0 60px 120px rgba(0,0,0,.25);
  pointer-events:none;
}
#privacy-policy .page-hero--policy .page-hero-inner{
  width:min(var(--wrap), calc(100% - 32px)); margin:0 auto;
}
#privacy-policy .page-hero--policy h1{
  fontサイズ:clamp(32px,6vw,56px); font-weight:800; letter-spacing:.02em;
  line-height:1.15; margin:0 0 12px; text-shadow:0 6px 24px rgba(0,0,0,.35);
}
#privacy-policy .page-hero--policy .page-hero-sub{
  fontサイズ:clamp(15px,1.8vw,20px); color:rgba(255,255,255,.78); margin:0; line-height:1.8;
}

/* 万一ヘッダー装飾があってもクリックを通す */
.site-header::before,
.site-header::after,
.header-inner::before,
.header-inner::after { pointer-events: none }

/* =========================================================
   Overlay（全画面メニュー）— モバイル時の正規版
   ========================================================= */
@media (max-width:959px){
  .site-header .nav.nav--overlay .nav-list{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    padding: calc(var(--header-height,60px) + 16px) 20px 28px !important;
    background: rgba(10,13,18,.96) !important;
    backdrop-filter: saturate(160%) blur(6px);
    border: none !important; border-radius: 0 !important; box-shadow: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    z-index: 10000 !important;

    pointer-events: none; visibility: hidden; opacity: 0;
    transition: opacity .22s ease, visibility .22s ease;
  }
  .site-header .nav.nav--overlay .nav-list.open{
    pointer-events: auto; visibility: visible; opacity: 1;
  }

  .site-header .nav.nav--overlay .nav-list > li{
    width: min(600px, 92vw);
  }

  .site-header .nav.nav--overlay .nav-list a,
  .site-header .nav.nav--overlay .submenu-toggle{
    display: flex !important;
    align-items: center; justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 14px 18px !important;
    fontサイズ: 1.1rem !important;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color:#EAF3FF !important;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }

  .site-header .nav.nav--overlay .submenu{ padding:6px 0 0 !important; border-left:0 !important }
  .site-header .nav.nav--overlay .submenu li a{ font-weight:600; opacity:.95 }

  body.menu-open{ overflow:hidden }
}

/* =========================================================
   ANYWIDTH FORCE OVERLAY PATCH（幅条件に関係なく強制全画面）
   — nav がどこにあっても/PC幅でも .open なら全画面化 —
   ========================================================= */
.nav.nav--overlay .nav-list{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important;
  padding: calc(var(--header-height,60px) + 16px) 20px 28px !important;
  background: rgba(10,13,18,.96) !important;
  backdrop-filter: saturate(160%) blur(6px);
  border: none !important; border-radius: 0 !important; box-shadow: none !important;

  display: none !important;             /* 初期は非表示 */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  z-index: 10000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.nav.nav--overlay .nav-list.open{
  display: flex !important;             /* OPEN時のみ表示 */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.nav.nav--overlay .nav-list > li{
  width: min(600px, 92vw) !important;
}
.nav.nav--overlay .nav-list a,
.nav.nav--overlay .submenu-toggle{
  display: flex !important;
  align-items: center; justify-content: center;
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  fontサイズ: 1.1rem !important; font-weight: 700 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color:#EAF3FF !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:14px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.25) !important;
}

/* =========================================================
   Overlay 帯化防止 最小パッチ
   ========================================================= */
@media (max-width:959px){
  .nav.nav--overlay .nav-list,
  .nav.nav--overlay .nav-list.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    transform: none !important;
  }
}

/* =========================================================
   ULTRA BAND-KILLER：どんな ul.nav-list でも強制フル幅
   ========================================================= */
@media (max-width:959px){
  ul.nav-list,
  ul.nav-list.open,
  nav ul,
  .nav ul {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;

    transform: none !important;
    z-index: 9999 !important;
  }
}
/* =========================================================
   Overlay 帯化ストッパー（nav--overlay 付いてなくても効く）
   ========================================================= */
@media (max-width:959px){
  ul.nav-list,
  ul.nav-list.open {
    position: fixed !important;
    top: var(--header-height, 60px) !important; /* ヘッダーの下から出す */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 900 !important; /* ヘッダーより下にする */
  }
}

/* =========================================================
   Overlay 読みやすさパッチ：不透明背景＋スクロール
   ========================================================= */
@media (max-width:959px){
  /* 全画面になってる ul.nav-list に背景だけ付与（ヘッダーは見えるまま） */
  ul.nav-list,
  ul.nav-list.open{
    background: #0a0d12 !important;                  /* 透けない濃色 */
    backdrop-filter: none !important;                 /* ぼかし無効（任意） */
    overflow-y: auto !important;                      /* メニューが長い時スクロール */
    -webkit-overflow-scrolling: touch;                /* iOS慣性スクロール */
    padding: 16px 16px 24px !important;               /* 余白少しだけ */
  }

  /* 中央レーン（見た目は今のまま、幅だけ寄せる） */
  ul.nav-list > li{
    width: min(600px, 92vw) !important;
    margin: 0 auto 12px !important;
  }

/* =========================================================
   Overlay 最終調整：リスト全体を確実に縦スクロール表示
   ========================================================= */
@media (max-width:959px){
  ul.nav-list,
  ul.nav-list.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    position: fixed !important;
    top: var(--header-height, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: calc(100vh - var(--header-height,60px)) !important;

    overflow-y: auto !important;      /* 縦スクロール可 */
    -webkit-overflow-scrolling: touch !important;

    background: #0a0d12 !important;   /* 見やすい背景 */
    z-index: 9999 !important;
  }

  ul.nav-list > li {
    flex: 0 0 auto;                   /* アイテムごとに高さ確保 */
    margin: 0 !important;
  }

  ul.nav-list a {
    display: block !important;
    width: 100% !important;
  }
}

/* =========================================================
   ▼▼▼ 追記：サブメニューを“全部”下に出すグローバル上書き ▼▼▼
   （既存は変更せず、最後に置いて挙動だけ差し替え）
   ========================================================= */

/* 位置決めを通常フローへ（モバイル/デスクトップ共通） */
.nav .nav-list li > .submenu,
.nav .nav-list li > .sub-menu{
  position: static !important;           /* 絶対配置をやめる */
  top: auto !important; left: auto !important;
  min-width: 0 !important;
  margin: 8px 0 0 !important;
  padding: 6px 8px !important;
  list-style: none;
  background: transparent !important;
  border: 0 !important;                  /* ボックス見た目は消す */
  box-shadow: none !important;
  display: none;                          /* 初期は閉じる */
}

/* インデントの視覚だけ残したい場合の縦線（好みで） */
.nav .nav-list li > .submenu,
.nav .nav-list li > .sub-menu{
  border-left: 2px solid var(--line) !important;
}

/* 開く条件（クリックで .open、または hover でもOK） */
.nav .nav-list li.open > .submenu,
.nav .nav-list li.open > .sub-menu{
  display: block !important;
}

/* デスクトップの hover でも下に展開（ボックス重なりなし） */
@media (min-width:960px){
  .nav .nav-list li.has-submenu:hover > .submenu,
  .nav .nav-list li.has-submenu:hover > .sub-menu{
    display: block !important;
  }
}
/* ▲▲▲ 追記ここまで ▲▲▲ */


/* =========================================
   お問い合わせフォーム：モバイル快適＆PC 2カラム
   ※ そのまま追記OK（既存スタイルは壊さない）
   ========================================= */

/* フォーム全体のレイアウト */
.section-contact .contact-form{
  display: grid;
  grid-template-columns: 1fr;          /* スマホは1列 */
  gap: 16px 20px;                      /* 行間・列間 */
  width: min(92%, 720px);              /* スマホは少し縮めて中央寄せ */
  margin: 0 auto;
}

/* 「1フィールド＝1ブロック」に見えるように、フォーム直下の子に共通パディング */
.section-contact .contact-form > *{
  display: block;
}

/* ラベルと入力の間隔が詰まってる場合の保険 */
.section-contact .contact-form label{
  display:block;
  margin-bottom: .6rem;
  font-weight: 600;
  line-height: 1.3;
}

/* iOSの勝手ズーム防止＋タップしやすい高さ */
.section-contact .contact-form input,
.section-contact .contact-form select,
.section-contact .contact-form textarea{
  width: 100%;
  font-size: 16px;                     /* iOSズーム防止 */
  min-height: 48px;                    /* 指でタップしやすい */
  padding: 12px 14px;
  border:1px solid var(--line, #1f2633);
  background: var(--panel-2, #121825);
  color: var(--text, #e8eef6);
  border-radius: var(--radius, 16px);
  outline: none;
  box-sizing: border-box;
}

/* フォーカスリングはっきり */
.section-contact .contact-form input:focus,
.section-contact .contact-form select:focus,
.section-contact .contact-form textarea:focus{
  border-color: var(--brand, #00A6FE);
  box-shadow: 0 0 0 3px rgba(0,166,254,.18);
}

/* select の押しやすさUP（右側に余裕） */
.section-contact .contact-form select{
  appearance: none;
  padding-right: 42px;
}

/* テキストエリアは行間ゆったり */
.section-contact .contact-form textarea{
  line-height: 1.6;
  min-height: 160px; /* ここは好みで */
}

/* ボタン行（フォーム直下 .actions を想定） */
.section-contact .contact-form .actions{
  display:flex;
  gap:.8rem;
  justify-content: space-between;   /* 左：リセット／右：送信 */
  grid-column: 1 / -1;              /* 常に全幅扱い */
  margin-top: .5rem;
}
.section-contact .contact-form .btn{
  min-height: 48px;
  padding: 12px 16px;
  font-weight: 700;
  border-radius: var(--radius, 16px);
  border:1px solid transparent;
  cursor:pointer;
}
.section-contact .contact-form .btn--primary{
  background: var(--brand, #00A6FE);
  color:#041019;
}
.section-contact .contact-form .btn--ghost{
  background: transparent;
  border-color: var(--line, #1f2633);
  color: var(--text, #e8eef6);
}

/* ===== ここからPC（横2カラム） ===== */
@media (min-width: 960px){
  .section-contact .contact-form{
    grid-template-columns: 1fr 1fr;    /* 2列 */
    width: min(100%, var(--wrap, 1120px));
  }

  /* 全幅にしたい要素（textarea/セレクトや大きい項目）は列をまたぐ */
  .section-contact .contact-form textarea,
  .section-contact .contact-form .field--full,
  .section-contact .contact-form .row--full,
  .section-contact .contact-form .full,
  .section-contact .contact-form [data-full],
  /* よくある名前に対応（subject, message など） */
  .section-contact .contact-form [name="subject"],
  .section-contact .contact-form [name="message"],
  .section-contact .contact-form #subject,
  .section-contact .contact-form #message{
    grid-column: 1 / -1;              /* 全幅 */
  }

  /* ボタン行も全幅 */
  .section-contact .contact-form .actions{
    grid-column: 1 / -1;
  }
}

@media (max-width: 959px){
  .section-contact{
    margin-top: 2.5rem; /* スマホではタイトルとの間をしっかり広げる */
  }
}