/* 1.3.1 のラボ紹介。トップページだけに読み込む。 */
.lab-home{
    --lab-ink:#173c40;
    --lab-teal:#176c69;
    --lab-gold:#f4cc75;
    --lab-paper:#faf8f1;
    --lab-muted:#5c6b68;
    background:var(--lab-paper);
    color:var(--lab-ink);
    font-family:'Inter','Noto Sans JP',sans-serif;
    overflow-x:clip}

.lab-home main{
    padding-top:88px;
    overflow-x:clip}
.lab-home section[id]{
    scroll-margin-top:108px}
.lab-home h1,.lab-home h2,.lab-home h3{
    font-family:'Noto Sans JP',sans-serif;
    letter-spacing:-.035em}
.lab-home h2{
    font-size:clamp(1.8rem,3.15vw,2.8rem);
    line-height:1.55;
    font-weight:700}
.lab-home a{
     -webkit-tap-highlight-color:transparent}
.lab-home a:focus-visible,.lab-home button:focus-visible,.lab-home summary:focus-visible,.lab-home [tabindex]:focus-visible{
    outline:3px solid #d8a348;
    outline-offset:6px}
.lab-home .mobile-br{
    display:none}

.lab-home .header{
    padding:15px 0;
    background:rgba(250,248,241,.97);
    backdrop-filter:blur(16px);
    box-shadow:none;
    border-bottom:1px solid #e5e8de}
.lab-home .nav{
    max-width:1320px;
    gap:30px}
.lab-home .logo-img{
    height:56px;
    width:auto}
.lab-home .nav-links{
    align-items:center;
    gap:28px}
.lab-home .nav-links a{
    font-size:13px;
    font-weight:600;
    color:var(--lab-ink)}
.lab-home .nav-links a:hover{
    color:#187d70}
.lab-home .nav-links .nav-download{
    padding:12px 20px;
    border:1px solid #c9d6cc;
    border-radius:6px}
.lab-home .nav-download span{
    margin-left:12px}
.skip-link{
    position:fixed;
    left:20px;
    top:-100px;
    z-index:1500;
    background:#fff;
    color:#173c40;
    padding:12px 22px}
.skip-link:focus{
    top:12px}

.section-shell{
    width:min(1200px,calc(100% - 96px));
    margin-inline:auto}
.eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--lab-teal);
    margin-bottom:24px}
.eyebrow.light{
    color:#f7d995}
.eyebrow span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor}
.lab-hero{
    isolation:isolate;
    position:relative;
    background:#102b3c;
    color:#fff9ec;
    overflow:hidden}
.hero-scene{
    position:absolute;
    inset:0;
    z-index:-2;
    background:url('../images/lab-1-3-1/research-city.webp') center 53%/cover no-repeat}
.hero-scene:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(9,31,48,.96) 0%,rgba(9,31,48,.88) 30%,rgba(9,31,48,.52) 58%,rgba(9,31,48,.10) 100%),linear-gradient(0deg,rgba(9,31,48,.7),transparent 45%)}
.lab-hero-inner{
    max-width:1320px;
    min-height:690px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:62px 60px 56px;
    position:relative}
.lab-hero-copy{
    position:relative;
    z-index:2}
.lab-hero h1{
    font-size:clamp(40px,4.5vw,66px);
    line-height:1.5;
    font-weight:700;
    letter-spacing:-.045em;
    margin:20px 0 23px;
    white-space:nowrap}
.lab-hero h1 em{
    font-style:normal;
    color:#f6d58f}
.hero-lead{
    font-size:15px;
    line-height:2.1;
    color:#e3e7e2;
    letter-spacing:.015em;
    margin-bottom:30px}
.gold-link{
    display:inline-flex;
    gap:38px;
    align-items:center;
    border-radius:6px;
    background:var(--lab-gold);
    color:#213e40;
    padding:16px 23px;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    transition:background .2s,transform .2s}
.gold-link:hover{
    background:#ffe0a3;
    transform:translateY(-2px)}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px}
.web-link{
    display:inline-flex;
    gap:24px;
    align-items:center;
    border-radius:6px;
    border:1px solid #f4cc7599;
    color:#fff5df;
    padding:15px 22px;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    transition:background .2s,transform .2s}
.web-link:hover{
    background:#ffffff1a;
    transform:translateY(-2px)}
.release-note{
    font-size:11px;
    color:#e5dfd1;
    margin-top:26px;
    line-height:1.8}
.release-note span{
    color:#f5d48e;
    letter-spacing:.1em;
    display:inline-block;
    margin-right:10px;
    font-size:10px}
.hero-partners{
    height:550px;
    position:relative;
    margin-right:-35px}
