@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

.anime {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 9999;
}

.anime img {
    width: 100%;
    margin-top: -5vw;
    align-items: center;
}


body {
    background-color: #111B30;
}


#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 1000;
}

#page-top img {
    width: 100%;
    border-radius: 50%;
    transform: rotate(-90deg);
}

#page-top a {
    text-decoration: none;
    width: 60px;
    height: 60px;
    display: block;
    opacity: 0.9;
    transition: all .4s ease;
}

#page-top a:hover {
    text-decoration: none;
    opacity: 0.5;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 10;
}

.header.change-color {
    background-color: #111B30;/*スクロールしたあとのヘッダー背景色*/
    transition: 1s; /*滑らかに*/
}

.header-inner {
    width: 80%;
    height: 60px;
    display: flex;
}
.header-inner a {
    width: 4%;

}

.header-inner a img {
    width: 100%;
    margin-top: 2.5px;
    margin-left: 5px;
}

.header-inner h1 {
    font-size: 30px;
    margin-left: 10px;
    font-family: "Kosugi", sans-serif;
    color: #DBE5F2;
    margin-top: 15px;
    margin-left: 20px;
}

.header-nav {
    width: 50%;
    margin-left: auto;
    margin-right: 2vw;
}

/* .header-nav-items {
    display: flex;
} */


.nav-item_ticket {
	position: fixed;
	width: 100px;
    height: 60px;
    top: 0;
    right: 80px;
    padding-left: 1vw;
    padding-right: 1vw;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 10;/*ボタンを一番上にしている(押せなくなるから)*/
    background-color: #0d44bb;
    text-align: center;
}

.nav-item_ticket img {
    display: block;
    width: 30px;
    height: 30px;
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
}

.nav-item_ticket p {
    margin-top: 3px;
    font-size: 12px;
    color: #fff;
}


.nav-item_access {
	position: fixed;
	width: 100px;
    height: 60px;
    top: 0;
    right: 195px;
    padding-left: 8px;
    padding-right: 8px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 10;/*ボタンを一番上にしている(押せなくなるから)*/
    background-color: #002468;
    font-size: 1.1vw;
    text-align: center;
}

.nav-item_access img {
    display: block;
    width: 30px;
    height: 30px;
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
}

.nav-item_access p {
    margin-top: 3px;
    font-size: 12px;
    color: #fff;
}

