@charset "UTF-8";


/* ===== メインビジュアル ===== */
.main-visual {
    position: relative;
    width: 100%;
    margin: 0 auto 0%;
    overflow: hidden;
    background-color: #eee;
}
.mySwiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
.mySwiper .swiper-pagination-bullet {
    background: #000;
    opacity: 0.3;
}
.mySwiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}
.mySwiper .swiper-pagination {
    bottom: 1% !important;
}

/* ===== Replayボタン ===== */
.mv-replay {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: 3%;
    right: 2%;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0.4em 1.1em;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.7rem, 1vw, 0.8rem); /* PC：少し大きく */
    letter-spacing: 0.06em;
    cursor: pointer;
    transition:
        opacity 3s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}
.mv-replay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.mv-replay:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-color: rgba(255, 255, 255, 0.9);
}

/* ===== SP調整 ===== */
@media screen and (max-width: 1024px) {
    .mySwiper .swiper-pagination {
        bottom: 0% !important;
    }
    .mySwiper .swiper-pagination-bullet {
        width: 3px;
        height: 3px;
        margin: 0 4px !important;
    }
    /* SP：左4px・下30px・少し大きく */
    .mv-replay {
        right: auto;
        left: 4px;
        bottom: 110px;
        font-size: 0.75rem;
        padding: 0.45em 1.2em;
    }
}




/*スマホ*/
@media screen and (max-width:750px){
.maintop {width: 100%;margin: 55px auto 0px auto; padding: 0px 0px 0px 0px;}
	

.topobi5{max-width:980px;width:80%;text-align:center;padding:20px 0% 20px 0%;color:#000;;margin: 40px auto 50px auto;border:1px solid #000;}
.topobi4{width:100%;text-align:center;padding:30px 10% 30px 10%;color:#000;;margin: 30px auto 30px auto; background:#efefef}
.topobi3{max-width:980px;width:80%;padding: 0px 0px 5px 0px;margin: 0px auto 0px auto;display:flex; flex-direction: column;}
.topobi3>li{padding: 10px 0px 10px 0 ;margin: 0;list-style: none;background: #FFF;text-align: center;width:100%;}
.topcap2{max-width:980px;width:80%;margin: 0px auto 0px auto; padding: 20px 0px 30px 0px;font-size:70%;line-height: 130%;color:#333;}
}


/*PC*/
@media print, screen and (min-width:751px){
	
.maintop {width: 100%;margin: 130px auto 0px auto; padding: 0px 0px 0px 0px;}
.footerbg {
  margin: 0 auto;
  width: 100%;
  height: auto;
  padding: 0px 0 9px 0;
  top: 0;
  z-index: 99;
  background: #fff url('../img/top/footerbg.webp') right bottom / auto no-repeat;
}
	
.topobi3{max-width:1200px;width:80%;padding: 10px 0px 5px 0px;margin: 0px auto 0px auto;display: flex;/*コレ*/justify-content: space-between;}
.topobi3>li{padding: 10px 0px 10px 0 ;margin: 0;list-style: none;background: #FFF;text-align: center;width:49%;}
.topobi4{width:100%;text-align:center;padding:2% 0% 2.5% 0%;color:#000;;margin: 0px auto 5% auto; background:#efefef}
.topcap2{max-width:1200px;width:80%;margin: 0px auto 0px auto; padding: 1% 0px 1% 0px;font-size:70%;line-height: 130%;color:#333;text-align:left}
.topcap1{width:70%;margin: 0px auto 0px auto; padding: 20px 0px 40px 0px;font-size:70%;line-height: 130%;color:#333;}

}

@media only screen and (min-width:751px) and (max-width:1200px) {
.maintop {width: 100%;margin: 0px auto 0px auto; padding: 0px 0px 0px 0px;}}