@charset "UTF-8";
@font-face {
  font-family: "Rounded-X M+ 2c reg";
  font-weight: 400;
  src: url("font/rmp_x_2c_reg_ss.woff") format("woff");
}
@font-face {
  font-family: "Rounded-X M+ 2c bld";
  font-weight: 600;
  src: url("font/rmp_x_2c_bld_ss.woff") format("woff");
}
@font-face {
  font-family: "Rounded-X M+ 2c lgt";
  font-weight: 300;
  src: url("font/rmp_x_2c_lgt_ss.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans reg";
  src: url("font/noto_sans_ss_reg.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans bld";
  font-weight: 600;
  src: url("font/noto_sans_ss_bld.woff") format("woff");
}
@font-face {
  font-family: "MS P Num";
  font-weight: 500;
  src: url("font/numberfontmsp.woff") format("woff");
}
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, del, dfn, ins, kbd, q, sub, sup, tt, var, code, samp,
b, u, i, s, em, small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-style: normal;
  font-weight: inherit;
  vertical-align: baseline;
}

html {
  font-size: calc(14px + 0.5vw);
  letter-spacing: 1px;
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: none;
  vertical-align: middle;
  max-width: 100%;
}

input, textarea, select, button {
  padding: 0;
  margin: 0;
  border: 0 none;
  font-family: inherit;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

:focus {
  outline: 0;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

.application-form h2, .contact h2, .interview h2, .popular-secret h2, .guaranties h2, .course-detail h2, .earn-secret h2 {
  color: #897eff;
  font-family: "Rounded-X M+ 2c bld";
  font-size: 1.76rem;
  text-align: center;
}

.guaranties .point, .earn-secret li .point {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  counter-increment: cnt1;
  margin-bottom: 4px;
  color: #a3ca0f;
  font-family: "Rounded-X M+ 2c bld";
}
.guaranties .point .text, .earn-secret li .point .text {
  flex-basis: calc(100% - 64px);
  font-size: 1.42rem;
}
.guaranties .point .mark, .earn-secret li .point .mark {
  display: block;
  flex-basis: 54px;
  width: 54px;
  height: 54px;
  background-color: #fff;
  border: 2px solid #a3ca0f;
  border-radius: 50%;
  font-size: 0.6rem;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
}
.guaranties .point .mark::before, .earn-secret li .point .mark::before {
  content: counter(cnt1);
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  background-color: #a3ca0f;
  color: #fff;
  line-height: 1.4;
}

body {
  font-family: "Rounded-X M+ 2c reg";
  background-color: #ccc;
  color: #231815;
  overflow-x: hidden;
}

.container {
  max-width: 640px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
}

.mainvisual {
  position: relative;
  margin-bottom: 16px;
  z-index: 1001;
  background-image: url("../img/main_visual.jpg");
  background-repeat: no-repeat;
  size: 100% auto;
}
.mainvisual::before {
  content: "";
  padding-top: 900px;
  display: block;
}
.mainvisual .wrapper {
  position: absolute;
  top: 16px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
}
.mainvisual h1 {
  width: 160px;
}
.mainvisual h1 img {
  width: 100%;
}

.menu-button {
  position: relative;
  z-index: 1001;
  width: 56px;
  background: url("../img/icon_menu.png") no-repeat center/100% auto;
  overflow: hidden;
}
.menu-button .rect3, .menu-button .rect2, .menu-button .rect1 {
  display: block;
  position: absolute;
  left: calc(50% - 15px);
  z-index: 1002;
  width: 30px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  transition: 0.3s ease;
}
.menu-button::before {
  display: block;
  content: "";
  padding-top: 117.3913%;
}
.menu-button .rect1 {
  text-indent: 100%;
  top: 56%;
  white-space: nowrap;
  overflow: hidden;
}
.menu-button .rect2 {
  top: calc(56% - 10px);
}
.menu-button .rect3 {
  top: calc(56% + 10px);
}
.menu-button.open .rect1 {
  transform: translateX(50%);
  opacity: 0;
}
.menu-button.open .rect2 {
  transform: rotate(45deg) translate(3px, -3px);
  transform-origin: left center;
}
.menu-button.open .rect3 {
  transform: rotate(-45deg) translate(3px, 3px);
  transform-origin: left center;
}
.menu-button.fixed {
  position: fixed;
  bottom: 8px;
  right: 16px;
}

.nav-menu {
  position: absolute;
  z-index: 1000;
  top: 52px;
  right: 12px;
  transform: scale(0.1);
  transform-origin: right top;
  transition: 0.3s cubic-bezier(0.09, 0.95, 0.37, 1.2);
  opacity: 0;
}
.nav-menu.open {
  transform: scale(1);
  opacity: 1;
}
.nav-menu ul {
  background-color: #ffa800;
  border-radius: 16px;
  padding: 8px;
  border: 1px solid #fff;
  color: #fff;
}
.nav-menu ul li {
  margin: 4px 0;
}
.nav-menu a {
  display: block;
  padding: 8px;
}
.nav-menu.fixed {
  position: fixed;
  top: initial;
  bottom: 56px;
  transform-origin: right bottom;
}
.nav-menu.fixed ul {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.footer {
  padding-right: 20px;
  padding-bottom: 64px;
  padding-left: 20px;
}
.footer .sales-site img {
  width: 100%;
}
.footer .banner img {
  display: block;
  margin: 0 auto 16px;
  width: auto;
}

.bottom-nav {
  position: fixed;
  z-index: 999;
  width: calc(100% - 1px);
  bottom: 0;
  left: 0;
  background-color: #ffa800;
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
  transition: 0.3s ease;
}
.bottom-nav.fixed {
  opacity: 1;
  transform: translateY(0);
}
.bottom-nav ul {
  display: flex;
}
.bottom-nav .bottom-nav-line,
.bottom-nav .bottom-nav-tel {
  width: 25%;
}
.bottom-nav .bottom-nav-line a,
.bottom-nav .bottom-nav-tel a {
  display: block;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 100%;
  border-right: 1px solid #fff;
  background-repeat: no-repeat;
  background-position: center center;
}
.bottom-nav .bottom-nav-tel a {
  background-image: url("../img/icon_tel.png");
  background-size: auto 56%;
}
.bottom-nav .bottom-nav-line a {
  background-image: url("../img/icon_line.png");
  background-size: auto 64%;
}
.bottom-nav .totop {
  flex-basis: 38%;
}
.bottom-nav .totop a {
  display: block;
  font-size: 1.54rem;
  font-weight: 300;
  padding: 12px 0 12px 32px;
}

.earn-secret {
  padding-right: 20px;
  padding-left: 20px;
  line-height: 1.5;
  counter-reset: cnt1;
}
.earn-secret h2 {
  margin-bottom: 32px;
  font-size: 2.1rem;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.earn-secret li {
  margin-bottom: 32px;
}
.course-detail {
  position: relative;
  z-index: 1;
  padding-bottom: 16px;
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
}
.course-detail .dot-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fefa96;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.course-detail .dot-bg::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to bottom right, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.course-detail .dot-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to top left, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.course-detail h2 {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff;
  margin-bottom: 48px;
}
.course-detail .course {
  margin-right: 20px;
  margin-left: 20px;
}
.course-detail .course:not(:last-of-type) {
  margin-bottom: 64px;
}
.course-detail .course .course-desc {
  display: grid;
  grid-template-areas: "left time baloon" "left value value" "left plus plus";
  grid-template-columns: 56% 22% 22%;
  align-items: center;
  position: relative;
  margin-bottom: 8px;
  padding: 4px 6px;
  border: 2px solid #fff;
  color: #fff;
}
.course-detail .course .course-info {
  grid-area: left;
  line-height: 1.4;
  font-weight: 500;
}
.course-detail .course .course-info h3 {
  font-family: "Noto Sans bld";
  font-size: 1.6rem;
  line-height: 1;
  transform: translate(-10px, -16px);
  white-space: nowrap;
}
.course-detail .course .course-info h3 em {
  display: inline-block;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
  font-size: 2.8rem;
}
.course-detail .course .course-info h5 {
  display: inline-block;
  padding: 2px 4px;
  background-color: #fff;
  border-radius: 3px;
  font-size: 0.88rem;
}
.course-detail .course time {
  grid-area: time;
  justify-self: flex-end;
  color: #fff102;
}
.course-detail .course time em {
  font-family: "MS P Num";
  font-size: 1.6rem;
}
.course-detail .course .value {
  grid-area: value;
  justify-self: center;
  color: #fff102;
}
.course-detail .course .value em {
  font-family: "MS P Num";
  font-size: 2.4rem;
}
.course-detail .course .baloon {
  grid-area: baloon;
  justify-self: center;
  position: relative;
  padding: 4px 8px;
  font-size: 0.88rem;
  background-color: #fff;
}
.course-detail .course .baloon::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-top: 6px solid #fff;
  border-right-width: 6px;
  bottom: -6px;
  right: 6px;
}
.course-detail .course .additional {
  grid-area: plus;
  justify-self: flex-end;
  line-height: 1.3;
  font-size: 0.8rem;
  background: url("../img/icon_plus.png") no-repeat left center/auto 80%;
  padding-left: 2.44em;
}
.course-detail .course .outside-text {
  position: absolute;
  right: 0;
  top: -1.5rem;
  color: #5f9d33;
  font-weight: 600;
}
.course-detail .course h4 {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px;
  background-color: #00b98b;
  color: #fff;
  font-size: 0.96rem;
}
.course-detail .course .course-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 8px;
}
.course-detail .course .course-options li {
  flex-basis: 24%;
  margin-bottom: 6px;
  background-color: #00b98b;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0;
}
.course-detail .course .option-desc {
  margin-bottom: 8px;
  color: #00b98b;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.course-detail .course1 .course-desc {
  background-color: #97c69e;
}
.course-detail .course1 .course-info h3 em, .course-detail .course1 .course-info h5 {
  color: #97c69e;
}
.course-detail .course1 .baloon {
  color: #97c69e;
}
.course-detail .course2 .course-desc {
  background-color: #f3acbc;
}
.course-detail .course2 .course-info h3 em, .course-detail .course2 .course-info h5 {
  color: #f3acbc;
}
.course-detail .course2 .baloon {
  color: #f3acbc;
}
.course-detail .course3 .course-desc {
  background-color: #60a4c7;
}
.course-detail .course3 .course-info h3 em, .course-detail .course3 .course-info h5 {
  color: #60a4c7;
}
.course-detail .course3 .baloon {
  color: #60a4c7;
}

.guaranties {
  margin-bottom: 32px;
}
.guaranties h2 {
  margin-bottom: 8px;
}
.guaranties .wrapper {
  position: relative;
  z-index: 1;
  padding-top: 24px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
}
.guaranties .wrapper .dot-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fde4e7;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.guaranties .wrapper .dot-bg::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to bottom left, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.guaranties .wrapper .dot-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to top right, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.guaranties .point .text {
  flex-basis: calc(100% - 64px);
  font-size: 1.3rem;
  letter-spacing: 0;
  line-height: 1.1;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff;
}
.guaranties .explain {
  font-family: "Rounded-X M+ 2c reg";
  font-size: 0.86rem;
  line-height: 1.2;
  margin-top: 16px;
  margin-bottom: 16px;
}
.guaranties .guaranties-value {
  width: calc(100% + 20px);
  background: url("../img/guarantee_illust.png") no-repeat right center/auto 96%;
  color: #ec6300;
  font-family: "Noto Sans bld";
  font-size: 1.28rem;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.guaranties .guaranties-value li {
  margin-bottom: 8px;
}
.guaranties .guaranties-value em {
  margin: 0 4px;
  font-size: 3rem;
}
.guaranties .rent {
  position: relative;
  margin-top: 32px;
  margin-bottom: 24px;
  padding: 12px;
  color: #ec6300;
  background-color: #fff;
}
.guaranties .rent h3 {
  font-size: 2rem;
  font-weight: 600;
}
.guaranties .rent p {
  font-size: 1.52rem;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 600;
}
.guaranties .rent p .small-text {
  font-size: 0.8rem;
}
.guaranties .rent p .inverse {
  display: block;
  background-color: #ec6300;
  color: #fff;
  padding: 4px 8px;
  text-align: center;
}
.guaranties .rent figure {
  position: absolute;
  right: -16px;
  top: -16px;
  width: 32%;
}
.guaranties .induction {
  text-align: center;
}
.guaranties .induction p {
  margin-bottom: 16px;
  color: #e6447c;
  font-family: "Noto Sans bld";
  font-size: 1.68rem;
  line-height: 1.3;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff;
}
.guaranties .induction p em {
  font-size: 1.96rem;
}
.guaranties .induction a {
  display: inline-block;
  background-color: #e6447c;
  border: 1px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: 500;
}

.popular-secret {
  margin-bottom: 24px;
}
.popular-secret h2 {
  margin-bottom: 32px;
}
.popular-secret .wrapper {
  position: relative;
  z-index: 1;
  padding: 24px 20px;
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
  color: #59c4f1;
}
.popular-secret .wrapper .dot-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #def0fc;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.popular-secret .wrapper .dot-bg::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to bottom right, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.popular-secret .wrapper .dot-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to top left, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.popular-secret .oblique-text {
  display: inline-block;
  margin-bottom: 32px;
  padding-right: 12px;
  font-size: 1.2rem;
  font-weight: 500;
  transform: rotate(-7deg);
  transform-origin: left top;
  background: url("../img/star1.png") no-repeat right center/auto 120%;
}
.popular-secret .text p {
  line-height: 1.3;
  font-size: 0.96rem;
  font-weight: 500;
  margin-bottom: 1.5em;
}
.popular-secret .text p em {
  font-size: 1.2rem;
}
.popular-secret .text p:nth-of-type(3) {
  font-size: 1.2rem;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.popular-secret .text p:nth-of-type(3)::before {
  content: "";
  display: inline-block;
  width: 180px;
  height: 180px;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  z-index: -1;
  top: calc(50% - 80px);
  left: -10%;
}
.popular-secret .text .large-text {
  font-size: 2.8rem;
}
.popular-secret .text .large-text em {
  font-size: 4.4rem;
}
.popular-secret .text .small-text {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.popular-secret .origin {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding: 16px 12px;
  background-color: #59c4f2;
  color: #fff;
  line-height: 1.6;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 1px;
}
.popular-secret .origin em {
  color: #fff100;
}

.interview .wrapper {
  padding-bottom: 24px;
  position: relative;
  z-index: 1;
  padding-top: 24px;
}
.interview .wrapper .dot-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e1eec3;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.interview .wrapper .dot-bg::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to bottom left, #fff 50%, rgba(255, 255, 255, 0) 51%);
}
.interview .wrapper .dot-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to top right, #bf272d 50%, rgba(255, 255, 255, 0) 51%);
}
.interview .oblique-text {
  padding-right: 20px;
  color: #85b92d;
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
  font-size: 1.2rem;
  font-weight: 500;
  text-align: right;
  transform: rotate(7deg);
  transform-origin: right top;
  background: url("../img/star2.png") no-repeat right 8px center/auto 100%;
}
.interview h2 {
  margin-bottom: 40px;
}
.interview li {
  position: relative;
  margin-bottom: 32px;
  padding-left: 10px;
  padding-right: 20px;
}
.interview li .girl-icon {
  position: absolute;
  width: 26%;
  max-width: 204px;
  left: 10px;
}
.interview li .girl-icon img {
  width: 100%;
  height: auto;
}
.interview li h3 {
  margin-left: calc(20% + 40px);
  margin-bottom: 8px;
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
  font-size: 0.88rem;
  font-weight: 700;
}
.interview li .interview-text {
  margin-left: 20%;
  padding: 8px 16px 8px 40px;
  background-color: #fff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 0.76rem;
  letter-spacing: 0;
  line-height: 1.5;
}

.best-reason h2 {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 4px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #bf272d;
  color: #fff;
}
.best-reason h2 span {
  display: block;
  position: relative;
  margin-bottom: -4px;
  line-height: 1.1;
  z-index: 1;
}
.best-reason h2 img {
  display: block;
  width: 60%;
  margin-bottom: 4px;
}
.best-reason h2::after {
  content: "";
  position: absolute;
  bottom: -12px;
  border: 6px solid transparent;
  border-top: 6px solid #bf272d;
  width: 0;
  height: 0;
  left: calc(50% - 3px);
}
.best-reason .wrapper {
  padding-right: 20px;
  padding-left: 20px;
}
.best-reason .list-reason li {
  position: relative;
  margin-bottom: 0.5em;
  color: #bf272d;
  font-family: "Rounded-X M+ 2c bld";
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
}
.best-reason .list-reason li::before {
  content: "";
  border: 1px solid #bf272d;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}
.best-reason .list-reason li::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 4px;
  border-bottom: 2px solid #bf272d;
  border-right: 2px solid #bf272d;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
}
.best-reason .celebration {
  position: relative;
  margin-top: 32px;
  margin-bottom: 16px;
  border: 2px solid #bf272d;
  background-color: #fcc200;
  padding: 0 4px;
  color: #bf272d;
}
.best-reason .celebration .oblique-text {
  display: block;
  padding: 6px 8px;
  position: absolute;
  background-color: #bf272d;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0;
  transform: rotate(-3deg) translate(4px, -8px);
  transform-origin: left bottom;
}
.best-reason .celebration .celebrate-value {
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
}
.best-reason .celebration .celebrate-value em {
  font-size: 2.84rem;
  font-weight: 600;
}
.best-reason .list-point {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 32px;
}
.best-reason .list-point li {
  flex-basis: 32%;
  margin-bottom: 6px;
  padding: 6px 0;
  border: 1px solid #bf272d;
  font-family: "Rounded-X M+ 2c bld";
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: #bf272d;
  letter-spacing: 0;
}

.contact {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 40px;
}
.contact h2 {
  font-size: 1.66rem;
  letter-spacing: 0;
}
.contact h2 + p {
  color: #897eff;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 32px;
}
.contact .contact-line {
  position: relative;
  margin-bottom: 32px;
  font-family: "Rounded-X M+ 2c bld";
}
.contact .contact-line img {
  width: 100%;
}
.contact .contact-line .line-id {
  position: absolute;
  top: -16px;
  padding-left: 20px;
  font-size: 1.1rem;
}
.contact .contact-line .line-id .text {
  fill: #01b901;
}
.contact .contact-line .line-id .outline {
  stroke: #fff;
  stroke-width: 4px;
}
.contact .contact-line span {
  position: relative;
  top: -40px;
  font-family: "Rounded-X M+ 2c bld";
  color: #01b901;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff;
}
.contact .contact-line a {
  display: block;
  position: absolute;
  bottom: -1em;
  right: 8px;
  background-color: #fff;
  color: #01b901;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 1.2rem;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.contact .contact-dial {
  color: #897eff;
  font-family: "Rounded-X M+ 2c bld";
  font-weight: 500;
  font-size: 1.88rem;
  line-height: 1.2;
  text-align: center;
}
.contact .contact-dial a {
  display: inline-block;
  background: url("img/icon_freedial.png") no-repeat left center/auto 100%;
  padding-left: 2em;
}

.application-form {
  margin-bottom: 32px;
  padding: 0 20px;
  color: #fff;
  font-size: 0.8rem;
}
.application-form h2 {
  margin-bottom: 16px;
}
.application-form .mail-form {
  font-family: "Noto Sans reg", "Noto Sans CJK JP", "源ノ角ゴシック JP", "Source han sans japanese", "Hiragino Kaku Gothic Pro", "メイリオ";
  font-weight: 300;
  letter-spacing: 0;
}
.application-form .form {
  padding: 16px 8px;
  background-color: #897eff;
  border-radius: 4px;
}
.application-form .form-select {
  display: flex;
  margin-bottom: 10px;
}
.application-form .form-select label {
  display: block;
  margin-right: 26px;
}
.application-form .form-select-check {
  display: flex;
  width: 150px;
}
.application-form .form .form-box {
  position: relative;
  width: 90%;
}
.application-form .form .form-box:not(:last-child) {
  margin-bottom: 20px;
}
.application-form .form .form-box .must {
  color: #bb204a;
  text-align: center;
}
.application-form .form label {
  display: block;
  margin-bottom: 8px;
}
.application-form .form input, .application-form .form select {
  padding: 4px;
  width: 100%;
  font-size: 16px;
}
.application-form .form textarea {
  padding: 4px;
  width: 100%;
  min-height: 96px;
  resize: none;
  font-size: 16px;
}
.application-form .form input[type=radio] {
  display: inline-block;
  background-color: #897eff;
  border: 6px solid #fff;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin-right: 2px;
  transition: 0.1s ease;
  padding: 0;
}
.application-form .form input[type=radio]:checked {
  border-width: 2px;
}
.application-form .col-2 {
  display: flex;
}
.application-form .col-3 {
  display: grid;
  grid-template-areas: "a1 a2 a3" "a4 a4 a4";
}
.application-form .col-3 input[type=text] {
  grid-area: a4;
}
.application-form .col-6 {
  display: grid;
  grid-template-columns: 26% 38% 36%;
  grid-row-gap: 8px;
}
.application-form .col-radio {
  display: grid;
  grid-template-areas: "a1 a2 a3 a4" "a1 a5 a6 a7";
}
.application-form .col-radio .label {
  grid-area: a1;
}
.application-form .id-desc {
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 100;
  letter-spacing: -0.5px;
}
.application-form input[type=submit] {
  display: block;
  width: 60%;
  margin: 16px auto;
  padding: 4px 32px;
  background-color: #897eff;
  border: 4px solid #fff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1rem;
  font-weight: 200;
  text-align: center;
  transition: 0.2s ease;
}
.application-form input[type=submit]:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.text02 {
  display: none;
}

/********************************************
* Now Loading
********************************************/
#form-load {
  display: none;
}

.loader {
  margin: 0 auto;
  border: 12px solid #fafafa;
  border-radius: 50%;
  border-top: 12px solid #3498db;
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.load1 {
  animation: sk-scaleout 1s infinite ease-in-out;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 201;
  text-align: center;
  background-color: #b1b1b1;
  color: #ffffff;
  opacity: 0.8;
  width: 800px;
}

.load1 p {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}

.thanks header {
  position: relative;
  background: url("../img/thanks.jpg") no-repeat center top/100% auto;
}
.thanks header::before {
  content: "";
  display: block;
  padding-top: 87.2%;
}
.thanks header h1 {
  position: absolute;
  transform: translate(-50%, 0);
  bottom: 0;
  left: 50%;
  width: 72%;
}
.thanks .complete {
  padding: 32px 20px 120px;
  text-align: center;
}
.thanks .complete h2 {
  margin-bottom: 16px;
  font-family: "Rounded-X M+ 2c bld";
  font-size: 2rem;
  color: #897eff;
  line-height: 1.3;
}
.thanks .complete p {
  margin-bottom: 32px;
  line-height: 1.5;
  text-align: left;
}
.thanks .complete a {
  display: inline-block;
  background-color: #e6447c;
  color: #fff;
  font-size: 1.4rem;
  padding: 8px 16px;
}

[data-animate] {
  animation-duration: 1s;
  animation-fill-mode: both;
}

[data-animate*=fade] {
  opacity: 0;
}

[data-animate*=tree] {
  opacity: 1;
}
[data-animate*=tree] li {
  animation-duration: 1s;
  animation-fill-mode: both;
  opacity: 0;
}

.fadeIn {
  animation-name: fadeIn;
}

.fadeInDown {
  animation-name: fadeInDown;
}

.fadeInRight {
  animation-name: fadeInRight;
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

.fadeInUp {
  animation-name: fadeInUp;
}

.pulse {
  animation-name: pulse;
}

.bounceIn {
  animation-duration: 0.75s;
  animation-name: bounceIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pulse {
  from {
    transform: scale(1);
    transform-origin: center 60%;
  }
  50% {
    transform: scale(1.05);
    transform-origin: center 60%;
  }
  to {
    transform: scale(1);
    transform-origin: center 60%;
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}