@charset "UTF-8";
/* ========================================
   Settings (Variables)
   ======================================== */
@font-face {
  font-family: "loretta";
  src: url("../fonts/loretta-regular.otf") format("opentype");
}
@font-face {
  font-family: "kannada";
  src: url("../fonts/kannada-mn-bold.ttf") format("opentype");
}
@font-face {
  font-family: "mshtakan";
  src: url("../fonts/mshtakan-bold.ttf") format("opentype");
}
:root {
  --color-text-primary: #333030;
  --color-text-secondary: #1A1311;
  --color-red: #FF0000;
  --color-pink: #F24C7F;
  --color-pink2: #F46681;
  --color-blue: #00B2C9;
  --color-yellow: #FFEC5D;
  --color-pink-light: #FDD0D0;
  --color-pink-exlight: #F298BB1C;
  --color-blue-light: #F4FDFF;
  --color-blue-light2: #ECF2F4;
  --color-green: #43B9B9;
  --color-beige: #F5EEE4;
  --color-beige2: #F7F7F0;
  --color-bg-light: #FBFFFA;
  --color-white: #FFFFFF;
  --font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-loretta: "loretta";
  --font-family-kannada: "kannada";
  --font-family-mshtakan: "mshtakan";
  --font-family-yuminchou: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  --font-family-hiraMinchou: font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  --clamp-base-width: 735;
  --clamp-min-width: 320;
  --clamp-base-ratio: calc(var(--clamp-min-width) / var(--clamp-base-width));
  --clamp-adjust-ratio: 0.065;
  --clamp-min-ratio: calc(var(--clamp-base-ratio) + var(--clamp-adjust-ratio));
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-bolder: 900;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --container-max-width: 1335px;
  --container-padding: 1rem;
  --header-height: 64px;
  --footer-height: 200px;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --breakpoint-sm: 640px;
  --breakpoint-md: 735px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ========================================
   Mixins & Functions
   ======================================== */
/* ========================================
   Keyframes
   ======================================== */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes buttonGradation {
  0% {
    background-color: var(--color-pink);
  }
  100% {
    background-color: var(--color-pink2);
  }
}
/* ========================================
   Utility
   ======================================== */
.en-text {
  font-family: var(--font-family-loretta);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.marker {
  width: fit-content;
  margin-inline: auto;
}
.marker::after {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  background-color: var(--color-pink-light);
}

.sticky-content {
  position: sticky;
  top: 0;
  z-index: -1;
}

[data-unit]::after {
  content: attr(data-unit);
}

/* ========================================
   Animations
   ======================================== */
.js-animate[data-animation=fadeInUp] {
  opacity: 0;
}
.js-animate[data-animation=fadeInUp].is-animated {
  animation: fadeInUp 1s 0.25s forwards;
}

/* ========================================
   Components
   ======================================== */
.c-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.c-cta .subtitle {
  font-size: clamp(24 * var(--clamp-min-ratio) * 1px, 24 / var(--clamp-base-width) * 100vw, 24px);
  font-weight: 500;
  color: var(--color-pink);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 15px;
}
.c-cta .button {
  padding: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px) clamp(65 * var(--clamp-min-ratio) * 1px, 65 / var(--clamp-base-width) * 100vw, 65px);
  background-color: var(--color-pink);
  color: var(--color-white);
  font-size: clamp(34 * var(--clamp-min-ratio) * 1px, 34 / var(--clamp-base-width) * 100vw, 34px);
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: all var(--transition-base);
  box-shadow: 5px 7px 6px rgba(0, 0, 0, 0.1607843137);
  animation: buttonGradation 1s 0.5s infinite alternate;
}
.c-cta .button:hover {
  background-color: #e03968;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(242, 76, 127, 0.4);
}
.c-cta .button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(242, 76, 127, 0.3);
}

.loading-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  background-color: var(--color-blue);
  z-index: 100;
  pointer-events: none;
  opacity: 1;
  animation: fadeOut 3s 1.5s forwards;
  display: grid;
  place-items: center;
}
.loading-layer img {
  width: clamp(188 * var(--clamp-min-ratio) * 1px, 188 / var(--clamp-base-width) * 100vw, 188px);
  opacity: 0;
  animation: fadeIn 1s 0.25s forwards;
}

/* ========================================
   Base Styles
   ======================================== */