/*ナビメニューのスタイルを指定*/
nav.NavMenu{
	position: fixed; /*表示位置を固定*/
	z-index: 14; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	left: 0; /*表示位置を指定*/
	/*背景を白にする*/
	color: #000; /*文字色を黒にする*/
	text-align: center; /*テキストを中央揃え*/
	width: 100%; /*全幅表示*/
	transform: translateY(-100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
}

nav.NavMenu ul{
	background: #111B30; /*背景をグレーにする*/
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

nav.NavMenu ul li{
	font-size: 1.1em;
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px dotted #333;
}

nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a {
	display: block; /*クリックできる領域を広げる*/
	color: #DBE5F2;
	padding: 1em 0;
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
	transform: translateY(0%);/*上から出したい場合は、transform: translateYを使う。*/
}

/*トグルボタンのスタイルを指定*/
.Toggle {
    position: fixed;
    top: 0;
    right: 0;
	width: 80px;
	height: 60px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 14;/*ボタンを一番上にしている(押せなくなるから)*/
    background-color: #DBE5F2;
}

.Toggle span {
	display: block;
	position: absolute;
    margin-top: 10px;
    margin-left: 20px;
	left: 6px;
	width: 30px;
	border-bottom: solid 3px #000;
	transition: .35s ease-in-out;/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
	top: 9px;
}

.Toggle span:nth-child(2) {
	top: 18px;
}

.Toggle span:nth-child(3) {
	top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	transform: rotate(45deg);
}

/*↓↓↓ここからハンバーガーの中↓↓↓*/
.hamburger-touka {
    position: relative;
    background-color: rgba(0, 0, 0, 0.9);
}

.hamburger-box {
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    padding-bottom: 2%;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1vw;
}

.hamburger-left {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7%;
}

.hamburger-left img {
    width: 50%;
}

.hamburger-left a::before {
    position: relative;
    display: block;
    width: 30%;
    text-align: left;
    text-decoration: none;
    color: #DBE5F2;
}

.hamburger-center {
    width: 37.5%;
    padding-top: 5%;
}

.hamburger-center-top a {
    position: relative;
    display: block;
    width: 75%;
    padding: 2% 0 3% 5%;
    text-align: left;
    background-color: #DBE5F2;
    border-radius: 15px;
    white-space: pre-wrap;
    text-decoration: none;
    font-size: 1.1vw;
    font-weight: 500;
    color: #111B30;
}

.hamburger-center-top a::before {
    position: absolute;
    border-right: 1px solid #111B30;
    border-top: 1px solid #111B30;
    bottom: 0;
    content: "";
    height: 7px;
    margin: auto;
    top: 0;
    left: 5;
    transform: rotate(45deg);
    transition: all .5s;
    width: 7px;
  }

.hamburger-center-top a:nth-of-type(2) {
    margin-top: 5%;
}

.hamburger-center-text {
    display: flex;
    width: 100%;
}

.hamburger-center-text p {
    display: block;
    width: 70%;
    margin-top: 5%;
    text-align: left;
    color: #DBE5F2;
    font-size: 1.2vw;
    font-weight: 600;
    border-bottom: 1px solid #DBE5F2;
}

.hamburger-center-text-left,.hamburger-center-text-right {
    width: 46%;
    margin-right: 2%;
    margin-top: 5%;
}


.hamburger-center-text a:nth-of-type(1) {
    margin-top: 5%;
}

.hamburger-center-text a {
    position: relative;
    display: block;
    width: 90%;
    margin-right: auto;
    text-align: left;
    font-size: 1vw;
    color: #DBE5F2;
}

.hamburger-center-text a::before {
    position: absolute;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    bottom: 0;
    content: "";
    height: 7px;
    margin: auto;
    top: 0;
    left: 0;
    transform: rotate(45deg);
    transition: all .5s;
    width: 7px;
}

.hamburger-right {
    width: 37.5%;
    padding-top: 5%;
}
/*↑↑↑ここまでハンバーガーの中↑↑↑*/


/* ヒーローイメージスライド */
.main_imgBox {
    width: 100%;
    height: 680px;
    overflow: hidden;
    position: relative;
}
  
.main_img {
    z-index:-1;
    opacity: 0;
    width: 100%;
    height: 680px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

.main_img:nth-of-type(2) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s; }

  .main_img:nth-of-type(3) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s; }

  .main_img:nth-of-type(4) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s; }

  .main_img:nth-of-type(5) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s; }

  .main_img:nth-of-type(6) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s; }
@keyframes anime {
    0% {
          opacity: 0;
      }
      8% {
          opacity: 1;
      }
      17% {
          opacity: 1;
      }
      25% {
          opacity: 0;
          transform: scale(1.2) ;
           z-index:9;
      }
      100% { opacity: 0 }
  }



h2 {
    margin-top: 10%;
    margin-bottom: 1%;
    text-align: center;
    font-size: 2.4vw;
    font-family: "Kosugi", sans-serif;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #DBE5F2;
}

.border {
    width: 3vw;
    margin-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1vw;
    height: 2px;
    background-color: #9ED7D6;
    border-bottom: solid 2px deepskyblue;
}

.sub-title {
    display: block;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    text-align: center;
    font-size: 1vw;
    font-family: "Noto Sans JP", sans-serif;
    color: #DBE5F2;
}

/*　↓　トピックス部分　↓　*/

