@charset "UTF-8";

/*======================
*
header
*
=======================*/
header {
    position: fixed;
    z-index: 9999;
    top: 64px;
    left: calc((998 / 1366) * 100%);
    width: calc((304 / 1366) * 100%);
    transition: 0.3s ease-in-out;
}

header.is-scrolled {
    top: 15px;
}

@media (max-width:1365px) {
    header {
        left: initial;
        right: calc((55.5 / 1366) * 100%);
        width: fit-content;
    }
}

.header-logo {
    position: absolute;
    top: 48px;
    left: 50%;
    z-index: 9994;
    transform: translateX(-50%);
    width: calc((1255 / 1366) * 100%);
    max-width: 2000px;
}

.header-logo a {
    display: block;
    max-width: 184px;
    transition: 0.3s ease-in-out;

    @media (any-hover:hover) {
        &:hover {
            opacity: 0.75;
        }
    }
}

/*======================
追従ボタン
=======================*/
.fixedBtn-area .inner {
    justify-content: flex-end;
}

.header-btn .inner {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 100%;
}

.header-btn .inner>* {
    display: flex;
    align-items: center;
    height: 50px;
    font-family: var(--Roboto);
    font-weight: 700;
    border-radius: 4px;
}

/*entry*/
.header-btn .inner a.h-entryBtn {
    position: relative;
    justify-content: center;
    width: 160px;
    font-size: 20px;
    color: #FFF;
    background-image: var(--grade);
}

.header-btn .inner a.h-entryBtn::after {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 15px;
    width: 7px;
    height: 12px;
    background: url('img/common/arrow_w.webp') no-repeat center /100%;
}

/*menu*/
.header-btn .inner .menu-btn {
    display: flex;
    align-items: center;
    width: 128px;
    padding-left: 16px;
    cursor: pointer;
    background-color: #FFF;
}

.header-btn .inner .menu-btn .icn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 12px;
    height: 12px;
}

.header-btn .inner .menu-btn .icn span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background-color: var(--navy);
}

.header-btn .inner .menu-btn p {
    position: relative;
    font-size: 16px;
    margin-left: 16.5px;
    padding-left: 16.5px;
}

.header-btn .inner .menu-btn p::before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0.5px;
    width: 1px;
    height: 24px;
    border-radius: 5px;
    background-color: var(--navy);
}


/*======================
menu
=======================*/
.globalMenu-area {
    position: fixed;
    top: 0;
    right: min(-550px, calc((550 / 1366) * -100vw));
    width: min(550px, calc((550 / 1366) * 100vw));
    min-width: 550px;
    height: 100dvh;
    background: #FFF;
    z-index: 9999;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: 0.5s ease-in-out;

    &.is-active {
        right: 0;
    }

    &::-webkit-scrollbar {
        display: none;
    }
}

.globalMenu-area .menu-cont {
    padding: 64px 0 0;

    @media (min-width:2000px) {
        max-width: fit-content;
    }
}

/*ボタン*/
.globalMenu-area .header-btn .inner {
    justify-content: flex-end;
    padding-right: 40px;
}

.globalMenu-area .header-btn .inner .menu-btn {
    color: #FFF;
    background-color: var(--navy)
}

.globalMenu-area .header-btn .inner .menu-btn .icn span,
.globalMenu-area .header-btn .inner .menu-btn p::before {
    background-color: #FFF;
}

.globalMenu-area .header-btn .inner .menu-btn .icn span:first-of-type {
    transform: translateY(5px) rotate(45deg);
}

.globalMenu-area .header-btn .inner .menu-btn .icn span:nth-of-type(2) {
    display: none;
}

.globalMenu-area .header-btn .inner .menu-btn .icn span:last-of-type {
    transform: translateY(-5px) rotate(-45deg);
}

/*menu-cont*/
.globalMenu-area .menu-cont .global-nav {
    margin-top: 47px;
}

.globalMenu-area .menu-cont .global-nav .global-menu {
    width: calc(100% - 128px);
    margin: auto;
}

.globalMenu-area .menu-cont .global-nav ul li a {
    font-weight: 800;
    transition: 0.3s ease-in-out;
}

.globalMenu-area .menu-cont .global-nav>ul>li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: var(--Roboto);
    font-size: 20px;
    font-weight: 700;
}

.globalMenu-area .menu-cont .global-nav>ul>li+li a {
    position: relative;
    padding-top: 19px;

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        transform: scaleY(0.5);
        transform-origin: left;
        width: 100%;
        height: 2px;
        background-color: var(--navy);
    }
}

.globalMenu-area .menu-cont .global-nav>ul>li:not(:last-of-type) a {
    padding-bottom: 16px;
}

.globalMenu-area .menu-cont .global-nav>ul>li a span {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--Roboto);
    font-weight: 800;
    font-size: 14px;

    &::after {
        content: "";
        display: block;
        width: 24px;
        aspect-ratio: 1 / 1;
        border-radius: 3px;
        background: url(img/common/arrow_w.webp) var(--navy) no-repeat center / 7px;
        transition: 0.3s ease-in-out;
    }
}

@media (any-hover:hover) {
    .globalMenu-area .menu-cont .global-nav ul li a:hover {
        opacity: 0.75;
    }

    .globalMenu-area .menu-cont .global-nav>ul>li a:hover span::after {
        translate: 5px 0;
    }
}

.globalMenu-area .menu-cont .global-nav>ul+ul {
    width: calc(100% - 80px);
    margin: 24px auto 0;
    padding: 24px;
    border-radius: 4px;
    background-color: #F5F6FA;
}

.globalMenu-area .menu-cont .global-nav>ul+ul li ul {
    position: relative;
    display: flex;
    gap: 24px;
    width: 100%;
    margin-top: 24px;
    padding-top: 24px;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        transform: scaleY(0.5);
        transform-origin: left;
        width: 100%;
        height: 2px;
        background-color: var(--navy);
    }
}

.globalMenu-area .menu-cont .global-nav>ul+ul li li a {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    width: fit-content;
    font-size: 16px;

    &::after {
        content: "";
        display: block;
        width: 24px;
        aspect-ratio: 1 / 1;
        border-radius: 3px;
        background: url(img/common/arrow_w.webp) var(--navy) no-repeat center / 7px;
        transition: 0.3s ease-in-out;
    }

    @media (any-hover:hover) {
        &:hover {
            &::after {
                translate: 5px 0;
            }
        }
    }
}

.menu-bg {
    position: fixed;
    z-index: 9997;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: var(--navy);
    opacity: 0;
    transition: 0.5s ease-in-out;
    pointer-events: none;

    &.is-active {
        opacity: 0.5;
        pointer-events: auto;
    }
}

/*======================
*
mv
*
=======================*/
.mv-area {
    display: flex;
    align-items: center;
    position: relative;
    height: 100lvh;
    max-height: 768px;
    overflow: hidden;
}

/*背景画像*/
.mv-area .mv-bg {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mv-area .under-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: overlay;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-area .mv-cont {
    width: calc((1284 / 1366) * 100%);
    margin-left: auto;
}

/*スライダー*/
.mv-area .mv-cont #mv-slider {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    width: calc((720 / 1284) * 100%);
    height: 100dvh;
}

.mv-area .mv-cont #mv-slider ul li {
    position: relative;
}

/*車のイラスト*/
.mv-area .mv-cont #mv-slider ul li .car {
    margin: auto;
}

.mv-area .mv-cont #mv-slider ul li .car1 {
    width: calc((678 / 720) * 100%);
}

.mv-area .mv-cont #mv-slider ul li .car2 {
    width: calc((620 / 720) * 100%);
}

.mv-area .mv-cont #mv-slider ul li .car3 {
    width: calc((501 / 720) * 100%);
}

.mv-area .mv-cont #mv-slider ul li .car4 {
    width: calc((600 / 720) * 100%);
}

/*各イラストの説明*/
.mv-area .mv-cont #mv-slider ul li img.text {
    position: absolute;
    transition: 0.3s ease-in-out;
}

.mv-area .mv-cont #mv-slider ul li img.text1 {
    top: calc((11 / 356) * 100%);
    width: 100%;
    opacity: 0;
}

.mv-area .mv-cont #mv-slider ul li img.text2 {
    top: calc((209 / 417) * 100%);
    right: calc((98 / 1366) * 100%);
    width: calc((260 / 720) * 100%);
    opacity: 0;
}

.mv-area .mv-cont #mv-slider ul li img.text3 {
    top: calc((223 / 411) * 100%);
    left: calc((94 / 1366) * 100%);
    width: calc((236 / 720) * 100%);
    opacity: 0;
}

.mv-area .mv-cont #mv-slider ul li img.text4 {
    top: calc((67 / 434) * 100%);
    right: calc((3/ 720) * 100%);
    width: calc((210 / 720) * 100%);
    opacity: 0;
}

.mv-area .mv-cont #mv-slider ul li.is-active img.text {
    /* animation: car_text 4.0s ease-in-out 1.0s forwards; */
    opacity: 1.0;
    transition: 1.0s ease-in-out 0.5s;
}

/* @keyframes car_text {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1.0;
    }


    80% {
        opacity: 1.0;
    }

    100% {
        opacity: 0;
    }
} */

/*見出し*/
.mv-area .hd-area {
    position: absolute;
    z-index: 6;
    width: 100%;
    left: 0;
    bottom: -5px;
}

.mv-area .hd-area h1 {
    position: absolute;
    width: 100%;
    top: -71%;
}

.mv-area .hd-area h1 span {
    display: none;
}

.mv-area .hd-area h1 img {
    width: 100%;
}

/*スクロール*/
.mv-area .scroll-area {
    position: absolute;
    z-index: 10;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    right: 0;
    width: 100px;
    height: 107px;
}

