/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

body{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%;}
html{overflow-y: scroll; font-size: 14px; color: #333; line-height: 1.7; word-spacing: 0;
font-family: 'Noto Sans JP', sans-serif;}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
caption, th{text-align: left; font-weight: normal;}
a{color: inherit; text-decoration: none;}
img{vertical-align: bottom; max-width: 100%;}

input, 
textarea,
select,
option,
optgroup,
button{-webkit-appearance: none; border-radius: 0; outline: none;}

a[href^="tel:"]{pointer-events: none;}
.content{margin: 0 auto; max-width: 1080px; width: 94%;}
.sp{display: none;}
.clearFix:after{display:block; clear:both; height:0; visibility:hidden; content:"."; zoom:1;}  


/* Header
========================================*/
header{padding: 0 20px; display: flex; justify-content: space-between; align-items: center;}
h1{padding: 18px 0; line-height: 1; width: 487px;}
#btn-menu{display: none; width: 13.02%;}

#header-right{text-align: right;}
#header-btn{display: flex; justify-content: flex-end; align-items: center; margin: 0 0 14px;}
#header-btn li{margin-left: 8px;}
#header-btn li:nth-of-type(1){color: #828282; margin: 0 12px 0 0;}
#header-btn li:nth-of-type(1) a:after{content: ''; background: url("../../images/common/ic_link.png") no-repeat top left/100% auto; width: 16px; height: 16px; display: inline-block; margin: 0 0 0 5px; transform: translateY(2px);}
#header-btn li:nth-of-type(1):hover{color: #f3741a;}
#header-btn li:nth-of-type(1):hover a:after{background: url("../../images/common/ic_link_over.png") no-repeat top left/100% auto;}

#header-btn li:nth-of-type(2){width: 40px;}
#header-btn li:nth-of-type(2):hover{opacity: .8;}

#header-btn li:nth-of-type(3),
#header-btn li:nth-of-type(4),
#header-btn li:nth-of-type(5){width: 180px; color: #fff; font-size: 17px; border-radius: 5px; overflow: hidden; text-align: center; font-weight: 500;}
#header-btn li:nth-of-type(3) a,
#header-btn li:nth-of-type(4) a,
#header-btn li:nth-of-type(5) a{display: block; padding: 5px 0 0 0; height: 40px;}

#header-btn li:nth-of-type(3){background: #eb2222;display: none!important;}
#header-btn li:nth-of-type(4){background: #2796ec;display: none!important;}
#header-btn li:nth-of-type(5){background: #fa9929;}

#header-btn li:nth-of-type(3):hover,
#header-btn li:nth-of-type(4):hover,
#header-btn li:nth-of-type(5):hover{background: #f3741a;}

#gnav{display: flex;}
#gnav li{padding: 0 14px; position: relative; line-height: 1.2;}
#gnav li:after{content: ''; background: #d6d6d6; width: 1px; height: 100%; display: inline-block; position: absolute; top: 0; right: 0;}
#gnav li:last-of-type{padding-right: 0;}
#gnav li:last-of-type:after{display: none;}
#gnav li a:hover,
#gnav li.active a{color :#f3741a;}
#gnav li.un a{opacity: .3; color: inherit;}
#gnav li:nth-of-type(4),
#gnav li:nth-of-type(7){display:none;}


