:root{
  --bg:#07100d;--bg2:#0a1511;--panel:#0d1b16;--panel2:#10231c;
  --text:#f3f6f2;--muted:#a8b3ad;--green:#84b043;--green2:#a8cf65;
  --line:rgba(255,255,255,.12);--soft:rgba(132,176,67,.10);--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;line-height:1.8}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}
header{position:sticky;top:0;z-index:50;background:rgba(7,16,13,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.header{height:78px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:13px}.brand img{width:43px;height:43px;object-fit:contain}
.brand strong{font-size:.93rem;letter-spacing:.1em}.brand small{display:block;color:#91a098;font-size:.62rem;letter-spacing:.12em}
.nav{display:flex;gap:23px;align-items:center;font-size:.83rem}.nav a{color:#d5ddd8}.nav a:hover{color:var(--green2)}
.nav .price{border:1px solid rgba(132,176,67,.55);border-radius:999px;padding:8px 14px}
.menu{display:none;border:0;background:none;color:white;font:inherit}
.section{padding:104px 0;border-top:1px solid var(--line)}
.label{font-size:.73rem;letter-spacing:.18em;font-weight:700;color:var(--green2);margin:0 0 14px}
h1,h2,h3{letter-spacing:-.025em}h2{font-size:clamp(2rem,4.5vw,4.45rem);line-height:1.18;margin:0 0 26px}
.lead{max-width:780px;color:#ced6d1;font-size:1.06rem}.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:49px;padding:0 23px;border-radius:999px;border:1px solid var(--green);transition:.2s;cursor:pointer}
.btn.primary{background:var(--green);color:#07100d;font-weight:700}.btn.primary:hover{background:var(--green2);transform:translateY(-2px)}
.btn.ghost:hover{background:var(--soft);transform:translateY(-2px)}.btn:active{transform:scale(.98)}
/* Hero */
.hero{min-height:720px;position:relative;overflow:hidden;display:grid;align-items:center;background:
radial-gradient(circle at 75% 50%,rgba(132,176,67,.06),transparent 33%),
linear-gradient(180deg,#07100d,#07100d)}
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orbit{position:absolute;border:1px solid rgba(132,176,67,.42);border-radius:50%}
.o1{width:520px;height:520px;right:-80px;top:90px}.o2{width:360px;height:360px;right:170px;top:185px;border-color:rgba(255,255,255,.15)}
.o3{width:190px;height:190px;right:470px;top:350px;border-color:rgba(132,176,67,.28)}
.o4{width:690px;height:690px;right:-310px;top:-60px;border-color:rgba(255,255,255,.07)}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--green);right:284px;top:177px;box-shadow:0 0 0 8px rgba(132,176,67,.08)}
.hero-content{position:relative;z-index:2;padding:120px 0}
.hero h1{font-size:clamp(3rem,7vw,6.8rem);line-height:1.04;margin:7px 0 30px;max-width:1000px}
.hero h1 span{display:block}.hero .sub{font-size:1.16rem;color:#dce4df;margin-bottom:34px}
.pc-nowrap{white-space:nowrap}.actions{display:flex;gap:12px;flex-wrap:wrap}
/* mission */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px}.split p{color:#c5cec8}
.quote{font-size:1.3rem;border-left:2px solid var(--green);padding-left:22px;color:white;margin-top:28px}
/* services */
.services{background:var(--bg2)}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:46px}
.section-head>p{max-width:500px;color:var(--muted)}
.group{margin-top:30px}.group-title{font-size:.69rem;letter-spacing:.19em;color:#7e8d84;margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.service-card{min-height:248px;background:var(--panel);border:1px solid var(--line);padding:30px;position:relative;transition:.22s;cursor:pointer}
.service-card:hover{background:#13231c;border-color:rgba(132,176,67,.7);transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.service-card:active{transform:translateY(1px) scale(.99)}.service-card .idx{color:var(--green2);font-size:.75rem;letter-spacing:.15em}
.service-card h3{font-size:1.55rem;margin:31px 0 12px}.service-card p{color:#aeb9b2;margin:0}.arrow{position:absolute;right:28px;bottom:23px;color:var(--green2);font-size:1.35rem}
/* approach */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}
.flowbox{border:1px solid var(--line);padding:28px;background:rgba(255,255,255,.02)}
.flowbox .big{font-size:2.2rem;color:var(--green2);font-weight:800}.flowbox strong{display:block;font-size:1.17rem;margin:7px 0}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}.tag{border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:#bec8c1;font-size:.84rem}
/* notes */
.notes{background:#edf1eb;color:#142019}.notes .label{color:#57772c}.notes .lead{color:#4f5f55}.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.note-card{background:#fff;border:1px solid #d9dfd7;padding:27px;min-height:220px}.note-card small{color:#57772c;letter-spacing:.12em}
.note-card h3{font-size:1.4rem;margin:24px 0 10px}.note-card p{color:#5a665f}.more{display:inline-block;margin-top:26px;color:#476524;font-weight:700}
/* works/team/contact */
.works-teaser{margin-top:38px;border:1px solid var(--line);padding:44px;background:linear-gradient(120deg,rgba(132,176,67,.08),transparent);display:flex;justify-content:space-between;gap:30px;align-items:center}
.team-mini{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}.team-box{padding:32px;border:1px solid var(--line);background:var(--panel)}
.contact{text-align:center;padding:116px 0;background:radial-gradient(circle at 50% 0%,rgba(132,176,67,.1),transparent 44%)}
.contact h2{font-size:clamp(2.4rem,5vw,5rem);line-height:1.22;margin:0 0 26px}.contact h2 span{display:block}
footer{border-top:1px solid var(--line);padding:34px 0;color:#88968d}.footer{display:flex;justify-content:space-between;gap:24px;align-items:center}
/* content pages */
.page-hero{padding:100px 0 72px;background:radial-gradient(circle at 80% 20%,rgba(132,176,67,.09),transparent 32%);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.6rem,5.6vw,5.8rem);line-height:1.1;margin:0 0 18px}.page-hero p{max-width:800px;color:#c3cec7;font-size:1.08rem}
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.item{border:1px solid var(--line);background:var(--panel);padding:28px}.item .n{color:var(--green2);font-size:.75rem;letter-spacing:.14em}.item h3{font-size:1.38rem;margin:16px 0 9px}.item p{color:#b3bdb6}
.band{padding:34px;border-left:3px solid var(--green);background:var(--soft);margin-top:34px}.band strong{display:block;font-size:1.25rem;margin-bottom:8px}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:28px}.process div{border-top:1px solid var(--green);padding:18px 12px;background:rgba(255,255,255,.025)}
/* 06 diagram */
.ladder{display:grid;gap:18px;max-width:850px;margin:42px auto 0}.ladder .stage{border:1px solid var(--line);padding:30px;display:grid;grid-template-columns:120px 1fr;gap:25px;align-items:center;background:var(--panel)}
.stage .code{font-size:2.2rem;font-weight:800;color:var(--green2)}.stage h3{margin:0 0 5px;font-size:1.45rem}.stage p{margin:0;color:#b7c1ba}.down{text-align:center;color:var(--green2);font-size:1.7rem}
/* works */
.work-feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}.work-feature .poster{border:1px solid var(--line);padding:9px;background:#111}
.work-details h3{font-size:clamp(2.2rem,4vw,4rem);margin:8px 0}.task{padding:14px 0;border-top:1px solid var(--line)}.task strong{display:block}.task span{color:var(--muted);font-size:.9rem}
.event{display:grid;grid-template-columns:1.5fr .9fr;border:1px solid var(--line);margin-top:28px}.event img{width:100%;height:100%;object-fit:cover}.event .copy{padding:27px}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.video{aspect-ratio:16/9;background:#000;border:1px solid var(--line)}.video iframe{width:100%;height:100%;border:0}
/* price */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.price-card{border:1px solid var(--line);padding:30px;background:var(--panel)}.price-card.highlight{border-color:rgba(132,176,67,.75);background:#12231b}
.price-big{font-size:2.3rem;color:var(--green2);font-weight:800;margin:10px 0}.price-card ul{padding-left:1.2rem;color:#b8c3bc}
table{width:100%;border-collapse:collapse;margin-top:20px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:13px 8px}th{color:#dfe5e1}td:last-child{text-align:right;color:var(--green2);font-weight:700}
/* staff */
.staff-main{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px}.staff-name{font-size:2.4rem;margin:0}.role{color:var(--green2);margin:6px 0 20px}.lang{display:flex;gap:9px;flex-wrap:wrap}.lang span{border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:.84rem}
.producers{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px}.producer{border-top:1px solid var(--line);padding-top:15px;min-width:220px}
@media(max-width:900px){.nav{display:none}.menu{display:block}.nav.open{display:flex;position:absolute;top:78px;left:0;right:0;background:#08120e;padding:20px 24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
.split,.cards,.flow,.note-grid,.team-mini,.content-grid,.staff-main,.price-grid,.work-feature,.event,.video-grid{grid-template-columns:1fr}
.process{grid-template-columns:1fr 1fr}.section-head{display:block}.pc-nowrap{white-space:normal}.hero{min-height:650px}.o1{right:-260px}.o2{right:-50px}.o3{display:none}}
@media(max-width:560px){.wrap{width:min(var(--max),calc(100% - 28px))}.section{padding:76px 0}.hero h1{font-size:3.2rem}.page-hero{padding:78px 0 58px}.process{grid-template-columns:1fr}.ladder .stage{grid-template-columns:1fr}.footer{flex-direction:column;align-items:flex-start}}


/* =========================================================
   TECHNICAL NOTES — long-form edition
   ========================================================= */
.technical-hero{padding-bottom:88px}
.tn-intro{padding:72px 0;background:#edf1eb;color:#142019;border-bottom:1px solid #d9dfd7}
.tn-intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.tn-intro h2{font-size:clamp(2rem,4vw,3.9rem);line-height:1.2;margin:0}.tn-intro p{color:#4e5e54;margin-top:0}.tn-intro strong{color:#17241c}
.tn-toc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:58px;margin-bottom:58px}
.tn-toc a{background:var(--panel);padding:21px 24px;transition:.18s;min-width:0}.tn-toc a:hover{background:#14271f}.tn-toc span{display:block;color:var(--green2);font-size:.72rem;letter-spacing:.12em}.tn-toc strong{display:block;font-size:1.1rem;margin-top:3px}.tn-toc small{display:block;color:var(--muted);margin-top:2px}
.tn-article{padding:104px 0;border-top:1px solid var(--line);scroll-margin-top:78px}.tn-article.tn-dark{background:#050b09}.tn-article-inner{max-width:980px}.tn-article-head{margin-bottom:42px}.tn-article-head h2{font-size:clamp(2.5rem,5vw,5rem);margin:0 0 12px;line-height:1.05}.tn-deck{font-size:clamp(1.1rem,2vw,1.45rem);color:#c7d0ca;margin:0}.tn-prose{max-width:790px;margin:0 auto 36px}.tn-prose h3{font-size:1.55rem;margin:46px 0 10px}.tn-prose p{color:#c5cec8;font-size:1.02rem}.tn-prose strong{color:white}.tn-keyline{font-size:1.55rem!important;line-height:1.55;color:white!important;border-left:3px solid var(--green);padding-left:20px;margin-top:48px}
.tn-figure{margin:42px auto 50px;max-width:900px}.tn-figure figcaption{font-size:.78rem;color:#86938b;margin-top:13px;line-height:1.6}
/* concentric gamut concept */
.gamut-rings{height:470px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,rgba(132,176,67,.05),transparent 64%);border:1px solid var(--line)}
.gamut-rings .ring{position:absolute;border-radius:50%;display:flex;align-items:flex-start;justify-content:center;padding-top:18px;font-weight:700;letter-spacing:.05em}.ring-2020{width:400px;height:400px;border:2px solid #7c8bb8;color:#aab6df}.ring-p3{width:285px;height:285px;border:2px solid #c8a14a;color:#e2c576}.ring-709{width:176px;height:176px;border:2px solid var(--green);color:var(--green2);align-items:center;padding:0}.gamut-rings figcaption{position:absolute;bottom:14px;left:20px;right:20px}
/* CIE */
.cie-figure svg{width:100%;height:auto;display:block}.cie-bg{fill:#0b1511;stroke:rgba(255,255,255,.1)}.cie-grid line{stroke:rgba(255,255,255,.11);stroke-width:1}.cie-locus{fill:url(#cieSpectrum);fill-opacity:.54;stroke:#e4ebe6;stroke-width:2}.cie-purple{stroke:#e4ebe6;stroke-width:2;opacity:.8}.tri{fill:none;stroke-width:4}.t2020{stroke:#8394c9}.tp3{stroke:#d7a843}.t709{stroke:#84b043}.cie-labels text{fill:#aeb9b2;font-size:15px}.cie-labels .l2020{fill:#aab8e6;font-weight:700}.cie-labels .lp3{fill:#e5c06a;font-weight:700}.cie-labels .l709{fill:#a8cf65;font-weight:700}
/* compare / callout */
.tn-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:38px auto 48px;max-width:790px}.tn-compare>div{border:1px solid var(--line);background:var(--panel);padding:26px}.tn-compare small{display:block;color:var(--green2);letter-spacing:.12em}.tn-compare strong{display:block;font-size:1.18rem;margin:8px 0}.tn-compare p{color:var(--muted);margin:0;font-size:.9rem}.tn-callout{max-width:820px;margin:44px auto;padding:28px 30px;border-left:3px solid var(--green);background:var(--soft)}.tn-callout strong{display:block;font-size:1.22rem;margin-bottom:8px}.tn-callout p{color:#bec8c1;margin:0}.tn-warning{border-left-color:#d7a843;background:rgba(215,168,67,.07)}
/* workflow */
.workflow-figure{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:stretch}.wf-step{border:1px solid var(--line);padding:18px 12px;background:var(--panel);text-align:center;min-width:0}.wf-step span{display:block;color:var(--green2);font-size:.65rem;letter-spacing:.09em}.wf-step strong{display:block;margin:7px 0}.wf-step small{color:var(--muted);font-size:.68rem;line-height:1.35;display:block}.workflow-figure i,.dcp-flow i{display:grid;place-items:center;color:var(--green2);font-style:normal}.workflow-figure figcaption{grid-column:1/-1}
/* DCP */
.dcp-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center}.dcp-flow>div{border:1px solid var(--line);background:var(--panel);padding:22px 12px;text-align:center}.dcp-flow>div.accent{border-color:rgba(132,176,67,.8);background:rgba(132,176,67,.08)}.dcp-flow span{display:block;color:var(--green2);font-size:.65rem;letter-spacing:.1em}.dcp-flow strong{font-size:.9rem}
/* sound */
.sound-diagrams{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:42px auto 50px}.sound-stage{border:1px solid var(--line);background:var(--panel);padding:22px;min-height:280px;position:relative;text-align:center}.sound-stage figcaption{color:var(--green2);font-weight:700;margin-bottom:22px}.screen-line{border-top:3px solid #c9d1cc;padding-top:6px;font-size:.65rem;letter-spacing:.1em;color:#98a59d}.speaker-row{display:grid;gap:12px;margin-top:28px}.speaker-row.two{grid-template-columns:1fr 1fr}.speaker-row.three,.speaker-row.rear{grid-template-columns:1fr 1fr 1fr}.speaker-row b{border:1px solid rgba(132,176,67,.7);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;margin:auto;color:var(--green2)}.audience{display:block;margin:42px auto 15px;color:#9aa79f;font-size:.82rem}.speaker-row.rear{margin-top:15px}.speaker-row .lfe{border-style:dashed;color:#b9c3bd;border-color:#68766e}
/* QC */
.tn-qc-short{max-width:900px}.qc-list{display:flex;flex-wrap:wrap;gap:9px;max-width:790px;margin:30px auto 46px}.qc-list span{border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:#c7d0ca}.tn-final{font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.65;text-align:center;margin:68px auto 10px;max-width:780px}.tn-final strong{color:var(--green2)}
/* next */
.tn-next{display:grid;grid-template-columns:110px 1fr;column-gap:18px;max-width:790px;margin:72px auto 0;padding:22px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:.18s}.tn-next:hover{background:rgba(132,176,67,.06)}.tn-next span{grid-row:1/3;color:var(--green2);font-size:.7rem;letter-spacing:.15em}.tn-next strong{font-size:1.1rem}.tn-next small{color:var(--muted)}
.tn-close{padding:105px 0;text-align:center;background:#edf1eb;color:#152019}.tn-close h2{font-size:clamp(2rem,4vw,4rem);margin-bottom:18px}.tn-close p:not(.label){max-width:700px;margin:0 auto 28px;color:#506057}.tn-close .label{color:#57772c}
@media(max-width:900px){.tn-intro-grid{grid-template-columns:1fr;gap:28px}.tn-toc{grid-template-columns:1fr 1fr}.workflow-figure,.dcp-flow{grid-template-columns:1fr}.workflow-figure i,.dcp-flow i{transform:rotate(90deg)}.sound-diagrams{grid-template-columns:1fr}.gamut-rings{height:390px}.ring-2020{width:330px;height:330px}.ring-p3{width:235px;height:235px}.ring-709{width:145px;height:145px}}
@media(max-width:560px){.tn-toc{grid-template-columns:1fr;margin-top:28px}.tn-article{padding:76px 0}.tn-article-head{margin-bottom:32px}.tn-compare{grid-template-columns:1fr}.gamut-rings{height:330px}.ring-2020{width:275px;height:275px}.ring-p3{width:195px;height:195px}.ring-709{width:120px;height:120px}.tn-next{grid-template-columns:1fr}.tn-next span{grid-row:auto}.tn-callout{padding:23px}.cie-figure{overflow-x:auto}.cie-figure svg{min-width:620px}}


/* =========================================================
   OMEGA GLOBAL CONTENT
   Ver.0.2.1 FIX
   2026.08
   ========================================================= */


/* ---------------------------------------------------------
   1. OMEGA LOGO
   反転ロゴの外側にグリーンの円
   --------------------------------------------------------- */

.brand-mark {
    width: 45px;
    height: 45px;
    border: 1px solid #00ff30;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.brand-mark img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}


/* ---------------------------------------------------------
   2. HEADER
   PCで本文・図がヘッダーの上を通らないようにする
   --------------------------------------------------------- */

body > header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(8, 13, 11, 0.97);
}

/* TECHNICAL NOTE内のheaderは固定しない */

.note-article header,
.tech-note header,
article header {
    position: relative;
    top: auto;
    z-index: auto;
    background: transparent;
}


/* アンカー移動時に固定ヘッダーへ隠れない */

.note-article,
.tech-note,
article[id] {
    scroll-margin-top: 100px;
}


/* ---------------------------------------------------------
   3. TECHNICAL NOTES
   図・挿絵をPC／スマートフォンの両方で表示
   --------------------------------------------------------- */

.tech-visual,
.note-visual,
.diagram,
.gamut-diagram,
.cie-diagram,
.log-flow,
.dcp-flow,
.audio-diagram {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    max-width: 900px;
    margin: 36px auto;
    overflow: visible;
    box-sizing: border-box;
}


/* SVG図 */

.tech-visual svg,
.note-visual svg,
.diagram svg,
.gamut-diagram svg,
.cie-diagram svg,
.log-flow svg,
.dcp-flow svg,
.audio-diagram svg {
    display: block !important;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* 画像による図 */

.tech-visual img,
.note-visual img,
.diagram img {
    display: block !important;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   4. TECHNICAL NOTES MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .tech-visual,
    .note-visual,
    .diagram,
    .gamut-diagram,
    .cie-diagram,
    .log-flow,
    .dcp-flow,
    .audio-diagram {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 26px auto !important;
        padding: 12px !important;

        overflow-x: auto;
        overflow-y: visible;

        box-sizing: border-box;
    }

    .tech-visual svg,
    .note-visual svg,
    .diagram svg,
    .gamut-diagram svg,
    .cie-diagram svg,
    .log-flow svg,
    .dcp-flow svg,
    .audio-diagram svg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto;
    }

}


/* ---------------------------------------------------------
   5. WORKS
   「ヤンヤン 夏の想い出」ポスター
   PCでは大きくしすぎない
   --------------------------------------------------------- */

.yanyan-poster {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;

    margin: 30px auto;
}


/* posterを囲むBOXがある場合 */

.yanyan-poster-wrap {
    width: 100%;
    text-align: center;
}

.yanyan-poster-wrap img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;

    margin-left: auto;
    margin-right: auto;
}


/* スマートフォン */

@media (max-width: 768px) {

    .yanyan-poster,
    .yanyan-poster-wrap img {
        width: 82%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

}

/* =========================================================
   Ver.0.2 complete4 — 2026.08.25
   下層ページ配色 / STAFF profile
   ========================================================= */

/* トップページの配色は変更せず、下層ページだけ色調を変える */
body.subpage{
  --bg:#08121a;
  --bg2:#0b1720;
  --panel:#0e1d27;
  --panel2:#122632;
  background:var(--bg);
}
body.subpage > header{background:rgba(7,14,20,.97)}
body.subpage .page-hero{
  background:
    radial-gradient(circle at 80% 20%,rgba(132,176,67,.10),transparent 32%),
    linear-gradient(180deg,#0a1720,#08121a);
}
body.subpage .service-card:hover{background:#142733}
body.subpage .team-box,
body.subpage .item,
body.subpage .ladder .stage,
body.subpage .price-card,
body.subpage .tn-toc a,
body.subpage .tn-compare>div,
body.subpage .wf-step,
body.subpage .dcp-flow>div,
body.subpage .sound-stage{background:var(--panel)}

/* STAFF — 名前をクリックすると本人プロフィール全文を展開 */
.staff-profile{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.staff-profile summary{list-style:none;cursor:pointer;padding:34px 0;display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.staff-profile summary::-webkit-details-marker{display:none}
.staff-profile summary:hover .staff-name{color:var(--green2)}
.staff-summary-copy .staff-name{transition:.18s}
.profile-open-label{color:var(--green2);font-size:.9rem;white-space:nowrap}
.profile-open-label span{display:inline-block;margin-left:7px;font-size:1.2rem;transition:.2s}
.staff-profile[open] .profile-open-label span{transform:rotate(45deg)}
.staff-profile-body{max-width:900px;padding:4px 0 42px;border-top:1px solid rgba(255,255,255,.07)}
.staff-profile-body p{color:#c6d0d5;margin:22px 0}
.staff-profile-body p:first-child{font-size:1.25rem;color:#fff;font-weight:700;margin-top:30px}
.profile-url{color:var(--green2);text-decoration:underline;text-underline-offset:4px}
.profile-url:hover{color:#c4e78a}
@media(max-width:700px){.staff-profile summary{grid-template-columns:1fr}.profile-open-label{white-space:normal}.staff-profile-body{padding-bottom:30px}}