body {
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
  line-height: var(--line-height-normal);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

.main-content {
  position: relative;
  background-color: var(--color-bg-light);
  z-index: 10;
}

/* ========================================
   Header
   ======================================== */
.header {
  padding: clamp(119 * var(--clamp-min-ratio) * 1px, 119 / var(--clamp-base-width) * 100vw, 119px) 0 clamp(65 * var(--clamp-min-ratio) * 1px, 65 / var(--clamp-base-width) * 100vw, 65px);
  text-align: center;
}
.header .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30 * var(--clamp-min-ratio) * 1px, 30 / var(--clamp-base-width) * 100vw, 30px);
}
.header .title .main-text {
  font-size: clamp(48 * var(--clamp-min-ratio) * 1px, 48 / var(--clamp-base-width) * 100vw, 48px);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
}
.header .title .name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.header .title .en-text {
  font-size: clamp(44 * var(--clamp-min-ratio) * 1px, 44 / var(--clamp-base-width) * 100vw, 44px);
  line-height: 1;
}
.header .title .jp-text {
  font-size: clamp(19 * var(--clamp-min-ratio) * 1px, 19 / var(--clamp-base-width) * 100vw, 19px);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
}

/* ========================================
   Main Visual Section
   ======================================== */
.main-visual {
  width: 100%;
}
.main-visual .image {
  width: 100%;
  display: block;
}
.main-visual .image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ========================================
   About Section
   ======================================== */
.about {
  background-color: var(--color-bg-light);
  padding: clamp(97 * var(--clamp-min-ratio) * 1px, 97 / var(--clamp-base-width) * 100vw, 97px) 0 clamp(130 * var(--clamp-min-ratio) * 1px, 130 / var(--clamp-base-width) * 100vw, 130px);
  color: var(--color-text-secondary);
}
.about .inner {
  max-width: clamp(920 * var(--clamp-min-ratio) * 1px, 920 / var(--clamp-base-width) * 100vw, 920px);
  margin: 0 auto;
  text-align: center;
}
.about .title {
  font-size: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px);
  letter-spacing: 0.05em;
  margin-bottom: 60px;
  position: relative;
  display: inline-block;
  width: fit-content;
}
.about .intro {
  margin-bottom: clamp(120 * var(--clamp-min-ratio) * 1px, 120 / var(--clamp-base-width) * 100vw, 120px);
}
.about .intro .text {
  font-size: clamp(29 * var(--clamp-min-ratio) * 1px, 29 / var(--clamp-base-width) * 100vw, 29px);
  line-height: 2;
  letter-spacing: 0.05em;
}
.about .under {
  padding-inline: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px);
  margin-top: clamp(105 * var(--clamp-min-ratio) * 1px, 105 / var(--clamp-base-width) * 100vw, 105px);
}
.about .under .text {
  margin-top: clamp(55 * var(--clamp-min-ratio) * 1px, 55 / var(--clamp-base-width) * 100vw, 55px);
  font-size: clamp(24 * var(--clamp-min-ratio) * 1px, 24 / var(--clamp-base-width) * 100vw, 24px);
  line-height: 2;
}
.about .list {
  display: grid;
  width: fit-content;
  margin-inline: auto;
  text-align: left;
  margin-top: clamp(55 * var(--clamp-min-ratio) * 1px, 55 / var(--clamp-base-width) * 100vw, 55px);
  font-size: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  color: var(--color-pink);
}
.about .list li {
  padding: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px) 0;
  display: flex;
  align-items: center;
  background: url(/assets/images/dotted.svg) repeat-x bottom left/10px 2px;
}
.about .list li::before {
  content: "";
  display: block;
  width: clamp(48 * var(--clamp-min-ratio) * 1px, 48 / var(--clamp-base-width) * 100vw, 48px);
  aspect-ratio: 54/61;
  background: url(/assets/images/checkbox.svg) no-repeat left/contain;
  margin-right: clamp(22 * var(--clamp-min-ratio) * 1px, 22 / var(--clamp-base-width) * 100vw, 22px);
}
.about .bord {
  width: calc(100% - 40px);
  margin-inline: auto;
}
.about .bord .bg {
  background-color: var(--color-pink);
  border-radius: 14px;
  margin: clamp(70 * var(--clamp-min-ratio) * 1px, 70 / var(--clamp-base-width) * 100vw, 70px) auto 0;
  padding: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px) clamp(60 * var(--clamp-min-ratio) * 1px, 60 / var(--clamp-base-width) * 100vw, 60px);
  font-size: clamp(26 * var(--clamp-min-ratio) * 1px, 26 / var(--clamp-base-width) * 100vw, 26px);
  color: var(--color-white);
}
.about .bord .bg-text {
  width: fit-content;
  margin: clamp(30 * var(--clamp-min-ratio) * 1px, 30 / var(--clamp-base-width) * 100vw, 30px) auto;
  font-size: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px);
  padding-inline: clamp(30 * var(--clamp-min-ratio) * 1px, 30 / var(--clamp-base-width) * 100vw, 30px);
  background-color: var(--color-white);
  color: var(--color-pink);
}
.about .bord .marker::after {
  height: 5px;
}
.about .bord .caption {
  text-align: right;
  font-size: clamp(14 * var(--clamp-min-ratio) * 1px, 14 / var(--clamp-base-width) * 100vw, 14px);
  line-height: 2.5;
  color: var(--color-pink);
}
@media (max-width: 880px) {
  .about .bord .bg {
    font-size: clamp(24 * var(--clamp-min-ratio) * 1px, 24 / var(--clamp-base-width) * 100vw, 24px);
    padding: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px) clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
  }
  .about .bord span {
    font-size: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
  }
  .about .bord .bg-text {
    font-size: clamp(30 * var(--clamp-min-ratio) * 1px, 30 / var(--clamp-base-width) * 100vw, 30px);
  }
}

