@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;}
.seo_bread_list a{
position: relative; z-index: 10;
}



body {overflow-x: clip;}


/* =========================================
パララックス背景用設定（PC・スマホ共通）
========================================= */

/* ラッパーをGridにして、背景とコンテンツを同じマスに重ねる */
.content-wrapper {
display: grid; margin-top: -67px;
}

#fixed-bg, .content-inner {
grid-area: 1 / 1;
}

#fixed-bg {
position: sticky;

/* 修正①：topの数値を、.content-wrapperの margin-top と同じマイナス値にする */
top: -70px; /* ※実際に設定した数値に合わせて変更してください */

width: 100%;

/* 修正②：上にずらした分、画面の下に隙間ができないように高さを足しておく */
height: calc(100vh + 70px); /* ※ここも上の数値に合わせて変更してください */

background: url(../images/concept/fixed-bg.png) no-repeat top center;
background-size: cover;
z-index: -1;
}

/* コンテンツを背景より手前に配置 */
.content-inner {
position: relative;
z-index: 1;
overflow: hidden; /* ← これを必ず追加してください */
}

#con1 {}
#con1 .bx{width: 100%; margin: 0 auto; padding-top: 140px;}
#con1 .bx .inner{}
#con1 .bx .inner .ttl1{text-align: center; margin-bottom: 107px;}

#con1 .in-bx{width: 100%; max-width: 1440px; margin: 0 auto 120px; background: url(../images/concept/con1-bg.png) no-repeat top center;padding: 80px 0 100px;}
#con1 .in-bx .in-inner{width: 100%; max-width: 1200px; margin: 0 auto; position: relative;}
#con1 .in-bx .in-inner .icon{position: absolute; right: 0; top: -215px;}
#con1 .in-bx .in-inner .ttl2{position: absolute; left: 50px; top: -30px; z-index: 1;}
#con1 .in-bx .in-inner .img1{text-align: center; margin-bottom: 55px;}
#con1 .in-bx .in-inner .txt1{font-size: 18px; letter-spacing: 0; line-height: 2; font-weight: 500; color: #fff; text-align: center; margin-bottom: 36px;}
#con1 .in-bx .in-inner .img2{position: absolute; left: 34px; bottom: -128px;}
#con1 .in-bx .in-inner .img3{position: absolute; right: 44px; bottom: -174px;}


#con2 {}
#con2 .bx{width: 100%; max-width: 1440px; margin: 0 auto 120px; background: url(../images/concept/con2-bg.png) no-repeat top center;padding: 130px 0 100px;}
#con2 .bx .inner{width: 100%; max-width: 1200px; margin: 0 auto; position: relative;}

#con2 .bx .inner .in-bx1{width: 100%; max-width: 1200px; margin: 0 auto; position: relative;}
#con2 .bx .inner .in-bx1 .in-inner{width: 530px; margin-right: auto; margin-bottom: 93px;}
#con2 .bx .inner .in-bx1 .in-inner .img1{position: absolute; left: 570px; top: -50px;}
#con2 .bx .inner .in-bx1 .in-inner .ttl1{margin-bottom: 54px; margin-left: 75px; position: relative; z-index: 1;}
#con2 .bx .inner .in-bx1 .in-inner .txt1{font-size: 18px; letter-spacing: 0; line-height: 2; font-weight: 500; color: #fff; margin-bottom: 36px; margin-left: 75px;}
#con2 .bx .inner .in-bx1 .in-inner .txt1 .ss1{display: block; margin-top: 36px;}

#con2 .bx .inner .in-bx2{width: 100%; max-width: 1200px; margin: 0 auto; position: relative;}
#con2 .bx .inner .in-bx2 .in-inner{width: 530px; margin-left: auto; }
#con2 .bx .inner .in-bx2 .in-inner .img1{position: absolute; left: 60px; top: 37px;}
#con2 .bx .inner .in-bx2 .in-inner .txt1{font-size: 18px; letter-spacing: 0; line-height: 2; font-weight: 500; color: #fff; margin-bottom: 36px; margin-left: 43px;}



#con3 {}
#con3 .bx{width: 100%; margin: 0 auto; }
#con3 .bx .inner{}