.swiper {
    width: 90%;
    height: 25vw;
}
.swiper-slide {
    width: 10%;
    padding: 1%;
    border: 2px solid silver;
    background-color: #6986A8;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
.swiper-slide:hover {
    width: 10%;
}
.photo1 {
    width: 100%;
    height: 10vw;
    overflow: hidden;
}
.p-1 {
    width: 100%;
    height: 10vw;
}
.photo1 img {
    width: 100%;
    transition: 1s;
    vertical-align: bottom;
}
.photo1 img:hover {
    transform: scale(1.1,1.1);
    transition: 1s;
}
.swiper-slide time {
    font-size: 0.9vw;
    color: #111B30;
}
.swiper-slide p {
    white-space: pre-wrap;
    padding-top: 2%;
    font-size: 1vw;
    color: #404040;
    font-family: "Noto Sans JP", sans-serif;
}
.swiper-slide p span {
    padding: 1%;
    font-size: 0.9vw;
    border: 1px solid silver;
    border-radius: 5px;
    background-color: rgba(173, 216, 230, 0.5);
}
/*　↑　トピックス部分　↑　*/


/*　↓　生き物図鑑　↓　*/
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    
    }
     .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left {
      animation: infinity-scroll-left 30s infinite linear 0.5s both;
    }
    .scroll-infinity__item {
      width: calc(100vw / 6);
    }
    .scroll-infinity__item>img {
      width: 100%;
      height: 10vw;
     }
  
     .scroll-infinity__wrap:hover ul {
      animation-play-state: paused; /*ホバーすると止まる*/
    }

    @keyframes infinity-scroll-right {
      from {
        transform: translateX(-100%);
      }
        to {
        transform: translateX(0%);
      }
      }
      .scroll-infinity__wrap {
        display: flex;
        overflow: hidden;
      }
      .scroll-infinity__list {
        display: flex;
        list-style: none;
        padding: 0
      }
      .scroll-infinity__list--right {
        animation: infinity-scroll-right 30s infinite linear 0.5s both;
      }
      .scroll-infinity__item {
        width: calc(100vw / 6);
      }
      .scroll-infinity__item>img {
        width: 100%;
        height: 10vw;
      }
