@charset "UTF-8";
@media screen and (min-width: 768px),print {  /* 3枚表示のbxslider
  -------------------------------------*/

  /* 共通との差異部分 */
  header{max-width: 100%; width: 1920px; margin: 0px auto 0 auto; padding: 0 0 0; position: relative; background: none; z-index: 55;}
  header .h-logo{ width: 100%; margin-left: -8px; position: absolute;}
  header .h-logo img{ width: 18.6vw; }
  #g-nav{position: relative; top: 0; width: 800px; margin: 0px auto 30px auto; padding: 0 0 0 0; text-align: center; font-size: 16px; letter-spacing: 1.6px; font-weight: bold; }
  #g-nav li.list a{ border-right: 2px solid #707070; display: block; text-align: center; padding: 0px 35px; line-height: 0.95; color: #000;}
  #end-contact {width: 100%; max-width: 1920px; margin: 0 auto; background: url(../images/common/end-icon.png) no-repeat bottom 138px left -8px,url(../images/common/end-bg.png) no-repeat top 88px left 64%; padding: 67px 0 165px; background-size: auto,auto;}
  #end-contact .end-bx{width: 1200px; margin: 0 auto; position: relative;}
  #end-contact .end-bx .end-contact-ttl { text-align: center; margin-left: 195px; margin-bottom: 712px;}
  #end-contact .end-inner {width: 300px; margin: 0 auto;}
  #end-contact .end-inner .end-txt{ font-size: 16px; font-weight: bold; color: #fff; letter-spacing: 2.7px; text-align: center; margin-left: -11px; line-height: 1.7; margin-bottom: 22px;}
  #end-contact .end-inner .end-btn{ text-decoration: none; margin-left: -3px;}
  #end-contact .end-inner .end-human{ position: absolute; left: -62px; top: 125px;}
  
  footer{ width: 100%; min-width: 1100px; background: #00060B; padding: 154px 0 38px; line-height: 1.6; }
  footer .footer-Box{ width: 1000px; margin: 0 auto; font-size: 16px;}
  footer .f-link-Box{ width: 1000px; margin: 0 auto; }
  footer .f-link-Box .child{ font-size: 16px; letter-spacing: 0.8px; color: #fff;}
  footer .f-link-Box .child a{ color: #fff;}
  /*footer .f-link-Box li::before{ content: "> "; }*/
  footer .f-link-Box li{ margin-bottom: 10px; }
  footer .f-link-l{margin-bottom: 52px; 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;}
  footer .f-link-l li{ line-height: 2.2; position: relative; padding: 0px 20.2px; }
  footer .f-link-l li a:after{content: ""; width: 1px; height: 18px; background: #fff; color: #fff; position: absolute; right: 0; top: 8px;}
  footer .f-link-l li:nth-child(5) a:after{content: ""; width: 1px; height: 18px; background: none}
  footer .f-link-l li:nth-child(10) a:after{content: ""; width: 1px; height: 18px; background: none}
  footer .f-con-Box{ }
  footer .f-con-Box .f-logo{text-align: center; margin-bottom: 55px;}
  .copyright{ font-size: 14px; letter-spacing: 0.82px; text-align: center; color: #fff; display: block; }



  /* スライダー */
  .slider-3mai-Box { position: relative; width: 100%; max-height: 49vw; margin-bottom: 33px; }
  .slider-3mai-Box .slider-3mai { position: relative; }
  .slider-3mai-Box .slider-3mai li { width: 100%!important; }
  .slider-3mai-Box .slider-3mai li img{ width: 100%; }
  .slider-3mai-Box .bx-wrapper .bx-controls-direction a { position: absolute; top: 40%; outline: 0; width: 50px; height: 100px; text-indent: -9999px; z-index: 9999; }
  .slider-3mai-Box .bx-wrapper .bx-prev { left: 950px; background-image: url(../images/index/bx-l.jpg); background-position: 0 0; }
  .slider-3mai-Box .bx-wrapper .bx-next { right: 950px; background-image: url(../images/index/bx-r.jpg); background-position: 0 0; }
  .slider-3mai-Box .sra-btn{ position: absolute; right: 0; bottom: -15px; z-index: 55;}
  
  .slider-3mai{}
  .slider-3mai .mv-icon{ position:absolute; bottom: -3vw;left: 1.5vw; z-index: 90000; }
  .slider-3mai .mv-icon img{ width: 18vw; }

  .side-fix { display: none;}
  

    /* concept -------------------------------------*/
    #concept{ }
    #concept .bx{ width: 100%; max-width: 1920px; margin: 130px auto 48px; }
    #concept .bx .ttl{ font-size: 18px; letter-spacing: 8px; margin-bottom: 28px; font-weight: bold; text-align: center; padding-left: 10px;}
    #concept .bx .ttl span{ font-size: 33px; letter-spacing: 18px; padding-left: 10px;}
    #concept .bx .list{margin-bottom: 82px; 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;}
    #concept .bx .list li{width: 25%; }
    #concept .bx .list li img{ width: 100%;}
    #concept .bx .btn{ text-align: center;}


    /* episode -------------------------------------*/
    #episode{ width: 100%; height: 1080px; max-width: 1920px; margin: 0 auto; padding: 100px 0 88px; }
    #episode .inner-Box{ width: 100%; margin: 0 auto; }
    #episode .inner-Box1{ width: 100%; margin: 0 auto; position: relative; left: 100px;}
    #episode .top-bx{ width: 1100px; margin: 0 auto; }
    #episode .top-bx .icon{ text-align: center; margin-bottom: 28px;}
    #episode .top-bx .ttl{ text-align: center; font-size: 17px; letter-spacing: 7.5px; font-weight: bold; padding-left: 7px; margin-bottom: 15px;}
    #episode .top-bx .ttl1{ text-align: center; font-size: 14px; letter-spacing: 3.5px; margin-bottom: 30px; padding-left: 3px;}
    #episode .btn{ text-align: center; margin-top: 56px; }
    #episode .bx-wrapper .bx-viewport {overflow: visible!important;  }
    #episode .episode-sra-top{ margin-bottom: 6px;}
    #episode .system-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;}
    #episode .system-list1 li{ width: 420px!important; height: 260px; background: url(../images/episode/episode-bg-icon.svg) no-repeat bottom 15px right 14px #00060B; position: relative; margin-right: 10px!important; padding: 25px 0px;}
    #episode .system-list1 li:nth-child(5n){ display: none;}
    #episode .system-list1 li a{ display: block; height: 100%;}
    #episode .system-list1 li .sys-bx{position: absolute; bottom: 10px; left: 25px; 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;}
    #episode .system-list1 li .system-join{ font-size: 14px; letter-spacing: 1px; color: #fff; margin-bottom: 5px; text-align: left; border-right: 1px solid #fff; padding-right: 7px; margin-right: 8px; line-height: 1;}
    #episode .system-list1 li .system-job{font-size: 14px;letter-spacing: 1px;color: #fff;margin-bottom: 5px;text-align: left;line-height: 1;}
    #episode .system-list2{ 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;}
    #episode .system-list2 li{ width: 420px!important; height: 260px; background: url(../images/episode/episode-bg-icon.svg) no-repeat bottom 15px right 14px #00060B; position: relative; margin-right: 10px!important; padding: 25px 0px;}
    #episode .system-list2 li:nth-child(2n){ display: none;}
    #episode .system-list2 li a{ display: block; height: 100%;}
    #episode .system-list2 li .sys-bx{position: absolute; bottom: 10px; left: 25px; 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;}
    #episode .system-list2 li .system-join{ font-size: 14px; letter-spacing: 1px; color: #fff; margin-bottom: 5px; text-align: center; border-right: 1px solid #fff; padding-right: 7px; margin-right: 8px; line-height: 1;}
    #episode .system-list2 li .system-job{ font-size: 14px; letter-spacing: 1px; color: #fff; margin-bottom: 5px; text-align: center; line-height: 1;}
    #episode .system-pic{ width: 100%; height: auto; text-align: left; margin-bottom: 25px;}
    #episode .system-pic img{ width: 85%;}
    #episode .system-date{ font-size: 12px; margin-bottom: 15px; line-height: 1.4;}
    #episode .system-date::before{ content: "■"; }
    #episode .system-time{font-size: 14px;font-weight: 600;background: #000;color: #fff;display: inline-block;padding: 3px 10px;position: absolute;right: 10px;top: 10px;}
    #episode .system-ttl-01{ font-size: 18px; font-weight: bold; line-height: 1.4; margin: 0 15px;text-decoration: underline;}
    #episode .system-ttl-01:hover{ text-decoration: underline;}
    #episode .system-ttl-01 span{ font-size: 16px; font-weight: bold;}
    #episode .system-category-set { margin-bottom: 15px;}
    #episode .system-category{ margin-bottom: 1px; font-size: 12px; font-weight: bold; color: #fff; text-align: center; padding: 8px; background-color: #ccc;}
    #episode .icon01{ background: #000; }
    #episode .icon02{ background: #111; }
    #episode .icon03{ background: #222; }
    #episode .icon04{ background: #333; }
    #episode .icon05{ background: #444; }
    #episode .icon06{ background: #555; }
    #episode .system-icon02{ padding: 5px 10px; background: #ccc; position: absolute; top: 35px; left: 0; }

    /* like -------------------------------------*/
    #like{ }
    #like .bx{ width: 100%; max-width: 1920px; margin: 0 auto 83px; position: relative; background: url(../images/index/like-bg.png) no-repeat top 72px center;; padding: 130px 0 72px; }
    #like .bx .inner{ width: 1100px; margin: 0 auto; }
    #like .bx .inner .ttl{text-align: center;margin-bottom: -51px;margin-left: 30px;}
    #like .bx .inner .human{ text-align: center; margin-left: -58px;}
    #like .bx .inner .in-inner{ width: 500px; margin: -68px auto 0; background: #fff; padding: 27px 18px 27px 20px; position: relative;}
    #like .bx .inner .in-inner .txt{ font-size: 16px; font-weight: bold; letter-spacing: 1.6px; line-height: 3.08; margin-bottom: 33px; text-align: center; position: relative;}
    #like .bx .inner .in-inner .txt span{position: relative;}
    #like .bx .inner .in-inner .txt span::after{content: ""; width: 400px; height: 1px; margin: 0 auto; background: url(../images/index/like-txt-icon.png) repeat-x; position: absolute; left: -7px; right: 0; bottom: -13px;}
    #like .bx .inner .in-inner .txt span:nth-of-type(2)::after{content: ""; width: 400px; height: 1px; margin: 0 auto; background: url(../images/index/like-txt-icon.png) repeat-x; position: absolute; left: -16px; right: 0; bottom: -13px;}
    #like .bx .inner .in-inner .txt span:last-child:after{content: ""; width: 400px; height: 1px; margin: 0 auto; background: url(../images/index/like-txt-icon.png) repeat-x; position: absolute; left: -33px; right: 0; bottom: -12px;}
    #like .bx .inner .in-inner .btn{ text-align: center; margin-right: 1px;}


    /* mes-com -------------------------------------*/
    #mes-com{ }
    #mes-com .bx{ width: 100%; max-width: 1920px; margin: 0 auto;}
    #mes-com .bx .img{ width: 100%; margin: 0 auto;}
    #mes-com .bx .img img{ width: 100%;}
    #mes-com .bx .inner{ width: 100%; max-width: 1920px; margin: 0 auto -1px; background: #00060B; padding: 78px 0 8px; position: relative; top: -1px;}
    #mes-com .bx .inner .in-inner{ width: 1280px; margin: 0 auto;}
    #mes-com .bx .inner .in-inner .txt{ font-size: 22px; font-weight: bold; letter-spacing: 4.4px; text-align: center; color: #fff; line-height: 2; padding-left: 5px; margin-bottom: 60px;}
    #mes-com .bx .inner .in-inner .txt span{ font-size: 28px; color: #CD4304; line-height: 1.4;}
    #mes-com .bx .inner .in-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;}
    #mes-com .bx .inner .in-inner .list li{ width: 572px; margin-right: 5px;}
    #mes-com .bx .inner .in-inner .list li:last-child{ margin:30px 0px 0px 0px; }


    /* entry -------------------------------------*/
    #entry{ }
    #entry .bx{ width: 100%; max-width: 1920px; margin: 0 auto 83px; position: relative; background: url(../images/index/entry-bg1.png) no-repeat top center;; padding: 110px 0 12px; }
    #entry .bx .ttl{ text-align: center; margin-left: -10px; margin-bottom: 70px;}
    #entry .bx .inner{ width: 1280px; margin: 0 auto; position: relative;}
    #entry .bx .inner .ttl1{ margin-left: 90px; position: relative; z-index: 1;}
    #entry .bx .in-bx{ width: 1100px; height: 477px; margin: 0 auto -225px; position: relative; background: url(../images/index/entry-bg2.png) no-repeat top center;; padding: 0 0 72px; top: -228px; left: 40px;}
    #entry .bx .in-bx .in-inner{ width: 775px; margin-left: auto;}
    #entry .bx .in-bx .in-inner .link1{ position: absolute; right: 208px; top: 116px; z-index: 2;}
    #entry .bx .in-bx .in-inner .link2{ position: absolute; right: 32px; top: 233px;}
    #entry .bx .in-bx .in-inner .human2{ position: absolute; left: 230px; top: 217px;}

    /* mid-rec -------------------------------------*/
    #mid-rec{ }
    #mid-rec .bx{ width: 1100px; margin: 0 auto 20px; position: relative; left: -8px;}
    #mid-rec .bx .link{ text-align: center; margin-bottom: 14px;}
    #mid-rec .bx .txt{ text-align: center; font-size: 16px; letter-spacing: 0.8px; font-weight: bold; padding-left: 2px;}

      
  /* topics -------------------------------------*/
  #topics{ width: 1195px; margin: 0 auto 120px; background: url(../images/index/topics-icon1.svg) no-repeat top 154px left,url(../images/index/topics-icon2.svg) no-repeat bottom 84px right 15px;;}
  #topics .inner-Box{ width: 1115px; margin: 0 auto; padding: 80px 0px; position: relative;}
  #topics .ttl{ text-align: center; font-size: 38px; letter-spacing: 2px; font-weight: bold; margin-bottom: -12px; margin-left: -13px;}
  #topics .ttl1{ text-align: center; font-weight: bold; margin-bottom: 60px; margin-left: -15px;}
  #topics .btn{ text-align: center; }
  #topics .system-list{ margin-bottom: -10px; 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; }
  #topics .system-list li{width: 45%; margin-right: 8.75%; padding-bottom: 30px; margin-bottom: 30px; background: url(../images/index/topics-bx-icon.png) repeat-x bottom center;;}
  #topics .system-list li:nth-child(2n){margin-right: 0;}
  #topics .system-list li:nth-child(n+3){background: none; margin-bottom: 0;}
  #topics .system-list li a:hover{ text-decoration: none; }
  #topics .system-list .system-pic{ width: 40%; float: left; text-align: center; margin-right: 19px;}
  #topics .system-list .system-pic img{ max-width: 100%; height: auto; max-height: 160px; }
  #topics .system-list .system-date{ font-size: 14px; color: #7F7F7F; letter-spacing: 0.7px; line-height: 1.4; margin-bottom: 10px;}
  #topics .system-list .sys-bx{ width: 56%; float: left; }
  #topics .system-list .system-ttl{  font-size: 16px; line-height: 1.6; letter-spacing: 0.8px;}
  #topics .system-list .system-category-set { margin-bottom: 2px;}
  #topics .system-list .system-category{ display: inline-block; font-size: 14px; font-weight: bold; color: #fff; text-align: center; padding: 1px 7px; background: #ccc; line-height: 1.4; position: relative; top: -4px;}
  #topics .icon01{ background: #00134b !important; }
  #topics .icon02{ background: #0f78d6 !important; }
  #topics .icon03{ background: #222 !important; }
  #topics .icon04{ background: #333 !important; }
  #topics .icon05{ background: #444 !important; }
  #topics .icon06{ background: #555 !important; }
  #topics .system-icon02{ padding: 5px 10px; background: #ccc; position: absolute; top: 35px; left: 0; }
  




  }

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

  /* 共通との差異部分 */
  header{max-width: 100vw; margin: 0px auto 0 auto; padding: 0 0 0; position: relative; background: none; z-index: 55;}
  header .h-logo{ width: 100%; position: absolute;}
  header .h-logo img{ width: 18.6vw; }
  #end-contact {width: 100vw; margin: 0 auto; background: url(../images/common/sp-end-icon.png) no-repeat bottom 15vw left -3vw,url(../images/common/sp-end-bg.png) no-repeat top 20vw center; padding: 5vw 0 13vw; background-size: 85vw,100%;}
  #end-contact .end-bx{width: 100vw; margin: 0 auto; position: relative;}
  #end-contact .end-bx .end-contact-ttl { width: 65vw; margin: 0 auto 50vw; }
  #end-contact .end-inner {width: 95vw; margin: 0 auto;}
  #end-contact .end-inner .end-txt{ font-size: 3.8vw; font-weight: bold; color: #fff; letter-spacing: 0.5vw; text-align: center; line-height: 1.7; margin-bottom: 3vw;}
  #end-contact .end-inner .end-btn{ width: 38vw; margin: 0 auto 5vw;}
  
  footer{ width: 100vw; background: #00060B; padding: 15vw 0 30vw; line-height: 1.6; }
  footer .footer-Box{ width: 100vw; margin: 0 auto; font-size: 3.6vw;}
  footer .f-link-Box{ width: 100vw; margin: 0 auto; }
  footer .f-con-Box{ }
  footer .f-con-Box .f-logo{width: 60vw; margin: 0 auto 10vw; text-align: center;}
  .copyright{ font-size: 3.6vw; letter-spacing: 0.2vw; text-align: center; color: #fff; display: block; }
  .sp-page-top a { text-align: center; display: block; padding: 20vw 0 1vw; background: #00060B;}
  .sp-page-top a img { width: 18vw; height: auto;}

  .sp-header { background: none;}


#bx-sra { position: relative; }
#bx-sra .mv-icon{ position:absolute; bottom: -10vw;right: 1.5vw; z-index: 90; }
#bx-sra .mv-icon img{ width: 52vw; }


/* concept -------------------------------------*/
#concept{ }
#concept .bx{ width: 100vw; margin: 15vw auto 10vw; }
#concept .bx .ttl{ font-size: 4vw; letter-spacing: 1.3vw; margin-bottom: 12vw; font-weight: bold; text-align: center; line-height: 3;}
#concept .bx .ttl span{ font-size: 5.4vw; letter-spacing: 2.8vw; padding-left: 3vw; line-height: 1.8; display: block; }
#concept .bx .list{margin-bottom: 10vw; }
#concept .bx .list li{width: 85vw; margin: 0 auto 6vw;}
#concept .bx .btn{ width: 75vw; margin: 0 auto;}


    /* episode -------------------------------------*/
    #episode{ width: 100vw; margin: 0 auto; padding: 10vw 0 10vw; }
    #episode .inner-Box{ width: 100vw; margin: 0 auto; }
    #episode .inner-Box1{ width: 100vw; margin: 0 auto; position: relative; left: 10vw;}
    #episode .top-bx{ width: 100vw; margin: 0 auto; }
    #episode .top-bx .icon{ width: 40vw; margin: 0 auto 8vw;}
    #episode .top-bx .ttl{ text-align: center; font-size: 4.6vw; letter-spacing: 1.5vw; font-weight: bold; padding-left: 2vw; margin-bottom: 3vw;}
    #episode .top-bx .ttl1{ text-align: center; font-size: 3.6vw; letter-spacing: 0.5vw; margin-bottom: 8vw; line-height: 1.8;}
    #episode .btn{ width: 80vw; margin: 10vw auto 0;}
    #episode .bx-wrapper .bx-viewport {overflow: visible!important;  }
    #episode .episode-sra-top{ margin-bottom: 6px;}
    #episode .system-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;}
    #episode .system-list1 li{ width: 100vw!important; height: 65vw; background: url(../images/episode/episode-bg-icon.svg) no-repeat bottom 3vw right 3vw #00060B; position: relative; margin-right: 2vw!important; padding: 5vw;}
    #episode .system-list1 li:nth-child(5n){ display: none;}
    #episode .system-list1 li a{ display: block; height: 100%;}
    #episode .system-list1 li .sys-bx{position: absolute; bottom: 3vw; left: 5vw; 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;}
    #episode .system-list1 li .system-join{ font-size: 3.6vw; letter-spacing: 0.1vw; color: #fff; margin-bottom: 3vw; text-align: center; border-right: 1px solid #fff; padding-right: 3vw; margin-right: 3vw; line-height: 1;}
    #episode .system-list1 li .system-job{ font-size: 3.6vw; letter-spacing: 0.1vw; color: #fff; margin-bottom: 3vw; text-align: center; line-height: 1;}
    #episode .system-list2{ 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;}
    #episode .system-list2 li{ width: 100vw!important; height: 65vw; background: url(../images/episode/episode-bg-icon.svg) no-repeat bottom 3vw right 3vw #00060B; position: relative; margin-right: 2vw!important; padding: 5vw;}
    #episode .system-list2 li:nth-child(2n){ display: none;}
    #episode .system-list2 li a{ display: block; height: 100%;}
    #episode .system-list2 li .sys-bx{position: absolute; bottom: 3vw; left: 5vw; 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;}
    #episode .system-list2 li .system-join{ font-size: 3.6vw; letter-spacing: 0.1vw; color: #fff; margin-bottom: 3vw; text-align: center; border-right: 1px solid #fff; padding-right: 3vw; margin-right: 3vw; line-height: 1;}
    #episode .system-list2 li .system-job{ font-size: 3.6vw; letter-spacing: 0.1vw; color: #fff; margin-bottom: 3vw; text-align: center; line-height: 1;}
    #episode .system-pic{ width: 100%; height: auto; text-align: left; margin-bottom: 5vw;}
    #episode .system-pic img{ }
    #episode .system-date{ font-size: 12px; margin-bottom: 15px; line-height: 1.4;}
    #episode .system-date::before{ content: "■"; }
    #episode .system-time{font-size: 14px;font-weight: 600;background: #000;color: #fff;display: inline-block;padding: 3px 10px;position: absolute;right: 10px;top: 10px;}
    #episode .system-ttl-01{ font-size: 18px; font-weight: bold; line-height: 1.4; margin: 0 15px;text-decoration: underline;}
    #episode .system-ttl-01:hover{ text-decoration: underline;}
    #episode .system-ttl-01 span{ font-size: 16px; font-weight: bold;}
    #episode .system-category-set { margin-bottom: 15px;}
    #episode .system-category{ margin-bottom: 1px; font-size: 12px; font-weight: bold; color: #fff; text-align: center; padding: 8px; background-color: #ccc;}
    #episode .icon01{ background: #000; }
    #episode .icon02{ background: #111; }
    #episode .icon03{ background: #222; }
    #episode .icon04{ background: #333; }
    #episode .icon05{ background: #444; }
    #episode .icon06{ background: #555; }
    #episode .system-icon02{ padding: 5px 10px; background: #ccc; position: absolute; top: 35px; left: 0; }


    /* like -------------------------------------*/
    #like{ }
    #like .bx{ width: 100vw; margin: 0 auto 8vw; position: relative; background: url(../images/index/sp-like-bg.png) no-repeat top 13vw center;; padding: 10vw 0 10vw; background-size: 100%;}
    #like .bx .inner{ width: 90vw; margin: 0 auto; }
    #like .bx .inner .ttl{width: 68vw; margin: 5vw auto -4vw; position: relative; left: 2vw;}
    #like .bx .inner .human{ width: 86vw; margin: 0 auto; position: relative; left: -2vw;}
    #like .bx .inner .in-inner{  margin: -1vw auto 0; background: #fff; padding: 5vw 0vw 0; position: relative;}
    #like .bx .inner .in-inner .txt{ font-size: 3.6vw; font-weight: bold; letter-spacing: 0.1vw; line-height: 3.08; margin-bottom: 8vw; text-align: center; position: relative;}
    #like .bx .inner .in-inner .txt span{position: relative;}
    #like .bx .inner .in-inner .txt span::after{content: ""; width: 80vw; height: 1vw; margin: 0 auto; background: url(../images/index/like-txt-icon.png) repeat-x; position: absolute; left: -2vw; right: 0; bottom: -4vw;}
    #like .bx .inner .in-inner .txt span:nth-of-type(2)::after{content: ""; width: 80vw; height: 1vw; margin: 0 auto; background: url(../images/index/like-txt-icon.png) repeat-x; position: absolute; left: -2vw; right: 0; bottom: -4vw;}
    #like .bx .inner .in-inner .txt span:last-child:after{content: ""; width: 80vw; height: 1vw; margin: 0 auto; background: url(../images/index/like-txt-icon.png) repeat-x; position: absolute; left: -5.5vw; right: 0; bottom: -4vw;}
    #like .bx .inner .in-inner .btn{ width: 80vw; margin: 0 auto; position: relative; left: -0.8vw;}


    /* mes-com -------------------------------------*/
    #mes-com{ }
    #mes-com .bx{ width: 100vw; margin: 0 auto;}
    #mes-com .bx .img{ width: 100%; margin: 0 auto;}
    #mes-com .bx .inner{ width: 100vw; margin: 0 auto -1vw; background: #00060B; padding: 8vw 0 10vw; position: relative; top: -1px;}
    #mes-com .bx .inner .in-inner{ width: 90vw; margin: 0 auto;}
    #mes-com .bx .inner .in-inner .txt{ font-size: 4vw; font-weight: bold; letter-spacing: 0.5vw; text-align: center; color: #fff; line-height: 2.4; padding-left: 3vw; margin-bottom: 10vw;}
    #mes-com .bx .inner .in-inner .txt span{ font-size: 5vw; color: #CD4304; line-height: 1.8;}
    #mes-com .bx .inner .in-inner .list{ }
    #mes-com .bx .inner .in-inner .list li{ width: 80vw; margin: 0 auto 6vw;}
    #mes-com .bx .inner .in-inner .list li:last-child{ margin-bottom: 0;}


    /* entry -------------------------------------*/
    #entry{ }
    #entry .bx{ width: 100vw; margin: 0 auto 10vw; position: relative; background: url(../images/index/sp-entry-bg1.png) no-repeat top center;; padding: 8vw 0 10vw; background-size: 100%;}
    #entry .bx .ttl{ width: 40vw; margin: 0 auto 12vw;}
    #entry .bx .inner{ width: 90vw; margin: 0 auto; position: relative;}
    #entry .bx .inner .ttl1{ width: 73vw; margin-bottom: 3vw; position: relative; left: 3vw; z-index: 1;}
    #entry .bx .inner .human1{width: 16vw; position: absolute; right: 0; top: 18vw;}
    #entry .bx .in-bx{ width: 88vw; height: 80vw; margin: 0 auto -20vw; position: relative; background: url(../images/index/sp-entry-bg2.png) no-repeat top center;; padding: 0 0 10vw; top: -20vw; left: 0; background-size: 100%;}
    #entry .bx .in-bx .in-inner{ }
    #entry .bx .in-bx .in-inner .link1{ width: 73vw; position: absolute; left: 5vw; top: 13vw; z-index: 2;}
    #entry .bx .in-bx .in-inner .link2{ width: 80vw; position: absolute; left: 10vw; top: 37vw;}
    #entry .bx .in-bx .in-inner .human2{width: 30vw; position: absolute; left: -3vw; top: 58vw;}

    /* mid-rec -------------------------------------*/
    #mid-rec{ }
    #mid-rec .bx{ width: 100vw; margin: 0 auto 15vw; }
    #mid-rec .bx .link{ width: 83vw; margin: 0 auto 5vw;}
    #mid-rec .bx .txt{ text-align: center; font-size: 3.6vw; letter-spacing: 0.1vw; font-weight: bold; }

      
  /* topics -------------------------------------*/
  #topics{ width: 90vw; margin: 0 auto 20vw; background: url(../images/index/topics-icon1.svg) no-repeat top left,url(../images/index/topics-icon2.svg) no-repeat bottom 20vw right; background-size: 30vw;}
  #topics .inner-Box{  margin: 0 auto; padding: 6vw 0 15vw; position: relative;}
  #topics .ttl{ text-align: center; font-size: 8.2vw; letter-spacing: 0.5vw; font-weight: bold; margin-bottom: -3vw; }
  #topics .ttl1{ width: 14vw; margin: 0 auto 10vw;}
  #topics .btn{ width: 70vw; margin: 0 auto; }
  #topics .system-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; }
  #topics .system-list li{width: 80vw; margin: 0 auto 6vw; padding-bottom: 5vw; background: url(../images/index/topics-bx-icon.png) repeat-x bottom center;;}
  #topics .system-list li:nth-child(n+4){background: none; margin-bottom: 0;}
  #topics .system-list li a:hover{ text-decoration: none; }
  #topics .system-list .system-pic{ width: 30vw; float: left; text-align: center; margin-right: 5vw;}
  #topics .system-list .system-pic img{ max-width: 100%; height: auto; max-height: 30vw; }
  #topics .system-list .system-date{ font-size: 3.6vw; color: #7F7F7F; letter-spacing: 0vw; line-height: 1.4; margin-bottom: 2vw;}
  #topics .system-list .sys-bx{ width: 45vw; float: left; }
  #topics .system-list .system-ttl{  font-size: 3.6vw; line-height: 1.6; letter-spacing: 0vw;}
  #topics .system-list .system-category-set { margin-bottom: 2px;}
  #topics .system-list .system-category{ display: inline-block; font-size: 14px; font-weight: bold; color: #fff; text-align: center; padding: 1px 7px; background: #ccc; line-height: 1.4; position: relative; top: -4px;}
  #topics .icon01{ background: #00134b !important; }
  #topics .icon02{ background: #0f78d6 !important; }
  #topics .icon03{ background: #222 !important; }
  #topics .icon04{ background: #333 !important; }
  #topics .icon05{ background: #444 !important; }
  #topics .icon06{ background: #555 !important; }
  #topics .system-icon02{ padding: 5px 10px; background: #ccc; position: absolute; top: 35px; left: 0; }
  

}


@media screen and (min-width:768px) and ( max-width:1499px) {
  /* 共通との差異部分 */
  header{max-width: 100%; width: 1920px; margin: 0px auto 0 auto; padding: 0 0 0; position: relative; background: none;}
  #g-nav{position: relative; top: 0; left: 0; width: 800px; margin: 0px auto 30px auto; padding: 0 0 0 0; text-align: center; font-size: 16px; letter-spacing: 1.6px; font-weight: bold; }
  #g-nav li.list a{ border-right: 2px solid #707070; display: block; text-align: center; padding: 0px 35px; line-height: 0.95; color: #000;}
  #end-contact {width: 100%; max-width: 1920px; margin: 0 auto; background: url(../images/common/end-icon.png) no-repeat bottom 138px left -8px,url(../images/common/end-bg.png) no-repeat top 88px left 64%; padding: 67px 0 165px; background-size: 70vw,125%;}
  #end-contact .end-bx{width: 1200px; margin: 0 auto; position: relative;}
  #end-contact .end-bx .end-contact-ttl { text-align: center; margin-left: 10vw; margin-bottom: 45%;}
  #end-contact .end-bx .end-contact-ttl img{ width: 20vw;}
  #end-contact .end-inner {width: 300px; margin: 0 auto;}
  #end-contact .end-inner .end-txt{ font-size: 16px; font-weight: bold; color: #fff; letter-spacing: 2.7px; text-align: center; margin-left: -11px; line-height: 1.7; margin-bottom: 22px;}
  #end-contact .end-inner .end-btn{ text-decoration: none; margin-left: -3px;}
  #end-contact .end-inner .end-human{ position: absolute; left: -62px; top: 125px;}
  
  footer{ width: 100%; min-width: 1100px; background: #00060B; padding: 154px 0 38px; line-height: 1.6; }
  footer .footer-Box{ width: 1000px; margin: 0 auto; font-size: 16px;}
  footer .f-link-Box{ width: 1000px; margin: 0 auto; }
  footer .f-link-Box .child{ font-size: 16px; letter-spacing: 0.8px; color: #fff;}
  footer .f-link-Box .child a{ color: #fff;}
  /*footer .f-link-Box li::before{ content: "> "; }*/
  footer .f-link-Box li{ margin-bottom: 10px; }
  footer .f-link-l{margin-bottom: 52px; 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;}
  footer .f-link-l li{ line-height: 2.2; position: relative; padding: 0px 20.2px; }
  footer .f-link-l li a:after{content: ""; width: 1px; height: 18px; background: #fff; color: #fff; position: absolute; right: 0; top: 8px;}
  footer .f-link-l li:nth-child(5) a:after{content: ""; width: 1px; height: 18px; background: none}
  footer .f-link-l li:nth-child(10) a:after{content: ""; width: 1px; height: 18px; background: none}
  footer .f-con-Box{ }
  footer .f-con-Box .f-logo{text-align: center; margin-bottom: 55px;}
  .copyright{ font-size: 14px; letter-spacing: 0.82px; text-align: center; color: #fff; display: block; }
  }