@charset "UTF-8";
/*==================================================================
	共通extend用
===================================================================*/
/*クリアフィックス*/
.clearfix {
  *zoom: 1; }
  .clearfix:after {
    content: "";
    display: table;
    clear: both; }

/*インラインブロック*/
.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

/*テーブルセル*/
.table_cell {
  display: table-cell;
  *display: inline;
  *zoom: 1;
  vertical-align: middle; }

/*ellipsis*/
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis; }

a:link {
  color: #535353;
  text-decoration: none; }
a:visited {
  color: #535353;
  text-decoration: none; }
a:hover {
  color: #1c75be;
  text-decoration: none; }


/*mainImage*/
.IndexPage #Container .mainImage {
  width: 100%;
  min-height: 510px;
  padding: 140px 0 30px 0;
  background: url(../img/index/mainImage.jpg) center center no-repeat #fff;
  background-size: cover;
}
.IndexPage #Container .mainImage .catch {
  width: 92%; max-width: 560px;
  margin: auto; 
}
.IndexPage #Container .mainImage .main-bnr {
  width: 100%; max-width: 1200px; 
  margin: auto; margin-top: 30px; 
  display:flex; flex-wrap:wrap; align-items: flex-end;
}
.IndexPage #Container .mainImage .main-bnr .main-bnrBox { width: calc(33.3333333333333334% - 20px); margin: 10px; display: block;}
.IndexPage #Container .mainImage .main-bnr a.main-bnrBox { transition: 0.5s;}
.IndexPage #Container .mainImage .main-bnr a.main-bnrBox:hover { transform: scale(1.02,1.02); opacity: 0.92;}
.IndexPage #Container .mainImage .main-bnr a.main-bnrBox img { border-radius: 8px; overflow: hidden;}
.IndexPage #Container .mainImage .main-bnr .main-bnrBox .youtube-ratio iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.IndexPage #Container .mainImage .main-bnr .main-bnrBox.right { margin-left: 33.33333333333334%;}

@media screen and (max-width: 900px) {
  .IndexPage #Container .mainImage {
    min-height: 450px;
    padding: 100px 0 20px 0;
  }
  .IndexPage #Container .mainImage .catch { max-width: 450px;}
  .IndexPage #Container .mainImage .main-bnr .main-bnrBox { width: calc(33.3333333333333334% - 10px); margin: 5px;}
  .IndexPage #Container .mainImage .main-bnr a.main-bnrBox img { border-radius: 5px; overflow: hidden;}
}

@media screen and (max-width: 786px) {
.IndexPage #Container .mainImage .main-bnr .main-bnrBox { width: calc(45% - 20px);}
.IndexPage #Container .mainImage .main-bnr .main-bnrBox.right { margin-left: calc(10% + 20px);}
}

@media screen and (max-width: 568px) {
  .IndexPage #Container .mainImage {
    min-height: auto;
    padding: 80px 0 0px 0;
  }
  .IndexPage #Container .mainImage .catch { max-width: 350px;}
  .IndexPage #Container .mainImage .main-bnr { margin-top: 40px; background: #fff;}
  .IndexPage #Container .mainImage .main-bnr .main-bnrBox { width: calc(100% - 0px); margin: 0px;}
  .IndexPage #Container .mainImage .main-bnr a.main-bnrBox img { border-radius: 0px; overflow: hidden;}
  .IndexPage #Container .mainImage .main-bnr .main-bnrBox.right { margin-left: 0px;}
}


