@charset "UTF-8";
@import url("reset.css");
@import url("swiper-bundle.min.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
html {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.5;
  color: #191919;
  background-color: #2ea7e0;
  background-image: radial-gradient(circle, #0000000d 5px, transparent 5px);
  background-position: 0 0;
  background-size: 35px 35px; }

main {
  display: block; }

header a img, main a img, footer a img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; }

header a:hover img, main a:hover img, footer a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8; }

.fade {
  /*margin-top: 10vh;*/
  opacity: 0;
  transition: opacity 2s; }

.fade.view {
  opacity: 1; }

/*ヘッダー*/
header {
  width: 100%;
  position: relative; }
  header #header_inner {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    height: 100px;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    header #header_inner h1 {
      width: 273px; }
    header #header_inner nav {
      width: calc(100% - 400px); }
      header #header_inner nav #mainmenu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end; }
        header #header_inner nav #mainmenu li {
          margin: 0 0 0 auto;
          text-align: right;
          color: #EA5514; }
          header #header_inner nav #mainmenu li a {
            position: relative;
            color: #EA5514;
            text-decoration: none;
            display: block;
            font-weight: bold; }
            header #header_inner nav #mainmenu li a::after {
              position: absolute;
              left: 0;
              content: '';
              width: 100%;
              height: 2px;
              background: #EA5514;
              bottom: -8px;
              /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
              opacity: 0;
              visibility: hidden;
              transition: 0.3s; }
            header #header_inner nav #mainmenu li a:hover::after {
              visibility: visible;
              bottom: -2px;
              opacity: 1; }
          header #header_inner nav #mainmenu li .active {
            width: 100%;
            background-color: #EA5514;
            padding: 0.25em 4%;
            border-radius: 6px;
            color: #fff; }
            header #header_inner nav #mainmenu li .active:after {
              height: 0px; }

/*メイン*/
#top_image {
  background-image: url("../img/base/back_top.png");
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
  background-size: cover;
  height: 1000px;
  /* 0.5秒間かけてフェードイン */
  /* 1秒間かけてフェードイン */
  /* 1.5秒間かけてフェードイン */
  /* 2秒間かけてフェードイン */ }
  #top_image .fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0; }
  #top_image .fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0; }
  #top_image .fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0; }
  #top_image .fadeIn2s {
    animation-name: fadeIn2s;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0; }
  #top_image #top_inner {
    width: 30%;
    margin: 0 0 0 10%;
    padding: 100px 0 0; }
    #top_image #top_inner .slidein.is-animated {
      animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
    #top_image #top_inner figure {
      width: 70%;
      margin: 1em 0 0; }

@keyframes fadeIn1s {
  100% {
    transform: translateY(0);
    opacity: 1; } }
@keyframes fadeIn500ms {
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes fadeIn1500ms {
  100% {
    transform: translateY(0);
    opacity: 1; } }
@keyframes fadeIn2s {
  100% {
    transform: translateX(0);
    opacity: 1; } }
#about {
  width: 80%;
  margin: 5em auto; }
  #about ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3em 0 0; }
    #about ul li:nth-child(1) {
      width: 59%; }
    #about ul li:nth-child(2) {
      width: 37%; }
    #about ul li:nth-child(3) {
      width: 100%; }

.back_o {
  background-color: #F8B62D;
  padding: 5em 0;
  width: 100%; }

#reason {
  width: 80%;
  margin: 0 auto; }
  #reason h2 {
    margin: -10em 0 0; }
  #reason #youtube {
    width: 50%;
    margin: 3em auto 0;
    aspect-ratio: 16 / 9; }
    #reason #youtube iframe {
      width: 100%;
      height: 100%; }
  #reason ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 12em 0 0; }
    #reason ul::after {
      content: "";
      display: block;
      width: 31.333%; }
    #reason ul li {
      width: 31.333%;
      position: relative; }
      #reason ul li:nth-child(n+4) {
        margin: 10em 0 0; }
      #reason ul li:nth-child(1) dl dt {
        color: #8FC31F; }
      #reason ul li:nth-child(2) dt {
        color: #171C61; }
      #reason ul li:nth-child(3) dt {
        color: #F39800; }
      #reason ul li:nth-child(4) dt {
        color: #E4007F; }
      #reason ul li:nth-child(5) dt {
        color: #920783; }
      #reason ul li figure {
        position: absolute;
        top: -8em;
        left: 50%;
        transform: translateX(-50%);
        border: 9px solid #F8B62D;
        border-radius: 50%;
        /*角丸*/
        width: 200px; }
      #reason ul li dl {
        background-color: #fff;
        border-radius: 15px;
        padding: 8em 5% 2em;
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4); }
        #reason ul li dl dt {
          font-size: 156%;
          font-weight: bold;
          text-align: center; }
        #reason ul li dl dd {
          margin: 1em 0 0;
          font-size: 120%; }
      #reason ul li .re_image {
        width: 70%;
        margin: 0 auto; }