.mv-area .scroll-area>span {
    display: flex;
    align-items: center;
    gap: 6px;
    transform: rotate(90deg);
    transform-origin: center;
    font-family: var(--Roboto);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.mv-area .scroll-area>span span {
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--navy);
    animation: scroll-line 3.0s cubic-bezier(0.51, 0.7, 0.36, 1) 0.5s infinite;
}

@keyframes scroll-line {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1.0;
    }

    100% {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        opacity: 0;
    }
}

/*======================
top about
=======================*/
.top-about {
    position: relative;
    background: url(img/top/top-message_bg.webp) no-repeat top / cover;
}

.top-about .cont {
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--grade);
        opacity: 0.9;
    }
}

.top-about .text {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    z-index: 2;
    width: calc((660 / 1366) * 100%);
    font-family: var(--Mincho);
    font-weight: 400;
    font-size: clamp(22px, 2.34vw, 32px);
    line-height: 2.0;
    color: #FFF;
    margin: auto;
    padding: 145px 0;
}

.top-about .cont h2 {
    font-size: 1.0em;
    font-weight: 400;
    margin-top: 27px;
}

.top-about .cont h2 span {
    background-image: linear-gradient(to bottom, transparent calc((62 / 64) * 100%), #FFF calc((62 / 64) * 100%));
}

.top-about .cont p {
    font-size: calc((20 / 32) * 1.0em);
}

/*======================
top message
=======================*/
.top-message {
    padding: 120px 0;
}

.top-message .cont {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.top-message .cont .text-area {
    width: calc((450 / 1120) * 100%);
}

.top-message .cont .text-area p {
    font-size: 16px;
    line-height: 2.0;
    margin-top: 27px;
    margin-bottom: 12px;
}

.top-message .cont .img-area {
    width: calc((480 / 1120) * 100%);
}

.top-message .cont .img-area img {
    border-radius: 5px;
}

/*======================
top keyword
=======================*/
.top-keyword {
    position: relative;
}

.top-keyword .cont {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc((480 / 1366) * 100%);
    min-width: 480px;
    padding: 50px 0;
    border-radius: 5px;
}

@media (min-width:600px) {
    .top-keyword .cont {
        background: url('img/top/top-keyword_cont_bg.webp') no-repeat center / cover;
    }
}

.top-keyword .cont .text-area p {
    font-size: 16px;
    line-height: 2.0;
    margin-top: 27px;
    margin-bottom: 20px;
    text-align: center;
}


.top-keyword .cont .text-area :is(.btn, .hd) {
    margin: auto;
}

/*======================
top jobs
=======================*/
.top-jobs {
    position: relative;
}

@media (min-width:768px) {
    .top-jobs .cont {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc((calc(988 / 1366) * 100%));
    }
}

.top-jobs .text-area {
    width: fit-content;
    margin-left: auto;
}

.top-jobs .cont .text-area p {
    font-size: 16px;
    line-height: 2.0;
    margin-top: 27px;
    margin-bottom: 20px;
}

/*======================
interview slider
=======================*/
.top-interviewList {
    position: relative;
    margin-top: 120px;
}

.top-interviewList .text-cont {
    width: calc((1120 / 1366) * 100%);
}

@media (min-width:1025px) {
    .top-interviewList .text-cont {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

.top-interviewList .text-cont .text-area {
    width: fit-content;
}

.top-interviewList .text-cont .text-area p {
    font-size: 16px;
    line-height: 2.0;
    margin-top: 27px;
    margin-bottom: 20px;
}

/*splide*/
/*スライダーの内容*/
.top-interviewList #interview-slider .splide__track {
    padding-left: calc((843 / 1366) * 100%) !important;
}

.top-interviewList #interview-slider ul {
    align-items: flex-end;
    width: min(1920px, 100vw) !important;
}

.top-interviewList #interview-slider ul li {
    position: relative;
    width: calc((200 / 1366) * 100%);
    margin-right: calc((40 / 1366) * 100%);
    border-radius: 4px;
}

.top-interviewList #interview-slider ul li.is-active {
    width: calc((400 / 1366) * 100%);
}

.top-interviewList #interview-slider ul li:first-of-type {
    width: calc((400 / 1366) * 100%);
}


/*ページ送り*/
.top-interviewList #interview-slider .splide__arrows {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    top: 0;
    left: calc((603 / 1366) * 100%);
}

.top-interviewList #interview-slider .splide__arrows button {
    position: initial !important;
    width: 48px !important;
    height: initial !important;
    aspect-ratio: 1/1;
    transform: initial !important;
    background: url('img/common/arrow_navy.webp') no-repeat transparent center / 7px;
    border: solid 1px var(--navy);
    border-radius: 5px;
}

@media (max-width:1260px) {
    .top-interviewList #interview-slider .splide__arrows button {
        width: 35px !important;
    }
}

.top-interviewList #interview-slider .splide__arrows .splide__arrow--prev {
    transform: rotate(180deg) !important;
}

/*ページネーション*/
.top-interviewList #interview-slider .pagination {
    display: flex;
    align-items: flex-end;
    position: absolute;
    z-index: 2;
    top: calc((118 / 683) * 100%);
    left: calc((603 / 1366) * 100%);
    font-family: var(--Roboto);
    font-size: 24px;
    font-weight: 700;
}

@media (max-width:1260px) {
    .top-interviewList #interview-slider .pagination {
        top: calc((83 / 600) * 100%);
        font-size: 20px;
    }
}

.top-interviewList #interview-slider .pagination span {
    display: block;
    line-height: 1.0;
}

.top-interviewList #interview-slider .pagination span#slide-current {
    position: relative;
    top: 2px;
}

.top-interviewList #interview-slider .pagination span:not(:first-of-type) {
    font-size: 0.5em;
}

/*テキスト部分*/
.top-interviewList #interview-slider ul li .list-text {
    display: none;
    position: absolute;
    top: calc((137 / 600) * 100%);
    left: calc((240 / 400) * -100%);
    width: fit-content;
}

@media (max-width:1260px) {
    .top-interviewList #interview-slider ul li .list-text {
        top: calc((124 / 600) * 100%);
        font-size: 18px;
    }
}

@media (min-width:768px) {
    .top-interviewList #interview-slider ul li.is-active .list-text {
        display: block;
    }
}

.top-interviewList #interview-slider ul li .list-text h3 {
    font-size: clamp(14px, 1.46vw, 20px);
    font-weight: 700;
    color: #FFF;
}

.top-interviewList #interview-slider ul li .list-text h3 br {
    display: none;
}

.top-interviewList #interview-slider ul li .list-text h3 span {
    display: block;
    width: fit-content;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: var(--navy);
}

.top-interviewList #interview-slider ul li .list-text h3 span:not(:nth-of-type(1)) {
    margin-top: 5px;
}

.top-interviewList #interview-slider ul li .list-text .name_year {
    margin-top: 16px;
}

.top-interviewList #interview-slider ul li .list-text .name_year .name {
    font-size: clamp(12px, 1.02vw, 14px);
    font-weight: 700;
    margin-bottom: 5px;
}

.top-interviewList #interview-slider ul li .list-text .name_year .year {
    font-size: clamp(10px, 0.88vw, 12px);
}

.top-interviewList #interview-slider ul li img {
    border-radius: 4px;
}


/*======================
top link
=======================*/
.top-link {
    margin-top: 115px;
}

@media (max-width:1260px) {
    .top-link .w112 {
        width: 88%;
    }
}

.top-link .cont a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc((40 / 1120) * 100%);
    padding-bottom: 60px;
    border-bottom: solid 1px var(--navy);
    transition: 0.3s ease-in-out;
}

.top-link .cont+.cont a {
    padding-top: 60px;
}

.top-link .cont .hd-area {
    display: flex;
    align-items: center;
    gap: calc((23 / 560) * 100%);
    width: calc((560 / 1120) * 100%);
}

.top-link .cont .hd-area .hd {
    font-size: clamp(12px, 1.16vw, 16px);
}

.top-link .cont .hd-area .icn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    aspect-ratio: 1/1;
}

.top-link .cont .hd-area .icn img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.top-link .cont .text-area {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.top-link .cont .text-area::after {
    content: "";
    width: 24px;
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    background: url('img/common/arrow_w.webp') no-repeat var(--navy) center / 7px;
    transition: 0.3s ease-in-out;
}

.top-link .cont .text-area p {
    flex: 1 1;
    font-size: clamp(12px, 1.16vw, 16px);
    line-height: 2.0;
    text-align: end;
}

@media (any-hover:hover) {
    .top-link .cont a:hover {
        opacity: 0.75 !Important;

        .text-area::after {
            translate: 5px 0;
        }
    }
}

/*======================
top forHigh-school
=======================*/
.top-forHigh-school .cont {
    position: relative;
    width: calc((1240 / 1366) * 100%);
    margin: 120px auto 160px;
    background: url(img/top/topHighSchool_bg.webp) no-repeat center / cover;
    overflow: hidden;
}

.top-forHigh-school .cont img.text-deco {
    position: absolute;
    z-index: 1;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: calc((1132 / 1366) * 100%);
}

.top-forHigh-school .cont .text-area {
    position: relative;
    z-index: 3;
    width: fit-content;
    margin: auto;
    padding: 104px 0 48px;
}

.top-forHigh-school .cont .text-area .hd h2 {
    font-size: 32px;
    font-weight: 900;
    text-align: center;
}

.top-forHigh-school .cont .text-area .hd h2 span {
    display: inline-block;
    color: #FFF;
    padding: 0 8px;
    margin-right: 5px;
    border-radius: 4px;
    background-color: var(--light-blue);
}

.top-forHigh-school .cont .text-area p {
    font-size: 16px;
    line-height: 2.0;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.top-forHigh-school .cont .text-area .btn {
    margin: auto;
}

.top-forHigh-school .cont img:is(.women, .men) {
    position: absolute;
    z-index: 2;
    bottom: 0;
}

.top-forHigh-school .cont img.women {
    width: calc((240 / 1366) * 100%);
    left: calc((101 / 1366) * 100%);
    max-width: 300px;
}

.top-forHigh-school .cont img.men {
    width: calc((321 / 1366) * 100%);
    right: calc((68 / 1366) * 100%);
    max-width: 401px;
}

/*======================
*
under common
*
=======================*/
.under-mv01 {
    width: calc((1240 / 1366) * 100%);
    padding-top: 240px;
    padding-bottom: 64px;
    margin: auto;
}

/*h1*/
.under-mv01 .hd-area .hd01 {
    font-size: 24px;
    margin: 0 !important;
    text-align: start !important;
}

.under-mv01 .hd-area .hd01 h1::before {
    width: 20px;
}

.under-mv01 .hd-area .hd01 .sub {
    display: block;
    font-size: calc((80 / 24) * 1.0em);
    line-height: 1.0;
    margin-top: 14px;
}

/*======================
lead-cont
=======================*/
.lead-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: calc((64 / 1366) * 100%);
    margin-left: auto;
    border-bottom: solid 1px var(--line-color);
}

.lead-cont .text-area {
    width: calc((500 / 1302) *100%);
}

.lead-cont .text-area p {
    padding: 10px 0;
    font-size: clamp(16px, 1.46vw, 20px);
    line-height: 2.0;
}

.lead-cont .img-area {
    width: calc((683 / 1302) *100%);
}

/*======================
*
page
*
=======================*/
/*======================
page topmessage
=======================*/
#page .message-lead_cont {
    position: relative;
    width: 100%;
    background-image: var(--grade);
    overflow: hidden;
}

