/**
 * base.css — XiADEN リセット・レイアウト・共通コンポーネント
 * 元ファイル: company_top_D4_28_fresh.html <style> lines 83-215, 1530-1598
 */

/* ── Reset + Base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Noto Sans JP','Meiryo',sans-serif;
  color:var(--tx); background:var(--w);
  line-height:var(--lh); -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
ul, ol { list-style:none; }

/* ── Layout Utilities ── */
.si {
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--sp48);
}
.sec-pad     { padding:var(--sp96) 0; }
.sec-pad-md  { padding:var(--sp64) 0; }
.sec-pad-sm  { padding:var(--sp48) 0; }

/* ── Section Header ── */
.sec-hd { text-align:center; margin-bottom:var(--sp64); }
.sec-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--f-xs); font-weight:700; letter-spacing:.18em;
  color:var(--txl); margin-bottom:var(--sp12); text-transform:uppercase;
}
.sec-eyebrow::before, .sec-eyebrow::after {
  content:''; display:inline-block; width:24px; height:2px;
  background:var(--or); border-radius:2px;
}
.sec-title {
  font-size:var(--f-h2); font-weight:900; color:var(--n);
  line-height:1.38; margin-bottom:var(--sp12);
}
.sec-desc {
  font-size:var(--f-body); color:var(--txm);
  max-width:500px; margin:0 auto; line-height:1.88;
}

/* ── Buttons ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--or); color:var(--w);
  font-size:15px; font-weight:700; padding:16px 36px;
  border-radius:var(--rf); box-shadow:0 5px 20px rgba(232,120,12,.36);
  transition:filter .15s, transform .15s, box-shadow .2s;
}
.btn-primary:hover {
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 7px 26px rgba(232,120,12,.46);
}
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--n);
  font-size:15px; font-weight:600; padding:15px 30px;
  border-radius:var(--rf); border:1.5px solid var(--bm);
  transition:background .15s, border-color .15s;
}
.btn-outline:hover { background:var(--b); border-color:var(--n); }
.btn-sub {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--n);
  font-size:13px; font-weight:700; padding:11px 24px;
  border-radius:var(--rf); border:1.5px solid var(--bm);
  transition:background .15s, border-color .15s;
}
.btn-sub:hover { background:var(--b); border-color:var(--n); }
.btn-brand {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--w); color:var(--n);
  font-size:15px; font-weight:700; padding:15px 32px;
  border-radius:var(--rf);
  box-shadow:0 4px 22px rgba(0,0,0,.26);
  transition:filter .15s, transform .15s;
}
.btn-brand:hover { filter:brightness(.95); transform:translateY(-1px); }
.btn-ghost-dark {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:rgba(255,255,255,.82);
  font-size:15px; font-weight:600; padding:14px 28px;
  border-radius:var(--rf); border:1.5px solid rgba(255,255,255,.28);
  transition:border-color .15s, background .15s, color .15s;
}
.btn-ghost-dark:hover {
  border-color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.08);
  color:var(--w);
}

/* ── Icon Wrap (SVG台座) ── */
.icon-wrap {
  display:flex; align-items:center; justify-content:center;
  background:var(--b); border:1px solid var(--bm); border-radius:12px;
  flex-shrink:0; color:var(--n);
}
.icon-wrap--sm  { width:36px; height:36px; border-radius:8px; }
.icon-wrap--md  { width:48px; height:48px; border-radius:11px; }
.icon-wrap--lg  { width:56px; height:56px; border-radius:14px; }
.icon-wrap--xl  { width:64px; height:64px; border-radius:16px; }
.icon-wrap--circle { border-radius:50%; }
.icon-wrap--navy   { background:var(--n); border-color:var(--n); color:var(--w); }
.icon-wrap--orange { background:rgba(232,120,12,.1); border-color:rgba(232,120,12,.22); color:var(--or); }

/* ── Service Image Icon ── */
.svc-icon-img { width:56px; height:56px; flex-shrink:0; }
.svc-icon-img img {
  width:100%; height:100%; object-fit:contain; display:block;
  mix-blend-mode:multiply;
}
.svc-icon-img--light img { mix-blend-mode:normal; }

/* ── Trust Check Badge ── */
.trust-check {
  width:18px; height:18px; background:var(--gn); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--w);
}

/* ── Arrow Link ── */
.arrow-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--f-sm); font-weight:700; color:var(--or);
  transition:gap .15s;
}
.arrow-link:hover { gap:8px; }

/* ── Scroll Animation (.rv-fade) ── */
.rv-fade {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease, transform .65s ease;
}
.rv-fade.is-visible {
  opacity:1;
  transform:translateY(0);
}

