@charset "utf-8";
:root {
    /* color */
    --color-primary: #09355C;
    --color-secondary: #0058A4;
    --color-accent: #D7F205;
    --color-body-bg: #F5FAFD;

    --color-white: #fff;
    --color-gray: #F4F4F4;

    --color-primary-rgb: 9, 53, 92;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    /* border */
    --variable-radius: 9999rem;

    /* font */
    --font-family-jp: "Noto Sans JP", sans-serif;
    --font-family-en: "Inter", var(--font-family-jp);

    --font-weight-regular: 400;
    --font-weight-medium: 500;

    /* clamp(1024px以下, 可変, 1280px以上) ） */
    --font-size-36: clamp(1.5rem, -1.5rem + 4.69vw, 2.25rem);   /* 最小:24px、最大:36px */
    --font-size-34: clamp(1.5rem, -1rem + 3.91vw, 2.125rem);    /* 最小:24px、最大:34px */
    --font-size-32: clamp(1.375rem, -1.125rem + 3.91vw, 2rem);  /* 最小:22px、最大:32px */
    --font-size-28: clamp(1.25rem, -0.75rem + 3.13vw, 1.75rem); /* 最小:20px、最大:28px */
    --font-size-24: clamp(1.25rem, 1rem + 0.63vw, 1.5rem);      /* 最小:18px、最大:24px */
    --font-size-20: clamp(1.125rem, 0.817rem + 0.48vw, 1.25rem);    /* 最小:18px、最大:20px */
    --font-size-18: clamp(1rem, 0.5rem + 0.78vw, 1.125rem);     /* 最小:16px、最大:18px */
    --font-size-16: clamp(0.875rem, 0.375rem + 0.78vw, 1rem);   /* 最小:14px、最大:16px */
    --font-size-14: clamp(0.75rem, 0.25rem + 0.78vw, 0.875rem); /* 最小:12px、最大:14px */

    /* shadow */
    --box-shadow: 0 3px 10px rgba(var(--color-black-rgb), .16);

    /* transition */
    --transition-duration: .25s;
    --transition-ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
    --transition-ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);

    --icon-color-delay: .1s;
    --icon-arrow-delay: .25s;

    /* animation */
    --text-delay: .5s;

    /* margin and padding */
    --section-padding: clamp(3.75rem, 9.38vw, 7.5rem) 6%;
    --section-margin: 200px;
}

/*!
 * "mySubsetFont" licensed under the SIL Open Font License
 * https://mokuzai.booth.pm/items/3885939
 */