/*テキスト*/
#page .message-lead_cont .text-area {
    gap: 0;
    align-items: center;
    justify-content: center;
    width: calc((820 / 1366) * 100%);
    color: #FFF;
    padding: 120px 0;
    margin: auto;
}

@media (min-width:1024px) {
    #page .message-lead_cont .text-area {
        min-width: 820px;
    }
}

#page .message-lead_cont .text-area h2 {
    font-size: clamp(22px, 3.07vw, 42px);
}

#page .message-lead_cont .text-area p {
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 2.0;
    width: calc((348 / 820) * 100%);
    padding-left: calc((48 / 820) * 100%);
    margin-left: calc((48 / 820) * 100%);
    border-left: solid 1px #FFF;
}

#page .message-lead_cont .text-area p strong {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 9px;
}


/*背景*/
#page .message-lead_cont .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    mix-blend-mode: color-dodge;
    opacity: 0.5;
    pointer-events: none;
}

#page .message-lead_cont .bg1 {
    z-index: 2;
}


#page .message-lead_cont .bg2 {
    z-index: 1;
}

/*コンテンツ内容*/
#page .message-cont {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc((64 / 1120) * 100%);
    margin: 120px auto 0;
}

#page .message-cont.text-only {
    max-width: 910px;
    margin-bottom: 120px;
}

#page .message-cont:nth-of-type(even) {
    flex-direction: row-reverse;
}

#page .message-cont .text-area {
    flex: 1 1;
}

#page .message-cont .text-area h2 {
    font-size: clamp(22px, 2.34vw, 32px);
}

#page .message-cont .text-area p {
    font-size: clamp(14px, 1.16vw, 16px);
    font-weight: 400;
    line-height: 2.0;
    margin-top: 20px;
}

#page .message-cont .img-area {
    width: calc((464 / 1120) * 100%);
    border-radius: 5px;
    overflow: hidden;
}

/*======================
page kewyword
=======================*/
#page .kewyword-cont {
    gap: 0;
    margin: 80px auto 160px;
}

#page .kewyword-cont .cont {
    display: flex;
    align-items: flex-start;
    color: #FFF;
    padding: 32px 64px 32px 32px;
    border-radius: 5px;
    background-color: var(--navy);
}

#page .kewyword-cont>.cont {
    width: 100%;
    gap: 0;
}

#page .kewyword-cont .cont-wrapper+.cont {
    margin-top: 6px;
}


#page .kewyword-cont .cont-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 6px;
}

#page .kewyword-cont .cont-wrapper .cont {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: subgrid;
    grid-row: 2 span;
    gap: 0;
}


/*番号*/
#page .kewyword-cont .cont p.num {
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 700;
    padding-right: 16px;
}

/*テキスト内容*/
#page .kewyword-cont .cont .text-area {
    flex: 1 1;
    border-left: solid 1px rgba(255, 255, 255, 0.2);
    padding-left: 62px;
}

#page .kewyword-cont .cont-wrapper .cont .text-area {
    padding-top: 55px;
}

@media (min-width:768px) {
    #page .kewyword-cont .cont-wrapper .cont .text-area {
        padding-bottom: 30px;
    }
}

#page .kewyword-cont>.cont .text-area {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

#page .kewyword-cont .cont-wrapper .cont .text-area {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 span;
    gap: 24px;
    align-items: initial;
    height: 100%;
}

#page .kewyword-cont>.cont .text-area .hd-area {
    display: flex;
    align-items: center;
    flex: 1 1;
}

#page .kewyword-cont .cont .text-area h2 {
    font-family: var(--Roboto);
    font-size: clamp(19px, 2.34vw, 32px);
    font-weight: 700;
    line-height: 1.0;
}

#page .kewyword-cont .cont .text-area h2 span {
    display: inline-block;
    font-size: calc((48 / 32) * 1.0em);
}

#page .kewyword-cont .cont .text-area h2 span.mr {
    margin-right: 7px;
}

#page .kewyword-cont .cont .text-area h2 span.ml {
    margin-left: 7px;
}

@media (min-width:768) {
    #page .kewyword-cont .cont .text-area h2 span.nospml {
        margin-left: 7px;
    }
}


#page .kewyword-cont .cont .text-area h2 span.mt {
    margin-top: 19px;
}

#page .kewyword-cont .cont .text-area h2 span.num.mt {
    margin-top: 8px;
}

#page .kewyword-cont .cont .text-area h2 span.num {
    font-size: calc((80 / 32) * 1.0em);
}

#page .kewyword-cont .cont .text-area p {
    font-size: 16px;
    font-weight: 700;
    line-height: 2.0;
}

#page .kewyword-cont>.cont .text-area p {
    width: calc((500 / 990) * 100%);
}

@media (min-width:768px) {
    #page .kewyword-cont .cont-wrapper .cont .text-area .hd-area {
        display: flex;
    }

    #page .kewyword-cont .cont-wrapper .cont .text-area .hd-area.end {
        align-items: flex-end;
    }
}

/*======================
page environment
=======================*/
#page .environment-sec {
    position: relative;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width:768px) {

    #page .environment-sec:before,
    #page .environment-sec:after {
        content: "";
        position: absolute;
        background-color: var(--line-color2);
    }

    #page .environment-sec:before {
        transform: translateX(-50%);
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
    }

    #page .environment-sec:after {
        transform: translateY(-50%);
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
    }
}

#page .environment-sec .environment-cont {
    padding: 96px 0;
}

#page .environment-sec .environment-cont .hd-area {
    justify-content: center;
    gap: calc((30 / 555) * 100%);
    width: calc((555 / (1366 / 2)) * 100%);
    margin: auto;
}

#page .environment-sec .environment-cont .img-area {
    display: flex;
    align-items: center;
    width: calc((160 / 555) * 100%);
    aspect-ratio: 160 / 150;
}

#page .environment-sec .environment-cont .img-area img {
    width: 100%;
    object-fit: contain;
}

#page .environment-sec .environment-cont:nth-of-type(1) .img-area img {
    aspect-ratio: 160 / 140;
}

#page .environment-sec .environment-cont:nth-of-type(2) .img-area img {
    aspect-ratio: 160 / 150;
}

#page .environment-sec .environment-cont:nth-of-type(3) .img-area img {
    aspect-ratio: 160 / 142;
}

#page .environment-sec .environment-cont:nth-of-type(4) .img-area img {
    width: calc((128 / 160) * 100%);
    aspect-ratio: 128 / 140;
}

#page .environment-sec .environment-cont .hd-area h2 {
    flex: 1 1;
    width: fit-content;
    font-size: clamp(20px, 2.34vw, 32px);
}

#page .environment-sec .environment-cont p {
    width: calc((555 / (1366 / 2)) * 100%);
    font-size: clamp(14px, 1.17vw, 16px);
    line-height: 2.0;
    margin: 28px auto 0;
}

/*======================
page welfare
=======================*/
#page .welfare-sec {
    width: calc((1240 / 1366) * 100%);
    margin: 80px auto 160px;
}

#page .welfare-sec .welfare-cont {
    align-items: stretch;
    gap: 8px;
}

#page .welfare-sec .welfare-cont+.welfare-cont {
    margin-top: 80px;
}

#page .welfare-sec .welfare-cont .hd-area {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc((311 / 1240) * 100%);
    border-radius: 5px;
    overflow: hidden;
}

#page .welfare-sec .welfare-cont .hd-area::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grade);
    opacity: 0.9;
}

#page .welfare-sec .welfare-cont1 .hd-area {
    background: url(img/welfare/welfare-1.webp) no-repeat top left / cover;
}

#page .welfare-sec .welfare-cont2 .hd-area {
    background: url(img/welfare/welfare-2.webp) no-repeat top left / cover;
}

#page .welfare-sec .welfare-cont3 .hd-area {
    background: url(img/welfare/welfare-3.webp) no-repeat top left / cover;
}

#page .welfare-sec .welfare-cont4 .hd-area {
    background: url(img/welfare/welfare-4.webp) no-repeat top left / cover;
}

#page .welfare-sec .welfare-cont .hd-area .hd {
    position: relative;
    z-index: 3;
    color: #FFF;
    text-align: center;
}