.hero-partners img{
    position:absolute;
    filter:drop-shadow(0 22px 20px #081b2c66);
    max-width:none;
    object-fit:contain}
.hero-fox{
    width:470px;
    right:-35px;
    top:23px;
    z-index:1;
    transform:rotate(-6deg);
    animation:lab-bob 7s ease-in-out infinite}
.hero-otter{
    z-index:2;
    width:320px;
    left:-65px;
    bottom:10px;
    transform:rotate(5deg)}
.partner-caption{
    position:absolute;
    right:26px;
    bottom:2px;
    font-size:12px;
    letter-spacing:.1em;
    color:#fff5df;
    text-shadow:0 2px 8px #082136}
.hero-bottom{
    max-width:1200px;
    margin:0 auto;
    padding:20px 0 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #ffffff30;
    font-size:10px;
    letter-spacing:.12em;
    color:#e6d2aa}
.hero-bottom>a{
    font-size:11px;
    color:#e5e2d7;
    text-decoration:none}
.hero-bottom>a span{
    margin-left:26px}
@keyframes lab-bob{
    50%{
    transform:translateY(-12px) rotate(-3deg)}
}

.fact-strip{
    width:min(1200px,calc(100% - 96px));
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:35px 0;
    border-bottom:1px solid #d9dfd3}
.fact-strip p{
    text-align:center;
    border-right:1px solid #d9dfd3}
.fact-strip p:last-child{
    border:0}
.fact-strip strong{
    display:block;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.04em;
    line-height:1.5}
.fact-strip strong small{
    font-size:14px;
    margin-left:5px}
.fact-strip p>span{
    font-size:11px;
    color:var(--lab-muted);
    letter-spacing:.04em}

.lab-story{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:90px;
    padding-block:112px 80px;
    align-items:center}
.section-intro{
    color:var(--lab-muted);
    font-size:14px;
    line-height:2.2;
    margin-top:22px}
.story-steps{
    list-style:none;
    margin-top:36px}
.story-steps li{
    display:flex;
    gap:21px;
    padding:22px 0;
    border-top:1px solid #dce1d6}
.story-steps li>span{
    font-size:11px;
    color:#8b6c32;
    padding-top:4px;
    font-weight:600}
.story-steps h3{
    font-size:17px;
    line-height:1.8;
    margin-bottom:7px}
.story-steps p{
    font-size:13px;
    color:var(--lab-muted);
    line-height:1.95;
    max-width:400px}
.lab-preview{
    position:relative;
    text-align:center;
    padding:15px 20px}
.preview-halo{
    position:absolute;
    inset:8% -12% 10%;
    background:#e9ecdf;
    border-radius:50%;
    z-index:-1}
.lab-preview>img{
    display:block;
    width:100%;
    height:auto;
    border:6px solid #fffaf0;
    border-radius:18px;
    box-shadow:0 22px 70px #18372b26;
    position:relative}
.lab-preview figcaption{
    font-size:10px;
    letter-spacing:.06em;
    color:#7a8176;
    margin-top:20px}

.companions{
    text-align:center;
    padding-block:30px 85px}
.companions>.eyebrow{
    justify-content:center}
.companions h2{
    font-size:clamp(20px,2.1vw,28px);
    letter-spacing:-.03em}
.partner-line{
    display:grid;
    grid-template-columns:repeat(9,minmax(0,1fr));
    align-items:end;
    gap:8px;
    margin:33px -20px 20px}
.partner-line img{
    width:100%;
    height:auto;
    filter:drop-shadow(0 9px 5px #283f3315)}
.companions>p:last-child{
    font-size:13px;
    line-height:2;
    color:var(--lab-muted)}

.study-section{
    padding-block:88px;
    background:#e9efe7;
    border-block:1px solid #dee5d9}
.study-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px}
.study-heading>p{
    font-size:14px;
    line-height:2.2;
    color:#51645d;
    max-width:430px;
    margin-bottom:10px}
.study-flow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:48px;
    gap:42px}
.study-flow article{
    border-top:1px solid #acbeb0;
    padding-top:23px;
    display:flex;
    flex-direction:column;
    align-items:flex-start}
.flow-number{
    font-size:10px;
    letter-spacing:.13em;
    color:#52715f;
    font-weight:600}
.study-flow h3{
    font-size:25px;
    line-height:1.6;
    margin-block:22px 18px}
.study-flow p{
    font-size:13px;
    line-height:2;
    color:#52645a;
    margin-bottom:24px}
.flow-tag{
    font-size:10px;
    color:#35604b;
    letter-spacing:.08em;
    border:1px solid #bacdbb;
    padding:5px 11px;
    border-radius:3px;
    margin-top:auto}
.study-note{
    border-top:1px solid #c7d4c4;
    margin-top:45px;
    padding-top:27px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px}
.study-note>span{
    font-size:30px;
    color:#748f69}
.study-note p{
    font-size:14px;
    line-height:1.9}
.study-note small{
    font-size:11px;
    color:#647761}

.screens-showcase{
    padding-block:95px 85px}
.screens-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px}
.screens-heading h2{
    font-size:clamp(24px,2.5vw,34px)}
.screens-heading>p{
    font-size:12px;
    color:var(--lab-muted);
    line-height:2;
    margin-bottom:8px}
.screen-gallery{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;
    margin-top:40px}
.screen-gallery a{
    display:block;
    border:5px solid #fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 30px #142e3714;
    transition:transform .2s}
.screen-gallery a:hover{
    transform:translateY(-5px)}
.screen-gallery img{
    display:block;
    width:100%;
    height:auto}
.screen-gallery figcaption{
    margin:19px 0 0;
    font-size:13px;
    font-weight:700}
.screen-gallery figcaption>span{
    color:#8d927e;
    font-size:10px;
    margin-right:10px;
    font-weight:400}
.screen-gallery small{
    font-size:10px;
    display:block;
    font-weight:400;
    color:var(--lab-muted);
    margin-top:7px}
.screens-disclaimer{
    font-size:10px;
    color:#7c857a;
    line-height:1.9;
    margin-top:34px;
    text-align:center}
.scroll-hint{
    display:none}

.faq-section{
    display:grid;
    grid-template-columns:1fr 1.8fr;
    gap:60px;
    padding-block:20px 100px}
.faq-section>div:first-child>p:last-child{
    font-size:13px;
    line-height:2;
    color:var(--lab-muted);
    margin-top:20px}
.faq-list{
    border-top:1px solid #cbd5c6}
.faq-list details{
    border-bottom:1px solid #cbd5c6}
.faq-list summary{
    list-style:none;
    cursor:pointer;
    padding:23px 35px 23px 2px;
    font-size:14px;
    font-weight:700;
    position:relative;
    line-height:1.9}
.faq-list summary::-webkit-details-marker{
    display:none}
.faq-list summary:after{
    content:'+';
    position:absolute;
    right:3px;
    top:21px;
    font-size:21px;
    font-weight:400;
    color:#6d8574}
.faq-list details[open] summary:after{
    content:'−'}
.faq-list details>p{
    font-size:13px;
    line-height:2;
    padding:0 30px 25px 2px;
    color:var(--lab-muted)}

.download-section{
    text-align:center;
    color:#fff5df;
    background:linear-gradient(#0d2c43df,#0d2c43e8),url('../images/lab-1-3-1/research-city.webp') center 42%/cover}
.download-inner{
    padding:75px 24px 70px;
    max-width:720px;
    margin:auto}
.download-inner>.eyebrow{
    justify-content:center}
.download-inner h2{
    font-size:clamp(32px,4vw,48px);
    line-height:1.65}
.download-inner>p:not(.eyebrow){
    color:#d3ddd7;
    font-size:13px;
    line-height:2.2;
    margin-top:23px}
.download-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-top:28px}
.download-link{
    display:flex;
    align-items:center;
    gap:17px;
    text-align:left;
    background:#faf6e9;
    color:#193c44;
    border-radius:6px;
    text-decoration:none;
    padding:13px 25px;
    min-width:186px;
    font-size:18px;
    font-weight:700;
    line-height:1.7;
    transition:background .2s,transform .2s}
.download-link:hover{
    background:#f6d58f;
    transform:translateY(-2px)}
.download-link small{
    display:block;
    font-size:10px;
    font-weight:400;
    letter-spacing:.03em}
.download-mark{
    font-size:30px;
    line-height:1}
.play-mark{
    font-size:32px}
.download-inner>.download-caution{
    font-size:10px!important;
    color:#c0ccc8!important;
    margin-top:22px!important}
.download-caution a{
    color:#f5d38d;
    text-underline-offset:3px}
.lab-home .footer{
    padding:50px 36px 24px;
    background:#f4f3eb;
    border-top:0}
.lab-home .footer-content{
    margin-bottom:25px;
    gap:30px}
.lab-home .footer-logo-img{
    height:42px}
.lab-home .footer-links a{
    font-size:11px;
    color:#647267}
.lab-home .footer-address{
    font-size:10px;
    color:#7c8578}
.lab-home .footer-bottom{
    padding-top:20px;
    border-top:1px solid #dde2d5;
    font-size:10px}

@media(min-width:1500px){
    .lab-hero-inner{
    min-height:740px}
.hero-partners{
    height:580px}
.hero-fox{
    width:510px;
    right:-25px}
.hero-otter{
    width:350px;
    left:-65px}
}

@media(max-width:1100px) and (min-width:769px){
    .lab-home .nav-links{
    gap:17px}
.lab-home .nav-links a{
    font-size:11px}
.lab-home .nav-links .nav-download{
    padding:10px 14px}
.lab-hero-inner{
    padding-inline:46px;
    min-height:610px}
.lab-hero h1{
    font-size:46px}
.lab-hero .eyebrow{
    font-size:10px;
    letter-spacing:.03em}
.hero-lead{
    font-size:13px}
.hero-partners{
    height:490px;
    margin-right:0}
.hero-fox{
    width:365px;
    right:-35px;
    top:40px}
.hero-otter{
    width:245px;
    left:-45px;
    bottom:22px}
.hero-bottom{
    margin-inline:48px}
.lab-story{
    gap:45px;
    padding-top:85px}
.story-steps h3{
    font-size:15px}
.story-steps p{
    font-size:12px}
.study-flow{
    gap:26px}
.study-heading>p{
    font-size:12px}
.screen-gallery{
    gap:16px}
.screen-gallery figcaption{
    font-size:11px}
.screen-gallery small{
    font-size:9px}
.lab-home .footer-links{
    column-gap:20px}
}

@media(max-width:768px){
    .lab-home main{
    padding-top:76px}
.lab-home .header{
    padding:14px 0}
.lab-home .logo-img{
    height:46px}
.lab-home .nav{
    padding-inline:22px}
.lab-home .nav-links{
    align-items:center;
    gap:28px;
    background:var(--lab-paper)}
.lab-home .nav-links a{
    font-size:15px}
.lab-home .nav-links .nav-download{
    padding:14px 28px}
.lab-home section[id]{
    scroll-margin-top:90px}
.section-shell{
    width:calc(100% - 44px)}
.lab-home .mobile-br{
    display:block}
.eyebrow{
    font-size:10px;
    margin-bottom:18px;
    letter-spacing:.12em}
.lab-hero-inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:40px 27px 10px;
    min-height:0}
.lab-hero-copy{
    z-index:2}
.lab-hero .eyebrow{
    font-size:10px;
    letter-spacing:.02em;
    gap:7px}
.lab-hero h1{
    font-size:clamp(36px,8.8vw,57px);
    line-height:1.5;
    margin:18px 0}
.hero-lead{
    font-size:12px;
    line-height:2;
    margin-bottom:22px}
.hero-lead .mobile-br{
    display:none}
.gold-link{
    padding:13px 20px;
    font-size:12px;
    gap:30px}
.web-link{
    padding:12px 18px;
    font-size:12px;
    gap:20px}
.hero-actions{
    gap:10px}
.release-note{
    font-size:10px;
    margin-top:18px;
    max-width:none}
.release-note span{
    font-size:9px;
    margin-right:7px}
.hero-partners{
    width:100%;
    height:340px;
    margin:3px 0 0}
.hero-fox{
    width:min(78vw,355px);
    right:-10px;
    top:0}
.hero-otter{
    width:min(53vw,235px);
    left:-14px;
    bottom:4px;
    z-index:2}
.partner-caption{
    right:10px;
    bottom:8px;
    font-size:10px}
.hero-scene{
    background-position:61% center}
.hero-scene:after{
    background:linear-gradient(180deg,#0a243ad9 0%,#0a243ac9 35%,#0a243a20 74%,#0a243a90),linear-gradient(90deg,#0a243a66,transparent 80%)}
.hero-bottom{
    margin-inline:27px;
    padding-block:16px;
    font-size:8px}
.hero-bottom>a{
    font-size:9px}
.hero-bottom>a span{
    margin-left:10px}
.fact-strip{
    width:calc(100% - 44px);
    padding-block:25px;
    grid-template-columns:repeat(2,1fr);
    row-gap:22px}
.fact-strip p:nth-child(2){
    border:0}
.fact-strip strong{
    font-size:27px}
.fact-strip strong small{
    font-size:12px}
.fact-strip p>span{
    font-size:10px}
.lab-story{
    grid-template-columns:1fr;
    gap:30px;
    padding-block:60px 35px}
.lab-home h2{
    font-size:27px;
    line-height:1.6}
.section-intro{
    font-size:12px;
    line-height:2.1;
    margin-top:18px}
.story-steps{
    margin-top:22px}
.story-steps li{
    gap:17px;
    padding-block:20px}
.story-steps h3{
    font-size:15px}
.story-steps p{
    font-size:12px;
    line-height:1.9}
.lab-preview{
    max-width:380px;
    width:100%;
    margin:auto;
    padding:10px 24px}
.lab-preview>img{
    border-width:5px;
    border-radius:15px}
.preview-halo{
    inset:9% -6% 13%}
.lab-preview figcaption{
    font-size:9px;
    margin-top:15px}
.companions{
    padding-block:35px 50px}
.companions h2{
    font-size:20px;
    max-width:300px;
    margin:auto}
.partner-line{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
    margin:24px -10px 20px}
.partner-line img:nth-child(n+6){
    position:relative;
    left:50%;
    margin-top:-3px}
.companions>p:last-child{
    font-size:12px}
.study-section{
    padding-block:55px}
.study-heading{
    display:block}
.study-heading>p{
    font-size:12px;
    line-height:2.1;
    margin-top:22px}
.study-flow{
    grid-template-columns:1fr;
    gap:30px;
    margin-top:32px}
.study-flow article{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    column-gap:23px;
    padding-top:20px}
.flow-number{
    grid-column:1/-1;
    font-size:9px}
.study-flow h3{
    font-size:20px;
    margin-block:17px 14px}
.study-flow p{
    font-size:11px;
    margin-top:17px;
    margin-bottom:14px;
    line-height:1.9}
.flow-tag{
    grid-column:1/-1;
    font-size:9px;
    justify-self:start}
.study-note{
    justify-content:flex-start;
    margin-top:34px;
    padding-top:24px;
    gap:12px}
.study-note>span{
    font-size:23px}
.study-note p{
    font-size:12px}
.study-note small{
    font-size:10px}
.screens-showcase{
    width:100%;
    padding:55px 0}
.screens-heading{
    display:block;
    padding-inline:22px}
.screens-heading h2{
    font-size:25px}
.screens-heading>p{
    font-size:12px;
    line-height:1.9;
    margin-top:18px}
.scroll-hint{
    display:block;
    padding-inline:22px;
    font-size:10px;
    color:#667866;
    margin-top:20px}
.screen-gallery{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:10px 22px 24px;
    gap:20px;
    margin-top:14px;
    scroll-padding-inline:22px}
.screen-gallery figure{
    flex:0 0 70%;
    max-width:280px;
    scroll-snap-align:start}
.screen-gallery a{
    border-radius:18px;
    border-width:4px}
.screen-gallery figcaption{
    font-size:13px}
.screen-gallery small{
    font-size:10px}
.screens-disclaimer{
    font-size:9px;
    margin:10px 22px 0;
    text-align:left}
.faq-section{
    grid-template-columns:1fr;
    gap:25px;
    padding-block:15px 60px}
.faq-section>div:first-child>p:last-child{
    display:none}
.faq-list summary{
    font-size:13px;
    padding-block:21px}
.faq-list summary:after{
    top:19px}
.faq-list details>p{
    font-size:12px;
    padding-right:15px}
.download-inner{
    padding-block:52px}
.download-inner h2{
    font-size:31px}
.download-inner>p:not(.eyebrow){
    font-size:12px}
.download-links{
    gap:10px}
.download-link{
    min-width:0;
    gap:10px;
    padding:12px 14px;
    font-size:15px}
.download-link small{
    font-size:9px}
.download-mark{
    font-size:25px}
.download-inner>.download-caution{
    font-size:9px!important}
.lab-home .footer{
    padding:35px 24px 22px}
.lab-home .footer-content{
    gap:22px}
.lab-home .footer-logo-img{
    height:35px;
    margin-bottom:12px}
.lab-home .footer-links{
    grid-template-columns:repeat(2,auto);
    column-gap:25px;
    row-gap:10px}
.lab-home .footer-links a{
    font-size:11px}
}

@media(max-width:360px){
    .lab-hero-inner{
    padding-inline:22px}
.lab-hero .eyebrow{
    font-size:9px}
.lab-hero h1{
    font-size:33px}
.hero-lead{
    font-size:11px}
.release-note span{
    display:block;
    margin-bottom:5px}
.hero-partners{
    height:300px}
.hero-fox{
    right:-12px}
.lab-home h2{
    font-size:24px}
.study-flow article{
    column-gap:15px}
.study-flow h3{
    font-size:18px}
.download-link{
    padding:12px;
    gap:7px;
    font-size:14px}
}

@media(prefers-reduced-motion:reduce){
    .lab-home *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important}
}


@media(max-width:768px){
    .lab-home .nav-links:not(.open){
    visibility:hidden}
.lab-home .nav-links.open{
    visibility:visible}
}