:root {
  --ink:#142033;
  --muted:#5b677a;
  --line:#dde3ec;
  --paper:#ffffff;
  --surface:#ffffff;
  --brand:#142b4d;
  --brand-2:#b08a46;
  --accent:#d4b06a;
  --shadow:0 28px 72px rgba(20,32,51,.12);
  --shadow-soft:0 14px 32px rgba(20,32,51,.08);
  --radius:24px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:"Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#faf8f2 0%, #f6f2ea 38%, #ffffff 82%);
  line-height:1.8;
}
a { color:var(--brand); }
.skip-link { position:absolute; left:12px; top:-48px; z-index:10000; padding:10px 14px; border-radius:10px; background:#fff; color:var(--brand); font-weight:900; box-shadow:0 12px 28px rgba(15,23,42,.18); transition:top .15s ease; }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(18px); border-bottom:1px solid rgba(176,138,70,.18); padding:14px 20px; }
.wrap { max-width:1180px; margin:0 auto; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.header-left { display:flex; align-items:center; gap:10px; min-width:120px; text-decoration:none; color:var(--ink); }
.header-logo { display:block; max-width:132px; max-height:76px; object-fit:contain; }
.header-logo.service-logo { width:132px; height:auto; max-height:46px; }
.brand-text { display:grid; gap:2px; max-width:260px; font-family:var(--brand-font-family, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif); font-size:var(--brand-font-size, 20px); font-weight:950; line-height:1.08; letter-spacing:.02em; }
.brand-text span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand { margin:0; font-size:20px; font-weight:900; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0; }
.header-contact { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 14px; font-size:13px; font-weight:800; color:#2b3443; }
.header-contact strong { color:var(--brand); }
.nav { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end; }
.nav a { text-decoration:none; color:#364152; font-weight:700; font-size:14px; }
.nav a:hover { color:var(--brand); }
.header-cta { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 18px; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff !important; box-shadow:0 16px 32px rgba(20,43,77,.18); }
.nav-check { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.nav-toggle { display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 10px 22px rgba(15,23,42,.08); cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2px; margin:5px auto; border-radius:999px; background:var(--brand); }
main { background:transparent; }
section { padding:78px 20px; }
section:nth-of-type(even) { background:rgba(255,255,255,.56); }
.hero { padding:108px 20px 92px; background:radial-gradient(circle at 12% 8%, rgba(212,176,106,.18), transparent 28%), radial-gradient(circle at 88% 12%, rgba(20,43,77,.10), transparent 34%), linear-gradient(135deg,#fffdfa 0%, #f7f2e7 48%, #ffffff 100%); }
.hero-inner { display:grid; grid-template-columns:minmax(420px,1.18fr) minmax(0,.82fr); gap:52px; align-items:center; }
.hero h1 { margin:0; font-size:clamp(42px,6vw,78px); line-height:1.04; font-weight:950; }
.hero p { max-width:720px; font-size:18px; color:#405066; }
.hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.hero-meta li { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.8); font-size:13px; font-weight:700; color:#46556a; }
.header-image, .hero-placeholder { border-radius:32px; overflow:hidden; background:#efe8db; border:1px solid rgba(255,255,255,.95); box-shadow:var(--shadow); }
.header-image { aspect-ratio:16/10; display:grid; place-items:center; }
.header-image img { width:100%; height:100%; max-height:clamp(320px,42vw,560px); object-fit:contain; display:block; background:#f7f4ec; }
.hero-carousel { position:relative; border-radius:32px; overflow:hidden; background:#f7f4ec; border:1px solid rgba(255,255,255,.95); box-shadow:var(--shadow); aspect-ratio:16/10; min-height:320px; max-height:clamp(360px,42vw,580px); }
.hero-carousel img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; animation:heroFade 18s infinite; background:#f7f4ec; }
.hero-carousel img:nth-child(1) { opacity:1; animation-delay:0s; }
.hero-carousel img:nth-child(2) { animation-delay:6s; }
.hero-carousel img:nth-child(3) { animation-delay:12s; }
@keyframes heroFade { 0%, 28% { opacity:1; } 35%, 95% { opacity:0; } 100% { opacity:1; } }
.hero-placeholder { min-height:420px; background:linear-gradient(135deg,#efe7db,#f9f6ef); }
.logo-block img { max-width:184px; max-height:112px; object-fit:contain; display:block; margin:0 0 18px; }
h1 { line-height:1.22; }
h2 { margin:0 0 24px; font-size:clamp(30px,3vw,44px); line-height:1.14; font-weight:900; }
h3 { margin:0 0 10px; font-size:22px; }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.card, .action-panel, .gallery-item, .check-list li, .used-list li, .feature-list li, .flow-list li { background:rgba(255,255,255,.82); border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.card, .action-panel { border-radius:var(--radius); padding:30px; }
.info-list { display:grid; grid-template-columns:170px 1fr; gap:10px 16px; }
.info-list dt { font-weight:800; color:#334155; }
.info-list dd { margin:0; }
.feature-list, .flow-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.feature-list li, .flow-list li { border-radius:22px; padding:24px; }
.eyebrow { display:inline-flex; margin-bottom:14px; padding:6px 12px; border-radius:999px; background:rgba(20,43,77,.08); color:var(--brand); font-size:13px; font-weight:800; letter-spacing:.04em; }
.check-list, .used-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.check-list li, .used-list li { border-radius:18px; padding:14px 16px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 22px; border-radius:999px; border:1px solid var(--brand); text-decoration:none; font-weight:800; box-shadow:0 12px 28px rgba(20,43,77,.12); }
.btn.primary, .cta-reserve, .cta-list { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent; }
.cta-phone { background:#173f82; color:#fff; border-color:#173f82; }
.cta-map { background:#fff; color:var(--brand); }
.action-panel h2 { font-size:24px; margin-bottom:8px; }
.note { color:var(--muted); font-size:14px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.gallery-item { margin:0; border-radius:24px; overflow:hidden; }
.gallery-item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.news-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.news-list li { display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:start; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.86); box-shadow:var(--shadow-soft); }
.news-list time { font-weight:900; color:var(--brand); }
.news-list p { margin:0; color:#405066; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; word-break:break-word; }
.footer { padding:32px 20px 48px; background:#f7f8fb; color:var(--muted); border-top:1px solid var(--line); }
.fixed-cta { display:none; }
.demo-stamp { position:fixed; top:88px; right:18px; z-index:9998; padding:8px 14px; border:4px solid #dc2626; color:#dc2626; background:rgba(255,255,255,.92); font-size:22px; font-weight:950; letter-spacing:.08em; transform:rotate(4deg); pointer-events:none; box-shadow:0 12px 28px rgba(220,38,38,.14); }
.demo-watermark { position:fixed; inset:0; z-index:9997; display:grid; place-items:center; pointer-events:none; color:rgba(220,38,38,.08); font-size:clamp(92px,18vw,260px); font-weight:950; letter-spacing:.08em; transform:rotate(-24deg); user-select:none; }

body.design-standard { --brand:#1f4e8c; --brand-2:#3d74b8; --accent:#7da4da; background:linear-gradient(180deg,#f7fbff 0%, #ffffff 72%); }
body.design-standard .hero { background:radial-gradient(circle at 12% 8%, rgba(61,116,184,.12), transparent 28%), linear-gradient(135deg,#ffffff,#eef5ff 58%,#ffffff 100%); }
body.design-standard .card, body.design-standard .action-panel { background:#ffffff; }

body.design-simple { --brand:#202938; --brand-2:#4b5563; --accent:#94a3b8; --shadow:0 12px 30px rgba(15,23,42,.06); --shadow-soft:0 8px 18px rgba(15,23,42,.04); --radius:18px; background:#ffffff; }
body.design-simple .hero { background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%); padding:88px 20px 72px; }
body.design-simple .hero-inner { grid-template-columns:minmax(0,1fr); }
body.design-simple .header-image, body.design-simple .hero-placeholder { border-radius:22px; box-shadow:var(--shadow-soft); }
body.design-simple .card, body.design-simple .action-panel { background:#ffffff; border-radius:18px; box-shadow:var(--shadow-soft); }
body.design-simple .feature-list, body.design-simple .flow-list, body.design-simple .gallery-grid, body.design-simple .check-list, body.design-simple .used-list { grid-template-columns:1fr; }
body.design-simple .btn { box-shadow:none; }

body.design-warm, body.design-modern { background:inherit; }
body.design-warm .hero, body.design-modern .hero { background:inherit; }
body.design-warm .card, body.design-modern .card, body.design-warm .action-panel, body.design-modern .action-panel { background:rgba(255,255,255,.82); }

body.layout-a-official-aeo .hero { padding:82px 20px 64px; background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); }
body.layout-a-official-aeo .hero-inner { grid-template-columns:minmax(0,1fr); gap:28px; }
body.layout-a-official-aeo .hero-visual { order:2; max-width:860px; }
body.layout-a-official-aeo .hero-copy { order:1; max-width:920px; }
body.layout-a-official-aeo .hero h1 { font-size:clamp(36px,4.6vw,62px); }
body.layout-a-official-aeo .action-panel { border-left:5px solid var(--brand); }

body.layout-b-readable-lp { --radius:20px; }
body.layout-b-readable-lp section { padding:62px 20px; }
body.layout-b-readable-lp .hero-inner { grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr); gap:34px; }
body.layout-b-readable-lp .card, body.layout-b-readable-lp .action-panel { box-shadow:none; border-color:#dbe4f0; }
body.layout-b-readable-lp h2 { font-size:clamp(26px,2.6vw,38px); }

body.layout-c-premium-ai { --brand:#18233f; --brand-2:#b08a46; --accent:#d6b86a; background:linear-gradient(180deg,#fffaf0 0%,#ffffff 58%,#f6f8fb 100%); }
body.layout-c-premium-ai .hero { padding:122px 20px 100px; background:radial-gradient(circle at 18% 8%,rgba(176,138,70,.22),transparent 32%),linear-gradient(135deg,#fffaf0,#ffffff 56%,#eef3f8); }
body.layout-c-premium-ai .hero-inner { grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr); }
body.layout-c-premium-ai .hero-visual { order:2; }
body.layout-c-premium-ai .hero-copy { order:1; }
body.layout-c-premium-ai .header-image, body.layout-c-premium-ai .hero-carousel { border-radius:8px; }
body.layout-c-premium-ai .gallery-grid { grid-template-columns:1.2fr .9fr .9fr; }

body.layout-d-inquiry-focus .hero { padding:86px 20px 74px; background:linear-gradient(135deg,#ffffff,#eef5ff 60%,#ffffff); }
body.layout-d-inquiry-focus .hero-inner { grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); }
body.layout-d-inquiry-focus .hero-copy .action-panel { background:#102a56; color:#fff; border-color:#102a56; }
body.layout-d-inquiry-focus .hero-copy .action-panel .note { color:rgba(255,255,255,.82); }
body.layout-d-inquiry-focus .hero-copy .action-panel .btn { background:#fff; color:#102a56; border-color:#fff; }
body.layout-d-inquiry-focus .fixed-cta { display:flex; }

@media (max-width: 980px) {
  .site-header { padding:10px 14px; }
  .site-header .wrap { position:relative; flex-direction:row; align-items:center; gap:12px; min-height:50px; }
  .header-left { flex:1; min-width:0; }
  .header-logo { max-width:116px; max-height:56px; }
  .header-logo.service-logo { width:116px; max-height:40px; }
  .brand-text { max-width:160px; font-size:calc(var(--brand-font-size, 20px) * .86); }
  .brand { font-size:17px; }
  .nav-toggle { display:grid; place-content:center; flex:0 0 auto; margin-left:auto; }
  .nav-check:focus-visible + .nav-toggle { outline:3px solid rgba(20,43,77,.25); outline-offset:3px; }
  .header-right { display:none; position:absolute; top:calc(100% + 10px); right:0; left:auto; width:min(360px, calc(100vw - 28px)); align-items:stretch; gap:12px; padding:14px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 18px 42px rgba(15,23,42,.16); }
  .nav-check:checked ~ .header-right { display:flex; }
  .header-contact { justify-content:flex-start; gap:6px 10px; font-size:12px; }
  .header-contact span { display:none; }
  .header-contact span:first-child, .header-contact span:nth-child(4) { display:inline-flex; }
  .nav { display:grid; grid-template-columns:1fr; gap:6px; justify-content:stretch; width:100%; }
  .nav a { display:flex; align-items:center; min-height:44px; padding:8px 10px; border-radius:10px; background:#f8fafc; font-size:15px; }
  .nav .header-cta { min-height:46px; margin-top:4px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff !important; }
  .hero-inner, .grid, .info-list, .check-list, .used-list, .gallery-grid, .feature-list, .flow-list { grid-template-columns:1fr; }
  .news-list li { grid-template-columns:1fr; gap:6px; }
  .hero { padding:64px 18px 54px; }
  .hero p { font-size:16px; }
  .header-image, .hero-carousel, .hero-placeholder { min-height:260px; max-height:none; }
  .header-image img { height:100%; min-height:260px; }
  .btn { width:100%; }
  body { padding-bottom:88px; }
  .fixed-cta { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; gap:8px; padding:10px; background:rgba(255,255,255,.96); border-top:1px solid var(--line); box-shadow:0 -8px 20px rgba(15,23,42,.10); }
  .fixed-cta .btn { min-height:46px; font-size:14px; padding:8px 10px; }
  .demo-stamp { top:70px; right:12px; padding:6px 10px; border-width:3px; font-size:17px; }
}