/* ========================================
   Faq Section
   ======================================== */
.faq {
  background-color: var(--color-blue-light);
  padding: clamp(80 * var(--clamp-min-ratio) * 1px, 80 / var(--clamp-base-width) * 100vw, 80px) clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
  text-align: center;
}
.faq-title {
  max-width: clamp(150 * var(--clamp-min-ratio) * 1px, 150 / var(--clamp-base-width) * 100vw, 150px);
  margin-inline: auto;
}
.faq .inner {
  width: min(98%, 850px);
  margin-inline: auto;
}
.faq .inner-title .flex {
  display: grid;
  align-items: center;
  grid-template-columns: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px) 1fr;
  font-size: clamp(33 * var(--clamp-min-ratio) * 1px, 33 / var(--clamp-base-width) * 100vw, 33px);
  font-weight: var(--font-weight-bolder);
  margin-top: clamp(45 * var(--clamp-min-ratio) * 1px, 45 / var(--clamp-base-width) * 100vw, 45px);
  gap: clamp(10 * var(--clamp-min-ratio) * 1px, 10 / var(--clamp-base-width) * 100vw, 10px);
  text-align: left;
}
@media (max-width: 880px) {
  .faq .inner-title .flex {
    font-size: clamp(26 * var(--clamp-min-ratio) * 1px, 26 / var(--clamp-base-width) * 100vw, 26px);
  }
}
.faq .inner-title .q {
  font-family: var(--font-family-kannada);
  color: var(--color-blue);
  font-size: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px);
}
.faq .inner .reason-image {
  display: block;
  margin-top: clamp(45 * var(--clamp-min-ratio) * 1px, 45 / var(--clamp-base-width) * 100vw, 45px);
  width: 96%;
}
.faq .inner-list {
  text-align: left;
  margin-top: clamp(45 * var(--clamp-min-ratio) * 1px, 45 / var(--clamp-base-width) * 100vw, 45px);
  width: 100%;
}
.faq .inner-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
  counter-increment: number;
}
.faq .inner-list li + li {
  margin-top: clamp(65 * var(--clamp-min-ratio) * 1px, 65 / var(--clamp-base-width) * 100vw, 65px);
}
.faq .inner-list li .title {
  font-size: clamp(28 * (var(--clamp-min-width) / 800 + 0) * 1px, 28 / 800 * 100vw, 28px);
  font-weight: var(--font-weight-bolder);
}
.faq .inner-list li .title::before {
  content: counter(number) ".";
  font-size: clamp(34 * var(--clamp-min-ratio) * 1px, 34 / var(--clamp-base-width) * 100vw, 34px);
  font-family: var(--font-family-kannada);
  color: var(--color-pink2);
}
.faq .inner-list li .text {
  font-size: clamp(19 * (var(--clamp-min-width) / 800 + 0) * 1px, 19 / 800 * 100vw, 19px);
  line-height: 2;
}
@media (max-width: 735px) {
  .faq .inner-list li .text br {
    display: none;
  }
}
.faq .inner-list li .article {
  width: 68%;
  flex-grow: 1;
  display: grid;
  gap: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
  grid-template-rows: min-content;
}
.faq .inner-list li .image {
  width: clamp(188 * var(--clamp-min-ratio) * 1px, 188 / var(--clamp-base-width) * 100vw, 188px);
  flex-grow: 1;
}
.faq .inner-list li .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faq .c-cta {
  margin-top: clamp(125 * var(--clamp-min-ratio) * 1px, 125 / var(--clamp-base-width) * 100vw, 125px);
}

/* ========================================
   step Section
   ======================================== */
