@charset "UTF-8";

/*
    375px ~ sp ~ 768px ~ tablet ~ 960px ~ pc ~ 
*/
:root {
    --trans:0.5s ease;
    --content-width:min(1200px, 95%);
    --shadow:0 3px 6px rgb(0 0 0 / 0.16);

    --red:#DE4806;
    --orange:#FFAF43;
    --orange-dark:#E34202;
    --yellow:#FFEB00;
    --khaki:#95A014;
    --green:#55CE7B;
    --green-dark:#295E34;
    --sky:#0BC5DE;
    --sky-dark:#004E58;
    --blue:#005EDE;
    --blue-dark:#2F5D70;
}
html {
    font-size: 16px;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    color: #222;
    scroll-behavior:smooth;
}
body { overflow-x:clip;}

*, *:before, *:after { margin:0; padding:0;}
a { text-decoration: none; color:inherit;}
a[href^="tel"] { pointer-events: none;}
button { cursor:pointer;}
:where(ol, ul) { list-style: none;}
img { height: auto; max-width: 100%; vertical-align:bottom;}

.pc { display:block;}
.sp { display:none;}

.content_wrap {
    position:relative;
    width:var(--content-width);
    margin-inline:auto;
}
.bg_wrap { background-color:#FDFFEB;}
.abs_before, .abs_after { position:relative;}
.abs_before:before,
.abs_after:after {
    content:"";
    position:absolute;
    display:block;
    height:auto;
    background:url() no-repeat center / contain;
}
[id] { scroll-margin-top:10vh;}

@media (any-hover: hover) {
    :is(a, button):hover { opacity: 0.75;}
}
@media (any-hover: none) {
    :is(a, button):active { opacity: 0.75;}
}
@media (width < 768px){
    a[href^="tel"] { pointer-events:auto;}
    .pc { display:none;}
    .sp { display:block;}
}



/* ===========================================================================
    accordion
=========================================================================== */
.accordion {
    position:sticky;
    bottom:0;
    z-index:9999;

    & .accordion_wrap {
        position:absolute;
        inset:auto 0 0 auto;
        /* viewport:768-960px  17.5-32px */
        padding-left:clamp(1.094rem, calc(-2.531rem + 7.552vw), 2rem);
        /* viewport:768-960px  10-16px */
        padding-right:clamp(0.625rem, calc(-0.875rem + 3.125vw), 1rem);
        /* viewport:768-960px  240-448px */
        width:clamp(15rem, calc(-37rem + 108.333vw), 28rem);
        background-color:var(--red);
        border-radius:30px 0 0 0;
    }
    & input { display:none;}
    & label {
        display:flex;
        justify-content:space-between;
        align-items:center;
        /* viewport:768-960px  13-18px */
        padding-block:clamp(0.813rem, calc(-0.437rem + 2.604vw), 1.125rem);
        cursor:pointer;

        & img {
            /* viewport:768-960px  46-86px */
            width:clamp(2.875rem, calc(-7.125rem + 20.833vw), 5.375rem);
            rotate:-8deg;
        }
        & p {
            color:#fff;
            font-weight:bold;
            /* viewport:768-960px  17-31px */
            font-size:clamp(1.063rem, calc(-2.437rem + 7.292vw), 1.938rem);
            text-align:center;
            line-height:1.2;
        }
        & .icon {
            position:relative;
            /* viewport:768-960px  18-33px */
            width:clamp(1.125rem, calc(-2.625rem + 7.813vw), 2.063rem);
            height:auto;
            aspect-ratio:1;
            background-color:#fff;
            border-radius:100%;
        }
        & .icon span {
            position:absolute;
            width:57.5%;
            height:auto;
            aspect-ratio:19/3;
            background-color:var(--red);
            inset:50% auto auto 50%;
            translate:-50% -50%;
        }
        & .icon span:nth-of-type(2) { rotate:-90deg; transition:rotate var(--trans);}
    }
    & .checked_wrap {
        display:grid;
        grid-template-rows:0fr;
        transition:grid-template-rows var(--trans);
    }
    & ul {
        overflow:hidden;

        & a {
            display:flex;
            justify-content:space-between;
            align-items:center;
            width:100%;
            padding:0.5em 1em;
            color:#000;
            /* viewport:768-960px  14-26px */
            font-size:clamp(0.875rem, calc(-2.125rem + 6.25vw), 1.625rem);
            font-weight:bold;
            background-color:#fff;
            border-radius:20px;
        }
        & a:after {
            content:"";
            display:block;
            width:0.9em;
            height:auto;
            aspect-ratio:24.77/19.76;
            background:url(/service/teiju_common/img/icon_search_arrow.svg) no-repeat center / contain;
            rotate:-90deg;
            transition:translate var(--trans);
        }
        & li + li {
            /* viewport:768-960px  10-18px */
            margin-top:clamp(0.625rem, calc(-1.375rem + 4.167vw), 1.125rem);
        }
        & li:last-of-type {
            /* viewport:768-960px  22-42px */
            margin-bottom:clamp(1.375rem, calc(-3.625rem + 10.417vw), 2.625rem);
        }
    }

    
    /* checked */
    &:has(input:checked) {

        & label .icon span:nth-of-type(2) { rotate:0deg;}
        & .checked_wrap { grid-template-rows:1fr;}
    }
}
@media (any-hover:hover) {
    .accordion a:hover:after { translate:50% 0;}
}
@media (any-hover:none) {
    .accordion a:active:after { translate:50% 0;}
}



/* ===========================================================================
    fv
=========================================================================== */
.fv {
    position:relative;
    width:min(1920px, 100%);
    margin-inline:auto;

    & br.pc_ext { display:block;}
    & br.sp_ext { display:none;}
    & .fv_wrap {
        display:grid;
        grid-template-columns:repeat(2, 50%);
    }
    & :is(.l, .r) { position:relative;}
    & .l {
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        margin:min(40px, 2.0833vw);
        padding-top:25%;
        z-index:1;

        & .logo { position:absolute; inset:0 auto auto 0;}
        & h1 { width:60.83125%; margin:0;}
        & h1 img { width:100%;}
        & p {
            margin-top:2.752em;
            font-size:min(25px, 1.3020vw);
            font-weight:bold;
            line-height:2.25;
        }
        & :where(.prefecture, .bg) { position:absolute; z-index:-1; pointer-events:none;}
        & .prefecture {
            width:76.2072%;
            inset:12% auto auto 47%;
            translate:-50% 0%;
            rotate:10deg;
        }
        & .bg {
            width:100%;
            height:100%;
            object-fit:contain;
            inset:-1rem auto auto 0;
        }
    }
    & .scroll {
        position:absolute;
        display:flex;
        flex-direction:column;
        align-items:center;
        inset:auto auto 2rem 50%;
        translate:-50% 0;
        z-index:1;

        & picture:nth-of-type(2) { animation:scrollDown 3s linear infinite;}
    }
}
@keyframes scrollDown {
    0% { translate:0% 0%; opacity:0%;}
    25% { opacity:100%;}
    75% { opacity:100%;}
    100% { translate:0% 100%; opacity:0%;}
}
@media (width < 960px){
    .fv {
        --gap:7.5vw;

        & br.pc_ext { display:none;}
        & br.sp_ext { display:block;}
        & .fv_wrap {
            position:relative;
            grid-template:
                "logo" auto
                "catch" auto
                "swiper" auto
                "p" 1fr / auto;
            z-index:1;
            overflow-x:clip;
        }
        & :is(.l, .r) { display:contents;}
        & .l {
            & .logo { grid-area:logo; position:static; width:160px; margin:22.5px auto auto var(--gap);}
            & h1 {
                grid-area:catch;
                width:304px;
                margin-block:18px 27.5px;
                margin-inline:var(--gap) auto;
            }
            & p { position:relative; grid-area:p; margin:25px auto auto var(--gap); font-size:17px; line-height:1.9; z-index:10;}
            & p:after {
                content:"";
                position:absolute;
                display:block;
                width:131.5px;
                height:auto;
                aspect-ratio:131.44/390;
                background:url(/service/teiju_common/img/fv/bg_sp.png) no-repeat center / contain;
                inset:-2.75em auto auto calc(100% - 3em);
                z-index:11;
            }
            & .prefecture { width:323px; inset:21px auto auto calc(var(--gap) + 101px); translate:unset;}
            & .bg { display:none;}
        }
        & .r {
            & .swiper { grid-area:swiper; width:100%;}
            & .swiper img { border-radius:20px;}
        }
        & .scroll { display:none;}
    }
}




/* ===========================================================================
    search
=========================================================================== */
.search {
    width:var(--content-width);
    /* viewport:375-960px  50-100px */
    margin:clamp(3.125rem, calc(1.122rem + 8.547vw), 6.25rem) auto 0;

    & h2 {
        --gap:0.42em;

        position:relative;
        width:fit-content;
        margin-inline:auto;
        /* viewport:375-960px  23-50px */
        font-size:clamp(1.438rem, calc(0.356rem + 4.615vw), 3.125rem);
        font-weight:900;
        line-height:1.3;

        & strong { font-size:1.38em;}
        & strong:nth-of-type(2) { color:var(--red);}
        &:before, &:after {
            width:1.34em;
            aspect-ratio:67.02/58.57;
            background-image:url(/service/teiju_common/img/icon_search.svg);
            inset-block:auto 0;
        }
        &:before { inset-inline:auto calc(100% + var(--gap));}
        &:after { inset-inline:calc(100% + var(--gap)) auto; scale:-1 1;}
    }
    & ul {
        display:grid;
        grid-template-columns:repeat(2 ,1fr);
        /* viewport:375-1200px  14-36px */
        gap:clamp(0.875rem, calc(0.25rem + 2.667vw), 2.25rem);
        margin-top:1.4em;
        /* viewport:375-1200px  17-30px */
        font-size:clamp(1.063rem, calc(0.693rem + 1.576vw), 1.875rem);
        font-weight:bold;

        & a {
            position:relative;
            display:grid;
            grid-template-columns:3.5em 1fr;
            align-items:center;
            gap:0.6667em;
            height:100%;
            /* viewport:375-1200px  10-30px */
            padding-block:clamp(0.625rem, calc(0.057rem + 2.424vw), 1.875rem);
            /* viewport:375-1200px  15-45px */
            padding-inline:clamp(0.938rem, calc(0.085rem + 3.636vw), 2.813rem);
            background-color:#fff;
            border:solid 3px var(--red);
            border-radius:20px;
        }
        & a:after {
            width:2.3667em;
            aspect-ratio:70.82/47.32;
            background-image:url(/service/teiju_common/img/icon_search_arrow.svg);
            inset:100% auto auto 50%;
            translate:-50% -50%;
            pointer-events:none;
        }
        & img { justify-self:center;}
        & .jobFair img {
            /* viewport:375-1200px  69.5-107.5px */
            width:clamp(4.344rem, calc(3.264rem + 4.606vw), 6.719rem);
        }
        & .students img {
            /* viewport:375-1200px  65.5-109px */
            width:clamp(4.094rem, calc(2.858rem + 5.273vw), 6.813rem);
        }
        & .newWork img {
            /* viewport:375-1200px  38.5-69.5px */
            width:clamp(2.406rem, calc(1.526rem + 3.758vw), 4.344rem);
        }
        & .invited img {
            /* viewport:375-1200px  51-88px */
            width:clamp(3.188rem, calc(2.136rem + 4.485vw), 5.5rem);
        }
    }
}
@media (width < 960px){
    .search {

        & h2 {
            color:var(--red);

            & strong { font-size:inherit;}
            &:before, &:after {
                width:0.7391em;
                aspect-ratio:17.3/19.92;
                background-image:url(/service/teiju_common/img/icon_search_sp.svg);
            }
        }
        & ul {

            & a {
                display:flex;
                flex-direction:column-reverse;
                justify-content:start;
                gap:0.5em;
                text-align:center;
                line-height:1.4;
            }
            & a:after {
                position:static;
                translate:unset;
                order:-1;
            }
        }
    }
}



/* ===========================================================================
    jobs
=========================================================================== */
.jobs {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:var(--content-width);
    margin-inline:auto;
    /* viewport:375-960px  67.5-130px */
    padding-bottom:clamp(4.219rem, calc(1.715rem + 10.684vw), 8.125rem);

    & h3 {
        /* viewport:375-960px  38-130px */
        margin-top:clamp(2.375rem, calc(-1.311rem + 15.726vw), 8.125rem);
        padding-inline:0.1em;
        /* viewport:375-960px  28-50px */
        font-size:clamp(1.75rem, calc(0.869rem + 3.761vw), 3.125rem);
        font-weight:900;
        text-align:center;
        line-height:1.7;
        text-decoration:underline var(--yellow) 0.67em;
        text-underline-offset:calc((1lh - 1em) / -2);
    }
    & p {
        margin-top:0.84em;
        font-weight:bold;
        /* viewport:375-1200px  18-25px */
        font-size:clamp(1.125rem, calc(0.926rem + 0.848vw), 1.563rem);
        text-align:center;
    }
    & .bubble {
        --bg-color:#F47A44;

        position:relative;
        /* viewport:375-960px  11-25.5px */
        margin-top:clamp(0.688rem, calc(0.107rem + 2.479vw), 1.594rem);
        padding:0.4545em 0.9090em; /* 10px 20px */
        /* viewport:375-960px  16-22px */
        font-size:clamp(1rem, calc(0.76rem + 1.026vw), 1.375rem);
        font-weight:bold;
        color:#fff;
        background-color:var(--bg-color);
        border-radius:10px;

        &:after {
            --size:0.7272em;

            content:"";
            position:absolute;
            display:block;
            width:var(--size);
            height:calc(tan(60deg) * var(--size) / 2);
            background-color:var(--bg-color);
            clip-path:polygon(0 0, 100% 0, 50% 100%);
            inset:calc(100% - 1px) auto auto 50%;
            translate:-50% 0;
        }
    }
    & .bubble + .img {
        /* viewport:375-960px  17.5-22.5px */
        margin-top:clamp(1.094rem, calc(0.893rem + 0.855vw), 1.406rem);
    }
    & .img {
        /* viewport:375-960px  11-33px */
        margin-top:clamp(0.688rem, calc(-0.194rem + 3.761vw), 2.063rem);
    }
    & .img.richi img {
        width:auto;
        height:204px;
    }
    & .btns {
        display:grid;
        /* viewport:960-1200px  10-47.5px */
        column-gap:clamp(0.625rem, calc(-8.75rem + 15.625vw), 2.969rem);
        /* viewport:375-960px  13-33px */
        row-gap:clamp(0.813rem, calc(0.011rem + 3.419vw), 2.063rem);
        /* viewport:375-960px  25-48.5px */
        margin-top:clamp(1.563rem, calc(0.621rem + 4.017vw), 3.031rem);
        width:100%;

        &:where(.btns3) { grid-template-columns:repeat(3, 1fr);}
        &:where(.btns4) { grid-template-columns:repeat(2, 1fr);}
        
        & a {
            display:block;
            height:3lh;
            align-content:center;
            background-color:var(--khaki);
            border-radius:100vmax;
            color:#fff;
            font-weight:900;
            /* viewport:960-1200px  18-22px */
            font-size:clamp(1.125rem, calc(0.125rem + 1.667vw), 1.375rem);
            text-align:center;
            line-height:1.68;

            &:before, &:after { position:absolute; inset-block:50% auto; translate:0% -50%;}
            &:before { inset-inline:1em auto;}
            &:after {
                inset-inline:auto 1em;
                width:1.1em;
                aspect-ratio:24.9/22.9;
                background-image:url(/service/teiju_common/img/icon_btns_arrow.svg);
            }
            &.jobFair_1:before { width:3.1364em; aspect-ratio:68.89/80.36; background-image:url(/service/teiju_common/img/ill/jobFair_1.png);}
            &.jobFair_2:before { width:4.2273em; aspect-ratio:93.47/65.44; background-image:url(/service/teiju_common/img/ill/jobFair_2.png);}
            &.jobFair_3:before { width:3.7727em; aspect-ratio:83.62/68.81; background-image:url(/service/teiju_common/img/ill/jobFair_3.png);}
            &.students_1:before { width:2.1364em; aspect-ratio:46.82/73.44; background-image:url(/service/teiju_common/img/ill/students_1.png);}
            &.students_2:before { width:2.8636em; aspect-ratio:62.74/68.04; background-image:url(/service/teiju_common/img/ill/students_2.png);}
            &.students_3:before { width:2.4091em; aspect-ratio:53.03/72.37; background-image:url(/service/teiju_common/img/ill/students_3.png);}
            &.newWork_1:before { width:3.6364em; aspect-ratio:79.94/82.42; background-image:url(/service/teiju_common/img/ill/newWork_1.png);}
            &.newWork_2:before { width:2.0909em; aspect-ratio:46.31/89.97; background-image:url(/service/teiju_common/img/ill/newWork_2.png);}
            &.newWork_3:before { width:3.0909em; aspect-ratio:68.21/80.77; background-image:url(/service/teiju_common/img/ill/newWork_3.png);}
            &.newWork_4:before { width:2.8182em; aspect-ratio:61.93/80.78; background-image:url(/service/teiju_common/img/ill/newWork_4.png);}
            &.invited_1:before { width:3.5455em; aspect-ratio:78.32/84.81; background-image:url(/service/teiju_common/img/ill/invited_1.png);}
            &.invited_2:before { width:3.5455em; aspect-ratio:78.66/78.66; background-image:url(/service/teiju_common/img/ill/invited_2.png);}
            &.invited_3:before { width:2.5455em; aspect-ratio:56.31/79.68; background-image:url(/service/teiju_common/img/ill/invited_3.png);}
        }
        &.btns4 a:before { inset-inline:2em auto;}
    }
}
@media (width < 960px){
    .jobs {

        & .img { width:max(300px, 50%);}
        & .img.richi img { height:auto;}
        & .btns {
            grid-template-columns:1fr;
            
            & a { width:300px; margin-inline:auto;}
            &.btns4 a:before { inset-inline-start:1em;}
        }
    }
}

/* ===========================================================================
    movies & interviews
=========================================================================== */
:is(.movies, .interviews) {
    width:var(--content-width);
    margin-inline:auto;

    & > h2 {
        padding-bottom:20px;
        color:var(--red);
        /* viewport:375-960px  30-50px */
        font-size:clamp(1.875rem, calc(1.074rem + 3.419vw), 3.125rem);
        font-weight:900;
        text-align:center;

        &:after {
            width:96px;
            aspect-ratio:96.23/10.03;
            background-image:url(/service/teiju_common/img/icon_h2.svg);
            inset:auto auto 0 50%;
            translate:-50% 0;
        }
    }
    & > p {
        /* viewport:375-960px  10-33px */
        margin-top:clamp(0.625rem, calc(-0.296rem + 3.932vw), 2.063rem);
        /* viewport:375-960px  18-25px */
        font-size:clamp(1.125rem, calc(0.845rem + 1.197vw), 1.563rem);
        font-weight:bold;
        text-align:center;
    }
}
.movies {
    /* viewport:375-960px  40-100px */
    padding-top:clamp(2.5rem, calc(0.096rem + 10.256vw), 6.25rem);
    padding-bottom:50px;

    & ul {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        /* viewport:375-960px  40-82.5px */
        row-gap:clamp(2.5rem, calc(0.797rem + 7.265vw), 5.156rem);
        /* viewport:960-1200px  40-77.5px */
        column-gap:clamp(2.5rem, calc(-6.875rem + 15.625vw), 4.844rem);
        margin-top:78px;
    }
    & li {
        display:grid;
        grid-template:
            "img b" auto
            "img t" auto
            "img link" 1fr / 1fr 1fr;
        /* viewport:375-960px  6-12px */
        row-gap:clamp(0.375rem, calc(0.135rem + 1.026vw), 0.75rem);
        /* viewport:375-960px  19.5-33px */
        column-gap:clamp(1.219rem, calc(0.678rem + 2.308vw), 2.063rem);
        
        & .img {
            grid-area:img;
            position:relative;
            width:fit-content;

            &:after {
                content:"";
                position:absolute;
                display:block;
                width:min(90px, 36.5%);
                height:auto;
                aspect-ratio:1;
                background:url(/service/teiju_common/img/icon_youtube.svg) no-repeat center / contain;
                inset:50% auto auto 50%;
                translate:-50% -50%;
                pointer-events:none;
            }
            & img { border-radius:30px; height:100%; object-fit:cover;}
        }
        & .bubble {
            grid-area:b;
            margin-left:-16px;
            
            & img {
                width:100%;
                /* viewport:357-960px  50-76px */
                height:clamp(3.125rem, calc(2.083rem + 4.444vw), 4.75rem);
                object-fit:contain;
                object-position:center left;
            }
        }
        & .title {
            grid-area:t;
            /* viewport:375-960px  16-25px */
            font-size:clamp(1rem, calc(0.639rem + 1.538vw), 1.563rem);
            font-weight:900;
            line-height:1.4;
        }
        & > a {
            grid-area:link;
            position:relative;
            width:fit-content;
            padding-right:0.3em;
            /* viewport:375-960px  14-22px */
            font-size:clamp(0.875rem, calc(0.554rem + 1.368vw), 1.375rem);
            font-weight:bold;
            color:#536C77;
            align-self:end;
            text-decoration:underline;
            text-underline-offset:0.5em;

            &:after {
                content:"";
                position:absolute;
                display:block;
                width:1.4545em;
                height:auto;
                aspect-ratio:1;
                background:url(/service/teiju_common/img/icon_youtube_arrow.svg) no-repeat center / contain;
                inset:50% auto auto 100%;
                translate:0 -50%;
            }
        }
        &.other {
            position:relative;
            display:block;
            align-self:center;
            justify-self:center;
    
            & picture:nth-of-type(2) img {
                position:absolute;
                inset:150px auto auto calc(100% + 27.5px);
            }
        }
    }
}
.interviews {
    /* viewport:375-960px  93.5-125.5px */
    padding-top:clamp(5.844rem, calc(4.562rem + 5.47vw), 7.844rem);
    /* viewport:375-960px  100-200px */
    padding-bottom:clamp(6.25rem, calc(2.244rem + 17.094vw), 12.5rem);

    & > ul {
        --row-gap:clamp(2.625rem, calc(1.409rem + 5.189vw), 5.625rem);
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        /* viewport:375-1300px  42-90px */
        row-gap:var(--row-gap);
        /* viewport:960-1300px  10-62.5px */
        column-gap:clamp(0.625rem, calc(-8.64rem + 15.441vw), 3.906rem);
        /* viewport:375-1300px  51.5-105px */
        margin-top:clamp(3.219rem, calc(1.863rem + 5.784vw), 6.563rem);

        & li {
            /* viewport:375-1300px  70-100px */
            --radius:clamp(4.375rem, calc(3.615rem + 3.243vw), 6.25rem);

            /* スマホ時の調整に使用 */
            --sp-gap:0%;

            position:relative;
            /* viewport:375-1300px  29.5-42px */
            padding-top:clamp(1.844rem, calc(1.527rem + 1.351vw), 2.625rem);
            padding-inline:calc(47.9% - var(--sp-gap)) 6%;
            /* viewport:375-1300px  59.5-70px */
            padding-bottom:clamp(3.719rem, calc(3.453rem + 1.135vw), 4.375rem);
            border-radius:var(--radius);
            background-image:linear-gradient(to bottom, var(--gradientStart, #FFAF43), var(--gradientEnd, #E34202));
            color:#fff;
            z-index:0;

            &.orange { --gradientStart:var(--orange); --gradientEnd:var(--orange-dark);}
            &.green { --gradientStart:var(--green); --gradientEnd:var(--green-dark);}
            &.blue { --gradientStart:#56A9CE; --gradientEnd:var(--blue-dark);}
            &.sky { --gradientStart:var(--sky); --gradientEnd:var(--sky-dark);}

            &:before {
                content:"";
                position:absolute;
                display:block;
                height:auto;
                max-height:110%;
                background:url() no-repeat bottom left / contain;
                inset:auto auto 0 0;
                border-radius:0 0 0 var(--radius);
                z-index:-1;
            }
            &.i_1:before {
                width:calc(48.8791% - var(--sp-gap));
                aspect-ratio:278/417;
                background-image:url(/service/teiju_common/img/interviews/i_1.png);
            }
            &.i_2:before {
                width:calc(56.9670% - var(--sp-gap));
                aspect-ratio:324/419;
                background-image:url(/service/teiju_common/img/interviews/i_2.png);
            }
            &.i_3:before {
                width:calc(48.8791% - var(--sp-gap));
                aspect-ratio:278/363;
                background-image:url(/service/teiju_common/img/interviews/i_3.png);
            }
            &.i_4:before {
                width:calc(49.9340% - var(--sp-gap));
                aspect-ratio:284/388.4;
                background-image:url(/service/teiju_common/img/interviews/i_4.png);
            }
            &.i_5:before {
                width:calc(51.6923% - var(--sp-gap));
                aspect-ratio:294/382.75;
                background-image:url(/service/teiju_common/img/interviews/i_5.png);
            }
            &.i_6:before {
                width:calc(53.0989% - var(--sp-gap));
                aspect-ratio:302/396;
                background-image:url(/service/teiju_common/img/interviews/i_6.png);
            }
        }
        & .title {
            position:relative;
            /* viewport:375-1300px  16-30px */
            font-size:clamp(1rem, calc(0.645rem + 1.514vw), 1.875rem);
            font-weight:900;
            line-height:1.3333;
        }
        & .title:before {
            content:"";
            position:absolute;
            display:block;
            width:100%;
            /* viewport:375-1300px  50-76px */
            height:clamp(3.125rem, calc(2.466rem + 2.811vw), 4.75rem);
            background:url() no-repeat center left / contain;
            inset:auto auto calc(100% + 0.2em) -0.5em;
        }
        & li.orange .title:before { background-image:url(/service/teiju_common/img/interviews/b_global.png);}
        & li.green .title:before { background-image:url(/service/teiju_common/img/interviews/b_create.png);}
        & li.blue .title:before { background-image:url(/service/teiju_common/img/interviews/b_career.png);}
        & li.sky .title:before { background-image:url(/service/teiju_common/img/interviews/b_wlb.png);}
        & .corp {
            margin-top:1em;
            /* viewport:375-1300px  13-19px */
            font-size:clamp(0.813rem, calc(0.66rem + 0.649vw), 1.188rem);
            line-height:1.36;
        }
        & .name {
            /* viewport:375-1300px  20-30px */
            font-size:clamp(1.25rem, calc(0.997rem + 1.081vw), 1.875rem);
            font-weight:bold;
            line-height:1.2666;
        }
        & .name small { font-size:0.6666em;}
        & button {
            position:absolute;
            inset:auto 0 0 auto;
            display:flex;
            align-items:center;
            gap:0.25em;
            padding:1em 0.75em 1em 1.25em;
            background-color:#fff;
            color:#536C77;
            /* viewport:375-1300px  14-22px */
            font-size:clamp(0.875rem, calc(0.672rem + 0.865vw), 1.375rem);
            font-weight:bold;
            border:none;
            border-radius:1.3636em 0 0 0;

            &:before {
                content:"";
                position:absolute;
                display:block;
                width:2em;
                height:auto;
                aspect-ratio:42.5/46.15;
                inset:auto -1px calc(100% - 1px) auto;
                background:url(/service/teiju_common/img/interviews/radius.svg) no-repeat center / contain;
            }
            &:after {
                content:"";
                display:block;
                width:1.4545em;
                height:auto;
                aspect-ratio:1;
                background:url(/service/teiju_common/img/icon_youtube_arrow.svg) no-repeat center / contain;
            }
        }
    }
}
@media (width < 960px){

    .movies {
        padding-bottom:0px;

        & ul { grid-template-columns:1fr; width:max(330px, 62.5%); margin-inline:auto;}
        & li {
            grid-template-columns:repeat(2, auto);

            & > a { align-self:start; margin-top:6px;}
            &.other { display:none;}
        }
    }
    .interviews {

        & > ul {
            display:block;
            width:60%;
            margin-inline:auto;

            & li { --sp-gap:3%;}
            & li + li { margin-top:var(--row-gap);}
        }
    }
}
@media (width < 600px){
    .interviews {

        & ul { width:100%;}
    }
}

/* ===========================================================================
    modal
=========================================================================== */
.modal {
    --c:#3A728B;

    inset:50% auto auto 50%;
    width:min(1200px, 85vw);
    height:min(800px, 85vh);
    background-color:#fff;
    border:solid 1px var(--c);
    translate:-50% -50%;
    overflow:visible;
    animation:modal-active 0.25s ease;

    &::backdrop { background-color:rgb(255 255 255 / 0.70);}
    & .close {
        /* viewport:768-960px 40-70px */
        --w:clamp(2.5rem, calc(-5rem + 15.625vw), 4.375rem);

        display:grid;
        place-items:center;
        position:absolute;
        inset:0 auto auto 100%;
        translate:-50% -50%;
        width:var(--w);
        height:auto;
        aspect-ratio:1;
        padding:calc(var(--w) * 0.215);
        background-color:inherit;
        border:inherit;
        border-radius:50%;
        z-index:1;
    }
    & .close span {
        grid-area:1/-1;
        display:block;
        width:112.5%;
        height:2px;
        background-color:var(--c);
        transform-origin:center;
    }
    & .close span:nth-of-type(1) { rotate:45deg;}
    & .close span:nth-of-type(2) { rotate:-45deg;}
    & .modal_wrap {
        height:100%;
        overflow:clip auto;
        scrollbar-width:none;
        overscroll-behavior:none;
        word-break:break-word;
    }
}
@keyframes modal-active {
    0% { opacity:0; scale:0.9;}
    100% { opacity:1; scale:1.0;}
}
.details {
    padding-block:3rem;

    & h2 {
        margin-inline:auto;
        font-family:"Noto Serif JP", serif;
        /* viewport:768-960px  27-45px */
        font-size:clamp(1.688rem, -2.813rem + 9.375vi, 2.813rem);
        font-weight:bold;
        text-align:center;
    }
    & .hash_list {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:3px 5px;
        /* viewport:768-960px  21-35px */
        margin-top:clamp(1.313rem, -2.188rem + 7.292vi, 2.188rem);

        & a {
            display:flex;
            align-items:baseline;
            gap:3px;
            padding-block:3px;
            padding-inline:5px 10px;
            color:#3A728B;
            font-size:14px;
            font-weight:bold;
            background-color:#fff;
            border:solid 1px currentColor;
            border-radius:5px;
        
            pointer-events:none;
        }
        & a:before{
            content:"";
            display:block;
            width:0.75em;
            aspect-ratio:1;
            background:url(/service/teiju_common/img/icon_hash.svg) no-repeat center / contain;
            flex-shrink:0;
        }
    }
    & .main_visual {
        position:relative;
        margin-top:53px;
        margin-bottom:90px;
        padding-bottom:154px;
    }
    & .main_visual img { width:100%;}
    & .main_visual .profile {
        position:absolute;
        inset:auto 3rem 0 auto;
        padding:1.7894em 2.6315em 2.7894em;
        width:fit-content;
        line-height:1.5;
        background-color:rgb(255 255 255 / 0.9);
        box-shadow:var(--shadow);
        border-radius:1em 4em;

        /* viewport:768-960px  16-19px */
        font-size:clamp(0.875rem, -0.375rem + 2.604vi, 1.188rem);
    }
    & .main_visual .red { color:#E7380D; font-size:1.0526em;/* 20px */ font-family:"Fraunces", serif;}
    & .main_visual .career { margin-top:0.5263em;/* 10px */}
    & .main_visual .names { margin-top:0.1666em;/* 5px */ font-size:1.5789em;/* 30px */ font-weight:bold;}
    & .main_visual .name { font-size:1.3333em;}
    & .main_visual .eng { font-size:0.5em; font-weight:normal; font-family:"Noto Serif JP", serif;}
    & .main_visual .location { margin-top:0.7222em;/* 13px */ font-size:0.9473em;/* 18px */}
    & .main_visual :is(.career, .location):empty { display:none;}
    & .editor_wrap {
        width:85%;
        margin-inline:auto;
        /* viewport:768-960px  16-19px */
        font-size:clamp(1rem, 0.25rem + 1.563vi, 1.188rem);
    }
    & .editor_wrap h3 {
        position:relative;
        /* margin-block:167px 39px; */
        margin-block:4.6388em 1.0833em;
        font-weight:bold;
        /* viewport:768-960px 21-36px */
        font-size:clamp(1.313rem, -2.438rem + 7.813vi, 2.25rem);
        font-family:inherit;
        text-align:left;
        z-index:0;
    }
    & .editor_wrap h3:first-of-type { margin-top:2em;}
    & .editor_wrap h3:before {
        content:"";
        position:absolute;
        display:block;
        width:2.7777em;
        aspect-ratio:100/117;
        background:url(/service/teiju_common/img/details/icon_h3.svg) no-repeat center / contain;
        rotate:275deg;
        inset:0.5lh auto auto 0.5em;
        translate:-50% -50%;
        z-index:-1;
    }
    & .editor_wrap img { width:100%; margin-top:2.1052em;}
    & .editor_wrap dl {
        margin-block:1.8421em;/* 35px */
        /* viewport:25-42px */
        padding-top:clamp(1.563rem, -2.688rem + 8.854vi, 2.625rem);
        /* viewport:768-960px  30-50px */
        padding-inline:clamp(1.875rem, -3.125rem + 10.417vi, 3.125rem);
        padding-bottom:clamp(1.875rem, -3.125rem + 10.417vi, 3.125rem);
        border:solid 1px #9D9D9D;
        border-radius:10px;
    }
    & .editor_wrap dt { font-weight:bold; font-size:1.1578em;/* 22px */ color:#E7380D;}
    & .editor_wrap dd { margin-top:1.1052em;/* 21px */}
}
@media (width < 768px){
    .details {
        & .main_visual { padding-bottom:0;}
        & .main_visual .profile {
            position:relative;
            inset:auto;
            margin-top:-1.5em;
            margin-inline:auto;
            padding:1.5em;
            width:85%;
            border-radius:0.5em 2em;
            z-index:1;
        }
        & .main_visual .name { font-size:1em;}
        & .afterword:before { font-size:17px; border-radius:20px 2.5px;}
        & .editor_wrap { width:90%; font-size:15px;}
    }
}




/* ===========================================================================
    footer
=========================================================================== */
footer {
    container-type:inline-size;
    padding-block:90px 57px;
    overflow-x:clip;
    background-color:var(--green);
}
footer .content_wrap { --w:min(1200px, 95cqw);}
footer .logo { filter:brightness(0);}
footer .logo img { width:355px;}
footer strong { font-weight:inherit;}
footer address { margin-top:30px; font-style:normal; font-weight:bold; font-size:17px;}
footer .copy { margin-top:130px; font-size:13px; font-family:"Fraunces", serif;}

/* bg */
footer .ellipse.f_2 {
    position:absolute;
    /* viewport:768-960px  500-611px */
    width:clamp(31.25rem, 3.5rem + 57.813vi, 38.188rem);
    aspect-ratio:611/448;
    background:url(/service/teiju_common/img/ellipse/f_2_pc.svg) no-repeat center / contain;
    inset:50% 0 auto auto;
    translate:50% -50%;
}
@media (width < 768px){
    footer { padding-block:36px 88px;}
    footer .logo img { margin-top:21px; width:277px;}
    footer strong { margin-bottom:0.75em; font-size:18px;}
    footer address { margin-top:20px; font-size:15px;}
    footer .copy { margin-top:62px; font-size:11px;}

    /* ===== bg ===== */
    footer .ellipse.f_2 {
        width:226px;
        inset:115px -75px auto auto;
        translate:unset;
    }
}