@charset "utf-8";
/* CSS Document */
html,body { position: relative; height: 100%; }
.swiper {width:80%}
.swiper-slide {text-align: center;font-size: 18px;background:#090; border:#000 1px solid;display: flex;justify-content: center;align-items: center; }
@media (max-width: 760px) {
.swiper-button-next {right: 20px;transform: rotate(90deg); }
.swiper-button-prev {left: 20px;transform: rotate(90deg);}
}
.header{ background:url(../img/top/main.jpg); background-repeat:no-repeat; background-size:auto 51vw; width:100%; height:51vw; background-color:#000; background-position:center center; text-align:left; position:relative; color:#FFF; }

.control-panel{position:fixed;right:24px;bottom:24px;z-index:1000;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;width:40%;min-width:140px;max-width:400px;background:#d9d9d9;border:1px solid #d9d9d9;}
.control-panel__item{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:18px 20px;color:#fff;text-decoration:none;transition:filter .2s ease; font-weight:bold}
.control-panel__item:hover{filter:brightness(.9);}
.control-panel__item:focus-visible{outline:3px solid #fff;outline-offset:-3px;}
.control-panel__item--wide{grid-column:1 / -1;}
.control-panel__item:nth-child(1){background:linear-gradient(135deg,#FEA156,#DF372D);}
.control-panel__item:nth-child(2){background:#00559E;padding-top:28px;padding-bottom:28px;}
.control-panel__item:nth-child(3){background:#FEA156;}
.control-panel__item:nth-child(4){background:#DF372D;}
.control-panel__item:nth-child(3) , .control-panel__item:nth-child(4){flex-direction:column;justify-content:center;gap:10px;padding:20px 10px;text-align:center;}
.control-panel__icon{flex-shrink:0;width:24px;height:24px;object-fit:contain;}
.control-panel__item:nth-child(1) .control-panel__icon,.control-panel__item:nth-child(2) .control-panel__icon{width:50px;height:auto;}
.control-panel__item:nth-child(3) .control-panel__icon,.control-panel__item:nth-child(4) .control-panel__icon{width:28px;height:auto;}
.control-panel__ttl{font-size:clamp(0.875rem, 0.5rem + 1.1vw, 1.875rem);line-height:1.4;letter-spacing:.1em;}
.control-panel__tel{font-size:clamp(0.75rem, 0.6rem + 0.7vw, 1.625rem);line-height:1.3;letter-spacing:.4em; color:#000; font-family:"syncopate"}
.control-panel__box{display:flex;flex-direction:column;}
.control-panel__item:nth-child(2) span{font-size:clamp(0.6rem, 0.6rem + 0.8vw, 1.875rem);line-height:1.4;letter-spacing:.1em;}
.control-panel__item:nth-child(3) span, .control-panel__item:nth-child(4) span{text-align:center;font-size:clamp(0.6rem, 0.4rem + 0.8vw, 1.875rem);line-height:1.2;}
.control-panel.is-hidden{opacity:0;pointer-events:none;}
@media only screen and (max-width: 1024px) {
.control-panel__item:nth-child(1) .control-panel__icon,.control-panel__item:nth-child(2) .control-panel__icon{width:30px;height:auto;}
}
@media only screen and (max-width:768px) {
.control-panel{right:0;bottom:0;}
.control-panel__item{padding:10px;}
.control-panel__item:nth-child(3) , .control-panel__item:nth-child(4){padding:10px;}
.control-panel__tel{letter-spacing:.0em;}
.fixtab{ font-size:10px !important; line-height:12px;}
}
@media only screen and (max-width:450px) {
.control-panel__item:nth-child(1){justify-content:center;}
.control-panel__item:nth-child(1) .control-panel__icon { display:none;}
}
.bnr_ekichika{ position:absolute; bottom:10px; left:10px; width:40%; max-width:517px}
.fixtab{ writing-mode:vertical-rl; color:#FFF; font-size:14px; line-height:0.8; position:fixed; right:0; padding:10px; z-index:1000}
.fixtab--1{ background-color:#00698C;  top:100px; }
.fixtab--2{ background-color:#396; right:0; top:200px; }

.second{ background:url(../img/top/second.jpg); background-repeat:no-repeat; background-size:cover; width:100%; height:54vw; color:#FFF; text-align:left; position:relative; margin:100px 0 }
.secondttl{ font-family:"syncopate"; line-height:70px;font-size:55px;margin:0 10vw; padding-top:5vw; font-weight:bold}
.second p{margin:5vw 10vw;}
.second a{margin:5vw 10vw; width:100%; max-width:300px}

h2{ font-size:55px; line-height:100px; margin:5vw 10vw; }
h3{ font-size:55px; line-height:100px; margin:100px 0 50px 0;  }
h5{ font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:70px; line-height:100px; margin:60px 0; padding:0}
h6{ font-size:45px; line-height:70px; margin:0;  }

article{ padding-bottom:30px; text-align:left;}
.copy{margin:5vw 10vw;}
.subcopy{margin:300px 10vw; text-align:center}.subcopy img{ margin-bottom:5vw}
p{padding:0;font-size:22px; line-height:40px }
.subttl{ font-size:38px; font-weight:bold }
.subcap{ font-size:25px; display:block; margin-left:20px}
.top{ margin:0 0 120px 0 !important; display:flex; width:100%;justify-content: space-between; align-items: center; flex-flow: row wrap; }
.top div{ width:60% !important; text-align:left; margin:0 !important; padding:0 0 0 60px !important; }
.top img{ width:40%; }
.bnr{ width:80%; margin:5vw auto}
.bnr a{ width:20%; padding:10px}

@media print, screen and (max-width:1450px){
h4{ padding:40px 0 0 0; margin:0; }
}
@media only screen and (max-width: 1024px) {
h2{ font-size:35px; line-height:50px;}
h3{ font-size:35px; line-height:50px;  }
p{font-size:14px; line-height:30px; padding:0}
.subttl{ font-size:22px }
.subcap{ font-size:15px;}
h6{ font-size:30px; line-height:40px; }
.secondttl{ line-height:40px;font-size:35px;}
.bnr{ width:90%}
.bnr a{ width:33%}
.header{ background-size:auto 60vw; height:60vw;}
}
@media print, screen and (max-width: 768px){
article{margin:40px;}
h2{ font-size:30px; line-height:40px;}
h3{ font-size:20px; line-height:30px; margin:30px 0 30px 0 }
p{font-size:14px; line-height:20px;}
.top{ margin:30px 0 !important; }
.top div, .top img{ width:100% !important; padding:20px !important;}
h5{ margin:30px 0;font-size:40px; line-height:60px;}
.bnr a{ width:50%}
.secondttl{ margin:20px 0 0 0; font-size:25px; line-height:30px;}
.second p{margin:20px 0; max-width:450px;}
.second { margin:0 0 60px 0 !important; padding:0 0 0 50px; height:400px}
.second a{ max-width:250px; margin:0 !important}
h6{ font-size:20px; line-height:30px; margin:0 0 20px 0;  }
.header{ background-size:auto 80vw; height:80vw;}
.topmenu ul{width:100%; }
.topmenu ul li{ width:33%; font-size:14px}
.subcopy{margin:100px 10vw;}
.top1{  flex-wrap: wrap-reverse;}
}
@media print, screen and (max-width: 360px){
.second a{max-width:100%; width:100%; margin:0;  padding:10px; }
.topmenu{ bottom:0; }
.topmenu ul{padding:10px;}
.topmenu ul li{ font-size:10px}
.topmenu ul li:nth-child(2){ border-left:1px #FFFFFF solid;border-right:1px #FFFFFF solid;}
h2{ font-size:20px; line-height:30px; margin:20px; }
h3{ font-size:16px; line-height:30px; margin:30px 0 }
.line_h4{ padding:60px 0 }
.second{ padding:0 0 0 20px; margin:70px 0 !important}
.top{ margin:0 !important; padding:0 !important}
p{font-size:12px; line-height:20px }

}
.fade1{opacity:0;transform:translateY(20px);transition:.7s;transition-delay:.5s;}
.fade-in1{opacity:1;transform:translateY(0);}
.fade2{opacity:0;transition:opacity 3s;transition-delay:.5s;}
.fade-in2{opacity:1;}
.fade3{opacity:0;transform:translateX(20px);transition:.7s;transition-delay:1s;}
.fade-in3{opacity:1;transform:translateX(0);}
.fade4{opacity:0;transform:translateX(-20px);transition:.7s;transition-delay:1s;}
.fade-in4{opacity:1;transform:translateX(0);}
.sample_box{width:300px;margin:0 auto;overflow:hidden;}
.sample_box img{transition:transform 1s;}
.sample_box img:hover{transform:scale(1.2);}

@-webkit-keyframes slideInDown{
from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible;}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}

@keyframes slideInDown{
from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible;}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}

.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;}