@font-face {
    font-family: 'mySubsetFont';
    src: url('../../assets/fonts/mySubsetFont.woff2') format('woff2'),
        url('../../assets/fonts/mySubsetFont.woff') format('woff'),
        url('../../assets/fonts/mySubsetFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*-----------------------------------------------------

    COMMON SETTING

-----------------------------------------------------*/

body {
    color: var(--color-primary);
    font-family: var(--font-family-jp);
    font-size: var(--font-size-16);
    letter-spacing: .1em;
    line-height: 1.5;
    width: 100%;
    position: relative;
	animation: loading 2s;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    image-rendering: -webkit-optimize-contrast; /* for Chrome */
}
a {
    transition: all var(--transition-duration) ;
}

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


@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media screen and (max-width: 640px) {
    .pc-only { display: block; }
    .sp-only { display: none; }
}


.container {
    position: relative;
    overflow: hidden;
}
.container::before {
    background: var(--color-body-bg) url(../../assets/images/bg_body.webp) no-repeat top left /cover;
    content: "";
    width: 100%;
    height: 100dvh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.no-webp .container::before {
    background-image: url(../../assets/images/bg_body.png);
}

a.link_blank::after {
    background: url(../../assets/images/icon_window.svg) no-repeat right center / contain;
    content: "";
    display: inline-block;
    width: clamp(1rem, 0.75rem + 0.63vw, 1.25rem);
    aspect-ratio: 1 / 1;
}

@media screen and (max-width: 768px) {
    .container::before {
        background-image: url(../../assets/images/bg_body_sp.webp);
        background-position: top center;
    }
    .no-webp .container::before {
        background-image: url(../../assets/images/bg_body_sp.png);
    }
}




/*-----------------------------------------------------

    HEADER

-----------------------------------------------------*/

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em clamp(0.938rem, -8.813rem + 15.23vw, 3.375rem);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
#header::before {
    background-color: rgba(var(--color-white-rgb), .5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(52px);
    box-shadow: var(--box-shadow);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}
#header.is-scroll:not(.clone)::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-logo {
    display: inline-block;
    width: clamp(15.625rem, 14.333rem + 6.46vw, 19.5rem);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.globalnav {
    display: flex;
    gap: clamp(1.25rem, -1.25rem + 6.25vw, 3.75rem);
}
.globalnav-item {
    position: relative;
}
.globalnav-item a {
    display: inline-block;
    font-size: var(--font-size-18);
    padding-bottom: 5px;
}
.globalnav-item a::after {
    background-color: var(--color-primary);
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: transform var(--transition-duration);
    transform-origin: right top;
    transform: scale(0, 1);
}
.globalnav-item a:hover::after {
    transform-origin: left top;
    transform: scale(1, 1);
}

.header-btn {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--variable-radius);
    box-shadow: var(--box-shadow);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 1em 1.5em 1em 1em;
    position: relative;
    overflow: hidden;
    transition:
        color calc(var(--transition-duration) * 1.4) var(--transition-ease-in-out-quad),
        background-color 0s 0s;
}
.header-btn:before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(var(--color-white), var(--color-white)) 100% 100% / 0 100% no-repeat;
    transition: background-size calc(var(--transition-duration) * 1.4) var(--transition-ease-in-out-quad);
}
.header-btn .btn-icon-wrap {
    display: flex;
    font-size: 0;
}
.header-btn .btn-icon {
    --_icon-circle-size: clamp(1.875rem, -0.625rem + 3.91vw, 2.5rem);
    --_icon-arrow-size: 18.95px;

    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--variable-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_icon-circle-size);
    height: var(--_icon-circle-size);
    overflow: hidden;
    position: relative;

    transition: all var(--transition-duration) var(--transition-ease-out-cubic) var(--icon-color-delay);
    transition-property: background-color, border-color;
}

.header-btn .btn-icon .icons {
    position: relative;
    display: flex;
    width: calc(var(--_icon-circle-size) * 2);
    height: var(--_icon-circle-size);
    translate: calc(-1 * var(--_icon-circle-size) / 2) 0;
}

.header-btn .btn-icon .icons span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_icon-circle-size);
    height: var(--_icon-circle-size);
}
.header-btn .btn-icon .icons span::before {
    content: url(../../assets/images/icon_arrow.svg);
    width: var(--_icon-arrow-size);
    flex-shrink: 0;
}
.header-btn .btn-icon .icons span.icon-hover::before {
    content: url(../../assets/images/icon_arrow_white.svg);
}

.header-btn .btn-txt {
    font-size: var(--font-size-18);
    position: relative;
}


@media (hover: hover) {
    .header-btn:hover {
        color: var(--color-primary);
        background-color: var(--color-white);
        transition:
            color calc(var(--transition-duration) * 1.4) var(--transition-ease-in-out-quad),
            background-color 0s calc(var(--transition-duration) * 1.4);
    }

    .header-btn:hover:before {
        background-position: 0 100%;
        background-size: 100% 100%
    }

    .header-btn:hover .btn-icon {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .header-btn:hover .btn-icon > span {
        translate: calc(var(--_icon-circle-size) / 2) 0;
        transition: all calc(var(--transition-duration) * 1.75) var(--transition-ease-out-cubic) var(--icon-arrow-delay);
        transition-property: translate;
        will-change: translate;
    }
}

/* SPメニューボタン */
.js-hamburger {
    width: 20px;
    height: 10px;
    cursor: pointer;
    position: absolute;
    top: 26px;
    right: 30px;
    display: none;
}
.js-hamburger span {
    background-color: var(--color-primary);
    border-radius: 1px;
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    transition: .3s;
}
.js-hamburger span:nth-of-type(1) {
    top: 10%;
}
.js-hamburger span:nth-of-type(2) {
    top: 90%;
}
.js-hamburger.is-active span:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
.js-hamburger.is-active span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}


