:root{--red:#e54848;--red-dark:#c92a2a;--blue:#0e5370;--black:#202124;--text:#333;--muted:#666;--line:#e8e8e8;--bg:#fff;--soft:#fff7f6;--soft2:#f7f9fc;--max:1200px;--radius:18px;--shadow:0 12px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--text);line-height:1.8;background:#fff}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #eee}
.header-inner{max-width:var(--max);margin:auto;padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:flex-end;font-weight:900;font-size:34px;letter-spacing:-1.5px;color:#111;line-height:1}
.logo .i{position:relative;display:inline-block} .logo .i:before{content:"";position:absolute;left:50%;top:-.30em;transform:translateX(-50%);width:.34em;height:.34em;border-radius:50%;background:#e60012}
.header-copy{font-size:14px;color:var(--muted);margin-right:auto}
.header-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:11px 18px;font-weight:800;font-size:14px}
.header-btn.outline{border:1.5px solid var(--red);color:var(--red)}
.header-btn.fill{background:var(--red);color:#fff}
.wrap{max-width:var(--max);margin:auto;padding:0 20px}
.hero{background:linear-gradient(135deg,#fff 0%,#fff7f6 48%,#fff 100%);padding:36px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.kicker{display:inline-flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.kicker span{background:#fff;border:1px solid #f0c6c1;color:var(--red-dark);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800}
.hero h1{font-size:clamp(32px,4vw,54px);line-height:1.18;margin:0 0 16px;color:#111;letter-spacing:-.02em}
.hero p.lead{font-size:17px;color:#444;margin:0 0 24px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 18px}
.note{display:flex;gap:14px;flex-wrap:wrap;color:#555;font-size:14px}
.note b{color:#111}
.visual-card{background:#fff;border:1px solid #eee;border-radius:24px;box-shadow:var(--shadow);padding:16px}
.hero-visual{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:14px}
.hero-visual .big{grid-row:1 / span 2}
.hero-visual figure,.gallery-grid figure,.sample-grid figure,.spec-grid figure,.detail-split figure{margin:0;position:relative;overflow:hidden;border-radius:18px;background:#fafafa;border:1px solid #eee}
.hero-visual img,.gallery-grid img,.sample-grid img,.detail-split img{width:100%;height:100%;object-fit:cover}
 figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#333}
section{padding:64px 0;border-top:1px solid #f0f0f0}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.25;color:#111}
.section-head p{margin:0;color:#666;max-width:760px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.info-card{background:#fff;border:1px solid #ececec;border-radius:20px;padding:24px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.info-card .num{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:#fff2f1;color:var(--red);font-weight:900;margin-bottom:12px}
.info-card h3{margin:0 0 8px;font-size:21px;line-height:1.35;color:#111}
.info-card p{margin:0;color:#666;font-size:15px}
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.use-card{background:var(--soft2);border:1px solid #e7edf5;border-radius:20px;padding:24px}
.use-card h3{margin:0 0 10px;font-size:22px;color:#111}
.use-card p{margin:0;color:#666}
.sample-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sample-grid figure{display:flex;align-items:center;justify-content:center;max-height:none;min-height:0;padding:14px;background:#fff}
.sample-grid img{width:auto;max-width:100%;height:auto;max-height:400px;object-fit:contain;background:#fff;margin:auto}
.stack{display:grid;gap:14px;align-content:start}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.04em;color:#0e5370;background:#eaf6fb;border-radius:999px;padding:6px 10px;margin-bottom:10px}
.detail-split{display:grid;grid-template-columns:1.08fr .92fr;gap:16px;align-items:start}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.gallery-grid .wide{grid-column:1 / -1}
.spec-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:18px;align-items:start}
.spec-card{background:#fff;border:1px solid #ececec;border-radius:22px;padding:24px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{padding:14px 12px;border-bottom:1px solid #ebebeb;vertical-align:top}
.spec-table th{width:34%;text-align:left;color:#444;font-weight:800;background:#fafafa}
.spec-table td{color:#333}
.bullet-box{margin-top:18px;padding:20px;border-radius:18px;background:#fafafa;border:1px solid #eee}
.bullet-box h3{margin:0 0 12px;font-size:20px;color:#111}
.bullet-box ul{margin:0;padding-left:1.2em;color:#555}
.bullet-box li+li{margin-top:8px}
.media-card{background:#fff;border:1px solid #ececec;border-radius:22px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.media-card h3{margin:0 0 10px;font-size:22px;color:#111}
.media-card p{margin:0 0 14px;color:#666}
.gallery-grid figure{max-height:430px}
.gallery-grid img{width:100%;height:100%;object-fit:cover}
.detail-split figure{max-height:480px}
.detail-split img{width:100%;height:100%;object-fit:cover}
.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:999px;font-weight:800;font-size:14px}
.btn.red{background:var(--red);color:#fff} .btn.line{border:1.5px solid var(--red);color:var(--red);background:#fff}
.price-panel{background:#fff;border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.price-title{margin:0;background:#111;color:#fff;text-align:center;padding:13px 18px;font-size:24px;line-height:1.3;font-weight:900;letter-spacing:.03em}
.price-lead{margin:0;padding:18px 22px 14px;color:#555;font-size:15px}
.price-table{width:calc(100% - 44px);margin:0 22px 20px;border-collapse:collapse;border:1px solid #dedede}
.price-table th,.price-table td{padding:13px 18px;border:1px solid #dedede}
.price-table th{background:#f5f5f5;color:#111;font-weight:900;text-align:left}
.price-table td:first-child{width:50%;font-weight:700}
.price-table td:last-child{text-align:right;font-weight:900;color:#111;font-size:17px}
.price-table small{display:block;color:#777;font-size:11px;font-weight:700;margin-top:2px}
.price-table .inquiry{color:#c62828}
.price-notes{margin:0;padding:0 22px 22px;list-style:none;color:#555;font-size:14px}
.price-notes li{position:relative;padding-left:1.15em;margin-top:4px}
.price-notes li:before{content:"※";position:absolute;left:0;top:0;font-weight:900;color:#333}
@media (max-width:720px){.price-table{width:calc(100% - 24px);margin:0 12px 14px}.price-lead{padding:16px 14px 12px}.price-table th,.price-table td{padding:11px 10px}.price-notes{padding:0 14px 18px}.price-table td:last-child{font-size:15px}}
.faq{display:grid;gap:14px}
.faq details{background:#fff;border:1px solid #ececec;border-radius:18px;padding:18px 20px}
.faq summary{cursor:pointer;font-weight:800;color:#111;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq p{margin:12px 0 0;color:#666}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:#fff;border:1px solid #ececec;border-radius:20px;padding:22px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.step .n{position:absolute;top:18px;right:18px;font-size:38px;font-weight:900;color:#f1f1f1;line-height:1}
.step h3{margin:0 0 8px;font-size:22px;color:#111} .step p{margin:0;color:#666}
.cta-box{background:linear-gradient(135deg,#0d3244,#0e5370);color:#fff;border-radius:28px;padding:36px;box-shadow:var(--shadow)}
.cta-box h2{margin:0 0 12px;font-size:clamp(28px,3vw,42px)} .cta-box p{margin:0 0 20px;color:rgba(255,255,255,.88)} .cta-box .btn.line{border-color:#fff;color:#fff;background:transparent}
.footer{background:#111;color:#fff;padding:24px 0;margin-top:80px} .footer small{color:#ccc}
@media (max-width:1000px){.hero-grid,.cards4,.use-grid,.sample-grid,.detail-split,.spec-layout,.template-grid,.steps{grid-template-columns:1fr 1fr} .hero-visual{grid-template-columns:1fr 1fr} .hero-visual .big{grid-column:1 / -1;grid-row:auto} }
@media (max-width:720px){.header-copy{margin-right:0;width:100%} .hero{padding-top:26px} .hero-grid,.cards4,.use-grid,.sample-grid,.detail-split,.gallery-grid,.spec-layout,.template-grid,.steps{grid-template-columns:1fr} .hero-visual{grid-template-columns:1fr 1fr} .section-head{margin-bottom:20px} .logo{font-size:30px} .hero h1{font-size:36px} .info-card h3,.use-card h3,.media-card h3,.step h3{font-size:20px} .sample-grid figure{padding:12px} .sample-grid img{max-height:320px} }