@charset "UTF-8";
@media screen and (min-width: 768px),print {
main{width: 100%!important; max-width: 1920px!important; margin: 0 auto!important; letter-spacing: 1px; line-height: 1.8;}
.seo_bread_list {  margin-bottom: 46px;}

#con1{}
#con1 .bx{width: 100%; max-width: 1920px; margin: 0 auto 180px; padding: 376px 0 30px ; background: url(../images/flow/con1-bg.png) no-repeat top center, linear-gradient(180deg, #fff 0%, #fff 360px, #F2F2F2 360px, #F2F2F2 100%);}
#con1 .bx .ttl{text-align: center; margin-bottom: 50px;}
#con1 .bx .ttl1{font-size: 29px; letter-spacing: 1.4px; line-height: 2; text-align: center; margin-bottom: 25px;}
#con1 .bx .inner{width: 950px; margin: 0 auto 50px; background: #fff; padding: 57px 0 65px;}
#con1 .bx .inner .ttl2{font-size: 24px; letter-spacing: 1px; line-height: 2; margin-bottom: 22px; text-align: center;}
#con1 .bx .inner .txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2; text-align: center;}


#con2{}
#con2 .bx{width: 100%; max-width: 1920px; margin: 0 auto 158px; }
#con2 .bx .inner{width: 1200px; margin: 0 auto 105px; position: relative;}
#con2 .bx .inner::before{content: ""; width: 1px; height: 130%; margin: 0 auto; background: url(../images/flow/all-icon.png) repeat-y; position: absolute; left: 90px; top: 0;}
#con2 .bx .inner .icon{position: absolute; left: 0; top: -60px;}

#con2 .bx .inner .bx1{width: 850px; margin-left: auto; margin-right: 109px; margin-bottom: 57px;}
#con2 .bx .inner .bx1 .ttl{font-size: 34px; letter-spacing: 1.7px; line-height: 1.9; margin-bottom: 50px;}
#con2 .bx .inner .bx1 .ttl1{font-size: 25px; letter-spacing: 1.2px; line-height: 1.9; margin-bottom: 5px;}
#con2 .bx .inner .bx1 .txt{font-size: 16px; letter-spacing: 0.95px; line-height: 1.9; }

#con2 .bx .inner .all-bx{width: 910px; margin-left: auto; margin-right: 50px; margin-bottom: 80px; background: #F2F2F2; padding: 50px 50px 30px;}

#con2 .bx .inner .in-bx{}
#con2 .bx .inner .in-bx .in-inner{width: 800px; margin: 0 auto 20px; background: #fff; padding: 50px 60px 110px; position: relative;box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 0px 0px 0px 1px rgba(10,10,10,0.02);}
#con2 .bx .inner ul.list1:nth-of-type(2) .in-inner { padding: 50px 60px 46px;}
#con2 .bx .inner ul.list1:nth-of-type(3) .in-inner { padding: 50px 60px 46px;}
#con2 .bx .inner .in-bx .in-inner .num{margin-bottom: 35px;}
#con2 .bx .inner .in-bx .in-inner .in-ttl{font-size: 22px; letter-spacing: 1.2px; line-height: 1.9; position: absolute; left: 118px; top: 44px;}
#con2 .bx .inner .in-bx .in-inner .in-img{position: absolute; right: -200px; top: 125px;}
#con2 .bx .inner .in-bx .in-inner .in-img img{width: 50%; height: auto;}
#con2 .bx .inner .in-bx .in-inner .in-txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2.05; width: 384px;}


#con3{}
#con3 .bx{width: 100%; max-width: 1920px; margin: 0 auto 160px; }
#con3 .bx .inner{width: 1200px; margin: 0 auto 105px; position: relative;}
#con3 .bx .inner::before{content: ""; width: 1px; height: 130%; margin: 0 auto; background: url(../images/flow/all-icon.png) repeat-y; position: absolute; left: 90px; top: 0;}
#con3 .bx .inner .icon{position: absolute; left: 0; top: -60px;}
#con3 .bx .inner .bx1{width: 850px; margin-left: auto; margin-right: 109px; margin-bottom: 40px;}
#con3 .bx .inner .bx1 .ttl{font-size: 34px; letter-spacing: 1.7px; line-height: 1.9; margin-bottom: 50px;}
#con3 .bx .inner .bx1 .txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2.05; margin-bottom: 40px;}
#con3 .bx .inner .bx1 .img{text-align: center;}


#con4{}
#con4 .bx{width: 100%; max-width: 1920px; margin: 0 auto 105px; }
#con4 .bx .inner{width: 1200px; margin: 0 auto 120px; position: relative;}
#con4 .bx .inner .icon{position: absolute; left: 0; top: -60px;}
#con4 .bx .inner .bx1{width: 850px; margin-left: auto; margin-right: 109px; margin-bottom: 40px;}
#con4 .bx .inner .bx1 .ttl{font-size: 34px; letter-spacing: 1.7px; line-height: 1.9; margin-bottom: 54px;}
#con4 .bx .inner .in-inner{width: 910px; margin-left: auto; margin-right: 50px; margin-bottom: 55px; background: #F2F2F2; padding: 40px 50px 40px;}
#con4 .bx .inner .ttl1{font-size: 22px; letter-spacing: 1px; line-height: 2.05; text-align: center; margin-bottom: 20px;}
#con4 .bx .inner .in-inner .img{text-align: center;}
#con4 .bx .inner .in-inner1{width: 910px; margin-left: auto; margin-right: 50px; margin-bottom: 100px; }
#con4 .bx .inner .in-inner1 .ttl2{font-size: 22px; letter-spacing: 1.1px; line-height: 2.05; margin-bottom: 14px;}
#con4 .bx .inner .in-inner1 .txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2.05; margin-bottom: 33px;}
#con4 .bx .inner .in-inner1 .img2{text-align: center;}


#con-last {width: 100%; max-width: 1920px; margin: 0 auto;}
#con-last .ttl{font-size: 29px; letter-spacing: 1.4px; text-align: center; line-height: 2; margin-bottom: 50px;}
#con-last .img1{width: 100%; margin: 0 auto -76px;}
#con-last .img1 img{width: 100%;}
#con-last .bx{width: 100%; max-width: 1920px; margin: 0 auto 100px; padding: 0 0 70px ; background: linear-gradient(180deg, #fff 0%, #fff 0px, #F2F2F2 0px, #F2F2F2 100%); }
#con-last .bx .inner{width: 800px; margin: 0 auto; background: #fff; padding: 42px 73px 21px; position: relative;}
#con-last .bx .inner .txt{font-size: 16px; letter-spacing: 0.8px; line-height: 2.05; margin-bottom: 33px;}
#con-last .bx .img2{}
#con-last .bx .img2 img{}

#main-inc1{width: 1100px; margin: 0 auto; padding-left: 43px;}

}

