:root { --paper:#f6f3ed; --header-height:86px; }
.site-header { background:rgba(246,243,237,.98); }
.scene-carousel { position:relative; overflow:hidden; }
.company-intro { position:absolute; z-index:3; top:18px; left:max(var(--gutter),calc((100% - 1280px)/2)); right:var(--gutter); font-size:13px; font-weight:600; letter-spacing:.04em; line-height:1.7; }
.carousel-stage { position:relative; height:clamp(470px,calc(100svh - 225px),780px); isolation:isolate; }
.scene-screen { position:absolute; inset:0; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .65s ease,visibility 0s .65s; background:var(--paper); }
.scene-screen[data-active="true"] { visibility:visible; opacity:1; pointer-events:auto; transition:opacity .65s ease,visibility 0s; }
/* 絵の右端を、文章や下のボタンと同じ内容幅（.wrap）の右端に揃える。
   画面が広いときは (100% - 1280px) / 2 が、狭いときは余白（--gutter）が .wrap の右余白になる */
.scene-art { position:absolute; top:0; right:max(var(--gutter), calc((100% - 1280px) / 2)); bottom:0; width:66%; margin:0; }
.scene-picture { display:block; width:100%; height:100%; object-fit:contain; object-position:right center; }
.scene-art-store { width:62%; }
.scene-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#f6f3ed 0%,rgba(246,243,237,.99) 28%,rgba(246,243,237,.9) 34%,rgba(246,243,237,.28) 45%,rgba(246,243,237,0) 53%); }
.scene-copy { position:relative; z-index:2; padding-top:clamp(76px,calc(8vh + 28px),128px); pointer-events:none; }
.scene-copy a { pointer-events:auto; }
.scene-eyebrow { display:flex; gap:20px; align-items:center; font-family:var(--font-latin); font-size:11px; font-weight:600; letter-spacing:.16em; }
.scene-eyebrow > span { font-size:17px; letter-spacing:.02em; }
.scene-heading { margin-top:23px; max-width:670px; font-size:clamp(44px,4.4vw,66px); line-height:1.45; letter-spacing:-.065em; }
.scene-lead { max-width:43%; width:460px; margin-top:24px; font-size:14px; line-height:2.15; }
.scene-topics { margin-top:16px; font-family:var(--font-latin); font-size:9px; letter-spacing:.07em; }
.scene-links { display:flex; align-items:center; gap:25px; margin-top:29px; }
.scene-primary { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-width:240px; min-height:52px; padding:12px 19px; background:var(--ink); color:var(--white); font-size:12px; font-weight:600; }
.scene-primary > span { font-size:20px; font-weight:400; }
.scene-primary:hover { background:#2d574e; }
.scene-more { display:flex; align-items:center; gap:20px; padding-block:8px; border-bottom:1px solid; font-size:12px; font-weight:600; }
/* 絵の下の説明文字（UNIVERGE … など）も、絵と同じく内容幅の右端に揃える */
.scene-art-label { position:absolute; right:max(var(--gutter), calc((100% - 1280px) / 2)); bottom:16px; font-family:var(--font-latin); font-size:9px; letter-spacing:.08em; color:var(--muted); }
.carousel-controls { display:grid; grid-template-columns:165px minmax(0,1fr) 150px; align-items:center; gap:26px; padding-block:17px; border-top:1px solid var(--rule); }
.carousel-caption { display:flex; align-items:center; gap:17px; }
.scene-counter { align-self:flex-start; font-family:var(--font-latin); font-size:10px; white-space:nowrap; }
.carousel-caption p { font-size:11px; line-height:1.7; font-weight:600; }
.scene-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.scene-choices button { display:flex; align-items:center; gap:13px; min-height:72px; padding:12px 18px; border:1px solid var(--rule); background:transparent; text-align:left; }
.scene-choices button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:var(--white); }
.scene-choices button:hover { border-color:var(--ink); }
.scene-choices button > span { font-family:var(--font-latin); font-size:11px; }
.scene-choices strong { font-size:14px; line-height:1.7; white-space:nowrap; }
.scene-choices small { display:block; margin-top:3px; font-family:var(--font-latin); font-size:8px; letter-spacing:.07em; font-weight:400; }
.carousel-player { display:flex; flex-direction:column; align-items:center; gap:6px; }
.carousel-arrows { display:flex; gap:8px; }
.carousel-arrows button { width:48px; height:36px; border:1px solid var(--rule); background:transparent; font-size:18px; font-family:var(--font-latin); }
.carousel-arrows button:hover { background:var(--paper-dark); }
#auto-toggle { min-height:30px; padding:3px 8px; background:transparent; font-size:10px; font-weight:600; }
.carousel-progress { height:2px; background:var(--rule); }
#slide-progress { width:0; height:100%; background:var(--ink); }
.carousel-footnote { display:flex; align-items:center; justify-content:space-between; padding-top:10px; font-size:9px; color:var(--muted); }
.carousel-footnote > span { display:flex; align-items:center; gap:7px; }
.carousel-footnote > span::before { width:4px; height:4px; border-radius:50%; background:var(--ink); content:""; }
.context-page { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; }
.scene-detail-heading h2 { margin-top:24px; font-size:clamp(32px,3vw,44px); }
.scene-detail-heading > p:last-child { margin-top:22px; font-size:14px; line-height:2; }
.scene-requests { border-top:1px solid var(--rule); }
.scene-requests > a { display:grid; grid-template-columns:28px 1fr 20px; column-gap:18px; padding:23px 8px; border-bottom:1px solid var(--rule); }
.scene-requests > a > span { grid-row:1/3; padding-top:5px; font-family:var(--font-latin); font-size:11px; }
.scene-requests h3 { font-size:18px; font-weight:700; }
.scene-requests p { grid-column:2; margin-top:7px; font-size:12px; line-height:1.9; }
.scene-requests b { grid-column:3; grid-row:1/3; align-self:center; font-size:20px; font-weight:400; }
.scene-requests a:hover h3 { text-decoration:underline; text-underline-offset:5px; }
@media(min-width:761px) and (max-height:850px) {
 .scene-copy { padding-top:62px; }
 .scene-heading { margin-top:18px; font-size:clamp(40px,3.75vw,52px); line-height:1.37; }
 .scene-lead { margin-top:18px; font-size:13px; line-height:2; }
 .scene-topics { margin-top:10px; font-size:8px; }
 .scene-links { margin-top:20px; }
 .scene-primary { min-height:46px; padding-block:9px; }
}
@media(max-width:1100px) {
 /* タブレット幅：見出し下の説明文が絵に重ならないよう、文章を狭め、絵の左端の白いぼかしを広げる */
 .scene-lead { max-width:38%; }
 .scene-shade { background:linear-gradient(90deg,#f6f3ed 0%,rgba(246,243,237,.99) 30%,rgba(246,243,237,.92) 40%,rgba(246,243,237,.3) 52%,rgba(246,243,237,0) 60%); }
 .carousel-controls { grid-template-columns:minmax(0,1fr) 125px; gap:18px; }
 .carousel-caption { display:none; }
 .scene-choices button { padding-inline:12px; }
 .context-page { gap:50px; }
 .desktop-break { display:none; }
}
@media(max-width:760px) {
 :root { --header-height:72px; --gutter:22px; }
 .site-header .brand-symbol { width:35px; height:35px; font-size:24px; }
 .site-header .brand { gap:9px; } .site-header .brand-name { font-size:12px; } .site-header .brand-name small { font-size:7px; letter-spacing:.09em; }
 .site-header .header-contact { min-height:36px; padding:6px 10px; gap:10px; font-size:11px; } .header-inner { gap:10px; }
 .company-intro { top:16px; font-size:11px; letter-spacing:.025em; }
 .carousel-stage { height:max(646px,calc(100svh - 233px)); }
 .scene-art { top:310px; right:0; bottom:10px; width:100%; }
 .scene-art-store { top:312px; right:0; width:100%; }
 .scene-shade { background:linear-gradient(180deg,#f6f3ed 0%,#f6f3ed 43%,rgba(246,243,237,.7) 48%,rgba(246,243,237,0) 53%); }
 .scene-copy { padding-top:58px; }
 .scene-eyebrow { font-size:9px; gap:13px; } .scene-eyebrow>span { font-size:13px; }
 .scene-heading { margin-top:15px; font-size:clamp(32px,8.8vw,44px); line-height:1.45; }
 .scene-lead { max-width:none; width:100%; margin-top:16px; font-size:12px; line-height:2; }
 .scene-topics { display:none; }
 .scene-links { gap:20px; margin-top:20px; }
 .scene-primary { min-width:0; min-height:44px; gap:13px; padding:10px 14px; font-size:10px; }
 .scene-primary>span { font-size:16px; } .scene-more { gap:12px; font-size:10px; }
 .scene-art-label { right:22px; bottom:8px; font-size:7px; }
 .carousel-controls { grid-template-columns:1fr; gap:11px; padding-block:12px; }
 .scene-choices { gap:6px; }
 .scene-choices button { min-height:66px; padding:9px; gap:7px; }
 .scene-choices button>span { align-self:flex-start; font-size:8px; }
 .scene-choices strong { font-size:12px; }
 .scene-choices small { font-size:6px; letter-spacing:.03em; }
 .carousel-player { flex-direction:row; justify-content:space-between; gap:15px; }
 .carousel-arrows button { width:42px; height:32px; }
 #auto-toggle { font-size:10px; min-height:32px; }
 .carousel-footnote { font-size:8px; padding-top:8px; }
 .context-page { grid-template-columns:1fr; gap:34px; }
 .scene-detail { padding-top:66px; }
 .scene-detail-heading h2 { margin-top:18px; font-size:32px; }
 .scene-detail-heading>p:last-child { font-size:12px; margin-top:17px; }
 .scene-requests h3 { font-size:16px; } .scene-requests p { font-size:11px; }
}
@media(max-width:380px) { .scene-links { gap:12px; } .scene-primary { max-width:calc(100% - 86px); gap:8px; padding-inline:10px; } }
@media(max-height:500px) and (max-width:960px) { :root { --header-height:66px; } }
@media(prefers-reduced-motion:reduce) { .scene-screen { transition:none; } }