/*section1*/
#Container .inner.section1 {
  width: 100%;
  margin: 0 auto 40px auto; }
  #Container .inner.section1 ul {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-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; }
    #Container .inner.section1 ul li {
      width: 25%;
      border-top: 1px solid #e3e3e3;
      border-right: 1px solid #e3e3e3;
      transition: .2s linear;
      -moz-transition: .2s linear;
      -webkit-transition: .2s linear;
      -o-transition: .2s linear;
      -ms-transition: .2s linear; }
      @media screen and (max-width: 992px) {
        #Container .inner.section1 ul li {
          width: 50%; } }
      @media screen and (max-width: 568px) {
        #Container .inner.section1 ul li {
          width: 100%; } }
      #Container .inner.section1 ul li:last-child {
        border-right: 0; }
      #Container .inner.section1 ul li div:nth-child(1) {
        width: 100%;
        height: 200px;
        overflow: hidden; }
        @media screen and (max-width: 1200px) {
          #Container .inner.section1 ul li div:nth-child(1) {
            height: 160px; } }
        @media screen and (max-width: 568px) {
          #Container .inner.section1 ul li div:nth-child(1) {
            height: 120px; } }
        #Container .inner.section1 ul li div:nth-child(1) img {
          width: 100%; }
          @media screen and (max-width: 568px) {
            #Container .inner.section1 ul li div:nth-child(1) img {
              margin-top: -40px; } }
      #Container .inner.section1 ul li div:nth-child(2) {
        padding: 10px 10px 20px 10px;
        vertical-align: top;
        font-size: 2.0rem; }
        @media screen and (max-width: 992px) {
          #Container .inner.section1 ul li div:nth-child(2) {
            font-size: 1.8rem; } }
        #Container .inner.section1 ul li div:nth-child(2) i {
          width: 18px;
          display: inline-block;
          margin-right: 5px; }
          #Container .inner.section1 ul li div:nth-child(2) i img {
            margin-bottom: 2px; }
        #Container .inner.section1 ul li div:nth-child(2) span {
          display: block;
          font-size: 1.2rem;
          margin-left: 23px;
          line-height: 14px; }

/*section2*/
#Container .inner.section2 {
  width: 100%;
  margin: 0 auto;
  background: #f1faff;
  padding: 5px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-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; 
}
#Container .inner.section2 .off-peak,
#Container .inner.section2 .top-info {
  width: 50%;
  transition: .2s linear;
  -moz-transition: .2s linear;
  -webkit-transition: .2s linear;
  -o-transition: .2s linear;
  -ms-transition: .2s linear; 
  display: block;
}
#Container .inner.section2 .off-peak {
  background: #fff;
  padding: 3px;
  transition: opacity .2s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
}
#Container .inner.section2 .off-peak:hover {
  opacity: 0.8; 
}
#Container .inner.section2 .off-peak img {
  object-fit: cover; width: auto; height: 100%; max-height: 400px;
}
#Container .inner.section2 .off-peak::after {
  content: ""; display: block; margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px);
  border: 1px solid #56bc8f; position: absolute; top: 0; left: 0;
}

#Container .inner.section2 .top-info {
padding: 3px;
padding-bottom: 20px; 
}
#Container .inner.section2 .top-info h2 {
font-size: 3.0rem;
color: #168fd5;
margin: 35px auto 0 auto;
text-align: center; 
}

@media screen and (max-width: 992px) {
  #Container .inner.section2 .off-peak,
  #Container .inner.section2 .top-info {
    width: 100%; 
  }
  #Container .inner.section2 .top-info ul {
    margin: 10px auto;
  }
}

/*sectionBnr*/
#Container .inner.sectionBnr {
  width: calc(100% - 5px); display: flex; flex-wrap: wrap; margin: 2.5px;
}
#Container .inner.sectionBnr div:nth-child(1) { width: 64.6%; display: flex; flex-wrap: wrap;}
#Container .inner.sectionBnr div:nth-child(2) { width: 35.4%;}
#Container .inner.sectionBnr div a { cursor: pointer; transition:opacity 0.1s linear;}
#Container .inner.sectionBnr div a:hover { opacity: 0.8;}
#Container .inner.sectionBnr div:nth-child(1) a { width: calc(50% - 5px); margin: 2.5px; display: block; text-align: center;}
#Container .inner.sectionBnr div:nth-child(2) a { width: calc(100% - 5px); margin: 2.5px; display: block; text-align: center;}
#Container .inner.sectionBnr div a img {height: auto; max-height: 120px;}

#Container .inner.sectionBnr div:nth-child(1) a:nth-child(1) { border: 1px solid #66add7;}
#Container .inner.sectionBnr div:nth-child(1) a:nth-child(2) { border: 1px solid #fd946b;}
#Container .inner.sectionBnr div:nth-child(2) a { border: 1px solid #9c9c9c; background: url(../img/index/sectionBnr03-bg.jpg) 0 0 no-repeat; background-size: cover;}