#page .welfare-sec .welfare-cont .hd-area .hd .sub {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-family: var(--Roboto);
    font-weight: 700;
    font-size: clamp(10px, 0.88vw, 12px);
    padding-bottom: 4px;
    margin: 0 auto 16px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

#page .welfare-sec .welfare-cont .hd-area .hd .sub span {
    font-size: 2.0em;
}

#page .welfare-sec .welfare-cont .hd-area .hd h2 {
    font-size: clamp(15px, 1.46vw, 20px);
}

#page .welfare-sec .welfare-cont .text-area {
    flex: 1 1;
}

#page .welfare-sec .welfare-cont .text-area .text-cont {
    padding: 64px calc((64 / 919) * 100%);
    border-radius: 5px;
    background-color: #FFF;
}

#page .welfare-sec .welfare-cont .text-area .text-cont.flex {
    align-items: stretch;
    gap: 8px;
    padding: 0;
    background: transparent;
}

#page .welfare-sec .welfare-cont .text-area .text-cont.flex .inner {
    flex: 1 1;
    padding: 64px calc((64 / 919) * 100%);
    background-color: #FFF;
    border-radius: 5px;
}

#page .welfare-sec .welfare-cont .text-area .text-cont+.text-cont {
    margin-top: 7px;
}

#page .welfare-sec .welfare-cont .text-area .text-cont h3 {
    font-size: clamp(22px, 2.34vw, 32px);
}

#page .welfare-sec .welfare-cont .text-area .text-cont p {
    font-size: clamp(14px, 1.17vw, 16px);
    line-height: 2.0;
    margin-top: 24px;
}

#page .welfare-sec .welfare-cont .text-area .text-cont .annotation-list p {
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 2.0;
    margin-top: 0;
}

#page .welfare-sec .welfare-cont .text-area .text-cont .annotation-list li {
    display: flex;
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 2.0;
    margin-top: 0;
}

/*======================
page education_careerup
=======================*/
#page .education_careerup-sec+.education_careerup-sec {
    margin-top: 80px;
}

/*sec-header*/
#page .education_careerup-sec .sec-header {
    position: relative;
}

#page .education_careerup-sec .sec-header .img-area {
    position: relative;
    z-index: 2;
}

#page .education_careerup-sec .sec-header .img-area .header-deco {
    position: absolute;
    right: calc((64 / 1366) * 100%);
    bottom: 0;
    width: calc((719 / 1366) * 100%);
}

#page .education_careerup-sec .sec-header .hd-area {
    position: absolute;
    z-index: 3;
    left: calc((64 / 1366) * 100%);
    top: 80px;
}

#page .education_careerup-sec .sec-header .hd-area {
    font-size: clamp(22px, 2.34vw, 32px);
}

#page .education_careerup-sec .sec-header .hd-area h2 {
    font-size: 1.0em;
    margin-top: 32px;
}

#page .education_careerup-sec .sec-header .hd-area p {
    position: relative;
    width: fit-content;
    font-size: calc((20 / 32) * 1.0em);
    font-weight: 700;
    padding-bottom: 10px;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        border-radius: 5px;
        background-color: var(--navy);
    }
}

/*education-cont*/
#page .education_careerup-sec .education-cont {
    align-items: flex-start;
    gap: calc((8 / 1120) * 100%);
    margin-top: 36px;
}

#page .education_careerup-sec .education-cont img {
    margin-bottom: 32px;
    border-radius: 5px;
}

#page .education_careerup-sec .education-cont .cont {
    width: calc((100% - (8 / 1120) * 100%) / 2);
    margin-top: 44px;
}

#page .education_careerup-sec .education-cont .cont .text-area {
    width: calc((495 / 556) * 100%);
    font-size: clamp(22px, 2.34vw, 32px);
    margin: auto;
}

#page .education_careerup-sec .education-cont .cont .text-area h3 {
    font-size: 1.0em;
}

#page .education_careerup-sec .education-cont .cont .text-area p {
    font-size: clamp(14px, 1.17vw, 16px);
    line-height: 2.0;
    margin-top: 20px;
}

#page .education_careerup-sec .education-cont .cont .text-area p.annotation {
    font-size: 12px;
    margin-top: 9px;
    line-height: 2.0;
}

/*======================
education-cont
=======================*/
/*lead*/
#page .education_careerup-sec .career_up-cont .lead {
    font-size: 16px;
    text-align: center;
    line-height: 2.0;
    margin: 73px auto 58px;
}

/*case*/
#page .education_careerup-sec .career_up-cont .sub {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    font-family: var(--Roboto);
    font-size: 12px;
    font-weight: 700;
    margin: 0 auto 6px;
    padding-bottom: 4px;
    border-bottom: solid 1px rgba(102, 201, 237, 0.2);
}

#page .education_careerup-sec .career_up-cont .sub span {
    font-size: 2.0em;
}

#page .education_careerup-sec .career_up-cont .case {
    font-family: var(--Roboto);
    font-size: 12px;
    font-weight: 700;
    color: var(--light-blue);
    text-align: center;
    margin-bottom: 24px;
}

/*cont*/
#page .education_careerup-sec .career_up-cont {
    margin-bottom: 200px;
}

#page .education_careerup-sec .career_up-cont .cont-wrapper {
    align-items: stretch;
    gap: calc((29 / 1120) * 100%);
}

#page .education_careerup-sec .career_up-cont .cont {
    flex: 1 1;
}

#page .education_careerup-sec .career_up-cont .cont>* {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#page .education_careerup-sec .career_up-cont h3 {
    font-size: clamp(22px, 2.34vw, 32px);
    text-align: center;
    margin-bottom: 24px;
}

#page .education_careerup-sec .career_up-cont h3 span {
    display: block;
    font-size: calc((20 / 32) * 1.0em);
    margin-bottom: 5px;
}

#page .education_careerup-sec .career_up-cont .inner {
    position: relative;
    flex: 1 1;
    padding: 20px 0;
    border-radius: 5px;
    background-color: var(--navy);
}

#page .education_careerup-sec .career_up-cont .inner p {
    font-size: clamp(12px, 1.17vw, 16px);
    font-weight: 700;
    color: #FFF;
    line-height: 2.0;
    margin: auto calc((40 / 353) * 100%);
    padding: 20px 0;
}

#page .education_careerup-sec .career_up-cont .inner span.line {
    position: relative;
    display: block;
    width: calc(100% - ((80 / 353) * 100%));
    height: 1px;
    margin: auto;
    background-color: var(--line-color3);

    &::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc((33 / 353) * 100%);
        height: 10px;
        background-color: var(--navy);
    }
}

#page .education_careerup-sec .career_up-cont .inner span.line .arrow {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
}

#page .education_careerup-sec .career_up-cont .inner span.line .arrow span {
    width: 100%;
    aspect-ratio: 6/ 5;
    background-color: var(--light-blue);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#page .education_careerup-sec .career_up-cont .cont1 .inner p:last-of-type {
    width: calc((209 / 353) * 100%);
}

#page .education_careerup-sec .career_up-cont .cont2 .inner p:last-of-type {
    width: calc((153 / 353) * 100%);
}

#page .education_careerup-sec .career_up-cont .cont .inner img {
    position: absolute;
    bottom: -40px;
}

#page .education_careerup-sec .career_up-cont .cont1 .inner img {
    right: 40px;
    width: calc((60 / 353) * 100%);
}

#page .education_careerup-sec .career_up-cont .cont2 .inner img {
    right: 18px;
    width: calc((126 / 353) * 100%);
}

#page .education_careerup-sec .career_up-cont .cont3 .inner img {
    right: 22px;
    width: calc((89 / 353) * 100%);
}

/*======================
page jobs
=======================*/
/*リンクエリア*/
#page .jobs-img {
    position: relative;
    margin: 80px auto;
}

#page .jobs-img>div>a {
    display: block;
    position: absolute;
    z-index: 2;
    border-radius: 5px;
    --width1: calc((239 / 1120) * 100%);
    --width2: calc((167 / 1120) * 100%);
    --asepect1: 239 / 64;
    --asepect2: 167 / 64;
    --top1: calc((80 / 448) * 100%);
    --top2: calc((152 / 448) * 100%);
    --top3: calc((224 / 448) * 100%);
    --top4: calc((296 / 448) * 100%);
    --left1: calc((20 / 1120) * 100%);
    --left2: calc((299 / 1120) * 100%);
    --right1: calc((371 / 1120) * 100%);
    --right2: calc((195 / 1120) * 100%);
}

#page .jobs-img>div>a:nth-of-type(1) {
    top: var(--top2);
    left: var(--left1);
    width: var(--width1);
    aspect-ratio: var(--asepect1);
}

#page .jobs-img>div>a:nth-of-type(2) {
    top: var(--top3);
    left: var(--left1);
    width: var(--width1);
    aspect-ratio: var(--asepect1);
}

#page .jobs-img>div>a:nth-of-type(3) {
    top: var(--top4);
    left: var(--left1);
    width: var(--width1);
    aspect-ratio: var(--asepect1);
}

#page .jobs-img>div>a:nth-of-type(4) {
    top: var(--top3);
    left: var(--left2);
    width: var(--width1);
    aspect-ratio: var(--asepect1);
}

#page .jobs-img>div>a:nth-of-type(5) {
    top: var(--top4);
    right: var(--right2);
    width: var(--width2);
    aspect-ratio: var(--asepect2);
}

#page .jobs-img>div>a:nth-of-type(6) {
    top: var(--top1);
    left: var(--left1);
    width: var(--width1);
    aspect-ratio: var(--asepect1);
}

#page .jobs-img>div>a:nth-of-type(7) {
    top: var(--top4);
    right: var(--right1);
    width: var(--width2);
    aspect-ratio: var(--asepect2);
}

