@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset */
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    color: #222222;
    background: #ffffff;
    line-height: 1.8;
    word-spacing: 0;
    font-size: 1.6rem;
    font-family: "Noto Sans", sans-serif;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: bold;
    line-height: 1.3;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
    width: calc(100% - 40px);
}

.w-full {
    width: 100%;
}

.anchor{position: relative;}
.anchor > div{position: absolute; top: -100px;}

@media (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }

    .sp {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body{font-size: 1.4rem; line-height: 1.6;}

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.6;
    }
    
    .pc {
        display: none !important;
    }
    
    .anchor > div{top: -60px;}
}

@media print {
    body {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Header */
.header{position: fixed; left: 0; top: 0; width: 100%; height: 100px; z-index: 20; color: #fff; transition: .6s;}
.header.scrolled{background: #fff; color: #222; border-bottom: 1px solid #eaeaea;}
.header .container{max-width: 100%; display: flex; justify-content: space-between; height: 100%; align-items: center;}
.header .logo a{line-height: 1; display: block; position: relative;}
.header .logo-black{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.header.scrolled .logo-white{opacity: 0;}
.header.scrolled .logo-black{opacity: 1;}

@media (max-width: 1023px) {
    .header{height: 60px;}
    .header .logo{margin-right: 20px;}
    .header .logo img{width: 270px;}
}

.lowerpage{padding: 100px 0 0;}
.lowerpage .header{background: #fff; color: #222; border-bottom: 1px solid #eaeaea; transform: translateY(0) !important; -webkit-transform: translateY(0) !important; opacity: 1 !important;}
.lowerpage .logo-white{opacity: 0;}
.lowerpage .logo-black{opacity: 1;}

@media (max-width: 1023px) {
    .lowerpage{padding: 60px 0 0;}
    .lowerpage .header #nav-btn span{background: #222;}
}

.header-right{display: flex; align-items: center; justify-content: flex-end; flex: 1; column-gap: min(2.5vw, 30px);}
.header-right ul{display: flex; align-items: center; justify-content: space-between;}
.header-right .menu-main{column-gap: min(2.9vw, 35px);}
.header-right .menu-main a{font-family: "Josefin Sans", sans-serif; font-size: min(1.3vw, 16px); font-weight: 600; line-height: 1;}
.header-right .menu-main a.is-active,
.header-right .menu-main a:hover{text-decoration: underline; text-underline-offset: 5px;}
.header-right .button-contact{max-height: 36px; max-width: 170px;}
.header-right .language{line-height: 1;}
.header-right .language a:hover,
.header-right .language a.active{text-decoration: underline; text-underline-offset: 5px;}

@media (min-width: 1024px) {
    .header-right .language li:first-child{border-right: 1px solid #fff; margin: 0 10px 0 0; padding: 0 10px 0 0;}
    .header-right .language li a{font-size: min(1.1vw, 14px);}
    .header-right .button-contact{height: 3.2vw; font-size: min(1.1vw, 14px);}

    #nav-btn{display: none;}
}

@media (max-width: 1023px) {
    .header-right .language{justify-content: center; padding: 10px 0 60px;}
    .header-right .language li{margin: 0 10px;}
    .header-right .language li a{font-size: 12px;}
    .header-right .button-contact{font-size: 12px; margin: 30px auto;}

    #nav-btn{position: relative; width: 30px; height: 26px; z-index: 996; cursor: pointer; display: block; background: none;}
    #nav-btn span{display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: all .3s ease;}
    #nav-btn span:nth-of-type(1){top: 5%;}
    #nav-btn span:nth-of-type(2){top: 46%;}
    #nav-btn span:nth-of-type(3){top: 90%;}

    #nav-btn.is-open span:nth-of-type(1){top: 10px; transform: rotate(45deg);}
    #nav-btn.is-open span:nth-of-type(2){display: none;}
    #nav-btn.is-open span:nth-of-type(3){top: 10px; transform: rotate(-45deg);}

    .header-right{position: absolute; left: 0; right: 0; top: 100%; width: 100%; height: calc(100vh - 60px); background: #fff; display: none; transition: 0.3s ease;}
    .header-right .menu-main{display: block; padding: 50px 0 0;}
    .header-right .menu-main li{width: 100%; padding: 20px; text-align: center;}
    .header-right .menu-main a{color: #222; font-size: 14px;}

    .header.show-menu .header-right{display: block;}
    .header.scrolled #nav-btn span,
    .header.show-menu #nav-btn span{background: #222;}
    .header.show-menu{background: #fff; color: #222; border-bottom: 1px solid #eaeaea;}
    .header.show-menu .logo-white{opacity: 0;}
    .header.show-menu .logo-black{opacity: 1;}
}

/* Main */
.main{padding-bottom: 150px;}
.lowerpage .main{padding-top: 120px; background: #f7f8fc url("../imgs/common/bg.jpg") no-repeat top center/ 100% auto;}

.group{margin-bottom: 120px;}

@media (max-width: 767px) {
    .main{padding-bottom: 100px;}
    .lowerpage .main{padding-top: 60px; background-size: 300% auto;}
    
    .group{margin-bottom: 60px;}
}

.arrow{width: 6px; height: 6px; background: transparent; border: none; position: relative; transition: all 0.3s ease;}
.arrow-left::before{content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: translate(-50%, -50%) rotate(45deg);}
.arrow-right::before{content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-right: 1px solid #fff; border-top: 1px solid #fff; transform: translate(-50%, -50%) rotate(45deg);}
.arrow-top::before{content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-left: 1px solid #004dd1; border-top: 1px solid #004dd1; transform: translate(-50%, -50%) rotate(45deg);}

.expand{ width: 14px; height: 14px; background: #fff; mask: url("../imgs/common/expand.svg") no-repeat top left/100% 100%; -webkit-mask: url("../imgs/common/expand.svg") no-repeat top left/100% 100%;}

.links{color: #004dd1; text-decoration: underline; text-underline-offset: 5px;}
.links:hover{text-decoration: unset;}

.links2{text-decoration: underline; text-underline-offset: 5px;}
.links2:hover{text-decoration: none;}

.m-tit{text-align: center; margin-bottom: 40px;}
.m-tit .jp{font-size: clamp(16px, 1.5vw, 18px); letter-spacing: 0.05em; margin: 0 0 15px; display: block;}
.m-tit .en{font-size: min(3.2vw, 54px); line-height: 1; font-weight: 600; font-family: "Josefin Sans", sans-serif; display: block;}
.m-tit .en small{font-size: 100%; background: linear-gradient(to right, #004dd1 , #00854d); background-clip: text; -webkit-text-fill-color: transparent; mask-image: linear-gradient(to right, #004dd1, #00854d);}

.m-desc{font-size: clamp(14px, 1.3vw, 16px); letter-spacing: 0.05em;}

@media (max-width: 1023px) {
    .m-tit{margin-bottom: 20px;}
    .m-tit .jp{margin: 0 0 5px;}
    .m-tit .en{font-size: min(6vw, 40px);}
}

.ui-button{font-size: clamp(12px, 1.3vw, 16px); font-weight: 600; color: #fff; letter-spacing: 0.05em; background: #004dd1; width: 100%; max-width: 240px; height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 24px; position: relative; transition: all 0.3s ease; cursor: pointer; border: 1px solid #004dd1}
.ui-button .arrow{margin: 0 0 0 10px;}
.ui-button:hover{background: #fff; color: #004dd1;}
.ui-button:hover .arrow{transform: translateX(10px);}
.ui-button:hover .arrow::before{border-color: #004dd1;}

.ui-button .expand{margin: 0 0 0 10px;}
.ui-button:hover .expand{background: #004dd1;}

@media (max-width: 1023px) {
    .ui-button{max-width: 150px; height: 36px;}
}

/* Hero */
.hero{position: relative; background: url("../imgs/common/hero.webp") no-repeat top center/cover; width: 100%; height: 17vw;}
.hero-tit{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center;}
.hero-tit span{display: block;}
.hero-tit .jp{font-size: clamp(14px, 1.3vw, 18px); letter-spacing: 0.05em; margin: 0 0 15px;}
.hero-tit .en{font-size: min(3.2vw, 54px); line-height: 1; font-weight: 600; font-family: "Josefin Sans", sans-serif;}

@media (max-width: 1023px) {
    .hero{height: 200px;}
    .hero-tit .jp{margin: 0 0 5px;}
    .hero-tit .en{font-size: min(6vw, 40px);}
}

/* Footer */
.footer{background: #004dd1; color: #fff; height: 160px;}
.footer .container{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 100%; height: 100%;}
.footer .logo a{display: block; line-height: 1;}
.footer .arrow{margin: 0 0 0 10px; position: relative;}
.footer-right{display: flex; align-items: center; column-gap: 50px;}
.footer-right .copyright{font-family: "Josefin Sans", sans-serif;}
.footer-nav a:hover{text-decoration: underline; text-underline-offset: 0.25em;}

@media (max-width: 1024px) {
    .footer-right .menu{font-size: min(1.1vw, 14px);}
    .footer-right .copyright{font-size: min(1vw, 12px);}
}

@media (max-width: 1023px) {
    .footer{height: auto; padding: 30px 0;}
    .footer .container{flex-direction: column; justify-content: center; row-gap: 10px;}
    .footer-right{flex-direction: column; row-gap: 10px;}
    .footer .logo img{width: 270px;}
    .footer-right .menu{font-size: 12px;}
    .footer-right .copyright{font-size: 10px;}
}

/* Back Top */
#backToTop{position: fixed; right: 20px; bottom: 100px; z-index: 99; width: 60px; height: 60px; display: none; background: #fff; border-radius: 50%; cursor: pointer; box-shadow: 0px 0px 5px 0px #2222223b;}
#backToTop .arrow{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#backToTop .arrow-top::before{width: 10px; height: 10px;}
#backToTop:hover{background: #004dd1;}
#backToTop:hover .arrow-top::before{border-color: #fff;}

@media (max-width: 1023px) {
    #backToTop{width: 40px; height: 40px; bottom: 50px;}
    #backToTop .arrow-top::before{width: 5px; height: 5px;}
}

/* Animate */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease;
}

.fade-in.is-view {
    opacity: 1;
    filter: blur(0) brightness(100%);
}

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-up.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-down {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-down.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-40px);
    -webkit-transform: translateX(-40px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-left.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    filter: blur(0) brightness(100%);
}

.fade-right {
    opacity: 0;
    transform: translateX(40px);
    -webkit-transform: translateX(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-right.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    filter: blur(0) brightness(100%);
}

.zoom-in {
    opacity: 0;
    overflow: hidden;
    transform: scale(0.7, 0.7);
    -webkit-transform: scale(0.7, 0.7);
    transition: opacity 1s ease, transform 1s ease;
}

.zoom-in.is-view {
    opacity: 1;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

.zoom-out {
    opacity: 0;
    overflow: hidden;
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    transition: opacity 1s ease, transform 1s ease;
}

.zoom-out.is-view {
    opacity: 1;
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

.slide-right{
    transition: -webkit-clip-path 2s cubic-bezier(.19,1,.22,1) 1s;
    transition: clip-path 2s cubic-bezier(.19,1,.22,1) 1s;
    transition: clip-path 2s cubic-bezier(.19,1,.22,1) 1s,-webkit-clip-path 2s cubic-bezier(.19,1,.22,1) 1s;
    transition-delay: 0.5s, 0.5s;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.slide-right.is-view{-webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);}

@media (min-width: 768px) {
    .delay1 {
        transition-delay: .4s;
    }

    .delay2 {
        transition-delay: .6s;
    }

    .delay3 {
        transition-delay: .8s;
    }

    .delay4 {
        transition-delay: 1s;
    }
}