@media screen and (max-width: 568px) {
  #Container .inner.sectionBnr div:nth-child(1) { width: 100%;}
  #Container .inner.sectionBnr div:nth-child(2) { width: 100%;}
  #Container .inner.sectionBnr div:nth-child(1) a { width: calc(100% - 5px);}
}

/*section3*/
#Container .inner.section3 {
  width: 100%;
  margin: 0 auto;
  background: #f0f0f0;
  padding: 5px; }
  #Container .inner.section3 div {
    width: 65%;
    float: left; }
    @media screen and (max-width: 1200px) {
      #Container .inner.section3 div {
        width: 60%; } }
    @media screen and (max-width: 992px) {
      #Container .inner.section3 div {
        width: 100%;
        float: none; } }
    #Container .inner.section3 div:nth-child(2) {
      width: 35%;
      float: right; }
      @media screen and (max-width: 1200px) {
        #Container .inner.section3 div:nth-child(2) {
          width: 40%; } }
      @media screen and (max-width: 992px) {
        #Container .inner.section3 div:nth-child(2) {
          width: 100%;
          float: none; } }
      #Container .inner.section3 div:nth-child(2) a {
        width: 100%;
        height: 305px;
        padding-top: 50px;
        display: block;
        background: #168fd5;
        color: #fff;
        text-align: center;
        font-size: 1.8rem;
        letter-spacing: -0.2px;
        transition: opacity .2s ease;
        cursor: pointer; }
        @media screen and (max-width: 1200px) {
          #Container .inner.section3 div:nth-child(2) a {
            font-size: 1.6rem; } }
        @media screen and (max-width: 992px) {
          #Container .inner.section3 div:nth-child(2) a {
            height: auto;
            padding-bottom: 50px; } }
        #Container .inner.section3 div:nth-child(2) a i {
          width: 75px;
          display: inline-block;
          margin-bottom: 15px; }
          @media screen and (max-width: 1200px) {
            #Container .inner.section3 div:nth-child(2) a i {
              width: 65px; } }
        #Container .inner.section3 div:nth-child(2) a span {
          background: #fff;
          color: #168fd5;
          padding: 15px 30px;
          margin-top: 30px;
          display: inline-block;
          font-size: 1.6rem; }
          @media screen and (max-width: 1200px) {
            #Container .inner.section3 div:nth-child(2) a span {
              font-size: 1.4rem; } }
        #Container .inner.section3 div:nth-child(2) a:hover {
          opacity: 0.8; }
    #Container .inner.section3 div ul {
      width: 100%; }
      #Container .inner.section3 div ul li {
        width: calc(50% - 5px);
        display: inline-block;
        position: relative;
        overflow: hidden;
        background: #fff; }
        #Container .inner.section3 div ul li a {
          width: 100%;
          height: 150px;
          display: block;
          background: no-repeat center center;
          background-size: cover;
          transition: opacity .2s ease;
          cursor: pointer; }
          #Container .inner.section3 div ul li a:hover {
            opacity: 0.8; }
          #Container .inner.section3 div ul li a i {
            width: 15px;
            position: absolute;
            top: 10px;
            right: 10px; }
          #Container .inner.section3 div ul li a p {
            min-width: 180px;
            text-align: center;
            padding: 10px 5px;
            white-space: nowrap;
            position: absolute;
            bottom: 10px;
            right: 0;
            font-size: 1.6rem;
            color: #fff; }
            @media screen and (max-width: 992px) {
              #Container .inner.section3 div ul li a p {
                font-size: 1.4rem; } }
            @media screen and (max-width: 568px) {
              #Container .inner.section3 div ul li a p {
                min-width: 92%; } }
        #Container .inner.section3 div ul li:nth-child(1) a {
          background-image: url(../img/index/section3_image01.jpg); }
          #Container .inner.section3 div ul li:nth-child(1) a p {
            background-color: #0066ae; }
        #Container .inner.section3 div ul li:nth-child(2) a {
          background-image: url(../img/index/section3_image02.jpg); }
          #Container .inner.section3 div ul li:nth-child(2) a p {
            background-color: #178709; }
        #Container .inner.section3 div ul li:nth-child(3) a {
          background-image: url(../img/index/section3_image03.jpg); }
          #Container .inner.section3 div ul li:nth-child(3) a p {
            background-color: #008295; }
            @media screen and (max-width: 568px) {
              #Container .inner.section3 div ul li:nth-child(3) a p {
                font-size: 1.2rem;
                letter-spacing: -0.6px; } }
            @media screen and (max-width: 400px) {
              #Container .inner.section3 div ul li:nth-child(3) a p {
                font-size: 1.0rem;
                letter-spacing: -0.6px; } }
        #Container .inner.section3 div ul li:nth-child(4) a {
          background-image: url(../img/index/section3_image04.jpg); }
          #Container .inner.section3 div ul li:nth-child(4) a p {
            background-color: #5b9e14; }

