/* ******************************************************************************
共通
****************************************************************************** */
.spOnly {display: none;}
.pcOnly {display: block;}
#main{font-size:1em;line-height:1.65}
#main img {vertical-align: bottom;}
#main .main-content{color: #4a4a4a;overflow: hidden;padding: 0;line-height:inherit;font-weight: 400;}
.ef--fade, .ef--top, .ef--bottom, .ef--right, .ef--left {transition-property: transform,opacity;
transition-timing-function: ease-out;transition-duration: .6s;}
.ef--fade{opacity:0}
.ef--fade.is-play{opacity:1}
.ef--top{transform:translateY(-50px);}
.ef--top.is-play{transform:translateY(0);opacity:1}
.ef--bottom{transform:translateY(50px);opacity:0}
.ef--bottom.is-play{transform:translateY(0);opacity:1}
.ef--right{transform:translateX(50px);opacity:0}
.ef--right.is-play{transform:translateX(0);opacity:1}
.ef--left{transform:translateX(-50px);opacity:0}
.ef--left.is-play{transform:translateX(0);opacity:1}
.ef--delay-1{transition-delay:.2s}
.ef--delay-2{transition-delay:.4s}
.ef--delay-3{transition-delay:.6s}
.ef--delay-4{transition-delay:.8s}
@media print,screen and (max-width:767px){
#main .container{padding-right:30px;padding-left:30px}
.spOnly {display: block;}
.pcOnly {display: none;}
}
/* ******************************************************************************
hover
****************************************************************************** */
#main .h-scale .h-scale__img{overflow: hidden;}
#main .h-scale img {-webkit-transition: .5s;transition: .5s;overflow: hidden;}
#main .b-shadow{box-shadow: 0 10px 26px 0 rgb(0 0 0 / 13%);}

@media print, screen and (min-width: 768px){
#main .h-scale:hover{text-decoration: none;}
#main .h-scale:hover img {-webkit-transform: scale(1.1);transform: scale(1.1);}
}

/* ******************************************************************************
swiper
****************************************************************************** */
#main .slide-action{position: relative;display: flex;}
#main .swiper-button-prev, .swiper-button-next{position:relative;background-image:none; border-radius: 50%;width: 74px;height: 74px;box-shadow: 0 10px 26px 0 rgb(0 0 0 / 20%);}
#main .swiper-button-next {left: 20px;}
#main .swiper-button-prev {left: 0;}
#main .swiper-button-prev, .swiper-button-next {background: -moz-linear-gradient(130deg, #066cc7, #2aa4ba);background: -webkit-linear-gradient(130deg, #066cc7, #2aa4ba);background: linear-gradient(130deg, #066cc7, #2aa4ba);}
#main .swiper-button-prev span, #main .swiper-button-next span{position: relative;display: block;width: 100%;height: 100%;border-radius: 50%;}
#main .swiper-button-prev span::after, #main .swiper-button-next span::after{content: "";width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;z-index: -1;opacity: 1;transition: .3s;border-radius: 50%;background:#fff;}
#main .swiper-button-next::before{content:"";margin: auto;position: absolute;top: 0;bottom: 0;left: calc(50% - 4px);width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);}
#main .swiper-button-next::after {content: "";margin: auto;position: absolute;top: 0;bottom: 0;left: 29px;width: 11px;height: 2px;background: #fff;}
#main .swiper-button-prev::before{content: "";margin: auto;position: absolute;top: 0;bottom: 0;left: calc(50% - 4px);width: 8px;height: 8px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(-135deg);}
#main .swiper-button-prev::after {content: "";margin: auto;position: absolute;top: 0;bottom: 0;right: 29px;width: 11px;height: 2px;background: #fff;}
#main .swiper-button-next::before{border-top: 2px solid #0571c8;border-right: 2px solid #0571c8;}
#main .swiper-button-next::after {background: #0571c8;}
#main .swiper-button-prev::before{border-top: 2px solid #0571c8;border-right: 2px solid #0571c8;}
#main .swiper-button-prev::after {background: #0571c8;}
@media print,screen and (min-width:768px){
#main .swiper-button-prev:hover span:after, #main .swiper-button-next:hover span::after{opacity: 0;}
#main .swiper-button-prev:hover::before{border-top: 2px solid #fff;border-right: 2px solid #fff;}
#main .swiper-button-next:hover::before{border-top: 2px solid #fff;border-right: 2px solid #fff;}
#main .swiper-button-prev:hover::after{background: #fff}
#main .swiper-button-next:hover::after{background: #fff;}
}

/* ******************************************************************************
main-visual
****************************************************************************** */
#main .main-visual {display: block;}
#main .main-visual .main-visual__inner{position: relative;max-width: 1200px;margin: 0 auto;height: 100%;}