:root{--ink:#24212d;--lavender:#e9ddfa;--paper:#fffbfe;--blush:#f8c5e5;--pink:#f8d3e8;--gutter:24px;--header:76px;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 20px)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.8;-webkit-text-size-adjust:100%}body.menu-open{overflow:hidden}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}img,video{display:block;max-width:100%;object-fit:cover}button:disabled{cursor:default;opacity:.35}[hidden]{display:none!important}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #e867a2;outline-offset:5px}em{font-style:normal}::selection{background:var(--blush);color:var(--ink)}.skip-link{position:fixed;top:10px;left:10px;z-index:100;background:white;padding:10px;transform:translateY(-180%)}.skip-link:focus{transform:none}.header{position:absolute;z-index:30;top:0;left:0;right:0;min-height:var(--header);display:flex;align-items:center;gap:20px;padding:12px var(--gutter);color:white}.brand{align-items:center;font-size:34px;line-height:1;font-weight:700;}.menu-toggle{display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);width:48px;height:48px;flex-shrink:0;border-radius:50%;position:relative;z-index:32}.menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.menu-lines,.menu-lines:after{width:18px;height:1px;background:currentColor;display:block;position:absolute;transition:transform .25s}.menu-lines{transform:translateY(-3px)}.menu-lines:after{content:"";transform:translateY(6px)}[aria-expanded=true] .menu-lines{transform:rotate(45deg)}[aria-expanded=true] .menu-lines:after{transform:rotate(-90deg)}.mainmenu{background:var(--lavender);color:var(--paper);padding:100px var(--gutter) 36px;display:grid;gap:10px}.mainmenu a{line-height:1.7;border-bottom:1px solid #ffffff30}.mainmenu a span{font-size:12px;color:var(--blush);vertical-align:middle;margin-right:12px}.js .mainmenu{position:fixed;inset:0;z-index:29;overflow:auto;align-content:center;padding-top:96px;padding-bottom:90px}.menu-open .header{position:fixed}.home__mv{min-height:680px;height:100svh;max-height:1100px;position:relative;background:var(--lavender);color:white;overflow:hidden}.hero-media,.hero-media:after,.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%}.hero-media img,.hero-media video{object-position:50% 50%}.hero-media:after{content:"";}.hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:92px;will-change:transform}.hero-copy>p{line-height:1.9;}.hero-copy h1{font-weight:500;position:relative}.hero-bottom{position:absolute;bottom:28px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.06em}.hero-bottom button{background:#292235ce;color:white;font-size:12px;padding:10px}.section-pad{padding:80px var(--gutter)}.eyebrow{letter-spacing:.075em;line-height:1.4}.home__about .eyebrow{margin-bottom:64px}.overline{font-size:16px;margin-bottom:24px}.intro-body{margin-top:34px}.intro-body p{margin-top:24px;font-size:16px;line-height:2.2}.intro-foot{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em}.home__method{background:var(--lavender);color:var(--paper);padding:68px 0 26px}.section-heading{padding:0 var(--gutter);margin-bottom:30px}.section-heading h2{font-size:clamp(40px,11vw,105px);letter-spacing:-.065em;line-height:1.1;margin-top:20px;white-space:nowrap}.method-guide{margin-top:22px;font-size:14px}.swipe-hint{display:block;margin-top:20px;color:var(--blush);font-size:12px;letter-spacing:.07em}.cards-window{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}.cards-window::-webkit-scrollbar{display:none}.slider-wrapper{display:flex;gap:14px;list-style:none;margin:0;padding:0;width:max-content}.jungle-card{width:80vw;max-width:420px;min-height:440px;position:relative;overflow:hidden;scroll-snap-align:start}.card-content{position:relative;z-index:1;min-height:440px;padding:24px;display:flex;flex-direction:column}.card-no{font-size:12px;letter-spacing:.02em}.jungle-card h3{font-size:clamp(42px,12vw,72px);letter-spacing:-.06em;line-height:1.1;margin-top:auto;margin-bottom:14px}.jungle-card p{line-height:1.9}.card-bottom{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.02em;border-top:1px solid currentColor;padding-top:16px;margin-top:26px}.type-art{margin:auto 0;display:block}.slider-footer{padding:20px var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}.card-navigation{display:flex;gap:10px;align-items:center;white-space:nowrap}.card-navigation button{width:44px;height:44px;border:1px solid #ffffff50;background:transparent;border-radius:50%;font-size:22px}.card-navigation span{min-width:48px;text-align:center}.display-title{font-size:clamp(43px,12.4vw,120px);line-height:.94;letter-spacing:-.06em}.home__people .display-title{margin:30px 0 34px}.accent-period{color:#8c3673}.people-visual img{aspect-ratio:4/5;width:100%;height:auto;object-position:center}.people-copy{margin-top:36px}.people-copy h3{margin-bottom:24px}.people-copy p{font-size:16px}.roles{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:24px 0 0}.roles li{border:1px solid #24212d40;padding:4px 12px;font-size:12px;border-radius:30px}.home__audition{background:#24212d;color:var(--paper)}.audition-layout .display-title{font-size:clamp(64px,17vw,126px)}.audition-layout em{color:var(--blush)}.audition-copy{line-height:1.8;}.audition-details{margin-top:56px;border-top:1px solid #ffffff50;padding-top:30px;scroll-margin-top:20px}.audition-details>p{font-size:14px;color:#ded5e4}.audition-details dl{margin:30px 0 24px}.audition-details dl>div{display:grid;gap:16px;padding:17px 0;border-bottom:1px solid #ffffff25;font-size:14px}.audition-details dd{margin:0;color:#ded5e4;overflow-wrap:anywhere}.entry-status{scroll-margin-top:100px}.entry-link{display:flex;align-items:center;justify-content:space-between;border:1px solid #ffffff80;margin-top:22px;padding:16px 20px;min-height:60px;font-size:16px}.entry-link span{font-size:26px;line-height:1}.entry-link:hover{background:var(--blush);color:var(--ink)}.belief-content{margin-top:58px}.last-cta{background:var(--lavender);color:var(--paper);padding-bottom:40px}.last-cta h2{font-size:clamp(56px,16vw,160px);line-height:.9;letter-spacing:-.06em;margin-top:42px}.last-cta h2 em{color:var(--blush)}.last-cta-bottom{display:flex;align-items:center;gap:16px;}.round-link{width:108px;height:108px;border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;font-size:12px;line-height:1.5}.round-link>span[aria-hidden]{font-size:32px}.footer-brand{font-size:24px;font-weight:600;letter-spacing:-.05em;padding-bottom:20px;}.mobile-entry{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));min-height:60px;border-top:1px solid #43334c20;}.mobile-entry>span:first-child{font-size:18px;letter-spacing:-.02em}.mobile-entry>span:last-child{font-size:14px}.mobile-entry>span:last-child>span{margin-left:20px}.menu-open .mobile-entry{visibility:hidden}
@media(min-width:760px){:root{--gutter:5vw;--header:90px}.header{padding-top:20px}.brand{font-size:40px}.mobile-break{display:none}.hero-bottom{font-size:12px}.section-pad{padding-block:110px}.intro-content{margin:auto;display:grid;}.overline{grid-column:1/-1}.intro-body{margin-top:0;align-self:center}.intro-foot{font-size:12px}.section-heading h2{font-size:86px}.method-guide{display:flex;justify-content:space-between;align-items:center}.swipe-hint{margin:0}.jungle-card{width:370px}.card-content{min-height:450px;padding:28px}.jungle-card h3{font-size:64px}.people-visual{margin-left:auto}.people-copy{grid-template-columns:1fr 1fr;gap:60px;}.audition-layout{display:grid;}.audition-details{margin-top:0;}.home__concept{display:grid;gap:60px;}.belief-content{margin:0}.last-cta{position:relative;}.last-cta h2{font-size:clamp(90px,12vw,160px)}.last-cta-bottom{position:absolute;right:var(--gutter);flex-direction:column-reverse;gap:24px}.footer{padding-bottom:35px}.mobile-entry{display:none}.js .mainmenu{padding-inline:18vw}.desktop-scroll.home__method{padding:0}.desktop-scroll .method-sticky{position:sticky;top:0;padding-top:42px;padding-bottom:16px}.desktop-scroll .cards-window{scroll-snap-type:none}.desktop-scroll .section-heading{margin-bottom:22px}.desktop-scroll .section-heading h2{font-size:64px}.desktop-scroll .method-guide{margin-top:14px}}
@media(max-width:359px){:root{--gutter:18px}.jungle-card{width:84vw}.card-content{padding:20px}.card-no{font-size:12px}.slider-footer{gap:8px}.slider-footer>span{font-size:12px}.last-cta-bottom{align-items:flex-end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.hero-copy{transform:none!important}.cards-window{scroll-behavior:auto}}
@media print{.header,.mainmenu,.mobile-entry,.card-navigation,.hero-bottom,.home__mv{height:600px}.home__method{height:auto!important}.method-sticky{position:static!important}.cards-window{overflow:visible}.slider-wrapper{width:auto;flex-wrap:wrap}.jungle-card{width:45%;break-inside:avoid}.section-pad{padding:35px}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

@media(max-width:759px){.hero-media img,.hero-media video{object-position:44% center}.hero-bottom{flex-wrap:wrap}.card-bottom{overflow-wrap:anywhere}}

/* Reference palette: luminous pink, lilac, pale blue, with neutral charcoal type. */
:root{--accent:#843969;--iridescent:linear-gradient(125deg,#d9f6ff 0%,#e8ddff 37%,#fbd5ec 72%,#fff0d9 100%)}
.mainmenu,.home__method,.last-cta{background:var(--iridescent);color:var(--ink)}
.mainmenu a,.footer-brand{border-color:#43334c30}
.mainmenu a span,.swipe-hint,.last-cta h2 em{color:var(--accent)}
.menu-open .header{color:var(--ink)}
.card-navigation button{border-color:#43334c65}
.lavender-card{background:linear-gradient(145deg,#e2d7ff,#d9f3fc);color:var(--ink)}
.cream-card{background:linear-gradient(145deg,#fff7f9,#f9e6fb);color:var(--ink)}
.pink-card{background:linear-gradient(145deg,#f9cfe9,#ffeadc);color:var(--ink)}
.round-link{background:var(--ink);color:#fff2fb}
.mobile-entry{background:linear-gradient(110deg,#e3dcff,#fbd0e9 75%,#ffe8e0);color:var(--ink)}
.home__about{background:linear-gradient(180deg,#fffbfe 60%,#f2edff)}
.home__concept{background:linear-gradient(140deg,#fffbfe 35%,#fce7f3 100%)}
.brand{display:block;width:140px;padding:10px 12px;background:transparent;letter-spacing:normal;flex-shrink:0}
.hero-copy h1{font-size:inherit;line-height:1;letter-spacing:normal;width:100%;max-width:760px}
.hero-copy{color:var(--ink)}
.hero-copy>p{font-weight:500}
.hero-media:after{background:linear-gradient(180deg,#f6e8f400 0%,#f6e8f400 42%,#f6e8f4eb 74%,#f8eafa 100%)}
.hero-bottom{color:var(--ink)}

@media(min-width:760px){.brand{width:180px}}
@media(max-width:359px){.brand{width:116px;padding:8px}.header{gap:12px}}

/* Footer: 1 : 1.618 spacing and a centered wordmark at 61.8% width. */
.footer-brand{padding-block:34px 55px;border-bottom-color:#43334c30}

.entry-link[aria-disabled="true"]{cursor:default;background:transparent}
.entry-link[aria-disabled="true"]:hover{background:transparent;color:inherit}

/* Recruitment declaration: large type with scroll-linked line emphasis. */
.manifesto-lead{font-size:1.5em;line-height:1.35;margin-bottom:12px;letter-spacing:-.065em}
.manifesto-finale{margin-top:4px;font-size:1.08em}
.manifesto-mark{padding:0 .06em;background-image:linear-gradient(100deg,#f5a8d5,#edb9ec);background-repeat:no-repeat;background-position:left 86%;background-size:calc(var(--line-progress,1)*100%) 48%;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(min-width:760px){.manifesto-lead{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.manifesto-mark{background-size:100% 48%}}

/* Editorial Mincho treatment for the recruitment statement. */
.recruit-manifesto .manifesto-lead{font-weight:500;letter-spacing:.025em;line-height:1.5;margin-bottom:14px}
.recruit-manifesto .manifesto-finale{font-size:1.04em;margin-top:8px}
.recruit-manifesto .manifesto-mark{background-image:linear-gradient(100deg,#f4c4e3,#e9d1f1);background-position:left 88%;background-size:calc(var(--line-progress,1)*100%) 26%}
@media(prefers-reduced-motion:reduce){.recruit-manifesto .manifesto-mark{background-size:100% 26%}}

/* Soft scroll-triggered entrance, retaining the Mincho typography. */
.manifesto-line{opacity:1;transform:none;filter:none}

/* Quiet editorial typography; benefits remain in the audition details. */
.intro-body .recruit-manifesto{font-size:clamp(25px,6.3vw,42px);margin-bottom:36px}
.recruit-manifesto .manifesto-lead,.recruit-manifesto .manifesto-finale{font-size:1em;line-height:inherit;letter-spacing:inherit;margin:0}
.recruit-manifesto .manifesto-mark{background:none;padding:0}
.intro-body .intro-support{line-height:2.2;font-weight:400;color:#5d5661;margin-top:0}

/* Retain the full message, with no promotional boxes or numerical emphasis. */
.intro-body .intro-conditions>p{line-height:2.1;font-weight:400;letter-spacing:.04em;margin:0 0 15px;color:#675468}
.condition-tags{display:flex;flex-wrap:wrap;gap:10px}
.condition-tags p{margin:0;padding:8px 15px;font-size:15px;line-height:1.6;letter-spacing:.02em;}

/* Brand mark: JUNGLE TOKYO THE EMPIRE crest. Vertical lockup, so size by height. */
.brand-logo{width:auto;max-width:none;object-fit:contain}
.header .brand{width:auto;padding:0;display:flex;align-items:center}
@media(min-width:760px){.header .brand{width:auto}}
@media(max-width:359px){.header .brand{width:auto;padding:0}}

/* Recruitment detail: positions and the statutory terms, inside the dark audition band. */
.positions,.terms{margin-top:64px;border-top:1px solid #ffffff50;padding-top:30px}
.positions h3,.terms h3{font-size:22px;margin-bottom:12px}
.block-lead{font-size:14px;color:#ded5e4;margin-bottom:26px}
.position-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.position-list>li{border:1px solid #ffffff30;padding:22px}
.position-name{font-size:20px;letter-spacing:.05em;margin-bottom:6px}
.position-pay{font-size:15px;color:var(--blush);margin-bottom:16px}
.position-list dl{margin:0}
.position-list dl>div{padding:8px 0;border-top:1px solid #ffffff20;font-size:13px}
.position-list dt{color:#ded5e4;margin-bottom:4px}
.position-list dd{margin:0}
.terms-list{margin:0}
.terms-list>div{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;padding:17px 0;border-bottom:1px solid #ffffff25;font-size:14px}
.terms-list dd{margin:0;color:#ded5e4;overflow-wrap:anywhere}
@media(min-width:760px){.positions,.terms{margin-top:90px}.position-list{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:759px){.terms-list>div{grid-template-columns:1fr;gap:4px}.terms-list dt{color:#ded5e4;font-size:13px}}
/* Standalone legal page: operator info and privacy policy. */
.legal-body{background:var(--paper);color:var(--ink)}
.legal-header{padding:20px var(--gutter);background:var(--lavender)}
.legal-header .brand-logo{height:64px}
.legal-main{max-width:760px;margin-inline:auto;padding:56px var(--gutter) 80px}
.legal-title{font-size:clamp(28px,7vw,44px);line-height:1.35;letter-spacing:-.04em;margin-bottom:48px}
.legal-section{margin-top:56px}
.legal-section:first-of-type{margin-top:0}
.legal-section h2{font-size:17px;margin:32px 0 10px;padding:0;border:0}
.legal-section p{font-size:15px;line-height:2}
.legal-list>div{border-bottom-color:#43334c25}
.legal-list dd{color:var(--ink)}
.legal-list dt{color:#5c5268}
.legal-bullets{font-size:15px;line-height:2;padding-left:1.3em;margin:8px 0 0}
.legal-date{font-size:13px;color:#5c5268;margin-top:40px}
.legal-section .block-lead{color:#5c5268}
.legal-section .entry-link{border-color:#43334c50;margin-top:28px}
.legal-footer{background:#f1e5fa;padding:26px var(--gutter);font-size:13px;letter-spacing:.03em}

/* 404 page. */
.notfound{max-width:720px;margin-inline:auto;padding:72px var(--gutter) 96px}
.notfound-code{font-size:clamp(72px,18vw,132px);line-height:1;letter-spacing:-.05em;color:var(--accent);margin-bottom:18px}
.notfound-title{font-size:clamp(24px,6vw,38px);line-height:1.5;letter-spacing:-.03em;margin-bottom:24px}
.notfound-lead{font-size:15px;line-height:2;color:#5c5268}
.notfound-links{margin-top:44px;display:grid;gap:14px}
.notfound .entry-link{border-color:#43334c50}
@media(min-width:760px){.notfound{padding-block:110px 130px}.notfound-links{grid-template-columns:1fr 1fr}}
/* 追従バーはフッターが視界に入った時点で隠れるので、バー用の退避余白は要らない */
.footer{background:#f1e5fa;color:var(--ink);padding:64px var(--gutter)}
.footer>.footer-inner{display:block;margin-inline:auto}
.footer-brand{display:block;text-align:center;padding:0;border-bottom:0;margin-bottom:16px}
.footer-brand .brand-logo{height:102px;margin-inline:auto}
.footer-tagline{text-align:center;font-size:12px;letter-spacing:.1em;color:#5c5268;margin-bottom:52px}
.footer-nav{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-social{display:flex;gap:24px}
.footer-social a{display:inline-flex;color:inherit}
.footer-social a:hover{color:var(--accent)}
.footer-links{display:flex;gap:24px;font-size:13px;letter-spacing:.06em}
/* 下線をborderで作ると箱が下に伸び、アイコンと文字の中心がずれる。
   下線はtext-decorationで引き、箱は文字そのものの高さに保つ。 */
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-copyright{margin-top:28px;text-align:center;font-size:12px;letter-spacing:.1em;line-height:1.9;color:#5c5268}
@media(max-width:759px){.footer{padding-top:56px;padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}.footer-brand .brand-logo{height:74px}.footer-tagline{margin-bottom:40px}.footer-links{font-size:12px;gap:16px}}

/* 追従バー: スライドインだと途中の状態が「下が切れた」ように見えるため、
   位置は固定したままフェードで出し入れする。閉じている間は操作対象から外す。 */
.mobile-entry{transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
.mobile-entry.visible{transform:none;opacity:1;visibility:visible;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.mobile-entry{transition:none}}

/* Legal pages: footer now carries two links plus the copyright. */
.legal-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.legal-footer a{border-bottom:1px solid transparent;padding-bottom:2px}
.legal-footer a:hover{border-bottom-color:currentColor}
.legal-footer .footer-copyright{flex-basis:100%;margin-top:6px;text-align:left;letter-spacing:.06em}
@media(min-width:760px){.legal-footer .footer-copyright{flex-basis:auto;margin-top:0;margin-left:auto;text-align:right}}

/* PC版のレイアウト調整。いずれも内容が左半分に寄り、右が大きく空いていた。 */
@media(min-width:760px){
  /* 01 ABOUT US: 2列に見えて実際は左列しか使っておらず、右列が丸ごと空いていた。
     見出しを左、本文を右に置いて両方を使う。 */
  .intro-content{grid-template-columns:1.1fr 1fr;column-gap:80px;align-items:start}
  .intro-content .overline{grid-column:1;}
  .intro-content h3{grid-column:1;}
  .intro-content .intro-body{grid-column:2;margin-top:0}
  .intro-body .recruit-manifesto{max-width:none;margin-top:0}
  .intro-body>p:not(.recruit-manifesto){max-width:none}

  /* 03 PEOPLE: 画像を右78%に寄せていたため、見出しの下に大きな空白が出ていた。
     左に見出しと本文、右に画像を並べる。 */
  .home__people{display:grid;align-items:start}
  .home__people .eyebrow{grid-column:1/-1}
  .home__people .display-title{margin:28px 0 0;
                               font-size:clamp(56px,5.4vw,86px)}
  .people-visual{width:100%;margin:0;}
  .people-copy{grid-column:1;display:block;margin-top:44px}
  .people-copy .roles{margin-top:28px}

  /* 04 AUDITION: 右列が長く、左列は早く終わって下half が空白になっていた。
     左を貼り付けて、読み進める間も見出しが残るようにする。 */
  .audition-layout>div:first-child{position:sticky;top:110px;align-self:start}

  /* 05 WE BELIEVE: 左に本文、右に画像。見出し番号は上に逃がす。 */
  .home__concept{column-gap:80px;
                 }
  .home__concept .eyebrow{grid-column:1/-1;}
}

/* WE BELIEVE のビジュアル枠。スマホは見出しラベルの直下に置く。 */
.belief-visual{margin:0}
.belief-visual img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover}
@media(max-width:759px){
  .home__concept{display:flex;flex-direction:column}
  .home__concept .eyebrow{order:1}
}

/* 01と05は英字の大見出しを h2 にしたため、日本語の見出しは h3 が受ける。
   従来 h2 に当てていた指定をそのまま引き継ぐ。 */
.intro-content h3{font-size:clamp(26px,6.9vw,52px);line-height:1.8;letter-spacing:-.05em;font-weight:500}
.intro-content h3 em{color:#8c3673}
.belief-content h3{line-height:1.65;letter-spacing:-.03em;font-weight:500}
@media(min-width:760px){
  .home__about .display-title{font-size:clamp(56px,5.4vw,86px);margin-bottom:52px}
  .home__concept .display-title{grid-column:1/-1;font-size:clamp(56px,5vw,78px);}
}
@media(max-width:759px){
  .home__about .display-title{margin-bottom:34px}
  .home__concept .display-title{order:2;}
  .belief-visual{order:3}
  .belief-content{order:4}
}
@media(max-width:359px){.intro-content h3{font-size:25px}}

/* セクションの横幅を揃える。gutter だけで決まるようにし、
   個別の max-width による内寄せをやめる。 */
.intro-content{max-width:none;margin-inline:0}
.home__concept{max-width:none;margin-inline:0}
.footer>.footer-inner{max-width:none}

/* 320px幅で05の見出しが余裕3pxしかなかったため、下限を少し下げる */
.home__about .display-title,
.home__people .display-title,
.audition-layout .display-title,
.home__concept .display-title{font-size:clamp(36px,11.6vw,64px)}
@media(min-width:760px){
  .home__about .display-title,
  .home__people .display-title,
  .audition-layout .display-title,
  .home__concept .display-title{font-size:clamp(48px,6.4vw,104px)}
}

/* スマホの03と05の画像は gala-resort.jp/story/ の THE PLACE に合わせる。
   参考側の .exp に左右パディングはなく画面端まで届くため、
   セクションの余白分だけ外へ出して全幅にする。高さは280px。 */
@media(max-width:759px){
  .people-visual,
  .belief-visual{margin-inline:calc(var(--gutter) * -1)}
  .people-visual img,
  .belief-visual img{aspect-ratio:auto;height:280px;width:100%;object-fit:cover}
}

/* PEOPLE の見出しを全幅にする。列の中に置くと見出しの上限がその幅で決まり、
   他のセクションより先に頭打ちになるため。本文と画像は下段で左右に分ける。 */
@media(min-width:760px){
  .home__people .display-title{grid-row:2}
  .people-copy{grid-row:3}
  .people-visual{grid-row-end:auto}
}

/* 見出しラベルと大見出しの間隔を02に合わせて全セクション20pxに揃える。
   間隔はラベル側の margin-bottom だけで決め、見出し側の margin-top は持たせない。 */
.home__about .eyebrow,
.home__people .eyebrow,
.home__audition .eyebrow,
.home__concept .eyebrow,
.home__method .eyebrow,
.home__about .display-title,
.home__people .display-title,
.home__concept .display-title,
.section-heading h2,
.last-cta h2{margin-top:0}
.audition-layout{margin-top:0}
@media(max-width:759px){.home__concept .display-title{margin-top:0}}
@media(min-width:760px){
  .home__about .display-title,
  .home__people .display-title,
  .home__concept .display-title{margin-top:0}
}

/* 間隔の指定は同じでも line-height が違うと見た目の余白がずれる。
   02だけ1.1、他が0.94だったため、全ての大見出しを同じ行送りに揃える。
   05はグリッドの行間60pxが上乗せされていたので、行間を0にする。 */
.home__concept{row-gap:0}
.home__about .display-title,
.home__people .display-title,
.audition-layout .display-title,
.home__concept .display-title,
.section-heading h2,
.desktop-scroll .section-heading h2,
.last-cta h2{line-height:.94}
.home__about .eyebrow,
.home__people .eyebrow,
.home__audition .eyebrow,
.home__concept .eyebrow,
.home__method .eyebrow,
.last-cta .eyebrow{margin-bottom:26px}
@media(min-width:760px){.home__concept .eyebrow{margin-bottom:26px}}

/* 本文の文字サイズを16pxに揃える。15px・17px・18pxが混在していた。 */
.intro-body .intro-support{font-size:16px}
.intro-body .intro-conditions>p{font-size:16px}
.jungle-card p{font-size:16px}
.belief-content p{font-size:16px}

/* ラベルを14pxへ。大見出しは1440pxのとき142pxになる係数にしている。 */
.eyebrow{font-size:14px}
.home__about .display-title,
.home__people .display-title,
.audition-layout .display-title,
.home__concept .display-title,
.section-heading h2,
.desktop-scroll .section-heading h2,
/* SPの係数は「PEOPLE IN / THE JUNGLE.」がはみ出さない上限(360pxで約14.84vw)から
   少し引いた値。この2行が全大見出しの中でいちばん横に長い。 */
.last-cta h2{font-size:clamp(45px,14.7vw,86px)}
@media(min-width:760px){
  .home__about .display-title,
  .home__people .display-title,
  .audition-layout .display-title,
  .home__concept .display-title,
  .section-heading h2,
  .desktop-scroll .section-heading h2,
  .last-cta h2{font-size:clamp(66px,9.86vw,168px)}
}

/* 大見出しの下の余白を、ラベルと大見出しの間隔と同じ26pxに揃える。
   間隔は見出し側の margin-bottom だけで決め、続く要素の margin-top は持たせない。 */
.home__about .display-title,
.home__people .display-title,
.audition-layout .display-title,
.home__concept .display-title,
.section-heading h2,
.last-cta h2{margin-bottom:26px}
.home__about .intro-content,
.method-guide,
.desktop-scroll .method-guide,
.people-copy,
.audition-copy,
.belief-content,
.last-cta-bottom{margin-top:0}

/* WE BELIEVE は行の縦中央揃えのため、画像の高さに引きずられて本文が下がっていた。
   上揃えにして、見出しとの間隔が他と同じになるようにする。
   スマホは見出しの直後が画像なので、画像側の余白は持たせない。 */
@media(min-width:760px){.home__concept{align-items:start}}
@media(max-width:759px){.belief-visual{margin-top:0}.belief-content{margin-top:26px}}

/* CTAの「その一歩を、ここから。」を見出しの直下・左揃えに置く。
   大きさと見出しとの距離は AUDITION の導入文に合わせる。
   ボタンだけが .last-cta-bottom に残り、PCでは右下に絶対配置される。 */
.last-cta-copy{font-size:19px;line-height:1.8;margin:0}
.last-cta-bottom{justify-content:flex-end;}

/* CTAボタンの位置。スマホはコピーとの余白を詰め、PCは少し上へ。 */
.last-cta-bottom{margin-top:18px}
@media(min-width:760px){.last-cta-bottom{margin-top:0;}}

/* スマホはボタンをコピーの右横に上げる。縦に積むとボタンが画面下に離れすぎるため。 */
@media(max-width:759px){
  .last-cta{display:grid;grid-template-columns:1fr auto;align-items:center;}
  .last-cta .eyebrow,
  .last-cta h2{grid-column:1/-1}
  .last-cta-copy{grid-column:1}
  .last-cta-bottom{grid-column:2;margin:0}
}

/* 横並びにするとコピーの幅が足りず折り返す。22pxにした結果、
   一行に必要な幅は242pxとなり、414px以上でしか成立しない。
   それ未満はボタンを下に戻して一行を保つ。 */
@media(max-width:759px){.last-cta{column-gap:10px}}
@media(max-width:413px){
  .last-cta{display:block}
  .last-cta-bottom{justify-content:flex-end}
}

/* PCのCTAボタンを大きくする。固定値だと768〜1024pxで見出しに重なるため、
   画面幅に追従させる。 */
@media(min-width:760px){
  .round-link{width:clamp(140px,13.5vw,220px);height:clamp(140px,13.5vw,220px);font-size:clamp(16px,1.45vw,24px)}
  .round-link>span[aria-hidden]{font-size:clamp(38px,3.6vw,58px)}
}

/* ホバーで配色を反転させる。触って操作する端末では反転が残るので対象外。 */
.round-link{transition:background-color .25s,color .25s}
@media(hover:hover){
  .round-link:hover{background:#fff2fb;color:var(--ink)}
}

/* CTAボタンは矢印を上、文字を下にする。 */
.round-link{flex-direction:column-reverse}
/* WE BELIEVE の本文を1行にまとめる改行。2列組みのため列幅が必要で、
   実測では1360px以上でないと収まらない。それ未満は改行を残す。 */
@media(min-width:1360px){.wide-break{display:none}}

/* WE BELIEVE は画像を左、文章を右に置く。 */
@media(min-width:760px){
  .belief-content{grid-column:2}
}

/* WE BELIEVE はラベル・見出し・本文をすべて右の列に置き、左は画像だけにする。 */
@media(min-width:760px){
  .home__concept .eyebrow,
  .home__concept .display-title,
  .belief-content{grid-column:2}
  .belief-visual{grid-column:1;grid-row:1/span 3}
}

/* WE BELIEVE の本文。行送りが2.2で他より広く、段落の間隔も
   結びの一文だけ42pxで揃っていなかった。他の本文と同じ1.8にし、間隔も揃える。 */
.belief-content p{line-height:1.8;margin-top:28px}
.belief-content .belief-last{margin-top:28px}

/* WE BELIEVE の本文はPCでCTAの一文と同じ22pxにする。 */
@media(min-width:760px){.belief-content p{font-size:22px}}

/* 結びの一文は .belief-last の指定が優先されるため、PCの22pxが効いていなかった。
   同じ強さの指定で揃える。 */
.belief-content .belief-last{font-size:16px}
@media(min-width:760px){.belief-content .belief-last{font-size:22px}}

/* WE BELIEVE の小見出し。PC36px、スマホ28px。 */
.belief-content h3{font-size:28px}
@media(min-width:760px){.belief-content h3{font-size:32px}}

/* 小見出しを1行にするには列幅が足りなかったため、文章側の列を広げる。
   本文の行間も詰める。 */
@media(min-width:760px){
  .home__concept{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}

/* 段落の間隔をさらに詰める。行送りが上下に余白を生むので、
   余白は小さめにして字面どうしの距離で合わせる。 */
@media(min-width:760px){
  .belief-content p{line-height:1.5;margin-top:8px}
  .belief-content .belief-last{margin-top:8px}
}

/* WE BELIEVE の本文をPCで少し小さく。 */
@media(min-width:760px){
  .belief-content p,
  .belief-content .belief-last{font-size:20px}
}

/* スマホの小見出しとCTAの一文を22pxにする。 */
@media(max-width:759px){
  .belief-content h3{font-size:22px}
  .last-cta-copy{font-size:22px}
}

/* スマホでは「その一歩を、ここから。」を見出しに近づける。
   縦積みのときはボタンの位置が動かないよう、同じ分だけ上余白を足す。 */
@media(max-width:759px){.last-cta h2{margin-bottom:14px}}
@media(max-width:413px){.last-cta-bottom{margin-top:26px}}

/* 横並びのときは行の中央に揃うため、一文がボタンの高さ分だけ下がっていた。
   上揃えにして見出しとの距離を保つ。縦積みでは影響しない。 */
@media(max-width:759px){.last-cta-copy{align-self:start}}

/* PCのCTAの一文を、WE BELIEVEの小見出しと同じサイズにする。 */
@media(min-width:760px){.last-cta-copy{font-size:32px}}

/* WE BELIEVEの小見出しとCTAの一文を、大見出しに近づける。 */
@media(min-width:760px){
  .home__concept .display-title{margin-bottom:14px}
  .last-cta h2{margin-bottom:14px}
}

/* PCでは画像の高さを右の文章の高さに合わせる。
   縦横比の固定をやめ、枠いっぱいに伸ばして中央を切り出す。 */
@media(min-width:760px){
  .belief-visual{align-self:stretch}
  .belief-visual img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover}
}

/* 2つ目の改行は中間の幅でだけ出す。
   スマホは2行（才能は、／一人で完成するものじゃない。）、
   1360px以上は1行、その間は3行になる。 */
.mid-break{display:none}
@media(min-width:760px) and (max-width:1359px){.mid-break{display:inline}}

/* 360px未満は「一人で完成するものじゃない。」が入りきらないため、
   小見出しだけ少し詰める。 */
@media(max-width:359px){.belief-content h3{font-size:19px}}

/* AUDITIONの導入文を、CTAの一文と同じ大きさにする。 */
.audition-copy{font-size:22px}
@media(min-width:760px){.audition-copy{font-size:32px}}

/* AUDITIONの導入文と支援コピー末尾を、1280px以上では1文1行にする。
   導入文は638px、末尾の2文は604px必要。その幅からテキスト列を広げて改行を外す。 */
.lap-break{display:inline}
@media(min-width:1280px){
  .lap-break{display:none}
}

/* AUDITIONの支援コピーを、PC版では左カラムの導入文の下に置く。
   PC版は1文1行で空行なし、SP版は4文を1段落に流す。 */
.audition-support{margin-top:20px}
.audition-support>p{font-size:14px;line-height:1.8;color:#ded5e4}
.support-restored,.support-restored p{margin-top:0}
.support-restored p{font-size:16px;line-height:2.1;font-weight:400;color:#ded5e4}

/* 支援コピー末尾の改行は、760〜1279pxでだけ入れる。
   1280px以上は1行に収まり、SP版は1段落に流すため不要。 */
.support-tail-break{display:none}
@media(min-width:760px) and (max-width:1279px){.support-tail-break{display:inline}}

/* SP版は4文を1つの段落として続けて流す。
   1段落に混在させられないので、文字サイズも16pxに揃える。 */
@media(max-width:759px){
  .audition-support>p,.support-restored,.support-restored p{display:inline}
  .audition-support>p{font-size:16px;line-height:2.1}
}

/* 「条件は、かわいいだけ。」を導入文の上に置き、同じ文字サイズで3行続けて見せる。
   3行のかたまりとして読ませたいので、行間は本文より詰める。 */
.audition-heading{font-size:22px;font-weight:500;margin:0}
.audition-heading,.audition-copy{line-height:1.6}
.audition-copy{margin-top:0}
/* 大見出しとの距離は WE BELIEVE にそろえる（PC 14px / SP 26px）。
   このサイトの約束どおり、間隔は見出し側の margin-bottom だけで決める。
   SPの26pxは共通値なので、AUDITION側の指定を外すだけでそろう。 */
@media(min-width:760px){
  .audition-layout .display-title{margin-bottom:14px}
  .audition-heading{font-size:32px;margin-top:0}
}

/* 募集要項は2列にする。項目が17件あり1列だと縦に長すぎるため。
   1023px以下は内容欄が200px前後まで細って折り返しが増えるので1列のまま。 */
@media(min-width:1024px){
  /* 2列にするのはトップページの募集要項だけ。
     運営者情報ページも .terms-list を使っているが、本文幅が狭く2列だと窮屈になる。 */
  .terms .terms-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
}

/* PC版は見出し欄を128px固定にして、回答を左へ寄せる。
   最長の「社会保険・労働保険」が126pxなので折り返さない。 */
@media(min-width:760px){
  .terms-list>div{grid-template-columns:128px 1fr;column-gap:12px}
}

/* 32px/22pxでそろえたリード文は、行間も AUDITION と同じ1.6にする。 */
.belief-content h3,.last-cta-copy,.intro-content h3{line-height:1.6}

/* PC版のAUDITION右列は、上の罫線をやめて下ぞろえにする。
   左列のほうが背が高いので、応募ボタンの下端が支援コピーの最終行にそろう。 */
@media(min-width:760px){
  /* 3.4px は注記(14px)と支援コピー(16px)のベースライン差。
     これを打ち消して、最終行の文字の下端をそろえる。 */
  .audition-details{border-top:0;padding-top:0;align-self:end;margin-bottom:3.4px}
}

/* PC版のAUDITION右列を少し左へ。列間を詰め、右列の取り分を増やす。
   左列は1280pxで638px必要(導入文が1文1行に収まる幅)なので、それを割らない範囲で調整。 */
@media(min-width:760px){
  .audition-layout{grid-template-columns:1.1fr 1fr;gap:60px}
}
@media(min-width:1280px){
  .audition-layout{grid-template-columns:minmax(642px,1.15fr) minmax(0,1fr);gap:40px}
}

/* AUDITIONの募集条件も、回答を少し左へ。見出し欄の取り分を 1/2.1 から 1/2.6 に減らす。
   幅に応じて伸縮させるため、募集要項のような固定幅にはしない（768pxで回答欄が細くなりすぎる）。 */
.audition-details dl>div{grid-template-columns:1fr 1.6fr}

/* AUDITIONの応募ボタンは縦幅を伸ばし、文字も少し大きくする。
   配色は反転させ、暗い背景に対して塗りのボタンにする。
   ホバーでブラッシュに変わるのは既存の .entry-link:hover のまま。
   404ページの同クラスには影響させない。 */
.audition-details .entry-link{min-height:88px;padding-block:20px;font-size:18px;
                              background:var(--paper);color:var(--ink);border-color:var(--paper)}
.audition-details .entry-link span{font-size:30px}

/* 反転したボタンのホバー。既存の .entry-link:hover より後ろに同順位の指定を置いたため、
   このセレクタで上書きし直す。 */
.audition-details .entry-link{transition:background-color .25s,border-color .25s,color .25s}
@media(hover:hover){
  .audition-details .entry-link:hover{background:var(--blush);border-color:var(--blush);color:var(--ink)}
}

/* ボタンを先、注記を後にしたので、余白を持ち替える。 */
.audition-details .entry-link{margin-top:0}
.audition-details .entry-status{margin-top:14px}

/* PC版でだけ入れる改行。.mobile-break の逆。 */
.pc-break{display:none}
@media(min-width:760px){.pc-break{display:inline}}

/* PEOPLE & CULTURE の見出しはAUDITIONのリードと、本文はWE BELIEVEの本文と同じ体裁にする。 */
.people-copy h3{font-size:22px;line-height:1.6}
@media(min-width:760px){
  .people-copy h3{font-size:32px}
  .people-copy p{font-size:20px;line-height:1.5}
}

/* PC版のPEOPLEは、画像を大見出しの横から通し、上は大見出し・下は文章とそろえる。
   画像は絶対配置にして高さの計算から外し、行の高さは左の列だけで決める。 */
@media(min-width:760px){
  .home__people .display-title{grid-column:1}
  .people-visual{grid-column:2;grid-row:2/span 2;align-self:stretch;position:relative;overflow:hidden}
  .people-visual img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}

/* SP版のPEOPLEは、画像と文章の距離をWE BELIEVEと同じ26pxにする。 */
@media(max-width:759px){.people-copy{margin-top:26px}}

/* PC版のPEOPLEの縦の間隔を、WE BELIEVEと同じにする。
   大見出し→小見出し 14px、小見出し→本文 8px。 */
@media(min-width:760px){
  .home__people .display-title{margin-bottom:14px}
  .people-copy h3{margin-bottom:8px}
}

/* PC版のPEOPLEの画像幅を、WE BELIEVEと同じにする。
   WE BELIEVEは minmax(0,1fr) minmax(0,1.3fr) / 列間80px で画像が1fr側。
   PEOPLEは左右が逆なので 1.3fr 1fr / 列間80px にすると同じ幅になる。 */
@media(min-width:760px){
  .home__people{grid-template-columns:1.3fr 1fr;column-gap:80px}
}

/* ABOUT USの2つの文を、PEOPLE / WE BELIEVE の本文と同じ体裁にする。
   .intro-body .intro-support と .intro-body p が既にあるので、詳細度を上げる。 */
.home__about .overline,.home__about .intro-support,.home__about .intro-conditions>p{font-size:16px;line-height:1.8}
@media(min-width:760px){
  .home__about .overline,.home__about .intro-support,.home__about .intro-conditions>p{font-size:20px;line-height:1.5}
}

/* 「その挑戦を、私たちが本気で支えます。」と「本気の挑戦を、支えるために。」を
   続けて読ませる。間の30pxの余白をやめる。 */
.intro-conditions{margin-top:0}

/* 「ここには、…」をAUDITIONのリードと同じ32pxにする(PC版のみ)。 */
@media(min-width:760px){.intro-content h3{font-size:32px}}

/* 条件タグを .intro-content の直下に出した。
   PC版は「まだ名前のない才能が集まってくる。」の下(左列)に置く。
   右列(.intro-body)が背が高いので、余った高さは4行目に逃がす。
   そうしないと2〜3行目が引き伸ばされ、タグが見出しから離れてしまう。 */
.condition-tags{margin-top:15px}
@media(min-width:760px){
  .intro-content{grid-template-rows:auto auto auto 1fr}
  .intro-content .intro-body{grid-row:1/span 4}
  .intro-content .condition-tags{grid-column:1;}
}

/* PC版のABOUT USは、右列(日本一の〜支えるために。)を大見出しの横まで上げる。
   大見出しの右が大きく空いていたため、セクションごと2列にして右列を最上部から置く。
   .intro-content は display:contents にして、中の要素を直接セクションの格子へ載せる。 */
@media(min-width:760px){
  /* マニフェストを最上段に置き、以下は1列で流す。 */
  .home__about{display:grid;
               grid-template-rows:auto auto auto auto auto auto 1fr auto}
  .home__about>.eyebrow{grid-row:1}
  .home__about>.display-title{grid-row:2}
  .home__about>.intro-content{display:contents}
  .intro-content .overline{grid-row:3}
  .intro-content h3{grid-row:4}
  .intro-content .intro-note{grid-row:5;}
  .intro-note .intro-support,.intro-note .intro-conditions,
  .intro-note .intro-conditions>p{display:inline}
  .intro-content .condition-tags{grid-row:6;margin-top:26px}
  .home__about>.intro-foot{grid-row:8}
}
/* .intro-body の外に出したことで色指定(.intro-body .intro-support など)が
   当たらなくなったため、付け直す。1行に流すので前半の色にそろえる。 */
.intro-note .intro-support,.intro-note .intro-conditions>p{color:#5d5661}

/* ABOUT USの縦の間隔を、WE BELIEVE / PEOPLE と同じにする(PC版)。
   大見出し→次=14px、そこから下の本文どうし=8px。 */
@media(min-width:760px){
  .home__about>.display-title{margin-bottom:14px}
  .home__about .overline{margin-bottom:8px}
  .intro-content .intro-note{margin-top:8px}
}

/* SP版のABOUT USの縦の間隔を、他セクションと同じ26px刻みにする。 */
@media(max-width:759px){
  .home__about .overline{margin-bottom:26px}
  /* マニフェストは先頭に移したので、下側だけ余白を持たせる。 */
  .home__about>.intro-body{margin-top:0;}
  .intro-body .recruit-manifesto{margin-top:0;margin-bottom:0}
  .intro-content .intro-note{margin-top:26px}
  .intro-content .condition-tags{margin-top:26px}
}

/* ABOUT USをWE BELIEVEと同じ構成にする。左に画像、右にラベル以下を縦に並べる。
   画像は絶対配置にして行の高さの計算から外し、高さは右列だけで決める。 */
@media(min-width:760px){
  .home__about{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:80px}
  .home__about>.intro-body{grid-column:1/-1;grid-row:1}
  .about-visual{grid-column:1;grid-row:1/span 6;align-self:stretch;
                position:relative;overflow:hidden;margin:0}
  .about-visual img{position:absolute;inset:0;width:100%;height:100%;
                    aspect-ratio:auto;object-fit:cover}
  .home__about>.eyebrow{grid-column:2}
  .home__about>.display-title{grid-column:2}
  .intro-content .overline,.intro-content h3,
  .intro-content .intro-note,.intro-content .condition-tags{grid-column:2}
  .home__about>.intro-foot{grid-column:1/-1}
}
/* SP版は他セクションと同じく、大見出しの下に全幅で置く。前後の余白も26px。 */
@media(max-width:759px){
  .about-visual{margin:26px calc(var(--gutter) * -1)}
  .about-visual img{aspect-ratio:auto;height:280px;width:100%;object-fit:cover}
  .home__about>.intro-body{margin-bottom:26px}
}
/* SP版もPC版と同じく、1つの文として流し、行送りも詰める。 */
.home__manifesto{
  padding:18px var(--gutter);
  
}
@media(min-width:760px){
  /* 帯の中で上下をそろえるため、残っていた margin-bottom:36px を落とす。 */
  .intro-body .recruit-manifesto{margin-bottom:0}
}

/* 大見出しの最後の単語に色を入れる。AUDITIONの YOU. / CTAの JUNGLE. と同じ考え方。
   明るい背景のセクションは、文末の点と同じ #8c3673。暗い背景はブラッシュ。 */
.home__about .display-title em,
.home__people .display-title em,
.home__concept .display-title em,
.section-heading h2 em{color:#8c3673}

/* 02のリード文を、PEOPLEの小見出し「違うから、おもしろい。」と同じ体裁にする。 */
.method-guide p{font-size:22px;line-height:1.6;font-weight:500}
@media(min-width:760px){.method-guide p{font-size:32px}}

/* 02の大見出しとリード文の間隔を、他セクションと同じ14pxにする(PC版)。
   SP版の26pxはサイト共通値なのでそのまま。 */
@media(min-width:760px){.section-heading h2{margin-bottom:14px}}

/* 写真を使わない方針にしたため、旧フォトカード3枚もグラデーションにする。
   他の3種は --iridescent の一部を切り出した2色。この3枚はサイト共通の
   --iridescent をそのまま使い、4色通しで他と差をつける。 */
.iris-card{background:var(--iridescent);color:var(--ink)}

/* カードの装飾を文字からアイコンへ。線は currentColor なのでカードの文字色に追従する。 */
.type-art svg{display:block;margin-inline:auto;width:clamp(104px,26vw,140px);height:auto;
              fill:none;stroke:currentColor;stroke-width:4;
              stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* 条件タグの影と塗りをやめ、PEOPLEの職種タグと同じ「線だけ」の見た目にする。
   文字サイズと余白は据え置き(こちらのほうが目立たせたいため)。 */
.condition-tags p{background:none;border:1px solid #24212d40;border-radius:30px;
                  box-shadow:none;color:var(--ink)}

/* SP版は前後ボタンとカウンターを少し小さくし、左の補助テキストに幅を回す。
   タップ領域が小さくなりすぎないよう44px→40pxに留める。 */
@media(max-width:759px){
  .slider-footer{gap:10px}
  .card-navigation{gap:6px}
  .card-navigation button{width:40px;height:40px;font-size:19px}
  .card-navigation span{min-width:40px}
}

/* 「DIFFERENT PEOPLE. / ONE JUNGLE.」の上が空きすぎていたので詰める。
   罫線を外したので、線のためにあった padding-top:18px も不要。 */
.intro-foot{margin-top:36px;padding-top:0}
@media(min-width:760px){.intro-foot{margin-top:48px}}
/* 各セクションの締めの一文。右に本文幅いっぱいまで横線を伸ばす
   (ポスターの「JUNGLE DANCERSになると ───」と同じ形)。 */
.section-note{display:flex;align-items:center;gap:16px;
              font-size:12px;line-height:1.8;letter-spacing:normal;color:#5d5661}
.section-note>span{flex:none}
.section-note::after{content:"";flex:1;border-top:1px solid #43334c30}
/* 暗い背景のAUDITIONは線と文字を明るくする。 */
.home__audition .section-note{color:#ded5e4}
.home__audition .section-note::after{border-top-color:#ffffff40}
/* 02はスライダー下の行。文と前後ボタンの間を線で埋める。 */
.slider-footer #card-help{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.slider-footer #card-help::after{content:"";flex:1;border-top:1px solid #43334c30}
@media(max-width:759px){
  /* SPは文とボタンの間に余裕がないので線は出さない。 */
  .slider-footer #card-help{display:block;flex:0 1 auto}
  .slider-footer #card-help::after{content:none}
}

/* 03と05に新設した締めの一文。01と同じくセクションの本文幅いっぱいに置く。
   親側(.audition-details>p)の文字指定のほうが強いので、12pxに揃え直す。 */
.home__people>.section-note,
.home__concept>.section-note{margin-top:36px}
.home__people>.section-note,
.home__concept>.section-note,
.home__audition .section-note{font-size:12px;line-height:1.8}
@media(min-width:760px){
  .home__people>.section-note,
  .home__concept>.section-note{grid-column:1/-1;margin-top:48px}
  /* 05は画像が1〜3行目にまたがるので、締めの一文は4行目に置く。 */
  .home__concept{grid-template-rows:auto auto 1fr auto}
  .home__concept>.section-note{grid-row:4}
}

/* セクションの上下余白を PEOPLE & CULTURE(section-pad) に統一する。
   SP 80px / PC 110px。 */
.home__method{padding-top:80px;padding-bottom:80px}
.home__concept{padding-block:80px}
.last-cta{padding-block:80px}
@media(min-width:760px){
  .home__method{padding-top:110px;padding-bottom:110px}
  .home__concept{padding-block:110px}
  .last-cta{padding-block:110px}
  /* CTAの丸ボタンは絶対配置なので、下余白に合わせる。 */
  .last-cta-bottom{bottom:110px}
  /* 02のスクロール連動時は、見出しが画面上端に固定される。ここに110pxを足すと
     固定ブロックが縦900px前後の画面に収まらず、連動そのものが無効になるため
     42pxのままにする(連動しないPC幅では上の110pxが効く)。
     縦960px以上の画面なら収まるので、そこだけ揃える。 */
  @media(min-height:960px){.desktop-scroll .method-sticky{padding-top:110px}}
}

/* SP版のWE BELIEVEは flex + order で並べているため、締めの一文にも順番を与える
   (指定なしだと order:0 で先頭に出てしまう)。 */
@media(max-width:759px){.home__concept>.section-note{order:5}}

/* SP版のWE BELIEVEは3つの段落を続けて読ませる。
   段落間の空行2箇所をなくし、行送りだけで区切る。 */
@media(max-width:759px){
  .belief-content p+p,.belief-content p+.belief-last{margin-top:0}
}

/* SP版はスワイプの案内をカードの下に置く。
   .swipe-hint は見出しブロックの中にあるので、SPだけ間の2つの箱を
   display:contents で消して .method-sticky の直接の子にし、order で並べ替える。
   箱が消える分の余白(左右のガター・段落間)は中身側に付け直す。 */
@media(max-width:759px){
  .method-sticky{display:flex;flex-direction:column}
  .method-sticky .section-heading,.method-sticky .method-guide{display:contents}
  .method-sticky .eyebrow,.method-sticky .section-heading h2,
  .method-sticky .method-guide p,.method-sticky .swipe-hint{padding-inline:var(--gutter)}
  /* 見出しと本文の間隔は、元は h2 の26pxと .method-guide の22pxが相殺されて26px。
     flexだと相殺されないので、本文側の余白は0にしてh2の26pxだけを残す。 */
  .method-sticky .method-guide p{margin-top:0;margin-bottom:30px}
  .method-sticky .swipe-hint{order:1;margin-top:20px}
  .slider-footer{order:2}
}

/* SP版のリード文は全セクション27pxで統一する。
   01だけ可変(clamp)で26〜30pxに動いていたので、そこに他を合わせた形。
   ただし27px固定だと、いちばん長い節「探しているわけじゃない。」(27pxで322px)が
   371px幅より狭い画面で折り返して不格好になる。378px以上は27px、
   それより狭い画面だけ縮めることで、6セクションが同じサイズなのは保つ。 */
@media(max-width:759px){
  .intro-content h3,
  .method-guide p,
  .people-copy h3,
  .audition-heading,
  .audition-copy,
  .belief-content h3,
  .last-cta-copy{font-size:clamp(23px,7.15vw,27px)}
}

/* ABOUT USは「ここには、まだ名前のない才能が集まってくる。」を先に出す。
   PC版は grid-row で位置を決めているので、行番号も入れ替える。
   行間は下の要素の margin-top ではなく上の要素の margin-bottom で作っているため、
   入れ替えに合わせて余白の持ち主も移す。 */
.home__about .intro-content h3{margin-bottom:26px}
.home__about .intro-content .overline{margin-bottom:0}
@media(min-width:760px){
  .home__about .intro-content h3{grid-row:3;margin-bottom:8px}
  .home__about .intro-content .overline{grid-row:4;margin-bottom:0}
}

/* 414〜479pxではCTAの一文がボタンと横並びになり、27pxだと1行に入らない。
   放っておくと「その一歩を、ここか／ら。」と句の途中で折れるため、
   2行に割れるときは読点で均等に分ける。 */
@media(max-width:759px){.last-cta-copy{text-wrap:balance}}

/* リード文の強調語。ABOUT USの「才能」と同じ扱いを各セクションにも広げる。
   明るい背景は見出しのアクセントと同じ #8c3673、
   暗いAUDITIONはブラッシュ、ラベンダーのCTAは見出しと同じ var(--accent)。 */
.method-guide p em,
.people-copy h3 em,
.belief-content h3 em{color:#8c3673}
.audition-heading em{color:var(--blush)}
.last-cta-copy em{color:var(--accent)}

/* AUDITIONのCTAは、文字と矢印が枠の端に寄りすぎていたので左右の余白を広げる。
   359px以下は文字と矢印の間が4pxまで詰まるので、そこだけ元の20pxのまま。 */
@media(min-width:360px){.audition-details .entry-link{padding-inline:32px}}

/* ボタンの文字だけ太く。矢印は太らせると線が重くなるので元のままにする。 */
.audition-details .entry-link{font-weight:500}
.audition-details .entry-link span{font-weight:400}

/* マニフェストは3行・中央揃えにし、上下の余白を他セクションと揃える。 */
.manifesto-line{display:block}
.home__manifesto{padding-block:80px}
.home__manifesto .intro-body{margin-top:0}
.intro-body .recruit-manifesto{text-align:center;margin-block:0}
@media(min-width:760px){.home__manifesto{padding-block:110px}}
/* 帯の横幅いっぱいまで文字を大きくする。
   いちばん長い行はSPが「かわいい・かっこいい」(文字サイズの8.94倍)、
   PCが「かわいい・かっこいいグループを」(13.55倍)。
   その上限の約96%を採り、左右にわずかな余裕を残している。 */
@media(max-width:759px){.intro-body .recruit-manifesto{font-size:clamp(24px,7.9vw,48px)}}
@media(min-width:760px){.intro-body .recruit-manifesto{font-size:min(5.1vw,81px)}}

/* 字送りはなし。中央揃えなので、末尾の字送りぶんのズレも起きない。
   文字サイズは詰めても大きくせず、上の指定のままにしている。 */
.intro-body .recruit-manifesto{letter-spacing:0}
.recruit-manifesto .manifesto-line{padding-left:0}

/* マニフェストも他セクションと同じゴシックにする。
   明朝用に入れていた palt も外し、本文と同じ字形にそろえる。 */
.intro-body .recruit-manifesto{font-feature-settings:normal}

/* 行間を詰める。大きい文字ほど1.4は空きすぎて見えるため。 */
.intro-body .recruit-manifesto{line-height:1.2}

/* マニフェストは背景画像をやめ、濃色の帯に白文字。 */
.home__manifesto{position:relative;background:var(--ink);color:var(--paper)}

/* 写真の上なので、白文字は太いほうが読みやすい。
   1行目と3行目には個別の font-weight:400 が残っているので、そこも継承に戻す。 */
.intro-body .recruit-manifesto{font-weight:600}
.recruit-manifesto .manifesto-lead,
.recruit-manifesto .manifesto-finale{font-weight:inherit}

/* CTAにも締めの一文を置く。他セクションと同じく本文幅いっぱいに横線を引く。
   414px以上はCTAがグリッドでボタンが右列を取るため、行全体にまたがらせる。 */
.last-cta>.section-note{grid-column:1/-1;margin-top:36px;font-size:12px;line-height:1.8}
@media(min-width:760px){.last-cta>.section-note{margin-top:48px}}

/* ヒーロー下部の「SCROLL TO EXPLORE / CONCEPT VISUAL」をやめ、
   他セクションと同じ「一文＋横線」に置き換える。
   ヒーロー下端は明るくフェードするので、色は他の明るいセクションと同じ。 */
.hero-bottom .section-note{flex:1;min-width:0}

/* 「まだ知らない自分に、会いにいく。」をロゴの下へ。
   余白は下側に持っていたので、同じ値を上側に移す（SP24px / PC30px）。 */
.hero-copy>p{margin-bottom:0;margin-top:24px}

/* ロゴ下のコピーを各セクションのリード文と同じ大きさにし、字送りを広げる。
   字送りを .13em→.2em にすると1行が長くなるため、SPの下限も少し下げてある
   (27px固定だと「まだ知らない自分に、」が387pxより狭い画面で3行に割れる)。 */
.hero-copy>p{font-size:clamp(13px,4.35vw,22px);letter-spacing:.2em}

/* SP版は2行になるので行間を詰め、そのぶん位置を少し下げる。 */
@media(max-width:759px){
  .hero-copy>p{line-height:1.5}
}

/* ヒーローのコピー位置をもう少し下へ（SP 76→66px / PC 85→70px）。 */
@media(max-width:759px){.hero-copy{bottom:66px}}
@media(min-width:760px){.hero-copy{bottom:70px}}

/* ヒーローのロゴをベクター（余白を切り詰めたSVG）に差し替え。
   .logo-crop のCSSトリミングは不要になったので使わない。 */
.hero-copy h1>.hero-logo{display:block;width:100%;height:auto;max-width:none}

/* SP版のヒーローは中央揃え。字送りは最後の1文字の後ろにも入るので、
   同じ量の内側余白を左に足して見た目の中心を合わせる。 */
@media(max-width:759px){
  .hero-copy{text-align:center}
  .hero-copy>p{padding-left:.2em}
}

/* SP版はロゴだけを少し下げる。下端で固定しているので、
   ロゴと一文の間隔を詰めるとロゴが下に動く（24px→12px＝12px下がる）。 */
@media(max-width:759px){.hero-copy>p{margin-top:12px}}

/* SP版の背景写真を少し上へ。
   SP用画像(1080x1920)は枠の高さにちょうど収まり縦のはみ出しが0なので、
   object-position の縦方向は効かない。10%拡大して上へずらす。 */
@media(max-width:759px){.hero-media img{height:112%;top:-12%;object-position:50% center}}

/* PC版はコピーを右端（下の横線の右端）に揃え、ロゴを少し下げる。
   字送りは最後の1文字の後ろにも入るので、その分だけ右へ出して文字の端を合わせる。 */
@media(min-width:760px){
  .hero-copy>p{margin-right:-.2em;margin-top:14px}
}

/* PC版はロゴとコピーを横並びにし、下端をそろえる。
   コピーは残り幅に収まるサイズにする（1行あたり文字サイズの19.2倍が必要）。 */
@media(min-width:760px){
  /* 左にロゴ＋コピー（下の一文と左をそろえる）、右にCTAボタン。
     ボタンはコピーの文字下端にそろえる。 */
  .hero-copy{display:grid;grid-template-columns:1fr auto;column-gap:clamp(24px,3vw,56px);align-items:end}
  .hero-copy h1{grid-column:1;grid-row:1;width:100%;max-width:none;margin:0}
  
/* 行の高さの余白(0.4em)ぶん下げて、箱ではなく文字の下端を基準にする。 */
  .hero-copy>p{grid-column:1;grid-row:2;justify-self:start;text-align:left;
    margin:0 0 -.4em;font-size:min(36px,2.3vw)}
}

/* ヘッダーの「AUDITION ↗」を、CTAと同じ丸ボタンにしてヒーロー内へ移す。
   SPはヘッダーと追従バーがあるので従来どおり。 */
.hero-entry{display:none}
@media(min-width:760px){
  /* 大きさも位置もYOUR NEXT CHAPTER.のボタンと同じ。
     あちらはボタンの下端が締めの一文の線より11px下に出るので、同じ関係にする。 */
  .hero-entry{display:flex;grid-column:2;grid-row:1/span 2;align-self:end;justify-self:end;
    width:clamp(140px,13.5vw,220px);height:clamp(140px,13.5vw,220px);font-size:clamp(16px,1.45vw,24px);
    margin:0 0 -42px}
  .hero-entry>span[aria-hidden]{font-size:clamp(38px,3.6vw,58px)}
}

/* PC版の背景写真も少し上へ。PC用画像(2560x1440)も枠の高さにちょうど収まり
   縦のはみ出しが0なので、object-position では動かない。8%拡大してずらす。 */
@media(min-width:760px){.hero-media img{height:108%;top:-8%}}

/* ヘッダーのAUDITIONを削除したので、バーガーを右端へ寄せる。 */
.menu-toggle{margin-left:auto}

/* 左上のロゴは黒。ヒーロー上部は写真が明るいので白より読める。 */
.header .brand-logo{filter:brightness(0)}

/* 左上のロゴを120%に（SP 56→67px / PC 72→86px / 359px以下 48→58px）。 */
.header .brand-logo{height:67px}
@media(min-width:760px){.header .brand-logo{height:86px}}
@media(max-width:359px){.header .brand-logo{height:58px}}

/* メニューの項目名を長くしたので、1行に収まるサイズにする。
   いちばん長い「06 YOUR NEXT CHAPTER」は文字サイズの約11.7倍の幅が必要。 */
.mainmenu a{font-size:clamp(21px,6vw,48px)}
@media(min-width:760px){.mainmenu a{font-size:min(48px,5.3vw)}}

/* ヒーローのタイトルロゴを80%に。SPは中央揃えなので左右の余白を自動にする。
   PCは本文幅(画面の90%)の46%の80%＝33.1vw、上限480px。 */
@media(max-width:759px){.hero-copy h1>.hero-logo{width:80%;margin-inline:auto}}
@media(min-width:760px){.hero-copy h1>.hero-logo{width:min(33.1vw,480px)}}

/* PC版だけ、ヒーローのグラデーションを真下から10度ぶん左下へ傾ける。 */
@media(min-width:760px){
  .hero-media:after{background:linear-gradient(190deg,#f6e8f400 0%,#f6e8f400 42%,#f6e8f4eb 74%,#f8eafa 100%)}
}

/* SP版にもヒーローのCTAボタンを出す。狭いので丸ではなく横長の角丸にし、
   ロゴ→コピー→ボタンの順に並べる。 */
@media(max-width:759px){
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy h1{order:1}
  .hero-copy>p{order:2}
  .hero-entry{display:flex;order:3;flex-direction:row;justify-content:center;align-items:center;
    gap:14px;width:100%;height:44px;border-radius:999px;font-size:15px;letter-spacing:.06em;
    margin-top:18px}
  .hero-entry>span[aria-hidden]{font-size:22px;line-height:1}
}

/* SP版だけ、下からの白いグラデーションをもう少し上まで伸ばす。 */
@media(max-width:759px){
  .hero-media:after{background:linear-gradient(180deg,#f6e8f400 0%,#f6e8f400 30%,#f6e8f4eb 66%,#f8eafa 100%)}
}

/* PC版はコピーだけを少し下げる。位置指定で動かすので、
   ロゴとCTAボタンの位置は変わらない。 */
@media(min-width:760px){.hero-copy>p{position:relative;top:10px}}

/* マニフェストは本文と同じゴシック体にする（2026-09-15）。
   手書き風の Zen Kurenaido（SIL OFL 1.1 / サブセット3.4KB）は
   assets/jungle/fonts/ に残してある。戻すときは下の2つを復活させる。
   使っていない @font-face は読み込まれないので、置いたままでも重くならない。

   @font-face{
     font-family:"Zen Kurenaido Subset";
     src:url("fonts/zen-kurenaido-subset.woff2?v=20260915") format("woff2");
     font-weight:100 900;font-style:normal;font-display:swap;
   }
   .intro-body .recruit-manifesto{font-family:"Zen Kurenaido Subset",Arial,...}
*/

/* 印刷時の不具合を直す。
   1. スキップリンクが全ページに刷り込まれていた
   2. マニフェストの文字がJSの出現演出待ちのまま透明で、帯だけが黒く刷られていた
   3. カードの英字見出しが枠からはみ出していた */
@media print{
  .skip-link{display:none!important}
  .manifesto-line{opacity:1!important;transform:none!important;filter:none!important}
  .jungle-card h3{font-size:40px}
  .jungle-card h3.long-word{font-size:28px}
}

/* 320px幅では、文末が1〜2文字だけ次の行に落ちる箇所が出る。
   text-wrap:pretty は最後の数行だけを調整して、この「ぶら下がり」を避ける。
   対応していないブラウザでは何も起きない（従来どおりの折り返し）。
   360px以上は行の折り返しを実測で詰めてあるので、この指定は359px以下だけにする。 */
@media(max-width:359px){
  .intro-support,.intro-conditions>p,.audition-copy,.belief-content p,
  .people-copy p,.jungle-card p,.last-cta-copy,.block-lead{text-wrap:pretty}
}
/* 募集要項と募集職種は折り返しを手で詰めていないので、ぶら下がりを自動で避ける。
   PC版も列が狭く末尾が1文字だけ落ちる箇所があるため、全幅で有効にする。 */
.terms-list dd,.positions dd,.audition-details dd{text-wrap:pretty}
@media(max-width:759px){.roles li{text-wrap:pretty}}

/* AUDITIONセクションの項目名を、リード文の「かわいい」と同じピンクにする。
   （日給・レッスン・面接日時などの概要、募集職種、募集要項すべて） */
.audition-details dt,.position-list dt,.terms-list dt{color:var(--blush)}

/* PC版のAUDITIONの支援コピー3文を同じ大きさに揃える（1文目だけ14pxだった）。 */
@media(min-width:760px){
  .audition-support>p{font-size:16px;line-height:2.1}
}

/* ============================================================
   出現アニメーション
   ------------------------------------------------------------
   設計方針
   1. 動きは1種類だけ。「14px下から上がりながら現れる」。
      拡大・回転・ぼかしは使わない。目が語彙を覚えられる。
   2. 順番で階層を示す。ラベル → 大見出し → リード → 本文 →
      補足 → 締めの一文。1つあたり80msずらす。
   3. 0.6秒で終える。減速カーブ（.22,1,.36,1）で静かに着地させる。
   4. 画面に入ってから動かす。手前で終わらせない。
   5. 一度だけ。戻ってもやり直さない。
   6. 動きを減らす設定の人には、いっさい動かさない。
   ============================================================ */

:root{
  --reveal-shift:14px;
  --reveal-time:.6s;
  --reveal-ease:cubic-bezier(.22,1,.36,1);
  --reveal-step:80ms;
}

/* JSが動く環境だけで隠す。JSが無ければ最初から見えている。 */
.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-shift));
  transition:opacity var(--reveal-time) var(--reveal-ease),
             transform var(--reveal-time) var(--reveal-ease);
  transition-delay:calc(var(--reveal-order,0) * var(--reveal-step));
  will-change:opacity,transform;
}
.js [data-reveal].is-visible{opacity:1;transform:none;will-change:auto}

/* ヒーローは読み込み直後に、短い間隔で立ち上げる。
   スクロールを待たせず、かつ順番は感じさせる。 */
.js .hero-copy h1,
.js .hero-copy>p,
.js .hero-entry,
.js .hero-bottom .section-note{
  opacity:0;
  transform:translateY(var(--reveal-shift));
  transition:opacity .7s var(--reveal-ease),transform .7s var(--reveal-ease);
}
.js .hero-copy h1{transition-delay:0ms}
.js .hero-copy>p{transition-delay:110ms}
.js .hero-entry{transition-delay:220ms}
.js .hero-bottom .section-note{transition-delay:330ms}
.js .hero-ready .hero-copy h1,
.js .hero-ready .hero-copy>p,
.js .hero-ready .hero-entry,
.js .hero-ready .hero-bottom .section-note{opacity:1;transform:none}

/* 動きを減らす設定のときは、すべて即座に最終状態にする。 */
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],
  .js .hero-copy h1,.js .hero-copy>p,.js .hero-entry,.js .hero-bottom .section-note,
  .js .manifesto-line{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* 印刷では、まだ画面に出ていない要素も必ず刷る。 */
@media print{
  .js [data-reveal],.js .manifesto-line,
  .js .hero-copy h1,.js .hero-copy>p,.js .hero-entry,.js .hero-bottom .section-note{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ============================================================
   02 WHAT MAKES THE JUNGLE? のスクロール連動を働かせる
   縦スクロールでカードが横に流れる動きは、見出しからカードまでの
   固定ブロックが画面の高さに収まったときだけ有効になる（site.js の measure）。
   大見出しを他セクションと揃えて拡大したことで収まらなくなり、
   縦800pxの画面では連動しなくなっていた。
   固定中は見出しが出しっぱなしの枠になるため、その間だけ控えめにして
   ブロックの高さを 823px → 745px に戻す。
   ============================================================ */

@media(min-width:760px){
  .desktop-scroll .section-heading h2{font-size:clamp(56px,5.2vw,86px)}
  .desktop-scroll .section-heading{margin-bottom:18px}
  .desktop-scroll.home__method .eyebrow{margin-bottom:20px}
  .desktop-scroll .method-guide p{font-size:24px}
}

/* ============================================================
   ヒーローの背景写真を画面に貼り付ける
   節の高さは1画面ぶんのまま変えない。画像だけを position:fixed で
   画面に固定し、clip-path でヒーローの枠内に切り抜く。
   スクロールしても画像は動かず、枠が上へ抜けるのに合わせて
   下から消えていく。スクロール量は増えないので余白が出ない。
   ============================================================ */

.js .home__mv{clip-path:inset(0)}
.js .hero-media{position:fixed;transform:translateZ(0)}

/* 写真を固定すると、文字が写真に対して動いて顔や髪に重なる。
   スクロールを始めたら写真全体を白く沈めて、文字を読めるようにする。
   止まっているときは 0 なので、最初の見え方は変わらない。 */
.js .hero-media:before{content:"";position:absolute;inset:0;z-index:1;
  background:#f8eafa;opacity:var(--hero-veil,0);pointer-events:none}
.js .hero-media:after{z-index:2}

/* 動きを減らす設定のときは貼り付けない（写真も一緒に流れる） */
@media(prefers-reduced-motion:reduce){
  .js .hero-media{position:absolute;transform:none}
  .js .hero-media:before{display:none}
}
@media print{
  .js .home__mv{clip-path:none}
  .js .hero-media{position:absolute;transform:none}
  .js .hero-media:before{display:none}
}

/* ============================================================
   AUDITIONセクションの締めのCTA
   募集要項が長く（SPで2,100px超）、読み終えた先に応募先がなかった。
   セクションの最後にもう一度だけ置く。
   ============================================================ */

/* 見た目は上のCTA（.audition-details .entry-link）と完全に同じにする。
   あちらは .audition-details の中にあることで白いボタンになっているが、
   こちらはセクション直下に置くため、同じ指定を明示する。 */
.entry-link-foot{
  min-height:88px;padding-block:20px;font-size:18px;font-weight:500;
  background:var(--paper);color:var(--ink);border-color:var(--paper);
  transition:background-color .25s,border-color .25s,color .25s;
  margin-top:44px;
}
.entry-link-foot span{font-size:30px;line-height:1;font-weight:400}
@media(min-width:360px){.entry-link-foot{padding-inline:32px}}
@media(hover:hover){
  .entry-link-foot:hover{background:var(--blush);border-color:var(--blush);color:var(--ink)}
}
.entry-link-foot + .section-note{margin-top:16px;color:#ded5e4}
.entry-link-foot + .section-note:after{border-top-color:#ffffff40}
/* PCでは出さない。2段組みで一覧が短く収まり、上のCTAから遠くならないため。
   スマホだけ、募集要項を読み終えた先に置く。 */
@media(min-width:760px){
  .entry-link-foot,.entry-link-foot + .section-note{display:none}
}

/* ============================================================
   マニフェスト帯の背景写真
   かぶせは置かず、写真をそのまま出す。
   ============================================================ */

.home__manifesto{
  background-image:url("images/photo/manifesto.webp?v=20260915e");
  background-size:cover;
  background-position:50% 22%;
  background-repeat:no-repeat;
}

/* ============================================================
   写真の寄せと位置の調整
   ============================================================ */

/* マニフェスト帯の背景：少し拡大して、少し下げる。
   cover の寄り方が縦横で変わるため、拡大の指定を画面幅で分ける。 */
.home__manifesto{background-position:50% 10%}
@media(max-width:759px){.home__manifesto{background-size:auto 112%}}
@media(min-width:760px){.home__manifesto{background-size:112% auto;background-position:50% 24%}}

/* PEOPLE と WE BELIEVE の写真を少し拡大（PC・SP とも） */
.people-visual,.belief-visual{overflow:hidden}
.people-visual img,.belief-visual img{--img-zoom:1.12}

/* ABOUT US の写真はスマホだけ少し拡大 */
@media(max-width:759px){
  .about-visual{overflow:hidden}
  .about-visual img{--img-zoom:1.12}
}

/* PEOPLE & CULTURE と WE BELIEVE の写真は、PCだけ左へ寄せる。
   枠が縦長で写真が横長のため、切り抜きの中に横方向で約300pxの余地がある。
   transform ではなく object-position で寄せると、拡大率を変えずに大きく動かせる。 */
@media(min-width:760px){
  .people-visual img,.belief-visual img{object-position:68% center}
}

/* ============================================================
   マニフェストは1行ずつ帯で受ける
   帯は文字の幅ぶんだけ。display:table + 左右autoで中央に置く。
   写真は行と行のあいだからも見える。
   ============================================================ */

.intro-body .recruit-manifesto .manifesto-line{
  display:table;margin-inline:auto;
  background:rgba(255,251,254,.92);
  /* 帯は文字にぴったり沿わせる。行間ではなく行送りを詰めて縦幅を抑える。 */
  line-height:1.1;
  padding:.05em .42em;
}
/* 帯と帯のあいだに写真を見せる。3本に分かれて見える幅にしている。 */
.intro-body .recruit-manifesto .manifesto-line + .manifesto-line{margin-top:.2em}


/* PC・SPとも左揃え。帯も左端にそろえる。 */
.intro-body .recruit-manifesto{text-align:left}
.intro-body .recruit-manifesto .manifesto-line{margin-inline:0 auto}

/* マニフェストの文字を8割の大きさにして、帯ごと少し下へ下げる。
   上下の余白を振り分けて動かすので、セクションの高さは変わらない。 */
@media(max-width:759px){
  /* スマホでも3行に収める。2行目「かわいい・かっこいいグループを」が
     1行に入る上限は画面幅の約5.6%（帯の左右の余白0.84emを含む実測）。
     余裕をみて5.2vwにしている。 */
  .intro-body .recruit-manifesto{font-size:min(5.2vw,42px)}
  .home__manifesto{padding-block:128px 32px}
}
@media(min-width:760px){
  .intro-body .recruit-manifesto{font-size:min(4.08vw,65px)}
  .home__manifesto{padding-block:182px 38px}
}

/* 帯は白、文字は濃色。 */
.intro-body .recruit-manifesto{color:var(--ink)}

/* ============================================================
   写真の動き
   枠は他の要素と同じく14px上がりながら現れる（0.6秒）。
   そのあと写真だけが、わずかに寄った状態から元の大きさへ収まる。

   曲線は文字と別のものを使う。文字用の cubic-bezier(.22,1,.36,1) は
   前半に寄っていて、0.6秒（枠が出そろう頃）には96%終わってしまい、
   動きがほとんど見えなかった。下の設定では0.6秒時点で56%、
   1.55秒かけて収まるので、枠が現れたあとも動きが続く。

   拡大率は --img-zoom に持たせ、寄せの指定（object-position）とは干渉させない。
   ============================================================ */

.js figure[data-reveal] img{
  transform:scale(calc(var(--img-zoom,1) * 1.08));
  transform-origin:50% 50%;
  transition:transform 1.4s cubic-bezier(.25,.46,.45,.94) .15s;
  will-change:transform;
}
.js figure[data-reveal].is-visible img{
  transform:scale(var(--img-zoom,1));
  will-change:auto;
}
/* 拡大していない写真も、同じ指定で扱えるようにしておく */
.people-visual img,.belief-visual img,.about-visual img{transform:scale(var(--img-zoom,1))}

@media(prefers-reduced-motion:reduce){
  .js figure[data-reveal] img{transform:scale(var(--img-zoom,1))!important;transition:none!important}
}
@media print{
  .js figure[data-reveal] img{transform:scale(var(--img-zoom,1))!important;transition:none!important}
}

/* ============================================================
   JSが動かない環境の受け皿
   メニューはHTMLの時点で hidden にしてある。最初の描画から
   本文を押し下げないようにするため（JSで隠すと一度描画されてしまう）。
   JSが動かないときだけ、その場に開いた状態で出す。
   ============================================================ */

html:not(.js) .mainmenu[hidden]{display:grid!important}
html:not(.js) .menu-toggle{display:none}

/* 丸ボタンの文字は円の中で折り返す。はみ出さないよう幅を内側に収める。 */
.round-link{text-align:center}

/* 丸ボタンの中の文字は、円の内側で折り返す。
   円に外接する正方形いっぱいだと角がはみ出すので、幅を内側に収める。 */
/* 丸ボタンの中の文字は「公式LINEで／応募・相談する」の2行で組む。
   幅の上限はボタン幅に対する割合で持たせる（ボタン側に % の余白を付けると
   親要素の幅が基準になって崩れる）。上限は、指定した改行のまま入る値にしてある。 */
.round-link>.cta-text{max-width:84%;text-align:center}

/* スマホのヒーローだけは横長のボタンなので、1行のまま出す。 */
@media(max-width:759px){
  .hero-entry .cta-break{display:none}
}

/* 丸ボタンの矢印は行送りを詰める。そのぶん文字が円の広い位置へ上がり、
   2行目が円の細いところに掛からなくなる。
   さらに矢印だけを少し上へずらす。position でずらすので、
   文字の位置と円の中の収まりには影響しない。 */
.round-link>span[aria-hidden]{line-height:1;position:relative;top:-.12em}

/* 中身（矢印と文字）を円の中で少し上へ。下側に余白をとって、
   中央揃えの基準そのものを上げている。em なので円の大きさに比例する。
   スマホのヒーローだけは横長のボタンなので、この調整は掛けない。 */
.round-link{padding-bottom:.8em}
@media(max-width:759px){
  .hero-entry{padding-bottom:0}
  .hero-entry>span[aria-hidden]{position:static}
}