.sample3 {
  width: calc(100vw / 6);
  overflow:		hidden;
  position:		relative;
}
.sample3 .caption {
  width: 60%;
  font-size:		1.1vw;
  text-align: center;
  color:			#fff;
  margin-top: 25%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.sample3 .mask {
  width:			100%;
  height: 95%;
  position:		absolute;
  top:			0;
  left:			0;
  opacity:		0;	/* マスクを表示しない */
  background-color:	rgba(0,0,0,0.4);
  -webkit-transition:	all 0.6s ease;
  transition:		all 0.6s ease;
}
.sample3:hover .mask {
  opacity:		1;	/* マスクを表示する */
  padding-left:	23%;	/* 右にずらす */
}
/*　↑　生き物図鑑　↑　*/

/* エリアガイド */
.aria {
    display: flex;
    margin-bottom: 1%;
}

.aria-left {
    width: 50%;
    margin-right: auto;
}

.main-text {
    padding: 5% 10% 5% 10%;
    font-size: 2vw;
    font-family: "Noto Sans JP", sans-serif;
    color: #DBE5F2;
    background-color: #111B30;
}

.sub-text {
    padding: 5% 10% 3% 10%;
    font-size: 1.2vw;
    font-weight: 600;
    font-family: "Noto Sans JP", sans-serif;
    color: #DBE5F2;
}

.third-text {
    padding: 1% 10% 1% 10%;
    font-size: 1vw;
    color: #DBE5F2;
}

.select-box {
    display: flex;
    width: 70%;
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
}

.select-box a {
    display: inline-block;
    width: 35%;
    padding: 3%;
    font-size: 1vw;
    position: relative;
    text-decoration: none;
    text-align: center;
    transition: .3s;
    font-family: "Noto Sans JP", sans-serif;
    color: #DBE5F2;
    border: 1px solid silver;
}

.select-box a:nth-of-type(2) {
    margin-left: 3%;
}

.select-box a {
    transition: all .5s;
}

.select-box a::before {
    width: 6px;
    height: 6px;
    border-right: 1px solid #DBE5F2;
    border-top: 1px solid #DBE5F2;
    bottom: 0;
    content: "";
    margin: auto;
    position: absolute;
    right: 10px;
    top: 0;
    transform: rotate(45deg);
    transition: all .5s;
}

.select-box a:hover {
	background-color: #6986A8;
    color: #111B30;
}

.select-box a:hover::after {
    width: 6px;
    height: 6px;
    border-right: 1px solid #111B30;
    border-top: 1px solid #111B30;
    bottom: 0;
    content: "";
    margin: auto;
    position: absolute;
    right: 10px;
    top: 0;
    transform: rotate(45deg);
    transition: all .5s;
}


.aria-right {
    width: 50%;
    margin-left: auto;
}

.aria-right img {
    width: 100%;
}

.parent-box {
    display: flex;
    position: relative;
    padding: 0;
    width: 100%;
    display: flex;
    cursor: pointer;
}

.parent-box:hover .child1 {
    filter: brightness(40%);
    transition: 0.4s ease-out;
}

.parent-box:hover .child2 {
    filter: brightness(40%);
    transition: 0.4s ease-out;
}
.parent-box:hover .child3 {
    filter: brightness(40%);
    transition: 0.4s ease-out;
}

.parent-box:hover .child4 {
    filter: brightness(40%);
    transition: 0.4s ease-out;
}

.parent-box:hover .child5 {
    filter: brightness(40%);
    transition: 0.4s ease-out;
}


.parent-box .child1:hover {
    filter: brightness(100%);
}


.parent-box .child2:hover {
    filter: brightness(100%);
}


.parent-box .child3:hover {
    filter: brightness(100%);
}


.parent-box .child4:hover {
    filter: brightness(100%);
}

.parent-box .child5:hover {
    filter: brightness(100%);
}

.child1 {
    width: 20%;
    height: 32.9vw;
    background-image: url(../images/floor4f.jpg);
    background-size: 100% 100%;
}

.child2 {
    width: 20%;
    height: 32.9vw;
    background-image: url(../images/floor3f.jpg);
    background-size: 100% 100%;
}

.child3 {
    width: 20%;
    height: 32.9vw;
    background-image: url(../images/floor2f.jpg);
    background-size: 100% 100%;
}

.child4 {
    width: 20%;
    height: 32.9vw;
    background-image: url(../images/floor1f.jpg);
    background-size: 100% 100%;
}

.child5 {
    width: 20%;
    height: 32.9vw;
    background-image: url(../images/dolphin.jpg);
    background-size: 100% 100%;
}

.floor-text {
    margin-top: 50%;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    color: #fff;
}

.floor-text p {
    font-size: 2.4vw;
}

.floor-text p:nth-of-type(2) {
    padding-top: 8%;
    font-size: 1vw;
}

.floor-text p:nth-of-type(3) {
    padding-top: 2%;
    font-size: 2.2vw;
}

.child1:hover,.child2:hover,.child3:hover,.child4:hover,.child5:hover {
    text-shadow: 0 0 10px #fff,0 0 15px #fff;
    transition: 0.4s ease-in-out;
}

.parent-box a {
    display: inline-block;
    margin-top: 20%;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 1em;
    height: 1em;
    border: 0.2em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
}

.banner-box {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3%;
    justify-content: space-between;
}

.banner-box a {
    width: 30%;
    margin-top: 2%;
}

.banner-box img {
    width: 100%;
    border-radius: 10px;
}

.parent-box-k1 {
    display: flex;
    position: relative;
}

.box1 {
    width: 50%;
    height: 20vw;
    background-image: url(../images/beautiful.jfif);
    background-size: 100% 100%;
}

.box2 {
    width: 50%;
    height: 20vw;
    background-image: url(../images/shibumari1.jpg);
    background-size: 100% 100%;
}

.parent-box1 a:nth-of-type(1) {
    padding-top: 4vw;
    position: absolute;
    margin-top: -15vw;
    left: 10vw;
    width: 30vw;
    height: 7vw;
    border: solid white;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2.4vw;
    text-align: center;
    font-family: "Kosugi", sans-serif;
}

.parent-box1 a:nth-of-type(1):hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255,0.6);
    border: solid rgba(255, 255, 255,0.6);
    transition: 0.5s;
}

