@charset "UTF-8";
@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: -65px auto -375px; background: #F2F1E7; padding: 138px 0 225px;}
#con1 .bx .ttl1{text-align: center; margin-bottom: 142px;}

#con1 .bx .inner{width: 100%; max-width: 1440px; margin: 0 auto; background: #fff; position: relative; padding: 70px 70px; }
#con1 .bx .inner .anime1{position: absolute; right: 65px; top: -65px;}
#con1 .bx .inner .anime2{position: absolute; top: -86px; right: 46px; transform-origin: center center; animation: rotateSlow 25s linear infinite; }
@keyframes rotateSlow {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}}
#con1 .bx .inner .in-inner{width: 100%; max-width: 1300px; margin: 0 auto; background: #E0E0E0;}
#con1 .bx .inner .in-inner .txt1{font-size: 30px; letter-spacing: 0.8px; line-height: 1.6; text-align: center;}

#con1 .bx .inner .icon1{position: absolute; left: 32px; top: -110px;}
#con1 .bx .inner .icon2{position: absolute; left: 45px; bottom: -80px;}
#con1 .bx .inner .icon3{position: absolute; right: -32px; bottom: 19px; z-index: 2;}


#con2 {}
#con2 .top-bg{width: 100%; margin: 0 auto; background: url(../images/facility/con2-bg.png) no-repeat top center ; padding: 300px 0 125px; position: relative;}
#con2 .bx{width: 100%; margin: 0 auto; background: #EDE7D7; padding: 28px 0 30px;}
#con2 .bx .inner{width: 1200px; margin: 0 auto;}

#con2 .bx .inner .flex-bx{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: 580px; margin-right: 40px; margin-bottom: 60px; position: relative;}
#con2 .bx .inner .in-bx:nth-child(2n){margin-right: 0;}
#con2 .bx .inner .in-bx .in-ttl{font-size: 32px; letter-spacing: 0.8px; line-height: 1.6; font-weight: bold; color: #fff; background: #00523F; padding: 14px 0; text-align: center;}
#con2 .bx .inner .in-bx .in-img{}
#con2 .bx .inner .in-bx .in-icon1{position: absolute; right: -31px; bottom: -33px;}
#con2 .bx .inner .in-bx .in-icon2{position: absolute; right: -31px; bottom: -33px;}
#con2 .bx .inner .in-bx .in-icon3{position: absolute; right: -43px; bottom: -44px;}


.bnr-u-box {padding-bottom: 120px; padding-top: 89px; }
.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 (min-width: 767px) and (max-width: 1600px) {
#con1 .bx .inner .icon3{position: absolute; right: 32px; bottom: 19px; z-index: 2;}
}


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


#con1 {}
#con1 .bx{width: 100%; margin: 0 auto -35vw; background: #F2F1E7; padding: 16vw 0 25vw;}
#con1 .bx .ttl1{ width: 67%;  margin: 0 auto 13vw; text-align: center;}

#con1 .bx .inner{width: 100%; margin: 0 auto; background: #fff; position: relative; padding: 10vw 4vw; }
#con1 .bx .inner .anime1{position: absolute; right: 5vw; top: -4vw; width: 30vw;z-index: 9;}
#con1 .bx .inner .anime2{position: absolute; top: -5vw; right: 3vw; transform-origin: center center; animation: rotateSlow 25s linear infinite; width: 33vw;z-index: 9;}
@keyframes rotateSlow {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}}
#con1 .bx .inner .in-inner{width: 100%; max-width: 1300px; margin: 0 auto; background: #E0E0E0; padding: 358px 300px;}


  /* in-innerはoverflow hidden にしてスクロールラッパーとして使う */
  #con1 .bx .inner .in-inner {
    width: 100vw;
    max-width: 100%;
    margin: 0 auto;
    background: #E0E0E0;
    padding: 0;
    box-sizing: border-box;
  }

  /* js-scroll-hintがスクロールエリア本体 */
  #con1 .bx .inner .in-inner .js-scroll-hint {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* map-contentに実際の幅とpaddingを持たせてスクロールを発生させる */
  #con1 .bx .inner .in-inner .js-scroll-hint .map-content {
            min-width: 200vw;
            box-sizing: border-box;
  }

  #con1 .bx .inner .in-inner .txt1 {
    font-size: 30px;
    letter-spacing: 0.8px;
    line-height: 1.6;
    text-align: center;
  }

  /* ScrollHintアイコンのテキストを1行に */
  .js-scroll-hint .scroll-hint-icon {
    width: 200px;
    left: calc(50% - 100px);
  }


#con1 .bx .inner .in-inner .txt1{font-size: 30px; letter-spacing: 0.8px; line-height: 1.6; text-align: center;}

#con1 .bx .inner .icon1{position: absolute; left: 3vw; top: -17vw; width: 10vw;}
#con1 .bx .inner .icon2{position: absolute; left: 3vw; bottom: -8vw; width: 49vw;}
#con1 .bx .inner .icon3{position: absolute; right: 3vw; bottom: -11vw; z-index: 2; width: 11vw;}


#con2 {}
#con2 .top-bg{width: 100%; margin: 0 auto; background: url(../images/facility/sp-con2-bg.png) no-repeat top 13vw center ; padding: 22vw 0 10vw; position: relative; background-size: 100%;}
#con2 .bx{width: 100%; margin: 0 auto; background: #EDE7D7; padding: 0 0 5vw;}
#con2 .bx .inner{width: 92%; margin: 0 auto;}

#con2 .bx .inner .flex-bx{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: 100%; margin: 0 auto 9.5vw; position: relative;}
#con2 .bx .inner .in-bx:nth-child(2n){margin-right: 0;}
#con2 .bx .inner .in-bx .in-ttl{font-size: 4.4vw; letter-spacing: 0.2vw; line-height: 1.6; font-weight: bold; color: #fff; background: #00523F; padding: 2.5vw 0 3vw; text-align: center;}
#con2 .bx .inner .in-bx .in-img{}
#con2 .bx .inner .in-bx .in-icon1{position: absolute; right: -3vw; bottom: -6vw; width: 24vw;}
#con2 .bx .inner .in-bx .in-icon2{position: absolute; right: -3vw; bottom: -6vw; width: 24vw;}
#con2 .bx .inner .in-bx .in-icon3{position: absolute; right: -3vw; bottom: -7vw; width: 26vw;}

.bnr-u-box {padding-bottom: 8vw;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}

}