@charset "UTF-8";
/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/**
 * ほぼすべてのブラウザに対応する均等横並びのmixin
 * 
 * @usage
 * @include col(3, 40, 20, '親セレクターを指定');
*/
/* sp */
.NormalButton {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 25px 0;
  background-color: #0D65C7;
  border-radius: 48px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4), inset 0px -15px 25px #012F60, inset 0px 15px 30px rgba(255, 255, 255, 0.5);
  color: #fff;
  display: block;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.NormalButton::after {
  content: "";
  width: 25px;
  height: 25px;
  background: url("/image/svg/icon_arrow.svg") no-repeat;
  background-size: contain;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
}
.NormalButton:disabled {
  background-color: #9D9D9D;
  box-shadow: none;
}
@media screen and (max-width: 768px) {
  .NormalButton {
    padding: 22px 0;
    font-size: 20px;
  }
  .NormalButton::after {
    width: 20px;
    height: 20px;
    right: 23px;
  }
}

.CancelButton {
  display: inline-block;
  color: #221714;
  font-size: 22px;
  font-weight: 700;
  text-decoration: underline;
  opacity: 0.6;
  white-space: nowrap;
}
.CancelButton:hover {
  opacity: 0.4;
}
@media screen and (max-width: 768px) {
  .CancelButton {
    font-size: 16px;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.Menu {
  position: -webkit-sticky;
  position: sticky;
  background-color: #79A1CE;
  top: 0;
  z-index: 10000;
}
.Menu:before, .Menu:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, #FAE100, #FAE100 14px, transparent 14px, transparent 24px);
  background-size: 24px 1px;
  background-repeat: repeat-x;
}
.Menu:before {
  top: 8px;
}
.Menu:after {
  bottom: 8px;
}
@media screen and (max-width: 768px) {
  .Menu {
    display: none;
  }
}
.Menu-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.Menu-bello {
  width: 8.4770114943%;
}
@media screen and (max-width: 768px) {
  .Menu-bello {
    width: 35.223880597%;
  }
}
.Menu-nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.Menu-nav > * + * {
  margin-left: 40px;
}
.Menu-link {
  font-size: min(20px, 1.4vw);
  display: flex;
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
  align-items: center;
}
.Menu-link:before {
  width: 40px;
  height: 40px;
  display: inline-block;
  content: "";
  border-radius: 20px;
  margin-right: 4px;
}
.Menu-link:nth-child(1):before {
  background: url("/image/point.svg") no-repeat center center #000;
}
.Menu-link:nth-child(2):before {
  background: url("/image/plan.svg") no-repeat center center #000;
}
.Menu-link:nth-child(3):before {
  background: url("/image/step.svg") no-repeat center center #000;
}
.Menu-link:nth-child(4):before {
  background: url("/image/faq.svg") no-repeat center center #000;
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.MenuSp {
  position: -webkit-sticky;
  position: sticky;
  background-color: #79A1CE;
  top: 0;
  z-index: 10000;
}
.MenuSp:before, .MenuSp:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, #FAE100, #FAE100 14px, transparent 14px, transparent 24px);
  background-size: 24px 1px;
  background-repeat: repeat-x;
}
.MenuSp:before {
  top: 8px;
}
.MenuSp:after {
  bottom: 8px;
}
@media screen and (min-width: 769px) {
  .MenuSp {
    display: none;
  }
}
.MenuSp-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
.MenuSp-bello {
  width: 74px;
  height: 32px;
}
.MenuSp-nav {
  position: absolute;
  display: none;
  top: 69px;
  right: 0;
  background-color: #79A1CE;
  border-radius: 0 0 0 30px;
}
.MenuSp-navInner {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.MenuSp-navInner > * + *:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  top: 0;
  background-image: linear-gradient(to right, #FAE100, #FAE100 14px, transparent 14px, transparent 24px);
  background-size: 24px 1px;
  background-repeat: repeat-x;
}
.MenuSp-link {
  position: relative;
  display: flex;
  width: 100%;
  color: #221714;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  align-items: center;
  padding: 12px 10px;
}
.MenuSp-link:before {
  width: 32px;
  height: 32px;
  display: inline-block;
  content: "";
  border-radius: 16px;
  margin-right: 12px;
}
.MenuSp-link:nth-child(1):before {
  background: url("/image/point.svg") no-repeat center center #000;
}
.MenuSp-link:nth-child(2):before {
  background: url("/image/plan.svg") no-repeat center center #000;
}
.MenuSp-link:nth-child(3):before {
  background: url("/image/step.svg") no-repeat center center #000;
}
.MenuSp-link:nth-child(4):before {
  background: url("/image/faq.svg") no-repeat center center #000;
}
.MenuSp-toggle {
  position: relative;
  width: 37px;
  height: 37px;
  background-color: rgba(13, 101, 199, 0.4);
  border-radius: 6px;
  cursor: pointer;
}
.MenuSp-toggle.is-active .line01 {
  top: 18px;
  transform: rotate(45deg);
}
.MenuSp-toggle.is-active .line02 {
  opacity: 0;
}
.MenuSp-toggle.is-active .line03 {
  top: 18px;
  transform: rotate(135deg);
}
.MenuSp-line {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 21px;
  height: 3px;
  background: #fff;
  transition: all 0.3s ease-out;
}
.MenuSp-line.line01 {
  top: 8px;
  left: 8px;
}
.MenuSp-line.line02 {
  top: 17px;
  left: 8px;
}
.MenuSp-line.line03 {
  top: 26px;
  left: 8px;
}

.HeaderWithLogo-inner {
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.HeaderWithLogo-inner a {
  display: inline-block;
}
.HeaderWithLogo-logo {
  width: 232px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .HeaderWithLogo-logo {
    width: 120px;
    height: auto;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
/* sp */
.FaqBlock {
  background-color: #e4f1fe;
  border-radius: 12px;
  padding: 8px;
}
.FaqBlock-checkbox {
  display: none;
}
.FaqBlock-checkbox:checked + .FaqBlock-section + .FaqBlock-contents {
  display: block;
}
.FaqBlock-checkbox:checked + .FaqBlock-section:after {
  transform: rotate(45deg);
}
.FaqBlock-section {
  font-size: min(24px, 1.6vw);
  display: flex;
  color: #0D65C7;
  font-weight: 700;
  padding: 1.6%;
  line-height: 2;
}
.FaqBlock-section:after {
  font-size: min(48px, 3.2vw);
  display: inline-block;
  content: "+";
  margin-left: auto;
  line-height: 1em;
}
@media screen and (max-width: 768px) {
  .FaqBlock-section {
    font-size: min(48px, 3.2vw);
    line-height: 1.5;
  }
  .FaqBlock-section:after {
    font-size: max(24px, 3.6vw);
  }
}
.FaqBlock-contents {
  display: none;
}
.FaqBlock-contents > * + * {
  margin-top: 8px;
}
.FaqBlock + .FaqBlock {
  margin-top: 2vw;
}

/* sp */
.FaqContent {
  background-color: #fff;
  border-radius: 12px;
}
.FaqContent-checkbox {
  display: none;
}
.FaqContent-checkbox:checked + .FaqContent-label + .FaqContent-answer {
  display: block;
}
.FaqContent-checkbox:checked + .FaqContent-label:after {
  transform: rotate(45deg);
}
.FaqContent-label {
  font-size: min(20px, 1.4vw);
  display: flex;
  padding: 1.6%;
  align-items: center;
  color: #0D65C7;
  font-weight: 700;
}
.FaqContent-label:before {
  width: 28px;
  height: 41px;
  width: 2.8455284553%;
  display: inline-block;
  content: "";
  margin-right: 2vw;
  background: url("/image/svg/faq-q.svg") no-repeat;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .FaqContent-label:before {
    padding-left: 5%;
  }
}
@media screen and (max-width: 768px) {
  .FaqContent-label:before {
    width: 20px;
    height: 30px;
    margin-right: 4vw;
  }
}
.FaqContent-label:after {
  font-size: min(48px, 3.2vw);
  content: "+";
  margin-left: auto;
  line-height: 1em;
}
@media screen and (max-width: 768px) {
  .FaqContent-label:after {
    font-size: max(24px, 3.6vw);
  }
}
@media screen and (max-width: 768px) {
  .FaqContent-label {
    font-size: max(16px, 2.4vw);
  }
}
.FaqContent-answer {
  font-size: min(14px, 1.0vw);
  display: none;
  color: #221714;
  font-weight: 700;
  padding: 0 8% 2%;
}
.FaqContent-answer a {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .FaqContent-answer {
    font-size: max(14px, 2.1vw);
    font-weight: 400;
  }
}

.Faq {
  background-image: url("/image/bg/bg2.jpg");
  padding: 6vw 0 10vw 0;
}
@media screen and (max-width: 768px) {
  .Faq {
    padding: 6vw 0 160px 0;
  }
}
.Faq-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .Faq-inner {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .Faq-inner {
    width: 100%;
    min-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.Faq-titleLogo {
  width: 11.9252873563%;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .Faq-titleLogo {
    width: 49.552238806%;
  }
}
@media screen and (max-width: 768px) {
  .Faq-titleLogo {
    width: 8.3333333333%;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .Faq-titleLogo {
    width: 34.6268656716%;
  }
}
.Faq-subtitle {
  font-size: min(20px, 1.4vw);
  color: #0D65C7;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .Faq-subtitle {
    font-size: max(20px, 3.0vw);
  }
}
.Faq-questions {
  width: 71.8390804598%;
  margin-top: 3vw;
}
@media screen and (max-width: 768px) {
  .Faq-questions {
    width: 298.5074626866%;
  }
}
@media screen and (max-width: 768px) {
  .Faq-questions {
    width: 100%;
  }
}

.banner-link {
  max-width: 760px;
  width: 100%;
  margin: 56px auto 0;
  display: block;
}
@media screen and (max-width: 768px) {
  .banner-link {
    max-width: 335px;
    margin: 40px auto 0;
  }
}

.banner-pic {
  width: 100%;
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
.c-btn {
  width: 100%;
  padding: 25px 0;
  background-color: #0D65C7;
  border-radius: 48px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4), inset 0px -15px 25px #012F60, inset 0px 15px 30px rgba(255, 255, 255, 0.5);
  color: #fff;
  display: block;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.c-btn::after {
  content: "";
  width: 25px;
  height: 25px;
  background: url("/image/svg/icon_arrow.svg") no-repeat;
  background-size: contain;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
}
.c-btn:hover {
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25), inset 0px -10px 10px rgba(255, 255, 255, 0.25), inset 0px 10px 10px #00366F;
}
@media screen and (max-width: 768px) {
  .c-btn {
    padding: 22px 0;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4), inset 0px -15px 15px #012F60, inset 0px 15px 20px rgba(255, 255, 255, 0.5);
    font-size: 20px;
  }
  .c-btn::after {
    width: 20px;
    height: 20px;
    right: 23px;
  }
}

.c-secBtn {
  max-width: 400px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin-top: 16px;
  margin-bottom: 10px;
}
.c-secBtn::before {
  content: "＼自慢できるモバイルWiFi／";
  width: 100%;
  color: #231F20;
  display: block;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: -95px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .c-secBtn {
    max-width: 295px;
  }
  .c-secBtn::before {
    font-size: 18px;
    top: -60px;
  }
}

.limitedCopyWrap {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .limitedCopyWrap {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.limitedCopyWrap .limited__chara01 {
  position: absolute;
  top: 95px;
  left: -205px;
  width: 226px;
}
@media screen and (max-width: 768px) {
  .limitedCopyWrap .limited__chara01 {
    width: 106px;
    top: 135px;
    left: 65px;
  }
}
.limitedCopyWrap .limited__chara02 {
  position: absolute;
  top: 40px;
  right: -180px;
  width: 240px;
}
@media screen and (max-width: 768px) {
  .limitedCopyWrap .limited__chara02 {
    width: 120px;
    top: 100px;
    right: 56px;
  }
}

.limitedCopy {
  display: block;
  margin: 72px auto;
  width: 594px;
}
@media screen and (max-width: 768px) {
  .limitedCopy {
    width: 343px;
    margin: 32px auto 100px;
  }
}

.ctaCampaign {
  display: block;
  margin: 0 auto;
  padding-left: 50px;
}
@media screen and (max-width: 768px) {
  .ctaCampaign {
    padding-left: 0;
    width: 272px;
  }
}

.ctaCampaignTxt {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.c-scrollArea {
  padding: 25px 0 72px;
}
@media screen and (max-width: 768px) {
  .c-scrollArea {
    padding: 15px 0 40px;
  }
}

.c-scrollArea--reverse {
  padding: 72px 0 25px;
}
@media screen and (max-width: 768px) {
  .c-scrollArea--reverse {
    padding: 40px 0 15px;
  }
}

.c-scrollAreaInner {
  transition-timing-function: linear;
}

.c-scrollPic {
  width: 692px;
  padding-right: 40px;
  opacity: 0.4;
}
@media screen and (max-width: 768px) {
  .c-scrollPic {
    width: 388px;
  }
}

.c-caption {
  margin: 0 auto;
}

.c-ttl {
  margin-top: 8px;
  font-size: 48px;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-ttl {
    font-size: 30px;
    line-height: 1.3;
  }
}

.c-ttlSub {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .c-ttlSub {
    font-size: 16px;
    line-height: 23px;
  }
}

.c-notes {
  display: block;
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .c-notes {
    font-size: 11px;
  }
}

.wrap {
  background-color: #F4D400;
  overflow: hidden;
}
.wrap em {
  font-style: normal;
}
.wrap input {
  display: none;
}

.header {
  position: relative;
}
.header input {
  display: none;
}

.header__inner {
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .header__inner {
    padding: 0 10px 5px;
  }
}

.header__logoWrap {
  width: 100%;
  max-width: 232px;
}
@media screen and (max-width: 768px) {
  .header__logoWrap {
    max-width: 120px;
    position: relative;
    z-index: 10000;
  }
}

.header__logo {
  display: block;
}
@media screen and (max-width: 768px) {
  .header__logo {
    max-width: 120px;
  }
}

.hamburgerMenu--input:checked + label .hamburgerMenu--line {
  background-color: rgba(255, 255, 255, 0);
}
.hamburgerMenu--input:checked + label .hamburgerMenu--line::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburgerMenu--input:checked + label .hamburgerMenu--line::after {
  width: 18px;
  bottom: 0;
  transform: rotate(-45deg);
}
.hamburgerMenu--input:checked + label + .header__nav {
  right: 0;
}

.hamburgerMenu--label {
  display: none;
}
@media screen and (max-width: 768px) {
  .hamburgerMenu--label {
    width: 48px;
    height: 48px;
    background-color: #0D65C7;
    border-radius: 50%;
    box-shadow: inset 0px 6px 6px rgba(255, 255, 255, 0.5), inset 0px -6px 8px #012F60;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10000;
  }
}

@media screen and (max-width: 768px) {
  .hamburgerMenu--line,
.hamburgerMenu--line::before,
.hamburgerMenu--line::after {
    content: "";
    width: 18px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    display: block;
    position: absolute;
    transition: all 0.3s;
  }
}

@media screen and (max-width: 768px) {
  .hamburgerMenu--line::before {
    top: -8px;
  }
  .hamburgerMenu--line::after {
    width: 13px;
    bottom: -8px;
  }
}

.header__nav {
  width: 100%;
  max-width: 727px;
  padding: 12px 12px 12px 40px;
  background-color: #FAE100;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  border-radius: 36px;
  transition: 0.5s;
}
@media screen and (max-width: 768px) {
  .header__nav {
    display: block;
    height: 100vh;
    padding: 68px 5px 16px;
    border-radius: 0;
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
}

.navBg {
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .navBg {
    background-color: #FAE100;
  }
}

.header__navInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .header__navInner {
    display: block;
  }
}

.header__navList {
  width: 100%;
  max-width: 455px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .header__navList {
    display: block;
    margin: 0 auto;
  }
}

.header__navListItem {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .header__navListItem {
    padding: 18px 0;
  }
}

.header__navListLink {
  display: block;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.25;
}
.header__navListLink:hover {
  color: #0D65C7;
}
@media screen and (max-width: 768px) {
  .header__navListLink {
    font-size: 20px;
  }
}

.header__btn {
  width: 180px;
  padding: 12px 0;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25), inset 0px -10px 10px #00366F, inset 0px 10px 10px rgba(255, 255, 255, 0.25);
  font-size: 16px;
}
.header__btn::after {
  width: 16px;
  height: 16px;
  right: 6px;
}
@media screen and (max-width: 768px) {
  .header__btn {
    width: 280px;
    margin: 22px auto 0;
    padding: 18px;
    font-size: 18px;
  }
  .header__btn::after {
    width: 18px;
    height: 18px;
    top: 30px;
    right: 17px;
  }
}

.navItem {
  margin-top: 41px;
  text-align: center;
}

.navItem__picWrap {
  width: 153px;
  margin: 0 auto;
}

.navItem__txt {
  margin-top: 6px;
  font-size: 10px;
}

.kv {
  padding-bottom: 150px;
  background: linear-gradient(180deg, #fff 0%, #fff 50%, #F4D400 50%, #F4D400 100%);
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .kv {
    padding-bottom: 100px;
  }
}

.kv__bg {
  height: 440px;
  background-color: #fff;
  padding-left: 100px;
  padding-right: 100px;
}
@media screen and (max-width: 768px) {
  .kv__bg {
    height: 415px;
    padding: 0;
  }
}

.kv__picArea {
  width: 100%;
  max-width: 960px;
  margin: 122px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .kv__picArea {
    margin: 78px auto 0;
    display: block;
  }
}

.kv__contens {
  -webkit-animation-name: ttlAnime;
          animation-name: ttlAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

.kv__titleBadge {
  display: flex;
  gap: 0 15px;
}
@media screen and (max-width: 768px) {
  .kv__titleBadge {
    gap: 0;
  }
}
.kv__titleBadge img {
  width: 210px;
  height: 210px;
}
@media screen and (max-width: 768px) {
  .kv__titleBadge img {
    width: 145px;
    height: 145px;
  }
}

.kv__badgeImg {
  transform: rotate(-5deg);
}

.kv__ttl {
  width: 100%;
  max-width: 483px;
  margin-bottom: 32px;
  color: #0D65C7;
  font-size: 50px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .kv__ttl {
    max-width: 230px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-left: 20px;
    font-size: 28px;
  }
}
.kv__ttl img {
  width: 200px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-bottom: 3px;
}
@media screen and (max-width: 768px) {
  .kv__ttl img {
    width: 110px;
  }
}

@-webkit-keyframes ttlAnime {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ttlAnime {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (max-width: 768px) {
  .kv__pointWrap {
    display: flex;
  }
}

.kv__point {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .kv__point {
    flex-wrap: nowrap;
    flex-direction: column;
    max-width: 210px;
    gap: 8px 0;
    margin: 0 !important;
  }
}

.kv__point__list {
  width: calc((100% - 42px * (3 - 2)) / 3 - 0.1px);
  margin-right: 7px;
  margin-left: 7px;
  margin-top: 0px;
}
.kv__point {
  margin-right: -7px;
  margin-left: -7px;
  margin-top: -0px;
}

@media screen and (max-width: 768px) {
  .kv__point__list {
    width: 100%;
    margin: 0;
  }
  .kv__point__list img {
    width: 100%;
  }
}

.kv__pointAnnotation {
  font-size: 11px;
  margin-top: 6px;
}
@media screen and (max-width: 768px) {
  .kv__pointAnnotation {
    margin-top: 60px;
    padding: 0 5%;
  }
}

.kv__devicePic {
  width: 100%;
  max-width: 320px;
  display: block;
  -webkit-animation-name: deviceAnime;
          animation-name: deviceAnime;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .kv__devicePic {
    max-width: 145px;
    height: 175px;
    margin: 0 auto;
  }
}

@-webkit-keyframes deviceAnime {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes deviceAnime {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.kv__chara01 {
  width: 100%;
  max-width: 238px;
  position: absolute;
  bottom: 70px;
  left: -18px;
  -webkit-animation-name: charaAnime;
          animation-name: charaAnime;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .kv__chara01 {
    max-width: 112px;
    bottom: 165px;
    left: 0;
  }
}

@-webkit-keyframes charaAnime {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes charaAnime {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.kv__chara02 {
  width: 100%;
  max-width: 240px;
  position: absolute;
  bottom: 70px;
  right: 150px;
  -webkit-animation-name: charaAnime;
          animation-name: charaAnime;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .kv__chara02 {
    max-width: 113px;
    bottom: 165px;
    left: 30%;
    transform: translateX(-30%);
  }
}

.kv__chara03 {
  width: 100%;
  max-width: 240px;
  position: absolute;
  right: 165px;
  bottom: 0;
  -webkit-animation-name: charaAnime;
          animation-name: charaAnime;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .kv__chara03 {
    max-width: 113px;
    right: 29px;
    bottom: 165px;
  }
}

.kv__btn {
  max-width: 400px;
  margin-bottom: 22px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .kv__btn {
    max-width: 315px;
    bottom: 20px;
    margin-bottom: 0;
  }
}
.kv__btn .kv__btn--annotation {
  font-size: 16px !important;
}

.kvUnder {
  width: 100%;
  max-width: 1066px;
  margin: 0 auto;
  padding-bottom: 104px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .kvUnder {
    height: 244px;
    max-width: 315px;
  }
}

.kvUnder__copyWrap {
  width: 100%;
  max-width: 802px;
  margin: 0 auto;
}

.kvUnder__chara01 {
  width: 226px;
  position: absolute;
  left: -58px;
  bottom: -33px;
}
@media screen and (max-width: 768px) {
  .kvUnder__chara01 {
    width: 106px;
    bottom: 0;
    left: 46px;
  }
}

.kvUnder__chara02 {
  width: 216px;
  position: absolute;
  right: -40px;
  bottom: -33px;
}
@media screen and (max-width: 768px) {
  .kvUnder__chara02 {
    width: 98px;
    bottom: 0;
    right: 40px;
  }
}

.trouble {
  padding-bottom: 72px;
}
@media screen and (max-width: 768px) {
  .trouble {
    padding: 0 20px 52px;
  }
}

.trouble__caption {
  width: 220px;
}
@media screen and (max-width: 768px) {
  .trouble__caption {
    width: 180px;
  }
}

.trouble__list {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 48px auto 0;
  display: flex;
  gap: 0 3%;
}
@media screen and (max-width: 768px) {
  .trouble__list {
    display: block;
    max-width: 335px;
    margin: 24px auto 0;
  }
}

.trouble__listItemWrap {
  width: 100%;
  max-width: 280px;
}
@media screen and (max-width: 768px) {
  .trouble__listItemWrap {
    max-width: none;
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
  }
  .trouble__listItemWrap:first-of-type {
    margin-top: 0;
  }
}

.trouble__listItem {
  padding: 12px 12px 18px 12px;
  background-color: #fff;
  border-radius: 15px;
  position: relative;
}
.trouble__listItem::before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 19.9px 11.5px 0 11.5px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -17px;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .trouble__listItem {
    padding: 12px 10px 12px 30px;
    min-width: 230px;
  }
  .trouble__listItem::before {
    border-width: 12.5px 21.7px 12.5px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -11px;
    bottom: 20px;
    transform: none;
  }
}

.trouble__listTxt {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .trouble__listTxt {
    font-size: 16px;
    text-align: left;
    letter-spacing: 0.5px;
  }
}

.trouble__listTxtColor {
  color: #0D65C7;
}

.trouble__listPicWrap {
  width: 160px;
  margin: 40px auto 0;
}
@media screen and (max-width: 768px) {
  .trouble__listPicWrap {
    width: 84px;
    margin: 0;
  }
}

.trouble__chara01 {
  position: absolute;
  top: 280px;
  left: -180px;
  width: 234.86px;
}

.illust_arrow {
  text-align: center;
  margin: 32px 0;
}

.resolutionWrap {
  display: flex;
  max-width: 860px;
  width: 100%;
  margin: 40px auto 0;
  gap: 0 40px;
}
@media screen and (max-width: 768px) {
  .resolutionWrap {
    flex-direction: column;
  }
}

.resolution {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  max-width: 420px;
}
@media screen and (max-width: 768px) {
  .resolution {
    gap: 0 10px;
    margin: 0 auto;
  }
}

.resolution__list {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: white;
  font-weight: 700;
  box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.resolution__list::after {
  position: absolute;
  top: 0;
  left: 24px;
  transform: scale(1.5);
}
@media screen and (max-width: 768px) {
  .resolution__list::after {
    position: absolute;
    top: -8px;
    left: 4px;
    transform: scale(1);
  }
}
@media screen and (max-width: 768px) {
  .resolution__list {
    width: 104px;
    height: 104px;
  }
}

.resolution__list--01::after {
  content: url(/image/03_trouble/resolution_01.svg);
  transform: scale(0.8);
  top: -14px;
  left: 0;
}
@media screen and (max-width: 768px) {
  .resolution__list--01::after {
    transform: scale(0.5);
    top: -24px;
    left: -20px;
  }
}

.resolution__list--02::after {
  content: url(/image/03_trouble/resolution_02.svg);
}

.resolution__list--03::after {
  content: url(/image/03_trouble/resolution_03.svg);
}

.resolution__list__subTxt {
  font-size: 24px;
  line-height: 130%;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .resolution__list__subTxt {
    font-size: 12px;
  }
}

.resolution__list__txt {
  font-size: 34px;
  line-height: 130%;
}
@media screen and (max-width: 768px) {
  .resolution__list__txt {
    font-size: 18px;
    margin-top: 4px;
  }
}

.resolution__list__txt--blue {
  color: #0D65C7;
}

.resolutionImg {
  position: relative;
  width: 380px;
  height: 380px;
  background-color: white;
  border-radius: 50%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .resolutionImg {
    width: 222px;
    height: 222px;
    margin: 60px auto 0;
  }
}
.resolutionImg img {
  width: 280px;
  margin-top: -50px;
}
@media screen and (max-width: 768px) {
  .resolutionImg img {
    width: 168px;
    margin-top: -40px;
  }
}
.resolutionImg::before {
  content: url(/image/03_trouble/kirari_02.svg);
  position: absolute;
  bottom: 0;
  left: -65px;
  transform: scale(1.5);
}
@media screen and (max-width: 768px) {
  .resolutionImg::before {
    top: -10px;
    bottom: auto;
    left: -50px;
    transform: scale(1);
  }
}
.resolutionImg::after {
  content: url(/image/03_trouble/kirari_01.svg);
  position: absolute;
  top: 0;
  right: -30px;
  transform: scale(1.5);
}
@media screen and (max-width: 768px) {
  .resolutionImg::after {
    bottom: 0;
    top: auto;
    transform: scale(1);
  }
}

.resolutionAnnotation {
  max-width: 800px;
  width: 100%;
  margin: 20px auto 0;
  font-size: 11px;
}

.reason {
  background-color: #fff;
  position: relative;
}

.reason__inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 0 56px;
}
@media screen and (max-width: 768px) {
  .reason__inner {
    padding: 40px 20px;
  }
}

.reason__chara01 {
  position: absolute;
  top: -100px;
  right: -80px;
  width: 284px;
}

.reasonList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0 !important;
}

.reasonList__item {
  width: calc((100% - 120px * (3 - 2)) / 3 - 0.1px);
  margin-right: 20px;
  margin-left: 20px;
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
  text-align: center;
  font-weight: 700;
  background-color: #F4D400;
  border-radius: 20px;
  height: 150px;
}
.reasonList {
  margin-right: -20px;
  margin-left: -20px;
  margin-top: -45px;
}

.reasonList__item img {
  margin-top: -35px;
}
@media screen and (max-width: 768px) {
  .reasonList__item img {
    margin-top: -25px;
  }
}
@media screen and (max-width: 768px) {
  .reasonList__item {
    width: calc((100% - 40px * (2 - 1)) / 2 - 0.1px);
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
  }
  .reasonList {
    margin-right: -10px;
    margin-left: -10px;
    margin-top: -20px;
  }
}

.reasonList__item__head {
  font-size: 24px;
  line-height: 35px;
}
@media screen and (max-width: 768px) {
  .reasonList__item__head {
    font-size: 16px;
    line-height: 23px;
  }
}

.reasonList__item__body {
  font-size: 32px;
  line-height: 130%;
  color: #0D65C7;
}
@media screen and (max-width: 768px) {
  .reasonList__item__body {
    font-size: 24px;
    line-height: 130%;
  }
}

.reasonList__item__txtImg {
  width: 80%;
  margin: 0 !important;
}
@media screen and (max-width: 768px) {
  .reasonList__item__txtImg {
    height: 63px;
  }
}

.reasonAnnotation {
  margin-top: 16px;
  font-size: 11px;
  line-height: 16px;
}

@media screen and (max-width: 768px) {
  .solve {
    padding-bottom: 22px;
  }
}

.solve__caption {
  width: 160px;
}
@media screen and (max-width: 768px) {
  .solve__caption {
    width: 134px;
  }
}

.solve__list {
  width: 100%;
  margin-top: 48px;
}

.solve__listItem {
  margin-top: 50px;
  display: flex;
  align-items: center;
  position: relative;
}
.solve__listItem:first-of-type {
  margin-top: 0;
}
.solve__listItem:nth-of-type(even) {
  flex-direction: row-reverse;
}
.solve__listItem:nth-of-type(even) .solve__listTxtArea {
  margin-left: 0;
  margin-right: 50px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .solve__listItem {
    width: 89%;
    margin-top: 74px;
    display: block;
  }
  .solve__listItem:first-of-type {
    margin-top: 62px;
  }
  .solve__listItem:nth-of-type(even) {
    position: relative;
    right: -11%;
  }
  .solve__listItem:nth-of-type(even) .solve__listTxtArea {
    margin-right: 20px;
    text-align: left;
  }
}

.solve__listPic {
  width: 100%;
  max-width: 680px;
}
@media screen and (max-width: 768px) {
  .solve__listPic {
    max-width: none;
  }
}

.solve__listTxtArea {
  width: 100%;
  margin-left: 50px;
}
@media screen and (max-width: 768px) {
  .solve__listTxtArea {
    margin-left: 20px;
  }
}

.solve__listTxtArea--primary {
  max-width: 436px;
}

.solve__listTxtArea--secondary {
  max-width: 379px;
}

.solve__listTxtArea--tertiary {
  max-width: 416px;
}

@media screen and (max-width: 768px) {
  .solve__listTtl01 {
    width: 100%;
    max-width: 216px;
    position: absolute;
    top: -31px;
  }
}

.solve__listTtl02 {
  width: 85%;
  margin-left: 15%;
}
@media screen and (max-width: 768px) {
  .solve__listTtl02 {
    width: 100%;
    max-width: 151px;
    margin-left: 0;
    position: absolute;
    top: -38px;
    left: -16px;
  }
}

@media screen and (max-width: 768px) {
  .solve__listTtl03 {
    width: 100%;
    max-width: 199px;
    position: absolute;
    top: -43px;
  }
}

.solve__listTxt {
  margin-top: 25px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.45;
}
@media screen and (max-width: 768px) {
  .solve__listTxt {
    margin-top: 12px;
    font-size: 15px;
  }
}

.solve__listTxt--notes01::after {
  content: "※1";
  font-size: 13px;
  font-weight: normal;
  position: relative;
  bottom: 10px;
  left: -8px;
}
@media screen and (max-width: 768px) {
  .solve__listTxt--notes01::after {
    font-size: 11px;
    bottom: 7px;
  }
}

.solve__listTxt--notes02::after {
  content: "※2";
  font-size: 13px;
  font-weight: normal;
  position: relative;
  bottom: 10px;
  left: -16px;
}
@media screen and (max-width: 768px) {
  .solve__listTxt--notes02::after {
    font-size: 11px;
    bottom: 7px;
    left: -14px;
  }
}

.solve__notes {
  margin-top: 36px;
}
@media screen and (max-width: 768px) {
  .solve__notes {
    margin-top: 8px;
  }
}

.solve__listChara01 {
  width: 100%;
  max-width: 233px;
  margin-bottom: 48px;
}
@media screen and (max-width: 1000px) {
  .solve__listChara01 {
    display: none;
  }
}

.solve__listChara02 {
  width: 100%;
  max-width: 251px;
  margin-right: 24px;
  margin-bottom: 45px;
}
@media screen and (max-width: 1000px) {
  .solve__listChara02 {
    display: none;
  }
}

.solve__listChara03 {
  width: 100%;
  max-width: 264px;
  margin-top: 170px;
}
@media screen and (max-width: 1000px) {
  .solve__listChara03 {
    display: none;
  }
}

.plan {
  background-color: #fff;
  position: relative;
}

.plan__inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 0 56px;
}
@media screen and (max-width: 768px) {
  .plan__inner {
    padding: 40px 20px;
  }
}

.plan__chara01 {
  width: 195px;
  position: absolute;
  top: -60px;
  left: 152px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .plan__chara01 {
    width: 100px;
    top: -22px;
    left: 6px;
  }
}

.plan__chara02 {
  width: 303px;
  position: absolute;
  top: -60px;
  right: 186px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .plan__chara02 {
    width: 150px;
    top: -22px;
    right: 20px;
  }
}

.plan__caption {
  width: 85px;
}

.plan__list {
  max-width: 800px;
  margin: 48px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plan__listItemWrap {
  width: 100%;
  background-color: #E0EEFF;
  border-radius: 40px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  position: relative;
}
.plan__listItemWrap:first-of-type {
  border: 2px solid #0D65C7;
}
@media screen and (max-width: 768px) {
  .plan__listItemWrap {
    border-radius: 15px;
  }
}

.plan__listItem--1 .plan__listTtlBg--primary {
  padding-top: 30px;
}
@media screen and (max-width: 768px) {
  .plan__listItem--1 .plan__listTtlBg--primary {
    padding-top: 22px;
  }
}
.plan__listItem--1 .plan__listItem_bottom {
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .plan__listItem--1 .plan__listItem_bottom {
    padding-bottom: 22px;
  }
  .plan__listItem--1 .plan__listItem_bottom .plan__listItemTxt--secondary {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: -0.05em;
  }
}

.plan__listItem--2 {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.plan__listItem--2 .plan__listItem_top {
  border-radius: 0 40px 0 0 !important;
}
@media screen and (max-width: 768px) {
  .plan__listItem--2 .plan__listItem_top {
    border-radius: 0 15px 0 0 !important;
  }
}
.plan__listItem--2 .plan__listItem_bottom {
  border-radius: 0 0 40px 0 !important;
}
@media screen and (max-width: 768px) {
  .plan__listItem--2 .plan__listItem_bottom {
    border-radius: 0 0 15px 0 !important;
  }
}

.plan__listTtlBg--primary {
  background-color: #0D65C7;
  border-radius: 35px 35px 0 0;
  padding: 60px 0 24px;
}
@media screen and (max-width: 768px) {
  .plan__listTtlBg--primary {
    border-radius: 10px 10px 0 0;
  }
}

.plan__listTtlBg--secondary {
  background-color: #5A99DF;
  border-radius: 40px 40px 0 0;
  padding: 23px 0;
}
@media screen and (max-width: 768px) {
  .plan__listTtlBg--secondary {
    border-radius: 15px 15px 0 0;
    padding: 19px 0;
  }
}

.plan__listBalloon {
  background-color: #F4D400;
  border-radius: 34px;
  width: 220px;
  padding: 7px 0;
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
}
.plan__listBalloon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 19.1px 11px 0 11px;
  border-color: #f4d300 transparent transparent transparent;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .plan__listBalloon {
    width: 130px;
    top: -35px;
  }
  .plan__listBalloon::before {
    bottom: -10px;
  }
}

.plan__listBalloonTxt {
  color: #004A97;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan__listBalloonTxt {
    font-size: 11px;
  }
}

.plan__listTtl {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan__listTtl {
    font-size: 18px;
  }
}

.plan__listPriceArea {
  padding: 20px 0;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .plan__listPriceArea {
    padding: 14px 0;
  }
}

.plan__listPrice {
  width: 320px;
  margin: 0 auto;
  background: linear-gradient(transparent 80%, #F4D400 80%);
  color: #0D65C7;
  display: block;
  font-size: 88px;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  position: relative;
}
.plan__listPrice::after {
  content: "円";
  font-size: 40px;
}
@media screen and (max-width: 768px) {
  .plan__listPrice {
    width: 115px;
    font-size: 36px;
  }
  .plan__listPrice::after {
    font-size: 16px;
  }
}

.plan__listPriceTax {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan__listPriceTax {
    margin-top: 8px;
    font-size: 12px;
  }
}

.plan__listItem {
  padding: 22px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .plan__listItem {
    padding: 10px 16px;
  }
}

.plan__listItem--primary {
  background-color: #E0EEFF;
}
.plan__listItem--primary:last-of-type {
  border-radius: 0 0 40px 40px;
}
@media screen and (max-width: 768px) {
  .plan__listItem--primary:last-of-type {
    border-radius: 0 0 15px 15px;
  }
}

.plan__listItem--secondary {
  background-color: #fff;
}

.plan__listItemTxt--primary {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .plan__listItemTxt--primary {
    font-size: 12px;
  }
}

.plan__listItemTxt--secondary {
  color: #0D65C7;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .plan__listItemTxt--secondary {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 2px;
  }
}
@media screen and (max-width: 768px) {
  .plan__listItemTxt--secondary span {
    font-size: 12px;
  }
}

.plan__checkItemWrap {
  width: 100%;
  max-width: 800px;
  margin: 32px auto 0;
  display: flex;
  justify-content: center;
  gap: 0 20px;
}
@media screen and (max-width: 768px) {
  .plan__checkItemWrap {
    max-width: none;
    margin: 18px auto 0;
    display: block;
  }
}

.plan__checkItem {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .plan__checkItem {
    margin: 16px auto 0;
  }
  .plan__checkItem:first-of-type {
    margin-top: 0;
  }
}

.plan__checkInput:checked + label::after {
  opacity: 0;
}
.plan__checkInput:checked + label + .plan__checkLabelOpen {
  display: block;
}

.plan__checkLabel {
  padding: 16px;
  display: block;
  background-color: #444;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.plan__checkLabel::before {
  content: "";
  width: 16px;
  height: 4px;
  background-color: #444;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 40px;
  right: 32px;
  z-index: 1;
}
.plan__checkLabel::after {
  content: "";
  width: 4px;
  height: 16px;
  background-color: #444;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 34px;
  right: 38px;
  z-index: 1;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .plan__checkLabel {
    font-size: 15px;
  }
  .plan__checkLabel::before {
    top: 35px;
    right: 28px;
  }
  .plan__checkLabel::after {
    top: 29px;
    right: 34px;
  }
}

.plan__checkLabelTxt {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .plan__checkLabelTxt {
    font-size: 12px;
  }
}

.plan__checkLabelBtn {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .plan__checkLabelBtn {
    width: 32px;
    height: 32px;
  }
}

.plan__checkLabelOpen {
  padding: 16px 24px;
  background: #fff;
  border: 1px solid #444;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  display: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.plan__checkEmTxt {
  font-style: normal;
  font-weight: bold;
}

.optionArea {
  padding-top: 40px;
}

.plan__caption--option {
  width: 108px;
}

.plan__optionList {
  max-width: 800px;
  margin: 32px auto 0;
}

.plan__optionListItem {
  width: 100%;
  border-radius: 40px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 768px) {
  .plan__optionListItem {
    border-radius: 15px;
  }
}

.plan__optionTtlBg {
  background-color: #5A99DF;
  border-radius: 40px 40px 0 0;
  padding: 18px 0;
}
@media screen and (max-width: 768px) {
  .plan__optionTtlBg {
    border-radius: 15px 15px 0 0;
  }
}

.plan__optionTtl {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan__optionTtl {
    font-size: 18px;
  }
}

.plan__optionPriceArea {
  padding: 40px;
}
@media screen and (max-width: 768px) {
  .plan__optionPriceArea {
    padding: 11px 20px 20px;
  }
}

.plan__optionPrice {
  width: 240px;
  margin: 0 auto;
  background: linear-gradient(transparent 80%, #F4D400 80%);
  color: #0D65C7;
  display: block;
  font-size: 92px;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  position: relative;
}
.plan__optionPrice::after {
  content: "円";
  font-size: 40px;
}
@media screen and (max-width: 768px) {
  .plan__optionPrice {
    width: 96px;
    font-size: 40px;
  }
  .plan__optionPrice::after {
    font-size: 16px;
  }
}

.plan__optionTxt {
  margin-top: 16px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan__optionTxt {
    margin-top: 12px;
    font-size: 15px;
    text-align: left;
  }
}

.plan__notes--primary {
  margin-top: 24px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .plan__notes--primary {
    margin-top: 16px;
    text-align: left;
  }
}

.plan__notes--secondary {
  margin: 16px auto 0;
  max-width: 800px;
}

.product {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 72px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .product {
    padding: 0 20px 48px;
  }
}

.product__chara01 {
  width: 248px;
  position: absolute;
  top: -140px;
  z-index: 10000;
  right: -110px;
}
@media screen and (max-width: 768px) {
  .product__chara01 {
    width: 109px;
    top: -70px;
    right: 15px;
  }
}

.product__caption {
  width: 117px;
}

.product__picWrap {
  margin: 48px auto 0;
}
@media screen and (max-width: 768px) {
  .product__picWrap {
    margin: 20px auto 0;
  }
}

.product__swiperArea .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.product__swiperArea .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 20px 10px 0;
}
@media screen and (max-width: 768px) {
  .product__swiperArea .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.product__swiperArea .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 20px 7px 0;
  }
}
@media screen and (max-width: 768px) {
  .product__swiperArea {
    width: 100%;
    max-width: 335px;
    margin: 0 auto;
    position: relative;
  }
}

.product__picContainer {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .product__picContainer {
    width: 100%;
    max-width: 295px;
    margin: 0 auto;
  }
}

.product__pic {
  width: 100%;
  max-width: 800px;
  border-radius: 40px;
}
@media screen and (max-width: 768px) {
  .product__pic {
    margin: 0 auto;
    border-radius: 20px;
    display: block;
  }
}

.product__pagination {
  bottom: auto !important;
}
.product__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}
@media screen and (max-width: 768px) {
  .product__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}

.swiper-button-prev::before,
.swiper-button-next::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url(/image/svg/icon_arrow.svg) no-repeat;
  background-size: contain;
  display: inline-block;
  position: absolute;
  top: -46px;
  z-index: 1;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "" !important;
  width: 80px;
  height: 80px;
  background-color: #0D65C7;
  border-radius: 50%;
  box-shadow: inset 0px 12px 12px rgba(255, 255, 255, 0.5), inset 0px -12px 16px #012F60;
  display: block;
  position: absolute;
  top: -70px;
}
@media screen and (max-width: 768px) {
  .swiper-button-prev::before,
.swiper-button-next::before {
    width: 16px;
    height: 16px;
    top: 26px;
  }
  .swiper-button-prev::after,
.swiper-button-next::after {
    width: 44px;
    height: 44px;
    box-shadow: inset 0px 6px 6px rgba(255, 255, 255, 0.5), inset 0px -6px 8px #012F60;
    top: 12px;
    left: -10px;
  }
}

.swiper-button-prev::before {
  left: -14px;
  transform: rotate(-180deg);
}
@media screen and (max-width: 768px) {
  .swiper-button-prev::before {
    left: -1px;
  }
}

.swiper-button-next::before {
  left: 6px;
}
@media screen and (max-width: 768px) {
  .swiper-button-next::before {
    left: 9px;
  }
}

.product__list {
  width: 100%;
  margin: 92px auto 0;
  display: flex;
  gap: 0 3.3%;
}
@media screen and (max-width: 768px) {
  .product__list {
    max-width: 330px;
    justify-content: space-between;
    margin: 54px auto 0;
  }
}

.product__listItem {
  width: 100%;
  max-width: 180px;
  height: 140px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 6px solid #0D65C7;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .product__listItem {
    max-width: 78px;
    height: 75px;
    border: 3px solid #0D65C7;
  }
}

.product__listItemTxt {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .product__listItemTxt {
    font-size: 13px;
  }
}

.product__listItemTxt--small {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.35;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .product__listItemTxt--small {
    font-size: 13px;
  }
}

.product__listItemSpan {
  font-size: 16px;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .product__listItemSpan {
    font-size: 8px;
  }
}

.product__listItemEm {
  display: block;
  font-size: 48px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .product__listItemEm {
    font-size: 22px;
  }
}

.product__notes {
  margin-top: 16px;
}
@media screen and (max-width: 768px) {
  .product__notes {
    width: 100%;
    max-width: 330px;
    margin: 13px auto 0;
    display: block;
  }
}

.flow {
  padding: 58px 0 56px;
  background-color: #fff;
  position: relative;
}
@media screen and (max-width: 768px) {
  .flow {
    padding: 40px 20px;
  }
}

.flow__inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.flow__chara01 {
  width: 235px;
  position: absolute;
  top: -70px;
  left: 70px;
}
@media screen and (max-width: 768px) {
  .flow__chara01 {
    width: 99px;
    top: -40px;
    left: 0;
  }
}

.flow__caption {
  width: 89px;
}

.flow__itemWrap {
  width: 100%;
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .flow__itemWrap {
    max-width: 768px;
    margin-top: 26px;
  }
}

.flow__item {
  width: 100%;
  max-width: 240px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .flow__item {
    max-width: 94px;
  }
}

.flow__itemNumBg {
  width: 80px;
  height: 80px;
  background-color: #0D65C7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -27px;
}
@media screen and (max-width: 768px) {
  .flow__itemNumBg {
    width: 32px;
    height: 32px;
    top: -17px;
    left: -6px;
  }
}

.flow__itemNum {
  height: 35px;
}
@media screen and (max-width: 768px) {
  .flow__itemNum {
    height: 12px;
  }
}

.flow__itemPicBg {
  width: 240px;
  height: 240px;
  background-color: #FCF18C;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .flow__itemPicBg {
    width: 94px;
    height: 94px;
  }
}

.flow__itemPic {
  width: 180px;
  display: block;
}
@media screen and (max-width: 768px) {
  .flow__itemPic {
    width: 58px;
  }
}

.flow__itemTxt {
  margin-top: 16px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .flow__itemTxt {
    font-size: 15px;
  }
}

.flow__itemDotWrap {
  width: 70px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .flow__itemDotWrap {
    width: 26px;
  }
}

.flow__itemDot {
  width: 12px;
  height: 12px;
  background-color: #0D65C7;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .flow__itemDot {
    width: 6px;
    height: 6px;
  }
}

.voice {
  padding: 80px 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .voice {
    padding: 23px 0 80px;
  }
}

.voice__chara01 {
  width: 226px;
  position: absolute;
  top: -70px;
  right: 140px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .voice__chara01 {
    width: 97px;
    top: -30px;
    right: 3px;
  }
}

.voice__caption {
  width: 91px;
}

.voice__listWrap {
  margin-top: 48px;
}
@media screen and (max-width: 768px) {
  .voice__listWrap {
    margin-top: 20px;
  }
}

.voice__container {
  margin-top: 48px;
}
@media screen and (max-width: 768px) {
  .voice__container {
    margin-top: 20px;
  }
}

.voice__listItem {
  width: 440px !important;
  min-height: 300px;
  padding: 44px 25px 32px;
  background-color: #fff;
  border-radius: 50px 50px 0 50px;
  position: relative;
  transform: translate(calc(-50% - 20px), 0);
}
@media screen and (max-width: 768px) {
  .voice__listItem {
    width: 280px !important;
    min-height: 236px;
    padding: 30px 30px 20px 30px;
    border-radius: 40px 40px 0 40px;
    transform: none;
  }
}

.voice__listPic {
  width: 54px;
  display: block;
  position: absolute;
  top: 24px;
  left: 24px;
}
@media screen and (max-width: 768px) {
  .voice__listPic {
    width: 34px;
  }
}

.voice__listPic--reverse {
  width: 54px;
  display: block;
  transform: scale(-1, -1);
  position: absolute;
  top: 24px;
  right: 24px;
}
@media screen and (max-width: 768px) {
  .voice__listPic--reverse {
    width: 34px;
  }
}

.voice__listTtl {
  color: #0D65C7;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .voice__listTtl {
    font-size: 18px;
  }
}

.voice__listTxt {
  margin-top: 50px;
  font-size: 20px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .voice__listTxt {
    margin-top: 10px;
    font-size: 15px;
  }
}

.voice__listSpan {
  display: block;
  font-size: 16px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .voice__listSpan {
    font-size: 14px;
  }
}

.voice__pagination {
  bottom: 40px !important;
}

.faq {
  padding: 20px 20px 0;
  position: relative;
}

.faq__chara01 {
  width: 173px;
  position: absolute;
  top: -50px;
  left: 331px;
}
@media screen and (max-width: 768px) {
  .faq__chara01 {
    width: 85px;
    top: 3px;
    left: 0;
  }
}

.faq__caption {
  width: 63px;
}

.faq__area {
  width: 100%;
  max-width: 960px;
  margin: 48px auto 0;
}

.faq__input:checked + label {
  border-radius: 30px 30px 0 0;
}
@media screen and (max-width: 768px) {
  .faq__input:checked + label {
    border-radius: 20px 20px 0 0;
  }
}
.faq__input:checked + label::after {
  opacity: 0;
}
.faq__input:checked + label + .faq__primaryItem {
  display: block;
}

.faq__label {
  width: 100%;
  margin-top: 24px;
  padding: 34px 40px;
  background-color: #fff;
  border-radius: 30px;
  color: #000;
  display: block;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.45;
  position: relative;
}
.faq__label:first-of-type {
  margin-top: 0;
}
.faq__label::before {
  content: "";
  width: 20px;
  height: 4px;
  background-color: #fff;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 48px;
  right: 57px;
  z-index: 1;
}
.faq__label::after {
  content: "";
  width: 4px;
  height: 20px;
  background-color: #fff;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 40px;
  right: 65px;
  z-index: 1;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .faq__label {
    padding: 22px 20px;
    border-radius: 20px;
    font-size: 18px;
  }
  .faq__label::before {
    width: 20px;
    height: 3px;
    border-radius: 20px;
    top: 34px;
    right: 26px;
  }
  .faq__label::after {
    width: 3px;
    height: 20px;
    border-radius: 20px;
    top: 26px;
    right: 34px;
  }
}

.faq__labelBtn {
  width: 56px;
  height: 56px;
  background-color: #0D65C7;
  border-radius: 50%;
  box-shadow: inset 0px 10px 10px rgba(255, 255, 255, 0.5), inset 0px -10px 10px #012F60;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .faq__labelBtn {
    width: 40px;
    height: 40px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15), inset 0px 6px 6px rgba(255, 255, 255, 0.5), inset 0px -6px 8px #012F60;
    right: 16px;
  }
}

.faq__primaryItem {
  border-radius: 0 0 30px 30px;
  display: none;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .faq__primaryItem {
    border-radius: 0 0 20px 20px;
  }
}

.faq__itemInput:checked + label::after {
  opacity: 0;
}
.faq__itemInput:checked + label + .faq__secondaryItem {
  display: block;
}

.faq__itemLabel {
  width: 100%;
  padding: 18px 22px;
  display: block;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
}
.faq__itemLabel::before {
  content: "";
  width: 20px;
  height: 4px;
  background-color: #0D65C7;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 50%;
  right: 58px;
  transform: translateY(-50%);
}
.faq__itemLabel::after {
  content: "";
  width: 4px;
  height: 20px;
  background-color: #0D65C7;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 50%;
  right: 66px;
  transform: translateY(-50%);
  opacity: 1;
}
.faq__itemLabel:nth-of-type(odd) {
  background-color: #E0EEFF;
}
.faq__itemLabel:nth-of-type(even) {
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .faq__itemLabel {
    padding: 18px 55px 18px 22px;
    font-size: 18px;
    line-height: 1;
  }
  .faq__itemLabel::before {
    width: 18px;
    height: 4px;
    right: 27px;
  }
  .faq__itemLabel::after {
    width: 4px;
    height: 18px;
    right: 34px;
  }
}

.faq__itemLabelInner {
  display: flex;
  align-items: flex-start;
}

.faq__itemLabelPic {
  width: 28px;
  margin-right: 18px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .faq__itemLabelPic {
    margin-top: 3px;
    width: 16px;
  }
}

.faq__itemLabelTxt {
  line-height: 1.4;
}

.faq__itemTxt {
  font-size: 24px;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .faq__itemTxt {
    font-size: 15px;
  }
}

.faq__secondaryItem {
  padding: 14px 22px 24px;
  display: none;
}
.faq__secondaryItem:nth-of-type(odd) {
  background-color: #E0EEFF;
}
.faq__secondaryItem:nth-of-type(even) {
  background-color: #fff;
}

.faq__secondaryItemInner {
  display: flex;
  align-items: flex-start;
  font-size: 24px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .faq__secondaryItemInner {
    font-size: 18px;
  }
}

.bnr {
  padding: 0 0 100px;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .bnr {
    padding: 0 0 138px;
    margin-top: 40px;
  }
}

.bnr_link {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .bnr_link {
    max-width: 335px;
  }
}

@media screen and (max-width: 768px) {
  .bnr__pic {
    max-width: 335px;
  }
}

.popup_btn {
  display: block;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  width: 220px;
  margin: 20px auto 0;
  text-align: center;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;
}

.popup .bg {
  width: 100vw;
  height: 100vh;
  background-color: #1119;
}

.popup .main {
  width: 80%;
  max-width: 550px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 769px) {
  .popup .main {
    width: 50%;
  }
}

.popup .main img {
  width: 100%;
}

.batsu {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-bottom: 20px;
  cursor: pointer;
}

.batsu::before, .batsu::after {
  /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  /* 棒の幅（太さ） */
  height: 50px;
  /* 棒の高さ */
  background: white;
}

.batsu::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.batsu::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.komeMark {
  font-size: 10px;
  line-height: initial;
  vertical-align: top;
}

.serviceInput {
  color: #383838;
}

.serviceInput__label {
  color: #383838;
}

.service_closeBtn {
  margin-left: auto;
  display: block;
  width: 50px;
  height: 50px;
  background: none;
  position: relative;
}

.service_closeBtn::before,
.service_closeBtn::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
}

.service_closeBtn::after {
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
  left: auto;
  right: 14%;
}

.radioContainer__plans {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (min-width: 769px) {
  .radioContainer__plans {
    flex-direction: row;
  }
}

.serviceWrap {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
@media screen and (min-width: 769px) {
  .serviceWrap {
    flex-direction: row;
  }
}

.serviceWrap input[type=radio] {
  position: absolute;
  opacity: 0;
}

.serviceInput__label {
  width: 100%;
  display: inline-block;
  padding: 10px 10px 10px 40px;
  color: #383838;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  position: relative;
  vertical-align: sub;
  margin-right: 5px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 769px) {
  .serviceInput__label {
    font-size: 14px;
    padding: 20px 20px 20px 40px;
  }
}

.serviceInput__label span {
  font-size: 20px;
}

.serviceInput__label:before, .serviceInput__label:after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.serviceInput__label:before {
  background-color: #fff;
  border: 1px solid #c2c1c1;
  height: 20px;
  width: 20px;
  left: 10px;
}

.serviceInput__label:after {
  background-color: #6a92ff;
  opacity: 0;
  height: 14px;
  width: 14px;
  left: 14px;
}

.serviceInput {
  max-width: 335px;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .serviceInput {
    max-width: 265px;
  }
}

.serviceInput input[type=radio]:checked ~ .serviceInput__label {
  background: #6a92ff;
  font-weight: bold;
  color: #fff;
}

.serviceInput input[type=radio]:checked ~ .serviceInput__label:after {
  opacity: 1;
}

.serviceInput input[type=radio]:checked ~ .serviceInput__label span {
  color: #fff;
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.RecommendItem {
  position: relative;
}
@media screen and (min-width: 769px) {
  .RecommendItem:before {
    content: "";
    display: block;
    padding-top: 108.33%;
  }
}
@media screen and (max-width: 768px) {
  .RecommendItem {
    width: 335px;
    height: 128px;
  }
}
.RecommendItem:nth-child(1) .RecommendItem-img {
  width: 33%;
  margin: 10px auto 11px;
}
@media screen and (max-width: 768px) {
  .RecommendItem:nth-child(1) .RecommendItem-img {
    width: 21%;
    position: absolute;
    top: 26px;
    right: 14px;
  }
}
.RecommendItem:nth-child(2) .RecommendItem-img {
  width: 28%;
  margin: 13px auto 17px;
}
@media screen and (max-width: 768px) {
  .RecommendItem:nth-child(2) .RecommendItem-img {
    width: 18%;
    position: absolute;
    top: 28px;
    right: 23px;
  }
}
.RecommendItem:nth-child(3) .RecommendItem-img {
  width: 30%;
  margin: 17px auto 21px;
}
@media screen and (max-width: 768px) {
  .RecommendItem:nth-child(3) .RecommendItem-img {
    width: 17%;
    position: absolute;
    top: 26px;
    right: 24px;
  }
}
.RecommendItem:nth-child(4) .RecommendItem-img {
  width: 43%;
  margin: 13px auto 22px;
}
@media screen and (max-width: 768px) {
  .RecommendItem:nth-child(4) .RecommendItem-img {
    width: 24%;
    position: absolute;
    top: 31px;
    right: 19px;
  }
}
.RecommendItem:nth-child(5) .RecommendItem-img {
  width: 37%;
  margin: 11px auto 9px;
}
@media screen and (max-width: 768px) {
  .RecommendItem:nth-child(5) .RecommendItem-img {
    width: 21%;
    position: absolute;
    top: 28px;
    right: 19px;
  }
}

.RecommendItem-inner {
  position: absolute;
  width: 100%;
  height: 88%;
  padding: 3.2vw 10px 24px;
  background-color: #fff;
  border-radius: 24px;
  bottom: 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .RecommendItem-inner {
    height: 100%;
    padding: 16px 12.8vw 16px 35px;
  }
}

.RecommendItem-number {
  position: absolute;
  width: 27%;
  top: -13%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .RecommendItem-number {
    width: 16%;
    top: -20px;
    left: 15px;
  }
}

.RecommendItem-subTitle,
.RecommendItem-title,
.RecommendItem-text,
.RecommendItem-subText {
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .RecommendItem-subTitle,
.RecommendItem-title,
.RecommendItem-text,
.RecommendItem-subText {
    text-align: left;
    left: 65%;
  }
}

.RecommendItem-subTitle {
  font-size: min(16px, 1.1vw);
}
@media screen and (max-width: 768px) {
  .RecommendItem-subTitle {
    font-size: 16px;
  }
}

.RecommendItem-title {
  font-size: min(28px, 1.8vw);
  top: 30%;
}
@media screen and (max-width: 768px) {
  .RecommendItem-title {
    top: 38%;
    font-size: 24px;
  }
}
.RecommendItem-title span {
  font-size: 12px;
  position: relative;
  top: -8px;
  left: 2px;
}

.RecommendItem-img {
  display: block;
}

.RecommendItem-text {
  font-size: min(14px, 1.0vw);
}
@media screen and (max-width: 768px) {
  .RecommendItem-text {
    font-size: 14px;
    width: 180px;
    top: 69%;
    left: 42%;
  }
}

.RecommendItem-subText {
  font-size: min(10px, 0.7vw);
  color: #707070;
  font-weight: 400;
  line-height: 1;
  top: 95%;
  min-width: 210px;
}
@media screen and (max-width: 768px) {
  .RecommendItem-subText {
    top: 91%;
    font-size: 10px;
  }
}

.RecommendItem-chara {
  position: absolute;
  width: 16.882183908%;
  top: 92%;
  left: 106%;
  transform: translate(-50%, -50%);
  width: 75%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .RecommendItem-chara {
    width: 70.1492537313%;
  }
}
@media screen and (max-width: 768px) {
  .RecommendItem-chara {
    position: absolute;
    width: 6.6091954023%;
    top: 108%;
    left: 90%;
    transform: translate(-50%, -50%);
    width: 92px;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .RecommendItem-chara {
    width: 27.4626865672%;
  }
}

.Recommend {
  background-image: url("/image/bg/bg2.jpg");
  position: relative;
  padding: 64px 0;
  overflow: hidden;
}

.Recommend-bg {
  width: 250%;
  height: calc(160% - 132px);
  left: 50%;
  bottom: -10%;
  transform: translate(-50%, 50%) rotate(-10deg);
  background: #79A1CE linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1));
  background-size: 50px 50px;
  position: absolute;
  display: block;
  content: "";
  z-index: 0;
}

.Recommend-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .Recommend-inner {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .Recommend-inner {
    width: 100%;
    min-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.Recommend-textImage {
  width: 32.5%;
  margin: 0 auto 28px;
  display: block;
}
@media screen and (max-width: 768px) {
  .Recommend-textImage {
    width: 18.1034482759%;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .Recommend-textImage {
    width: 75.223880597%;
  }
}

.Recommend-text {
  color: #0D65C7;
  font-size: min(24px, 1.6vw);
  font-weight: 700;
  line-height: 2.1;
  text-align: center;
  margin-bottom: 11vw;
}
@media screen and (max-width: 768px) {
  .Recommend-text {
    font-size: max(15px, 2.25vw);
    margin-bottom: 20vw;
  }
  .Recommend-text span {
    display: block;
  }
}

.Recommend-pointImage {
  width: 15.34%;
  margin: 0 auto 4px;
  display: block;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .Recommend-pointImage {
    width: 11.2068965517%;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .Recommend-pointImage {
    width: 46.5671641791%;
  }
}

.Recommend-title {
  color: #221714;
  font-size: min(20px, 1.4vw);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .Recommend-title {
    font-size: max(16px, 2.4vw);
  }
}

.Recommend-pointRow {
  width: 69.44%;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .Recommend-pointRow {
    width: 100%;
  }
}

.Recommend-pointRow2 {
  width: 45.625%;
  margin-top: 2vw;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .Recommend-pointRow2 {
    width: 100%;
    margin-top: 0;
  }
}

.Recommend-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  -moz-column-gap: 3.2%;
       column-gap: 3.2%;
  row-gap: 4.8vw;
}
@media screen and (min-width: 769px) {
  .Recommend-points > * {
    width: 31.2%;
  }
}
@media screen and (max-width: 768px) {
  .Recommend-points {
    flex-direction: column;
    align-items: center;
  }
  .Recommend-points > * + * {
    margin-top: 3vw;
  }
}

.Recommend-characters img {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.Recommend-characters img:nth-child(1) {
  position: absolute;
  width: 13.2183908046%;
  top: 32%;
  left: 17%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .Recommend-characters img:nth-child(1) {
    width: 54.9253731343%;
  }
}
@media screen and (max-width: 768px) {
  .Recommend-characters img:nth-child(1) {
    position: absolute;
    width: 5.1388888889%;
    top: 36%;
    left: 15%;
    transform: translate(-50%, -100%);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .Recommend-characters img:nth-child(1) {
    width: 19.7333333333%;
  }
}
.Recommend-characters img:nth-child(2) {
  position: absolute;
  width: 23.7787356322%;
  top: 27.2%;
  left: 82%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .Recommend-characters img:nth-child(2) {
    width: 98.8059701493%;
  }
}
@media screen and (max-width: 768px) {
  .Recommend-characters img:nth-child(2) {
    position: absolute;
    width: 9.0972222222%;
    top: 35.5%;
    left: 81%;
    transform: translate(-50%, -100%);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .Recommend-characters img:nth-child(2) {
    width: 34.9333333333%;
  }
}

.Recommend-pointText {
  margin: 84px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .Recommend-pointText {
    width: 89.3%;
    margin: 60px auto 0;
    display: block;
    text-align: left;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.ConductorLink {
  display: inline-block;
}
.ConductorLink img {
  width: 100%;
}

.pcOnly {
  display: block;
}
@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
}

.spOnly {
  display: none;
}
@media screen and (max-width: 768px) {
  .spOnly {
    display: block;
  }
}

.ConductorPrimary {
  background-color: #FAE100;
  background-image: radial-gradient(rgba(255, 204, 0, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 204, 0, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 204, 0, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 204, 0, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 204, 0, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 204, 0, 0.4) 20%, transparent 20%);
  background-size: 100px 100px;
  background-position: 0 0, 33px 33px, 66px 66px, 0 50px, 33px 83px, 66px 116px;
  width: 100%;
}

.ConductorPrimary-inner {
  padding: 40px 10px;
}

.ConductorPrimary-elementWrap {
  width: 69%;
  margin: 0 auto;
  display: flex;
  -moz-column-gap: 4%;
       column-gap: 4%;
}

.ConductorPrimary-element--primary {
  width: 26%;
  display: flex;
  flex-direction: column;
}

.ConductorPrimary-element--secondary {
  width: 21%;
  display: flex;
  flex-direction: column;
  row-gap: 27px;
}

.ConductorPrimary-element--tertiary {
  width: 46%;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-button {
    width: 100%;
    margin-top: 15px;
  }
}

.ConductorPrimary-text {
  width: 69%;
  margin: 30px auto 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .ConductorPrimary-text {
    width: 89.3%;
    margin: 15px auto 0;
    display: block;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-spElementWrap {
    width: 89%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-spElement--primary {
    display: flex;
    -moz-column-gap: 3%;
         column-gap: 3%;
  }
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-spChara {
    width: 31%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: right bottom;
       object-position: right bottom;
  }
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-spElement-child--primary {
    width: 65%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
  }
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-spElement--secondary {
    width: 100%;
    margin-top: 15px;
    display: flex;
    -moz-column-gap: 4%;
         column-gap: 4%;
  }
}

@media screen and (max-width: 768px) {
  .ConductorPrimary-spElement-child--secondary {
    width: 31%;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.ConductorLink {
  display: inline-block;
}
.ConductorLink img {
  width: 100%;
}

.ConductorMiddle {
  background-color: #FFDA00;
  background-image: radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.4) 20%, transparent 20%);
  background-size: 100px 100px;
  background-position: 0 0, 33px 33px, 66px 66px, 0 50px, 33px 83px, 66px 116px;
  width: 100%;
  height: 440px;
}
.ConductorMiddle-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  height: 100%;
}
.ConductorMiddle-inner > * {
  position: absolute;
  transform: translate(-50%, -50%);
}
.ConductorMiddle-inner > img:nth-child(1) {
  width: 329px;
  height: 391px;
  top: 48%;
  left: 12%;
}
.ConductorMiddle-inner > img:nth-child(2) {
  top: 38%;
  left: 34%;
}
.ConductorMiddle-inner > img:nth-child(3) {
  width: 312px;
  height: 128px;
  top: 66%;
  left: 34%;
}
.ConductorMiddle-texts {
  width: 488px;
  top: 46%;
  left: 76%;
}
.ConductorMiddle-texts > img {
  width: 155px;
  height: 92px;
}
.ConductorMiddle-texts > img + img {
  margin-left: 6px;
}
.ConductorMiddle-button {
  top: 80%;
  left: 76%;
}

.ConductorMiddle-text {
  margin-top: 24px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .ConductorMiddle-text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.StepItem {
  position: relative;
  filter: drop-shadow(0 10px 0 #FFDA00);
}
.StepItem > * {
  position: absolute;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .StepItem > * {
    transform: none;
  }
}
.StepItem:after {
  position: absolute;
  display: inline-block;
  content: "";
  transform: translate(-50%, -50%);
  top: 46%;
}
.StepItem:nth-child(1):before {
  content: "";
  display: block;
  padding-top: 103.3033033033%;
}
.StepItem:nth-child(1):nth-child(1) {
  width: 33.3%;
  background: url("/image/step/step_bg1.png") no-repeat center center;
  background-size: contain;
}
.StepItem:nth-child(1):nth-child(1):after {
  background: url("/image/step/step_01.svg") no-repeat center center;
  background-size: contain;
  left: 45%;
  width: 54.0540540541%;
  height: 43.023255814%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(1):nth-child(1):after {
    left: 22%;
    height: 34.9693251534%;
  }
}
.StepItem:nth-child(1):nth-child(1) .StepItem-title {
  top: 11%;
  left: 43%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(1):nth-child(1) .StepItem-title {
    top: 10%;
    left: 42%;
  }
}
.StepItem:nth-child(1):nth-child(1) .StepItem-text {
  width: 68%;
  top: 82%;
  left: 44%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(1):nth-child(1) .StepItem-text {
    width: 184px;
    top: 37%;
    left: 42%;
  }
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(1):nth-child(1) {
    width: 100%;
    background: url("/image/step/step_bg1_sp.png") no-repeat center center;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(1):before {
    content: "";
    display: block;
    padding-top: 48.6567164179%;
  }
}
.StepItem:nth-child(2):before {
  content: "";
  display: block;
  padding-top: 103.3033033033%;
}
.StepItem:nth-child(2):nth-child(2) {
  width: 33.3%;
  background: url("/image/step/step_bg1.png") no-repeat center center;
  background-size: contain;
}
.StepItem:nth-child(2):nth-child(2):after {
  background: url("/image/step/step_02.svg") no-repeat center center;
  background-size: contain;
  left: 45%;
  width: 54.0540540541%;
  height: 43.023255814%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(2):nth-child(2):after {
    left: 22%;
    height: 34.9693251534%;
  }
}
.StepItem:nth-child(2):nth-child(2) .StepItem-title {
  top: 11%;
  left: 43%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(2):nth-child(2) .StepItem-title {
    top: 10%;
    left: 42%;
  }
}
.StepItem:nth-child(2):nth-child(2) .StepItem-text {
  width: 68%;
  top: 82%;
  left: 44%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(2):nth-child(2) .StepItem-text {
    width: 184px;
    top: 37%;
    left: 42%;
  }
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(2):nth-child(2) {
    width: 100%;
    background: url("/image/step/step_bg1_sp.png") no-repeat center center;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(2):before {
    content: "";
    display: block;
    padding-top: 48.6567164179%;
  }
}
.StepItem:nth-child(3) {
  width: 31.2%;
  background: url("/image/step/step_bg2.png") no-repeat center center;
  background-size: contain;
}
.StepItem:nth-child(3):before {
  content: "";
  display: block;
  padding-top: 110.2564102564%;
}
.StepItem:nth-child(3):after {
  background: url("/image/step/step_03.svg") no-repeat center center;
  background-size: contain;
  left: 50%;
  width: 57.6923076923%;
  height: 43.023255814%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(3):after {
    left: 22%;
    height: 60%;
  }
}
.StepItem:nth-child(3) .StepItem-title {
  top: 11%;
  left: 50%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(3) .StepItem-title {
    top: 10%;
    left: 42%;
  }
}
.StepItem:nth-child(3) .StepItem-text {
  width: 84%;
  top: 82%;
  left: 50%;
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(3) .StepItem-text {
    width: 184px;
    top: 40%;
    left: 42%;
  }
}
@media screen and (max-width: 768px) {
  .StepItem:nth-child(3) {
    width: 100%;
    background: url("/image/step/step_bg2_sp.png") no-repeat center center;
    background-size: contain;
  }
  .StepItem:nth-child(3):before {
    content: "";
    display: block;
    padding-top: 43.2835820896%;
  }
}
.StepItem-title {
  font-size: min(20px, 1.4vw);
  display: inline-block;
  color: #0D65C7;
  font-weight: 700;
  line-height: 2;
}
.StepItem-title:after {
  display: block;
  content: "";
  border-bottom: 1px dashed #0D65C7;
}
@media screen and (max-width: 768px) {
  .StepItem-title {
    font-size: 20px;
    line-height: 1.5;
  }
}
.StepItem-text {
  font-size: min(14px, 1.0vw);
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .StepItem-text {
    font-size: 14px;
    width: 184px;
  }
}

.Step {
  background-image: url("/image/bg/bg2.jpg");
  padding: 48px 0 80px 0;
}
.Step-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .Step-inner {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .Step-inner {
    width: 100%;
    min-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.Step-titleLogo {
  width: 13.5057471264%;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .Step-titleLogo {
    width: 56.1194029851%;
  }
}
@media screen and (max-width: 768px) {
  .Step-titleLogo {
    width: 9.4827586207%;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .Step-titleLogo {
    width: 39.4029850746%;
  }
}
.Step-subtitle {
  font-size: min(20px, 1.4vw);
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .Step-subtitle {
    font-size: max(16px, 2.4vw);
  }
}
.Step-items {
  width: 71.8390804598%;
  display: flex;
  row-gap: 20px;
  margin-top: 3vw;
}
@media screen and (max-width: 768px) {
  .Step-items {
    width: 298.5074626866%;
  }
}
.Step-items > * + * {
  margin-left: 0.6vw;
}
@media screen and (max-width: 768px) {
  .Step-items {
    max-width: 335px;
    flex-direction: column;
  }
  .Step-items > * + * {
    margin-top: 6vw;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.SpecPrice {
  padding: 12px;
  background-color: #fff;
}
.SpecPrice-frame {
  position: relative;
  display: flex;
  padding: 3% 7%;
  border: 6px solid #0D65C7;
  border-radius: 46px;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .SpecPrice-frame {
    padding: 16px;
  }
}
.SpecPrice-titleLogo {
  width: 26.0817307692%;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) {
  .SpecPrice-titleLogo {
    width: 51.5254237288%;
  }
}
.SpecPrice-subTitleLogo {
  width: 17.6682692308%;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) {
  .SpecPrice-subTitleLogo {
    width: 42.0338983051%;
  }
}
.SpecPrice-subtitle {
  font-size: min(20px, 1.4vw);
  color: #0D65C7;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .SpecPrice-subtitle {
    font-size: max(20px, 3.0vw);
  }
}
.SpecPrice-line {
  width: 100%;
  height: 2px;
  margin: 40px 0 32px;
  background-color: #A8C7E8;
}
@media screen and (max-width: 768px) {
  .SpecPrice-line {
    margin: 24px 0 4px;
  }
}
.SpecPrice-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-top: 8px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .SpecPrice-block {
    margin-top: 20px;
  }
}
.SpecPrice-priceData {
  width: 97.1153846154%;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) {
  .SpecPrice-priceData.pc {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .SpecPrice-priceData.sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .SpecPrice-priceData {
    width: 100%;
  }
}
.SpecPrice-priceData2 {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .SpecPrice-priceData2.pc {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .SpecPrice-priceData2.sp {
    display: none;
  }
}
.SpecPrice-priceData3 {
  width: 58.1730769231%;
}
@media screen and (max-width: 768px) {
  .SpecPrice-priceData3.pc {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .SpecPrice-priceData3.sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .SpecPrice-priceData3 {
    width: 100%;
  }
}
.SpecPrice-frameText {
  font-size: min(12px, 0.8vw);
  color: #221714;
  line-height: 1.5;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .SpecPrice-frameText {
    font-size: max(12px, 1.8vw);
  }
}
.SpecPrice-frameText2 {
  font-size: min(12px, 0.8vw);
  color: #707070;
  line-height: 1.5;
  max-width: 464px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .SpecPrice-frameText2 {
    font-size: min(10px, 1.5vw);
  }
}
.SpecPrice-subText {
  font-size: min(16px, 1.1vw);
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 6px;
}
@media screen and (max-width: 768px) {
  .SpecPrice-subText {
    font-size: max(12px, 1.8vw);
  }
}
.SpecPrice-subSubText {
  font-size: min(14px, 1.0vw);
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .SpecPrice-subSubText {
    font-size: max(14px, 2.1vw);
  }
}
.SpecPrice-title {
  font-size: min(28px, 1.8vw);
  color: #0D65C7;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .SpecPrice-title {
    font-size: max(20px, 3.0vw);
  }
}
.SpecPrice-priceText {
  font-size: min(36px, 2.4vw);
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
}
.SpecPrice-priceText strong {
  font-size: min(80px, 5.3vw);
  color: #0D65C7;
  margin: 0 4px;
}
@media screen and (max-width: 768px) {
  .SpecPrice-priceText {
    font-size: max(24px, 3.6vw);
  }
  .SpecPrice-priceText strong {
    font-size: max(48px, 6.4vw);
  }
}
.SpecPrice-frameCharacter {
  position: absolute;
  width: 12.9310344828%;
  top: 106%;
  left: 105%;
  transform: translate(-50%, -50%);
  width: 18.4426229508%;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .SpecPrice-frameCharacter {
    width: 53.7313432836%;
  }
}
@media screen and (max-width: 768px) {
  .SpecPrice-frameCharacter {
    position: absolute;
    width: 4.8850574713%;
    top: 105%;
    left: 98%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .SpecPrice-frameCharacter {
    width: 20.2985074627%;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.SpecDetails {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.SpecDetails-titleLogo {
  width: 25.4%;
}
@media screen and (max-width: 768px) {
  .SpecDetails-titleLogo {
    width: 12.7873563218%;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .SpecDetails-titleLogo {
    width: 53.1343283582%;
  }
}
.SpecDetails-subtitle {
  font-size: min(20px, 1.4vw);
  color: #0D65C7;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .SpecDetails-subtitle {
    font-size: max(20px, 3.0vw);
  }
}
.SpecDetails-sliderArea {
  position: relative;
  width: 54.8%;
  border: 6px solid #0D65C7;
  border-radius: 24px;
  margin: 48px 0 24px 0;
}
.SpecDetails-sliderArea:before {
  content: "";
  display: block;
  padding-top: 77.1897810219%;
}
@media screen and (max-width: 768px) {
  .SpecDetails-sliderArea {
    width: 90%;
  }
}
.SpecDetails-sliderBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.SpecDetails-slider {
  width: 100%;
  height: 100%;
}
.SpecDetails-slider img {
  margin: 0 auto;
}
.SpecDetails-slider .next-arrow, .SpecDetails-slider .prev-arrow {
  position: absolute;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  top: 50%;
  cursor: pointer;
  z-index: 1;
}
.SpecDetails-slider .prev-arrow {
  left: -20px;
}
.SpecDetails-slider .next-arrow {
  right: -20px;
}
.SpecDetails-slider .slick-list {
  border-radius: 24px;
}
.SpecDetails-slider .slick-list, .SpecDetails-slider .slick-track, .SpecDetails-slider .SpecDetails-sliderItem, .SpecDetails-slider .SpecDetails-sliderItem > img {
  height: 100%;
}
.SpecDetails-items {
  display: flex;
  margin-bottom: 36px;
}
.SpecDetails-items > * + * {
  margin-left: 16px;
}
.SpecDetails-itemContainer {
  display: flex;
  color: #fff;
  justify-content: center;
}
.SpecDetails-itemContainer.active {
  color: #0D65C7;
}
.SpecDetails-table {
  max-width: 466px;
  border-collapse: separate;
}
.SpecDetails-table tr + tr th, .SpecDetails-table tr + tr td {
  border-top: 1px dashed #0D65C7;
}
.SpecDetails-table th, .SpecDetails-table td {
  font-size: min(12px, 0.8vw);
  color: #221714;
  font-weight: 700;
  line-height: 2;
  padding-top: 6px;
  padding-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .SpecDetails-table th, .SpecDetails-table td {
    font-size: max(12px, 1.8vw);
  }
}
.SpecDetails-table th {
  width: 51.5021459227%;
}
.SpecDetails-table td {
  width: 48.4978540773%;
}
@media screen and (max-width: 768px) {
  .SpecDetails-table th {
    width: 35.8208955224%;
  }
  .SpecDetails-table td {
    width: 64.1791044776%;
  }
}

.Spec {
  position: relative;
  padding: 64px 0;
  overflow: hidden;
  background-color: #3C72AF;
}
.Spec-bg {
  width: 200%;
  height: calc(1126px * 2);
  left: 50%;
  bottom: -5%;
  transform: translate(-50%, 50%) rotate(-10deg);
  background: #FAE100 linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1));
  background-size: 50px 50px;
  position: absolute;
  display: block;
  z-index: 0;
}
.Spec-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .Spec-inner {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .Spec-inner {
    width: 100%;
    min-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.Spec-frame {
  width: 71.8390804598%;
  position: relative;
  margin: 0 auto 60px;
  border-radius: 56px;
}
@media screen and (max-width: 768px) {
  .Spec-frame {
    width: 298.5074626866%;
  }
}
@media screen and (max-width: 768px) {
  .Spec-frame {
    width: 100%;
  }
}
.Spec-details {
  width: 71.8390804598%;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .Spec-details {
    width: 298.5074626866%;
  }
}
@media screen and (max-width: 768px) {
  .Spec-details {
    width: 100%;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
.Float {
  position: fixed;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.Float.isVisible {
  opacity: 1;
  pointer-events: auto;
}
.Float img {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 835px) {
  .Float {
    width: 200px;
    height: 242px;
    bottom: 48px;
    right: 48px;
  }
}
@media screen and (max-width: 834px) {
  .Float {
    width: 110px;
    height: 132px;
    bottom: 16px;
    right: 16px;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
/* sp */
.FormInput {
  display: block;
  width: 100%;
}
.FormInput input {
  width: 100%;
  background-color: #fff;
  color: #221714;
  font-size: 16px;
  font-weight: 400;
  line-height: 2.9;
  padding: 0 1em;
  border: 1px solid #BDB9B9;
  border-radius: 8px;
}
.FormInput input::-moz-placeholder {
  color: #BDB9B9;
}
.FormInput input::placeholder {
  color: #BDB9B9;
}
@media screen and (max-width: 768px) {
  .FormInput input {
    line-height: 2.5;
  }
}

/* sp */
.FormTextarea {
  display: block;
  width: 100%;
}
.FormTextarea textarea {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  color: #221714;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.8em 1em;
  border: 1px solid #BDB9B9;
  border-radius: 8px;
}
.FormTextarea textarea::-moz-placeholder {
  color: #BDB9B9;
}
.FormTextarea textarea::placeholder {
  color: #BDB9B9;
}

/* sp */
.FormSelect {
  position: relative;
  display: block;
  width: 100%;
}
.FormSelect select {
  width: 100%;
  background-color: #fff;
  color: #221714;
  font-size: 16px;
  font-weight: 400;
  line-height: 2.9;
  padding: 0 1em;
  border: 1px solid #BDB9B9;
  border-radius: 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.FormSelect:after {
  position: absolute;
  content: "";
  width: 12px;
  height: 7px;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: url("/image/svg/select.svg") no-repeat;
  background-size: contain;
}

/* sp */
.FormRadioGroup {
  display: flex;
  font-size: 16px;
  padding: 4px 0;
  white-space: nowrap;
}
.FormRadioGroup > * + * {
  margin-left: 66px;
}
@media screen and (max-width: 768px) {
  .FormRadioGroup > * + * {
    margin-left: 22px;
  }
}
.FormRadioGroup.FormRadioGroup--attention {
  flex-wrap: wrap;
  flex-direction: column;
}
.FormRadioGroup .FormRadioGroup-left--attention {
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .FormRadioGroup .FormRadioGroup-left--attention {
    margin-left: 0;
  }
}
.FormRadioGroup .FormRadioGroup-right--attention {
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .FormRadioGroup .FormRadioGroup-right--attention {
    margin-left: 0;
  }
}
.FormRadioGroup .FormRadioGroup-bottom--attention {
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .FormRadioGroup .FormRadioGroup-bottom--attention {
    margin-left: 0;
  }
}
.FormRadioGroup .FormRadioGroup-deviceArea {
  margin-left: 10px;
  display: none;
}
@media screen and (max-width: 768px) {
  .FormRadioGroup .FormRadioGroup-deviceArea {
    margin-left: 0;
  }
}
.FormRadioGroup .FormRadioGroup-deviceArea-inner {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .FormRadioGroup label {
    font-size: 14px;
  }
}
.FormRadioGroup label span {
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
}

/* sp */
.FormOptionalLabel {
  background-color: #BDB9B9;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-left: 10px;
  margin-bottom: 2px;
  padding: 4px 12px;
  border-radius: 12px;
}
@media screen and (max-width: 768px) {
  .FormOptionalLabel {
    font-size: 12px;
  }
}

/* sp */
.FormRequiredLabel {
  background-color: #DC4F00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-left: 10px;
  margin-bottom: 2px;
  padding: 4px 12px;
  border-radius: 12px;
}
@media screen and (max-width: 768px) {
  .FormRequiredLabel {
    font-size: 12px;
  }
}

/* sp */
.FormRadioPlan {
  display: flex;
  justify-content: center;
  font-size: 16px;
}
.FormRadioPlan > * + * {
  margin-left: 54px;
}
.FormRadioPlan input {
  display: none;
}
.FormRadioPlan input:checked + label .FormRadioPlan-inner {
  background-color: #0D65C7;
  border: 1px solid #0D65C7;
}
.FormRadioPlan input:checked + label .FormRadioPlan-innerDescription1, .FormRadioPlan input:checked + label .FormRadioPlan-innerDescription2 {
  color: #221714;
}
.FormRadioPlan input:checked + label .FormRadioPlan-innerPrice strong {
  color: #0D65C7;
}
.FormRadioPlan-base {
  position: relative;
  display: block;
}
.FormRadioPlan-inner {
  position: relative;
  display: flex;
  background-color: #BDB9B9;
  flex-direction: column;
  align-items: center;
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
  border: 1px solid #BDB9B9;
  border-radius: 8px;
  overflow: hidden;
}
.FormRadioPlan-innerTitle {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 4px 0;
}
.FormRadioPlan-innerBlock {
  display: block;
  text-align: center;
  background-color: #fff;
  padding: 16px 64px 4px;
  color: #BDB9B9;
}
.FormRadioPlan-innerBlock > * {
  display: block;
}
.FormRadioPlan-innerDescription1 {
  font-size: 14px;
}
.FormRadioPlan-innerDescription2 {
  font-size: 14px;
}
.FormRadioPlan-innerPrice {
  font-size: 22px;
  color: #221714;
}
.FormRadioPlan-innerPrice strong {
  font-size: 48px;
}
.FormRadioPlan-innerPriceTxt {
  position: absolute;
  right: 52px;
  bottom: 17px;
}
.FormRadioPlan-innerTax {
  font-size: 9px;
  position: absolute;
  right: 49px;
  bottom: 43px;
}

/* sp */
.FormButton {
  width: 172px;
  height: 44px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  background-color: #0D65C7;
  border-radius: 8px;
  text-align: center;
}

/* sp */
.FormTitle {
  text-align: center;
  padding: 0 20px;
}
.FormTitle h2 {
  color: #0D65C7;
  font-size: 32px;
}
.FormTitle h3 {
  font-size: 16px;
  margin-top: 4px;
}
@media screen and (max-width: 768px) {
  .FormTitle h3 {
    font-size: 14px;
  }
}

.FormThanks {
  text-align: center;
  font-weight: 700;
}
.FormThanks h1 {
  color: #0D65C7;
  font-size: 48px;
  line-height: 1.6;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .FormThanks h1 {
    font-size: 32px;
  }
}
.FormThanks h3 {
  font-size: 24px;
  margin-top: 4px;
  line-height: 1.5;
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .FormThanks h3 {
    font-size: 20px;
  }
}
.FormThanks p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .FormThanks p {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
}

.spOnly {
  display: none;
}
@media screen and (max-width: 768px) {
  .spOnly {
    display: block;
  }
}

.Form {
  width: 100%;
  height: 100%;
  color: #221714;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .Form {
    max-width: 940px;
    padding: 0 24px;
  }
}
@media screen and (max-width: 768px) {
  .Form {
    min-width: 375px;
    padding: 0;
  }
}
.Form-blockTable {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .Form-blockTable {
    width: calc(100% - 26px);
  }
}
.Form-blockTable th, .Form-blockTable td {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  vertical-align: top;
}
.Form-blockTable th.column, .Form-blockTable td.column {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .Form-blockTable th, .Form-blockTable td {
    display: flex;
    min-height: 30px;
  }
}
.Form-blockTable tr.--cardAttention {
  position: relative;
  height: 440px;
}
@media screen and (max-width: 768px) {
  .Form-blockTable tr.--cardAttention {
    height: 560px;
  }
}
.Form-blockTable tr.--cardAttention::after {
  border-bottom: none;
}
.Form-blockTable tr.example-block td {
  flex-direction: column;
  align-items: flex-start;
}
.Form-blockTable tr:after {
  content: "";
  display: block;
  border-bottom: 1px dashed #A8C7E8;
}
.Form-blockTable th {
  width: 300px;
  color: #0D65C7;
  font-size: 20px;
  margin: 36px 0;
  padding-left: 24px;
}
@media screen and (max-width: 768px) {
  .Form-blockTable th {
    width: 100%;
    margin: 32px 0 20px 0;
    padding-left: 0;
  }
}
.Form-blockTable td {
  width: calc(100% - 300px);
  line-height: 2.5;
  margin: 36px 0;
  padding-right: 24px;
}
.Form-blockTable td > * + * {
  margin-left: 24px;
}
@media screen and (max-width: 768px) {
  .Form-blockTable td {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    margin: 20px 0 32px 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .Form-blockTable td.sp-center {
    justify-content: center;
  }
}
.Form-blockTable td.Form {
  margin: 0 auto;
  padding-right: 0;
  max-width: 895px;
  width: 100%;
}
.Form-blockTable td div a {
  color: blue;
}
.Form-planWrap {
  width: auto !important;
  padding-right: 0 !important;
  display: flex;
}
@media screen and (max-width: 768px) {
  .Form-planWrap {
    flex-direction: column;
  }
}
.Form-plan {
  max-width: 280px;
  width: 100%;
  min-height: 246px;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  line-height: 1;
  position: relative;
}
.Form-plan:last-of-type {
  margin-left: 30px !important;
}
.Form-plan:last-of-type .Form-planTtl {
  padding-left: 33px;
}
.Form-plan > input:checked {
  border: 2px solid #0D65C7;
}
@media screen and (max-width: 768px) {
  .Form-plan {
    max-width: 335px;
    min-height: 154px;
  }
  .Form-plan:last-of-type {
    margin-top: 24px;
    margin-left: 0 !important;
  }
  .Form-plan:last-of-type .Form-planTtl {
    padding-left: 44px;
  }
}
.Form-planInput {
  position: absolute;
  top: 0;
  left: 0;
}
.Form-planInput:checked + label {
  border: 2px solid #0D65C7;
}
.Form-planInput:checked + label .Form-planTtl {
  background-color: #0D65C7;
}
.Form-planInput:checked + label .Form-planPriceEm {
  color: #0D65C7;
}
.Form-planInput:checked + label::after {
  opacity: 1;
}
.Form-planLabel {
  width: 100%;
  min-height: 246px;
  height: 100%;
  padding: 50px 16px 10px;
  display: block;
  border: 2px solid #9D9D9D;
  border-radius: 8px;
  position: abusolute;
  cursor: default !important;
}
.Form-planLabel::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  top: 9px;
  left: 41px;
  z-index: 1;
}
.Form-planLabel::after {
  content: "";
  width: 13px;
  height: 8px;
  display: block;
  border-left: 2px solid #0D65C7;
  border-bottom: 2px solid #0D65C7;
  transform: rotate(-45deg);
  position: absolute;
  top: 14px;
  left: 45px;
  z-index: 2;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .Form-planLabel {
    min-height: 154px;
  }
  .Form-planLabel::before {
    left: 16px;
  }
  .Form-planLabel::after {
    left: 20px;
  }
}
.Form-planTtl {
  width: 100%;
  padding: 5px 0;
  background-color: #9D9D9D;
  border-radius: 8px 8px 0 0;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .Form-planTtl {
    padding: 5px 0 5px 44px;
    font-size: 18px;
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .Form-planPriceArea {
    display: flex;
    justify-content: space-between;
  }
}
.Form-planPriceTxt {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .Form-planPriceTxt {
    font-size: 11px;
    text-align: left;
  }
}
.Form-planPrice {
  margin-bottom: 14px;
  display: block;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  position: relative;
}
.Form-planPrice::after {
  content: "(税込)";
  width: 30px;
  display: block;
  font-size: 9px;
  line-height: 1;
  position: absolute;
  top: 11px;
  right: 33px;
}
@media screen and (max-width: 768px) {
  .Form-planPrice {
    margin-left: 13px;
    font-size: 20px;
  }
  .Form-planPrice::after {
    top: 6px;
    right: -5px;
  }
}
.Form-planPriceEm {
  margin-right: 5px;
  color: #444;
  font-size: 48px;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .Form-planPriceEm {
    font-size: 40px;
  }
}
.Form-planSmallTxt {
  padding-top: 14px;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.2;
}
.Form-planTxt {
  margin-top: 10px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .Form-planTxt {
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5;
  }
}
.Form-row {
  display: inline-flex;
  align-items: center;
}
.Form-row > * + * {
  margin-left: 24px;
}
.Form .Form-rowError {
  margin-top: 8px;
  color: #DC4F00;
  font-size: 12px;
  font-weight: 400;
}
.Form-tdBlock > * + * {
  margin-top: 44px;
}
.Form-tdAdditional {
  text-indent: -4.3em;
  padding-left: 2.5em;
  font-size: 12px;
}
.Form-tdAdditional.noIndent {
  text-indent: 0;
  padding-left: 0;
}
.Form-tdAdditional-noIndent {
  margin-left: 0 !important;
  text-indent: 0;
  padding-left: 0;
}
.Form-additionalText {
  font-size: 12px;
  font-weight: 400;
  color: #707070;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-top: 12px;
  padding-right: 1em;
}
.Form-additionalText > * + * {
  margin-top: 2px;
}
.Form-verification {
  margin-top: 52px;
}
@media screen and (max-width: 768px) {
  .Form-verification {
    padding: 0 20px;
  }
}
.Form-verificationText {
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .Form-verificationText {
    font-size: 14px;
  }
}
@media screen and (min-width: 769px) {
  .Form-verificationText span {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .Form-verificationText span {
    display: inline;
  }
}
.Form-verificationSpan {
  color: #3F52FF;
  text-decoration: underline;
}
.Form-verificationCheckArea {
  margin: 32px auto 0;
  text-align: center;
  position: relative;
}
.Form-verificationCheckBox {
  position: absolute;
  top: 5px;
}
.Form-verificationLabel {
  padding-left: 24px;
  font-weight: normal;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .Form-verificationLabel {
    margin-top: 25px;
  }
}
.Form-verificationLabelLink {
  color: #3F52FF;
  text-decoration: underline;
}
.Form-verificationCheck {
  text-align: center;
  font-size: 16px;
}
.Form-verificationCheck a {
  color: #004A97;
  text-decoration: underline;
}
.Form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.Form-submit > * + * {
  margin-top: 28px;
}
.Form-privacy {
  width: 100%;
  height: 200px;
  margin: 16px 0 64px 0;
  padding: 10px 18px 10px 10px;
  border: 1px solid #BDB9B9;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  background-color: #fff;
  line-height: 1.75;
  overflow-y: scroll;
}
@media screen and (max-width: 768px) {
  .Form-privacy {
    font-size: 14px;
  }
}
.Form-attentionArea {
  width: 100% !important;
  margin-bottom: 36px;
  padding-right: 0 !important;
}
@media screen and (max-width: 768px) {
  .Form-attentionArea {
    margin-bottom: 32px;
  }
}
.Form-attentionWrap {
  width: 100%;
}
.Form-attention {
  width: 100%;
  display: block;
  margin: 0 auto 36px;
  padding: 24px 20px;
  background-color: #fff;
  border: 1px solid #FFA6A6;
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .Form-attention {
    margin: 0 auto 32px;
  }
}
.Form-attention--0630 {
  display: block;
}
.Form-attention--0701 {
  display: none;
}
.Form-attention--plan {
  display: none;
}
.Form-attentionTtl {
  display: block;
  color: #FD5757;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.Form-attentionTxt {
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.Form-attentionCheckArea {
  max-width: 679px;
  width: 100%;
  margin: 16px auto 0;
  position: relative;
}
.Form-attentionInput {
  position: absolute;
  top: 6px;
}
.Form-attentionLabel {
  padding-left: 30px;
  display: block;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
}
.Form-explainTxt {
  margin-top: 40px;
  text-align: center;
}
.Form-priceAreaWrap {
  height: 200px;
  margin-top: 30px;
  border: 1px solid #bdb9b9;
  border-radius: 8px;
  font-weight: 400;
  overflow-y: scroll;
  background-color: #fff;
}
.Form-priceArea {
  padding: 20px;
}
.Form-priceAreaTtl {
  font-weight: bold;
}
.Form-price {
  margin-top: 24px;
}
.Form-priceTtl {
  font-weight: bold;
}
.Form-priceTxtBox {
  padding-left: 1em;
}
.Form-priceTable {
  margin-bottom: 20px;
  border: 1px solid #000;
}
@media screen and (max-width: 768px) {
  .Form-priceTable {
    display: flex;
  }
}
.Form-priceThead {
  background-color: #ddd;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 768px) {
  .Form-priceThead {
    width: 30%;
    border-right: 1px solid #000;
    border-bottom: none;
  }
}
@media screen and (max-width: 768px) {
  .Form-priceTbody {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .Form-priceTr {
    display: flex;
    flex-direction: column;
  }
}
.Form-priceTh {
  padding: 5px;
  font-size: 14px;
  border-right: 1px solid #000;
}
.Form-priceTh:last-of-type {
  border-right: none;
}
@media screen and (max-width: 768px) {
  .Form-priceTh {
    height: 70px;
    border-right: none;
    border-bottom: 1px solid #000;
  }
  .Form-priceTh:last-of-type {
    border-bottom: none;
  }
}
.Form-priceTd {
  padding: 5px;
  font-size: 13px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.Form-priceTd:last-of-type {
  border-right: none;
}
@media screen and (max-width: 768px) {
  .Form-priceTd {
    height: 70px;
    border-right: none;
    border-bottom: 1px solid #000;
  }
  .Form-priceTd:last-of-type {
    border-bottom: none;
  }
}
.Form-usageTxtWrap {
  text-align: center;
  margin-top: 40px;
}
.Form-usageTtl {
  margin-bottom: 20px;
}
.Form-usageTxt {
  line-height: 1.7;
}
.Form .example-box {
  margin-top: 24px;
  margin-left: 0;
}
.Form .example-box dl {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
.Form .example-box dl:not(:first-child) dt, .Form .example-box dl:not(:first-child) dd {
  border-top: none;
}
.Form .example-box dt {
  width: 120px;
  font-weight: bold;
  padding: 8px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-right: 1px solid #ddd;
  align-items: center;
  line-height: 1.7;
}
.Form .example-box dt span {
  display: block;
  font-size: 12px;
  color: #707070;
}
.Form .example-box dd {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-left: none;
  min-height: 100%;
  line-height: 1.7;
}
.Form .example-box dd span {
  font-size: 12px;
  color: #707070;
}
.Form .example-attention {
  margin-left: 0;
}

/*
エラーボックス（エラーメッセージを表示する場所）
*/
.Form-errorBox {
  padding: 16px;
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .Form-errorBox {
    font-size: 12px;
  }
}
.Form-errorBox li {
  position: relative;
  padding-left: 16px;
  line-height: 1.6;
}
.Form-errorBox li::before {
  position: absolute;
  left: 4px;
  top: calc(0.5em * 1.6);
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #842029;
  border-radius: 50%;
}
* + .Form-errorBox {
  margin-top: 16px;
}
.Form-errorBox + * {
  margin-top: 16px;
}

.Form-cardAttentionWrap {
  padding-top: 180px;
}
@media screen and (max-width: 768px) {
  .Form-cardAttentionWrap {
    padding-top: 260px;
  }
}

.Form-cardAttention {
  position: absolute;
  margin-top: 32px;
  padding: 24px 20px;
  border: 2px solid #FF4A4A;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .Form-cardAttention {
    max-width: 890px;
    margin: 36px auto 0;
    padding: 18px 30px;
    border-radius: 20px;
  }
}

.Form-cardAttention__title {
  color: #FF4A4A;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.Form-cardAttention__title > img {
  margin-right: 8px;
  transform: translateY(-9px);
}

.Form-cardAttention__content {
  margin-top: 16px;
}
.Form-cardAttention__content.--sub {
  padding-top: 16px;
  border-top: 1px solid #B0B0B0;
}
@media (min-width: 768px) {
  .Form-cardAttention__content.--main {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    grid-template-areas: "grid-topLeft grid-topRight" "grid-bottomLeft grid-bottomRight";
    gap: 8px 20px;
  }
}

.Form-cardAttention__card {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #F3F3F3;
  padding: 5px 16px;
}
.Form-cardAttention__card + * {
  margin-top: 16px;
}
.Form-cardAttention__card.--right {
  background: rgba(255, 74, 74, 0.15);
}
@media (min-width: 768px) {
  .Form-cardAttention__card {
    width: 96%;
    max-width: 400px;
    justify-content: center;
  }
  .Form-cardAttention__card.--left {
    grid-area: grid-topLeft;
  }
  .Form-cardAttention__card.--right {
    grid-area: grid-topRight;
  }
  .Form-cardAttention__card + * {
    margin-top: 0;
  }
}

.Form-cardAttention__cardText {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.45;
}
.Form-cardAttention__cardText > em {
  display: block;
  font-style: normal;
  font-size: 20px;
}
.Form-cardAttention__cardText > em.--red {
  color: #FF4A4A;
}

.Form-cardAttention__note {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.Form-cardAttention__note > a {
  display: block;
  color: #2C6CEA;
  font-weight: 500;
  text-decoration: underline;
}
@media (min-width: 768px) {
  .Form-cardAttention__note {
    font-size: 13px;
  }
  .Form-cardAttention__note.--main {
    grid-area: grid-bottomRight;
    max-width: 400px;
  }
  .Form-cardAttention__note > a {
    display: inline;
  }
}

.Form-cardAttention__desc {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.45;
}

/* sp */
.NotFound {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .NotFound {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .NotFound {
    width: 100%;
    min-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.NotFound h1 {
  color: #0D65C7;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .NotFound h1 {
    font-size: 100px;
  }
}
@media screen and (max-width: 768px) {
  .NotFound h1 {
    font-size: 72px;
  }
}
.NotFound h2 {
  color: #0D65C7;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .NotFound h2 {
    font-size: 60px;
    margin-right: 72px;
  }
}
@media screen and (max-width: 768px) {
  .NotFound h2 {
    font-size: 36px;
  }
}
.NotFound p {
  color: #221714;
  line-height: 1.5;
  margin: 16px 0 48px 0;
}
.NotFound p span {
  display: inline-block;
}
@media screen and (min-width: 769px) {
  .NotFound p {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .NotFound p {
    font-size: 14px;
  }
}
@media screen and (min-width: 769px) {
  .NotFound-imageArea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
  }
  .NotFound-imageArea img {
    position: absolute;
    top: 22%;
    left: 92%;
  }
}
@media screen and (max-width: 768px) {
  .NotFound-imageArea img {
    width: 69px;
    height: 79px;
  }
}

main > .MainNarrow {
  padding: 28px 0 80px 0;
}
main > .MainNarrow.has-header {
  padding: 28px 0 80px 0;
}
main > .MainWide {
  padding: 80px 0;
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.FooterWide {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 0;
  background-color: #0D65C7;
  justify-content: center;
}
.FooterWide-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  height: 100%;
  margin-top: 40px;
  margin-bottom: 28px;
}
@media screen and (min-width: 769px) {
  .FooterWide-inner {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .FooterWide-inner {
    width: 375px;
    min-width: 375px;
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media screen and (max-width: 768px) {
  .FooterWide-inner {
    margin-top: 24px;
  }
}
.FooterWide-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.FooterWide-column > *:nth-child(1) {
  margin-bottom: 36px;
}
.FooterWide-column > *:nth-child(2) {
  margin-bottom: 12px;
}
.FooterWide-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.FooterWide-nav-link {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .FooterWide-nav-link {
    line-height: 2.5;
  }
}
.FooterWide-nav > * + * {
  margin-left: 40px;
}
@media screen and (max-width: 768px) {
  .FooterWide-nav > * + * {
    margin-left: 18px;
  }
}
.FooterWide-logo {
  width: 150px;
  height: 21px;
}
.FooterWide-copyright {
  color: #fff;
  font-size: 10px;
}
.FooterWide-character:nth-child(1) {
  width: 169px !important;
  position: absolute;
  width: 13.433908046%;
  top: -135%;
  left: 7%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .FooterWide-character:nth-child(1) {
    width: 55.8208955224%;
  }
}
@media screen and (max-width: 768px) {
  .FooterWide-character:nth-child(1) {
    width: 87px !important;
    position: absolute;
    width: 5.316091954%;
    top: -52%;
    left: 30%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .FooterWide-character:nth-child(1) {
    width: 22.0895522388%;
  }
}
.FooterWide-character:nth-child(2) {
  width: 144px !important;
  position: absolute;
  width: 18.6063218391%;
  top: -85%;
  left: 90%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .FooterWide-character:nth-child(2) {
    width: 77.3134328358%;
  }
}
@media screen and (max-width: 768px) {
  .FooterWide-character:nth-child(2) {
    width: 74px !important;
    position: absolute;
    width: 7.4712643678%;
    top: -33%;
    left: 65%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .FooterWide-character:nth-child(2) {
    width: 31.0447761194%;
  }
}

/**
 * レスポンシブ指定する際に用いる mixin
 *
 * h1 {
 *   color: red; // 共通のスタイル
 *
 *   @include mq(pc) { // この中が pc 版でのみ適用されるスタイル
 *      color: blue;
 *   }
 *
 *   @include mq(sp) { // この中が sp 版でのみ適用されるスタイル
 *      color: yellow;
 *   }
 * }
 *
 * のように指定してください。
 */
/* sp */
.FooterNarrow {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #0D65C7;
}
.FooterNarrow-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 28px;
}
@media screen and (min-width: 769px) {
  .FooterNarrow-inner {
    width: 100%;
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .FooterNarrow-inner {
    width: 100%;
    min-width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.FooterNarrow-inner > *:nth-child(1) {
  margin-bottom: 12px;
}
.FooterNarrow-logo {
  width: 150px;
  height: 21px;
}
.FooterNarrow-copyright {
  color: #fff;
  font-size: 10px;
}

.u-display--pc {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-display--pc {
    display: block;
  }
}

html {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
  position: relative;
  min-height: 100vh;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  body {
    min-width: 375px;
  }
}