.step {
  background-color: var(--color-pink-exlight);
  overflow: clip;
  padding: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px) 0 clamp(145 * var(--clamp-min-ratio) * 1px, 145 / var(--clamp-base-width) * 100vw, 145px);
}
.step .title {
  display: grid;
  place-content: center;
  position: relative;
  width: 100%;
  aspect-ratio: 735/150;
  padding: clamp(100 * var(--clamp-min-ratio) * 1px, 100 / var(--clamp-base-width) * 100vw, 100px);
}
.step .title::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(/assets/images/ribbon.png) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: -1;
}
@media (min-width: 1921px) {
  .step .title::before {
    width: 100%;
  }
}
.step .title-center {
  color: var(--color-white);
  font-size: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  width: clamp(351 * var(--clamp-min-ratio) * 1px, 351 / var(--clamp-base-width) * 100vw, 351px);
  padding: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
  position: relative;
  z-index: 1;
}
.step .title-center img {
  height: 100%;
  object-fit: contain;
}
.step-list {
  width: fit-content;
  margin-inline: auto;
}
.step-list li {
  display: grid;
  grid-template-columns: clamp(56 * (var(--clamp-min-width) / 1000 + 0) * 1px, 56 / 1000 * 100vw, 56px) 1fr;
  align-items: center;
  gap: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
  font-size: clamp(29 * (var(--clamp-min-width) / 1000 + 0) * 1px, 29 / 1000 * 100vw, 29px);
  color: #383838;
  padding: clamp(25 * (var(--clamp-min-width) / 1000 + 0) * 1px, 25 / 1000 * 100vw, 25px) 0;
}
.step-list li:not(:last-child) {
  background: url(/assets/images/dotted.svg) repeat-x bottom left/10px 2px;
}
.step-list li:nth-of-type(7) {
  grid-template-columns: clamp(65 * (var(--clamp-min-width) / 1000 + 0) * 1px, 65 / 1000 * 100vw, 65px) 1fr;
  color: var(--color-pink);
}
.step-list li .lg {
  font-size: clamp(35 * (var(--clamp-min-width) / 1000 + 0) * 1px, 35 / 1000 * 100vw, 35px);
  font-weight: var(--font-weight-bold);
  margin-right: clamp(15 * var(--clamp-min-ratio) * 1px, 15 / var(--clamp-base-width) * 100vw, 15px);
}

/* ========================================
   plan Section
   ======================================== */
