@charset "UTF-8";
.sp-only {
  display: none !important;
}

/* == nav ============================================== */
.nav_menu {
  /*丸の拡大*/
}
.nav_menu #g-nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
}
.nav_menu #g-nav-list {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.nav_menu #g-nav ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav_menu #g-nav li {
  text-align: center;
  list-style: none;
}
.nav_menu #g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 20px 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}
.nav_menu .circle-bg {
  position: fixed;
  z-index: 1;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #88e0e8;
  /*丸のスタート位置と形状*/
  transform: scale(0); /*scaleをはじめは0に*/
  right: -50px;
  top: -50px;
  transition: all 0.6s; /*0.6秒かけてアニメーション*/
}

/* == parts ============================================== */
a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

.link_fix a {
  position: fixed;
  bottom: 5%;
  right: 0;
  writing-mode: vertical-rl;
  background-color: #149faa;
  color: #fff;
  padding: 40px 20px;
  border-radius: 10px 0px 0px 10px;
}

.section_baner {
  width: 70%;
  margin: 60px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section_baner .baner_wrap {
  width: 45%;
  padding: 0 40px;
}
.section_baner .img_wrap {
  width: 55%;
  padding: 0 40px;
}

.contents_wrap, .text_wrap {
  line-height: 24px;
}

.section {
  padding: 80px 20%;
}

.section_features, .section_price, .section_access {
  background-color: #E9F4F5;
}

.header {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 80px;
}
.header .logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1%;
  width: 25%;
}
.header .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1%;
  width: 60px;
  height: 60px;
  z-index: 9999;
}
.header .nav img {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
}
.header .nav .open {
  opacity: 1;
  visibility: visible;
}
.header.nav__open .open {
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
}
.header.nav__open .close {
  opacity: 1;
  visibility: visible;
  transition: 0.7s;
  transform: rotate(180deg);
}
.header.nav__open .circle-bg {
  transform: scale(50); /*クラスが付与されたらscaleを拡大*/
}
.header.nav__open #g-nav {
  opacity: 1;
  visibility: visible;
  transition: 0.7s;
}

.section_title_wrap {
  text-align: center;
  color: #7FC9CF;
  font-size: 70px;
  margin: 0 0 40px;
}
.section_title_wrap .ja {
  display: block;
  font-size: 16px;
}

/* == section_mv ============================================== */
.section_mv .mv_wrap {
  position: relative;
}
.section_mv .text_wrap p {
  position: absolute;
  bottom: 35px;
  left: 55px;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 80px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

/* == section_features ============================================== */
.section_features li {
  padding: 0 15%;
  margin: 0 0 60px;
  display: flex;
  align-items: center;
}
.section_features li div {
  width: 50%;
  padding: 2%;
}
.section_features li .img_wrap {
  position: relative;
}
.section_features li .img_wrap::after {
  content: "01";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  font-size: 80px;
  color: #7FC9CF;
}
.section_features li:nth-child(2) .img_wrap::after {
  content: "02";
}
.section_features li:nth-child(3) .img_wrap::after {
  content: "03";
}
.section_features li:nth-child(4) .img_wrap::after {
  content: "04";
}
.section_features li .text_wrap {
  font-size: 20px;
  line-height: 32px;
}

/* == section_effect ============================================== */
.section_effect .text_wrap {
  margin: 0 0 40px;
}
.section_effect .img_wrap {
  margin: 0 0 60px;
}
.section_effect .img_wrap img {
  width: 100%;
}
.section_effect .under_wrap, .section_effect .effect {
  width: 50%;
  padding: 5%;
}
.section_effect .under_wrap img, .section_effect .effect img {
  width: 100%;
}
.section_effect .effect_img_wrap {
  display: flex;
}

/* == section_price ============================================== */
.section_price .img_wrap {
  margin: 0 0 80px;
}
.section_price .inner_title_wrap {
  color: #5FA2AC;
}
.section_price .inner_title_wrap h3 {
  font-size: 28px;
  text-align: center;
  margin: 0 0 40px;
}
.section_price .inner_title_wrap strong {
  font-size: 20px;
  margin: 0 0 20px;
  padding: 0 0 10px;
  display: block;
  border-bottom: 2px solid #5FA2AC;
}
.section_price .inner_title_wrap p {
  font-size: 16px;
}

/* == section_use ============================================== */
.section_use .use_list_wrap {
  line-height: 32px;
}
.section_use li {
  margin: 0 0 60px;
}
.section_use li:nth-child(2) .num_title {
  background-image: url(../img/num02.png);
}
.section_use li:nth-child(3) .num_title {
  background-image: url(../img/num03.png);
}
.section_use li:nth-child(4) .num_title {
  background-image: url(../img/num04.png);
}
.section_use li:nth-child(5) .num_title {
  background-image: url(../img/num05.png);
}
.section_use li:nth-child(6) .num_title {
  background-image: url(../img/num06.png);
}
.section_use li .num_title {
  font-size: 18px;
  color: #7FC9CF;
  padding: 0 0 0 40px;
  background-image: url(../img/num01.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.section_use li .text_wrap {
  padding: 0 0 0 40px;
  position: relative;
}
.section_use li .text_wrap::before {
  content: "";
  position: absolute;
  height: 120%;
  width: 1px;
  background-color: #7FC9CF;
  left: 16px;
  top: 20px;
}
.section_use li .text_wrap .link a {
  color: #fff;
  background-color: #7FC9CF;
  display: block;
  width: 40%;
  margin: 20px auto;
  text-align: center;
  padding: 10px 20px;
  border-radius: 50px;
}
.section_use li:last-child .text_wrap {
  padding: 0 0 0 40px;
  position: relative;
}
.section_use li:last-child .text_wrap::before {
  background: none;
}

/* == section_access ============================================== */
.section_access .map {
  height: 460px;
  margin: 0 0 40px;
}
.section_access p {
  margin: 0 0 20px;
}

/* == section_contact ============================================== */
.section_contact .link_line a {
  text-align: center;
  background-color: #5CBD37;
  color: #fff;
  width: 50%;
  display: block;
  margin: 0 auto;
  padding: 20px;
  border-radius: 50px;
}

/* == footer ============================================== */
.footer {
  text-align: center;
  padding: 60px 0;
  color: #fff;
  background: linear-gradient(-20deg, #42ACBC 0%, #A7DCE4 80%);
}
.footer .logo a {
  width: 30%;
  margin: 0 auto 40px;
  display: block;
}
.footer #g-nav-list ul li {
  font-size: 20px;
  margin: 0 0 30px;
}
/*# sourceMappingURL=style_pc.css.map */