/* ── Section helpers ── */
.sp-only { display:none; }
@media (max-width:768px) {
  .sp-only  { display:inline; }
  .pc-only  { display:none; }
}

/* ── Page Hero (generic page.php) ── */
.s-page-hero {
  background:var(--bs); border-bottom:1px solid var(--bm); padding:var(--sp64) 0 var(--sp48);
}
.page-hero-title {
  font-size:var(--f-h2); font-weight:900; color:var(--n); line-height:1.38;
}
.page-content {
  font-size:var(--f-body); color:var(--txm); line-height:var(--lh);
  max-width:860px;
}
.page-content h2 { font-size:clamp(18px,2vw,24px); font-weight:700; color:var(--n); margin:var(--sp32) 0 var(--sp16); }
.page-content h3 { font-size:var(--f-h3); font-weight:700; color:var(--n); margin:var(--sp24) 0 var(--sp12); }
.page-content p  { margin-bottom:var(--sp16); }
.page-content ul, .page-content ol { padding-left:1.5em; margin-bottom:var(--sp16); }
.page-content li { margin-bottom:var(--sp8); }

/* ── Generic Bottom CTA (shared across pages) ── */
.s-bottom-cta {
  background:linear-gradient(155deg,#1d3a5a 0%,#192e4c 45%,#102540 100%);
  padding:var(--sp96) 0;
}
.bottom-cta-inner {
  text-align:center; max-width:640px; margin:0 auto; padding:0 var(--sp48);
}
.bottom-cta-h2 {
  font-size:clamp(20px,3vw,30px); font-weight:900; color:var(--w);
  line-height:1.42; margin-bottom:var(--sp16);
}
.bottom-cta-desc {
  font-size:var(--f-body); color:rgba(255,255,255,.72);
  line-height:1.85; margin-bottom:var(--sp32);
}
.bottom-cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--or); color:var(--w);
  font-size:16px; font-weight:700; padding:18px 44px;
  border-radius:var(--rf); box-shadow:0 6px 24px rgba(232,120,12,.4);
  transition:filter .15s, transform .15s;
}
.bottom-cta-btn:hover { filter:brightness(1.08); transform:translateY(-2px); }

/* ── Blog / Article CTA ── */
.s-blog-cta {
  background:var(--b); border-top:1px solid var(--bm); padding:var(--sp64) 0;
}
.blog-cta-inner {
  text-align:center; max-width:560px; margin:0 auto; padding:0 20px;
}
.blog-cta-h2 {
  font-size:clamp(18px,2.4vw,24px); font-weight:900; color:var(--n);
  margin-bottom:var(--sp12);
}
.blog-cta-desc {
  font-size:var(--f-sm); color:var(--txm); margin-bottom:var(--sp24); line-height:1.78;
}
.blog-cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--or); color:var(--w);
  font-size:14px; font-weight:700; padding:14px 32px;
  border-radius:var(--rf); box-shadow:0 4px 16px rgba(232,120,12,.36);
  transition:filter .15s, transform .15s;
}
.blog-cta-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* ── Contact/Form共通 ── */
.form-layout {
  display:grid; grid-template-columns:1fr 340px; gap:var(--sp48); align-items:start;
}
.form-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r3);
  padding:var(--sp48);
}
.form-card-title {
  font-size:18px; font-weight:700; color:var(--n); margin-bottom:var(--sp32);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp24); }
.form-group { display:flex; flex-direction:column; gap:var(--sp8); margin-bottom:var(--sp24); }
.form-label { font-size:14px; font-weight:700; color:var(--n); }
.form-required {
  font-size:11px; font-weight:700; color:var(--w); background:#c0392b;
  padding:1px 7px; border-radius:3px; margin-left:6px;
}
.form-optional {
  font-size:11px; font-weight:700; color:var(--txl); background:var(--bs);
  padding:1px 7px; border-radius:3px; margin-left:6px;
}
.form-input, .form-select, .form-textarea {
  width:100%; padding:12px 16px; border:1.5px solid var(--bm);
  border-radius:var(--r2); font-size:15px; font-family:inherit; color:var(--tx);
  background:var(--w); appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--nm); box-shadow:0 0 0 3px rgba(42,82,126,.12);
}
.form-textarea { resize:vertical; min-height:140px; line-height:var(--lh); }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236680a0' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.postal-row { display:flex; gap:12px; }
.postal-input { flex:1; }
.postal-btn {
  background:var(--n); color:var(--w); font-size:14px; font-weight:700;
  padding:12px 20px; border-radius:var(--r2); white-space:nowrap;
  transition:background .15s;
}
.postal-btn:hover { background:var(--nm); }
.postal-hint { font-size:12px; color:var(--txl); margin-top:4px; }
.form-agree {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:14px; color:var(--txm);
}
.form-agree input[type="checkbox"] { margin-top:2px; accent-color:var(--or); flex-shrink:0; }
.form-agree a { color:var(--or); text-decoration:underline; }
.form-note { font-size:12px; color:var(--txl); line-height:1.8; }
.form-note li { padding-left:1em; position:relative; }
.form-note li::before { content:'・'; position:absolute; left:0; }
.sidebar-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:var(--sp24); margin-bottom:var(--sp16);
}
.sidebar-card-title {
  font-size:12px; font-weight:700; color:var(--txl); letter-spacing:.1em;
  margin-bottom:var(--sp12);
}
.form-sidebar { display:flex; flex-direction:column; gap:var(--sp16); }