.plan .image img {
  width: 100%;
}
.plan .title {
  background-color: var(--color-green);
  padding: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px) 0;
  text-align: center;
  color: #FFF;
  font-size: clamp(42 * var(--clamp-min-ratio) * 1px, 42 / var(--clamp-base-width) * 100vw, 42px);
  font-weight: var(--font-weight-bold);
  position: relative;
}
.plan .title::after {
  content: "";
  width: 100px;
  height: 50px;
  background-color: var(--color-green);
  position: absolute;
  left: 50%;
  bottom: -49px;
  translate: -50% 0;
  z-index: 1;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.plan .detail {
  padding: clamp(135 * var(--clamp-min-ratio) * 1px, 135 / var(--clamp-base-width) * 100vw, 135px) 0;
  background-color: var(--color-beige);
}
.plan .box {
  max-width: min(clamp(785 * (var(--clamp-min-width) / 880 + 0) * 1px, 785 / 880 * 100vw, 785px), 100%);
  margin-inline: auto;
  padding: clamp(65 * var(--clamp-min-ratio) * 1px, 65 / var(--clamp-base-width) * 100vw, 65px) clamp(65 * var(--clamp-min-ratio) * 1px, 65 / var(--clamp-base-width) * 100vw, 65px);
  background-color: var(--color-white);
  border-radius: 20px;
  border: solid 1px var(--color-text-primary);
  text-align: center;
  font-family: var(--font-family-yuminchou);
  font-weight: var(--font-weight-bold);
  position: relative;
}
.plan .box::before {
  content: "";
  width: clamp(286 * (var(--clamp-min-width) / 735 + 0) * 1px, 286 / 735 * 100vw, 286px);
  aspect-ratio: 20/7;
  background: url(/assets/images/standard.svg) no-repeat center/contain;
  position: absolute;
  left: -10%;
  top: 0;
}
@media (max-width: 735px) {
  .plan .box::before {
    left: 0;
    translate: 0 -50%;
  }
}
.plan .box-title {
  color: var(--color-green);
  font-size: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px);
  padding-bottom: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  border-bottom: solid 1px currentColor;
}
.plan .box .description {
  display: grid;
  text-align: left;
  width: fit-content;
  margin-top: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  margin-inline: auto;
  font-feature-settings: "palt";
}
.plan .box .description > * + * {
  margin-top: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
}
.plan .box .description dl {
  display: flex;
}
.plan .box .description .before {
  align-items: baseline;
}
.plan .box .description .before dt {
  font-size: clamp(30 * var(--clamp-min-ratio) * 1px, 30 / var(--clamp-base-width) * 100vw, 30px);
}
.plan .box .description .before dd {
  display: flex;
  font-size: clamp(55 * var(--clamp-min-ratio) * 1px, 55 / var(--clamp-base-width) * 100vw, 55px);
  letter-spacing: 0.02em;
  line-height: 1;
}
.plan .box .description .before dd .price {
  position: relative;
}
.plan .box .description .before dd .price::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-red);
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  rotate: 12deg;
}
.plan .box .description .after {
  display: grid;
  place-content: center;
  text-align: left;
  color: var(--color-red);
}
.plan .box .description .after dt {
  font-size: clamp(18 * var(--clamp-min-ratio) * 1px, 18 / var(--clamp-base-width) * 100vw, 18px);
  padding-left: clamp(55 * (var(--clamp-min-width) / 1000 + 0) * 1px, 55 / 1000 * 100vw, 55px);
}
@media (max-width: 735px) {
  .plan .box .description .after dt {
    padding-left: clamp(15 * (var(--clamp-min-width) / 735 + 0) * 1px, 15 / 735 * 100vw, 15px);
    font-size: clamp(27 * var(--clamp-min-ratio) * 1px, 27 / var(--clamp-base-width) * 100vw, 27px);
  }
}
.plan .box .description .after dd {
  display: flex;
  gap: clamp(15 * var(--clamp-min-ratio) * 1px, 15 / var(--clamp-base-width) * 100vw, 15px);
  line-height: 1;
  align-items: baseline;
  font-size: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
}
@media (max-width: 735px) {
  .plan .box .description .after dd {
    font-size: clamp(26 * var(--clamp-min-ratio) * 1px, 26 / var(--clamp-base-width) * 100vw, 26px);
  }
}
.plan .box .description .after dd .lg {
  font-size: clamp(55 * var(--clamp-min-ratio) * 1px, 55 / var(--clamp-base-width) * 100vw, 55px);
  letter-spacing: 3.78px;
  background: url(/assets/images/arrow.png) no-repeat left center/clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px);
  padding-left: clamp(55 * var(--clamp-min-ratio) * 1px, 55 / var(--clamp-base-width) * 100vw, 55px);
}
.plan .box .description .after dd .lg::after {
  font-size: clamp(37 * var(--clamp-min-ratio) * 1px, 37 / var(--clamp-base-width) * 100vw, 37px);
}
.plan .box .list {
  margin-top: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
}
.plan .box .list li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(24 * var(--clamp-min-ratio) * 1px, 24 / var(--clamp-base-width) * 100vw, 24px) 0;
  font-size: clamp(27 * var(--clamp-min-ratio) * 1px, 27 / var(--clamp-base-width) * 100vw, 27px);
  background: url(/assets/images/dotted.svg) repeat-x top left/15px 5px;
}
.plan .box .list li:not(:has(.free)) {
  align-items: baseline;
  gap: clamp(10 * var(--clamp-min-ratio) * 1px, 10 / var(--clamp-base-width) * 100vw, 10px);
}
.plan .box .list li:not(:has(.free)) .price {
  font-size: clamp(45 * var(--clamp-min-ratio) * 1px, 45 / var(--clamp-base-width) * 100vw, 45px);
  line-height: 1;
}
.plan .box .list li:not(:has(.free)) .price::after {
  font-size: clamp(27 * var(--clamp-min-ratio) * 1px, 27 / var(--clamp-base-width) * 100vw, 27px);
  margin-left: 10px;
}
.plan .box .list li:has(.free) .item {
  padding-right: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  position: relative;
}
.plan .box .list li:has(.free) .item::after {
  content: ":";
  display: inline-block;
  position: absolute;
  right: 0;
}
.plan .box .list li:has(.free) .price {
  padding-left: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  color: var(--color-red);
  font-size: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
}

/* ========================================
   present Section
   ======================================== */