#page .jobs-img>div>a:nth-of-type(8) {
    top: var(--top3);
    right: var(--right2);
    width: var(--width2);
    aspect-ratio: var(--asepect2);
}

#page .jobs-img>div>a:nth-of-type(9) {
    top: var(--top3);
    right: var(--right1);
    width: var(--width2);
    aspect-ratio: var(--asepect2);
}

#page .jobs-img>div>a:nth-of-type(10) {
    top: var(--top2);
    right: var(--right1);
    width: var(--width2);
    aspect-ratio: var(--asepect2);
}

/*jobs-sec*/
#page .jobs-sec {
    margin-bottom: 160px;
}

#page .jobs-sec>div .jobs-cont:nth-of-type(odd) {
    flex-direction: row-reverse;
}

#page .jobs-sec .jobs-cont {
    gap: calc((48 / 1120) * 100%);
    align-items: flex-start;
}

#page .jobs-sec .jobs-cont+.jobs-cont {
    margin-top: 64px;
}

/*画像*/
#page .jobs-sec .jobs-cont figure {
    width: calc((424 / 1120) * 100%);
}

#page .jobs-sec .jobs-cont img {
    border-radius: 4px;
}

/*テキスト部分*/
#page .jobs-sec .jobs-cont .text-area {
    position: relative;
    flex: 1 1;
}

#page .jobs-sec .jobs-cont .text-area h2 {
    position: relative;
    width: fit-content;
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 57px;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        border-radius: 5px;
        background-color: var(--navy);
    }
}

#page .jobs-sec .jobs-cont .text-area .text-cont {
    position: relative;
    padding-left: calc((30 / 632) * 100%);
    margin-left: calc((30 / 632) * 100%);
}

#page .jobs-sec .jobs-cont .text-area .text-cont::before,
#page .jobs-sec .jobs-cont .text-area .text-cont::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    border-radius: 5px;
}

#page .jobs-sec .jobs-cont .text-area .text-cont::before {
    height: 100%;
    background-color: var(--line-color);
}

#page .jobs-sec .jobs-cont .text-area .text-cont::after {
    height: 94px;
    background-color: var(--navy);
}

#page .jobs-sec .jobs-cont .text-area .text-cont h3 {
    font-size: clamp(22px, 2.34vw, 32px);
}

#page .jobs-sec .jobs-cont .text-area .text-cont p:not(.btn01) {
    font-size: clamp(14px, 1.17vw, 16px);
    line-height: 2.0;
    margin: 20px 0;
}

#page .jobs-sec .jobs-cont .text-area .num {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    font-family: var(--Roboto);
    font-size: clamp(64px, 9.66vw, 132px);
    font-weight: 700;
    color: var(--light-blue);
    line-height: 1.0;
}

/*======================
archive interview
=======================*/
#interview-archive {
    width: calc((1240 / 1366) * 100%);
    margin: 80px auto 100px;
}

#interview-archive ul {
    display: grid;
    gap: 60px 40px;
    grid-template-columns: repeat(4, 1fr);
}

#interview-archive ul li {
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
    grid-row: span 3;
}

#interview-archive ul li a {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

#interview-archive ul li .img-area {
    border-radius: 4px;
    overflow: hidden;
}

#interview-archive ul li .text-area {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    margin-top: 15px;
}

#interview-archive ul li .text-area h2 {
    font-size: clamp(16px, 1.46vw, 20px);
}

#interview-archive ul li .text-area h2 br {
    display: none;
}

#interview-archive ul li .text-area .name_year {
    position: relative;
    align-items: end;
    margin-top: 7px;
    padding-right: 24px;
}

#interview-archive ul li .text-area .name_year::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    aspect-ratio: 1/1;
    background: url(img/common/arrow_w.webp) no-repeat var(--navy) center/ 7px;
    border-radius: 3px;
}

#interview-archive ul li .text-area .name_year .name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

#interview-archive ul li .text-area .name_year .year {
    font-size: 14px;
}

/*======================
*
interview
*
=======================*/
/*======================
mv
=======================*/
.single-interview .interview_mv {
    position: relative;
    width: 100vw;
    height: 100lvh;
    max-height: 768px;
}

.single-interview .interview_mv .mv_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.single-interview .interview_mv .mv_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-interview .interview_mv .mv_bg::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    pointer-events: none;
}

.single-interview .interview_mv .hd {
    position: absolute;
    z-index: 3;
    left: calc((64 / 1366) * 100vw);
    bottom: 64px;

}

.single-interview .interview_mv .hd h1 {
    position: relative;
    font-size: clamp(22px, 3.07vw, 42px);
    font-weight: 700;
    line-height: calc(80 / 42);
    color: #FFF;
}

.single-interview .interview_mv .hd h1 span {
    position: relative;
    display: inline-block;
}

.single-interview .interview_mv .hd h1 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0.5);
    transform-origin: left;
    width: 200%;
    height: 4px;
    background-color: #FFF;
    border-radius: 5px;
}

.single-interview .interview_mv .hd h1 span:not(:first-of-type) {
    margin-top: 10px;
}

.single-interview .interview_mv .text-cont {
    position: absolute;
    z-index: 3;
    right: calc((64 / 1366) * 100vw);
    bottom: 64px;
    width: calc((304 / 1366) * 100%);
    font-size: clamp(12px, 1.02vw, 14px);
    color: #FFF;
}

.single-interview .interview_mv .text-cont .num {
    border-bottom: solid #FFF 2px;
    margin-bottom: 34px;
}

.single-interview .interview_mv .text-cont .name_year .name {
    font-size: calc((16 / 14)* 1.0em);
    font-weight: 700;
}

.single-interview .interview_mv .text-cont .name_year .year {
    font-size: calc((12 / 14)* 1.0em);
    font-weight: 400;
    margin-top: 5px;
}

.single-interview .interview_mv .text-cont>p {
    font-weight: 700;
    line-height: 2.0;
    margin-top: 20px;
}

/*num共通*/
.single-interview .num {
    width: fit-content;
}

.single-interview .num p {
    font-family: var(--Roboto);
    font-size: clamp(10px, 0.88vw, 12px);
    font-weight: 700;
    padding-bottom: 3px;
}

.single-interview .num p span {
    font-size: calc((32 / 12) * 1.0em);
    padding-left: 8px;
}

/*======================
interview cont
=======================*/
.single-interview .cont-wrapper {
    margin-top: 116px;
}

.single-interview .cont-wrapper .intervew-cont {
    width: 910px;
    color: var(--navy);
    margin: auto;
}

.single-interview .cont-wrapper .intervew-cont+.intervew-cont {
    margin-top: 80px;
}

.single-interview .cont-wrapper .intervew-cont .img-area {
    width: 100%;
    margin-bottom: 48px;
}

.single-interview .cont-wrapper .intervew-cont .img-area img {
    width: 100%;
    border-radius: 4px;
}

.single-interview .cont-wrapper .intervew-cont .text-area {
    display: flex;
}

.single-interview .cont-wrapper .intervew-cont .num {
    width: calc((158 / 910) * 100%);
}

.single-interview .cont-wrapper .intervew-cont .num p {
    width: fit-content;
    border-bottom: solid 2px var(--navy);
}

.single-interview .cont-wrapper .intervew-cont .text-cont {
    position: relative;
    flex: 1 1;
    padding-left: calc((32 / 910)* 100%);
    border-left: solid 1px var(--line-color);
}

.single-interview .cont-wrapper .intervew-cont .text-cont::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 1px;
    height: var(--hd-height);
    background-color: var(--navy);
}

.single-interview .cont-wrapper .intervew-cont .text-cont h2 {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 24px;
}

.single-interview .cont-wrapper .intervew-cont .text-cont p {
    font-size: 16px;
    line-height: 2.0;
}

/*======================
schedule cont
=======================*/
.single-interview .cont-wrapper .schedule-cont {
    position: relative;
    margin-top: 120px;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
}

.single-interview .cont-wrapper .schedule-cont .cont {
    display: flex;
    align-items: center;
    width: calc((1120 / 1366) * 100%);
    margin: auto;
}

.single-interview .cont-wrapper .schedule-cont .cont .hd-area {
    width: calc((353 / 1120) * 100%);
}

