@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Readex+Pro:wght@200&family=Roboto:wght@400;500;700;900&display=swap');

/*  */

body.message {

    & #container {
        padding-bottom: 164px;
    }

    & #kv {
        width: 752px;
        height: 352px;
        position: relative;
        margin-inline: auto;
    }

    & #kv h2 {
        font-size: var(--fs32);
        font-weight: 400;
        color: #fff;
        background-color: #EC6C00;
        display: inline-block;
        padding: 0.5em 1.0em;
        position: absolute;
        right: -30px;
        bottom: -20px;
        line-height: 1.4;
        text-align: center;
    }

    #sec_01 figure {
        width: 752px;
        margin-inline: auto;
        margin: 50px auto 90px;
    }


    & article {
        width: 490px;
        margin: 40px auto 0;
    }

    & article p {
        color: #555;
        font-size: var(--fs14);
    }

    & article p.name {
        font-size: var(--fs32);
        margin-top: 45px;
    }

    & article p.name span {
        font-size: 0.5em;
        margin-left: 1em;
    }

    /*  */
}

body.president {

    & #kv {
        height: 453px;
    }

    & #kv h2 {
        font-size: var(--fs24);
        bottom: -50px;
        right: -44px;
        padding: 0.7em 1.2em;
    }

    & #kv h3 {
        font-size: var(--fs24);
        text-align: center;
        line-height: 1.4;
        padding: 0.8em 1.0em;
    }

    & section[id^="sec_"] h2 {
        margin-top: 3em;
    }

}

/*  */

body.outline {

    & #container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 0 55px;
        padding-bottom: 90px;
        runrun
    }

    & #container h2 {
        font-size: var(--fs24);
        font-weight: 500;
        color: #fff;
        background-color: #EC6C00;
        display: inline-block;
        padding: 0.2em 1.8em;
    }

    & #container a {
        color: #3955B7;
        text-decoration: underline;
    }


    & #summary {
        width: 848px;
    }

    & #summary dl {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    & #summary dt,
    & #summary dd {
        border-bottom: #AAAAAA solid 1px;
        font-size: var(--fs16);
        padding: 2em 0;
    }

    & #summary dt {
        width: 144px;

    }

    & #summary dd {
        width: calc(100% - 144px);
    }

    & #summary iframe {
        margin-top: 20px;
    }

    & #summary dd p {
        font-size: var(--fs16);
        margin-bottom: 1em;
    }

    & #summary dd h3 {
        font-weight: 700;
        margin-bottom: 0.4em;
    }

    & #summary dd h3:not(:first-child) {
        margin-top: 1.6em;
    }

    & #summary dd h3::before {
        content: '●';
        display: inline-block;
        color: #F26F20;
        margin-right: 0.2em;
    }

    & #summary p.btn {
        margin-top: 1em;
    }

    & #summary p.btn a:not(#photos p.btn a) {
        font-size: var(--fs16);
        padding: 0.5em 4em;
    }

    & #summary p.btn:last-of-type a:not(#photos p.btn a) {
        padding: 0.5em 2em;
    }

    /*  */

    & #history {
        width: 220px;
    }

    & #history dl {
        margin-top: 30px;
    }

    & #history dt,
    & #history dd {}

    & #history dt {
        font-size: var(--fs18);
        font-weight: 700;
        border-left: #EC6C00 solid 4px;
        line-height: 1;
        padding: 0 0 0 0.4em;
    }

    & #history dt:not(:first-child) {
        margin-top: 1.8em;
    }

    & #history dd {
        font-size: var(--fs14);
        margin-top: 0.5em;
        text-indent: 0.8em;
    }

    & #history dt span {
        display: inline-block;
        margin-left: 0.6em;
    }

    & #history p.last {
        font-size: var(--fs14);
        margin-top: 3em;
        margin-left: 0.8em;
        position: relative;

        display: inline-flex;
        justify-content: center;
        align-items: center;

    }

    & #history p.last::before {
        content: '';
        display: block;
        width: 2em;
        height: 1px;
        background-color: #000;
    }


    /*  */
}

/*  */

body.media {

    & #container {
        padding-bottom: 110px;
    }

    & #container h2 {
        font-size: var(--fs28);
        position: relative;
        line-height: 1.2;
        border-left: 3px solid #EC6C00;
        padding: 6px 0 6px 8px;
        font-feature-settings: "palt" 1;
        letter-spacing: 0.05em;
        text-align: left;
    }

    & #container div.wrap {

        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        & p {
            font-size: var(--fs16);
        }

    }

    & #container div.count {

        & p {
            font-family: "Roboto", sans-serif;
            font-size: var(--fs40);
            display: inline-block;

        }

        & p.this {
            color: #F26F20;
        }

        & p.total::before {
            content: '/';
            display: inline-block;
        }

    }

}