.present {
  background-color: var(--color-beige);
  text-align: center;
}
.present .title {
  font-size: clamp(54 * var(--clamp-min-ratio) * 1px, 54 / var(--clamp-base-width) * 100vw, 54px);
  display: flex;
  justify-content: center;
  gap: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
}
.present .bord {
  background-color: var(--color-blue);
  padding: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px) 0;
  color: var(--color-white);
  margin-top: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px);
}
.present .bord-inner {
  width: fit-content;
  margin-inline: auto;
}
.present .bord-title {
  font-size: clamp(42 * var(--clamp-min-ratio) * 1px, 42 / var(--clamp-base-width) * 100vw, 42px);
  font-weight: var(--font-weight-bold);
  padding-bottom: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
}
@media (max-width: 735px) {
  .present .bord-title {
    display: grid;
    line-height: 1;
    gap: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
    padding-bottom: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px);
  }
}
.present .bord-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: url(/assets/images/dotted.svg) repeat-x bottom left/10px 2px;
  filter: brightness(0) invert(1);
}
.present .bord-title .price {
  font-size: clamp(100 * var(--clamp-min-ratio) * 1px, 100 / var(--clamp-base-width) * 100vw, 100px);
  font-family: var(--font-family-yuminchou);
  color: var(--color-yellow);
}
@media (max-width: 735px) {
  .present .bord-title .price {
    font-size: clamp(100 * var(--clamp-min-ratio) * 1px, 100 / var(--clamp-base-width) * 100vw, 100px);
  }
}
.present .bord-title .price::after {
  font-size: clamp(36 * var(--clamp-min-ratio) * 1px, 36 / var(--clamp-base-width) * 100vw, 36px);
  font-family: var(--font-family-base);
  margin-left: 5px;
}
.present .bord-title .lg {
  font-weight: var(--font-weight-bolder);
  font-size: clamp(45 * var(--clamp-min-ratio) * 1px, 45 / var(--clamp-base-width) * 100vw, 45px);
}
.present .bord-text {
  font-size: clamp(28 * var(--clamp-min-ratio) * 1px, 28 / var(--clamp-base-width) * 100vw, 28px);
  line-height: 1.75;
}

/* ========================================
   consider Section
   ======================================== */
