@charset "utf-8";
/* loader */
.top-loader {position: fixed; inset: 0; z-index: 9999; background-color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0.9s ease;}
.top-loader.is-hide {opacity: 0; visibility: hidden; pointer-events: none;}
.top-loader__pattern {position: absolute; opacity: 0; animation: loaderFadeIn 1.2s ease forwards;}
.top-loader__pattern--right {top: -10%; right: -10%; width: 40%; animation-delay: 0.3s;}
.top-loader__pattern--left {left: -10%; bottom: -10%; width: 40%; animation-delay: 0.9s;}
.top-loader__logo {width: 300px; opacity: 0; animation: loaderFadeIn 0.7s ease forwards; animation-delay: 1.5s;}
.top-loader img {width: 100%; height: auto; display: block;}
@keyframes loaderFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
body.is-loading {overflow: hidden;}
@media (max-width: 960px) {
    .top-loader__pattern--right {width: 60%;}
    .top-loader__pattern--left {width: 60%;}
    .top-loader__logo {width: 300px;}
}
@media screen and (max-width:768px) {
    .top-loader__pattern--right {top: -15%; right: -15%; width: 75%;}
    .top-loader__pattern--left {left: -15%; bottom: -15%; width: 75%;}
    .top-loader__logo {width: 250px;}
}
@media screen and (max-width:590px) {
    .top-loader__pattern--right {top: -20%; right: -20%; width: 100%;}
    .top-loader__pattern--left {left: -20%; bottom: -20%; width: 100%;}
    .top-loader__logo {width: 200px;}
}
/* swiper */
#header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask {width: 100%; height: calc(100vh - 170px); -webkit-mask-image: url("../img/mask_01.svg"); mask-image: url("../img/mask_01.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; position: relative;}
#header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask img {width: 100%; height: 100%; object-fit: cover; display: block;}
#header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask .catch {position: absolute; bottom: 15%; left: 5%; font-size: 2.75vw; color: var(--color-primary);}
#header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask .catch span {box-decoration-break: clone; -webkit-box-decoration-break: clone; background-color: var(--color-white); padding: 0 0.25em;}
#header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask .catch-sub {position: absolute; bottom: 15%; left: 25%; font-size: 1.75vw; color: var(--color-accent-blue); transform: rotate(-12deg); font-family: "Homemade Apple", cursive;}
#header .head .wrap .scrolldown {position: absolute; left: 50%; bottom: 10px; transform: translate(-50%,0); z-index: 98; text-align: center;}
#header .head .wrap .scrolldown div {font-size: 12px; color: var(--color-text-light);}
#header .head .wrap .scrolldown span {display: block; margin: 7px auto 0; width: 1px; height: 20px; background-color: var(--color-text-light); position: relative;}
@keyframes scrollanimeA {
    0% {
        bottom: 100%;
        opacity: 1
    }

    5% {
        bottom: 100%;
        opacity: 1
    }

    75% {
        bottom: 0;
        opacity: 1
    }

    100% {
        bottom: 0;
        opacity: 0
    }
}
#header .head .wrap .scrolldown span::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 100%; background-color: var(--color-text-light); animation: 3.2s scrollanimeA ease infinite 3.32s;}
@keyframes scrollanimeB {
    0% {
        top: 0;
        opacity: 1;
        transform: translate(0, -50%) scale(0)
    }

    5% {
        top: 0;
        opacity: 1;
        transform: translate(0, -50%) scale(1)
    }

    75% {
        top: 100%;
        opacity: 1;
        transform: translate(0, -50%) scale(1)
    }

    100% {
        top: 100%;
        opacity: 0;
        transform: translate(0, -50%) scale(3)
    }
}
#header .head .wrap .scrolldown span::after {content: ""; display: block; width: 5px; height: 5px; background-color: var(--color-text-light); border-radius: 50%; position: absolute; top: 0; left: -100px; right: -100px; margin: 0 auto; animation: 3.2s scrollanimeB ease infinite 3.32s; transform: translate(0,-50%) scale(0);}
@media screen and (max-width:1280px) {
    #header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask {height: calc(100vh - 150px);}
}
@media (max-width: 768px) {
    #header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask {height: calc(100vh - 130px); -webkit-mask-image: url("../img/mask_01_sp.svg"); mask-image: url("../img/mask_01_sp.svg");}
    #header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask .catch {bottom: 15%; left: 5%; font-size: 5vw;}
    #header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask .catch-sub {bottom: 15%; left: 25%; font-size: 3.5vw;}
}
@media screen and (max-width:590px) {
    #header .head .wrap .swiper-top .swiper-wrapper .swiper-slide .slide-mask {height: calc(80vh - 130px);}
    #header .head .wrap .scrolldown {bottom: auto;}
}
/* about */
#about .wrap {margin: 250px auto 0;}
#about .wrap .about {display: flex; margin: 0 100px;}
#about .wrap .about .img {width: 50%; background: url(../img/top/about_bg.svg) no-repeat top/contain; padding: 2.2%;}
#about .wrap .about .img .mask {width: 100%; position: relative; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center;}
#about .wrap .about .img .mask img {width: 100%; height: 100%; object-fit: cover; display: block;}
#about .wrap .about .desc {width: 50%; padding: 0 0 0 50px;}
#about .wrap .about .desc h3 {display:inline; line-height: 2; font-size: 30px; color: var(--color-primary); background:url("../img/line.svg") repeat-x left 100%; background-size:auto 8px; padding-bottom: 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
#about .wrap .about .desc .content {width: 100%; margin: 70px auto;}
#about .wrap .about .desc .content p {margin: 0 auto 1em; font-weight: bold;}