#slider_position {
  margin: 3em 0 0; }
  #slider_position #container {
    width: 100%; }
    #slider_position #container .swiper-wrapper {
      transition-timing-function: linear; }
      #slider_position #container .swiper-wrapper .swiper-slide {
        margin: 0 0.5%; }
    #slider_position #container .swiper02 {
      overflow-x: hidden !important;
      margin: 0;
      z-index: 5; }

#members {
  width: 80%;
  margin: 5em auto 0; }
  #members .me_inner01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #members .me_inner01 dl {
      width: 50%; }
      #members .me_inner01 dl dt {
        color: #FFF100;
        font-weight: bold;
        font-size: 187%; }
      #members .me_inner01 dl dd {
        margin: 1em 0 0;
        color: #fff;
        font-size: 110%; }
    #members .me_inner01 figure {
      width: 48%; }
  #members .me_inner02 {
    margin: 3em 0 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between; }
    #members .me_inner02 dl {
      width: 50%; }
      #members .me_inner02 dl dt {
        color: #FFF100;
        font-weight: bold;
        font-size: 187%; }
      #members .me_inner02 dl dd {
        margin: 1em 0 0;
        color: #fff;
        font-size: 110%; }
    #members .me_inner02 figure {
      width: 48%; }
  #members #b_banner {
    margin: 3em 0 0; }

/*フッター*/
#f_wrap {
  background-color: #F8B62D;
  padding: 3em 0; }

footer {
  margin: 8em 0 0;
  color: #171C61;
  position: relative; }
  footer #f_image {
    position: absolute;
    top: -69px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    footer #f_image .f_01 {
      width: 48%; }
      footer #f_image .f_01 img {
        width: 65px; }
    footer #f_image .f_02 {
      width: 24%; }
      footer #f_image .f_02 img {
        width: 87px; }
    footer #f_image .f_03 {
      width: 24%;
      text-align: right; }
      footer #f_image .f_03 img {
        width: 71px; }
  footer #footer_inner {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    footer #footer_inner #f_left {
      width: 48%; }
      footer #footer_inner #f_left h2 {
        color: #fff;
        font-size: 130%; }
      footer #footer_inner #f_left #f_menu {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row; }
        footer #footer_inner #f_left #f_menu li {
          width: 48%; }
          footer #footer_inner #f_left #f_menu li a {
            margin: 0 0 1em;
            color: #171C61;
            text-decoration: none;
            display: block; }
            footer #footer_inner #f_left #f_menu li a:hover, footer #footer_inner #f_left #f_menu li a:active {
              text-decoration: underline; }
    footer #footer_inner #f_right {
      width: 48%;
      margin: 5em 0 0; }
      footer #footer_inner #f_right a {
        margin: 0 0 1em;
        color: #171C61;
        text-decoration: none; }
        footer #footer_inner #f_right a:hover, footer #footer_inner #f_right a:active {
          text-decoration: underline; }
      footer #footer_inner #f_right ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        footer #footer_inner #f_right ul li figure {
          width: 300px; }
        footer #footer_inner #f_right ul li dl dt {
          font-size: 130%;
          font-weight: bold; }
        footer #footer_inner #f_right ul li dl dd span {
          display: block; }
          footer #footer_inner #f_right ul li dl dd span img {
            width: 20px;
            margin: 0 10px 0 0; }
        footer #footer_inner #f_right ul li p {
          margin: 39px 0 0; }
          footer #footer_inner #f_right ul li p .sns {
            font-size: 130%;
            font-weight: bold;
            display: block; }
        footer #footer_inner #f_right ul li .sns_icon figure {
          width: 50px; }
      footer #footer_inner #f_right #bottom_menu {
        margin: 2em 0 0; }
        footer #footer_inner #f_right #bottom_menu a {
          margin: 0 2% 0 0; }
  footer address {
    margin: 2em 2%;
    text-align: center; }

