@charset "UTF-8";

.f-gothic1 { font-family: "Zen Kaku Gothic New", sans-serif;font-weight: 300;font-style: normal;}

@media screen and (min-width: 768px),print {
main {width: 100%!important; max-width: 1920px!important; margin: 0 auto!important;}

#con1 {}
#con1 .bx{width: 100%; margin: -73px auto 0; background: url(../images/plan_4/con1-bg.png) no-repeat top 347px center #F2F1E7; padding: 146px 0 95px;}
#con1 .bx .inner{}
#con1 .bx .inner .ttl1{text-align: center; margin-bottom: 868px; }
#con1 .bx .inner .in-bx{width: 1000px; margin: 0 auto 62px; background: #00523F; padding: 80px 0 30px 72px; position: relative; border-radius: 20px;}
#con1 .bx .inner .in-bx .ttl2{position: absolute; left: -30px; top: -40px}
#con1 .bx .inner .in-bx .list1{margin-bottom: 18px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#con1 .bx .inner .in-bx .list2{margin-bottom: 18px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#con1 .bx .inner .in-bx .list1 li{font-size: 18px; letter-spacing: 0; line-height: 1.6; font-weight: 500; color: #fff; position: relative; margin-right: 33px; padding-left: 36px;}
#con1 .bx .inner .in-bx .list1 li::before{content: ""; width: 25px; height: 25px; background: url(../images/plan_4/con1-li-icon.svg) no-repeat top center; position: absolute; left: -5px; top: 3px;}
#con1 .bx .inner .in-bx .list2 li{font-size: 18px; letter-spacing: 0; line-height: 1.6; font-weight: 500; color: #fff; position: relative; margin-right: 34px; padding-left: 36px;}
#con1 .bx .inner .in-bx .list2 li::before{content: ""; width: 25px; height: 25px; background: url(../images/plan_4/con1-li-icon.svg) no-repeat top center; position: absolute; left: -5px; top: 3px;}



#con1 .con1-last-bigimg {width: 100%; margin: 0 auto}
#con1 .loop {
width: 100%;
height: 400px; /*画像の高さ等*/
background: url(../images/plan_4/con1-last-bigimg.png) repeat-x;
background-position: center;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
}

@keyframes bgloop {
from { background-position: 0 0; }
to { background-position: -2590px 0; /*-1000px部分は画像の横幅と同じ数値*/ }
}


#con2{}
#con2 .bx{width: 100%; margin: 0 auto; background: url(../images/plan_4/con2-bg.png) no-repeat top center; padding: 255px 0 117px;;}
#con2 .bx .inner{width: 1200px; margin: 0 auto; position: relative;}
#con2 .bx .inner .ttl1{position: absolute; left: -37px; top: -46px;}
#con2 .bx .inner .list{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#con2 .bx .inner .list li{width: 380px; margin-right: 30px;}
#con2 .bx .inner .list li:last-child{margin-right: 0;}
#con2 .bx .inner .list li .img1{margin-bottom: 17px;}
#con2 .bx .inner .list li .txt1{font-size: 18px; letter-spacing: 0; line-height: 1.75; font-weight: 500; color: #fff; text-align: center;}


#con3{}
#con3 .bx{width: 100%; margin: 0 auto; background: #D1CA9E; padding: 120px 0 190px;;}
#con3 .bx .ttl1{width: 1200px; margin: 0 auto; font-size: 28px; letter-spacing: 0.8px; line-height: 1.6; font-weight: bold; text-align: center; color: #fff; background: #000; padding: 20px 0;}
#con3 .bx .inner{width: 1200px; margin: 0 auto; background: #fff; padding: 15px 50px 40px;}
#con3 .bx .inner table{width: 100%; margin: 0 auto 54px;}
#con3 .bx .inner tr{border-bottom: 1px solid #212121;}
#con3 .bx .inner th{font-size: 18px; letter-spacing: 0; line-height: 1.6; font-weight: bold; padding: 40px 0 40px 50px; width: 16%;}
#con3 .bx .inner td{font-size: 18px; letter-spacing: 0; line-height: 1.6; font-weight: 500; padding: 40px 0 40px 42px; width: 94%; position: relative;}
#con3 .bx .inner td .ss2{background: #E9E9E9; padding: 7px 30px; border-radius: 40px; margin-right: 25px;}
#con3 .bx .inner td .ss3{font-size: 16px;}
#con3 .bx .btn{text-align: center; margin: 0 0 -110px 100px;}


