@charset "utf-8";
/* Zoom */
@media screen and (min-width: 1100px){
    html.zoom-110{zoom: 0.95;}
    html.zoom-125{zoom: 0.9;}
    html.zoom-150{zoom: 0.85;}
    html.zoom-175{zoom: 0.8;}
    html.zoom-200{zoom: 0.75;}
}

/* Common */
.container{max-width: 1000px; width: calc(100% - 40px); margin: 0 auto;}

.clr-red{color: #e60012;}
.disable{pointer-events: none;}

.ex-link{text-decoration: underline; text-underline-offset: 0.25em; color: #f39800;}
.ex-link::after{content: ""; width: 16px; height: 16px; background: url("../img/common/ic-open_orange.png") no-repeat top left/100% 100%; display: inline-block; margin: 0 0 0 8px; position: relative; top: 1px;}
.ex-link:hover{text-decoration: none;}

.txt-link{text-decoration: underline; text-underline-offset: 0.25em; color: #f39800;}
.txt-link:hover{text-decoration: none;}

i.ic-arrow{width: 1em; height: 1em; border-radius: 50%; background: #e60012; display: flex; justify-content: center; align-items: center; letter-spacing: 0;}
i.ic-arrow::after{content: ""; border: solid white; border-width: 0 1.5px 1.5px 0; display: inline-block; padding: 2px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); line-height: 1; position: relative; top: 0.02em; left: -0.05em;}

i.ic-arrow[data-color="white"]{background: #fff;}
i.ic-arrow[data-color="white"]::after{border: solid #e60012; border-width: 0 1.5px 1.5px 0;}

.caption{font-size: 1.6rem; line-height: 1.7;}
ul.caption li{margin-left: 1em; text-indent: -1em;}

@media screen and (max-width: 768px){
    .caption{font-size: 1.2rem;}
}

.anchor{position: relative;}
.anchor > div{position: absolute; left: 0;}

@media screen and (min-width: 769px){
    .anchor > div{top: -100px;}
}

@media screen and (max-width: 768px){
    .anchor > div{top: -70px;}
}

/* Header */
.header{position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #fff;}

@media screen and (min-width: 769px){
    body{padding-top: 100px;}

    .header{height: 100px; padding: 10px 20px 0;}
    .header-wrap{width: 100%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 100;}
}

@media screen and (max-width: 768px){
    body{padding-top: 70px;}
	
    .header-wrap{display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 10px;}
    .header-inner{position: fixed; top: 70px; bottom: 0; left: 0; width: 100%; background: #fff; z-index: 100; padding: 0 20px; overflow: scroll;
    opacity: 0; visibility: hidden; pointer-events: none; transition: .3s; border-top: 2px solid #e60012;}
    .header.is-open .header-inner{opacity: 1; visibility: visible; pointer-events: auto;}
}

/* Logo */
h1.logo{display: flex; align-items: center;}
h1.logo{margin: 0 0 10px;}
h1.logo a{width: 144px; display: block; line-height: 1;}
h1.logo span{font-size: min(1.5vw,1.4rem); line-height: 1.5; letter-spacing: 0.075em; font-weight: bold; margin: 0 0 0 20px;}

@media screen and (max-width: 768px){
    h1.logo{width: calc(100% - 50px); margin: 0;}
    h1.logo a{max-width: 144px; width: 45vw;}
	h1.logo span{font-size: min(2.6vw,1.2rem); margin: 0 0 0 10px;}
}

/* Btn Menu */
@media screen and (min-width: 769px){
    .btn-menu{display: none;}
}

@media screen and (max-width: 768px){
	.btn-menu{width: 40px; height: 40px; background: #e60012; border-radius: 5px; position: relative; cursor: pointer;}
    .btn-menu span{display: block; position: absolute; width: 24px; left: 8px; height: 2px; background: #fff; transition: transform .3s;}
    .btn-menu span:nth-of-type(1){top: 11px;}
    .btn-menu span:nth-of-type(2){top: 19px;}
    .btn-menu span:nth-of-type(3){top: 27px;}

    .header.is-open .btn-menu span:nth-of-type(1){top: 19px; transform: rotate(45deg); -webkit-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: 19px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
}

/* Header Btn */
.header-btn{display: flex;}
.header-btn a{height: 32px; border-radius: 20px; display: flex; justify-content: center; align-items: center; line-height: 1; font-size: min(1.8vw,1.8rem); font-weight: bold; color: #fff; padding: 0 1.5em;}
.header-btn a::before{content: ""; display: block; margin: 0 10px 0 0;}

.header-btn_mail a{background: #e60012; border: 1px solid #e60012;}
.header-btn_mail a::before{width: 23px; height: 18px; background: url("../img/common/ic-mail_white.png") no-repeat top left/100% 100%;}

/* .header-btn_lang a{background: #000; border: 1px solid #000;}
.header-btn_lang a::before{width: 20px; height: 20px; background: url("../img/common/ic-lang_white.png") no-repeat top left/100% 100%;} */

@media screen and (min-width: 769px){
	.header-btn{position: absolute; top: 5px; right: 0;}
    /* .header-btn li:not(:last-of-type){margin-right: 10px;} */
    .header-btn a{transition: .2s;}
    
    .header-btn_mail a:hover{background: #fff; color: #e60012;}
    .header-btn_mail a:hover::before{background: url("../img/common/ic-mail_red.png") no-repeat top left/100% 100%;}
    
    /* .header-btn_lang{width: min(80px,10vw);}
    .header-btn_lang a:hover{background: #fff; color: #000;}
    .header-btn_lang a:hover::before{background: url("../img/common/ic-lang_black.png") no-repeat top left/100% 100%;} */
}

@media screen and (max-width: 768px){
	.header-btn{padding: 30px 0 20px;}
    .header-btn li{width: 100%;}
    .header-btn a{height: 40px; font-size: 1.6rem;}
}

/* Menu PC */
@media screen and (min-width: 769px){
    .menu{display: flex; justify-content: space-between; max-width: 1000px; width: 100%; margin: 0 auto;}
    .menu > li{width: 16%; padding: 0 0 10px;}
    .menu > li.menu-item1{width: 20%;}
    .menu > li.menu-item4{width: 28%;}
    .menu > li.menu-item5{width: 13%;}

    .menu > li > a{width: 100%; height: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; text-align: center; border: 1px solid #e60012; border-radius: 20px; font-size: min(1.75vw,1.6rem); line-height: 1.1; color: #e60012; font-weight: bold; transition: 0.2s; cursor: pointer;}
    .menu > li > a.is-active,
    .menu > li > a:hover{background: #e60012; color: #fff;}
    .menu-parent i.ic-arrow{display: none;}

    .menu > li > a.disable{color: #999; border: 1px solid #999;}

    .menu-child{position: absolute; top: 90px; left: 50%; width: 100vw; transform: translateX(-50%); background: #e60012; color: #fff;
    font-size: min(1.9vw,1.8rem); font-weight: bold; line-height: 1.9; opacity: 0; visibility: hidden; pointer-events: none; transition: .5s;}

    .menu > li:hover .menu-child{opacity: 1; visibility: visible; pointer-events: auto;}

    .menu-child_inner{width: calc(100% - 40px); max-width: 900px; margin: 0 auto; padding: 10px 0;}    
    .menu-child a{display: flex; align-items: center;}
    .menu-child i.ic-arrow{margin: 0 0 0 0.5em; position: relative; top: 1px; background: #fff;}
    .menu-child i.ic-arrow::after{border: solid #e60012; border-width: 0 1px 1px 0;}

    .menu-child a:hover{color: #fdd000;}
    .menu-child a:hover i.ic-arrow{background: #fdd000;}   

    .menu-child_tit{font-size: min(1.75vw,1.6rem); line-height: 1; margin: 0 0 8px; border-bottom: 1px solid #fff; padding: 0 0 8px;}
    .menu-child_list{margin: 0 0 10px;}
    .menu-child_list2{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
    .menu-child_list2.line-bot{border-bottom: 1px solid #fff; margin: 0 0 8px; padding: 0 0 8px;}
    .menu-child_list3{display: flex; justify-content: center;}

    .menu-item1 .menu-child_list2 i.ic-arrow{margin: 0;}   
}

/* Menu SP */
@media screen and (max-width: 768px){
    .menu{padding: 0 0 30px;}
    .menu > li{margin: 0 0 20px; background: #e60012; border-radius: 20px; overflow: hidden;}
    
    .menu > li> a{width: 100%; border: 1px solid #e60012; border-radius: 20px; font-size: 1.6rem; line-height: 1.1; color: #e60012; font-weight: bold; padding: 10px 20px; display: block; background: #fff; position: relative;}
    .menu i.ic-arrow{position: absolute; top: 50%; right: 10px; margin-top: -8px;}
    
    .menu a.menu-parent{-webkit-tap-highlight-color: transparent;}
    .menu a.menu-parent i.ic-arrow{transform: rotate(90deg); transition: .3s;}
    .menu li.is-open a.menu-parent i.ic-arrow{transform: rotate(-90deg);}
    
    .menu > li > a.is-active{background: #e60012; color: #fff;}
    .menu > li > a.is-active i.ic-arrow{background: #fff;}
    .menu > li > a.is-active i.ic-arrow::after{border: solid #e60012; border-width: 0 1.5px 1.5px 0;}

    .menu >li > a.disable{color: #999; border: 1px solid #999;}
    .menu >li > a.disable i.ic-arrow{background: #999;}

    .menu-child{color: #fff; font-size: 1.6rem; font-weight: bold; line-height: 1.625; padding: 15px 20px 5px; display: none;}
    .menu-child li{margin: 0 0 10px;}
    .menu-child a{display: inline-block; position: relative; padding-right: 35px;}
    .menu-child i.ic-arrow{background: #fff; }
    .menu-child i.ic-arrow::after{border: solid #e60012; border-width: 0 1px 1px 0;}
    .menu li.is-open .menu-child{display: block;}
    
    .menu-child_list2.line-bot{border-bottom: 1px solid #fff; margin: 0 0 10px;}

    .menu-child_tit{font-size: 1.4rem; line-height: 1; margin: 0 0 8px; border-bottom: 1px solid #fff; padding: 0 0 10px;}
}

/* Main */
.main{padding: 0 0 50px;}

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

.m-group{margin: 0 0 80px;}
.m-group.last{margin: 0;}
.m-gline:not(:last-of-type){margin: 0 0 50px; padding: 0 0 50px; border-bottom: 3px solid #e60012;}

@media screen and (max-width: 768px){
	.m-group{margin: 0 0 50px;}
}

/* M Title */
.m-tit{font-size: 2.7rem; line-height: 1.2; font-weight: bold; letter-spacing: 0.1em; color: #e60012; text-align: center; margin: 0 0 30px;}
.m-tit.is-line{border-top: 2px solid #e60012; border-bottom: 2px solid #e60012; padding: 16px 0; margin: 0 0 20px;}
.m-tit.is-left{text-align: left;}
.m-tit span{font-size: 1.8rem;}

@media screen and (max-width: 768px){
    .m-tit{font-size: 2.2rem; margin: 0 0 20px;}
    .m-tit.is-line{padding: 13px 0;}
    .m-tit span{font-size: 1.4rem;}
}

.m-tit2{font-size: 2.4rem; line-height: 1.36; position: relative; padding: 0 0 0 1em; margin: 0 0 7px;}
.m-tit2::before{content: "■"; color: #e60012; position: absolute; top: 0; left: 0;}
.m-tit2 span{font-size: 1.8rem; margin: 0 0 0 10px; display: inline-block;}

@media screen and (max-width: 768px){
    .m-tit2{font-size: 2rem;}
    .m-tit2 span{font-size: 1.5rem; display: block; margin: 3px 0 0 0;}
}

.m-titNum{display: flex; align-items: center; margin: 0 0 20px;}
.m-titNum figure{min-width: 47px; width: 47px; line-height: 1; margin: 0 15px 0 0;}
.m-titNum h3{font-size: 2.7rem; line-height: 1.2; font-weight: bold; letter-spacing: 0.1em;}
.m-titNum h3 span{font-size: 1.6rem; display: inline-block; margin: 0 0 0 10px; letter-spacing: 0.05em;}

@media screen and (max-width: 768px){
    .m-titNum figure{min-width: 42px; width: 42px;}
    .m-titNum h3{font-size: 2.2rem;}
    .m-titNum h3 span{font-size: 1.2rem; margin: 5px 0 0 0; display: block;}
}

/* Swiper */
@media screen and (max-width: 768px) {
    .swipe{text-align: center; font-size: 1.4rem; margin:0 0 2rem; display: flex; justify-content: center; align-items: center; gap: 1rem;}
}

/* Button */
.m-btn a{max-width: 500px; margin: 0 auto; font-size: 2.5rem; font-weight: 900; line-height: 1.2; color: #fff; position: relative; background: #e60012; border-radius: 40px; text-align: center; box-shadow: 0 5px 0 #a8000d; display: block; transition: .3s; height: 60px; display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap;}
.m-btn a[data-color="yellow"]{background: #ffcb00; box-shadow: 0 5px 0 #e38b00; color: #000;}
.m-btn a:hover{box-shadow: none; transform: translateY(5px);}
.m-btn a.disable{background: #999; box-shadow: 0 5px 0 #666;}

@media screen and (max-width: 768px) {
    .m-btn a{font-size: min(5.5vw, 2rem); line-height: 1.25; box-shadow: 0 4px 0 #a8000d;}
}

/* Button Download */
.btn-download a{width: 100%; max-width: 700px; margin: 0 auto; font-size: 2.5rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1.2; position: relative; background: #ffcb00; border-radius: 40px; text-align: center; box-shadow: 0 5px 0 #e38b00; display: block; transition: .3s; height: 60px; display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap;}
.btn-download a::after{content: ""; width: 20px; height: 20px; background: url("../img/common/ic-download_black.png") no-repeat top left/100% 100%; display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.btn-download a:hover{box-shadow: none; transform: translateY(5px);}

@media screen and (max-width: 768px){
    .btn-download a{max-width: 560px; font-size: min(5.5vw,2rem); line-height: 1.25; padding: 0 20px 0 0; box-shadow: 0 4px 0 #e38b00;}    
}

/* Hero */
.hero{width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; background: url("../img/common/hero.jpg") no-repeat center center/cover; color: #fff; margin: 0 0 80px;}
.hero-tit{font-size: 4.2rem; line-height: 1.2; font-weight: 900; letter-spacing: 0.2em; text-shadow: 0 0 10px #e60012, 0 0 20px #e60012;
transform-origin: center; text-align: center;
opacity: 0; transform: scale(1.5); will-change: opacity, transform; transition: opacity 1s, transform .6s;}
.hero-tit span{display: block; font-size: 2rem; letter-spacing: 0.2em; margin: 0.7em 0 0 0;}
.hero.is-view .hero-tit{opacity: 1; transform: scale(1);}

@media screen and (max-width: 768px){
    .hero{height: 160px; margin: 0 0 50px;}
	.hero-tit{font-size: min(3rem,7.5vw); letter-spacing: 0.1em;}
    .hero-tit span{font-size: min(1.4rem,3.5vw);}
}

/* Footer */
.footer-bnr{padding: 80px 20px;}
.footer-bnr ul{max-width: 1000px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
.footer-bnr li{width: 24%; line-height: 1;}
.footer-bnr a:hover{opacity: .8;}

@media screen and (max-width: 768px){
	.footer-bnr{padding: 50px 20px 40px;}    
    .footer-bnr li{width: calc(50% - 5px); margin-bottom: 10px; text-align: center;}
    .footer-bnr li img{width: 100%;}
}

@media screen and (min-width: 769px){
    .footer-bot{border-top: 5px solid #e60012; padding: 50px 20px 30px;}	
    .footer-wrap{width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
    
    .footer-nav > li{margin: 0 0 25px;}

    .footer-item{width: 48%;}
    .footer-item:nth-of-type(2) .footer-nav > li:nth-of-type(1){margin: 0 0 45px;}
}

@media screen and (min-width: 1080px){
    .footer-item:nth-of-type(1){width: 22%;}
    .footer-item:nth-of-type(2){width: 19%;}
    .footer-item:nth-of-type(3){width: 23%;}
    .footer-item:nth-of-type(4){width: 25%;}
}

.footer-nav > li > a{font-size: 1.8rem; font-weight: bold; line-height: 1.875; border-bottom: 1px solid #e60012; display: block; position: relative; padding: 4px 1em 4px 0; letter-spacing: 0.075em;}

.footer-nav a[href]:hover{color: #e60012;}

.footer-nav i{position: absolute; top: 50%; right: 0; transform: translateY(-50%);}

.footer-nav_child{margin: 10px 0 0 0;}
.footer-nav_child a{font-size: 1.6rem; line-height: 2.14; display: inline-block; font-weight: 500;}

.footer-nav a.disable{color: #999;}
.footer-nav a.disable i{background: #999;}

@media screen and (max-width: 768px){
	.footer-bot{border-top: 3px solid #e60012; padding: 20px;}
    .footer-nav > li{margin: 0 0 10px;}

    .footer-nav > li > a{font-size: 1.6rem;}
    .footer-nav_child a{font-size: 1.4rem;}
}

.copyright{font-size: min(2.6vw,1.2rem); line-height: 1.4; background: #000; color: #fff; font-weight: 400; letter-spacing: 0.05em; padding: 12px 0; text-align: center;}

/* Page Top */
#pagetop{width: 50px; height: 50px; border-radius: 50%; background: #000; position: fixed; bottom: 60px; right: 20px; z-index: 50; cursor: pointer; transition: .3s; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(30px);}
#pagetop::after{content: ""; border: solid white; border-width: 0 3px 3px 0; display: inline-block; padding: 6px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); position: absolute; top: 21px; left: 17px;}
#pagetop.is-show{opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0);}
#pagetop:hover{background: #e60012;}

@media screen and (max-width: 768px){
    #pagetop{right: 10px; bottom: 50px; width: 40px; height: 40px;}
    #pagetop::after{top: 16px; left: 14px; border: solid white; border-width: 0 2px 2px 0; padding: 5px;}
}

/* Modal */
.js-modal{cursor: pointer;}

.modal{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.4); display: none;}
.modal.is-show{display: flex; justify-content: center; align-items: center;}

.modal-wrap{max-width: 1000px; width: calc(100% - 40px); max-height: calc(100vh - 40px); padding: min(5vw,50px); margin: 0 auto; background: #fff; position: relative; overflow-y: scroll; box-shadow: 0 0 10px rgba(0,0,0,0.3);}

.modal-close{width: 150px; margin: 50px auto 0; text-align: center; background: #000; color: #fff; font-weight: 500; letter-spacing: 0.1em; line-height: 1.1; box-shadow: 5px 5px 0 #666666; border-radius: 40px; transition: .3s; padding: 9px 0; cursor: pointer;}
.modal-close:hover{box-shadow: none; transform: translateY(5px);}

@media screen and (max-width: 768px){
    .modal-wrap{padding: 20px 20px 30px; max-height: 80vh;}
    .modal-close{margin: 30px auto 0; box-shadow: 3px 4px 0 #666666;}
}

.modal-btn{padding: 20px 0 0 0;}
.modal-btn a{font-size: 2.2rem; line-height: 1.1; font-weight: bold; letter-spacing: 0.1em; background: #e60012; color: #fff; max-width: 500px; width: 100%; margin: 0 auto; position: relative; border-radius: 50px; box-shadow: 5px 5px 0 #a8000d; transition: .3s; text-align: center; display: block; padding: 13px 0;}
.modal-btn a i{position: absolute; top: 50%; right: 30px; transform: translateY(-50%);}
.modal-btn a:hover{box-shadow: none; transform: translateY(5px);}

@media screen and (max-width: 768px){
    .modal-btn{padding: 10px 0 0 0;}
    .modal-btn a{font-size: 1.8rem; box-shadow: 3px 4px 0 #a8000d; padding: 12px 30px;}
    .modal-btn a i{right: 13px;}
}

.modal-info .date{background: #e60012; color: #fff; padding: 5px 0; letter-spacing: 0.05em; width: 6.7em; text-align: center; line-height: 1; margin: 0 0 10px;}
.modal-info .tit{font-size: 2.4rem; line-height: 1.6; font-weight: bold; margin: 0 0 30px;}
.modal-info .desc{line-height: 2;}
.modal-info .desc p{margin: 0 0 30px;}
.modal-info .desc a{text-decoration: underline; color: #e60012;}
.modal-info .desc a:hover{text-decoration: none;}

@media screen and (max-width: 768px){
    .modal-info .tit{font-size: 2rem; margin: 0 0 20px;}
    .modal-info .desc p{margin: 0 0 20px;}    
}

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