@charset "UTF-8";
@media screen and (min-width: 768px),print {
main {background: #F9F5E9; width: 100% !important; max-width: 1920px !important; margin: 0 auto -360px !important; padding-bottom: 480px;}
.seo_bread_list {color: #fff;}
.seo_bread_list a{color: #fff;}

#main-bx{}
#main-bx .bx{width: 100%; margin: -90px auto 0; background: url(../images/reason/main-bg.png) no-repeat top center; padding: 55px 0 73px;}
#main-bx .bx .inner{width: 1100px; margin: 0 auto; position: relative;}
#main-bx .bx .inner .ttl1{margin-bottom: 10px;}
#main-bx .bx .inner .txt1{font-size: 15px; letter-spacing: 0.3px; line-height: 2; font-weight: 500; margin-bottom: 202px;}
#main-bx .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;}
#main-bx .bx .inner .list li{width: 340px; margin-right: 35px;}
#main-bx .bx .inner .list li:last-child{margin-right: 0;}

#main-bx .bx .inner .list li a {display: block;position: relative;}
#main-bx .bx .inner .list li a .img-hover {position: absolute;top: 0;left: 0;width: 100%;opacity: 0; /* 最初は透明にして見えなくする */transition: opacity 0.3s ease; /* ふわっと切り替える */}
#main-bx .bx .inner .list li a:hover .img-hover {opacity: 1; /* マウスが乗ったら表示する */}


#con1{background: #181C62; padding: 40px 0 85px;}
#con1 .bx{width: 1200px; margin: 0 auto; }
#con1 .bx .inner{color: #fff;}

#con1 .bx .inner .in-bx1{width: 1200px; margin: 0 auto -200px; position: relative; padding: 75px 0 0;}
#con1 .bx .inner .in-bx1 .in-inner1{width: 500px; margin-right: auto; margin-left: 50px;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl1{font-size: 38px; letter-spacing: 1.5px; line-height: 1.45; font-weight: bold; margin-bottom: 50px; }
#con1 .bx .inner .in-bx1 .in-inner1 .ttl1 span{font-size: 50px; position: relative;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl1 span::before{content: ""; width: 119px; height: 17px; margin: 0 auto; background: url(../images/reason/con1-ttl-icon1.png) no-repeat top center; position: absolute; left: 0; right: 53px; top: -11px;}
#con1 .bx .inner .in-bx1 .in-inner1 .img1{position: absolute; right: -6px; top: 63px; z-index: 1;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl2{font-size: 32px; letter-spacing: 0px; line-height: 1.55; font-weight: 500; margin-bottom: 30px;}
#con1 .bx .inner .in-bx1 .in-inner1 .txt1{font-size: 15px; letter-spacing: 0.3px; line-height: 1.85; font-weight: 500; margin-bottom: 35px;}
#con1 .in-bx1 .con1-last-bigimg1 {position: absolute; left: 5px; top: 0}
#con1 .in-bx1 .loop1 {width: 26px;height: 1119px; /* 画像の高さ */background: url(../images/reason/con1-big-img1.png) repeat-y;background-position: center 0; /* 横は中央、縦は0からスタート */animation: bgloop-y 30s linear infinite; /* アニメーション名を変更 */}
@keyframes bgloop-y {from { background-position: center 0; }to { background-position: center -1119px; /* ここを画像の高さと同じ数値にする */ }}


#con1 .bx .inner .in-bx2{width: 1200px; margin: 0 auto -260px; position: relative; padding: 305px 0 0;}
#con1 .bx .inner .in-bx2 .in-inner1{width: 500px; margin-left: auto; margin-right: 50px;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1{font-size: 42px; letter-spacing: 1.5px; line-height: 1.55; font-weight: bold; margin-bottom: 40px;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1 span{font-size: 50px; position: relative;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1 span.ss1{position: relative;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1 span.ss1::before{content: ""; width: 272px; height: 17px; margin: 0 auto; background: url(../images/reason/con1-ttl-icon2.png) no-repeat top center; position: absolute; left: 0; right: 30px; top: -8px;}
#con1 .bx .inner .in-bx2 .in-inner1 .img1{position: absolute; left: -30px; top: 272px; z-index: 1;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl2{font-size: 32px; letter-spacing: 0px; line-height: 1.55; font-weight: 500; margin-bottom: 30px;}
#con1 .bx .inner .in-bx2 .in-inner1 .txt1{font-size: 15px; letter-spacing: 0.3px; line-height: 1.85; font-weight: 500; margin-bottom: 35px;}
#con1 .in-bx2 .con1-last-bigimg1 {position: absolute; right: 5px; top: 0}
#con1 .in-bx2 .loop1 {width: 26px;height: 1364px; /* 画像の高さ */background: url(../images/reason/con1-big-img2.png) repeat-y;background-position: center 0; /* 横は中央、縦は0からスタート */animation: bgloop-y 30s linear infinite; /* アニメーション名を変更 */}
@keyframes bgloop-y {from { background-position: center 0; }to { background-position: center -1364px; /* ここを画像の高さと同じ数値にする */ }}


#con1 .bx .inner .in-bx3{width: 1200px; margin: 0 auto; position: relative; padding: 335px 0 0;}
#con1 .bx .inner .in-bx3 .in-inner1{width: 500px; margin-right: auto; margin-left: 50px;}
#con1 .bx .inner .in-bx3 .in-inner1 .ttl1{font-size: 38px; letter-spacing: 1.5px; line-height: 1.65; font-weight: bold; margin-bottom: 40px; }
#con1 .bx .inner .in-bx3 .in-inner1 .ttl1 span{font-size: 50px; position: relative;}
#con1 .bx .inner .in-bx3 .in-inner1 .ttl1 span::before{content: ""; width: 280px; height: 15px; margin: 0 auto; background: url(../images/reason/con1-ttl-icon3.png) no-repeat top center; position: absolute; left: 0; right: 7px; top: -7px;}
#con1 .bx .inner .in-bx3 .in-inner1 .img1{position: absolute; right: -6px; top: 293px; z-index: 1;}
#con1 .bx .inner .in-bx3 .in-inner1 .ttl2{font-size: 32px; letter-spacing: 0px; line-height: 1.55; font-weight: 500; margin-bottom: 30px;}
#con1 .bx .inner .in-bx3 .in-inner1 .txt1{font-size: 15px; letter-spacing: 0.3px; line-height: 1.85; font-weight: 500; margin-bottom: 35px;}
#con1 .in-bx3 .con1-last-bigimg1 {position: absolute; left: 5px; top: 0}
#con1 .in-bx3 .loop1 {width: 26px;height: 1108px; /* 画像の高さ */background: url(../images/reason/con1-big-img3.png) repeat-y;background-position: center 0; /* 横は中央、縦は0からスタート */animation: bgloop-y 30s linear infinite; /* アニメーション名を変更 */}
@keyframes bgloop-y {from { background-position: center 0; }to { background-position: center -1108px; /* ここを画像の高さと同じ数値にする */ }}

/* アンカーリンクの座標を物理的に下げる */
#con1 a[id^="link"] {
    display: block;
    position: relative;
    top: -50px; /* ★ここで下げる距離を調整します（もっと下げるなら300pxなどに） */
}



#con2{ background: #EFE8D8; padding: 77px 0 77px;}
#con2 .bx{width: 1280px; margin: 0 auto; position: relative;}
#con2 .bx .inner{}
#con2 .bx .inner .ttl1{font-size: 42px; letter-spacing: 0px; line-height: 1.6; font-weight: bold; text-align: center; color: #181C62; margin-bottom: 3px; padding-left: 20px;}
#con2 .bx .inner .ttl2{font-size: 32px; letter-spacing: 0px; line-height: 1.6; font-weight: bold; text-align: center; color: #181C62; margin-bottom: 33px; padding-left: 18px;}
#con2 .bx .inner .ttl2 span{background: linear-gradient(transparent 60%, #FFF100 50%); display: inline-block; margin: 0 auto; padding: 0 5px;}
#con2 .bx .inner .icon1{position: absolute; right: 270px; top: -20px;}

#con2 .bx .inner .in-bx1{width: 1280px; margin: 0 auto; position: relative; padding: 75px 0 0;}
#con2 .bx .inner .in-bx1 .img1{position: absolute; left: 0; top: 25px; z-index: 0;}
#con2 .bx .inner .in-bx1 .in-inner1{width: 644px; margin-left: auto; margin-right: 0; padding: 38px 50px 50px; background: #fff; position: relative; z-index: 1; margin-bottom: 53px;}
#con2 .bx .inner .in-bx1 .in-inner1 .list{}
#con2 .bx .inner .in-bx1 .in-inner1 .list li{font-size: 16px; letter-spacing: 2.3px; line-height: 1.85; font-weight: bold; background: url(../images/reason/con2-ttl-icon1.png) no-repeat top 13px left 17px; padding: 14px 0 14px 62px; border-bottom: 1px solid #D9D9D9;}
#con2 .bx .inner .in-bx1 .txt1{font-size: 20px; letter-spacing: 0px; line-height: 2; font-weight: bold; text-align: center; margin-bottom: 27px; }
#con2 .bx .inner .in-bx1 .txt2{font-size: 28px; letter-spacing: 0px; line-height: 1.6; font-weight: bold; text-align: center; }


.last-ttl {text-align: center; padding: 100px 0 25px;}


}






@media screen and (max-width: 767px) {
.seo_bread_list {display: none;}
main {background: #F9F5E9; padding-bottom: 33vw; margin-bottom: -19vw;}


#main-bx{}
#main-bx .bx{width: 100%; margin: 0 auto; background: url(../images/reason/sp-main-bg.png) no-repeat top center; padding: 9vw 0 15vw; background-size: 100%;}
#main-bx .bx .inner{width: 88%; margin: 0 auto; position: relative;}
#main-bx .bx .inner .ttl1{width: 79%; margin: 0 auto -1vw; padding-right: 6vw;}
#main-bx .bx .inner .txt1{font-size: 3.65vw; letter-spacing: 0vw; line-height: 2; font-weight: 500; text-align: center; color: #fff; margin-bottom: 55vw;}
#main-bx .bx .inner .list{}
#main-bx .bx .inner .list li{width: 82vw; margin: 0 auto 3.5vw;}
#main-bx .bx .inner .list li:last-child{margin-bottom: 0;}

#main-bx .bx .inner .list li a {display: block;position: relative;}
#main-bx .bx .inner .list li a .img-hover {position: absolute;top: 0;left: 0;width: 100%;opacity: 0; /* 最初は透明にして見えなくする */transition: opacity 0.3s ease; /* ふわっと切り替える */}
#main-bx .bx .inner .list li a:hover .img-hover {opacity: 1; /* マウスが乗ったら表示する */}


#con1{background: #181C62; padding: 0 0 15vw;}
#con1 .bx{width: 100%; margin: 0 auto; }
#con1 .bx .inner{color: #fff;}

#con1 .bx .inner .in-bx1{width: 100%; margin: 0 auto -7vw; position: relative; padding: 15vw 0 0;}
#con1 .bx .inner .in-bx1 .in-inner1{width: 100%; margin: 0 auto 6vw;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl1{font-size: 7.7vw; letter-spacing: 0.2vw; line-height: 1.6; font-weight: bold; margin-bottom: 3vw; text-align: center; padding-left: 3vw;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl1 span{font-size: 11.5vw; position: relative;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl1 span::before{content: ""; width: 30vw; height: 4vw; margin: 0 auto; background: url(../images/reason/sp-con1-ttl-icon1.png) no-repeat top center; position: absolute; left: 0; right: 14vw; top: -1vw; background-size: 30vw;}
#con1 .bx .inner .in-bx1 .in-inner1 .img1{width: 76%; margin: 0 auto 6vw; position: relative; z-index: 1;}
#con1 .bx .inner .in-bx1 .in-inner1 .ttl2{font-size: 5.8vw; letter-spacing: 0vw; line-height: 1.65; font-weight: 500; margin-bottom: 8vw; padding: 0 5.5vw;}
#con1 .bx .inner .in-bx1 .in-inner1 .txt1{font-size: 3.6vw; letter-spacing: 0.1vw; line-height: 1.95; font-weight: 500; margin-bottom: 7.5vw; padding: 0 5.5vw;}
#con1 .in-bx1 .con1-last-bigimg1 {position: absolute; right: 2vw; top: 0}
#con1 .in-bx1 .loop1 {width: 7vw;height: 235vw; /* 画像の高さ */background: url(../images/reason/sp-con1-big-img1.png) repeat-y;background-position: center 0; /* 横は中央、縦は0からスタート */animation: bgloop-y 30s linear infinite; /* アニメーション名を変更 */ background-size: 5vw;}
@keyframes bgloop-y {from { background-position: center 0; }to { background-position: center -235vw; /* ここを画像の高さと同じ数値にする */ }}


#con1 .bx .inner .in-bx2{width: 100%; margin: 0 auto -7vw; position: relative; padding: 15vw 0 0;}
#con1 .bx .inner .in-bx2 .in-inner1{width: 100%; margin: 0 auto 6vw;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1{font-size: 8.7vw; letter-spacing: 0.2vw; line-height: 1.5; font-weight: bold; margin-bottom: 3vw; text-align: center;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1 span{font-size: 11.5vw; position: relative;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1 span.ss1{position: relative;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl1 span.ss1::before{content: ""; width: 65vw; height: 4vw; margin: 0 auto; background: url(../images/reason/sp-con1-ttl-icon2.png) no-repeat top center; position: absolute; left: 0; right: 8vw; top: -1vw; background-size: 62vw;}
#con1 .bx .inner .in-bx2 .in-inner1 .img1{width: 90%; margin: 0 auto 7vw; position: relative; z-index: 1;}
#con1 .bx .inner .in-bx2 .in-inner1 .ttl2{font-size: 5.8vw; letter-spacing: 0vw; line-height: 1.6; font-weight: 500; margin-bottom: 8vw; padding: 0 5.5vw;}
#con1 .bx .inner .in-bx2 .in-inner1 .txt1{font-size: 3.6vw; letter-spacing: 0.1vw; line-height: 1.95; font-weight: 500; margin-bottom: 7.5vw; padding: 0 5.5vw;}
#con1 .in-bx2 .con1-last-bigimg1 {position: absolute; right: 2vw; top: 10vw}
#con1 .in-bx2 .loop1 {width: 7vw;height: 275vw; /* 画像の高さ */background: url(../images/reason/sp-con1-big-img2.png) repeat-y;background-position: center 0; /* 横は中央、縦は0からスタート */animation: bgloop-y 30s linear infinite; /* アニメーション名を変更 */ background-size: 5vw;}
@keyframes bgloop-y {from { background-position: center 0; }to { background-position: center -275vw; /* ここを画像の高さと同じ数値にする */ }}


#con1 .bx .inner .in-bx3{width: 100%; margin: 0 auto -7vw; position: relative; padding: 18vw 0 0;}
#con1 .bx .inner .in-bx3 .in-inner1{width: 100%; margin: 0 auto 6vw;}
#con1 .bx .inner .in-bx3 .in-inner1 .ttl1{font-size: 7.7vw; letter-spacing: 0.2vw; line-height: 1.6; font-weight: bold; margin-bottom: 3vw; text-align: center; }
#con1 .bx .inner .in-bx3 .in-inner1 .ttl1 span{font-size: 11.5vw; position: relative;}
#con1 .bx .inner .in-bx3 .in-inner1 .ttl1 span::before{content: ""; width: 70vw; height: 4vw; margin: 0 auto; background: url(../images/reason/sp-con1-ttl-icon3.png) no-repeat top center; position: absolute; left: 0; right: 14vw; top: -1vw; background-size: 62vw;}
#con1 .bx .inner .in-bx3 .in-inner1 .img1{width: 92%; margin: 0 auto 7vw; position: relative; z-index: 1; padding-right: 10vw;}
#con1 .bx .inner .in-bx3 .in-inner1 .ttl2{font-size: 5.8vw; letter-spacing: 0vw; line-height: 1.65; font-weight: 500; margin-bottom: 8vw; padding: 0 5.5vw;}
#con1 .bx .inner .in-bx3 .in-inner1 .txt1{font-size: 3.6vw; letter-spacing: 0.1vw; line-height: 1.95; font-weight: 500; margin-bottom: 7.5vw; padding: 0 5.5vw;}
#con1 .in-bx3 .con1-last-bigimg1 {position: absolute; right: 2vw; top: 17vw}
#con1 .in-bx3 .loop1 {width: 7vw;height: 235vw; /* 画像の高さ */background: url(../images/reason/sp-con1-big-img3.png) repeat-y;background-position: center 0; /* 横は中央、縦は0からスタート */animation: bgloop-y 30s linear infinite; /* アニメーション名を変更 */ background-size: 5vw;}
@keyframes bgloop-y {from { background-position: center 0; }to { background-position: center -235vw; /* ここを画像の高さと同じ数値にする */ }}


/* アンカーリンクの座標を物理的に下げる */
#con1 a[id^="link"] {
    display: block;
    position: relative;
    top: -11.792vw; /* ★ここで下げる距離を調整します（もっと下げるなら300pxなどに） */
}



#con2{ background: #EFE8D8; padding: 13vw 0 15vw;}
#con2 .bx{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx .inner{}
#con2 .bx .inner .ttl1{font-size: 5.8vw; letter-spacing: 0px; line-height: 1.6; font-weight: bold; text-align: center; color: #181C62; margin-bottom: 1vw;}
#con2 .bx .inner .ttl2{font-size: 4.3vw; letter-spacing: 0px; line-height: 1.3; font-weight: bold; text-align: center; color: #181C62; margin-bottom: 8vw;}
#con2 .bx .inner .ttl2 span{background: linear-gradient(transparent 60%, #FFF100 50%); display: inline-block; margin: 0 auto; padding: 0 2vw;}
#con2 .bx .inner .icon1{width: 16%; position: absolute; right: 5vw; top: -2vw; z-index: 1;}

#con2 .bx .inner .in-bx1{width: 100%; margin: 0 auto; position: relative; }
#con2 .bx .inner .in-bx1 .img1{width: 100%; margin: 0 auto -5vw; position: relative; z-index: 0;}
#con2 .bx .inner .in-bx1 .in-inner1{width: 90%; margin: 0 auto; padding: 5vw 6vw 7vw; background: #fff; position: relative; z-index: 1; margin-bottom: 7vw;}
#con2 .bx .inner .in-bx1 .in-inner1 .list{}
#con2 .bx .inner .in-bx1 .in-inner1 .list li{font-size: 3.7vw; letter-spacing: 0vw; line-height: 1.9; font-weight: bold; background: url(../images/reason/sp-con2-ttl-icon1.png) no-repeat top 3vw left 4vw; padding: 2vw 0 2vw 13vw; border-bottom: 1px solid #D9D9D9; background-size: 5vw;}
#con2 .bx .inner .in-bx1 .txt1{font-size: 3.8vw; letter-spacing: 0px; line-height: 2; font-weight: bold; margin-bottom: 5vw; padding: 0 5.5vw;}
#con2 .bx .inner .in-bx1 .txt2{font-size: 4.4vw; letter-spacing: 0px; line-height: 1.6; font-weight: bold; text-align: center; }


.last-ttl {width: 95%; margin: 0 auto 2vw; text-align: center; padding: 19vw 0vw 6vw 3vw;}


}