@media screen and (max-width: 1280px) {
    #header {
        padding: 20px;
    }
}

@media screen and (max-width: 1023px) {
    #header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }
    .header-logo {
        margin: 15px 20px;
        width: 200px;
    }
    .header-nav {
        padding: 10px 30px 80px;
        width: 100%;
        height: auto;
        display: none;
    }
    .globalnav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .globalnav-item::after {
        background: url(../../assets/images/icon_arrow.svg) no-repeat center center /contain;
        content: "";
        display: inline-block;
        width: 18px;
        aspect-ratio: 18 / 9;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .globalnav-item a {
        border-bottom: 1px solid var(--color-primary);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        padding: 30px 0;
    }
    .globalnav-item a::after {
        display: none;
    }
    .header-btn-wrap {
        margin-top: 40px;
        text-align: center;
    }

    .js-hamburger {
        display: block;
    }
    #header.clone {
        background-color: var(--color-white);
        border-radius: 0 0 60px 60px;
        box-shadow: var(--box-shadow);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        transform: translateY(-80%);
        opacity: 0;
        transition: transform .3s ease-out, opacity 0.3s ease-out;
    }
    #header.clone.is-active {
        transform: translateY(0);
        opacity: 1;
    }
    #header.clone.is-active .header-nav {
        display: block;
    }
}

/*-----------------------------------------------------

    MV

-----------------------------------------------------*/
.mv-wrap {
    margin-bottom: var(--section-margin);
}
.mv-firstview {
    padding: 80px 5% 0;
    position: relative;
}
.mv-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.mv-ttl {
    font-family: "mySubsetFont", var(--font-family-jp);
    font-size: clamp(3.25rem, 1.188rem + 4.3vw, 4.625rem);
}
.mv-ttl.js-charAnime span {
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: transform 0.5s, opacity 0.5s;
}
.mv-ttl.js-charAnime.is-act span {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
}
.mv-photo {
    margin-right: -5%;
}

[class^="mv-illust"] {
    background: no-repeat top left / contain;
    position: absolute;
    opacity: 0;
}
.mv-illust-01 {
    background-image: url(../../assets/images/illust_delivery.png);
    width: clamp(5.25rem, 3.228rem + 7.52vw, 10rem);
    aspect-ratio: 160 / 160;
    top: 12%;
    left: 0;
    animation:
        fadeIn 1s ease-out .4s forwards,
        fuwafuwa 3s ease-in-out 1s infinite alternate;
}
.mv-illust-02 {
    background-image: url(../../assets/images/illust_dog_waking.png);
    width: clamp(4.625rem, 2.869rem + 6.53vw, 8.75rem);
    aspect-ratio: 140 / 180;
    top: 6%;
    right: 2%;
    animation:
        fadeIn 1s ease-out .5s forwards,
        fuwafuwa 3s ease-in-out 2s infinite alternate;
}
.mv-illust-03 {
    background-image: url(../../assets/images/illust_family_with_children.png);
    width: clamp(6rem, 3.765rem + 8.32vw, 11.25rem);
    aspect-ratio: 180 / 200;
    left: 16%;
    top: 90%;
    animation:
        fadeIn 1s ease-out .6s forwards,
        fuwafuwa 3s ease-in-out 1s infinite alternate;
}
.mv-illust-04 {
    background-image: url(../../assets/images/illust_family_with_stroller.png);
    width: clamp(4.938rem, 3.048rem + 7.03vw, 9.375rem);
    aspect-ratio: 150 / 260;
    right: 10%;
    top: 100%;
    animation:
        fadeIn 1s ease-out .7s forwards,
        fuwafuwa 3s ease-in-out 1s infinite alternate;
}