#con4 {}
#con4 .bx{width: 100%; margin: 0 auto; background: #F2F1E7; padding: 127px 0 50px;}
#con4 .bx .list{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#con4 .bx .list li{width: 570px; margin-right: 20px;}
#con4 .bx .list li:last-child{margin-right: 0}

.bnr-u-box {padding-top: 82px;}
.bnr-u-box .s-ttl {font-weight: bold;font-size: 28px;letter-spacing: 0.05em;line-height: 51px;text-align: center;margin-bottom: 44px;}
.bnr-u-box .bnr-u-list { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }

.common-bg-ki {margin-top: 0}

}



@media screen and (max-width: 767px) {
#con1 {}
#con1 .bx{width: 100%; margin: 0 auto 0; background: url(../images/plan_4/sp-con1-bg.png) no-repeat top 39vw center #F2F1E7; padding: 17vw 0 0; background-size: 100%;}
#con1 .bx .inner{}
#con1 .bx .inner .ttl1{width: 71%; margin: 0 auto 79vw; }
#con1 .bx .inner .in-bx{width: 82%; margin: 0 auto 7vw; background: #00523F; padding: 5vw 0 3vw 10vw; position: relative; border-radius: 0 0 5vw 5vw;}
#con1 .bx .inner .in-bx .ttl2{width: 92vw; position: absolute; left: -5vw; top: -12vw;}
#con1 .bx .inner .in-bx .list1{margin-bottom: 3vw; }
#con1 .bx .inner .in-bx .list2{margin-bottom: 3vw; }
#con1 .bx .inner .in-bx .list1 li{font-size: 4vw; letter-spacing: -0.2vw; line-height: 1.7; font-weight: 500; color: #fff; position: relative; padding-left: 5vw; margin-bottom: 4vw;}
#con1 .bx .inner .in-bx .list1 li::before{content: ""; width: 6vw; height: 6vw; background: url(../images/plan_4/con1-li-icon.svg) no-repeat top center; position: absolute; left: -5vw; top: 1vw; background-size: 6vw;}
#con1 .bx .inner .in-bx .list2 li{font-size: 4vw; letter-spacing: -0.2vw; line-height: 1.7; font-weight: 500; color: #fff; position: relative; padding-left: 5vw; margin-bottom: 4vw;}
#con1 .bx .inner .in-bx .list2 li::before{content: ""; width: 6vw; height: 6vw; background: url(../images/plan_4/con1-li-icon.svg) no-repeat top center; position: absolute; left: -5vw; top: 1vw; background-size: 6vw;}



#con1 .con1-last-bigimg {width: 100%; margin: 0 auto}
#con1 .loop {
width: 100%;
height: 41vw; /*画像の高さ等*/
background: url(../images/plan_4/sp-con1-last-bigimg.png) repeat-x;
background-position: center;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
background-size: 265vw;
}

@keyframes bgloop {
from { background-position: 0 0; }
to { background-position: -300vw 0; /*-1000px部分は画像の横幅と同じ数値*/ }
}


