.con04 { padding: calc(var(--px)*140) 0; background: #fff; color: var(--ink); text-align: center; font-weight: 400; letter-spacing: normal; }
.con04__wrap { width: calc(var(--px)*1180); padding: 0 calc(var(--px)*32); margin-inline: auto; }
.con04__tag { display: inline-block; background: var(--primary); color: #fff; font-weight: 800; font-size: calc(var(--px)*15); padding: calc(var(--px)*7) calc(var(--px)*18); border-radius: 999px; }
.con04__title { font-size: calc(var(--px)*60); font-weight: 900; letter-spacing: -.045em; line-height: 1.2; margin-top: calc(var(--px)*22); text-wrap: balance; }
.con04__em { color: var(--primary); }
.con04__tabs { display: flex; justify-content: center; gap: calc(var(--px)*10); margin-top: calc(var(--px)*56); }
.con04__tabs button { height: calc(var(--px)*60); padding: 0 calc(var(--px)*34); border-radius: 999px; border: 2px solid var(--primary); background: #fff; color: var(--primary); font-weight: 900; font-size: calc(var(--px)*18); cursor: pointer; display: flex; align-items: center; gap: calc(var(--px)*10); }
.con04__tabs button i { font-style: normal; font-family: var(--font-bangers); font-variation-settings: "wght" 900, "wdth" 78; font-size: calc(var(--px)*22); font-weight: 400; }
.con04__tabs button.on { background: var(--primary); color: #fff; }
.con04__panel { display: none; margin-top: calc(var(--px)*44); text-align: left; }
.con04__panel.on { display: block; animation: con04-fade .4s; }
@keyframes con04-fade { from { opacity: 0; transform: translateY(calc(var(--px)*14)); } }
.con04__quad { position: relative; display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.con04__quad::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--primary); opacity: .55; }
.con04__quad::after { content: ""; position: absolute; top: 50%; left: calc(var(--px)*-40); right: calc(var(--px)*-40); height: 1.5px; background: var(--primary); opacity: .55; }
.con04__qd { padding: calc(var(--px)*56) calc(var(--px)*48) calc(var(--px)*64); }
.con04__pill { display: inline-flex; align-items: center; height: calc(var(--px)*40); padding: 0 calc(var(--px)*22); border-radius: 50% / 50%; background: var(--secondary); border: 2px solid var(--primary); color: var(--navy); font-family: var(--font-bangers); font-variation-settings: "wght" 900, "wdth" 78; font-size: calc(var(--px)*20); letter-spacing: .04em; }
.con04__qd h3 { font-size: calc(var(--px)*38); font-weight: 900; letter-spacing: -.04em; line-height: 1.28; color: var(--primary); margin-top: calc(var(--px)*18); }
.con04__qd p { font-size: calc(var(--px)*16); line-height: 1.75; color: var(--muted); margin-top: calc(var(--px)*22); }
.con04__qd p b { color: var(--ink); font-weight: 800; }
.con04__int { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: calc(var(--px)*400) calc(var(--px)*240); gap: calc(var(--px)*14); }
.con04__cell { position: relative; border-radius: calc(var(--px)*26); overflow: hidden; background: var(--tertiary); }
.con04__cell:nth-child(-n+2) { grid-column: span 2; }
.con04__cell img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 35%; }
.con04__cell.is-fit { background: #fff; border: 1.5px solid var(--line); }
.con04__cell.is-fit img { object-fit: contain; object-position: 50% 50%; padding: calc(var(--px)*14) calc(var(--px)*10) calc(var(--px)*40); }
.con04__cell figcaption { position: absolute; left: calc(var(--px)*16); bottom: calc(var(--px)*16); background: var(--primary); color: #fff; font-weight: 700; font-size: calc(var(--px)*14); padding: calc(var(--px)*8) calc(var(--px)*14); border-radius: 999px; pointer-events: none; }
.con04__copy { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--px)*30); margin-top: calc(var(--px)*28); background: var(--primary); color: #fff; border-radius: calc(var(--px)*26); padding: calc(var(--px)*28) calc(var(--px)*36); }
.con04__disp { font-family: var(--font-bangers); font-variation-settings: "wght" 900, "wdth" 78; font-size: calc(var(--px)*54); color: var(--secondary); letter-spacing: .02em; line-height: .95; }
.con04__copy p { font-size: calc(var(--px)*17); line-height: 1.65; opacity: .85; }
.con04__yt { margin-top: calc(var(--px)*90); }
.con04__yt-h { font-size: calc(var(--px)*44); font-weight: 900; letter-spacing: -.045em; line-height: 1.25; text-align: center; margin-bottom: calc(var(--px)*32); text-wrap: balance; }
.con04__yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--px)*28); overflow: hidden; background: var(--navy); box-shadow: 0 30px 60px -30px rgba(11,6,112,.55); }
.con04__yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.con04__yt + .con04__store { margin-top: calc(var(--px)*40); }
.con04__store { overflow: hidden; margin-top: calc(var(--px)*90); }
.con04__store .con04__stc { width: auto; border-radius: calc(var(--px)*28); overflow: hidden; line-height: 0; background: var(--tertiary); }
.con04__stc img { height: calc(var(--px)*820); width: auto; max-width: none; display: block; }