/*section4*/
#Container .inner.section4 {
  width: 100%;
  margin: 0 auto;
  padding: 5px;
  background: #fff; }
  #Container .inner.section4 div:nth-child(1) {
    width: calc(35% - 5px);
    float: left;
    height: 450px;
    background: #f0f0f0;
    margin-right: 5px;
    text-align: center; }
    @media screen and (max-width: 1200px) {
      #Container .inner.section4 div:nth-child(1) {
        width: calc(40% - 5px); } }
    @media screen and (max-width: 992px) {
      #Container .inner.section4 div:nth-child(1) {
        width: calc(100% - 0px);
        float: none;
        margin-right: 0px;
        height: auto;
        padding-bottom: 50px; } }
    #Container .inner.section4 div:nth-child(1) h2 {
      font-size: 3.0rem;
      color: #168fd5;
      margin: 80px auto 30px auto;
      text-align: center;
      position: relative;
      padding-bottom: 30px; }
      @media screen and (max-width: 992px) {
        #Container .inner.section4 div:nth-child(1) h2 {
          margin: 0px auto 20px auto;
          padding-top: 50px; } }
      #Container .inner.section4 div:nth-child(1) h2:after {
        content: '';
        width: 40px;
        height: 1px;
        background: #168fd5;
        display: block;
        left: 50%;
        bottom: 0;
        margin-left: -20px;
        position: absolute; }
    #Container .inner.section4 div:nth-child(1) p {
      font-size: 1.8rem;
      line-height: 3.0rem; }
      @media screen and (max-width: 1200px) {
        #Container .inner.section4 div:nth-child(1) p {
          font-size: 1.6rem; } }
      @media screen and (max-width: 992px) {
        #Container .inner.section4 div:nth-child(1) p {
          line-height: 2.6rem; } }
      #Container .inner.section4 div:nth-child(1) p.h-name {
        font-size: 2.0rem;
        margin-bottom: 10px; }
        @media screen and (max-width: 1200px) {
          #Container .inner.section4 div:nth-child(1) p.h-name {
            font-size: 1.8rem; } }
    #Container .inner.section4 div:nth-child(1) a.accessbt {
      min-width: 155px;
      display: inline-block;
      padding: 10px 0;
      margin-top: 15px;
      text-align: center;
      background: #168fd5;
      color: #fff;
      font-size: 1.6rem;
      transition: opacity .2s ease;
      cursor: pointer; }
      #Container .inner.section4 div:nth-child(1) a.accessbt i {
        width: 17px;
        display: inline-block;
        margin-right: 5px; }
      #Container .inner.section4 div:nth-child(1) a.accessbt:hover {
        opacity: 0.8; }
  #Container .inner.section4 div:nth-child(2) {
    width: 65%;
    float: left;
    background: #ffffff; }
    #Container .inner.section4 div:nth-child(2) iframe {
      width: 100%;
      height: 450px; }
    @media screen and (max-width: 1200px) {
      #Container .inner.section4 div:nth-child(2) {
        width: 60%; } }
    @media screen and (max-width: 992px) {
      #Container .inner.section4 div:nth-child(2) {
        width: 100%;
        float: none; } }

/*footer*/
footer {
  border-top: 0; }