#con3 .in-bx{width: 100%; max-width: 1440px; margin: 0 auto 230px; background: url(../images/concept/con3-bg.png) no-repeat top center;padding: 0 0 100px; position: relative;}
#con3 .in-bx .img1{text-align: center; margin-bottom: 54px;}
#con3 .in-bx .ttl1{position: absolute; left: 180px; top: 78px; z-index: 1;}
#con3 .in-bx .in-inner{width: 100%; max-width: 1200px; margin: 0 auto; position: relative;}
#con3 .in-bx .in-inner .txt1{font-size: 18px; letter-spacing: 0; line-height: 2; font-weight: 500; color: #fff; text-align: center; margin-bottom: 36px;}
#con3 .in-bx .in-inner .txt1 .ss1{display: block; margin-bottom: 0;}
#con3 .in-bx .in-inner .img2{position: absolute; left: 36px; bottom: -26px;}
#con3 .in-bx .in-inner .img3{position: absolute; right: 0px; bottom: 6px;}


#con4 {}
#con4 .bx{width: 100%; margin: 0 auto 139px;}

/* bigimg -------------------------------------*/
#con4 .bigimg {width: 100%; margin: 0 auto 140px;}

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

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

#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}

#c3 { background: url(../images/concept/c3-bg.png) no-repeat top center;;}
#c3 .inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 145px 0 105px; box-sizing: border-box;}
#c3 .inner .ttl { width: 543px; margin-bottom: 93px; margin-left: 2px; }
#c3 .inner .bnr-list { display: flex; flex-wrap: wrap; }
#c3 .inner .bnr-list li { width: 660px; margin-right: 120px; margin-bottom: 72px; }
#c3 .inner .bnr-list li a { color: #fff; }
#c3 .inner .bnr-list li:nth-child(2n) { margin-right: 0px; }
#c3 .inner .bnr-list .li-pic { margin-bottom: 37px; }
#c3 .inner .bnr-list .li-ttl { font-weight: bold; font-size: 32px; text-align: left; color: #fff; margin-bottom: 21px; }
#c3 .inner .bnr-list .li-ttl .ss { font-size: 24px; margin-left: -7px; position: relative; bottom: -2px; }
#c3 .inner .bnr-list .li-txt { font-weight: normal; font-size: 20px; line-height: 32px; text-align: left; color: #fff; width: 655px; }


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

}


@media screen and (max-width: 767px) {

html, body, main {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* =========================================
パララックス背景用設定（スマホ用）
========================================= */
.content-wrapper {
    display: grid; 
    margin-top: -67px;
    overflow: visible !important; 
}

#fixed-bg, .content-inner {
    grid-area: 1 / 1;
}

#fixed-bg {
    position: -webkit-sticky; /* 🚨追加：iPhone Safari用の記述（必須） */
    position: sticky;
    top: -67px; 
    width: 100%;
    height: calc(100vh + 67px); 
    height: calc(100svh + 67px); 
    background: url(../images/concept/sp-fixed-bg.png) no-repeat top 12vw center;
    background-size: cover;
    z-index: -1;
}

.content-inner {
    position: relative;
    z-index: 1;
    overflow-x: hidden; /* はみ出しによる横スクロールはここで防ぎます */
}

#con1 {}
#con1 .bx{width: 100%; margin: 0 auto; padding-top: 29vw;}
#con1 .bx .inner{}
#con1 .bx .inner .ttl1{width: 75%; margin: 0 auto 31vw;}

#con1 .in-bx{width: 92%; margin: 0 auto 9vw; background: url(../images/concept/sp-con1-bg.png) no-repeat top center;padding: 9vw 0 9vw; border-radius: 5vw;}
#con1 .in-bx .in-inner{width: 90%; margin: 0 auto; position: relative;}
#con1 .in-bx .in-inner .icon{position: absolute; right: 0; left: 0; top: -33vw; width: 30vw; margin: 0 auto;}
#con1 .in-bx .in-inner .ttl2{position: absolute; left: -1vw; top: -3vw; z-index: 1; width: 26vw;}
#con1 .in-bx .in-inner .img1{width: 100%; margin: 0 auto 6vw;}
#con1 .in-bx .in-inner .txt1{font-size: 3.6vw; letter-spacing: 0.3vw; line-height: 2; font-weight: 500; color: #fff; margin-bottom: 7.3vw;}
#con1 .in-bx .in-inner .img2{width: 95%; margin-left: 3vw; margin-bottom: 7vw;}
#con1 .in-bx .in-inner .img3{width: 100%; margin-top: 10vw;}


#con2 {}
#con2 .bx{width: 92%; margin: 0 auto 9vw; background: url(../images/concept/sp-con2-bg.png) no-repeat top center;padding: 21vw 0 2vw; border-radius: 5vw;}
#con2 .bx .inner{width: 90%; margin: 0 auto; position: relative;}