/* Main
========================================*/
.main{position: relative;}
.main .tit_en{letter-spacing: 0.25em; font-weight: 600; font-family: 'Poppins', sans-serif;}
.main .tit_en:before{content: ''; width: 12px; height: 2px; margin: 0 14px 0 0; display: inline-block; vertical-align: middle; background: #e96f19;}

#mv{height: 234px; margin: 0 0 100px; text-align: center; color: #fff; background: #f3741a url("../../images/common/mv_bg.jpg") no-repeat bottom right; display: flex; width: 100%; justify-content: center; align-items: center;}
#mv h2{letter-spacing: 0.25em; font-weight: 600; font-family: 'Poppins', sans-serif;}
#mv h2:before{content: ''; width: 12px; height: 2px; margin: 0 14px 0 0; display: inline-block; vertical-align: middle; background: #fff;}
#mv h2 span{font-size: 34px; letter-spacing: 0; line-height: 2.1; font-family: 'Noto Sans JP', sans-serif; display: block;}
#mv h2.noEng:before{display: none;}

.main-txt{font-size: 24px; text-align: center;}

.main h3{font-size: 29px; line-height: 1.5; font-weight: bold; border-bottom: 2px solid #f3741a; padding: 0 0 20px; margin: 0 0 30px 0;}

.main h3.title{letter-spacing: 0.25em; font-weight: 600; font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.7; margin: 0 0 20px; padding: 0; border: none;}
.main h3.title:before{content: ''; width: 12px; height: 2px; margin: 0 14px 0 0; display: inline-block; vertical-align: middle; background: #e96f19;}
.main h3.title span{font-size: 28px; letter-spacing: 0; line-height: 2; font-family: 'Noto Sans JP', sans-serif; display: block;}

/*#contact{padding: 140px 0;}
#contact .tit{font-size: 28px; line-height: 2; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; display: block; margin: 0 0 20px;}
#contact-box{border: 2px solid #f5f5f5; border-radius: 10px; padding: 20px 28px 25px;}
#contact-txt{font-size: 22px; font-weight: 600; margin: 0 0 15px;}
#contact-txt span{color: #f3741a;}

#contact-btn{display: flex; justify-content: space-between; flex-wrap: wrap;}
#contact-btn a{display: block; background: #f5f5f5; border-radius: 10px; text-align: center; padding: 15px 0; width: 49%;}
#contact-btn a.tel span:nth-of-type(1){font-size: 30px; line-height: 1.4; font-weight: 600;}
#contact-btn a.tel span:nth-of-type(1):before{content: ''; width: 19px; height: 25px; display: inline-block; margin: 0 8px 0 0; background: url("../../images/common/ic_tel.png") no-repeat center left/100% auto;}
#contact-btn a.tel span:nth-of-type(2){display: block;}
#contact-btn a.mail{font-size: 24px; font-weight: 600;}
#contact-btn a.mail span{padding: 10px 0 0 0; display: inline-block;}
#contact-btn a.mail span:before{content: ''; width: 26px; height: 20px; display: inline-block; margin: 0 10px 0 0; background: url("../../images/common/ic_mail.png") no-repeat center left/100% auto;}
#contact-btn a.mail:hover{background: #eee;}*/
#contact{padding: 140px 0;}
#contact .tit{font-size: 28px; line-height: 2; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; display: block; margin: 0 0 40px;}
#contact .box{border: 2px solid #f5f5f5; border-radius: 10px; padding: 25px 28px; display: flex; justify-content: space-between;}
#contact .box-left{width: 52%;}
#contact .box-left .txt{font-size: 22px; font-weight: 600; margin: 0 0 10px;}
#contact .box-left .txt span{color: #f3741a;}
#contact .box-left .txt2{font-size: 18px; margin: 0 0 4px;}
#contact .box-right{width: 44%;}
#contact .box-right a{display: block; background: #f5f5f5; border-radius: 10px; text-align: center; padding: 15px 0;}
#contact .box-right a.tel{margin: 0 0 10px;}
#contact .box-right a.tel span:nth-of-type(1){font-size: 30px; line-height: 1.4; font-weight: 600;}
#contact .box-right a.tel span:nth-of-type(1):before{content: ''; width: 19px; height: 25px; display: inline-block; margin: 0 8px 0 0; background: url("../../images/common/ic_tel.png") no-repeat center left/100% auto;}
#contact .box-right a.tel span:nth-of-type(2){display: block;}
#contact .box-right a.mail{font-size: 24px; font-weight: 600;}
#contact .box-right a.mail span:before{content: ''; width: 26px; height: 20px; display: inline-block; margin: 0 10px 0 0; background: url("../../images/common/ic_mail.png") no-repeat center left/100% auto;}
#contact .box-right a.mail:hover{background: #eee;}

#pagetop{position: fixed; width: 60px; right: 20px; bottom: 20px; cursor: pointer;}
#pagetop:hover{opacity: .8;}

#btnsp{display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9990; background: #2797ed;display:none!important;}
#btnsp a{width: 50%; display: block; line-height: 1; text-align: center;margin: 0 auto;}
#btnsp img{width: 100%;}
#btnsp a:nth-of-type(1) {display:none!important;}


/* Footer
=======================================*/
footer{background: #f3741a; color: #fff; padding: 20px; font-size: 12px; display: flex; align-items: center; position: relative;}
footer .logo{width: 374px; line-height: 1; margin: 0 70px 0 0;}
footer #link{display: flex;}
footer #link a{margin: 0 25px 0 0;}
footer #link a:before{content: ''; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); margin: 0 12px 0 0;}
footer #link a.active,
footer #link a:hover{text-decoration: underline;}
footer ul{position: absolute; top: 50%; right: 20px; display: flex; align-items: center; transform: translateY(-50%);}
footer li:nth-of-type(1){margin: 0 28px 0 0;}
footer li:nth-of-type(2){width: 82px;}


/* ============== Media =============== */
@media only screen and (max-width: 1650px){
    h1{width: 30%;}
    #header-right{font-size: 0.9vw;}
    #gnav li{padding: 0 0.4vw;}
}

@media only screen and (max-width: 1366px){
    #header-btn{margin: 0 0 10px;}
    #pagetop{width: 4.5vw;}
    
    footer .logo{width: 240px; margin: 0 30px 0 0;}
    footer li:nth-of-type(1){margin: 0 15px 0 0;}
}

@media only screen and (max-width: 1100px){
    #header-btn{margin: 0 0 10px;}
    #header-btn li:nth-of-type(2){width: 24px;}
    #header-btn li:nth-of-type(3), 
    #header-btn li:nth-of-type(4),
    #header-btn li:nth-of-type(5){width: 13vw; font-size: 1.3vw;}
    #header-btn li:nth-of-type(3) a, 
    #header-btn li:nth-of-type(4) a,
    #header-btn li:nth-of-type(5) a{height: 24px; padding: 0; line-height: 24px;}
}

@media only screen and (max-width: 1000px){        
    #contact-btn a.mail{font-size: 23px;}
        
    footer{flex-wrap: wrap;}
    footer ul{position: static; width: 100%; transform: translateY(0); display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 10px 0 0 0;}
	
	#contact .box-right a.mail{font-size: 2.4vw;}
    #contact .box-right a.mail span:before{width: 22px; height: 17px;}
}

@media only screen and (max-width: 768px){
    html{font-size: 3vw;}
    a[href^="tel:"]{pointer-events: auto;}
    .content{width: 90%;}
    .sp{display: block;}
    .pc{display: none;}
    br.sp{line-height: 0;}
    
    header{padding: 0; justify-content: flex-end; position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 9999;}
    h1{width: 55%; position: absolute; top: 3vw; left: 2.5vw; padding: 0;}
    #btn-menu{display: block;}
    
    #header-right{position: absolute; top: 12.8vw; left: 0; width: 100%; display: none; flex-wrap: wrap; background: #fff; z-index: 9999; font-size: 3vw; text-align: center;}
    
    #header-btn{position: static; order: 1; width: 100%; padding: 4.2vw 0; margin: 0; justify-content: center; border-bottom: 1px solid #ccc;}    
    #header-btn li:nth-of-type(1){margin: 0 5vw 0 0;}
    #header-btn li:nth-of-type(1) a:after{width: 3.51vw; height: 3.51vw; margin: 0 0 0 2vw;}
    #header-btn li:nth-of-type(2){width: 9.11%; margin: 0;}
    #header-btn li:nth-of-type(3), 
    #header-btn li:nth-of-type(4){display: none;}
    
    #gnav{width: 100%; flex-wrap: wrap; margin: 0; border-top: 1px solid #ccc;}
    #gnav li{width: 50%; border-bottom: 1px solid #ccc; padding: 0;}
    #gnav li:after{background: #ccc;}
    #gnav li a{padding: 4.2vw 0; display: block;}
          
    .main{margin-top: 12.8vw;}
    .main .tit_en{font-size: 3.5vw;}
    .main .tit_en:before{width: 3vw; height: 0.4vw; margin: 0 3vw 0 0;}    
    
    #mv{height: 35vw; background-size: 50% auto; margin: 0 0 15vw;}
    #mv h2{font-size: 3.5vw;}
    #mv h2:before{width: 3vw; height: 0.4vw; margin: 0 3vw 0 0;}
    #mv h2 span{font-size: 6vw; line-height: 1.7;}
    
    .main-txt{font-size: 5vw;}
    .main h3{font-size: 5.6vw; padding: 0 0 3.5vw; margin: 0 0 5vw;}
    .main h3.title{font-size: 3.5vw; margin: 0 0 5vw;}
    .main h3.title span{font-size: 5.6vw;}    
    
    /*#contact{padding: 20vw 0 28vw;}    
    #contact .tit{font-size: 5.5vw; margin: 0 0 3vw;}
    #contact-box{padding: 5vw 6vw 6vw; flex-wrap: wrap;}
    #contact-txt{font-size: 4.5vw; margin: 0 0 3vw;}    
    #contact-btn{flex-wrap: wrap;}
    #contact-btn a{padding: 3vw 0; width: 100%;}
    #contact-btn a.tel{margin: 0 0 3vw;}
    #contact-btn a.tel span:nth-of-type(1){font-size: 6vw;}
    #contact-btn a.tel span:nth-of-type(1):before{width: 4.2vw; height: 5.6vw; margin: 0 2vw 0 0; transform: translateY(0.5vw);}
    #contact-btn a.tel span:nth-of-type(2){font-size: 3.5vw;}
    #contact-btn a.mail{font-size: 4.6vw;}
    #contact-btn a.mail span{padding: 2vw 0;}
    #contact-btn a.mail span:before{width: 5.1vw; height: 4vw;}*/
	#contact{padding: 20vw 0 28vw;}    
    #contact .tit{font-size: 5.5vw; margin: 0 0 5vw;}
    #contact .box{padding: 5vw 6vw 6vw; flex-wrap: wrap;}
    #contact .box-left{width: 100%; margin: 0 0 5vw;}
    #contact .box-left .txt{font-size: 5vw; margin: 0 0 1vw;}
    #contact .box-left .txt2{font-size: 4vw; margin: 0 0 2vw;}
    #contact .box-right{width: 100%;}
    #contact .box-right a{padding: 3vw 0;}
    #contact .box-right a.tel{margin: 0 0 3vw;}
    #contact .box-right a.tel span:nth-of-type(1){font-size: 6vw;}
    #contact .box-right a.tel span:nth-of-type(1):before{width: 4.2vw; height: 5.6vw; margin: 0 2vw 0 0; transform: translateY(0.5vw);}
    #contact .box-right a.tel span:nth-of-type(2){font-size: 3.5vw;}
    #contact .box-right a.mail{font-size: 4.6vw;}
    #contact .box-right a.mail span:before{width: 5.1vw; height: 4vw;}
    
    #pagetop{position: absolute !important; width: 11.7vw; right: 5vw; bottom: 5vw;}
    
    #btnsp{display: flex;}
        
    footer{padding: 6vw 5vw 7vw; font-size: 2.6vw; margin-bottom: 12vw;}
    footer .logo{width: 62%; margin: 0 0 3.5vw;}
    footer #link{width: 100%; margin: 0 0 5vw;}
    footer #link a{margin: 0 5vw 0 0;}
    footer #link a:before{padding: 0.5vw; margin: 0 2vw 0 0;}
    footer ul{justify-content: flex-start;}
    footer li:nth-of-type(1){margin: 0 0 2vw; width: 100%;}
    footer li:nth-of-type(2){width: 18%;}
    
    #lowerpage footer{margin-bottom: 10vw;}
    #lowerpage #btnsp a{width: 44.239%;}
    #lowerpage #btnsp a:nth-of-type(3){width: 11.522%;}
}

/* Landscape */
@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape){
    #header-right{font-size: 3.5vh;}
    
    #gnav li a{padding: 3vh 0;}
    
    #header-btn{padding: 3vh 0;}
    #header-btn li:nth-of-type(2){width: 10vh;}
}


/* ============== Animate =============== */
.inview{
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

.fadeIn{
    opacity: 0;
}
.is-view.fadeIn{
    opacity: 1;
}

.fadeInUp{
    opacity: 0; 
    transform: translateY(20px);
    filter: blur(20px);
    filter: brightness(110%);
}
.is-view.fadeInUp{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    filter: brightness(100%);
}

.fadeInDown{
    opacity: 0;
    transform: translateY(-20px);
    filter: blur(20px);
    filter: brightness(110%);
}
.is-view.fadeInDown{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    filter: brightness(100%);
}

.fadeInLeft{
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(20px);
    filter: brightness(110%);
}
.is-view.fadeInLeft{
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    filter: brightness(100%);
}

.fadeInRight{
    opacity: 0;
    transform: translateX(20px);
    filter: blur(20px);
    filter: brightness(110%);
}
.is-view.fadeInRight{
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    filter: brightness(100%);
}

/* Animate Text */
.splitText span{
    opacity: 0;
    display: inline-block; 
    transition: all 1s cubic-bezier(0.445, 0.050, 0.550, 0.950);
}
.is-view.splitText span{
    opacity: 1;
}

.fadeTextIn span{
    opacity: 0;
}
.is-view.fadeTextIn span{        
    opacity: 1;
}

.TextZoomOut{
    opacity: 0;
    transform: scale(1.1, 1.1);
    filter: blur(2px) brightness(105%);
}
.is-view.TextZoomOut{    
    opacity: 1;
    transform: scale(1,1);    
    filter: blur(0) brightness(100%);
}

.fadeTextZoomIn{
    opacity: 0;
    transform: scale(.6, .6);
    filter: blur(20px) brightness(150%);
}
.is-view.fadeTextZoomIn{    
    opacity: 1;
    transform: scale(1,1);    
    filter: blur(0) brightness(100%);
}