@media screen and (max-width: 767px) {
main{letter-spacing: 0.3vw; line-height: 1.8;}
h1.main-title {margin: 0 auto 5vw;}


#con1{}
#con1 .bx{width: 100%; margin: 0 auto 9vw; padding: 55vw 0 10vw ; background: url(../images/flow/sp-con1-bg.png) no-repeat top center, linear-gradient(180deg, #fff 0%, #fff 40vw, #F2F2F2 40vw, #F2F2F2 100%); background-size: 100%;}
#con1 .bx .ttl{text-align: center; margin-bottom: 10vw;}
#con1 .bx .ttl img{width: 77%; margin: 0 auto;}
#con1 .bx .ttl1{font-size: 5.1vw; letter-spacing: 0.2vw; line-height: 1.8; text-align: center; margin-bottom: 3vw;}
#con1 .bx .inner{width: 100%; margin: 0 auto 5vw; background: #fff; padding: 8vw 9vw 13vw;}
#con1 .bx .inner .ttl2{font-size: 4.6vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 5vw; text-align: center;}
#con1 .bx .inner .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 2.05; }


#con2{}
#con2 .bx{width: 100%; margin: 0 auto 23vw; }
#con2 .bx .inner{width: 100%; margin: 0 auto 10vw; position: relative;}
#con2 .bx .inner .icon{text-align: center; margin-bottom: 6vw;}
#con2 .bx .inner .icon img{width: 26%; margin: 0 auto;}

#con2 .bx .inner .bx1{width: 82%; margin: 0 auto 9vw;}
#con2 .bx .inner .bx1 .ttl{font-size: 6.3vw; letter-spacing: 0.2vw; line-height: 1.5; margin-bottom: 13vw; text-align: center;}
#con2 .bx .inner .bx1 .ttl1{font-size: 4.3vw; letter-spacing: 0.45vw; line-height: 1.9; margin-bottom: 5vw; text-align: center;}
#con2 .bx .inner .bx1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.85; }

#con2 .bx .inner .all-bx{width: 100%; margin: 0 auto 10vw; background: #F2F2F2; padding: 22vw 0 3vw;}

#con2 .bx .inner .list1{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 .in-bx{width: 92%; margin-right: 1vw;padding: 0 5vw;box-sizing: border-box;}
#con2 .bx .inner .in-bx .in-inner{width: 100%;  min-height: 176vw; margin: 0 auto 5vw; background: #fff; padding: 8vw 7vw 10vw; position: relative; box-sizing: border-box; box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 0px 1px 5px 1px rgba(10,10,10,0.02);}
#con2 .bx .inner .in-bx .in-inner .num{text-align: center; margin: 0 auto;}
#con2 .bx .inner .in-bx .in-inner .num img{text-align: center; margin: 0 auto 8vw;}
#con2 .bx .inner .in-bx .in-inner .in-ttl{font-size: 4vw; letter-spacing: 0.6vw; line-height: 1.9; margin-bottom: 4vw;}
#con2 .bx .inner .in-bx .in-inner .in-img{margin-bottom: 3vw;}
#con2 .bx .inner .in-bx .in-inner .in-img img{}
#con2 .bx .inner .in-bx .in-inner .in-txt{font-size: 3.85vw; letter-spacing: 0.2vw; line-height: 2.05; }



#con2 .slick-dots {display: flex !important;justify-content: center;align-items: center;position: absolute;bottom: 2vw; /* 位置を整えたい場合調整 */left: 0;right: 0;bottom: -2.8vw;margin: 0 auto;}
#con2 .slick-dots li { display: inline-flex !important;width: auto !important;height: auto !important;padding: 0 0.5vw !important;}
#con2 .slick-dots li button {background: #D0D0D0!important; width: 1.5vw; height: 1.5vw; border-radius: 50%; padding: 0; line-height: 0;}
#con2 .slick-dots li.slick-active button { background: #000!important;}
#con2 .slick-dots li button:before { font-size: 0 !important; width: 2vw; height: 2vw;}

/* ▼ 矢印の共通スタイル（中央配置） */
#con2 .slick-arrow {
  position: absolute;
  top: -5.4%;                  /* 縦位置の中央 */
  transform: translateY(-50%);
  z-index: 20;
  width: 10vw;
  height: 10vw;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* ▼ デフォルト文字を消す */
#con2 .slick-prev:before,
#con2 .slick-next:before {
  content: "" !important;
}

