@charset "utf-8";
/* CSS Document */
/*****
JS関連は下の方にあります　メディアサイズはデザイナー指示によるものです
スマートフォン用 @media screen使用する場合は599px以下
*/
@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: swap;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2");
  src: url("../webfonts/fa-regular-400.woff2") format("woff2");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP";
  font-weight: normal;
}
ul {
  list-style: none;
}
#css {
  width: auto;
}
.hidden_sp {
  display: none !important;
  margin: 0;
  padding: 0;
  font-size: 0;
}
img {
  transition: all 2s ease-out;
  -webkit-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  -ms-transition: all 2s ease-out;
}
.sp {
  display: none;
}

/* ヘッダー */
header {
  background: #fff;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
header ul {
  text-align: right;
  margin: 10px 0;
}
header ul li {
  display: inline-block;
  margin-right: 40px;
  width: 180px;
}
header ul li img {
  width: 100%;
}
.headertel {
  color: #788bd4;
  line-height: 1;
}
.headertel p {
  font-size: 20px;
  font-weight: bold;
}
.headertel span {
  font-size: 12px;
}
/* メインエリア */
main {
  width: 96%;
  margin: 50px auto 0;
  overflow: hidden;
}
div.left {
  width: 100%;
}
div.right {
  width: 100%;
}
.space {
  margin-bottom: 20px;
}
div.clearfix {
  margin-bottom: 50px;
}
/* タイトルバー */
div.titlebar {
  position: relative;
  padding: 10px 16px;
  margin: 0 0 10px;
  border-radius: 4px;
  background: linear-gradient(to bottom right, rgba(136, 173, 255, 1), rgba(227, 239, 255, 1));
  background: -moz-linear-gradient(top left, rgba(136, 173, 255, 1), rgba(227, 239, 255, 1));
  background: -webkit-linear-gradient(top left, rgba(136, 173, 255, 1), rgba(227, 239, 255, 1));
  font-size: 1.4em;
  font-family: "Alegreya Sans", sans-serif;
  color: #ffffff;
}
div.titlebar i {
  font-size: 0.6em;
  font-style: normal;
}
div.titlebar a {
  float: right;
  color: #6894d8;
  font-size: 24px;
  font-family: "Alegreya Sans", sans-serif;
  text-decoration: none;
}
/* 新着 */
div#news {
  margin-bottom: 50px;
}
ul.newslist {
  overflow-y: scroll;
  max-height: 240px;
}
ul.newslist li {
  margin-bottom: 20px;
}
ul.newslist li a {
  color: #000;
}
ul.newslist li img {
  display: inline-block;
  width: 80px;
  vertical-align: top;
  margin-right: 10px;
  float: left;
}
ul.newslist li p {
  display: inline-block;
  width: 70%;
  font-size: 0.8em;
}
ul.newslist li span {
  display: block;
  font-weight: bold;
  text-align: left;
}
/* イベント */
div#eventhowto img {
  width: 100%;
}
/* ピックアップ */
ul.pickup {
  text-align: center;
  margin-bottom: 50px;
  margin-top: -10px;
}
ul.pickup div.img-wrap {
  width: 80%;
  margin: 20px auto;
}
ul.pickup div.img-wrap img {
  width: 100%;
}
ul.pickup div.pickupWord {
  display: inline-block;
  width: 90%;
  margin: 0 auto;
  height: 300px;
  overflow: scroll;
}
ul.pickup div.pickupWord span.pickupname {
  display: block;
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 800;
  font-size: 2em;
  color: #6894d8;
}
ul.pickup div.pickupWord span.pickupname i {
  font-weight: normal;
  font-size: 0.4em;
  font-style: normal;
}
ul.pickup div.pickupWord span.pickupBWH {
  color: #6894d8;
}
ul.pickup .pickupArrow {
  display: block;
  margin: auto;
}
ul.pickup div.pickupWord p {
  margin: 1em 0;
  font-size: 0.8em;
  text-align: left;
}
/* aside */
div.inbox {
  width: 100%;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 30px;
  position: relative;
}
div.titlebar2 {
  width: 96%;
  position: relative;
  padding: 10px 16px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background: linear-gradient(to bottom right, rgba(136, 173, 255, 1), rgba(227, 239, 255, 1));
  background: -moz-linear-gradient(top left, rgba(136, 173, 255, 1), rgba(227, 239, 255, 1));
  background: -webkit-linear-gradient(top left, rgba(136, 173, 255, 1), rgba(227, 239, 255, 1));
  font-size: 1.4em;
  font-family: "Alegreya Sans", sans-serif;
  color: #ffffff;
}
div.titlebar2 i {
  font-size: 0.6em;
  font-style: normal;
}
div.titlebar2 a {
  display: inline-block;
  position: absolute;
  right: 1%;
  color: #788bd4;
  font-size: 0.7em;
  text-decoration: none;
}