#list_media {

    margin-top: 24px;

    display: flex;
    gap: 40px;
    flex-wrap: wrap;


    & li {
        width: 352px;
        height: 352px;
        border-bottom: #F26F20 solid 4px;
        background-color: #F2EFED;
        overflow: hidden;
    }

    & .img_media {
        width: 344px;
        height: 220px;
        overflow: hidden;
        margin-inline: auto;
        margin-top: 4px;
    }

    & h3 {
        font-size: var(--fs18);
        padding-inline: 14px;
        margin-top: 12px;
        line-height: 1.4;
        font-weight: 700;
    }

    & h4 {
        font-size: var(--fs14);
        padding-inline: 14px;
        font-weight: 400;
    }

    & h4+p {
        font-size: var(--fs12);
        color: #777777;
        padding-inline: 14px;
    }


}

/*  */

#pager {
    text-align: center;
    margin-top: 80px;
    position: relative;

    & div.inner {
        display: inline-block;
        background-color: #F2EFED;
        border-radius: 32px;
        padding: 12px 12px;
        position: relative;
    }


    & div.pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 14px;
    }

    & div.pagination span.page-numbers,
    & div.pagination a {
        display: block;
        font-family: "Roboto", sans-serif;
        font-size: var(--fs16);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #4DC2DC;
        color: #fff;
        display: inline-flex;
        justify-content: center;
        align-items: center;

    }

    & div.pagination span.page-numbers {
        background-color: #Fff;
        color: #4DC2DC;
    }

    & div.pagination span.page-numbers.dots {
        background-color: transparent;
        width: auto;
        /* align-items: baseline; */
    }

    & div.pagination a.prev,
    & div.pagination a.next {
        width: 32px;
        height: 32px;
        background-color: #B2B2B2;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
    }

    & div.pagination a.next:after,
    & div.pagination a.prev:after {
        content: '';
        width: 0.6em;
        height: 0.6em;
        border: 0px;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        margin-left: 0.2em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-135deg);
    }

    & div.pagination a.next:after {
        transform: translate(-50%, -50%) rotate(45deg);
        margin-left: -0.1em;
    }

    & div.pagination a.prev {
        margin-right: 80px;
    }

    & div.pagination a.next {
        margin-left: 80px;
    }

    /*  */

    & div.count {
        position: absolute;
        right: 0;
        top: 0;
    }

}

body.detail {

    & #container {

        & div.ttl h3 {
            font-size: var(--fs20);
            font-weight: 400;
        }

        & div.ttl p {
            font-size: var(--fs14);
        }

        & div.ttl div.wrap {
            margin-top: 20px;
        }

        & figure {
            /* width: 800px; */
            max-width: 800px;
            width: 80vw;
            margin-top: 40px;
            margin-inline: auto;
        }
    }
}

body.media {
    & #container.detail {

        & div.ttl h3 {
            font-size: var(--fs20);
            font-weight: 400;
        }

        & div.ttl p {
            font-size: var(--fs14);
        }

        & div.ttl div.wrap {
            margin-top: 20px;
        }

        & figure {
            /* width: 800px; */
            max-width: 800px;
            width: 80vw;
            margin-top: 40px;
            margin-inline: auto;
        }
    }
}

body.recruiting {

    & #container {
        padding-bottom: 110px;

        & div.wrap {
            margin-top: 2em;
        }

    }

    & #container h2 {
        font-size: var(--fs28);
        position: relative;
        line-height: 1.2;
        border-left: 3px solid #EC6C00;
        padding: 6px 0 6px 8px;
        font-feature-settings: "palt" 1;
        letter-spacing: 0.05em;
        text-align: left;
    }

}