#con2 .bx .inner .in-bx1{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx .inner .in-bx1 .in-inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx .inner .in-bx1 .in-inner .img1{width: 100%; margin: 0 auto 7vw;}
#con2 .bx .inner .in-bx1 .in-inner .ttl1{position: absolute; left: 0vw; top: -13vw; width: 74vw; z-index: 1;}
#con2 .bx .inner .in-bx1 .in-inner .txt1{font-size: 3.6vw; letter-spacing: 0.3vw; line-height: 2; font-weight: 500; color: #fff; margin-bottom: 7.3vw;}
#con2 .bx .inner .in-bx1 .in-inner .txt1 .ss1{}

#con2 .bx .inner .in-bx2{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx .inner .in-bx2 .in-inner{width: 100%; margin: 0 auto;}
#con2 .bx .inner .in-bx2 .in-inner .img1{width: 100%; margin: 9vw auto 6vw;}
#con2 .bx .inner .in-bx2 .in-inner .txt1{font-size: 3.6vw; letter-spacing: 0.3vw; line-height: 2; font-weight: 500; color: #fff; margin-bottom: 7.3vw;}



#con3 {}
#con3 .bx{width: 92%; margin: 0 auto; }
#con3 .bx .inner{}

#con3 .in-bx{width: 100%; margin: 0 auto 25vw; background: url(../images/concept/sp-con3-bg.png) no-repeat top center;padding: 9vw 0 9vw; border-radius: 5vw; position: relative;}
#con3 .in-bx .img1{width: 90%; margin: 0 auto 7vw; position: relative;}
#con3 .in-bx .ttl1{position: absolute; left: 4vw; top: 8vw; z-index: 1; width: 25vw;}
#con3 .in-bx .in-inner{width: 100%; margin: 0 auto; position: relative;}
#con3 .in-bx .in-inner .txt1{font-size: 3.6vw; letter-spacing: 0.3vw; line-height: 2; font-weight: 500; color: #fff; margin-bottom: 7.3vw; padding: 0 5vw;}
#con3 .in-bx .in-inner .txt1 .ss1{display: block; margin-bottom: -7vw;}
#con3 .in-bx .in-inner .img2{width: 81%; margin: 0 auto 7vw;}
#con3 .in-bx .in-inner .img3{width: 85%; margin: 0 auto;}


#con4 {}
#con4 .bx{width: 100%; margin: 0 auto 14vw;}

/* bigimg -------------------------------------*/
#con4 .bigimg {width: 100%; margin: 0 auto 10vw;}

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

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

#con4 .bx .list{margin: 0 auto 19vw; 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 5vw;}
#con4 .bx .list li:last-child{margin-bottom: 0}


#c3 {background-image: url(../images/concept/sp-c3-bg.png);background-repeat: no-repeat;background-position: center 0;background-size: 100%;padding-top: 28.986vw;/* margin-top: -172.705vw; */height: 485.739vw;}
#c3 .inner {width: 82.126vw;margin: 0 auto;}
#c3 .inner .ttl {width: 68.116vw;margin-bottom: 11.111vw;margin-left: 0.483vw;position: relative;left: -0.483vw;}
#c3 .inner .bnr-list { display: flex; flex-wrap: wrap; }
#c3 .inner .bnr-list li {width: 100%;/* margin-right: 28.986vw; */margin-bottom: 12.802vw;}
#c3 .inner .bnr-list li a { color: #fff; }
#c3 .inner .bnr-list li:nth-child(2n) { margin-right: 0px; }
#c3 .inner .bnr-list .li-pic {margin-bottom: 5.556vw;}
#c3 .inner .bnr-list .li-ttl {font-weight: bold;font-size: 7.729vw;text-align: left;color: #fff;margin-bottom: 1.691vw;font-size: 5.314vw;text-align: left;}
#c3 .inner .bnr-list .li-ttl .ss {font-size: 5.797vw;font-size: 3.865vw;margin-left: -1.691vw;position: relative;bottom: -0.483vw;}
#c3 .inner .bnr-list .li-txt {font-weight: normal;color: #fff;width: 100%;font-size: 3.382vw;line-height: 6.28vw;text-align: left;}


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

}




@media screen and (min-width: 766px) and (max-width: 1600px) {
#c3 .inner{width: 100%; max-width: 1200px; padding: 145px 0 105px; box-sizing: border-box; margin: 0 auto -130px;}
#c3 .inner .bnr-list li{width: 48%;margin-right: 4%;}
#c3 .inner .bnr-list li img{width: 100%;}
#c3 .inner .bnr-list .li-txt{width: 100%;}
}