#slide {
  padding-top: 50px;
}
/*newface*/
.newfacePhoto div {
  position: relative;
  width: 240px;
  height: 378px;
  margin: 0 auto;
}
.newfacePhoto div img {
  width: 100%;
  height: auto;
}
.girl_namesize {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.47);
  color: #fff;
  padding: 5px 0;
}
.girl_namesize a {
  text-decoration: none;
}
.beginner1 {
  width: 40px;
  height: 40px;
  background: url(../images/icon_newface.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 10px;
}

/* 本日の出勤 */
div.today {
  background: url("../images/top/schedule_back.jpg") no-repeat top;
}
ul.todaylist {
  text-align: center;
}
ul.todaylist li:nth-child(odd) {
  display: inline-block;
  width: 100px;
  height: 45px; /*border-radius: 50%;*/
  text-align: center;
  background-color: #92b2ff;
  line-height: 45px;
}
ul.todaylist li:nth-child(even) {
  display: inline-block;
  width: 100px;
  height: 45px; /*border-radius: 50%;*/
  text-align: center;
  background-color: #788bd4;
  line-height: 45px;
}
ul.todaylist li a {
  color: #ffffff;
  text-decoration: none;
}
ul.todaylist .day-selected {
  background-color: #f5c0ff !important;
}
li.Today,
.DayAfterT {
  background: #92b2ff;
}
li.Tomorrow,
.TwoDaysAfterT {
  background: #788bd4;
}
div.scheduleflex {
  display: flex;
  justify-content: center;
  width: 100%;
}
ul.schedule {
  margin: 30px auto;
  text-align: center;
  width: 95%;
}
ul.schedule li {
  display: inline-block;
  margin: 0 5px 20px;
}
ul.schedule li a {
  text-decoration: none;
}
div.schedulePhoto {
  position: relative;
  width: 280px;
  overflow: hidden;
  height: auto;
}
div.schedulePhoto img {
  width: 100%;
}
p.scheduleBWH {
  color: #333333;
  text-align: left;
  padding: 0.5em 0;
  font-size: 0.9em;
  z-index: 555;
}
p.scheduleBWH i {
  font-family: "Font Awesome 5 Free", "Alegreya Sans", sans-serif;
  font-style: normal;
}
.more_btn {
  background: linear-gradient(to bottom right, #788bd4, #f5c0ff);
  background: -moz-linear-gradient(top left, #788bd4, #f5c0ff);
  background: -webkit-linear-gradient(top left, #788bd4, #f5c0ff);
  border-radius: 10px;
  transition: background-color 1s, border-radius 2s;
  width: 50%;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}
.more_btn a {
  text-decoration: none;
  color: #fff;
}
.freearea {
  color: #ff0000;
}

/* システム */
#a_system {
  margin-top: -45px;
  padding-top: 45px;
}
div.system {
  background: url("../images/top/system_back.jpg") no-repeat top;
  color: #4d4d4d;
}
.system_bg {
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
}
.system_left {
  width: 100%;
}
.basic_play_flex {
  display: flex;
}
.basic_play_title {
  background: #85b4ff;
  color: #fff;
  width: 120px;
  height: 50px;
  text-align: center;
}
.basic_play_title p {
  font-size: 14px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.basic_play_title p span {
  font-size: 18px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.basic_play_con {
  background: #f1f1f1;
  width: 100%;
  height: 50px;
}
.basic_play_con div {
  margin: 0 auto;
  width: 490px;
}
.basic_play_con p {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.basic_play_con span {
  font-size: 14px;
  color: #2e3191;
}
.travel_cost {
  font-size: 16px;
  padding: 10px 30px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin: 20px auto;
  width: 540px;
}
.travel_cost span {
  font-size: 14px;
}

.course {
  text-align: center;
}
.subtitle {
  color: #2e3191;
}
.course_s h2 {
  padding: 0.3em 0.3em 0.3em 0.8em;
  -webkit-transform: skewX(-15deg);
  transform: skewX(-15deg);
  color: #ffffff;
  background-color: #2e3191;
}
.course_s h2 span {
  display: block;
  -webkit-transform: skewX(15deg);
  transform: skewX(15deg);
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_s ul {
  font-size: 32px;
  margin-top: 10px;
}
.course_s li {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_s li span {
  font-size: 24px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.vertical_bar {
  border-right: 1px solid;
}

.course_m {
  margin-top: 10px;
}
.course_m h2 {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 17%;
  text-align: center;
  color: #2e3191;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_m h2::before,
.course_m h2::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35%;
  height: 1px;
  border-top: 1px solid #2e3191;
}
.course_m h2::before {
  left: 0;
}
.course_m h2::after {
  right: 0;
}
.course_m ul {
  font-size: 32px;
  margin-top: 10px;
}
.course_m li {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_m li span {
  font-size: 24px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_3p {
  margin-top: 10px;
}
.course_3p h2 {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 17%;
  text-align: center;
  color: #2e3191;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_3p h2::before,
.course_3p h2::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35%;
  height: 1px;
  border-top: 1px solid #2e3191;
}
.course_3p h2::before {
  left: 0;
}
.course_3p h2::after {
  right: 0;
}
.course_3p ul {
  font-size: 32px;
  margin-top: 10px;
}
.course_3p li {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_3p li span {
  font-size: 24px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}

.course_m {
  margin-top: 10px;
}
.course_m h2 {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 17%;
  text-align: center;
  color: #2e3191;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_m h2::before,
.course_m h2::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35%;
  height: 1px;
  border-top: 1px solid #2e3191;
}
.course_m h2::before {
  left: 0;
}
.course_m h2::after {
  right: 0;
}
.course_m table {
  font-size: 22px;
  border-collapse: collapse;
  border-spacing: 0;
}
.course_m td {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_m tr span {
  font-size: 16px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_3p {
  margin-top: 10px;
}
.course_3p h2 {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 17%;
  text-align: center;
  color: #2e3191;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_3p h2::before,
.course_3p h2::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35%;
  height: 1px;
  border-top: 1px solid #2e3191;
}
.course_3p h2::before {
  left: 0;
}
.course_3p h2::after {
  right: 0;
}
.course_3p table {
  font-size: 22px;
  border-collapse: collapse;
  border-spacing: 0;
}
.course_3p td {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.course_3p tr span {
  font-size: 16px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}

.system_right {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.charged_option h2 {
  background: #85b4ff;
  color: #fff;
  width: 200px;
  text-align: center;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.charged_option table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid;
  margin-top: 5px;
}
.charged_option table tr {
  border-bottom: 1px solid;
}
.charged_option table td {
  position: relative;
  height: 35px;
  line-height: 1.2;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.charged_option table td p {
  display: inline-block;
  background-color: #2e3191;
  color: #fff000;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
.charged_option table td span {
  font-size: 12px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.gray_bg {
  background-color: #f1f1f1;
}
.annotation {
  font-size: 12px;
  color: red;
  text-align: right;
}

.free_option {
  text-align: left;
  margin-top: 10px;
}
.free_option h2 {
  background: #85b4ff;
  color: #fff;
  width: 200px;
  text-align: center;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
}
.free_option .notice {
  font-size: 12px;
}

.system_finaly {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  width: 90%;
  margin: 20px auto 0;
  padding: 5px;
  text-align: center;
}

.about_booking {
  margin-block: 15px;
  text-align: center;
}
.about_booking a {
  font-weight: bold;
  padding: 0 3em;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  position: relative;
  color: #2e3191;
  font-size: 24px;
  text-decoration: underline;
}
.about_booking a::before,
.about_booking a::after {
  content: "";
  background: #2e3191;
  width: 2em;
  height: 3px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.about_booking a::before {
  left: 0;
}
.about_booking a::after {
  right: 0;
}
/* SNS等 */
div.sns {
  padding-bottom: 50px;
}
div.sns li {
  display: block;
  width: 90%;
  vertical-align: top;
  margin: 0px auto 60px;
  text-align: center;
}
div.sns li img {
  width: 100%;
}
div.blog {
  display: none;
}
/* RECRUIT */
div.recruit {
  background: url("../images/top/sm_wall.jpg") no-repeat top;
  max-width: 100%;
  padding-bottom: 50px;
}
div.recruit img {
  display: block;
  width: 96%;
  vertical-align: top;
  margin: 0 auto 20px;
}
/* RECRUIT Nav */
.float_Recruit {
  display: none;
  margin: 0;
  padding: 0;
  font-size: 0;
}
/* SP Nav */
footer div.spnavi {
  display: flex;
  position: fixed;
  bottom: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  width: 100%;
}
footer div.spnavi ul {
  width: 100%;
  height: 70px;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #d8edff;
  display: flex;
  flex-wrap: nowrap;
}
footer div.spnavi ul li {
  display: inline-block;
  width: 33.33333%;
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
  transition: background-color 2s;
}
footer div.spnavi ul li:hover {
  background-color: #5f97ff;
  transition: background-color 800ms;
}
footer div.spnavi ul li a {
  display: block;
  height: 70px;
  width: 100px;
  background: no-repeat center;
  margin: auto;
}
footer div.spnavi ul li.spnavi_tel a {
  background: url("../images/common/sp_TEL.png");
}
footer div.spnavi ul li.spnavi_tel a:hover {
  background: url("../images/common/sp_TEL2.png");
}
footer div.spnavi ul li.spnavi_mail a {
  background: url("../images/common/sp_mail.png");
}
footer div.spnavi ul li.spnavi_mail a:hover {
  background: url("../images/common/sp_mail2.png");
}
footer div.spnavi ul li.spnavi_rec a {
  background: url("../images/common/sp_rec.png");
}
footer div.spnavi ul li.spnavi_rec a:hover {
  background: url("../images/common/sp_rec2.png");
}
/* フッター */
footer {
  background: url("../images/top/footer_wall.jpg") no-repeat top;
}
footer img {
  display: block;
  margin: 0 auto 20px;
}
footer h2 {
  font-size: 0.6em;
  font-weight: normal;
  color: #788bd4;
  text-align: center;
  padding-bottom: 80px;
}
footer h2 a {
  color: #788bd4;
}
.footerLogo {
  width: 100px;
}

/*  ---------------------------- TOPに戻る ----------------------------  */
#goto_top {
  position: fixed;
  right: 1%;
  bottom: 1%;
}
#goto_top a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #788bd4;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 80px;
  text-decoration: none;
}
/******* javascript関連　*/
/*slick setting*/
.slider {
  margin: 0 auto;
  width: 100%;
  opacity: 0;
  transition: 3s;
}
.slick-initialized {
  opacity: 1;
}
.slider img {
  height: auto;
  width: 100%;
  max-width: 559px;
}
.slick-prev:before,
.slick-next:before {
  color: #000;
}
.slider {
  width: 100%;
  max-width: 559px;
}
/*slick2 setting*/
.newfacePhoto {
  width: 300px;
  height: 378px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.newfacePhoto a {
  width: 100%;
}
.newfacePhoto img.newfacegirl {
  width: 100%;
}
.newfacePhoto .slick-arrow {
  z-index: 20;
}
.newfacePhoto .slide-arrow {
  position: absolute;
  top: 40%;
}
.newfacePhoto .prev-arrow {
  left: 0;
}
.newfacePhoto .next-arrow {
  right: 0;
}

.schedule .slick-arrow {
  z-index: 20;
}
.schedule .slide-arrow {
  position: absolute;
  top: 30%;
}
.schedule .prev-arrow {
  left: 0;
}
.schedule .next-arrow {
  right: 0;
}

/*drawer setting*/
nav {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1001;
}
/*.drawer{display: flex;flex-direction: row;align-items: center;justify-content: space-between;position: relative;height: 50px;padding: 0 1em;}
.navbar_toggle{z-index:999;}
.navbar_toggle_icon {position: relative;display: block;height: 2px;width: 30px;background: #5c6b80;-webkit-transition: ease .5s;transition: ease .5s;}
.navbar_toggle_icon:nth-child(1) {top: 0;}
.navbar_toggle_icon:nth-child(2) {margin: 8px 0;}
.navbar_toggle_icon:nth-child(3) {top: 0;}
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {top: 10px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {-webkit-transform: translateY(-50%);transform: translateY(-50%);opacity: 0;}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {top: -10px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.menu{width: 100%;position: absolute;-webkit-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition:ease .5s;transition:ease .5s;z-index:999;background: rgba(131,180,255,0.9);}
.menu ul{width: 100%;}
.menu ul li{padding: 1em;border-bottom: 1px solid #5f6eb3;}
.menu ul li a{color: #FFFFFF;text-decoration: none;}
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 }*/
.footer_menu {
  width: 90%;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer_menu li {
  width: 110px;
  height: 40px;
  text-align: center;
}
.footer_menu li a {
  font-size: 1em;
  color: #5f6eb3;
  text-decoration: none;
  margin: 0 5px;
}

button {
  border: none;
  background: none;
  outline: none;
}
.menu,
.menu span {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  box-sizing: border-box;
}
.menu {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 35px;
  height: 30px;
  z-index: 10;
}
.menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #5c6b80;
  z-index: 10;
}
.menu span:nth-of-type(1) {
  top: 0px;
  background: #5c6b80;
}
.menu span:nth-of-type(2) {
  top: 14px;
  background: #5c6b80;
}
.menu span:nth-of-type(3) {
  bottom: 0px;
  background: #5c6b80;
}
.menu.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
.menu.active span:nth-of-type(2) {
  opacity: 0;
}
.menu.active span:nth-of-type(3) {
  -webkit-transform: translateY(-14px) rotate(-45deg);
  transform: translateY(-14px) rotate(-45deg);
}
#sp_nav {
  position: fixed;
  top: 49px;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  opacity: 0;
  background-color: rgba(131, 180, 255, 0.9);
  transition: all 0.3s ease-in-out;
  visibility: hidden;
}
#sp_nav.active {
  right: 0;
  opacity: 1;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
}
#sp_nav ul {
  margin: 0;
  padding: 0;
}
#sp_nav ul li {
  width: 100%;
  list-style-type: none;
  display: block;
  margin: auto;
  padding: 1em;
  border-bottom: 1px solid #5f6eb3;
}
#sp_nav ul li a {
  display: block;
  transition: all 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
  color: #fff;
}