.parent-box1 a:nth-of-type(2) {
    padding-top: 4vw;
    position: absolute;
    margin-top: -15vw;
    left: 60vw;
    width: 30vw;
    height: 7vw;
    border: solid white;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2.4vw;
    text-align: center;
    font-family: "Kosugi", sans-serif;
}

.parent-box1 a:nth-of-type(2):hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255,0.6);
    border: solid rgba(255, 255, 255,0.6);
    transition: 0.5s;
}

/* レコメンド */
.parent-box2 {
    background-image:radial-gradient(#fff 1px, #DBE5F2 1px);
    background-size: 8px 8px;
    padding-bottom: 3vw;
}

.parent-box2 h2 {
    padding-top: 3vw;
    text-align: center;
    font-size: 2.4vw;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-family: "Kosugi", sans-serif;
    color: #111B30;
}

.parent-box2 p {
    margin-bottom: 2vw;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
}

.border {
    width: 3vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-left: auto;
    margin-right: auto;
    border-bottom: solid 2px deepskyblue;
}

.flex-box-k1 {
    display: flex;
    width: 100%;
}

.flex-box-k1 img {
    width: 25vw;
    margin-right: 2vw;
    margin-left: 38%;
}

.box3 {
    padding-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    width: 30vw;
    height: 3vw;
    background-color: black;
    color: white;
    font-size: 1.3vw;
    text-align: center;
    border-radius: 9999px;
    font-family: "Noto Sans JP", sans-serif;
}

.box3 img {
    margin-left: 20%;
    width: 7%;
    vertical-align: bottom;
}

.box3 a {
    display: block;
    margin-left: 20%;
    color: white;
}

.box3:hover {
    background-color: #6986a8;
    transition: 0.5s;
}

/*メディア*/
.media {
    margin-bottom: 1%;
    text-align: center;
    font-size: 2.4vw;
    font-family: "Kosugi", sans-serif;
    letter-spacing: 0.1em;
    font-weight: 600;
}


.sub-title {
    display: block;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    text-align: center;
    font-size: 1vw;
    font-family: "Noto Sans JP", sans-serif;
}

.media-flex {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px dotted #808080;
}

.top {
    border-top: 1px dotted #808080;
}

.media-flex a {
    width: 50%;
    display: block;
    text-decoration: none;
    padding: 1vw 0vw;
}

.child-flex {
    display: flex;
}

.child-flex .imgs {
    width: 20%;
    margin-top: 0.5vw;
}

.child-flex .imgs img {
    width: 100%; 
    vertical-align: bottom;
    margin-left: 1vw;
    transition: 1s;
    border-radius: 50%;
    filter:grayscale(90%);/*黒、白、グレーのモノクロ５０％*/
}

.media-flex a:hover .child-flex .imgs img {
    transition: 1s;
    filter:grayscale(0%);
}

.child-flex .text {
    width: 80%;
    margin-left: 2vw; 
}

.child-flex .text p {
    margin-top: 0.5vw;
    white-space: pre-wrap; 
    font-size: 1.2vw;
    font-family: "Noto Sans JP", sans-serif;
    color: #fff;
}

.child-flex .text .mini {
    font-size: 1vw;
    color: #6986a8;
}


/*     教育      */
.kyouiku {
    margin-top: 5vw;
    background-image:url(../images/sea-2.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;   
}

.education-flex {
    width: 90%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10vw;
    margin-bottom: 2vw;
}

.education-flex .text2 {
    width: 40%;
    padding-left: 2vw;
    padding-right: 2vw;
}

.education-flex .text2 h2 {
    margin-top: 5vw;
    color: #fff;
}

.education-flex .text2 .next {
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
    margin-bottom: 1vw;
    height: 2px;
    background-color: #9ED7D6;
}

.education-flex .text2 .color {
    color: #fff;
}

.education-flex .text2 p {
    margin-top: 2vw;
    line-height: 1.7;
    font-size: 1.1vw;
    font-family: "Noto Sans JP", sans-serif;
    color: #fff;
}

.education-flex .photo {
    width: 60%;
}

.education-flex .photo img {
    width: 100%;
    vertical-align: bottom;
    border-radius: 35px;
    opacity: 0.6;
}

/*教育アコーディオン*/
.s_08 .accordion_area {
	max-width: 90%;
	margin: 0 auto;
	display: flex;
    margin-top: 1%;
}
.s_08 .accordion_area .accordion_one._flex {
	width: 49.5%;
}
.s_08 .accordion_one .accordion_header {
    display: flex;
    background-color: #dcdcdc;
	border-bottom: 1px solid #4682b4;
	color: #101010;
	font-size: 1.1vw;
	font-family: "Noto Sans JP", sans-serif;
	padding: 2.8vw 11% 2.8vw 7%;
	text-align: left;
	position: relative;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.2s;
}

.s_08 .accordion_one .accordion_header .icon {
    width: 1.7vw;
}

.s_08 .accordion_one .accordion_header .icon img {
    width: 100%;
    vertical-align: bottom;
}

.s_08 .accordion_one .accordion_header .space {
    margin-left: 1vw;
}

.s_08 .accordion_one .accordion_header_one {
    background-color: #101010;
	border-bottom: 1px solid #4682b4;	
    list-style-type: none; 
    transition: 1s; 
}

.s_08 .accordion_one .accordion_header_one:hover {
    opacity: 0.5;
    transition: 1s;
}

.s_08 .accordion_one .accordion_header_one a {
    display: block;
    text-decoration: none;
    color: #fff;
	font-size: 1.1vw;
    padding: 1.5vw 7%;
	text-align: left;
	position: relative;
	z-index: +1;
}

.s_08 .accordion_one .accordion_header:hover {
	opacity: .8;
}

/*四角*/
.s_08 .accordion_one .accordion_header .i_box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 60%;
	right: 5%;
	width: 2vw;
	height: 2vw;
	border: 1px solid #4682b4;
	margin-top: -1.5vw;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
}

.s_08 .accordion_one .accordion_header .i_box .one_i {
	display: block;
	width: 1.6vw;
	height: 1.6vw;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
	position: relative;
}

.s_08 .accordion_one .accordion_header.open .i_box {
	-webkit-transform: rotate(-360deg);
	transform: rotate(-360deg);
}

.s_08 .accordion_one .accordion_header .i_box .one_i:before, .s_08 .accordion_one .accordion_header .i_box .one_i:after {
	display: flex;
	content: '';
	background-color: #4682b4;
	border-radius: 10px;
	width: 1.6vw;
	height: 0.35vw;
	position: absolute;
	top: 0.6vw;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transform-origin: center center;
}

.s_08 .accordion_one .accordion_header .i_box .one_i:before {
	width: 0.35vw;
	height: 1.6vw;
	top: 0;
	left: 0.6vw;
}

.s_08 .accordion_one .accordion_header.open .i_box .one_i:before {
	content: none;
}

.s_08 .accordion_one .accordion_header.open .i_box .one_i:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
    height: -0.1;
    margin-left: -0.1vw;
}

