@charset "utf-8";
/* Common */
@font-face {
    font-family: "HelveticaNeueBlack";
    src: url("../font/HelveticaNeueBlack.otf");
}
@font-face {
    font-family: "HelveticaNeueBold";
    src: url("../font/HelveticaNeueBold.otf");
}
@font-face {
    font-family: "HelveticaNeueRoman";
    src: url("../font/HelveticaNeueRoman.otf");
}
@font-face {
    font-family: "HelveticaNeueHeavy";
    src: url("../font/HelveticaNeueHeavy.otf");
}
@font-face {
    font-family: "HelveticaNeueMedium";
    src: url("../font/HelveticaNeueMedium.otf");
}
@font-face {
    font-family: "HelveticaNeueThin";
    src: url("../font/HelveticaNeueThin.otf");
}
html{scroll-padding-top: 92px;}

.container{max-width: 992px; width: calc(100% - 40px); margin: 0 auto;}
.container-1020{max-width: 1020px;width: calc(100% - 40px); margin: 0 auto;}

.txt-link{color: #f00; text-decoration: underline; text-underline-offset: 0.2em;}
.txt-link:hover{text-decoration: none;}

.cap{font-size: 1.2rem; line-height: 1.75;}

.logo-top{display: block;}
.lower-page .logo-top{display: none;}
.logo-lw{display: none;}
.lower-page .logo-lw{display: block;}

.lower-page .menu a{color: #BB111A;}
.lower-page .header-btn a{background: #fff;border: 1px solid #BB111A;}
.lower-page .header.is-scroll{background: rgba(255, 255, 255, 0.72);box-shadow: 0 0 4px #ccc;
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
 }
@media screen and (max-width: 768px){
	.cap{font-size: 1rem;}    
    .anchor > div{position: absolute; top: -60px;}
html{scroll-padding-top: 60px;}

}

/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; height: 92px; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 7%;transition: background-color 0.4s ease;}
.header.is-scroll{background: rgba(190, 0, 20, 0.72);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(90, 0, 10, 0.12);}
h1.logo{line-height: 1;}

.header-wrap{display: flex; align-items: center;gap: 40px;}

.header-btn{width: 113px;}
.header-btn a{font-family: "HelveticaNeueMedium";width: 100%; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; line-height: 1.3; border-radius: 65px; background: #fff;  transition:all .4s;color: #BB111A;}
.header-btn p{margin: 0 3px 0 0;}
.header-btn span{display: block; font-size: 1.7rem;}
.header-btn figure{mix-blend-mode: multiply;}

.header-btn a:hover{box-shadow: none; background: #3B3B3B;color: #fff;border-color: transparent;}

.menu{display: flex;gap: 64px;}
.menu a{font-size: 1.6rem;  color: #fff; transition: .4s; font-family: "HelveticaNeueMedium";position: relative;}
.menu a::after{content: "";width: 0%;height: 3px;background: #fff;position: absolute;bottom: -5px;left: 0;transition: all 0.3s;}
/* .menu a:hover{color: #BB111A;} */
.menu a:hover::after,
.menu a.active::after{width: 100%;}
.btn-menu{display: none;}
.lower-page .menu a::after{background: #BB111A;}
@media (min-width: 769px){
.header.is-scroll .menu a::after{background:#fff;}
.header.is-scroll .header-btn a:hover{background: #3B3B3B;color: #fff;}
.lower-page .header.is-scroll .menu a::after{background:#BB111A;}
.lower-page  .header.is-scroll .header-btn a:hover{background: #3B3B3B;color: #fff;border-color: transparent;}

}
@media (min-width: 769px) and (max-width: 992px){ 
    .header{padding: 0 20px;}

 }
@media screen and (max-width: 768px){    
    .header{padding: 0 20px;}
    .header-btn p{width: 100%;text-align: center;}
    .btn-menu{width: 32px; height: 21px; position: relative; display: block; cursor: pointer;}
    .btn-menu span{display: block; position: absolute; left: 0; width: 100%; height: 1px; background: #fff; transition: .4s;}
    .btn-menu span:nth-of-type(1){top: 5px;}
    .btn-menu span:nth-of-type(2){top: 15px;width: 20px;}
    /* .btn-menu span:nth-of-type(3){top: 20px;} */
    .menu a::after{background: #BB111A;}
    .btn-menu.is-open span:nth-of-type(1){top: 10px; transform: rotate(45deg);}
    /* .btn-menu.is-open span:nth-of-type(2){display: none;} */
    .btn-menu.is-open span:nth-of-type(2){top: 10px; transform: rotate(-45deg);width: 32px;}
    
    .header-wrap{display: block; position: fixed; top: 83px; bottom: 0; left: 0; width: 100%; z-index: 90; background:#fff ; opacity: 0; visibility: hidden; pointer-events: none; overflow: auto; transition: .6s;}
    .header-wrap.is-open{opacity: 1; visibility: visible; pointer-events: auto;height: 100vh;}
    .header-wrap.is-open .menu a{color: #BB111A;font-size: 1.6rem;}
    .menu{width: 80%; max-width: 360px; margin: 0 auto; display: block; padding: 40px 0 20px;}
    .menu li{margin: 0 0 20px;}
    
    .header-btn{width: 80%; max-width: 360px; margin: 0 auto 100px;}
    .header-btn a{width: 100%; height: 50px;border: 1px solid #BB111A;  line-height: 1.6; justify-content: space-between; padding: 0 5.5%;}
    .header-btn span{font-size: 16px;}
    .header-btn figure{width: 55px;}
    .header-btn figure img{width: 100%;}
    .header.is-open{background: #BB111A;}

    .lower-page .btn-menu span{background: #BB111A;}
    .lower-page .header.is-open{background: #fff;}
   .lower-page .header-wrap.is-open{border-top: 1px solid #BB111A;}

}

@media screen and (max-width: 768px){    
    .header{height: 60px;}
    
    h1.logo{width: 151px;}
    
    .header-wrap{top: 59px;}
}

/* Main */
.m-btn a{font-size: 2.6rem; line-height: 1.2; font-weight: bold; text-align: center; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 450px; height: 75px; display: flex; justify-content: center; align-content: center; align-items: center; color: #000; background: #EEEE17; border-radius: 5px; box-shadow: 0px 5px 0px 0px #A7A729; transition: .4s;}
.m-btn a:after{content: ""; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; margin: 0 0 0 10px; position: relative; top: 2px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.m-btn.big a{height: 98px; box-shadow: 0px 8px 0px 0px #A7A729;}

.m-btn a[data-color="blue"]{background: #007AD7; color: #fff; box-shadow: 0px 5px 0px 0px #97DAFF;}
.m-btn a[data-color="blue"]:after{border: solid white; border-width: 0 2px 2px 0;}
.m-btn a[data-color="white"]{background: #fff; box-shadow: 0px 5px 0px 0px #D9D9D9;}

.m-btn a:hover{box-shadow: 0px 0px 10px 0px rgba(0,0,0,.4); transform: translateY(3px);}

@media screen and (max-width: 768px){
    .m-btn a{font-size: 2rem; height: 62px;}
    .m-btn a:after{padding: 4px; top: 1px;}
    .m-btn.big a{height: 76px; box-shadow: 0px 5px 0px 0px #A7A729;}
}

/* Pagetop */
#pagetop{ position: fixed; right: 20px; bottom: 390px; z-index: 50; text-align: center;  overflow: hidden; transition: .4s; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px);}
#pagetop span{display: flex;flex-direction: column;align-items: center;justify-content: center; font-size: 1rem; color: #BB111A;font-weight: 400;}
#pagetop span img{margin-bottom: -10px;transition: all 0.4s;}
#pagetop:hover img{margin-bottom: -5px;}
#pagetop.is-show{opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: .6s;}



.footer{padding: 90px 0 15px;background: #BB111A;color: #fff;position: relative;}
.footer .container{display: block;justify-content: space-between;}
.footer .container .cnt .contact-txt span{font-size: min(5vw,5.6rem);font-family: "HelveticaNeueThin" ,sans-serif;line-height: 1;margin: 0 0 5px;letter-spacing: 0.03em;display: block;}
.footer .container .cnt {display: flex;gap: 27px;border-bottom: 1px solid #fff;width: fit-content;padding: 0 0 30px;align-items: flex-end;}
.footer .container .cnt  .cnt-icon{width: min(9vw,96px);height: min(9vw,96px);display: flex;justify-content: center;align-items: center;  backdrop-filter: blur(32px) brightness(1.15);border-radius: 50%;margin: 0 0 14px;}

.footer .logo-ft{text-align: right;}
.footer .copy-r{font-size: 1rem;margin: 30px 0 0;}
.footer .cnt .cnt-icon{transition: all 0.3s;}
.footer .cnt:hover .cnt-icon{transform: rotate(45deg);}


@media screen and (max-width: 768px){
    .footer .container .cnt{width: 100%;gap: 65px;align-items: center;padding: 0 0 20px;}
    .footer .container .cnt .contact-txt span{font-size: 4.8rem;margin: 0 0 5px;}
    .footer .container .cnt  .cnt-icon{width: 86px;height: 86px;}
    .footer .logo-ft{margin: 100px 0 0;}
    #pagetop{ bottom: 470px;}

}
.lower-page .footer {padding: 78px 0 20px;}
.lower-page .footer .container .cnt {display: none;}
.lower-page #pagetop {bottom: 250px; }
@media screen and (max-width: 768px){
    .lower-page .footer .logo-ft{margin-top: 0;}
}




@keyframes bound{
    0%{opacity: 0; transform: translateY(50%) scale(1.2, .8);}
    40%{opacity: 1; transform: translateY(-10%);}
    70%{opacity: 1; transform: translateY(5%) scale(1.2, .8);}
    100%{opacity: 1; transform: none;}
}

/* Animate */
@media screen{
    .fade-in{opacity: 0; transition: 1s cubic-bezier(.33, 1, .68, 1);}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(30px); transition: 1s cubic-bezier(.33, 1, .68, 1);}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}

    .fade-right{opacity: 0; transform: translateX(-30px); transition: 1s cubic-bezier(.33, 1, .68, 1);}
    .fade-right.is-view{opacity: 1; transform: translateX(0);}
    
    .fade-left{opacity: 0; transform: translateX(30px); transition: 1s cubic-bezier(.33, 1, .68, 1);}
    .fade-left.is-view{opacity: 1; transform: translateX(0);}
    
    .bound{opacity: 0;}
    .bound.is-view{animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 1s + 0s);}
    
    .js-splitText span{display: inline-block; opacity: 0;}
    .js-splitText.is-view span:nth-of-type(1){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 1s + 0s);}
    .js-splitText.is-view span:nth-of-type(2){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 2s + 0s);}
    .js-splitText.is-view span:nth-of-type(3){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 3s + 0s);}
    .js-splitText.is-view span:nth-of-type(4){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 4s + 0s);}
    .js-splitText.is-view span:nth-of-type(5){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 5s + 0s);}
    .js-splitText.is-view span:nth-of-type(6){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 6s + 0s);}
    .js-splitText.is-view span:nth-of-type(7){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 7s + 0s);}
    .js-splitText.is-view span:nth-of-type(8){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 8s + 0s);}
    .js-splitText.is-view span:nth-of-type(9){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 9s + 0s);}
    .js-splitText.is-view span:nth-of-type(10){animation: bound .6s cubic-bezier(.33, 1, .68, 1) forwards calc(.06 * 10s + 0s);}
}
/* Modal */
.modal-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%;
backdrop-filter: blur(30px) brightness(0.85); z-index: 9990; display: none;}
.modal-wrap{padding: 0; margin: 0 auto; max-width: 656px; width: 100%;height: 86vh;  overflow: auto;
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 9995; display: none;}
.modal-close{background: rgba(0,0,0,.3); color: #fff; position: absolute; display: flex;align-items: center;justify-content: center;  border-radius: 50%; line-height: 1.5; width: 62px;height: 62px; cursor: pointer; transition: .5s;position: absolute;top: 13px;right: 20px;}
.modal-close img{width: 20px;height: 20px;}
/* .modal-close:after{content: ''; position: absolute; top: 50%; right: 20px; margin-top: -4px; border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} */
.modal-close:hover{backdrop-filter: blur(1px) brightness(0.69);background: rgba(190, 0, 20, 0.72);}

.modal-profile{padding: 80px;background:#000000;color: #fff;}
.modal-profile .name{font-size: 2.4rem; font-family: "HelveticaNeueRoman" ,sans-serif; line-height: 1;}
.modal-profile .sub-name{font-size: 1.6rem;font-family: "HelveticaNeueRoman" ,sans-serif; line-height: 1.3; margin: 10px 0 30px;padding: 0 0 30px;border-bottom: 1px solid #404040;}
.modal-profile ul{font-weight: 500;font-size: 1.3rem;padding: 0 0 30px;margin: 0 0 30px;border-bottom: 1px solid #404040;}
.modal-profile ul li p:not(:last-child){margin: 0 0 30px;}
.modal-profile .desc{line-height: 2;font-size: 1.5rem;}

@media (max-width: 768px){
    .modal-wrap{padding: 30px 20px;background: transparent;}
    .modal-close{position: fixed;z-index: 10000;margin: 0;width: 48px;height: 48px;top: 95px;right: 30px;}
    .modal-profile{padding: 80px 20px;}
    .modal-close img{width: 15px;height: 15px;}
}