/* values */
#values .wrap {margin: 250px auto 0;}

/* ttl */
h2 {font-size: 20px; font-weight: normal; color: var(--color-text-light); margin: 0 150px;}

/* daily */
#daily .wrap {padding: 250px 0 0;}
#daily .wrap .swiper-scroll {margin: 150px 0;}

/* news */
#news .wrap {margin: 250px auto 0;}
#news .wrap .news .side {display: flex; align-items: end;}


@media screen and (max-width:1280px) {
    /* about */
    #about .wrap {margin: 200px auto 0;}
    #about .wrap .about {margin: 0 50px;}
    #about .wrap .about .desc {padding: 0 0 0 40px;}
    #about .wrap .about .desc h3 {font-size: 24px; padding-bottom: 8px;}
    #about .wrap .about .desc .content {margin: 50px auto;}

    /* values */
    #values .wrap {margin: 200px auto 0;}

    /* ttl */
    h2 {font-size: 18px; margin: 0 50px;}

    /* daily */
    #daily .wrap {padding: 200px 0 0;}
    #daily .wrap .swiper-scroll {margin: 120px 0;}

    /* news */
    #news .wrap {margin: 200px auto 0;}
}

@media screen and (max-width:960px) {
    /* about */
    #about .wrap .about {display: block;}
    #about .wrap .about .img {width: 100%; max-width: 650px; margin: 50px auto; padding: 28px;}
    #about .wrap .about .desc {width: 100%; padding: 0;}

    /* news */
    #news .wrap .news {display: flex; flex-direction: column; margin: 100px 50px 0;}
    #news .wrap .news .side {order: 2; margin: 70px 0 0; display: block;}
    #news .wrap .news .list {order: 1;}
}

@media screen and (max-width:768px) {
    /* about */
    #about .wrap {margin: 150px auto 0;}
    #about .wrap .about {margin: 0 20px;}
    #about .wrap .about .desc h3 {font-size: 20px; padding-bottom: 6px;}

    /* values */
    #values .wrap {margin: 150px auto 0;}

    /* ttl */
    h2 {font-size: 15px; margin: 0 20px;}

    /* daily */
    #daily .wrap {padding: 150px 0 0;}
    #daily .wrap .swiper-scroll {margin: 100px 0;}

    /* news */
    #news .wrap {margin: 150px auto 0;}
    #news .wrap .news {margin: 70px 20px 0;}

}

@media screen and (max-width:700px) {
    #about .wrap .about .img {padding: 4.3%;}

}

@media screen and (max-width:590px) {
    /* daily */
    #daily .wrap .swiper-scroll {margin: 80px 0;}
}