/* Thanks page */
.s-thanks { padding:var(--sp96) 0; background:var(--bs); min-height:60vh; display:flex; align-items:center; justify-content:center; }
.thanks-inner { max-width:540px; margin:0 auto; text-align:center; padding:0 20px; }
.thanks-icon {
  width:56px; height:56px; background:var(--gn); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp16);
  color:var(--w);
}
.thanks-eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--txl); margin-bottom:var(--sp12); }
.thanks-h1 { font-size:clamp(22px,4vw,32px); font-weight:900; color:var(--n); margin-bottom:var(--sp16); line-height:1.4; }
.thanks-desc { font-size:var(--f-body); color:var(--txm); line-height:1.85; margin-bottom:var(--sp32); }
.thanks-note {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:var(--sp24); margin-bottom:var(--sp32); text-align:left;
}
.thanks-note-title { font-size:13px; font-weight:700; color:var(--n); margin-bottom:var(--sp8); }
.btn-back {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--n); color:var(--w); font-size:15px; font-weight:700;
  padding:16px 36px; border-radius:var(--rf); box-shadow:var(--s2);
  transition:filter .15s, transform .15s;
}
.btn-back:hover { filter:brightness(1.1); transform:translateY(-1px); }

/* ── Privacy Policy ── */
.s-pp-hero { background:var(--n); padding:var(--sp64) 0; text-align:center; }
.pp-hero-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--sp48); }
.pp-eyebrow { display:block; font-size:var(--f-xs); font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.56); margin-bottom:var(--sp12); }
.pp-h1 { font-size:clamp(24px,3.5vw,36px); font-weight:900; color:var(--w); margin-bottom:var(--sp12); }
.pp-last-update { font-size:var(--f-sm); color:rgba(255,255,255,.56); }
.pp-placeholder { font-style:italic; opacity:.6; }
.s-pp-body { padding:var(--sp96) 0; }
.pp-body { max-width:840px; margin:0 auto; padding:0 var(--sp48); }
.pp-section { margin-bottom:var(--sp48); }
.pp-section-title { font-size:clamp(16px,2vw,20px); font-weight:700; color:var(--n); margin-bottom:var(--sp16); padding-bottom:var(--sp12); border-bottom:2px solid var(--bm); }
.pp-text { font-size:var(--f-body); color:var(--txm); line-height:1.92; margin-bottom:var(--sp16); }
.pp-list { padding-left:1.5em; display:flex; flex-direction:column; gap:var(--sp8); margin-bottom:var(--sp16); }
.pp-list li { font-size:var(--f-body); color:var(--txm); line-height:1.75; list-style:disc; }
.pp-contact-box { background:var(--bs); border:1px solid var(--bm); border-radius:var(--r2); padding:var(--sp24); }
.pp-contact-row { display:flex; gap:var(--sp16); padding:var(--sp8) 0; border-bottom:1px solid var(--div); font-size:14px; color:var(--txm); }
.pp-contact-row:last-child { border-bottom:none; }
.pp-contact-label { font-weight:700; color:var(--n); flex-shrink:0; width:80px; }

/* ── Responsive ── */
@media (max-width:1024px) {
  .si { padding:0 var(--sp32); }
}
@media (max-width:768px) {
  :root { --nav-h:60px; }
  .si { padding:0 20px; }
  .sec-pad    { padding:var(--sp64) 0; }
  .sec-pad-md { padding:var(--sp48) 0; }
  .form-layout { grid-template-columns:1fr; }
  .form-card { padding:var(--sp32) 20px; }
  .form-row  { grid-template-columns:1fr; }
  .bottom-cta-inner { padding:0 20px; }
  .pp-body { padding:0 20px; }
}

/* ── Focus visible ── */
a:focus-visible, button:focus-visible {
  outline:2px solid var(--or); outline-offset:3px; border-radius:3px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .rv-fade { opacity:1 !important; transform:none !important; }
}