@charset "UTF-8";
/* --------------------------------------------------
-------------------------------------------------- 関数 */
p {
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  p {
    font-size: 3.4375vw;
  }
}
p.note {
  font-size: 12px;
}
@media only screen and (max-width: 768px) {
  p.note {
    font-size: 3.125vw;
  }
}
p.bold {
  font-weight: bold;
}
p.center {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  p.sp-left {
    text-align: left;
  }
}
p span.color {
  color: #ff2663;
}
p span.bold {
  font-weight: 700;
}
p span.note {
  font-size: 12px;
}
@media only screen and (max-width: 768px) {
  p span.note {
    font-size: 3.125vw;
  }
}
p span.bg-yellow {
  background-color: #ffff00;
}
p a {
  color: #00a593;
  font-weight: bold;
  text-decoration: underline;
}
p a:hover {
  text-decoration: none;
}

.page {
  padding: 0 0 110px;
  background: url("../img/page/bg_bottom-pc.png") repeat-x bottom center, url("../img/page/bg_top-pc.png") repeat-x top center rgba(255, 255, 255, 0.1);
}
@media only screen and (max-width: 1000px) {
  .page {
    padding: 0 0 11vw;
  }
}
@media only screen and (max-width: 768px) {
  .page {
    background: url("../img/page/bg_bottom-sp.png") repeat-x bottom center, url("../img/page/bg_top-sp.png") repeat-x top center rgba(255, 255, 255, 0.1);
    padding: 0 0 21.875vw;
  }
}
.page p a {
  color: #00a593;
  font-weight: bold;
  text-decoration: underline;
}
.page p a:hover {
  text-decoration: none;
}
.page .head {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 45px 0 50px;
  background: url("../img/page/deco_head.png") no-repeat right 10px;
  background-size: 150px auto;
}
@media only screen and (max-width: 1000px) {
  .page .head {
    width: 96vw;
    padding: 4.5vw 0 5vw;
    background: url("../img/page/deco_head.png") no-repeat right 1vw;
    background-size: 15vw auto;
  }
}
@media only screen and (max-width: 768px) {
  .page .head {
    position: relative;
    width: 93.75vw;
    padding: 9.375vw 0 10vw;
    background: url("../img/page/deco_head.png") no-repeat right 10.15625vw center;
    background-size: 23.4375vw auto;
  }
}
.page .head h1 {
  position: relative;
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  .page .head h1 {
    position: static;
    transform: none !important;
    margin-left: 9.375vw;
  }
}
.page .head h1 .fire {
  position: absolute;
  top: -44px;
  right: -70px;
  width: 98px;
  height: 114px;
  background: url("../img/parts/fire_gpld.svg") no-repeat top center;
  background-size: contain;
  opacity: 0;
  transform-origin: bottom right;
}
@media only screen and (max-width: 768px) {
  .page .head h1 .fire {
    top: 0.78125vw;
    right: 7.1875vw;
    width: 15.3125vw;
    height: 17.8125vw;
  }
}
.page .ttl-box {
  padding-bottom: 12px;
  background: url("../img/page/h2_line-pc.png") repeat-x bottom center;
  margin-bottom: 36px;
}
@media only screen and (max-width: 1000px) {
  .page .ttl-box {
    margin-bottom: 3.6vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .ttl-box {
    padding-bottom: 1.875vw;
    margin-bottom: 5.9375vw;
    background: url("../img/page/h2_line-sp.png") repeat-x bottom center;
  }
}
.page .ttl-box h2 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .page .ttl-box h2 {
    font-size: 5.625vw;
  }
}
.page h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 50px;
  padding: 3px 30px;
  background: url("../img/parts/fire_white.svg") no-repeat right 5px center #7bdcd1;
  background-size: auto 59px;
  margin-bottom: 1.2em;
}
@media only screen and (max-width: 768px) {
  .page h3 {
    font-size: 4.0625vw;
    border-radius: 7.8125vw;
    padding: 1.875vw 6.25vw;
    background: url("../img/parts/fire_white.svg") no-repeat right center #7bdcd1;
    background-size: auto 12.8125vw;
  }
}
.page h3.pink {
  background-color: #ff8dad;
}
.page h3 span.small {
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  .page h3 span.small {
    font-size: 3.4375vw;
  }
}
.page p {
  line-height: 1.6;
}
.page .lh2 {
  line-height: 2;
}
.page .mb10 {
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .page .mb10 {
    margin-bottom: 1.5625vw;
  }
}
.page .mb20 {
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  .page .mb20 {
    margin-bottom: 3.125vw;
  }
}
.page .mb30 {
  margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
  .page .mb30 {
    margin-bottom: 4.6875vw;
  }
}
.page .mb35 {
  margin-bottom: 35px;
}
@media only screen and (max-width: 768px) {
  .page .mb35 {
    margin-bottom: 5.46875vw;
  }
}
.page .mb40 {
  margin-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .page .mb40 {
    margin-bottom: 6.25vw;
  }
}
.page .loop-text {
  margin-top: 70px;
}
@media only screen and (max-width: 1000px) {
  .page .loop-text {
    margin-top: 7vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .loop-text {
    margin-top: 9.375vw;
  }
}
.page .btn-anchor {
  position: relative;
  display: inline-block;
  background-color: #00a593;
  margin-right: 12px;
}
@media only screen and (max-width: 768px) {
  .page .btn-anchor {
    margin-right: 1.5625vw;
  }
}
.page .btn-anchor a {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 800;
  padding: 2px 38px 2px 12px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .page .btn-anchor a {
    font-size: 3.4375vw;
    padding: 0.3125vw 6.25vw 0.3125vw 1.25vw;
  }
}
.page .btn-anchor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: block;
  width: 14px;
  height: 6px;
  background: url("../img/parts/arrow_btm_white.svg") no-repeat top center;
  background-size: contain;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .page .btn-anchor::after {
    width: 2.8125vw;
    height: 1.25vw;
    right: 1.5625vw;
  }
}
.page .btn-anchor:hover a {
  transform: translateX(12px);
}
@media only screen and (max-width: 768px) {
  .page .btn-anchor:hover a {
    transform: translateX(12);
  }
}
.page .btn-anchor:hover::after {
  top: 60%;
  opacity: 0;
}
.page .flex-box {
  display: flex;
}

