@charset "UTF-8";


/* body
------------------------------------------------- */
body {
    opacity: 0;
}


/* maintit
------------------------------------------------- */
.maintit {
    width: 100%;
    height: 100vh;
    max-height: 78.33vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.maintit h2 {
    width: 37vw;
    position: absolute;
    right: 7.85vw;
    bottom: 2.2vw;
}
@media screen and (max-width:750px){
.maintit {
    height: 160vw;
    max-height: inherit;
}
.maintit h2 {
    width: 84vw;
    right: 11vw;
    bottom: 15vw;
}
}


/* mainvisual
------------------------------------------------- */
.mainvisual {
    width: 100%;
    height: 70vw;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}
.mainvisual .main-slider {
    width: 100%;
    height: 78.33vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.mainvisual .main-slider .swiper-slide {
    width: 100%;
    height: 78.33vw;
    position: relative;
}
.mainvisual .main-slider .swiper-slide picture {
    width: 38vw;
    border-radius: 0.05rem;
    position: absolute;
    left: -2.4vw;
    top: 9.66vw;
    overflow: hidden;
    transform: rotate(4deg);
    z-index: 3;
}
.mainvisual .main-slider .swiper-slide-active picture img,
.mainvisual .main-slider .swiper-slide-prev picture img,
.mainvisual .main-slider .swiper-slide-duplicate-active picture img,
.mainvisual .main-slider .swiper-slide-duplicate-prev picture img {
	animation: zoomUp 21s linear 0s normal both;
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.3);
	}
}
.mainvisual .main-slider .swiper-slide .st0 {
    fill: none;
    stroke: #000;
    stroke-miterlimit: 10;
    stroke-width: 330px;
}
.mainvisual .main-slider .swiper-slide.main2 .st0 {
    stroke-width: 400px;
}
.mainvisual .main-slider .swiper-slide.main3 .st0 {
    stroke-width: 250px;
}
.mainvisual .main-slider .swiper-slide.main1 #mask-line1,
.mainvisual .main-slider .swiper-slide.main2 #mask-line2,
.mainvisual .main-slider .swiper-slide.main3 #mask-line3 {
    stroke-dasharray: 8500px;
    stroke: #fff;
    opacity: 0;
    transition: 0.4s;
}
.mainvisual .main-slider .swiper-slide.main1.swiper-slide-active #mask-line1,
.mainvisual .main-slider .swiper-slide.main1.swiper-slide-duplicate-active #mask-line1 {
    animation: h-written 3.5s ease 0.8s 1 forwards;
}
.mainvisual .main-slider .swiper-slide.main1 #text1 {
    mask:url(#mask-ani1);
}
.mainvisual .main-slider .swiper-slide svg {
    width: 157.833vw;
    height: 156.076vw;
    position: absolute;
    left: -20.85vw;
    top: -27.42vw;
    z-index: 1;
    transform: scale(0.8);
}
.mainvisual .main-slider .swiper-slide.main2.swiper-slide-active #mask-line2,
.mainvisual .main-slider .swiper-slide.main2.swiper-slide-duplicate-active #mask-line2 {
    animation: h-written 4s ease 0.8s 1 forwards;
}
.mainvisual .main-slider .swiper-slide.main2 #text2 {
    mask:url(#mask-ani2);
}
.mainvisual .main-slider .swiper-slide.main2 svg {
    width: 137.188vw;
    height: 135.724vw;
    left: -20.93vw;
    top: -42.82vw;
}
.mainvisual .main-slider .swiper-slide.main3.swiper-slide-active #mask-line3,
.mainvisual .main-slider .swiper-slide.main3.swiper-slide-duplicate-active #mask-line3 {
    animation: h-written 4s ease 1s 1 forwards;
}
.mainvisual .main-slider .swiper-slide.main3 #text3 {
    mask:url(#mask-ani3);
}
.mainvisual .main-slider .swiper-slide.main3 svg {
    width: 91.898vw;
    height: 90.896vw;
    left: 8vw;
    top: -9vw;
    transform: scale(0.95);
}
@keyframes h-written {
    0% {
        stroke-dashoffset: 8500px;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0px;
        opacity: 1;
    }
}
.mainvisual .movie {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
}
.mainvisual .movie video {
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.mainvisual .scroll {
    width: 1.098vw;
    height: 29.062vw;
    position: absolute;
    right: 4.831vw;
    bottom: 6.55vw;
    z-index: 2;
}
.mainvisual .scroll span {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.mainvisual .scroll span::before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #1A1A1A;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: scroll 4s infinite;
}
@keyframes scroll {
    0% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }
    50% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
    51% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }
    100% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }
}
@media screen and (max-width:750px){
.mainvisual {
    height: 160vw;
}
.mainvisual .main-slider {
    height: 160vw;
}
.mainvisual .main-slider .swiper-slide {
    height: 160vw;
}
.mainvisual .main-slider .swiper-slide picture {
    width: 84vw;
    left: -10vw;
    top: 35vw;
}
.mainvisual .main-slider .swiper-slide svg {
    width: 210vw;
    height: 207.661vw;
    left: -10vw;
    top: -35vw;
}
.mainvisual .main-slider .swiper-slide.main2 svg {
    width: 200vw;
    height: 197.865vw;
    left: -35vw;
    top: -30vw;
}
.mainvisual .main-slider .swiper-slide.main3 svg {
    width: 160vw;
    height: 158.215vw;
    left: -40vw;
    top: 5vw;
}
.mainvisual .scroll {
    width: 3.852vw;
    height: 101vw;
    right: 2.5vw;
    bottom: -58.5vw;
}
}