/*TOPへ戻るボタン設定*/
#page-top {
  position: fixed;
  bottom: 10px;
  right: 20px;
  font-size: 90%;
  z-index: 999;
  font-family: "M PLUS Rounded 1c";
  font-weight: bold; }
  #page-top img {
    width: 50px;
    display: block;
    margin: 0 auto 0.5em; }
  #page-top a {
    /*コレ*/
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #171C61;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; }
  #page-top a:hover, #page-top a:active {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7; }

/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  .sp {
    display: none; }

  #top_image {
    height: 1000px; }
    #top_image .track {
      position: absolute;
      top: 0;
      right: 15%;
      width: 700px; }
    #top_image .members {
      position: absolute;
      bottom: 0;
      right: 0%;
      width: 1250px; }
    #top_image .staff01 {
      position: absolute;
      top: 0;
      right: 45%;
      width: 300px; }

  /*フッター*/ }
/* tablet1 */
@media only screen and (min-width: 1024px) and (max-width: 1420px) {
  /*基本設定*/
  html {
    font-size: 90%; }

  .sp {
    display: none; }

  /*ヘッダー*/
  /*メイン*/
  #top_image {
    height: 600px; }
    #top_image .track {
      position: absolute;
      top: 0;
      right: 15%;
      width: 40%; }
    #top_image .members {
      position: absolute;
      bottom: 0;
      right: 0%;
      width: 70%; }
    #top_image .staff01 {
      position: absolute;
      top: 0;
      right: 45%;
      width: 20%; }

  #reason h2 {
    margin: -8em 0 0; }
  #reason ul {
    margin: 8em 0 0; }
    #reason ul li:nth-child(n+4) {
      margin: 8em 0 0; }
    #reason ul li figure {
      top: -5em;
      width: 120px; }
    #reason ul li dl {
      padding: 6em 5% 2em; }

  /*フッター*/ }
@media only screen and (max-width: 1023px) {
  /* メニューコンテナ全体のスタイル */
  /*.menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }*/
  /* メニューボタンのスタイル */
  .menu-button {
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 1000; }

  /* メニューバーのスタイル */
  .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: #283B6D;
    transition: 0.4s; }

  /* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
  #menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
    transform: rotate(45deg) translate(-2px, 3px); }

  /* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
  #menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
    opacity: 0; }

  /* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
  #menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -13px); }

  /* メニュートグルのスタイル */
  #menu-toggle {
    display: none; }

  /* メニューのスタイル */
  .menu {
    position: fixed;
    top: 0;
    right: -100%;
    /* 変更: メニューを左からスライドインさせるために left に設定 */
    width: 100%;
    height: 100%;
    background-color: white;
    transition: 0.4s;
    z-index: 1;
    overflow-y: auto;
    background-image: url("../img/base/menu_back.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 100%; }

  /* メニュートグルがチェックされた場合のメニューの表示アニメーション */
  #menu-toggle:checked ~ .menu {
    right: 0;
    /* メニューを表示させるために left を 0 に変更 */ }

  /* メニュー内のリストのスタイル */
  .menu ul {
    list-style: none;
    padding: 70px 5%; }

  /* メニュー内リストのリンクのスタイル */
  .menu ul li a {
    text-decoration: none;
    color: #283B6D;
    font-size: 18px;
    display: block;
    padding: 10px 0;
    transition: 0.2s; }

  /* メニュー内リストのリンクのホバー時のスタイル */
  .menu ul li a:hover {
    color: #bf7497; } }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  html {
    font-size: 85%;
    position: relative; }

  /*ヘッダー*/
  header {
    position: fixed;
    top: 0;
    z-index: 6; }
    header #header_inner {
      width: 90%; }

  /*メイン*/
  .pc {
    display: none; }

  #top_image {
    height: 450px; }
    #top_image .track {
      position: absolute;
      top: 2em;
      right: 15%;
      width: 35%; }
    #top_image .members {
      position: absolute;
      bottom: 0;
      right: 0%;
      width: 65%; }
    #top_image .staff01 {
      position: absolute;
      top: 0;
      right: 45%;
      width: 15%; }

  #reason h2 {
    margin: -7em 0 0; }
  #reason #youtube {
    width: 80%; }
  #reason ul li figure {
    top: -7em;
    width: 120px; }
  #reason ul li dl {
    padding: 4em 5% 2em; }
  #reason ul li .re_image {
    width: 80%;
    margin: 0 auto; }

  /*フッター*/ }