#content {
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  #content img {
    width: 100%;
  }
}
#content section {
  width: 960px;
  margin: 0 auto;
  padding: 50px 100px 60px;
  border-radius: 80px;
  background-color: #fff;
}
@media only screen and (max-width: 1000px) {
  #content section {
    width: 96vw;
    padding: 5vw 10vw 6vw;
  }
}
@media only screen and (max-width: 768px) {
  #content section {
    width: 93.75vw;
    padding: 9.375vw 4.6875vw 12.5vw;
    border-radius: 12.5vw;
  }
}
#content section:not(:last-child) {
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  #content section:not(:last-child) {
    margin-bottom: 3.125vw;
  }
}
#content section p span.color {
  color: #ff2663;
}
#content section .btn {
  width: 360px;
  height: 50px;
}
@media only screen and (max-width: 768px) {
  #content section .btn {
    width: 71.875vw;
    height: 10.9375vw;
  }
}
#content section .btn a {
  justify-content: left;
  font-size: 14px;
  padding-left: 30px;
}
@media only screen and (max-width: 768px) {
  #content section .btn a {
    font-size: 3.125vw;
    padding-left: 3.125vw;
  }
}
#content section .btn .arrow {
  right: 30px;
}
@media only screen and (max-width: 768px) {
  #content section .btn .arrow {
    right: 3.4375vw;
  }
}
#content section .btn:hover::before {
  background-color: #212121;
}
#content section .btn:hover a {
  color: #fff;
}
#content section .btn:hover .arrow::before, #content section .btn:hover .arrow::after {
  background-color: #fff;
}
#content section .btn__black {
  background: linear-gradient(90deg, rgb(33, 33, 33), rgb(84, 84, 84));
}
#content section .btn__black:hover::before {
  background-color: #848484;
}
#content section .btn__apply {
  width: 500px;
  height: 80px;
  background: linear-gradient(90deg, rgb(255, 0, 72), rgb(255, 38, 99));
}
@media only screen and (max-width: 768px) {
  #content section .btn__apply {
    width: 100%;
    height: 13.4375vw;
  }
}
#content section .btn__apply a {
  font-size: 24px;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  #content section .btn__apply a {
    font-size: 3.75vw;
  }
}
#content .read-block {
  width: 960px;
  margin: 0 auto 20px;
  padding: 50px 100px;
  background-color: #212121;
}
@media only screen and (max-width: 1000px) {
  #content .read-block {
    width: 96vw;
    padding: 5vw 10vw;
  }
}
@media only screen and (max-width: 768px) {
  #content .read-block {
    width: 93.75vw;
    padding: 7.03125vw 4.6875vw;
  }
}
#content .read-block p {
  color: #fff;
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  #content .read-block p {
    font-size: 3.4375vw;
  }
}
#content .black-area {
  width: 100%;
  padding: 50px 90px;
  background-color: #212121;
  margin-bottom: 20px;
}
@media only screen and (max-width: 1000px) {
  #content .black-area {
    padding: 5vw 9vw;
  }
}
@media only screen and (max-width: 768px) {
  #content .black-area {
    width: 93.75vw;
    padding: 7.03125vw 4.6875vw;
  }
}
#content .black-area p {
  color: #fff;
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  #content .black-area p {
    font-size: 3.4375vw;
  }
}