/* bg
------------------------------------------------- */
.bg {
    position: relative;
    z-index: 1;
}
.bg::before {
    content: '';
    width: 100%;
    height: 32vw;
    background: url("../img/top/about_bg.png") left top repeat-x;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: -25vw;
    z-index: 1;
}
.bg::after {
    content: '';
    width: 77.8vw;
    height: 96%;
    background: url("../img/common/bg.jpg") left top no-repeat;
    background-size: cover;
    border-radius: 0.2rem 0 0 0.2rem;
    opacity: 0.76;
    position: absolute;
    right: 0;
    top: 1%;
    z-index: 2;
}
@media screen and (max-width:750px){
.bg::after {
    width: 80vw;
    height: 97.25%;
    border-radius: 0.2rem 0 0 0.2rem;
    top: 0.5%;
}
}


/* about
------------------------------------------------- */
.about {
    margin-bottom: 2rem;
    position: relative;
    z-index: 3;
}
.about .headline1 {
    margin-bottom: 0.3rem;
}
.about .headline1 img {
    width: 3.83rem;
}
.about .boxwrap {
    position: relative;
}
.about .box {
    width: 5.7rem;
    background-color: #fff;
    border-radius: 0.05rem;
    box-shadow: 0 0 0.03rem rgba(0,0,0,0.16);
    padding: 0.1rem 0.18rem 0.2rem;
    box-sizing: border-box;
    z-index: 2;
    opacity: 0;
}
.about .box.isAnimate {
    animation: fadeIn 0.8s ease 0.4s 1 forwards;
}
.about .box.box2 {
    position: absolute;
    left: 5.83rem;
    top: 0;
}
.about .box a {
    display: block;
}
.about .box a h4 {
    font-size: 0.19rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding-bottom: 0.1rem;
}
.about .box a h4 span {
    font-size: 0.12rem;
    padding-right: 0.12rem;
}
.about .box a picture {
    width: 100%;
    border-radius: 0.05rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    position: relative;
}
.about .box a picture::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.4s;
}
.about .box a picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}
.about .box a h5 {
    width: 44%;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.about .box a .con {
    width: 57%;
}
.about .box a .con p {
    font-size: 0.14rem;
}
@media screen and (min-width:751px){
.about .box a:hover picture::after {
    opacity: 1;
}
.about .box a:hover picture img {
    transform: scale(1.05);
}
}
@media screen and (max-width:750px){
.about {
    margin-bottom: 1rem;
}
.about .headline1 {
    margin-bottom: 0.3rem;
}
.about .headline1 img {
    width: 43.35vw;
}
.about .box {
    width: 100%;
    padding: 0.1rem 0.2rem 0.2rem;
}
.about .box.isAnimate {
    animation: fadeIn 0.8s ease 0.4s 1 forwards;
}
.about .box.box2 {
    position: static;
    margin-top: 0.3rem;
}
.about .box a h4 {
    padding-bottom: 0.05rem;
}
.about .box a picture {
    height: auto;
    margin-bottom: 0.15rem;
}
.about .box a h5 {
    width: 100%;
}
.about .box a .con {
    width: 100%;
    margin: 0.1rem 0 0;
}
.about .box a .con p {
    line-height: 1.85;
}
}


/* interview
------------------------------------------------- */
.interview {
    height: 8.09rem;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
}
.interview .inner::before {
    content: '';
    width: 5.28rem;
    height: 0.68rem;
    background: url("../img/top/ttl2_2.svg") center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: -0.06rem;
    z-index: 2;
}
.interview .inner::after {
    content: '';
    width: 100vw;
    height: 6.66rem;
    background-color: #fff;
    border-radius: 0.5rem 0 0 0.5rem;
    position: absolute;
    left: 2.81rem;
    top: 0.31rem;
    z-index: 1;
}
.interview .headline1 {
    margin-bottom: 0.38rem;
}
.interview .headline1 img {
    width: 5.28rem;
}
.interview .infiniteslide1 {
    display: none;
    position: relative;
    z-index: 2;
}
.interview .infiniteslide1 li {
    margin-right: 0.21rem;
}
.interview .infiniteslide1 li img {
    width: auto;
    height: 4.6rem;
    border-radius: 0.05rem;
}
.interview .linkbox {
    position: relative;
}
.interview .linkbox a {
    display: block;
}
.interview .linkbox a .btn {
    width: 1.41rem;
    height: 1.41rem;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0.71rem;
    top: 3.9rem;
    overflow: hidden;
    z-index: 3;
    transition: 0.4s;
    opacity: 0;
}
.interview .linkbox a .btn span {
    letter-spacing: 0.03em;
    color: #fff;
    position: relative;
    z-index: 2;
}
.interview .linkbox a .btn::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #6E5DC1, #F25500);
    opacity: 0.54;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
@media screen and (min-width:751px){
.interview .linkbox a:hover .btn {
    opacity: 1;
}
}
@media screen and (max-width:750px){
.interview {
    height: 5rem;
}
.interview .inner::before {
    width: 59.77vw;
    height: 7.69vw;
    top: -0.03rem;
}
.interview .inner::after {
    height: 4rem;
    border-radius: 0.3rem 0 0 0.3rem;
    left: 1.4rem;
    top: 0.125rem;
}
.interview .headline1 {
    margin-bottom: 0.3rem;
}
.interview .headline1 img {
    width: 59.77vw;
}
.interview .infiniteslide1 li {
    margin-right: 0.125rem;
}
.interview .infiniteslide1 li img {
    height: 2.5rem;
}
.interview .linkbox a .btn {
    width: 1rem;
    height: 1rem;
    right: 0.15rem;
    top: 2rem;
    opacity: 1;
}
.interview .linkbox a .btn span {
    font-size: 0.14rem;
    letter-spacing: 0.02em;
}
}


/* environment
------------------------------------------------- */
.environment {
    height: 8.27rem;
    overflow-x: hidden;
    position: relative;
    z-index: 3;
}
.environment .headline1 {
    margin: 0 0 0.38rem 4.08rem;
}
.environment .headline1 img {
    width: 7.95rem;
}
.environment .infiniteslide2 {
    display: none;
    position: relative;
    z-index: 2;
}
.environment .infiniteslide2 li {
    margin-right: 0.21rem;
}
.environment .infiniteslide2 li img {
    width: auto;
    height: 4.6rem;
    border-radius: 0.05rem;
}
.environment .linkbox {
    position: relative;
}
.environment .linkbox a {
    display: block;
}
.environment .linkbox a .btn {
    width: 1.41rem;
    height: 1.41rem;
    border-radius: 50%;
    backdrop-filter: blur(10px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0.71rem;
    top: 3.9rem;
    overflow: hidden;
    z-index: 3;
    transition: 0.4s;
    opacity: 0;
}
.environment .linkbox a .btn span {
    letter-spacing: 0.03em;
    color: #fff;
    position: relative;
    z-index: 2;
}
.environment .linkbox a .btn::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #6E5DC1, #F25500);
    opacity: 0.54;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
@media screen and (min-width:751px){
.environment .linkbox a:hover .btn {
    opacity: 1;
}
}
@media screen and (max-width:750px){
.environment {
    height: 5rem;
}
.environment .headline1 {
    margin: 0 0 0.3rem;
}
.environment .headline1 img {
    width: 90vw;
}
.environment .infiniteslide2 li {
    margin-right: 0.125rem;
}
.environment .infiniteslide2 li img {
    height: 2.5rem;
}
.environment .linkbox a .btn {
    width: 1rem;
    height: 1rem;
    right: 0.15rem;
    top: 2rem;
    opacity: 1;
}
.environment .linkbox a .btn span {
    font-size: 0.14rem;
    letter-spacing: 0.02em;
}
}