.s_08 .accordion_one .accordion_inner {
	display: none;
	padding: 0;
	box-sizing: border-box;
}

.down-flex {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5vw;
}

.sub-flex {
    display: flex;
    width: 49.5%;
    margin-top: 1%;
    padding-bottom: 5vw;
}


.sub-right {
    margin-left: 1%;
}

.sub-flex .sub-img {
    width: 25%;
}

.sub-flex .sub-img img {
    width: 100%;
    vertical-align: bottom;
}

.sub-flex .sub-img img:hover p {
    background-color: #ffffff;
    transition: 1s;
}

.sub-flex p {
    width: 75%;
    background-color: #dcdcdc;
    transition: 1s;
}

.sub-flex p:hover {
    background-color: #ffffff;
    transition: 1s;
}

.sub-flex p a {
    display: block;
    font-size: 1.1vw;
    font-family: "Noto Sans JP", sans-serif;
    text-decoration: none;
    color: #101010;
    margin-top: 2vw;
    margin-left: 2vw;
    line-height: 2.6;
}
/*     教育      */


/*    フッター    */
footer {
    margin-top: 10%;
    width: 100%;
    background-color: #222222;
}

.footer-parent-box1 {
    display: flex;
    padding-top: 5%;
    margin-left: 5%;
    width: 85%;
    height: 60vw;
}