.js-scrollIn {
    opacity: 0;
    transform : translateY(50px);
    transition : .75s;
}
.js-scrollIn.is-show {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fuwafuwa {
    0% {
        translate: 0 0;
    }
    to {
        translate: 0 -35px;
    }
}

.mv-lead{
    padding: 0 5% 60px;
}
.mv-lead p {
    font-size: var(--font-size-20);
    font-weight: bold;
    line-height: 2.4;
    text-align: center;
}
.js-leadAnime .txt_row {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.js-leadAnime .txt_row.is-act {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 1280px) {
    .mv-main {
        justify-content: center;
    }
    .mv-photo {
        width: 40%;
    }
    .mv-illust-03 {
        top: 100%;
        left: 5%;
    }
}

@media screen and (max-width: 1024px) {
    @keyframes fuwafuwa {
        0% {
            translate: 0 0;
        }
        to {
            translate: 0 -15px;
        }
    }
}

@media (orientation: landscape) and (max-width: 1023px) {
    .mv-firstview {
        height: 100vh;
    }
    .mv-illust-01 {
        top: 2%;
    }
    .mv-illust-02 {
        top: 3%;
    }
    .mv-illust-03 {
        left: 3%;
    }
    .mv-illust-04 {
        right: 1%;
    }
    .mv-lead p {
        width: 67%;
        margin: 0 auto;
    }
}


@media screen and (max-width: 640px) {
    .mv-firstview {
        height: 100vh;
    }
    .mv-main {
        flex-direction: column;
    }
    .mv-ttl {
        font-size: clamp(2.375rem, -0.425rem + 14vw, 3.25rem);
    }
    .mv-photo {
        width: auto;
        margin-top: 100px;
        margin-right: 0;
    }

    .mv-illust-01 {
        top: 1%;
        left: 5%;
    }
    .mv-illust-02 {
        top: 5%;
    }
    .mv-illust-03 {
        top: 36%;
        left: 5%;
    }
    .mv-illust-04 {
        top: 30%;
    }

    .mv-lead p {
        font-size: 16px;
    }
    .js-leadAnime .txt_row {
        display: inline;
    }
    .mv-lead br {
        display: none;
    }
}

/* iPhone8系以下 */
@media (orientation: portrait) and (max-height: 736px) {
    .mv-photo {
        margin-top: 30%;
        width: 80%;
    }
    .mv-illust-02 {
        top: 10%;
    }
    .mv-illust-03 {
        top: 45%;
    }
    .mv-illust-04 {
        top: 37%;
    }
}


/*-----------------------------------------------------

    ACHIEVEMENTS

-----------------------------------------------------*/

.sec-achieve {
    --_map-height: 650px;

    background-color: var(--color-secondary);
    border-radius: clamp(3.125rem, -3.75rem + 17.19vw, 10rem);
    margin: calc(var(--section-margin) * -1) auto;
    padding: clamp(5rem, 2.5rem + 6.25vw, 7.5rem) 0;
    position: relative;
}
.sec-achieve .sec-inner {
    padding: 0 5%;
}
.sec-achieve .sec-content {
    max-width: 1200px;
    margin: 0 auto;
}
.sec-achieve .sec-ttl_wrap {
    color: var(--color-white);
    letter-spacing: 0;
    max-width: 1200px;
    margin: 0 auto;
}
.sec-ttl_en {
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-regular);
    display: flex;
    align-items: center;
}
.sec-ttl_en::before {
    background-color: var(--color-primary);
    content: "";
    height: 1px;
    width: 20px;
    margin-right: .5em;
}
.sec-achieve .sec-ttl_en {
    color: var(--color-white);
}
.sec-achieve .sec-ttl_en::before {
    background-color: var(--color-white);
}
.sec-ttl_jp {
    font-size: var(--font-size-34);
    font-weight: bold;
    margin-top: 10px;
}
.sec-achieve .sec-ttl_jp {
    font-size: var(--font-size-34);
}

/* 施工実績リスト */
.achive-list-wrap {
    color: var(--color-white);
    margin: 40px auto 43px;
}
.achive-list_row {
    display: flex;
    gap: 46px;
}
.achive-list_col {
    width: 50%;
}

.achive-list-ttl {
    font-size: var(--font-size-20);
    font-weight: bold;
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.achive-list-ttl::after {
    background-color: var(--color-white);
    content: "";
    height: 1px;
    flex-grow: 1;
    margin-left: 15px;
}
.achive-list-year {
    border: 1px solid var(--color-white);
    font-weight: normal;
    font-size: var(--font-size-16);
    display: inline-block;
    margin-top: 27px;
    padding: 2px 10px;
    text-align: center;
}
.achive-list-item {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    transition: .2s;
}
.achive-list-item .num {
    background-color: var(--color-white);
    border-radius: var(--variable-radius);
    color: var(--color-primary);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--font-family-en);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    margin-right: 5px;
    width: 30px;
    aspect-ratio: 1 / 1;
    transition: .2s;
}
.achive-list-item .item-txt {
    color: var(--color-white);
    font-size: var(--font-size-18);
    transition: color .2s, font-weight .2s;
}
.achive-list-item:not(:disabled):hover .num {
    background-color: var(--color-accent);
}
.achive-list-item:not(:disabled):hover .item-txt {
    color: var(--color-accent);
    font-weight: bold;
}

/* 地図エリア */
.map-wrap {
    height: var(--_map-height);
}
.map-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 2043;
}
[class^="map-point"] {
    background-color: var(--color-white);
    border-radius: var(--variable-radius);
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: clamp(0.625rem, -0.875rem + 2.34vw, 1rem);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    width: clamp(1.25rem, -1.25rem + 3.91vw, 1.875rem);
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    transition: .2s;
}
[class^="map-point"]:not(:disabled):hover {
    background-color: var(--color-accent);
}
.map-point-01 {
    top: 20%;
    left: 53.5%;
}
.map-point-02 {
    top: 30%;
    left: 53.2%;
}
.map-point-03 {
    top: 16%;
    left: 49.3%;
}
.map-point-04 {
    top: 28%;
    left: 55%;
}
.map-point-05 {
    top: 30.5%;
    left: 56.6%;
}
.map-point-06 {
    top: 22.3%;
    left: 68.5%;
}
.map-point-07 {
    top: 20%;
    left: 31.5%;
}
.map-point-08 {
    top: 21.8%;
    left: 30%;
}
.map-point-09 {
    top: 23.7%;
    left: 67%;
}
.map-point-10 {
    top: 24.8%;
    left: 46.9%;
}
.map-point-11 {
    top: 15.5%;
    left: 65.8%;
}
.map-point-12 {
    top: 6.2%;
    left: 38.02%;
}
.map-point-13 {
    top: 11.1%;
    left: 74.9%;
}
.map-point-14 {
    top: 15.9%;
    left: 68.01%;
}
.map-point-15 {
    top: 17.8%;
    left: 47.6%;
}
.map-point-16 {
    top: 23.5%;
    left: 69.6%;
}
.map-point-17 {
    top: 25.3%;
    left: 50.7%;
}