#con2 .slick-prev {
  left: 72vw;  /* ←← 左側に配置（調整OK） */
  background: url('../images/flow/arrow-l-icon.svg') no-repeat center center;
  background-size: contain;
}

#con2 .slick-next {
  right: 6vw; /* →→ 右側に配置（調整OK） */
  background: url('../images/flow/arrow-r-icon.svg') no-repeat center center;
  background-size: contain;
}




#con3{}
#con3 .bx{width: 100%; margin: 0 auto 15vw; }
#con3 .bx .inner{width: 100%; margin: 0 auto 24vw; position: relative;}
#con3 .bx .inner .icon{text-align: center; margin-bottom: 7vw;}
#con3 .bx .inner .icon img{width: 25%; margin: 0 auto;}

#con3 .bx .inner .bx1{width: 82%; margin: 0 auto 5vw;}
#con3 .bx .inner .bx1 .ttl{font-size: 6.3vw; letter-spacing: 0.3vw; line-height: 1.4; margin-bottom: 13vw; text-align: center;}
#con3 .bx .inner .bx1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.85; margin-bottom: 7vw;}
#con3 .bx .inner .bx1 .img{text-align: center;}


#con4{}
#con4 .bx{width: 100%; margin: 0 auto 15vw; }
#con4 .bx .inner{width: 100%; margin: 0 auto 10vw; position: relative;}
#con4 .bx .inner .icon{text-align: center; margin-bottom: 7vw;}
#con4 .bx .inner .icon img{width: 25%; margin: 0 auto;}