.single-interview .cont-wrapper .schedule-cont .cont .hd-area .hd {
    text-align: start !important;
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule {
    display: flex;
    justify-content: space-between;
    width: calc((767 / 1120) * 100%);
    padding: 64px 0 64px calc((64 / 1120)*100%);
    border-left: solid 1px var(--line-color);
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list {
    flex: 1 1;
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list .inner {
    display: flex;
    align-items: flex-start;
    gap: calc((16 / 723) * 100%);
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list .inner h3 {
    position: relative;
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list .inner span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    font-family: var(--Roboto);
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    padding: 2px 16px;
    background-color: var(--light-blue);
    border-radius: 50px;
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list .inner:not(:first-of-type) {
    margin-top: 8px;
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list .inner:not(:last-of-type) h3::after {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background-color: var(--navy);
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .schedule-list .inner p {
    flex: 1 1;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.0;
    margin-top: -5px;
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .img-area {
    width: calc((240 / 713) * 100%);
}

.single-interview .cont-wrapper .schedule-cont .cont .schedule .img-area img {
    border-radius: 4px;
}

/*======================
interview slider
=======================*/
.single-interview .interview-slider {
    position: relative;
    margin: 60px 0 50px;
}

.single-interview .interview-slider .splide__track {
    padding-top: 64px;
    overflow: initial;
}

/*見出し*/
.single-interview .interview-slider .hd {
    display: flex;
    position: relative;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.single-interview .interview-slider h2 {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

/*ページ送り*/
.single-interview .interview-slider .splide__arrows {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: calc((130 / 1366) * 100%);
    display: flex;
    align-items: center;
    gap: 5px;
}

.single-interview .interview-slider .splide__arrows button {
    position: initial !important;
    width: 48px !important;
    height: initial !important;
    aspect-ratio: 1/1;
    transform: initial !important;
    background: url('img/common/arrow_navy.webp') no-repeat transparent center / 7px;
    border: solid 1px var(--navy);
    border-radius: 5px;
}

@media (max-width:1260px) {
    .single-interview .interview-slider .splide__arrows button {
        width: 35px !important;
    }
}

.single-interview .interview-slider .splide__arrows .splide__arrow--prev {
    transform: rotate(180deg) !important;
}

/*スライダー*/
.single-interview .interview-slider ul li a {
    display: flex;
    align-items: flex-end;
    gap: calc((20 / 380) * 100%);
}

.single-interview .interview-slider ul li .text-area {
    position: relative;
    flex: 1 1;

    &::after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 24px;
        aspect-ratio: 1 / 1;
        border-radius: 3px;
        background: url('img/common/arrow_w.webp') no-repeat var(--navy) center / 7px;
        transition: 0.3s ease-in-out;
    }
}

.single-interview .interview-slider ul li .text-area h3 {
    font-size: clamp(12px, 1.46vw, 20px);
    line-height: 1.6;
    margin-bottom: 6px;
}

.single-interview .interview-slider ul li .text-area h3 br {
    display: none;
}

.single-interview .interview-slider ul li .text-area .name_year .name {
    font-size: clamp(11px, 0.88vw, 14px);
    font-weight: 700;
}

.single-interview .interview-slider ul li .text-area .name_year .year {
    font-size: clamp(10px, 1.02vw, 12px);
}

.single-interview .interview-slider ul li .img-area {
    width: calc((120 / 380) * 100%);
    border-radius: 4px;
    overflow: hidden;
}

/*======================
*
for_high_school
*
=======================*/
/*======================
*
common
*
=======================*/
/*見出し*/
.single-business h2.business-hd {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 3px;
}

.single-business h2.business-hd+span.sub {
    display: block;
    font-family: var(--Roboto);
    font-weight: 700;
    font-size: 12px;
}

/*下層mv*/
.under-mv02 {
    position: relative;
    margin-top: 154px;
    padding-top: 78px;
}

.under-mv02 .hd-area {
    position: relative;
    width: fit-content;
    font-size: 48px;
    margin: 0 auto 44px;
}

.under-mv02 .hd-area h1 {
    font-size: 1.0em;
    font-weight: 900;
    line-height: 1.0;
}

.under-mv02 .hd-area .sub {
    position: absolute;
    z-index: -1;
    top: calc(50% - 0.05em);
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    font-size: calc((120 / 48) * 1.0em);
    font-weight: 700;
    color: #FFF;
    white-space: nowrap;
    text-shadow: 0px 0px 32px #E0F7FF;
}

/*セクションの装飾*/
:is(.has-deco, .has-deco2) {
    position: relative;
}

.has-deco::before,
.has-deco::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    aspect-ratio: 1240 / 40;
}

.has-deco2::before,
.has-deco2::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    aspect-ratio: 587 / 40;
}

.has-deco::before {
    top: 0;
    background: url(img/for_high_school/section-deco1.webp) no-repeat top left / 100%;
}

.has-deco::after {
    bottom: 0;
    background: url(img/for_high_school/section-deco2.webp) no-repeat top left / 100%;
}

.has-deco2::before {
    top: 0;
    background: url(img/for_high_school/section-deco1_short.webp) no-repeat top left / 100%;
}

.has-deco2::after {
    bottom: 0;
    background: url(img/for_high_school/section-deco2_short.webp) no-repeat top left / 100%;
}

/*======================
lead-cont
=======================*/
.under-mv02 .lead {
    text-align: center;
    margin: auto;
}

.under-mv02 .lead p {
    font-size: 16px;
    font-weight: 700;
    line-height: 2.0;
}

/*===============
*
breadcrumbs
*
===============*/
.breadcrumbs.for_high_school {
    position: absolute;
    top: 0;
    left: calc((64 / 1366) * 100%);
}

.breadcrumbs.for_high_school ul {
    padding: 0;
    border-top: 0;
    border-bottom: 0;
}

/*======================
*
高校生採用TOP
*
=======================*/
/*======================
mv
=======================*/
.top-forHigh-school.mv-area {
    align-items: flex-start;
    position: relative;
    height: auto;
    overflow: hidden;
}

/*テキストコンテンツ*/
.top-forHigh-school.mv-area .mv-cont {
    position: relative;
    z-index: 5;
    width: 100%;
    margin-top: max(160px, calc((160 / 1366) * 100%));
    margin-bottom: max(100px, calc((100 / 1366) * 100%));
}

/*見出し*/
.top-forHigh-school.mv-area .hd-area_forHigh-school h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 18px 8px;
    width: calc((750 / 1366) * 100%);
    margin: auto;

    @media (min-width:768px) {
        &.s_tb_sp {
            display: none;
        }
    }

    img {
        &.hd01 {
            width: 100%;
        }

        &.hd02 {
            width: calc((308 / 750) * 100%)
        }

        &.hd03 {
            width: calc((281 / 750) * 100%)
        }
    }

    &.active {
        animation: bounceIn 1.3s ease-in-out forwards;
    }
}

.top-forHigh-school.mv-area .hd-area_forHigh-school span {
    display: none;
}

@keyframes bounceIn {
    0% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
    }

    50% {
        transform: scale(1.08) translateY(0);
        opacity: 1;
    }

    70% {
        transform: scale(0.9) translateY(-10px);
    }

    85% {
        transform: scale(1.03) translateY(0);
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/*テキスト*/
.top-forHigh-school.mv-area .mv-cont .text-area {
    margin-top: 24px;
    animation-delay: 1.0s;
}

.top-forHigh-school.mv-area .mv-cont .text-area .title {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 14px;
    font-weight: 700;
    margin: auto;
    padding: 6px 20px;
    border: solid 2px var(--navy);
    border-radius: 50px;
    background-color: #FFE200;
}

.top-forHigh-school.mv-area .mv-cont .text-area .title span {
    display: block;
}

.top-forHigh-school.mv-area .mv-cont .text-area .title span:first-of-type {
    position: relative;
    margin-right: 8px;
    padding-right: 9px;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 1px;
        height: 16px;
        background-color: var(--navy);
    }
}

.top-forHigh-school.mv-area .mv-cont .text-area .text {
    font-size: clamp(14px, 1.17vw, 16px);
    font-weight: 700;
    line-height: 2.0;
    text-align: center;
    margin-top: 28px;
}

/*女性と男性のイラスト*/
.top-forHigh-school.mv-area :is(.women, .men) {
    position: absolute;
    z-index: 4;
    bottom: 0;
    --side: calc((32 / 1366) * 100%);
    animation-delay: 1.0s;
}

.top-forHigh-school.mv-area .women {
    width: calc((314 / 1366) * 100%);
    left: var(--side);
}

.top-forHigh-school.mv-area .men {
    width: calc((420 / 1366) * 100%);
    right: var(--side);
}

/*背景のイラスト*/
.top-forHigh-school.mv-area .deco-img {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-delay: 1.2s;
    cursor: none;
}

.top-forHigh-school.mv-area .mv-deco {
    position: absolute;
    z-index: 2;
    animation: float 15s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.top-forHigh-school.mv-area .mv-deco1 {
    width: 112px;
    top: 38px;
    left: calc((426 / 1366) * 100%);

}

.top-forHigh-school.mv-area .mv-deco2 {
    width: 178px;
    top: calc((177 / 768) * 100%);
    left: calc((163 / 1366) * 100%);
    animation-delay: 1.5s;
}

.top-forHigh-school.mv-area .mv-deco3 {
    width: 120px;
    top: calc((562 / 768) * 100%);
    left: calc((337 / 1366) * 100%);
}

.top-forHigh-school.mv-area .mv-deco4 {
    width: 116px;
    top: calc((160 / 768) * 100%);
    right: calc((70 / 1366) * 100%);
    animation-delay: 1.0s;
}

.top-forHigh-school.mv-area .mv-deco5 {
    width: 136px;
    top: calc((404 / 768) * 100%);
    right: calc((349 / 1366) * 100%);
    animation-delay: -1.5s;
}


@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px);
    }

    25% {
        transform: translateY(-20px) translateX(15px);
    }

    50% {
        transform: translateY(7px) translateX(10px);
    }

    75% {
        transform: translateY(10px) translateX(5px);
    }

    100% {
        transform: translateY(0px) translateX(0px);
    }
}


/*パンくず*/
.top-forHigh-school.mv-area .breadcrumbs {
    z-index: 6;
    margin-top: 154px;
}

/*======================
for_high_school_hd
=======================*/
#page .for_high_school_hd {
    width: calc((1240 / 1366) * 100%);
    margin: auto;
    padding: 60px 0;
    margin-bottom: 80px;
}

#page .for_high_school_hd p {
    font-weight: 900;
    font-size: 32px;
    text-align: center;
}

#page .for_high_school_hd p span {
    display: block;
    font-family: var(--Roboto);
    font-weight: 700;
    font-size: 0.5em;
    margin-top: 6px;
}

/*======================
for_high_school_cont
=======================*/
#page .for_high_school_cont {
    position: relative;
}

#page .for_high_school_cont+.for_high_school_cont {
    margin-top: 80px;
}

#page .for_high_school_cont .text-area {
    position: absolute;
    bottom: 0;
    width: calc((586 / 1120) * 100%);

    &.right {
        right: 0;
    }

    &.left {
        left: 0;
    }
}

#page .for_high_school_cont .text-area .hd-area .point {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 93px;
    height: 43px;
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    line-height: 1.0;
    margin-left: -16px;
    margin-bottom: -21.5px;
    border-radius: 50px;
    background-color: var(--light-blue);
}