.map-control {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: none;
}

.map-control button {
    background-color: var(--color-white);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    width: 11.62vw;
    aspect-ratio: 1 / 1;
    position: relative;
}
.map-control button::after {
    background: no-repeat center center /contain;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    aspect-ratio: 1 / 1;
}
.map-control button.zoom-in {
    border-radius: 10px 0 0 10px;
}
.map-control button.zoom-in::after {
    background-image: url(../../assets/images/icon_plus.svg);
}
.map-control button.zoom-out {
    border-radius:  0 10px 10px 0;
}
.map-control button.zoom-out::after {
    background-image: url(../../assets/images/icon_minus.svg);
}


@media screen and (max-width: 640px) {
    .sec-achieve {
        --_map-height: 600px;
    }

    .achive-list-wrap {
        margin-top: 550px;
        margin-bottom: 0;
    }
    .achive-list_row {
        flex-direction: column;
    }
    .achive-list_row {
        gap: 0;
    }
    .achive-list_col {
        width: 100%;
    }

    .achive-list-ttl {
        border-top: 1px solid var(--color-white);
        margin-top: 40px;
        padding-top: 20px;
    }
    .achive-list-ttl::after {
        display: none;
    }
    .achive-list_col:first-of-type .achive-list-ttl {
        margin-top: 0;
    }
    .achive-list-item .num {
        width: 20px;
    }

    .map-wrap {
        width: 90%;
        height: var(--_map-height);
        padding: 0 5%;
        overflow: hidden;
        position: absolute;
        top: 3%;
        left: 5%;
    }
    .map-box {
        width: 1000px;
    }
    .map-control {
        display: block;
    }
}

/*-----------------------------------------------------

    RECRUITMENT

-----------------------------------------------------*/
.sec-recruit {
    background-color: var(--color-body-bg);
    padding: calc(clamp(3.75rem, 9.38vw, 7.5rem) + var(--section-margin)) 6% clamp(3.75rem, 9.38vw, 7.5rem);
}
.sec-recruit .sec-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.recruit-content {
    background-color: rgba(var(--color-white-rgb), .8);
    border-radius: 30px;
    box-shadow: var(--box-shadow);
    padding: clamp(1.5rem, -0.75rem + 5.63vw, 3.75rem);
    margin-top: 60px;
    position: relative;
}
.recruit-content::before {
    background: url(../../assets/images/illust_business_shake_hands.png) no-repeat top center /contain;
    content: "";
    display: inline-block;
    width: clamp(var(--_illust-width-min), 3.75rem + 12.5vw, 13.75rem);
    aspect-ratio: 220 / 280;
    position: absolute;
    top: -100px;
    right: 0;
}
.recruit-table {
    border-collapse: separate;
    border-spacing: 20px 0;
}
.recruit-table th,
.recruit-table td {
    padding: 25px 0;
    font-size: var(--font-size-18);
}
.recruit-table th {
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    font-weight: bold;
    width: 15%;
}
.recruit-table td {
    color: var(--color-primary);
    border-bottom: 1px solid #E2E2E2;
    line-height: 1.66;
}
.recruit-table td .txt_note {
    font-size: var(--font-size-14);
}


@media screen and (max-width: 767px) {
    .recruit-table {
        border-collapse: collapse;
    }
    .recruit-table th,
    .recruit-table td {
        display: block;
        width: 100%;
    }
    .recruit-table td {
        border-bottom: none;
    }
}


/*-----------------------------------------------------

    ADDRESS

-----------------------------------------------------*/
.sec-address {
    background-color: var(--color-white);
    padding: var(--section-padding);
}
.sec-address .sec-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2.5rem, -5rem + 18.75vw, 10rem);
}

.address-box {
    flex-shrink: 0;
}
.address-txt {
    margin: 20px 0;
}
.tel-box {
    display: flex;
}
.tel-box dt {
    font-weight: normal;
}

