@charset "utf-8";
/* Common */
.container{max-width: 1100px; width: calc(100% - 40px); margin: 0 auto;}
.container1300{max-width: 1300px; width: calc(100% - 40px); margin: 0 auto;}

/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; height: 130px; z-index: 100;}

.lowerpage{padding-top: 130px;}
.lowerpage .header{background: #141414;}

.homepage .header.is-scroll{background: #141414; transition: .4s;}

@media screen and (max-width: 768px){
    .header{height: 80px;}
    body{padding-top: 80px !important;}
}

h1.logo{width: 246px; z-index: 100; text-align: center; line-height: 1; margin: 20px 25px;}
h1.logo span{font-size: 1.7rem; margin: 10px 0 0 0; letter-spacing: 0.1em; display: block;}

@media screen and (max-width: 768px){
    h1.logo{width: 168px; margin: 10px 15px;}
    h1.logo span{font-size: 1.2rem; margin: 7px 0 0 0;}
}

.btn-menu{position: fixed; top: 35px; right: 30px; width: 49px; height: 21px; z-index: 120; cursor: pointer;}
.btn-menu span{width: 100%; height: 1px; background: #fff; display: block; position: absolute; left: 0; transition: .4s;}
.btn-menu span:nth-of-type(1){top: 0;}
.btn-menu span:nth-of-type(2){top: 10px;}
.btn-menu span:nth-of-type(3){top: 20px;}

.header.is-open .btn-menu span:nth-of-type(1){top: 10px; transform: rotate(45deg);}
.header.is-open .btn-menu span:nth-of-type(2){opacity: 0;}
.header.is-open .btn-menu span:nth-of-type(3){top: 10px; transform: rotate(-45deg);}

@media screen and (min-width: 1200px){
    .btn-menu:hover span:nth-of-type(1){width: 33.33%;}
    .btn-menu:hover span:nth-of-type(2){width: 66.66%;}
    .header.is-open .btn-menu span{width: 100%;}
}

@media screen and (max-width: 768px){
    .btn-menu{right: 15px; top: 30px;}
}

.menu{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 110; background: #141414 url("../img/common/menu-bg.svg") no-repeat top 45px center/1066px 1066px; color: #fff; overflow: auto; opacity: 0; pointer-events: none; visibility: hidden; transition: .5s;}
.header.is-open .menu{opacity: 1; pointer-events: auto; visibility: visible;}

.menu-logo{margin: 170px 0 80px; text-align: center; line-height: 1; opacity: 0; transition: 1s ease .5s;}
.menu-logo span{font-size: 2.4rem; margin: 13px 0 0 0; letter-spacing: 0.1em; display: block;}
.header.is-open .menu-logo{opacity: 1;}

.menu-list{display: flex; justify-content: center; flex-wrap: wrap; padding: 0 0 30px; opacity: 0; transform: translateY(30px); transition: 1s ease .5s;}
.header.is-open .menu-list{opacity: 1; transform: translateY(0);}

.menu-list ul{margin: 0 min(4vw,40px);}
.menu-list li{margin: 0 0 30px;}
.menu-list a{display: block; padding: 0 0 0 22px; position: relative; font-size: 2rem; line-height: 1.6;}
.menu-list a::before{content: ""; position: absolute; top: 8px; left: 0; width: 8px; height: 15px; background: #fff;
mask: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%; -webkit-mask: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%;}
.menu-list a:hover,
.menu-list a.is-active{color: #aca449;}
.menu-list a:hover::before,
.menu-list a.is-active::before{background: #aca449;}

@media screen and (max-width: 768px){
    .menu{background-position: top 55px center;}
    .menu-logo{margin: 100px auto 40px; width: 252px;}
    .menu-logo span{font-size: 1.8rem; margin: 10px 0 0 0;}
    
    .menu-list{max-width: 360px; display: block; margin: 0 auto; width: 90%;}
	.menu-list ul{margin: 0;}
    .menu-list li{margin: 0 0 20px;}
    .menu-list a{font-size: min(5.2vw,2rem);}
}

/* Main */
.main{padding: 0 0 150px;}
.main.spaceT{padding-top: 60px;}

@media screen and (max-width: 768px){
    .main{padding: 0 0 80px;}
}

/* Hero */
.hero{margin: 0 0 75px;}
.hero img{width: 100%;}

@media screen and (max-width: 768px){
    .hero{height: 60vw; margin: 0 0 50px;}
	.hero img{height: 100%; object-fit: cover; object-position: center;}
}

/* Title */
.m-title{font-size: 3rem; line-height: 1.5; text-align: center; margin: 0 0 40px;}
.m-desc{text-align: center; margin: 0 0 110px}

@media screen and (max-width: 768px){
    .m-title{font-size: 2.6rem; margin: 0 0 20px;}
    .m-desc{text-align: left; margin: 0 0 60px;}
}

/* Btn More */
[class*="btn-more"]{margin: 15px 0 0 0;}
[class*="btn-more"] a{font-size: 1.6rem; line-height: 1.3; letter-spacing: 0.15em; width: 150px; height: 35px; display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 1;}
[class*="btn-more"] a::before{content: ""; width: 35px; height: 35px; background: rgba(255, 255, 255, 0.40); display: block; border-radius: 100%; margin: 0 7px 0 0; position: absolute; top: 0; left: 0; z-index: -1; transition: .4s;}
[class*="btn-more"] a span{width: 130px; border-bottom: 1px solid #fff; text-align: right; transition: .4s;}

[class*="btn-more"].is-center a{margin: 0 auto;}

.btn-moreB{margin: min(5vw,70px) 0 0 0;}
.btn-moreB a{font-size: 2rem; width: 225px; height: 72px;}
.btn-moreB a::before{width: 72px; height: 72px;}
.btn-moreB a span{width: 186px;}

@media screen and (min-width: 769px){
    [class*="btn-more"] a:hover{color: #000;}
    [class*="btn-more"] a:hover::before{width: 100%; border-radius: 35px; background: #fff;}
    [class*="btn-more"] a:hover span{border-bottom: none; width: 100%; text-align: center;}
    [class*="btn-more"] a:hover span::after{content: ""; background: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%; width: 8px; height: 15px; display: inline-block; position: relative; top: 3px; margin: 0 0 0 6px; transition: .4s;}
}

@media screen and (max-width: 768px){
    .btn-moreB{margin: 30px 0 0 0;}
    .btn-moreB a{font-size: 1.8rem; width: 203px; height: 64px;}
    .btn-moreB a::before{width: 64px; height: 64px;}
    .btn-moreB a span{width: 168px;}
}

/* Btn Back */
.btn-back{margin: 80px 0 0;}
.btn-back a{font-size: 1.6rem; line-height: 1.3; letter-spacing: 0.15em; width: 150px; height: 35px; display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 1; margin: 0 auto;}
.btn-back a::before{content: ""; width: 35px; height: 35px; background: rgba(255, 255, 255, 0.40); display: block; border-radius: 100%; margin: 0 7px 0 0; position: absolute; top: 0; left: 0; z-index: -1; transition: .4s;}
.btn-back a span{width: 130px; border-bottom: 1px solid #fff; text-align: right; transition: .4s;}

@media screen and (min-width: 769px){
    .btn-back a:hover{color: #000;}
    .btn-back a:hover::before{width: 100%; border-radius: 35px; background: #fff;}
    .btn-back a:hover span{border-bottom: none; width: 100%; text-align: center;}
    .btn-back a:hover span::before{content: ""; background: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%; width: 8px; height: 15px; display: inline-block; position: relative; top: 3px; margin: 0 10px 0 0; transition: .4s; transform: rotateY(-180deg);}
}

@media screen and (max-width: 768px){
    .btn-back{margin: 60px 0 0;}
}

/* Footer */
.footer{background: #fff; color: #000; padding: 60px 0 0 0;}
.footer-wrap{max-width: 1000px; margin: 0 auto; width: calc(100% - 40px);}
.footer-logo{text-align: center; border-bottom: 1px solid #B3B3B3; padding: 0 0 25px; margin: 0 0 50px; line-height: 1;}
.footer-logo span{font-size: 2rem; letter-spacing: 0.1em; display: block; line-height: 1; margin: 20px 0 0 0;}

.footer-nav{letter-spacing: 0.1em; line-height: 1.7; padding: 0 0 20px;}
.footer-nav_item > li{margin: 0 0 20px;}
.footer-nav_item a{position: relative; display: block; padding: 0 0 0 20px;}
.footer-nav_item a::before{content: ""; position: absolute; top: 6px; left: 0; width: 8px; height: 15px; background: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%;}
.footer-nav_item sup{font-size: 2rem; display: inline-block; line-height: 1; position: relative; top: 0.3em;}
.footer-nav_child{padding: 15px 0 0 30px;}
.footer-nav_note{font-size: 1.2rem; padding: 0 0 0 16px;}

.footer-nav a.disable{pointer-events: none;}
.footer-nav a:hover{text-decoration: underline; text-underline-offset: 0.25em;}

.copyright{text-align: center; font-size: 1rem; line-height: 1.5; padding: 16px 0; background: #141414; color: #fff; letter-spacing: 1px;}

@media screen and (min-width: 769px){    
    .footer-nav{display: flex; justify-content: center;}
    .footer-nav_item:nth-of-type(1){margin: 0 min(7vw,70px) 0 0;}
}

@media screen and (max-width: 768px){
    .footer{padding: 30px 0 0 0;}
    .footer-logo{margin: 0 0 30px;}
    
    .footer-nav_child{padding: 5px 0 0 22px;}
}

/* Pagetop */
#pagetop{position: fixed; bottom: 20px; right: 20px; background: #000; width: 50px; height: 50px; border-radius: 100%; z-index: 60; cursor: pointer; transition: .3s; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(50%);}
#pagetop::after{content: ""; background: #fff; width: 12px; height: 23px; display: block; transform: rotate(-90deg); line-height: 1;
mask: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%; -webkit-mask: url("../img/common/ic-arrow.svg") no-repeat center center/100% 100%; margin: 10px 0 0 20px;}
#pagetop.is-show{opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);}

@media screen and (min-width: 769px){
    #pagetop:hover{background: #fff;}
    #pagetop:hover::after{background: #000;}
}

@media screen and (max-width: 768px){
    #pagetop{bottom: 10px; right: 10px;}
}

/* Animate */
@media screen{
    .fade-in{opacity: 0; transition: 1s ease;}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(50px); transition: 1s ease;}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}

    .fade-right{opacity: 0; transform: translateX(-50px); transition: 1s ease;}
    .fade-right.is-view{opacity: 1; transform: translateX(0);}
    
    .zoom-in{opacity: 0; transform: scale(1.1); transition: 1.2s ease; transform-origin: center;}
    .zoom-in.is-view{opacity: 1; transform: scale(1);}
    
    .zoom-img{overflow: hidden;}
    .zoom-img img{transform: scale(1.1); transition: 1.5s ease; transform-origin: center;}
    .zoom-img.is-view img{transform: scale(1);}
    
    .roll-left{position: relative; overflow: hidden; line-height: 1;}
    .roll-left img{opacity: 0; transform: translateX(-10%); transition: 1s ease;}
    .roll-left::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #141414; z-index: 1; transition: 1s ease; will-change: transform; display: block; transform-origin: left;}
    .roll-left.is-view::before{width: 0;}
    .roll-left.is-view img{opacity: 1; transform: translateX(0);}
    
    .roll-right{position: relative; overflow: hidden;}
    .roll-right img{opacity: 0; transform: translateX(-10%); transition: 1s ease;}
    .roll-right::before{content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #141414; z-index: 1; transition: 1s ease; will-change: transform; display: block; transform-origin: right;}
    .roll-right.is-view::before{width: 0;}
    .roll-right.is-view img{opacity: 1; transform: translateX(0);}
}