#con2{}
#con2 .bx{width: 100%; margin: 0 auto; background: url(../images/plan_4/sp-con2-bg.png) no-repeat top center; padding: 39vw 0 1vw;; background-size: 100%;}
#con2 .bx .inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx .inner .ttl1{display: none;}
#con2 .bx .inner .list{}
#con2 .bx .inner .list li{width: 100%; margin-right: 3vw;}
#con2 .bx .inner .list li .img1{margin-bottom: 4vw;}
#con2 .bx .inner .list li .txt1{font-size: 3.8vw; letter-spacing: -0.2vw; line-height: 1.75; font-weight: 500; color: #fff; text-align: center;}

/* Slick適用時の余白調整 */
#con2 .bx .inner .js-slick-con2 {
    display: block; /* Flexboxを解除 */
    margin: 0 auto 8vw;
}

/* スライドごとの隙間を作る */
#con2 .bx .inner .js-slick-con2 li {
    padding: 0 2vw; /* ここで画像同士の隙間を調整 */
    margin-right: 0;
    width: 100%;
}

/* ====================================
   見本画像のような矢印のデザイン（画像版）
==================================== */
.slide-arrow {
    position: absolute;
    top: 30%; /* 画像の高さに合わせて調整してください */
    transform: translateY(-50%);
    z-index: 10;
    
    /* ボタン自体の背景や枠線を消す */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    
    /* 矢印画像の表示サイズ（お好みの大きさに調整） */
    width: 12vw; 
}

/* 中の画像を親要素にフィットさせる */
.slide-arrow img {
    width: 100%;
    height: auto;
    display: block;
}

/* 矢印の位置（左右） */
.prev-arrow {
left: 5vw;
top: 26vw;
width: 9vw;}
.next-arrow {
right: 5vw;
top: 26vw;
width: 9vw;
}

#con3{}
#con3 .bx{width: 100%; margin: 0 auto; background: #D1CA9E; padding: 14vw 0 15vw;}
#con3 .bx .ttl1{width: 92%; margin: 0 auto; font-size: 5vw; letter-spacing: 0.2vw; line-height: 1.6; font-weight: bold; text-align: center; color: #fff; background: #000; padding: 4vw 0 3vw;}
#con3 .bx .inner{width: 92%; margin: 0 auto; background: #fff; padding: 2vw 5vw 15vw;}
#con3 .bx .inner table{width: 100%; margin: 0 auto 5vw;}
#con3 .bx .inner tr{border-bottom: 1px solid #212121;}
#con3 .bx .inner th{display: block; text-align: left; font-size: 3.8vw; letter-spacing: 0; line-height: 1.9; font-weight: bold; padding: 4vw 0 0vw 0; width: 100%;}
#con3 .bx .inner td{display: block; text-align: left; font-size: 3.8vw; letter-spacing: 0; line-height: 1.9; font-weight: 500; padding: 3vw 0 5vw 0; width: 100%; position: relative;}
#con3 .bx .inner td .ss2{background: #E9E9E9; padding: 1vw 6vw; border-radius: 11vw; margin-right: 3vw; display: inline-block;}
#con3 .bx .inner td .ss2:last-child{margin-right: 0;}
#con3 .bx .inner td .ss3{font-size: 3.4vw;}
#con3 .bx .btn{width: 92%; margin: -7vw auto 0;}



#con4 {}
#con4 .bx{width: 100%; margin: 0 auto; background: #F2F1E7; padding: 14vw 0 12vw;}
#con4 .bx .list{margin: 0 auto 10vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#con4 .bx .list li{width: 91%; margin: 0 auto 4vw;}
#con4 .bx .list li:last-child{margin-bottom: 0}

.bnr-u-box {padding-top: 9vw; }
.bnr-u-box .s-ttl {font-weight: bold; font-size: 6.6vw; letter-spacing: 0.5vw; line-height: 1.6; text-align: center; margin-bottom: 9vw;}
.bnr-u-box .bnr-u-list {width: 88%;margin: 0 auto;display: flex;flex-wrap: wrap;-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;}
.bnr-u-box .bnr-u-list li{margin-bottom: 7vw;}
.common-bg-ki {margin-top: 0}

}