.btn_coporate a {
    border: 1px solid var(--color-primary);
    border-radius: var(--variable-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-16);
    font-weight: bold;
    letter-spacing: 0;
    margin-top: 30px;
    padding: 18px 30px;
    position: relative;
    overflow: hidden;
}
.btn_coporate a::before {
    background: var(--color-primary);
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    display: block;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .6s ease; position: absolute;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.btn_coporate a:hover {
    color: var(--color-white);
}
.btn_coporate a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn_coporate a.link_blank::after {
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: url(../../assets/images/icon_window.svg);
}
.btn_coporate a.link_blank:hover::after {
    background-color: var(--color-white);
}

.google-map {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 700 / 500;
}
.google-map iframe {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    .address-box {
        width: 45%;
    }

}

@media screen and (max-width: 640px) {
    .sec-address .sec-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .address-box {
        width: auto;
    }
    .address-logo {
        width: 250px;
    }
    .tel-box {
        justify-content: center
    }
}


/*-----------------------------------------------------

    CONTACT

-----------------------------------------------------*/
.sec-contact {
    background: url(../../assets/images/bg_contact.jpg) no-repeat top center /cover;
    padding: var(--section-padding);
}
.sec-contact .sec-inner {
    display: flex;
    align-items: center;
    gap: clamp(1.875rem, 4.69vw, 3.75rem);
    max-width: 1200px;
    margin: 0 auto;
}

.contact-graduates {
    max-width: 50%;
}
.contact-graduates a {
    border-radius: 20px;
    display: block;
    position: relative;
    z-index: 0;
    transition: .5s;
}
.contact-graduates a::after {
    background-color: var(--color-primary);
    border-radius: clamp(0.5rem, -0.875rem + 3.44vw, 1.875rem);
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 665 / 334;
    position: absolute;
    bottom: -10px;
    right: -10px;
    z-index: -1;
    transition: .5s;
}
.contact-graduates a:hover {
    box-shadow: 0 0 5px rgba(var(--color-white-rgb), .5);
}
.contact-graduates a:hover::after {
    opacity: 0;
}
.contact-entry {
    flex-shrink: 0;
    max-width: 50%;
    text-align: center;
}
.contact-entry-ttl {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-entry-ttl_en {
    font-family: var(--font-family-en);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
}
.contact-entry-ttl_en::before {
    content: url(../../assets/images/icon_mail.svg);
    display: block;
    width: 50px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.contact-entry-ttl_jp {
    font-size: var(--font-size-32);
    font-weight: bold;
    margin-top: .6em;
}

.contact-entry-address {
    color: var(--color-accent);
    font-size: var(--font-size-24);
    font-weight: bold;
    margin-top: 1.5em;
}

@media screen and (max-width: 767px) {
    .sec-contact .sec-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .contact-graduates,
    .contact-entry {
        max-width: 100%;
    }

    .contact-entry-ttl_jp {
        font-size: clamp(1.125rem, 0.5rem + 3.13vw, 2rem);
    }
    .contact-entry-address {
        font-size: clamp(0.875rem, 0.696rem + 0.89vw, 1.125rem);
    }
}


/*-----------------------------------------------------

    FOOTER

-----------------------------------------------------*/
footer {
    background-color: var(--color-gray);
}

.footer-nav {
    display: flex;
    justify-content: space-between;
    gap: clamp(2.5rem, -0.5rem + 7.5vw, 5.5rem);
    font-size: var(--font-size-14);
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--section-padding);
}
.footer-nav a.link_blank::after {
    margin-left: .5em;
}
.footer-nav a:hover {
    opacity: .7;
}
.footer-nav-list {
    overflow: hidden;
}
.footer-nav-list > li {
    width: calc(calc(100% - clamp(0rem, -5.5rem + 13.75vw, 5.5rem) * 2 ) / 3);
    float: left;
}
.footer-nav-list > li:nth-of-type(n+2) {
    margin-left: clamp(0rem, -5.5rem + 13.75vw, 5.5rem);
}
.footer-nav-list > li:nth-of-type(2),
.footer-nav-list > li:nth-of-type(3) {
    margin-bottom: 30px;
}

.footer-nav-list > li > a {
    border-bottom: 1px solid var(--color-primary);
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.footer-nav-list > li > ul > li {
    margin-bottom: 10px;
}
.footer-nav-list > li > ul > li ul > li {
    margin-top: 5px;
    margin-left: 1em;
    padding-left: 1.5em;
    position: relative;
}
.footer-nav-list > li > ul > li ul > li::before {
    border-bottom: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    content: "";
    width: .7em;
    height: .6em;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.footer-nav-side li + li {
    margin-top: 15px;
}

.copyright {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    font-size: 12px;
    padding: 20px 5%;
}

.pagetop {
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    border-radius: var(--variable-radius);
    box-shadow: var(--box-shadow);
    color: var(--color-white);
    cursor: pointer;
    font-size: var(--font-size-14);
    font-family: var(--font-family-en);
    width: 60px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    right: 5%;
    bottom: 5%;
    z-index: 5;
    opacity: 0;
    transform: translateY(100px);
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.pagetop::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: solid 2px var(--color-white);
    border-right: solid 2px var(--color-white);
    rotate: -45deg;
}
.pagetop:hover {
    background-color: rgba(var(--color-primary-rgb), .7);
}
.pagetop.is-show {
    transform: translateY(0);
    opacity: 1;
}

@media screen and (max-width: 640px) {
    .footer-nav {
        flex-direction: column;
    }
    .footer-nav-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
    }
    .footer-nav-list > li {
        float: none;
        width: 45%;
        margin-bottom: 0;
    }
    .footer-nav-list > li:first-child {
        width: 100%;
    }
    .footer-nav-list > li:first-child > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .footer-nav-list > li:first-child > ul > li {
        width: 45%;
    }
    .footer-nav-list > li:nth-of-type(2),
    .footer-nav-list > li:nth-of-type(3) {
        margin-bottom: 0;
    }
}


/*-----------------------------------------------------

    Modal

-----------------------------------------------------*/
.modal {
    background: rgba(var(--color-primary-rgb), .6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow-y: auto;
    display: none;
}
.modal-layer {
    width: 100%;
    height: 100%;
}
.modal-box {
    background-color: var(--color-white);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px;
    padding: 2.8vw;
    width: clamp(500px, 41.666vw, 800px);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.modal-body {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.modal-body.is-fade {
    opacity: 0;
}
.modal-content {
    display: none;
}
.modal-photo {
    width: 100%;
    height: 100%;
    aspect-ratio: 770 / 440;
}
.modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.modal-ttl-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block: 30px;
}
.modal-ttl-num {
    border: 1px solid var(--color-primary);
    border-radius: var(--variable-radius);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--font-family-en);
    font-size: clamp(1.25rem, 0.623rem + 1.56vw, 1.875rem);
    font-weight: var(--font-weight-medium);
    width: clamp(3.75rem, -1.25rem + 7.81vw, 5rem);
    aspect-ratio: 1 / 1;
}
.modal-ttl {
    font-size: var(--font-size-28);
    font-weight: bold;
}
.modal-ttl span {
    display: block;
    font-size: var(--font-size-20);
    margin-bottom: 10px;
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: 60px;
    /* margin-top: 60px; */
}
.js-modal-prev::before,
.js-modal-next::after {
    background: url(../../assets/images/icon_arrow.svg) no-repeat center center /contain;
    content: "";
    display: inline-block;
    width: 18px;
    aspect-ratio: 18 / 9;
    margin-inline: 5px;
}
.js-modal-prev::before {
    transform: rotate(180deg);
}

/* 閉じるボタン */
.modal-close {
    background-color: var(--color-primary);
    border-radius: var(--variable-radius);
    color: var(--color-white);
    cursor: pointer;
    width: 35px;
    height: 35px;
    position: absolute;
    top: -10px;
    right: -10px;
}
.modal-close::before,
.modal-close::after {
    background: var(--color-white);
    content: "";
    width: 2px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.modal-close::before {
    rotate: -45deg;
}
.modal-close::after {
    rotate: 45deg;
}

@media screen and (max-width: 640px) {
    .modal-box {
        border-radius: 20px;
        width: 80%;
        padding: 20px;
    }
    .modal-ttl span {
        margin-bottom: 5px;
    }
}