#page .for_high_school_cont .text-area .hd-area h3 {
    position: relative;
    z-index: 2;
}

#page .for_high_school_cont .text-area .hd-area h3 span {
    display: block;
    width: fit-content;
    font-size: clamp(28px, 40px, 2.93vw);
    font-weight: 900;
    color: #FFF;
    margin-top: calc((24 / 40) * -1.0em);
    padding: calc((24 / 40) * 1.0em);
    background-color: var(--navy);

    &:first-of-type {
        border-radius: 0 20px 20px 0;
    }

    &:last-of-type {
        margin-top: calc((32 / 40) * -1.0em);
        border-radius: 0 20px 20px 20px;
    }
}

#page .for_high_school_cont .text-area .text {
    width: calc((546 / 586) * 100%);
    font-size: clamp(16px, 1.46vw, 20px);
    font-weight: 900;
    line-height: 2.0;
    padding: calc((60 / 20) * 1.0em) calc((44 / 20) * 1.0em) calc((44 / 20) * 1.0em);
    margin-left: auto;
    margin-top: calc((36 / 20) * -1.0em);
    border: solid 2px var(--navy);
    border-radius: 20px;
    background-color: #FFF;
}

#page .for_high_school_cont .text-area .text .btn02 {
    margin-top: 12px;
}

#page .for_high_school_cont .img-area {
    width: calc((680 / 1120) * 100%);
    border-radius: 20px;
    overflow: hidden;

    &.left {
        margin-left: auto;
    }
}

/*テキストのみ*/
#page .for_high_school_cont-wrapper {
    align-items: flex-start;
    gap: 0 calc((28 / 1120) * 100%);
}

#page .for_high_school_cont.textOnly {
    flex-direction: column;
    gap: 28px;
    flex: 1;
}

#page .for_high_school_cont.textOnly+.for_high_school_cont.textOnly {
    margin-top: 0;
}

#page .for_high_school_cont.textOnly .text-area {
    flex: 1 1;
    position: static;
    width: 100%;
}

#page .for_high_school_cont.textOnly .text-area .hd-area h3 span {
    margin-top: 0;
    border-radius: 20px !important;
}

/*======================
for_high_school_aboutus
=======================*/
#page .for_high_school_aboutus {
    margin-bottom: 160px;
}

/*======================
for_high_school_education
=======================*/
#page .for_high_school_education {
    margin-bottom: 160px;
}

/*======================
for_high_school_environment
=======================*/
#page .for_high_school_environment {
    margin-bottom: 160px;
}

/*======================
for_high_school_link
=======================*/
#page .for_high_school_link {
    width: calc((1240 / 1366) * 100%);
    margin: 0 auto 160px;
}

#page .for_high_school_link .for_high_school_link-cont {
    align-items: stretch;
    gap: calc((64 / 1366) * 100%);
}

#page .for_high_school_link .for_high_school_link-cont .cont {
    flex: 1;
    padding: 64px 0;
}

#page .for_high_school_link .for_high_school_link-cont .cont .inner {
    width: calc((460 / 587) * 100%);
    margin: auto;
}

#page .for_high_school_link .for_high_school_link-cont .cont .inner figure {
    border-radius: 20px;
    overflow: hidden;
}

#page .for_high_school_link .for_high_school_link-cont .cont .inner h2 {
    font-size: clamp(20px, 2.05vw, 28px);
    font-weight: 900;
    text-align: center;
    margin-top: 24px;
}

#page .for_high_school_link .for_high_school_link-cont .cont .inner p {
    font-size: clamp(16px, 1.46vw, 20px);
    font-weight: 900;
    line-height: 2.0;
    margin-top: 19px;
}

#page .for_high_school_link .for_high_school_link-cont .cont .inner .btn02 {
    width: fit-content;
    margin: 11px auto 0;
}

/*======================
location page
=======================*/
/*.location-link*/
.location-link {
    align-items: stretch;
    gap: 0;
    width: calc((1240 / 1366) * 100%);
    padding: 40px calc((48 / 1240) * 100%);
    margin: 44px auto 80px;
}

.location-link h2 {
    position: absolute;
    top: calc((50 / 606) * 100%);
    left: 0;
    font-family: var(--Roboto);
    font-size: 12px;
    padding-bottom: 5px;
    border-bottom: solid 2px var(--navy);
}

.location-link .img-area {
    position: relative;
    flex: 1 1;
    border-right: solid 4px var(--navy);
}

.location-link .img-area img {
    width: calc((520 / 696) * 100%);
    margin: auto;
}

.location-link .text-area {
    position: relative;
    width: calc((398 / 1134) * 100%);
    margin-left: calc((48 / 1240) * 100%);
    padding-bottom: 32px;
}

.location-link .text-area ul {
    margin-top: calc((100 / 398) * 100%);
}

.location-link .text-area ul li {
    font-size: clamp(12px, 1.17vw, 16px);
    font-weight: 700;
}

.location-link .text-area ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.location-link .text-area ul li:not(:last-of-type) a {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: solid 1px var(--navy);
}

.location-link .text-area ul li a::before {
    content: "";
    min-width: 24px;
    aspect-ratio: 1 / 1;
    transform: rotate(90deg);
    border-radius: 50%;
    background: url(img/common/arrow_w.webp) var(--navy) no-repeat center / 6px;
    transition: 0.3s ease-in-out;
}

.location-link .text-area ul li a:hover::before {
    translate: 0 5px;
}

/*.location-sec*/
.location-sec {
    gap: 0;
    margin-bottom: 160px;
}

.location-sec .cont {
    position: relative;
    width: 100%;
    padding: 64px calc((64 / 1120) * 100%);
    border: solid 2px var(--navy);
    border-radius: 20px;
    background-color: #FFF;
    overflow: hidden;
}

.location-sec .cont+.cont {
    margin-top: 24px;
}

.location-sec .cont .area {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    font-weight: 900;
    color: #FFF;
    padding: 8px 16px;
    border-bottom-right-radius: 20px;
    background: var(--navy);
}

.location-sec .cont .wrapper {
    align-items: flex-start;
    gap: calc((48 /992) * 100%);
}

.location-sec .cont .wrapper .text-area {
    flex: 1 1;
}

.location-sec .cont .wrapper .text-area .hd-area {
    font-size: clamp(20px, 2.34vw, 32px);
    font-weight: 700;
}

.location-sec .cont .wrapper .text-area .hd-area p {
    font-size: calc((20 / 32) * 1.0em);
}

.location-sec .cont .wrapper .text-area .hd-area h2 {
    font-size: 1.0em;
    font-weight: 900;
    margin: 24px 0 20px;
}

.location-sec .cont .wrapper .text-area .hd-area+p {
    font-size: clamp(14px, 1.17vw, 16px);
    font-weight: 700;
    line-height: 2.0;
}

.location-sec .cont .wrapper .text-area .point-area {
    align-items: center;
    gap: 0;
    min-height: 108px;
    margin-top: 12px;
    padding: 11px calc((32 / 544) * 100%);
    background-color: #E3F8FF;
    border-radius: 12px;
}

.location-sec .cont .wrapper .text-area .point-area .point {
    width: 40px;
    margin: auto;
    text-align: center;
}

.location-sec .cont .wrapper .text-area .point-area .point p {
    font-family: var(--Roboto);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 5px;
}

.location-sec .cont .wrapper .text-area .point-area .text {
    position: relative;
    flex: 1 1;
    font-size: clamp(12px, 1.02vw, 14px);
    font-weight: 700;
    line-height: 2.0;
    padding-left: 24px;
    margin-left: 24px;
}

@media (min-width:768px) {
    .location-sec .cont .wrapper .text-area .point-area .text::before {
        content: "";
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: 0;
        width: 1px;
        height: 100%;
        min-height: 76px;
        background-color: var(--line-color);
    }
}

.location-sec .cont .wrapper .img-area {
    width: calc((400 /992) * 100%);
}

.location-sec .cont .wrapper .img-area img {
    border-radius: 12px;
}

.location-sec .cont .wrapper .img-area figure+figure {
    margin-top: 15px;
}

.location-sec .cont .address_access {
    align-items: flex-start;
    gap: 0;
    padding: 32px calc((32 / 992) * 100%);
    margin-top: 32px;
    background-color: #F5F6FA;
    border-radius: 12px;
}

.location-sec .cont .address_access>* {
    flex: 1;
    font-weight: 700;
}

.location-sec .cont .address_access h3 {
    font-size: clamp(14px, 1.17vw, 16px);
    margin-bottom: 10px;
}

.location-sec .cont .address_access :is(p, li) {
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 2.0;
}

.location-sec .cont .address_access p a {
    text-decoration: underline;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .location-sec .cont .address_access p a:hover {
        opacity: 0.75;
    }
}

.location-sec .cont .address_access ul li {
    display: flex;
}

.location-sec .cont .address_access ul li::before {
    content: "・";
}

/*======================
*
business
*
=======================*/
/*======================
business archive
=======================*/
/*リスト*/
#business-archive {
    position: relative;
    width: calc((1240 / 1366) * 100%);
    padding: 94px 0 94px;
    margin: 44px auto 160px;
}

#business-archive ul {
    display: grid;
    gap: 48px 32px;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 calc((96 / 1240) * 100%);
}

#business-archive ul li .img-area {
    position: relative;
    border-radius: 12px;
    overflow: hidden;

    &:after {
        content: "";
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: 48px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: url(img/common/arrows_w.webp) no-repeat var(--navy) center / 21px;
    }
}

#business-archive ul li .text-area h2 {
    font-size: clamp(20px, 1.76vw, 24px);
    font-weight: 900;
    line-height: 1.5;
    margin-top: 24px;
    margin-bottom: 12px;
}

#business-archive ul li .text-area h2 br {
    display: none;
}