#con4 .bx .inner .bx1{width: 82%; margin: 0 auto 5vw;}
#con4 .bx .inner .bx1 .ttl{font-size: 6.3vw; letter-spacing: 0.3vw; line-height: 1.4; margin-bottom: 9vw; text-align: center;}
#con4 .bx .inner .in-inner{width: 82%; margin: 0 auto 10vw; background: #F2F2F2; padding: 8vw 5vw 5vw;}
#con4 .bx .inner .ttl1{font-size: 4.85vw; letter-spacing: 0.2vw; line-height: 1.5; text-align: center; margin-bottom: 4vw; padding-left: 4vw;}
#con4 .bx .inner .in-inner .hint-bx{overflow-y: hidden;}
#con4 .bx .inner .in-inner .img{width: 175vw; height: 100%; overflow-x: scroll; margin-bottom: 5vw; }

#con4 .bx .inner .in-inner1{width: 82%; margin: 0 auto 10vw; }
#con4 .bx .inner .in-inner1 .ttl2{font-size: 4.85vw; letter-spacing: 0.2vw; line-height: 1.5; text-align: center; margin-bottom: 4vw; }
#con4 .bx .inner .in-inner1 .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.85; margin-bottom: 7vw;}
#con4 .bx .inner .in-inner1 .img2{text-align: center;}


.scroll-hint-shadow-wrap::before {background: none!important;}
.scroll-hint-shadow-wrap::after {background: none!important;}

  /* スクロールエリア */
  .js-scrollable {
    overflow-x: auto;     /* 横スクロールを有効化 */
    overflow-y: hidden;
    white-space: nowrap;  /* 横並びで表示 */
    -webkit-overflow-scrolling: touch;
  }

  /* 画像を画面幅より広くしてスクロールさせる */
  .hint-bx .img {
    display: inline-block;
    width: 200%;        /* ←これが横スクロールのポイント！ */
  }

  .hint-bx .img img {
    width: 100%;
    height: 100%;
  }

/* PC では scroll-hint のアイコンを非表示 */
@media screen and (min-width: 768px){
  .scroll-hint-icon-wrap,
  .scroll-hint-text {
    display: none !important;
  }
}



#con-last {}
#con-last .ttl{font-size: 4.85vw; letter-spacing: 0.45vw; line-height: 1.7; text-align: center; margin-bottom: 4vw;}
#con-last .img1{width: 100%; margin: 0 auto -14vw;}
#con-last .img1 img{width: 100%;}
#con-last .bx{width: 100%; margin: 0 auto 12vw; padding: 39vw 0 4vw; background: linear-gradient(180deg, #fff 0%, #fff 10vw, #F2F2F2 10vw, #F2F2F2 100%);}
#con-last .bx .inner{width: 90%; margin: -30vw auto 4vw; background: #fff; padding: 6vw 5vw 6vw; position: relative;}
#con-last .bx .inner .txt{font-size: 3.35vw; letter-spacing: 0.2vw; line-height: 1.95; margin-bottom: 5vw;}
#con-last .bx .inner .txt:last-child{margin-bottom: 0;}
#con-last .bx .img2{width: 100%; margin: 0 auto 5vw;}
#con-last .bx .img2 img{}

}