@media screen and (max-width: 768px) {
    #snav {
        width: auto;
        overflow-x: auto;
        white-space: nowrap;
        margin-left: 6vw;

        & #li_snav {
            gap: 0 1.4em;
            justify-content: flex-start;
            padding-left: 2vw;
        }

        & #li_snav li {
            font-size: 3.75vw;
            /* 12px */
        }

        & #li_snav li a {
            padding-bottom: 0.8em;
        }

    }

    /*  */

    body.message {
        & #kv {
            width: 100%;
            height: auto;
        }

        & #kv h2 {
            font-size: 4.375vw;
            /* 14px */
            font-size: 3.75vw;
            /* 12px */
            right: -3vw;
            bottom: -3vw;

        }

        & #container {
            padding-bottom: 20vw;
        }

        #sec_01 figure {
            width: 100%;
            margin: 4vw auto 6vw;
        }

        & article {
            width: 100vw;
            margin: 8vw auto 0 -6vw;
        }

        & article p {
            margin-left: 6vw;
            font-size: 3.75vw;
            /* 12px */
        }

        & article p.name {
            margin-top: 4vw;
            font-size: 5.625vw;
            /* 18px */
            font-size: 7.5vw;
            /* 24px */
        }



    }

    body.outline {

        & #container {
            display: block;
            padding-bottom: 20vw;
        }

        & #summary {
            width: 100%;
        }

        & #container h2 {
            font-size: 4.375vw;
            /* 14px */
        }

        & #summary dl {
            width: 100%;
            margin-top: 2vw;
        }

        & #summary dt,
        & #summary dd {
            font-size: 3.75vw;
            /* 12px */
            padding: 1em 0;
        }

        & #summary dt {
            width: 6em;
        }

        & #summary dd {
            width: calc(100% - 6em);
        }

        & #summary dd.aff br,
        & #summary dd.pnp br,
        & #summary dd.qca br {
            display: none;
        }

        & #summary dd h3 {
            font-size: 3.75vw;
            /* 12px */
        }

        & #summary dd p {
            font-size: 3.75vw;
            /* 12px */
        }

        & #summary iframe {
            width: 100%;
            height: 60vw;
        }

        /*  */

        & #history {
            width: auto;
            margin-top: 12vw;
        }

        & #history dt {
            font-size: 3.75vw;
            /* 12px */
        }

        & #history dd {
            font-size: 3.75vw;
            /* 12px */
        }

        & #history p.last {
            width: 100%;
            font-size: 3.125vw;
            /* 10px */
            margin-left: auto;
            /* justify-content: flex-end; */
        }




        /*  */
    }

    body.president {

        & #li_snav {
            /* margin-left: -50%; */
        }

        & #kv h2 {
            text-align: left;
        }

    }

    body.media {

        & #li_snav {
            /* margin-left: -70%; */
            /* transform: translate(-70%); */
        }

        & #container {
            padding-bottom: 12vw;
        }

        & #container h2 {
            font-size: 4.375vw;
            /* 14px */
        }

        & #container div.wrap {
            margin-top: 6vw;
            align-items: flex-start;
            flex-direction: column;
        }

        & #container div.wrap {
            & p {
                font-size: 3.75vw;
                /* 12px */
            }
        }

        & #container div.count {
            margin-left: auto;
        }

        & #container div.count {
            & p {
                font-size: 5.625vw;
                /* 18px */
            }
        }

        /*  */

        #list_media {
            margin-top: 6vw;
            display: block;

            & li {
                width: 100%;
                height: auto;
            }

            & li:not(:first-child) {
                margin-top: 8vw;
            }

            & li a {
                display: block;
                padding: 3vw 3vw;
            }

            & li a::after {
                content: "";
                display: block;
                clear: both;
            }

            & .img_media {
                width: 30vw;
                height: calc(30vw * 0.6395348837209303);
                margin-top: 0;
                margin-right: 2vw;
                float: left;
            }

            & h3 {
                font-size: 3.75vw;
                /* 12px */
                padding-inline: 0;
                margin-top: 0;

            }

            & h4 {
                font-size: 3.125vw;
                /* 10px */
                padding-inline: 0;
            }

            & h4+p {
                padding-inline: 0;
                font-size: 3.125vw;
                /* 10px */
            }


        }

        /*  */

        #pager {
            margin-top: 12vw;

            & div.inner {
                border-radius: 32px;
                padding: 2vw 4vw;
                width: 100%;
            }

            & div.pagination {
                gap: 0 4vw;
                justify-content: space-between;
            }

            & div.pagination a.prev {
                margin-right: auto;

            }

            & div.pagination a.next {
                margin-left: auto;
            }

            & div.pagination a.prev,
            & div.pagination a.next {
                width: 2em;
                height: 2em;
            }

            & div.pagination span.page-numbers,
            & div.pagination a {
                width: 2em;
                height: 2em;
                font-size: 3.125vw;
                /* 10px */

            }

            & div.count {
                display: none;
            }

        }



















        /*  */
    }

    body.media.detail {

        & #container {
            & div.ttl h3 {
                font-size: 4.0625vw;
                /* 13px */
            }

            & figure {
                max-width: initial;
                width: 100%;
                margin-top: 6vw;
            }
        }

        & #container div.wrap {
            & p {
                margin-top: 0.6em;
                font-size: 3.125vw;
                /* 10px */
                margin-left: auto;
            }
        }

    }

    body.media {

        & #container.detail {
            & div.ttl h3 {
                font-size: 4.0625vw;
                /* 13px */
            }

            & figure {
                max-width: initial;
                width: 100%;
                margin-top: 6vw;
            }
        }

        & #container.detail div.wrap {
            & p {
                margin-top: 0.6em;
                font-size: 3.125vw;
                /* 10px */
                margin-left: auto;
            }
        }
    }















    /*  */
}

/* sp */




































/*  */