/* Information is drawn from the supplied copy. No invented distributions. */
.visual-story{--visual-green:#076d5c}
.visual-story [hidden]{display:none!important}
.visual-story :is(button,summary){font-family:inherit}
.visual-story :is(button,summary,a):focus-visible{outline:2px solid #076d5c;outline-offset:5px}
.visual-story .page-hero{background:#fff!important;padding-bottom:50px}
.visual-story .page-title{font-size:clamp(30px,3vw,42px);font-weight:500}
.visual-story .page-lead{font-size:16px;max-width:52em}
.visual-story :is(.growth-photo-sequence,.workplace-panorama) figure{margin:0;min-width:0}
.visual-story :is(.growth-photo-sequence,.workplace-panorama) img{display:block;width:100%;height:auto}
.visual-story .growth-photo-sequence{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:18px;margin-top:44px;align-items:center}
.visual-story .growth-photo-sequence figure:first-child{margin-top:55px}
.visual-story .growth-photo-sequence figure:last-child{margin-top:-35px}
.visual-story .workplace-panorama{display:grid;grid-template-columns:1.28fr 1fr;gap:20px;margin-top:42px;align-items:start}
.visual-story .workplace-panorama figcaption{font-size:14px;margin-top:12px}

/* Company: actual work surrounds the mission on one open surface. */
.visual-story.company-visual .company-cover{padding-bottom:30px}
.visual-story.company-visual .company-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}
.visual-story.company-visual .company-jump{display:flex;gap:28px;font-size:14px}
.visual-story.company-visual .company-jump a{display:flex;gap:16px;text-decoration:none}
.visual-story.company-visual .mission-scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 24px;margin-top:60px;align-items:start}
.visual-story.company-visual .mission-scene figure{margin:0}
.visual-story.company-visual .mission-scene img{display:block;width:100%;height:auto}
.visual-story.company-visual .mission-photo-one{grid-column:1/7;grid-row:1/3;margin-top:90px!important}
.visual-story.company-visual .mission-photo-two{grid-column:9/13;grid-row:2}
.visual-story.company-visual .mission-block{grid-column:8/13;grid-row:1;margin:0;padding:0;border:0;background:none}
.visual-story.company-visual .mission-label{font-size:14px;font-weight:500;margin:0 0 24px;color:#222}
.visual-story.company-visual .mission-text{font-size:clamp(21px,1.8vw,26px);font-weight:400;line-height:2;letter-spacing:0;color:#222;padding:0;border:0;background:none}
.visual-story.company-visual .mission-text::before{display:none}
.visual-story.company-visual .company-page-description{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.visual-story.company-visual .company-story .section-inner{grid-template-columns:1fr 1.15fr;gap:7vw}
.visual-story.company-visual .company-story-aside{position:sticky;top:110px}
.visual-story.company-visual .company-story .section-head{position:static;margin-bottom:30px}
.visual-story.company-visual .company-story .section-head .label{display:none}
.visual-story.company-visual .company-team{margin:0}
.visual-story.company-visual .company-team img{width:100%;height:auto;display:block}
.visual-story.company-visual .company-prose p{font-size:17px;line-height:2.05}
.visual-story.company-visual .company-prose .company-story-close{font-size:18px;line-height:2;margin-top:30px;border:0;padding:0}
.visual-story.company-visual .company-story-point{font-weight:550;margin-top:30px}
.visual-story.company-visual .story-background{margin:24px 0;border-block:1px solid #bcb7ae;padding:18px 0}
.visual-story.company-visual .story-background summary{font-size:15px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;list-style:none}
.visual-story.company-visual .story-background summary::after{content:'＋'}
.visual-story.company-visual .story-background[open] summary::after{content:'−'}
.visual-story.company-visual .story-background[open] summary{margin-bottom:24px}
.visual-text-link{display:flex;justify-content:space-between;border-bottom:1px solid #222;padding:18px 0;text-decoration:none;font-size:15px;color:#222}
.visual-story.company-visual .principles-visual{background:#fff}
.visual-story.company-visual .principles-visual .section-inner{grid-template-columns:1fr 1.15fr;gap:0 7vw}
.visual-story.company-visual .principles-visual .section-head{grid-column:1;grid-row:1/3;display:block;margin:0}
.visual-story.company-visual .principles-visual .section-head .label{display:none}
.visual-story.company-visual .principles-scene{margin:32px 0 0;max-width:380px}
.visual-story.company-visual .principles-scene img{width:100%;height:auto;display:block}
.visual-story.company-visual .policy-block{display:block;grid-column:2;border-top:1px solid #222;margin:0;padding:24px 0 30px;align-self:start}
.visual-story.company-visual .policy-block-title{font-size:24px;line-height:1.5;display:block;cursor:default;margin:0 0 24px}
.visual-story.company-visual .policy-list li{padding:18px 0;border:0;border-bottom:1px solid #d3cfc7;font-size:17px;line-height:2}
.visual-story.company-visual .policy-list li::before{display:none}
.visual-story.company-visual .exec-list{display:block}
.visual-story.company-visual .exec-item{display:grid;grid-template-columns:clamp(150px,17vw,210px) 1fr;gap:44px;border-top:1px solid #d3cfc7;padding:36px 0;align-items:start}
.visual-story.company-visual .exec-photo{width:100%;max-width:210px;margin:0}
.visual-story.company-visual .exec-name{font-size:26px}
.visual-story.company-visual .section-h2{font-size:28px}
.visual-story.company-visual .company-executives .section-inner{max-width:1100px}

/* Training: the timeline controls the actual month-specific material. */
.visual-story.growth-visual :is(.training-visual,.career-visual,.skills-visual,.work-visual) .lp-inner{display:block}
.visual-story.growth-visual .lp-head{position:static;max-width:760px;margin-bottom:24px}
.visual-story.growth-visual .lp-head-title{font-size:clamp(26px,2.6vw,36px);font-weight:500;line-height:1.65}
.visual-story.growth-visual .lp-head-lead{max-width:760px;margin-bottom:40px}
.visual-story .training-visual{background:#f6f0e5}
.learning-map{max-width:1080px;margin:60px auto 44px}
.learning-axis{display:flex;justify-content:space-between;margin-left:270px;font-size:18px;font-weight:550;padding-bottom:20px}
.learning-lane{display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:center;margin:0 0 30px;min-height:42px}
.learning-name{font-size:17px;font-weight:500}
.learning-line{display:block;height:7px;position:relative;background:#222}
.learning-line::before{content:'';position:absolute;left:0;top:-5px;width:17px;height:17px;background:#222;border-radius:50%}
.learning-line.initial{width:42%}
.learning-line.initial::after{content:'';position:absolute;right:0;top:-5px;width:2px;height:17px;background:#222}
.learning-line.ongoing{background:#076d5c}
.learning-line.ongoing::before{background:#076d5c}
.learning-line.ongoing::after{content:'';position:absolute;right:0;top:-7px;width:18px;height:18px;border-top:4px solid #076d5c;border-right:4px solid #076d5c;transform:rotate(45deg)}
.learning-period{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin:38px 0 0;font-size:18px;font-weight:500}
.learning-period svg{width:76px;height:76px;fill:none;stroke:#222;stroke-width:3}
.learning-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:48px 0 90px}
.visual-story .learning-details .stage{padding:22px 0;border:0;border-top:1px solid #222;background:transparent;box-shadow:none}
.learning-details summary{font-size:19px;font-weight:550;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;line-height:1.7}
.learning-details summary::after{content:'＋'}
.learning-details details[open] summary::after{content:'−'}
.learning-details p{font-size:16px;line-height:2;margin-top:24px}
.visual-story .training-explorer{margin-top:0;padding:0;border:0;background:none}
.visual-story .p2-onboarding-head{display:block;margin-bottom:40px;max-width:760px}
.visual-story .p2-onboarding-head h3{font-size:29px;line-height:1.5;margin-bottom:18px}
.training-stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:44px}
.training-stops button{appearance:none;background:none;border:0;border-bottom:2px solid #222;position:relative;text-align:left;cursor:pointer;padding:0 30px 28px 0;color:#222}
.month-number{display:block;font:400 64px/1.2 var(--font-en);margin-bottom:12px;letter-spacing:-.04em}
.month-number small{font:500 15px/1.5 var(--font-base);letter-spacing:0;margin-left:10px}
.month-label{display:block;font-size:17px;font-weight:500;line-height:1.7;min-height:60px;max-width:19em}
.month-stop{position:absolute;bottom:-9px;left:0;width:16px;height:16px;border:2px solid #222;border-radius:50%;background:#f6f0e5}
.training-stops button[aria-selected=true]{color:#076d5c;border-bottom-color:#076d5c}
.training-stops button[aria-selected=true] .month-stop{background:#076d5c;border-color:#076d5c}
.training-stops button[aria-selected=true] .month-label{text-decoration:underline;text-underline-offset:6px}
.visual-story .p2-onboarding-list{list-style:none;margin:0;padding:0}
.visual-story .p2-onboarding-step{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto auto;gap:24px 5vw;border:0;background:none;margin:0 0 48px;padding:0}
.visual-story .training-step-photo{grid-column:1;grid-row:1/3;margin:0;position:sticky;top:110px;align-self:start}
.visual-story .training-step-photo img{width:100%;height:auto;display:block}
.visual-story .p2-onboarding-step>div{grid-column:2;position:static;padding:0;border:0}
.visual-story .p2-onboarding-step h4{font-size:26px;font-weight:550;line-height:1.6;margin:0}
.visual-story .p2-onboarding-detail{display:grid;grid-template-columns:1fr;gap:28px}
.visual-story .p2-onboarding-detail h5{font-size:16px;line-height:1.8;margin:0 0 12px;color:#076d5c}
.visual-story .p2-onboarding-detail li{font-size:16px;line-height:1.95;margin-bottom:12px}
.visual-story .p2-onboarding-detail ul{padding-left:1.25em;margin:0}
.visual-story .career-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px;align-items:start}
.visual-story .career-path .stage{position:relative;margin-top:calc((2 - var(--step))*62px);padding:30px 0 0;border:0;border-top:2px solid #222;background:none}
.career-mark{position:absolute;right:0;top:-42px;width:34px;height:38px}
.career-mark svg{display:block;width:100%;height:100%;fill:#222}
.visual-story .career-path .stage h4{font-size:34px;font-weight:450;line-height:1.4}
.visual-story .career-path .stage p{font-size:16px;line-height:2}
.visual-story .work-scene{width:43%;float:right;margin:0 0 36px 5vw}
.visual-story .work-scene img{display:block;width:100%;height:auto}
.visual-story .daytime{max-width:48%;padding-left:26px;border-left:2px solid #222}
.visual-story .daytime li{display:block;position:relative;padding:0 0 28px 0;border:0}
.visual-story .daytime li::before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#222;left:-33px;top:9px}
.visual-story .daytime .t{display:block;font-size:23px;font-weight:500;line-height:1.4;margin-bottom:12px}
.visual-story .daytime .d{display:block;font-size:16px;line-height:1.95}
.visual-story .work-visual .numbers-edit{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:28px 52px;border:0;padding-top:28px}
.visual-story .work-visual .nrow{display:block;border:0;border-top:1px solid #bcb7ae;padding:24px 0}
.visual-story .work-visual .nval{font-size:21px;font-weight:500;margin-bottom:16px;line-height:1.6}
.visual-story .skills-visual .skill-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px;border:0;margin-top:46px}
.visual-story .skills-visual .skill-list li{display:flex;align-items:flex-start;gap:18px;padding:0;border:0;font-size:17px;line-height:1.9}
.visual-story .skill-list .n{width:24px;flex-shrink:0}
.visual-story .skill-list .n svg{width:24px;height:27px;fill:#222;display:block;margin-top:4px}

/* The same data grammar is used on the home and workplace pages. */
.visual-story .workplace-numbers .lp-inner{display:block}
.visual-story .workplace-numbers .lp-head{position:static;margin-bottom:20px}
.stats-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:70px 6%;margin-top:54px;text-align:left}
.stats-wall .stat{position:relative;min-width:0;background:none;border:0;padding:0;margin:0;color:#222}
.stats-wall .stat-label{font-size:18px;font-weight:550;line-height:1.6;letter-spacing:0;margin:0 0 16px;color:#222}
.stats-wall .stat-value{display:block;font-family:var(--font-en);font-size:clamp(48px,5.5vw,76px);font-weight:400;line-height:1.1;letter-spacing:-.04em;color:#222;margin:0 0 18px;white-space:nowrap}
.stats-wall .stat-unit{font:500 18px/1.4 var(--font-base);margin-left:10px;letter-spacing:0}
.stats-wall .stat-note{font-size:15px;font-weight:400;line-height:1.95;color:#222;letter-spacing:.02em;margin:0;max-width:42em}
.stats-demographics{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:24px 8%;align-items:start}
.stats-demographics>.stat{display:grid;grid-template-columns:auto 1fr;gap:0 24px;align-items:center}
.stats-demographics .stat-label{grid-column:1;grid-row:1;margin:0 0 12px}
.stats-demographics .stat-value{grid-column:1;grid-row:2;margin:0}
.stats-demographics .stat-note{grid-column:2;grid-row:1/3}
.people-chart{grid-column:1/-1;margin:22px 0 0}
.people-marks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(8px,2vw,30px);padding:0 2px}
.people-marks span{display:block;min-width:0}
.people-marks svg{display:block;width:100%;height:auto;overflow:visible;fill:#222}
.people-marks .female svg{fill:#f6f0e5;stroke:#222;stroke-width:.65}
.people-chart figcaption{display:grid;grid-template-columns:7fr 3fr;gap:20px;margin-top:22px;font-size:15px;font-weight:500}
.people-chart figcaption span{position:relative;border-top:1px solid #222;padding-top:14px;text-align:center}
.people-chart figcaption span::before,.people-chart figcaption span::after{content:'';position:absolute;top:0;width:1px;height:7px;background:#222}
.people-chart figcaption span::before{left:0}.people-chart figcaption span::after{right:0}
.stat-experience{grid-column:1/8}
.stat-age{grid-column:9/13}
.stat-experience .stat-value,.stat-age .stat-value{font-size:clamp(58px,6vw,84px)}
.experience-range{position:relative;margin-top:46px;padding-top:22px;padding-bottom:12px}
.range-caption{position:absolute;top:0;font-size:14px}.range-caption.start{left:0}.range-caption.end{right:0}
.range-track{height:1px;background:#222;position:relative;margin-top:35px}
.range-track::before,.range-track::after{content:'';width:1px;height:12px;position:absolute;background:#222;top:-5px}
.range-track::after{right:0}
.range-average{position:absolute;left:36.111111%;width:12px;height:12px;background:#076d5c;top:-6px;border-radius:50%;transform:translateX(-50%)}
.range-average span{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 15px/1.5 var(--font-base);color:#076d5c}
.age-generations{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:40px;border-bottom:1px solid #222;padding-bottom:16px}
.age-generations>span{font:400 28px/1.5 var(--font-en)}
.age-generations small{font:400 14px/1.5 var(--font-base);margin-left:3px}
.stat-professions{grid-column:1/-1;display:grid;grid-template-columns:1fr 2.2fr;gap:0 6%}
.stat-professions .stat-label{grid-column:1;grid-row:1}.stat-professions .stat-value{grid-column:1;grid-row:2}.stat-professions .stat-note{grid-column:1;grid-row:3;font-size:15px}
.profession-list{grid-column:2;grid-row:1/4;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-content:center}
.profession-list li{display:flex;align-items:center;gap:20px;font-size:19px;line-height:1.7}
.profession-list svg{width:28px;height:32px;fill:#222;flex-shrink:0}
.stats-extras{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid #222;padding-top:38px}
.stats-extras .stat-value{font-size:52px}.stats-extras .stat-unit{font-size:15px}
.holiday-count{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.holiday-count i{display:block;width:13px;height:13px;background:#222;border-radius:50%}
.stat-store-photos{display:flex;gap:6px;margin-top:20px;align-items:center}
.stat-store-photos figure{margin:0;width:50%}
.stat-store-photos img{width:100%;height:auto;display:block}
.visual-story .benefits-photo{margin:30px 0 0}
.visual-story .benefits-photo img{display:block;width:100%;height:auto}

@media(max-width:1000px){
 .learning-axis{margin-left:230px}.learning-lane{grid-template-columns:200px 1fr}
 .stats-wall{gap:54px 5%}.stats-demographics>.stat{display:block}.stats-demographics .stat-note{margin-top:18px}
 .stats-extras{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
 .visual-story.company-visual .company-jump{gap:16px}
 .visual-story.company-visual .mission-block{grid-column:7/13}
 .visual-story .p2-onboarding-step{grid-template-columns:.85fr 1.15fr;gap:24px 30px}
}
@media(max-width:720px){
 .visual-story .page-hero{padding-top:108px;padding-bottom:38px}
 .visual-story .page-title{font-size:30px}
 .visual-story :is(.page-lead,.lp-head-lead){font-size:15px}
 .visual-story .growth-photo-sequence{grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
 .visual-story .growth-photo-sequence figure:first-child{margin-top:30px}
 .visual-story .growth-photo-sequence figure:last-child{display:none}
 .visual-story .workplace-panorama{gap:12px;margin-top:30px;grid-template-columns:1fr}
 .visual-story .workplace-panorama figure:last-child{margin-left:24%}
 .visual-story .workplace-panorama figcaption{font-size:13px}
 .visual-story.company-visual .company-heading{display:block}
 .visual-story.company-visual .company-jump{margin-top:26px;flex-wrap:wrap;font-size:13px;gap:18px}
 .visual-story.company-visual .company-jump a{gap:8px}
 .visual-story.company-visual .mission-scene{grid-template-columns:1fr 1fr;gap:28px 18px;margin-top:32px}
 .visual-story.company-visual .mission-photo-one{grid-column:1/-1;grid-row:1;margin-top:0!important;margin-right:12%!important}
 .visual-story.company-visual .mission-block{grid-column:1/-1;grid-row:2}
 .visual-story.company-visual .mission-text{font-size:21px;line-height:2}
 .visual-story.company-visual .mission-label{font-size:14px;margin-bottom:18px}
 .visual-story.company-visual .mission-photo-two{grid-column:2;grid-row:3;margin-left:-25%!important}
 .visual-story.company-visual .company-story .section-inner{display:block}
 .visual-story.company-visual .company-story-aside{position:static;margin-bottom:36px}
 .visual-story.company-visual .company-prose p{font-size:16px}
 .visual-story.company-visual .principles-visual .section-inner{display:block}
 .visual-story.company-visual .principles-visual .section-head{margin-bottom:34px}
 .visual-story.company-visual .principles-scene{max-width:80%}
 .visual-story.company-visual .policy-list li{font-size:16px}
 .visual-story.company-visual .exec-item{grid-template-columns:1fr;gap:24px}
 .visual-story.company-visual .exec-photo{width:min(220px,60%);max-width:none}
 .visual-story.company-visual .section-h2{font-size:25px}
 .visual-story.growth-visual .lp-head-title{font-size:26px}
 .learning-map{margin:38px 0 28px}
 .learning-axis{margin-left:0;padding-bottom:20px;font-size:16px}
 .learning-lane{display:block;margin-bottom:30px}
 .learning-name{display:block;font-size:15px;margin-bottom:20px}
 .learning-line{height:5px}
 .learning-line::before{width:13px;height:13px;top:-4px}
 .learning-line.ongoing::after{width:14px;height:14px;top:-6px}
 .learning-period{gap:18px;font-size:16px;justify-content:flex-start}
 .learning-period svg{width:58px;height:58px}
 .learning-details{display:block;margin:34px 0 62px}
 .learning-details summary{font-size:18px}
 .learning-details p{font-size:15px}
 .visual-story .p2-onboarding-head h3{font-size:25px}
 .training-stops{margin-bottom:34px}
 .training-stops button{padding:0 10px 20px 0}
 .month-number{font-size:42px}.month-number small{display:block;font-size:13px;margin:4px 0 0}
 .month-label{font-size:14px;line-height:1.65;min-height:116px}
 .visual-story .p2-onboarding-step{display:flex;flex-direction:column;gap:24px}
 .visual-story .training-step-photo{position:static;margin:0;max-width:100%}
 .visual-story .p2-onboarding-step h4{font-size:23px}
 .visual-story .p2-onboarding-detail li{font-size:15px}
 .visual-story .career-path{display:block;margin-top:50px}
 .visual-story .career-path .stage{margin:0 0 48px;padding-top:20px;max-width:100%}
 .visual-story .career-path .stage h4{font-size:30px}
 .visual-story .career-path .stage p{font-size:15px}
 .career-mark{top:-32px;width:26px;height:29px}
 .visual-story .work-scene{float:none;width:100%;margin:0 0 36px}
 .visual-story .daytime{max-width:100%;margin-left:6px}
 .visual-story .daytime .d{font-size:15px}
 .visual-story .work-visual .numbers-edit{display:block;padding-top:4px}
 .visual-story .work-visual .nval{font-size:20px}
 .visual-story .skills-visual .skill-list{grid-template-columns:1fr;gap:26px}
 .visual-story .skills-visual .skill-list li{font-size:16px}
 .stats-wall{grid-template-columns:1fr;gap:48px;margin-top:38px}
 .stats-demographics{grid-column:1;gap:22px;grid-template-columns:1fr 1fr}
 .stats-wall .stat-label{font-size:16px}.stats-wall .stat-value{font-size:48px}.stats-wall .stat-unit{font-size:15px;margin-left:6px}
 .stats-wall .stat-note{font-size:15px;line-height:1.95}
 .stats-demographics>.stat{display:block}.stats-demographics .stat-note{font-size:14px}
 .people-marks{gap:7px}.people-chart{margin-top:8px}.people-chart figcaption{font-size:13px;gap:12px;margin-top:16px}
 .stat-experience,.stat-age,.stat-professions{grid-column:1}
 .stat-experience .stat-value,.stat-age .stat-value{font-size:60px}
 .experience-range{margin-top:30px}
 .age-generations{margin-top:24px;max-width:320px}
 .stat-professions{display:block}.profession-list{grid-template-columns:1fr;gap:22px;margin-top:28px}
 .profession-list li{font-size:18px}
 .stats-extras{grid-column:1;grid-template-columns:1fr 1fr;gap:36px 22px;padding-top:30px}
 .stats-extras .stat-value{font-size:42px}.stats-extras .stat-unit{font-size:13px;display:block;margin:8px 0 0}
 .stats-extras .stat-note{font-size:14px}
 .visual-story .benefits-photo{max-width:75%;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.visual-story *{scroll-behavior:auto!important;transition:none!important}}

.visual-story.company-visual .company-cover .page-title{font-size:clamp(30px,3vw,42px)}
.visual-story.company-visual .mission-text{font-size:clamp(21px,1.45vw,24px);line-height:2;text-wrap:pretty}


@media(max-width:720px){.holiday-count{display:grid;grid-template-columns:repeat(4,13px)}}

/* ───────────────────────────────────────────────
   2026-09-18 セカンドビュー（トップ #section-2）
   2カラム＋stickyの見出しをやめ、中央の1カラムにする。
   順番は About us → 見出し → 本文 → 区切り線 → Mission。
   本文はスクロール量に連動して、行ごとに左から右へ白く染まる。
   染める仕掛けは background-clip:text で、文字は分割しない。
   ─────────────────────────────────────────────── */
.visual-story .t2-story{padding-top:clamp(150px,17vw,272px)}
.visual-story .t2-story-inner{display:block;width:min(1240px,90vw);padding-bottom:clamp(160px,18vw,260px)}
.visual-story .t2-story-head{position:static;display:flex;flex-direction:column-reverse;align-items:center;gap:16px;margin:0 0 clamp(46px,5vw,80px)}
.visual-story .t2-story-kicker{margin:0;justify-content:center}
.visual-story .t2-story-title{margin:0;text-align:center;text-wrap:balance}
.visual-story .t2-story-text{width:min(1040px,100%);margin-inline:auto}
.visual-story .t2-story-body{text-align:center}
.visual-story .t2-story-body p{font-size:23px;line-height:2;letter-spacing:.02em;margin:0 0 clamp(28px,2.8vw,40px)}
.visual-story .t2-mission{position:relative;text-align:center;margin-top:clamp(84px,9vw,130px);padding-top:clamp(64px,7vw,100px)}
.visual-story .t2-mission p{max-width:880px;margin-inline:auto}

/* 読み進める白。行の左端から右端へ境目が移動する。
   1行＝背景1枚。位置だけをスクロールで動かし、毎回の作り直しはしない */
.visual-story .t2-story.is-reveal :is(.t2-story-body p,.t2-mission p){
 color:transparent!important;-webkit-text-fill-color:transparent;
 -webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;background-color:transparent}
.visual-story .t2-story.is-reveal .t2-story-body p .em{color:inherit!important;-webkit-text-fill-color:inherit}
.visual-story .t2-story.is-reveal .t2-mission{border-top-color:transparent}
.visual-story .t2-story.is-reveal .t2-mission::before{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:#f6f0e5;transform:scaleX(var(--ln,0));transform-origin:left center}
.visual-story .t2-story.is-reveal .t2-mission .lbl{opacity:var(--lbl,.2)}

@media(max-width:1100px){
 .visual-story .t2-story-body p{font-size:21px}
}
@media(max-width:760px){
 /* 2026-09-20 スマホのAbout本文を一回り小さく（19→17px） */
 .visual-story .t2-story-body p{font-size:17px;line-height:2.1;margin-bottom:26px}
 .visual-story .t2-story-head{gap:13px;margin-bottom:34px}
}

/* ───────────────────────────────────────────────
   2026-09-18 トップページの出現演出
   基本は短いフェードイン。すでに固有の動きがある場所
   （セカンドビューの白、入口カードの起き上がり、写真の帯、
   スタッフカードの集合とめくり、シンボルの境界、写真の切替）
   には重ねない。すべてトップページ限定。
   .tm は head で付ける。prefers-reduced-motionでは付かないので、
   その場合と JS が動かない場合は最初から全部見える。
   ─────────────────────────────────────────────── */
.tm body[data-page="index"] .tm-fade{opacity:0}
.tm body[data-page="index"] .tm-fade.is-tm{opacity:1;
 transition:opacity 520ms ease var(--tmd,0ms)}

/* ヘッダー。読み込み直後に一度だけ */
.tm body[data-page="index"] .header{animation:tm-header 620ms ease both 60ms}
@keyframes tm-header{from{opacity:0}to{opacity:1}}

/* ファーストビュー。撤去した英字ラベルのぶんだけ上を空け、見出しの位置を保つ */
body[data-page="index"] .symbol-hero .headline{padding-top:50px}
@media(max-width:1000px){body[data-page="index"] .symbol-hero .headline{padding-top:78px}}
.tm body[data-page="index"] .symbol-hero h1{opacity:0}
.tm body[data-page="index"] .symbol-hero h1.is-tm{opacity:1;transition:opacity 620ms ease}
.tm body[data-page="index"] .symbol-hero .intro-body>*{opacity:0}
.tm body[data-page="index"] .symbol-hero .intro-body>.is-tm{opacity:1;transition:opacity 520ms ease}

/* 数字。札が出たあと、重なったアイコンが左から順に、最後に＋ */
.tm body[data-page="index"] .staff-faces li{opacity:0;transform:scale(.88)}
.tm body[data-page="index"] .staff-faces.is-tm li{opacity:1;transform:none;
 transition:opacity 240ms ease calc(var(--i,0)*115ms + 300ms),
  transform 340ms cubic-bezier(.34,1.5,.64,1) calc(var(--i,0)*115ms + 300ms)}

/* 選考の流れ。PCは上の線が左から右へ伸び、番号が順に現れる。
   線は各段のborder-topの代わりに1本引く。三角は線が届いてから出す */
.tm body[data-page="index"] .t2-flow.tm-flow[data-appear]{opacity:1;transform:none;transition:none}
@media(min-width:1101px){
 .tm body[data-page="index"] .t2-flow.tm-flow .fstep{border-top-color:transparent}
 .tm body[data-page="index"] .t2-flow.tm-flow::before{content:'';display:block;position:absolute;
  left:0;right:0;top:0;height:1px;background:var(--ink,#222);
  transform:scaleX(0);transform-origin:left center}
 .tm body[data-page="index"] .t2-flow.tm-flow.is-tm::before{transform:scaleX(1);
  transition:transform 900ms cubic-bezier(.22,1,.36,1) 60ms}
 .tm body[data-page="index"] .t2-flow.tm-flow::after{opacity:0}
 .tm body[data-page="index"] .t2-flow.tm-flow.is-tm::after{opacity:1;transition:opacity 260ms ease 880ms}
 .tm body[data-page="index"] .t2-flow.tm-flow .fstep{opacity:0}
 .tm body[data-page="index"] .t2-flow.tm-flow.is-tm .fstep{opacity:1;
  transition:opacity 420ms ease calc(var(--si,0)*150ms + 140ms)}
}
@media(max-width:1100px){
 .tm body[data-page="index"] .t2-flow.tm-flow .fstep{opacity:0}
 .tm body[data-page="index"] .t2-flow.tm-flow.is-tm .fstep{opacity:1;
  transition:opacity 460ms ease calc(var(--si,0)*90ms)}
}

/* ───────────────────────────────────────────────
   2026-09-18 ファーストビューの初回導入
   見出しのあと、下の写真を左から順に幕が開くように見せる。
   幕ができる前に写真が見えないよう、最初は紙色で伏せておく。
   写真そのものは動かさず、位置とトリミングは従来のまま。
   ─────────────────────────────────────────────── */
.tm body[data-page="index"] .symbol-hero .photo-stage:not(.tm-lit){background:var(--paper)}
.tm body[data-page="index"] .symbol-hero .photo-stage:not(.tm-lit) :is(.photos,#wave){visibility:hidden}
.tm body[data-page="index"] .symbol-hero .photo-stage:not(.tm-shot) .playback{visibility:hidden}
.tm body[data-page="index"] .symbol-hero .photo-stage.tm-shot .playback{animation:tm-header 520ms ease both}
.tm body[data-page="index"] .symbol-hero .tm-curtain{position:absolute;z-index:2;background:var(--paper);
 transform-origin:right center;pointer-events:none;will-change:transform}

/* ───────────────────────────────────────────────
   2026-09-18 About Us の上部に、ロゴの薄い地紋を弧状に置く
   2026-09-20 中央を上まで抜いていたのをやめた。上が完全に消えて味気なかったため。
   抜くのは「About us」と見出しの周りだけにして、その上は地紋を残す。
   覆いは黒ベタではなく連続したマスク。
   文章・配置・読み進める白の演出には触らない。装飾なので読み上げ対象外。
   タイルは地紋専用の nexport-symbol-pattern.svg（継ぎ目で線が二重にならない）。
   ─────────────────────────────────────────────── */
body[data-page="index"] .t2-story-inner,
body[data-page="index"] .t2-story .t2-strip{position:relative;z-index:1}
body[data-page="index"] .t2-about-mark{
 position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
 height:var(--am-h,640px);
 background-image:url("../img/nexport-symbol-pattern.svg");
 background-repeat:repeat;background-size:16.6667% auto;
 opacity:.15;
 /* 見出しの位置に楕円を置いて、そこだけ抜く。中心を面の上端ではなく
    見出しの高さへ下げてあるので、楕円の上（＝面のいちばん上）には地紋が残る */
 --am-mask:
  radial-gradient(var(--am-rx,34%) var(--am-ry,34%) at 50% var(--am-cy,52%),
    transparent 0 55%, rgba(0,0,0,.6) 82%, #000 100%),
  linear-gradient(to bottom, #000 0 34%, rgba(0,0,0,.5) 68%, transparent 100%);
 -webkit-mask-image:var(--am-mask);mask-image:var(--am-mask);
 -webkit-mask-composite:source-in;mask-composite:intersect;
}
@media(max-width:1100px){
 body[data-page="index"] .t2-about-mark{--am-h:520px;--am-rx:40%;--am-ry:36%;--am-cy:54%}
}
@media(max-width:760px){
 body[data-page="index"] .t2-about-mark{--am-h:340px;--am-rx:52%;--am-ry:38%;--am-cy:60%;
  background-size:33.3333% auto;opacity:.13}
}