.footer-parent-box1 div ul li {
    width: 100%;
    margin-bottom: 5%;
}

.footer-parent-box1 div ul {
    width: 100%;
    margin-top: 1vw;
}

.footer-parent-box1 div ul li a {
    display: block;
    font-size: 0.9vw;
    color: white;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 100;
}

.footer-box1 {
    width: 20%;
    margin-right: 8%;
}

.footer-box2 {
    width: 20%;
    margin-right: 8%;
}

.footer-box3 {
    width: 20%;
    margin-right: 8%;
}

.footer-box4 {
    width: 20%;
}


h4 {
    width: 100%;
    color: white;
}

.h4-box1 {
    width: 120%;
    margin-top: 3%;
    border-bottom: dotted 0.5px white;
}

.h4-box1:not(:nth-of-type(1)) {
    margin-top: 2vw;
}

.h4-box1 h4 a {
    display: block;
    margin-bottom: 3%;
    font-size: 1.1vw;
    color: white;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}

footer {
    overflow: hidden;
}

/* footer ul {
   width: 100%;
   margin-top: 5%;
} */
footer ul li {
    width: 100%;
}

/* footer ul li a {
    display: block;
    font-size: 0.9vw;
    color: white;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 100;
} */

.sns-box {
    width: 100%;
    margin-top: 4%;
}

.sns-box ul {
    display: flex;
    
}

.sns-box ul li  {
    display: block;
    margin-right: 5%;
}

i {
    display: block;
    font-size: 2vw;
}

.fa-x-twitter {
    color: #000
}

.fa-square-facebook {
    color: #3d5998;
}

.fa-square-instagram {
    color: #cf2e92;
}

.fa-line {
    color: #00b990;
}

.fa-square-youtube {
    color: red;
}

.footer-info {
    width: 100%;
    background-color: #111B30;
    display: flex;
    align-items: center;
}

.footer-info ul {
    width: 50%;
    height: 60px;
    display: flex;
    align-items: center;
}

.footer-info ul li {
    width: 25%;
    height: 1.5vw;
    border-right: solid 1px white;
}

.footer-info ul li a {
    display: block;
    font-size: 1vw;
    color: white;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 100;
    text-align: center;
}

.footer-info ul li:nth-child(3) {
    border-right: none;
}

.footer-info p {
    width: 15%;
    margin-left: auto;
    margin-right: 10vw;
    font-size: 1vw;
    color: white;
    text-align: center;
}



/*メイン 6割紺#111B30 2割青#6986A8 1.5割水色#9ED7D6 0.5割白よりのグレー#DBE5F2*/