.consider {
  padding: clamp(145 * var(--clamp-min-ratio) * 1px, 145 / var(--clamp-base-width) * 100vw, 145px) 0;
  background-color: var(--color-beige);
}
.consider .title {
  font-size: clamp(42 * var(--clamp-min-ratio) * 1px, 42 / var(--clamp-base-width) * 100vw, 42px);
  width: fit-content;
  margin-inline: auto;
  border-bottom: solid 15px #FFFFFF;
  padding-bottom: 10px;
}
.consider-table {
  width: fit-content;
  margin-inline: auto;
  margin-top: clamp(64 * var(--clamp-min-ratio) * 1px, 64 / var(--clamp-base-width) * 100vw, 64px);
}
@media (max-width: 735px) {
  .consider-table {
    width: 100%;
  }
  .consider-table table {
    width: calc(100% - 40px);
    margin-inline: auto;
  }
}
.consider-table table th, .consider-table table td {
  padding: clamp(30 * (var(--clamp-min-width) / 1200 + 0) * 1px, 30 / 1200 * 100vw, 30px) clamp(10 * (var(--clamp-min-width) / 1200 + 0) * 1px, 10 / 1200 * 100vw, 10px);
  font-size: clamp(26 * (var(--clamp-min-width) / 900 + 0) * 1px, 26 / 900 * 100vw, 26px);
  font-weight: 400;
  text-align: center;
}
.consider-table table th:not(:first-child), .consider-table table td:not(:first-child) {
  width: clamp(285 * (var(--clamp-min-width) / 1200 + 0) * 1px, 285 / 1200 * 100vw, 285px);
  border-left: solid 1px #707070;
  border-bottom: dashed 1px #707070;
}
.consider-table table thead {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.consider-table table tbody th {
  background: #E6E6E6;
  border-bottom: dashed 1px #707070;
  padding-inline: clamp(30 * (var(--clamp-min-width) / 1200 + 0) * 1px, 30 / 1200 * 100vw, 30px);
}
.consider-table table tbody td:nth-of-type(2) {
  background: #FFFFFF;
  font-size: clamp(30 * (var(--clamp-min-width) / 900 + 0) * 1px, 30 / 900 * 100vw, 30px);
  color: var(--color-blue);
  font-weight: var(--font-weight-medium);
}
.consider-table table tbody td:nth-of-type(2) span {
  display: block;
  font-size: clamp(20 * (var(--clamp-min-width) / 1000 + 0) * 1px, 20 / 1000 * 100vw, 20px);
  line-height: 1;
  background-color: #FFF68B;
  width: fit-content;
  margin-inline: auto;
  padding: clamp(5 * var(--clamp-min-ratio) * 1px, 5 / var(--clamp-base-width) * 100vw, 5px) clamp(10 * var(--clamp-min-ratio) * 1px, 10 / var(--clamp-base-width) * 100vw, 10px);
  margin-top: clamp(5 * var(--clamp-min-ratio) * 1px, 5 / var(--clamp-base-width) * 100vw, 5px);
}
.consider-table .add-text {
  width: fit-content;
  margin-inline: auto;
  translate: 20% 0;
  font-size: clamp(28 * (var(--clamp-min-width) / 900 + 0) * 1px, 28 / 900 * 100vw, 28px);
  color: var(--color-blue);
  background-color: var(--color-white);
  padding: clamp(10 * var(--clamp-min-ratio) * 1px, 10 / var(--clamp-base-width) * 100vw, 10px) clamp(15 * var(--clamp-min-ratio) * 1px, 15 / var(--clamp-base-width) * 100vw, 15px);
  border-radius: clamp(17 * var(--clamp-min-ratio) * 1px, 17 / var(--clamp-base-width) * 100vw, 17px);
  border: solid clamp(5 * var(--clamp-min-ratio) * 1px, 5 / var(--clamp-base-width) * 100vw, 5px) currentColor;
  position: relative;
  margin-top: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
}
.consider-table .add-text::before {
  content: "";
  width: 26px;
  aspect-ratio: 3/2;
  background-color: currentColor;
  position: absolute;
  top: -19px;
  left: 50%;
  translate: -50% 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@media (max-width: 735px) {
  .consider-table .add-text::before {
    width: 20px;
    top: -15px;
  }
}
.consider-table .summary {
  color: #5D5D5D;
  text-align: center;
  margin-top: clamp(80 * var(--clamp-min-ratio) * 1px, 80 / var(--clamp-base-width) * 100vw, 80px);
  font-size: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
}
.consider-table .summary span {
  background: linear-gradient(transparent 70%, var(--color-yellow) 70%);
}

/* ========================================
   support Section
   ======================================== */
.support {
  background-color: var(--color-blue-light2);
  padding: clamp(75 * var(--clamp-min-ratio) * 1px, 75 / var(--clamp-base-width) * 100vw, 75px) 0 clamp(150 * var(--clamp-min-ratio) * 1px, 150 / var(--clamp-base-width) * 100vw, 150px);
}
.support .title {
  max-width: clamp(800 * (var(--clamp-min-width) / 950 + 0) * 1px, 800 / 950 * 100vw, 800px);
  margin-inline: auto;
}
.support .list {
  width: min(910px, 100% - 40px);
  margin-inline: auto;
  margin-top: clamp(105 * var(--clamp-min-ratio) * 1px, 105 / var(--clamp-base-width) * 100vw, 105px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
}
.support .list .item {
  font-size: clamp(32 * (var(--clamp-min-width) / 900 + 0) * 1px, 32 / 900 * 100vw, 32px);
  color: var(--color-blue);
  background-color: var(--color-white);
  width: 90%;
  margin-inline: auto;
  text-align: center;
  border-radius: clamp(10 * var(--clamp-min-ratio) * 1px, 10 / var(--clamp-base-width) * 100vw, 10px);
  border: solid 3px var(--color-blue);
  line-height: 1.8;
}
.support .list .image {
  margin-top: clamp(40 * var(--clamp-min-ratio) * 1px, 40 / var(--clamp-base-width) * 100vw, 40px);
}
.support .summary {
  font-size: clamp(29 * var(--clamp-min-ratio) * 1px, 29 / var(--clamp-base-width) * 100vw, 29px);
  color: var(--color-blue);
  margin-top: clamp(70 * var(--clamp-min-ratio) * 1px, 70 / var(--clamp-base-width) * 100vw, 70px);
  text-align: center;
}
.support .c-cta {
  margin-top: clamp(100 * var(--clamp-min-ratio) * 1px, 100 / var(--clamp-base-width) * 100vw, 100px);
}

/* ========================================
   counselor Section
   ======================================== */
.counselor {
  padding: clamp(140 * var(--clamp-min-ratio) * 1px, 140 / var(--clamp-base-width) * 100vw, 140px) 0 clamp(130 * var(--clamp-min-ratio) * 1px, 130 / var(--clamp-base-width) * 100vw, 130px);
  background-color: var(--color-beige2);
  display: grid;
  place-items: center;
  color: #4E4B4A;
}
.counselor-title {
  width: min(640px, 100% - 116px);
}
.counselor-image {
  width: min(400px, 100% - 116px);
  margin-inline: auto;
  margin-top: clamp(60 * var(--clamp-min-ratio) * 1px, 60 / var(--clamp-base-width) * 100vw, 60px);
  border-radius: 50%;
  overflow: hidden;
}
.counselor-name {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: clamp(20 * var(--clamp-min-ratio) * 1px, 20 / var(--clamp-base-width) * 100vw, 20px);
  font-size: clamp(44 * var(--clamp-min-ratio) * 1px, 44 / var(--clamp-base-width) * 100vw, 44px);
  font-weight: 400;
  gap: clamp(50 * var(--clamp-min-ratio) * 1px, 50 / var(--clamp-base-width) * 100vw, 50px);
  line-height: 1;
}
.counselor-name .kana {
  font-size: clamp(16 * var(--clamp-min-ratio) * 1px, 16 / var(--clamp-base-width) * 100vw, 16px);
  line-height: 2;
}
.counselor-message {
  font-size: clamp(26 * var(--clamp-min-ratio) * 1px, 26 / var(--clamp-base-width) * 100vw, 26px);
  font-weight: 200;
  margin-top: clamp(35 * var(--clamp-min-ratio) * 1px, 35 / var(--clamp-base-width) * 100vw, 35px);
  text-align: center;
}
.counselor-message .image {
  margin-top: clamp(90 * var(--clamp-min-ratio) * 1px, 90 / var(--clamp-base-width) * 100vw, 90px);
  width: min(610px, 100% - 116px);
  margin-inline: auto;
}
.counselor .c-cta {
  margin-top: clamp(100 * var(--clamp-min-ratio) * 1px, 100 / var(--clamp-base-width) * 100vw, 100px);
}

/* ========================================
   Footer Section
   ======================================== */
.footer {
  background: var(--color-blue);
  padding: clamp(145 * var(--clamp-min-ratio) * 1px, 145 / var(--clamp-base-width) * 100vw, 145px) 0 clamp(68 * (var(--clamp-min-width) / 1000 + 0) * 1px, 68 / 1000 * 100vw, 68px);
  color: var(--color-white);
}
.footer .inner {
  display: flex;
  align-items: flex-end;
  gap: clamp(45 * var(--clamp-min-ratio) * 1px, 45 / var(--clamp-base-width) * 100vw, 45px);
  width: fit-content;
  margin-inline: auto;
}
@media (max-width: 840px) {
  .footer .inner {
    flex-direction: column;
    align-items: center;
  }
}
.footer .logo {
  width: clamp(188 * var(--clamp-min-ratio) * 1px, 188 / var(--clamp-base-width) * 100vw, 188px);
}
@media (max-width: 840px) {
  .footer .logo {
    width: 38%;
    margin-inline: auto;
  }
}
@media (max-width: 840px) {
  .footer .info {
    text-align: center;
  }
}
.footer .info-name {
  font-size: clamp(32 * var(--clamp-min-ratio) * 1px, 32 / var(--clamp-base-width) * 100vw, 32px);
}
.footer .info-name span {
  font-size: clamp(21 * var(--clamp-min-ratio) * 1px, 21 / var(--clamp-base-width) * 100vw, 21px);
}
.footer .info-datas {
  font-size: clamp(22 * var(--clamp-min-ratio) * 1px, 22 / var(--clamp-base-width) * 100vw, 22px);
  margin-top: clamp(25 * var(--clamp-min-ratio) * 1px, 25 / var(--clamp-base-width) * 100vw, 25px);
  display: grid;
  gap: clamp(15 * var(--clamp-min-ratio) * 1px, 15 / var(--clamp-base-width) * 100vw, 15px);
}
.footer .info-datas li {
  display: flex;
}
.footer .info-datas li .item::after {
  content: "｜";
}
@media (max-width: 840px) {
  .footer .info-datas li {
    justify-content: center;
  }
  .footer .info-datas li .item::after {
    content: "";
  }
  .footer .info-datas li:nth-of-type(1) .item {
    margin-right: 10px;
  }
}
.footer .copy {
  margin-top: clamp(90 * var(--clamp-min-ratio) * 1px, 90 / var(--clamp-base-width) * 100vw, 90px);
  text-align: center;
}

/* ========================================
   Responsive Styles
   ======================================== */
.is-pc {
  display: block !important;
}

.is-sp {
  display: none !important;
}

.is-mb {
  display: none !important;
}

/* Tablet */
@media (max-width: 768px) {
  .is-pc {
    display: none !important;
  }
  .is-sp {
    display: block !important;
  }
  .is-mb {
    display: none !important;
  }
}
/* Mobile */
@media (max-width: 500px) {
  .is-pc {
    display: none !important;
  }
  .is-sp {
    display: block !important;
  }
  .is-mb {
    display: block !important;
  }
}

/*# sourceMappingURL=style.css.map */