.img-modal.icon-on::before {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/parts/modal_plus.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 768px) {
  .img-modal.icon-on::before {
    bottom: 2.34375vw;
    right: 1.5625vw;
    width: 7.8125vw;
    height: 7.8125vw;
  }
}
.img-modal.icon-on__sp::before {
  display: none;
}
@media only screen and (max-width: 768px) {
  .img-modal.icon-on__sp::before {
    display: block;
  }
}

.con-wrap {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 1000px) {
  .con-wrap {
    width: 96vw;
  }
}
@media only screen and (max-width: 768px) {
  .con-wrap {
    flex-direction: column;
    width: 93.75vw;
  }
}

#main-con {
  width: 750px;
}
@media only screen and (max-width: 1000px) {
  #main-con {
    width: 75vw;
  }
}
@media only screen and (max-width: 768px) {
  #main-con {
    width: 100%;
    order: 1;
  }
}
#main-con section {
  width: 100%;
  padding: 50px 90px 60px;
}
@media only screen and (max-width: 1000px) {
  #main-con section {
    padding: 50px 9vw 60px;
  }
}
@media only screen and (max-width: 768px) {
  #main-con section {
    padding: 9.375vw 4.6875vw 12.5vw;
    border-radius: 12.5vw;
  }
}

#side-menu {
  padding: 22px 0;
  width: 170px;
  background-color: #00a593;
}
@media only screen and (max-width: 1000px) {
  #side-menu {
    width: 17vw;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu {
    position: relative;
    width: 100%;
    order: 0;
    padding: 0;
    margin-bottom: 3.4375vw;
  }
}
#side-menu .logo {
  width: 38px;
  margin: 0 auto 20px;
}
@media only screen and (max-width: 768px) {
  #side-menu .logo {
    display: none;
  }
}
#side-menu p {
  padding: 18px 0;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  background-color: #212121;
}
@media only screen and (max-width: 768px) {
  #side-menu p {
    padding: 2.8125vw 4.6875vw;
    font-size: 3.75vw;
    text-align: left;
    background-color: #00a593;
  }
}
#side-menu #btn-menu {
  display: none;
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu {
    display: block;
    position: absolute;
    top: 50%;
    right: 4.6875vw;
    transform: translateY(-50%);
    width: 8.90625vw;
    height: 3.90625vw;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu span {
    position: absolute;
    width: 100%;
    display: block;
    height: 0.625vw;
    background-color: #fff;
    transition: all 0.3s ease;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu span:nth-child(2) {
    top: 1.71875vw;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu span:nth-child(3) {
    top: 3.28125vw;
  }
}
#side-menu #btn-menu.close span:nth-child(1) {
  animation: btn-bar1 0.4s forwards;
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu.close span:nth-child(1) {
    animation: btn-bar1-sp 0.4s forwards;
  }
}
#side-menu #btn-menu.close span:nth-child(3) {
  animation: btn-bar2 0.4s forwards;
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu.close span:nth-child(3) {
    animation: btn-bar2-sp 0.4s forwards;
  }
}
#side-menu #btn-menu.active span:nth-child(1) {
  animation: btn-bar1-active 0.4s forwards;
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu.active span:nth-child(1) {
    animation: btn-bar1-active-sp 0.4s forwards;
  }
}
#side-menu #btn-menu.active span:nth-child(2) {
  opacity: 0;
}
#side-menu #btn-menu.active span:nth-child(3) {
  animation: btn-bar2-active 0.4s forwards;
}
@media only screen and (max-width: 768px) {
  #side-menu #btn-menu.active span:nth-child(3) {
    animation: btn-bar2-active-sp 0.4s forwards;
  }
}
#side-menu ul {
  padding-top: 10px;
}
@media only screen and (max-width: 768px) {
  #side-menu ul {
    position: absolute;
    top: 11.5625vw;
    left: 0;
    width: 100%;
    display: grid;
    gap: 1px 1px;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0;
    background-color: #fff;
    border-top: 1px solid #fff;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu ul.active {
    opacity: 1;
    visibility: inherit;
  }
}
#side-menu ul li {
  position: relative;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 768px) {
  #side-menu ul li {
    background-color: #00a593;
  }
}
#side-menu ul li.sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  #side-menu ul li.sp {
    display: block;
  }
  #side-menu ul li.sp:hover {
    background-color: #00a593;
  }
}
#side-menu ul li a {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  padding: 10px 20px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 768px) {
  #side-menu ul li a {
    padding: 3.90625vw 4.6875vw;
    font-size: 3.75vw;
  }
}
#side-menu ul li a span {
  display: block;
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  #side-menu ul li a span {
    display: inline;
    font-size: 3.75vw;
  }
}
#side-menu ul li .arrow {
  position: absolute;
  right: inherit;
  top: 50%;
  right: 17px;
  transform: translateY(-50%);
  display: block;
  width: 8px;
  height: 12px;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 1300px) {
  #side-menu ul li .arrow {
    right: 1.7vw;
    width: 0.8vw;
    height: 1.2vw;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu ul li .arrow {
    right: 1.5625vw;
    width: 1.875vw;
    height: 2.8125vw;
  }
}
#side-menu ul li .arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 8px;
  height: 2px;
  transform: rotate(45deg);
  background-color: #fff;
  transform-origin: left top;
}
@media only screen and (max-width: 1300px) {
  #side-menu ul li .arrow::before {
    width: 0.8vw;
    height: 0.2vw;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu ul li .arrow::before {
    width: 1.875vw;
    height: 0.3125vw;
  }
}
#side-menu ul li .arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 8px;
  height: 2px;
  transform: rotate(-45deg);
  background-color: #fff;
  transform-origin: left bottom;
}
@media only screen and (max-width: 1300px) {
  #side-menu ul li .arrow::after {
    width: 0.8vw;
    height: 0.2vw;
  }
}
@media only screen and (max-width: 768px) {
  #side-menu ul li .arrow::after {
    width: 1.875vw;
    height: 0.3125vw;
  }
}
#side-menu ul li:hover {
  background-color: #fff;
}
#side-menu ul li:hover a {
  transform: translateX(10px);
  color: #00a593;
}
#side-menu ul li:hover .arrow {
  transform: translate(20px, -50%);
  opacity: 0;
}