#business-archive ul li .text-area .name_year span {
    font-size: 14px;
    font-weight: 700;
    line-height: 2.0;
}

#business-archive ul li .text-area .name_year span.name {
    position: relative;
    margin-right: 8px;
    padding-right: 8px;

    &::after {
        content: "";
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 0;
        width: 1px;
        height: 14px;
        background-color: var(--navy);
    }
}

/*======================
single mv
=======================*/
.single-business .business_mv {
    position: relative;
    display: flex;
    align-items: end;
    gap: calc((64 / 1366) * 100%);
    margin-top: 146px;
    padding-left: calc((64 / 1366) * 100%);
}

.single-business .business_mv .text-cont {
    flex: 1 1;
}

.single-business .business_mv .text-cont .hd-area .num p {
    width: fit-content;
    font-family: var(--Roboto);
    font-size: 12px;
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: solid 2px var(--navy);
}

.single-business .business_mv .text-cont .hd-area h1 {
    font-size: clamp(22px, 2.34vw, 32px);
    font-weight: 900;
    margin: 32px 0;
}

.single-business .business_mv .text-cont .name_year {
    display: inline-block;
    font-size: clamp(12px, 1.02vw, 14px);
    font-weight: 700;
    line-height: calc(22 / 14);
}

.single-business .business_mv .text-cont .name_year .name {
    position: relative;
    padding-right: 8px;
    margin-right: 8px;
}

.single-business .business_mv .text-cont .name_year .name::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: var(--navy);
}

.single-business .business_mv .text-cont>p {
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 2.0;
    margin-top: 13px;
}

.single-business .business_mv .mv {
    width: calc((760 / 1366) * 100%);
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}

/*======================
business cont
=======================*/
.single-business section.business-cont {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc((80 / 960) * 100%);
    width: calc((960 / 1366) * 100%);
    margin: 80px auto 0;
}

.single-business section.business-cont:nth-of-type(even) {
    flex-direction: row-reverse;
}

.single-business section.business-cont+section.business-cont {
    padding-top: 80px;
    border-top: solid 1px var(--navy);
}

.single-business section.business-cont .text-area {
    flex: 1 1;
}

.single-business section.business-cont .text-area h2 {
    font-size: clamp(22px, 2.34vw, 32px);
    font-weight: 900;
}

.single-business section.business-cont .text-area p {
    font-size: clamp(14px, 1.16vw, 16px);
    font-weight: 700;
    line-height: 2.0;
    margin-top: 28px;
}

.single-business section.business-cont .img-area {
    width: calc((400 / 960) * 100%);
    border-radius: 20px;
    overflow: hidden;
}

/*======================
business schedule
=======================*/
.single-business .schedule-cont {
    position: relative;
    width: calc((1240 / 1366) * 100%);
    padding: 60px 0 77px;
    margin: 80px auto 120px;
}

/*見出し*/
.single-business .schedule-cont .hd-area {
    text-align: center;
    margin-bottom: 40px;
}

.single-business .schedule-cont .hd-area img {
    width: 34px;
    margin: 0 auto 8px;
}

/*時間ごとの仕事内容*/
.single-business .schedule-cont .schedule {
    padding-top: 10px;
    margin-top: -10px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    @media (min-width:768px) {
        margin-bottom: -100px;
    }

    &::-webkit-scrollbar {
        display: none;
    }

}

.single-business .schedule-cont .schedule .schedule-list {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 42px;
    width: fit-content;
    margin: auto;
    padding: 0 10px 170px;

    @media (min-width:768px) {
        line-height: 2.0;
    }
}

.single-business .schedule-cont .schedule .schedule-list .inner {
    position: relative;
}

.single-business .schedule-cont .schedule .schedule-list h3 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    aspect-ratio: 1 / 1;
    font-family: var(--Roboto);
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    margin: auto;
    border-radius: 50%;
    background-color: var(--navy);

    &::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.1);
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        border: solid 1px var(--navy);
        background-color: #FFF;
        opacity: 0.2;
    }
}

.single-business .schedule-cont .schedule .schedule-list .inner:not(:last-of-type) h3:before {
    content: "";
    position: absolute;
    top: 40px;
    left: 100%;
    width: calc(100% + 20px);
    height: 2px;
    background-color: var(--line-color);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: 0.5s ease-in-out 0.2s;
}

.single-business .schedule-cont .schedule .schedule-list .inner.active:not(:last-of-type) h3:before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.single-business .schedule-cont .schedule .schedule-list p {
    position: absolute;
    transform: translateX(-50%);
    top: 100px;
    left: 50%;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/*======================
business business-list
=======================*/
.single-business .business-list .cont {
    position: relative;
    margin: 0 auto 160px;
}

/*見出し*/
.single-business .business-list .cont .hd-area {
    text-align: center;
    margin-bottom: 30px;
}

/*リスト*/
.single-business .business-list .cont ul {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(5, 1fr);
}

.single-business .business-list .cont ul :is(li, a) {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
}

.single-business .business-list .cont ul li .img-area {
    border-radius: 12px;
    overflow: hidden;
}

.single-business .business-list .cont ul li .text-area {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}

.single-business .business-list .cont ul li .text-area h3 {
    font-size: clamp(14px, 1.17vw, 16px);
    font-weight: 700;
    line-height: 2.0;
    margin-top: 28px;
    margin-bottom: 8px;
}

.single-business .business-list .cont ul li .text-area h3 br {
    display: none;
}

.single-business .business-list .cont ul li .text-area .name_year span {
    font-size: 12px;
    font-weight: 700;
    line-height: 2.0;
}

.single-business .business-list .cont ul li .text-area .name_year span.name {
    position: relative;
    margin-right: 8px;
    padding-right: 8px;

    &::after {
        content: "";
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 0;
        width: 1px;
        height: 14px;
        background-color: var(--navy);
    }
}

/*======================
*
archive
*
=======================*/
#archive p.not-post {
    width: 80%;
    margin: auto;
    text-align: center;
    margin: 160px auto;
    padding: 80px;
    border: solid 2px var(--navy);
    border-radius: 20px;
}


/*======================
*
footer
*
=======================*/
/*cta*/
section.footer-cta {
    position: relative;
    overflow: hidden;

    &::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--grade);
        pointer-events: none;
        opacity: 0.9;
    }
}

section.footer-cta a {
    display: block;
    width: 100%;
    height: 100%;
}

section.footer-cta img {
    position: relative;
    z-index: 1;
    transition: 0.3s ease-in-out;
}

section.footer-cta:hover img {
    scale: 1.1;
}

section.footer-cta .hd {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    text-align: center;
    margin: auto;
}

section.footer-cta .hd h2 {
    justify-content: center;
}

footer {
    position: relative;
    padding: 64px 0;
}

footer .cont {
    display: flex;
    justify-content: space-between;
    width: calc((1240 / 1366) * 100%);
    margin: auto;
}

/*logo link*/
footer .cont .logo-area {
    width: calc((177 / 1240) * 100%);
    min-width: 177px;
}

footer .cont .logo-area .logo img {
    width: calc((139 / 177) * 100%);
    margin: 0 auto 30px;
}

footer a.link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc((5 / 177) *100%);
    width: 100%;
    font-size: clamp(12px, 1.02vw, 14px);
    padding: 10px 0;
    border-radius: 50px;
    border: solid 1px var(--navy);
}

footer a.link::after {
    content: "";
    display: block;
    width: 14px;
    aspect-ratio: 1 / 1;
    background: url(img/common/footer-link_icn.webp) no-repeat center / 100%;
}

/*menu*/
footer .cont nav {
    flex: 1 1;
    display: flex;
    justify-content: flex-end;
}

footer .cont nav>ul:first-of-type {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, 1fr);
    gap: 20px 40px;
}

footer .cont nav>ul:last-of-type {
    padding-left: 40px;
    margin-left: 40px;
    border-left: solid 1px var(--line-color2);
}

footer .cont nav ul li {
    font-size: 16px;
}

footer .cont nav>ul>li {
    font-weight: 900;
}

footer .cont nav>ul>li>ul>li {
    font-weight: 400;
    padding-top: 20px;
}

/*copyright*/
footer .copyright {
    width: calc((1240 / 1366) * 100%);
    font-family: var(--Roboto);
    font-size: 12px;
    text-align: end;
    margin: 64px auto 0;
}

/*===============
*
breadcrumbs
*
===============*/
.breadcrumbs {
    position: relative;
}

.breadcrumbs ul {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0 24px calc((64 / 1366) * 100vw);
    border-top: solid 1px var(--line-color);
    border-bottom: solid 1px var(--line-color);
}

.breadcrumbs ul li {
    position: relative;
    font-size: 11px;
    color: var(--navy);
}

.breadcrumbs ul li:not(:last-of-type) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs ul li:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 8px;
    height: 1px;
    background-color: var(--navy);
}

.breadcrumbs ul li a {
    font-weight: 800;
    text-decoration: underline;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .breadcrumbs ul li a:hover {
        opacity: 0.75;
    }
}

/*======================
404
=======================*/
.page-404 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    padding: 200px 0 0;
    margin-bottom: 160px;
}

.page-404 .cont {
    width: calc((1240 / 1366) * 100%);
    max-width: 800px;
    padding: 45px;
    margin: auto;
    border: solid 2px var(--navy);
    border-radius: 12px;
}

.page-404 .cont p:first-of-type {
    font-size: 32px;
    font-weight: 600;
    color: var(--navy);
    text-align: center;
}

.page-404 .cont p:first-of-type span {
    display: block;
    line-height: 1.0;
}

.page-404 .cont p:last-of-type {
    font-size: 16px;
    font-weight: 500;
    line-height: 2.0;
    text-align: center;
    margin-top: 50px auto;
}

.page-404 a.btn01 {
    margin: 50px auto 0;
}