@media only screen and (min-width: 900px) and (max-width: 1023px) {
  #top_image {
    height: 550px; } }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  html {
    font-size: 85%;
    position: relative; }

  .pc {
    display: none; }

  /*ヘッダー*/
  header {
    position: fixed;
    top: 0;
    z-index: 6; }
    header #header_inner {
      position: absolute;
      top: 0;
      left: 5%;
      z-index: 5;
      height: 100px;
      transform: translateX(0%);
      width: 200px;
      margin: 0; }
      header #header_inner h1 {
        width: 200px; }

  /*メイン*/
  #top_image {
    max-height: 500px; }
    #top_image #top_inner {
      width: 200px;
      margin: 0 0 0 10%;
      padding: 100px 0 0; }
      #top_image #top_inner .slidein.is-animated {
        animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
      #top_image #top_inner figure {
        width: 70%;
        margin: 0; }
    #top_image .track {
      display: none; }
    #top_image .members {
      position: absolute;
      bottom: 0;
      right: 0%;
      width: 100%; }
    #top_image .staff01 {
      display: none; }

  #about {
    width: 90%;
    margin: 2.5em auto; }
    #about ul {
      margin: 1.5em 0 0; }

  .back_o {
    padding: 2.5em 0; }

  #reason {
    width: 90%;
    margin: 0 auto; }
    #reason h2 {
      margin: 0; }
    #reason #youtube {
      width: 90%; }
    #reason ul {
      flex-direction: column;
      margin: 10em 0 0; }
      #reason ul li {
        width: 80%;
        margin: 0 auto; }
        #reason ul li:nth-child(n+2) {
          margin: 10em auto 0; }
        #reason ul li figure {
          position: absolute;
          top: -8em;
          left: 50%;
          transform: translateX(-50%);
          border: 9px solid #F8B62D;
          border-radius: 50%;
          /*角丸*/
          width: 150px; }
        #reason ul li dl {
          background-color: #fff;
          border-radius: 15px;
          padding: 6em 5% 2em;
          box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4); }
          #reason ul li dl dt {
            font-size: 156%;
            font-weight: bold;
            text-align: center; }
          #reason ul li dl dd {
            margin: 1em 0 0;
            font-size: 120%; }
        #reason ul li .re_image {
          display: none; }

  #slider_position {
    margin: 2.5em 0 0;
    padding: 0 0 2.5em; }
    #slider_position #container .swiper02 {
      margin: -7em 0 0; }

  #members {
    width: 90%;
    margin: 2.5em auto 0; }
    #members .me_inner01 {
      flex-direction: column-reverse; }
      #members .me_inner01 dl {
        width: 100%; }
      #members .me_inner01 figure {
        width: 100%;
        margin: 0 0 1em; }
    #members .me_inner02 {
      margin: 3em 0 0;
      flex-direction: column-reverse; }
      #members .me_inner02 dl {
        width: 100%; }
      #members .me_inner02 figure {
        width: 100%;
        margin: 0 0 1em; }
    #members #b_banner {
      margin: 3em 0 0; }

  /*フッター*/
  #f_wrap {
    background-color: #F8B62D;
    padding: 3em 0; }

  footer {
    margin: 8em 0 0; }
    footer #f_image {
      position: absolute;
      top: -48px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%; }
      footer #f_image .f_01 {
        display: none; }
      footer #f_image .f_02 {
        display: none; }
      footer #f_image .f_03 {
        width: 50px;
        text-align: right; }
        footer #f_image .f_03 img {
          width: 50px; }
    footer #footer_inner {
      width: 90%;
      margin: 0 auto;
      flex-direction: column-reverse; }
      footer #footer_inner #f_left {
        width: 100%; }
      footer #footer_inner #f_right {
        width: 100%;
        margin: 0; }
        footer #footer_inner #f_right ul li figure {
          width: 200px; } }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  html {
    font-size: 80%; }

  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }