@charset "UTF-8";
/* =============================================
                    CONTENTS
============================================= */
body{ background: #fff; width: 100vw; overflow-x: clip;}
#contents{ background: #000;}
.inner{ position: relative;}
.bg-white{ background: #fff url(../img/bg-white.jpg) left top repeat;}
.bg-gray{ background: #eee url(../img/bg-gray.jpg) left top repeat;}
.swiper-pagination-bullet{ background: #fff !important; border: 1px solid #fff; border-radius: 0;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #009944 !important;}
/* main */
#main .detail{ background: #eee;}
#main .detail p{ font-weight: 700; line-height: 1.8;}
/* section */
section .box h3{ line-height: 1.3;}
section .box h3 span{ color: #009944;}
section .box p{ line-height: 1.8;}
/* footer */
footer .bottom{ background: #000;}
footer .bottom p,
footer .bottom p a{ color: #fff;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
.inner{ width: 1080px; margin: 0 auto;}
/* ページネーションの位置 */
.swiper-pagination{
    right: 20px !important;
    bottom: 20px !important;
    text-align: right;
    padding-right: 15px;
}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
    background-color: #000;
    height: 15px;
    width: 15px;
    opacity: 1;
    margin: 0 8px;
}
/* main */
#main .mv{ background: url(../img/main-bg_pc.jpg) center top no-repeat; background-size: cover;}
#main .mv .inner{ height: 650px;}
#main .mv h1{ position: absolute; left: 120px; top: 436px;}
#main .detail{ padding: 55px 0;}
#main .detail p{ font-size: 18px; text-align: center;}
/* section */
section{ padding: 80px 0 20px;}
section .inner{ width: 980px;}
section h2{ text-align: center; margin-bottom: 55px;}
section .box h3{ font-size: 36px; margin-bottom: 40px;}
section .box .swiper{ margin-bottom: 35px;}
section .box .swiper .img img{ width: 100%;}
section .box p{ font-size: 18px; margin-bottom: 75px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
/* ページネーションの位置 */
.swiper-pagination{
    right: 10px !important;
    bottom: 10px !important;
    text-align: right;
    padding-right: 10px;
}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
    background-color: #000;
    height: 10px;
    width: 10px;
    opacity: 1;
    margin: 0 8px;
}
/* main */
#main .detail{ padding: 25px 0;}
#main .detail .inner{ padding: 0 20px;}
#main .detail p{ font-size: 17px;}
/* section */
section{ padding: 40px 0 10px;}
section .inner{ padding: 0 20px;}
section h2{ width: 250px; margin:0 auto 25px;}
section .box h3{ font-size: 24px; text-indent: -30px; padding-left: 30px; margin-bottom: 24px;}
section .box .swiper{ margin-bottom: 15px;}
section .box .swiper .img img{ width: 100%;}
section .box p{ font-size: 17px; margin-bottom: 35px;}
/* footer */
footer .bottom{ padding-bottom: 30px;}

}