@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

:is(ul, ol)[class] {
  list-style: '';
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

button,
input,
label {
  line-height: 1.1;
}

a[class] {
  text-decoration: none;
}

a:not([class]) {
  color: #3666cb;
  text-decoration-skip-ink: auto;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

button:not(disabled) {
  cursor: pointer;
}

p {
  line-height: 1.5;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

iframe,
iframe:focus {
  outline: none;
}

table {
  border-collapse: collapse;
}

td,
math,
time[datetime*=':'] {
  font-variant-numeric: tabular-nums lining-nums;
}

:root {
  --clr-neutral-100: #fff;
  --clr-neutral-200: #f5f5f5;
  --clr-neutral-300: #888;
  --clr-neutral-400: #ededff;
  --clr-neutral-500: #c7c7c7;
  --clr-neutral-600: #ddefff;
  --clr-neutral-700: #d0f0ee;
  --clr-neutral-800: #999;
  --clr-neutral-900: #41474c;

  --clr-primary: #66cc02;
  --clr-secondary: #325ea5;

  --clr-background: #f2f2f2;

  --clr-border-300: #a5a5a5;
  --clr-border-400: #000;
  --clr-border-500: #ccc;
  --clr-border-600: #666;
  --clr-border-700: #d9d9d9;
  --clr-border-800: #d2d2d2;
  --clr-border-900: #323a3c;

  --clr-link: #2680ea;
  --clr-faq-answer: #d20015;

  --clr-red-400: #f1382f;
  --clr-red-500: #ff0032;
  --clr-red-600: #FF0400;
  --clr-red-700: #ba0900;

  --clr-orange-400: #ff7f00;
  --clr-orange-500: #eb5302;

  --clr-blue-500: #335ea6;
  --clr-blue-600: #0a3478;
  --clr-blue-700: #082656;

  --clr-green-100: #e0f8c8;
  --clr-green-400: #89c029;

  --clr-pink-200: #ffdcb9;

  --clr-yellow-400: #f6d84c;

  --font-primary: 'Noto Sans JP', 'Helvetica', Arial,
    'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'メイリオ',
    'ＭＳ Ｐゴシック', 'Osaka‐等幅', sans-serif;
  --font-secondary: 'Quicksand', -apple-system, system-ui, sans-serif;
}

body {
  line-height: 1.5;
  color: var(--clr-neutral-900);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  font-weight: 700;
  background-color: var(--clr-neutral-100);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-hamburger-open {
  overflow: hidden;
}

main {
  /* Offset header height */
  padding-top: 108px;
}

.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
}

.jp {
  font-family: var(--font-primary);
}

.en {
  font-family: var(--font-secondary);
}

/* Colors */
.bg-white {
  background-color: var(--clr-neutral-100);
}

.bg-gray {
  background-color: var(--clr-background);
}

.bg-green-100 {
  background-color: var(--clr-green-100);
}

.bg-clr-primary {
  background-color: var(--clr-primary);
}

.bg-secondary {
  background-color: var(--clr-secondary);
}

.bg-gray-100 {
  background-color: var(--clr-border-700);
}

.bg-gray-200 {
  background-color: var(--clr-neutral-300);
}

.clr-white {
  color: var(--clr-neutral-100);
}

.clr-primary {
  color: var(--clr-primary);
}

.clr-secondary {
  color: var(--clr-secondary);
}


/* Layout */
.sec-wrap {
  --max-width: 1100px;
  --padding: var(--space-80);

  width: min(var(--max-width), 100% - var(--padding));
  margin-inline: auto;
}

.sec-wrap.wrap-1120 {
  --max-width: 1120px;
  --padding: var(--space-40);
}

.sec-wrap.wrap-1000 {
  --max-width: 1000px;
}

.sec-padding {
  padding-block: var(--space-120);
}

/* Main Header */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 22px 133px 27px 133px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--clr-neutral-100);
  z-index: 9999;
}

.main-header .logo-link {
  z-index: 801;
}

.main-header .header-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  font-size: var(--fs-16);
}

.main-header .header-nav .en {
  font-weight: 600;
}

.header-nav .header-nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1875rem;
}

.header-nav .header-nav-sub-list,
.hamburger-nav-sub-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-25);
}

.hamburger-nav-sub-list{
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  gap: var(--space-25);
}

.header-nav .header-nav-item {
  /* position: relative; */
}

.sec-wrap.sub-menu-wrap {
  --max-width: 960px;
}

.header-nav .sub-menu-inner {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-2em);
  background-color: var(--clr-neutral-100);
  padding-block: var(--space-70) var(--space-100);
  z-index: 999;
  transition: all 0.5s;
}

.js-nav-sub-trigger:hover .sub-menu-inner {
  visibility: visible;
  opacity: 1;
  transform: translateY(0%);
  z-index: 1;
  box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.1);
}

.header-nav .sub-menu-inner .attr-ttl {
  line-height: 1.6;
}

.header-nav .sub-menu-inner .header-nav-sub-list {
  margin-top: var(--space-50);
  display: flex;
  gap: var(--space-120);
}

.header-nav .sub-menu-inner .header-nav-sub-list .header-nav-sub-link {
  gap: var(--space-30);
  letter-spacing: 0.3em;
  padding-bottom: var(--space-20);
  border-bottom: 1px solid #707070;
}

.header-nav .sub-menu-inner .header-nav-sub-list .header-nav-sub-link:is(:hover, :focus-visible, :active) {
  color: var(--clr-neutral-900);
}

nav>* {
  text-transform: uppercase;
  font-weight: 700;
}

.header-nav-link {
  display: inline-block;
  padding-block: var(--space-10);
  color: var(--clr-neutral-900);
}

.header-nav .btn-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 36px;
  margin-left: var(--space-10);
  padding: 0.5rem var(--space-40);
}

:is(.header-nav, .hamburger-menu) .btn-contact::after {
  content: none;
}

:is(.nav-link, .policy-link) {
  transition: color 0.3s;
}

.menu-btn {
  color: var(--clr-neutral-100);
  --btn-bg-clr: var(--clr-red-400);
  --btn-color-clr: var(--clr-neutral-100);
  --btn-border-clr: var(--clr-neutral-100);
  display: inline-flex;
  border-radius: 100vw;
  color: var(--btn-color-clr);
  font-weight: 700;
  font-size: 1rem;
  justify-content: space-between;
  align-items: center;
  background-color: var(--btn-bg-clr);
  transition: 0.5s background-color, 0.5s border-color, 0.5s color;
  min-width: 7.5rem;
  height: 2.375rem;
  max-width: 100%;
  position: relative;
  padding-left: 1.25rem;
}

.menu-btn:after {
  position: absolute;
  top: 50%;
  right: .6875rem;
  width: .9375rem;
  height: .9375rem;
  transform: translateY(-50%);
  background: url(../img/common/btn_icon_traingle.svg) no-repeat center center / cover;
  content: '';
}

.header-nav-link:not(.menu-btn) {
  max-height: 1.25rem;
  display: inline-flex;
  align-items: center;
}

.header-nav-list .header-nav-item {
 padding-right: 1.1875rem;
 border-right: 1px solid var(--clr-neutral-900);
}

.header-nav-list .header-nav-item .header-nav-link {
  padding-block: .6875rem;
}

.header-nav-list .header-nav-item:last-child {
  border-right: unset;
}

textarea {
  width: 500px;
  padding: 10px;
}

/* Button styles */
.btn {
  --btn-bg-clr: var(--clr-red-400);
  --btn-color-clr: var(--clr-neutral-100);
  --btn-border-clr: var(--clr-neutral-100);
  display: inline-flex;
  border-radius: 100vw;
  color: var(--btn-color-clr);
  font-weight: 700;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
  background-color: var(--btn-bg-clr);
  transition: 0.5s background-color, 0.5s border-color, 0.5s color;
  min-width: 30.375rem;
  height: 4.625rem;
  max-width: 100%;
  position: relative;
  border: 4px solid var(--btn-border-clr);
}

.btn:after {
  position: absolute;
  top: 50%;
  right: 1.375rem;
  width: .9375rem;
  height: .9375rem;
  transform: translateY(-50%);
  background: url(../img/common/btn_icon_traingle.svg) no-repeat center center / cover;
  content: '';
}

.btn.btn-bg-blue:after {
  right: 35px;
  top: 40%;
  rotate: 90deg;
}

.btn-bg-red {
  --btn-bg-clr: var(--clr-red-400);
}

.btn-bg-orange {
  --btn-bg-clr: var(--clr-orange-400);
}

.btn-bg-blue {
  --btn-bg-clr: var(--clr-blue-600);
}

.btn.btn-bg-blue {
  box-shadow: 0 5px rgb(0, 0, 0, .35);
  min-width: 25.75rem;
}

.btn.btn-bg-red:is(:hover, :focus-visible, :active) {
  --btn-bg-clr: var(--clr-red-700);
}

.btn.btn-bg-orange:is(:hover, :focus-visible, :active) {
  --btn-bg-clr: var(--clr-red-600);
}

.btn.btn-bg-blue:is(:hover, :focus-visible, :active) {
  --btn-bg-clr: var(--clr-blue-700);
	color: var(--clr-yellow-400);
}

.curved-bg::before {
  --offset-width: 0px;
  position: absolute;
  top: 0;
  left: unset;
  right: 0;
  width: calc(100% - var(--offset-width));
  height: 18.375rem;
  border-radius: 200px 0px 0px 0px;
  background: var(--clr-primary);
  content: "";
  z-index: -1;
  transform-origin: right;
}

.e-commerce-ttl {
  font-weight: 900;
  font-size: 2.375rem;
  text-align: center;
}

.sec-ttl svg {
  margin-inline: auto;
}

.sub-ttl {
  font-size: 2.125rem;
  font-weight: 900;
  text-align: center;
  display: block;
  line-height: 1.4;
}

.sub-ttl .has-bg-blue {
  background-color: var(--clr-secondary);
  color: var(--clr-neutral-100);
}

.sub-ttl .has-bg-green {
  background-color: var(--clr-green-100);
}

.sub-ttl span.no-line-break {
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
  padding-left: .3125rem;
}

.sub-ttl span.sp-line-break {
  border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem;
  padding-right: .3125rem;
}

.sub-ttl .has-bg-white {
  font-size: 2rem;
  font-weight: 900;
  background-color: var(--clr-neutral-100);
}

.sub-ttl .single-line-ttl {
  padding-inline: .3125rem;
  border-radius: .5rem;
}

.cmn-card {
  border: 3px solid var(--clr-border-400);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-neutral-100);
}

.card-heading {
  font-size: var(--fs-34);
  background-color: var(--clr-secondary);
  text-align: center;
  color: var(--clr-neutral-100);
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  line-height: 2;
}

.card-body {
  display: flex;
  flex-direction: column;
  column-gap: var(--space-40);
  padding-inline: var(--space-30) var(--space-20);
  padding-bottom: 1.3125rem;
}

.card-body-ttl {
  font-size: var(--fs-33);
  font-weight: 900;
  text-align: center;
  padding-bottom: var(--space-25);
  border-bottom: 1px solid var(--clr-border-400);
  padding-top: var(--space-25);
}

.card-body p {
  font-size: var(--fs-18);
  font-weight: 400;
}

/** Consulation */
.sec-consultation {
  position: relative;
}

.consultation-ttl,
.register-ttl {
  font-size: var(--fs-32);
  color: var(--clr-neutral-100);
  font-weight: 900;
}

.sec-consultation .consultation {
  position: relative;
}

.sec-consultation .consultation::after {
  position: absolute;
  content: '';
  background-image: url(../img/common/img_consultation_01.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 5.125rem;
  height: 13.1875rem;
  right: 5.3125rem;
  top: 3.4375rem;
}

.sec-consultation .sub-ttl {
  position: relative;
}

.sec-consultation .sub-ttl::after,
.sec-register .sub-ttl::after {
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  content: "";
  border-right: 13px solid transparent;
  border-top: 13px solid var(--clr-neutral-100);
}

.sec-consultation .sub-ttl::after {
  right: 13%;
}

.sec-consultation .sub-ttl span.no-line-break {
  padding-left: .9375rem;
}

.sec-consultation .sub-ttl span.sp-line-break {
  padding-right: 1.25rem;
}

/** Register */
.sec-register .sub-ttl::after {
  left: 18.5%;
}

.sec-register.curved-bg {
  position: relative;
}

.sec-register .register {
  display: flex;
  column-gap: .9375rem;
}

.sec-register .sec-wrap {
  --max-width: 941px;
  margin-inline: auto;
}

.sec-register .sub-ttl {
  position: relative;
}

.sec-register .sub-ttl .single-line-ttl {
  padding-inline: var(--space-23) var(--space-25);
}

.sec-register .register-img-wrap {
  bottom: 1.25rem;
}

.sec-register.curved-bg::before {
  height: 19.4375rem;
}

@media (hover: hover) {

  :is(.nav-link:not(.menu-btn), .policy-link):not(.btn-contact):is(:hover,
    :focus-visible,
    :active) {
    color: var(--clr-primary);
  }

  .btn-contact:is(:hover, :focus-visible, :active) {
    background-color: var(--btn-font-clr);
    color: var(--btn-bg-clr);
    border-color: var(--btn-bg-clr);
  }

  .menu-btn.btn-bg-red:is(:hover, :focus-visible, :active) {
    --btn-bg-clr: var(--clr-red-700);
  }

  .menu-btn.btn-bg-orange:is(:hover, :focus-visible, :active) {
    --btn-bg-clr: var(--clr-orange-500);
  }
}

/* Plus Icon */
.header-nav-link.js-nav-sub-parent {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  position: relative;
  cursor: default;
}

/* Add a blank space below nav link to keep hovering */
.header-nav-link.js-nav-sub-parent::after {
  position: absolute;
  content: '';
  left: 0;
  top: 100%;
  width: 100%;
  height: 1.8125rem;
}

.plus-icon {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--clr-neutral-900);
  border-radius: 50%;
  flex-shrink: 0;
}

.plus-icon::before,
.plus-icon::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 1.5px;
  margin: auto;
  border-radius: 5px;
  content: '';
  background-color: #202733;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.plus-icon::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.main-header.header-bg-white {
  background-color: var(--clr-neutral-100) !important;
}

.main-header .js-nav-sub-trigger:hover .plus-icon::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.main-header .js-nav-sub-trigger:hover .plus-icon::before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  opacity: 0;
}

.hamburger-menu {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  left: 0;
  transform: translateX(100%);
}

.hamburger-btn {
  display: none;
}

:is(.nav-link, .hamburger-btn):focus-visible {
  outline: 2px solid var(--clr-border-600);
  outline-offset: 5px;
  outline-style: dotted;
}

.main-header .btn-login {
  padding: 10px 20px;
  border-radius: 100vw;
  background-color: var(--clr-primary);
  color: var(--clr-neutral-100);
  border: 1px solid var(--clr-primary);
}

.main-header .btn-login:hover {
  background-color: var(--clr-neutral-100);
  color: var(--clr-primary);
}

.main-header .btn-logout {
  padding: 10px 20px;
  border-radius: 100vw;
  background-color: var(--clr-secondary);
  color: var(--clr-neutral-100);
  border: 1px solid var(--clr-secondary);
}

.main-header .btn-logout:hover {
  background-color: var(--clr-neutral-100);
  color: var(--clr-secondary);
}

/* Pagination styles */
.pagi-circle-svg {
  fill: #aaa;
  transition: fill 0.3s;
}

.posts-pagination .page-numbers {
  padding-inline: var(--space-5);
  transition: color 0.3s;
}

.posts-pagination a.page-numbers:hover {
  color: var(--clr-primary);
}

.posts-pagination .page-numbers.current {
  color: var(--clr-primary);
}

.posts-pagination :is(.prev, .next):hover .pagi-circle-svg {
  fill: var(--clr-primary);
}

.player-ttl .player-name {
  font-size: var(--fs-22);
  font-weight: 700;
}

.player-ttl:has(.player-name) {
  font-size: var(--fs-14);
  font-weight: 500;
}

/** Footer */
.sec-footer .footer-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sec-footer .info-container {
  display: flex;
  align-items: center;
}

.sec-footer .img-sec {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  flex-shrink: 0;
}

.sec-footer .img-sec img {
  width: 100%;
}

.sec-footer .footer-copyright {
  color: var(--clr-neutral-100);
  font-size: 1.0625rem;
  font-weight: 400;
  padding-block: 1.3125rem;
}

.sec-footer .footer-nav-list {
  display: flex;
  gap: var(--space-20);
  padding-block: var(--space-60) var(--space-30);
  align-items: baseline;
}

.sec-footer .footer-nav-list a {
  color: var(--clr-neutral-900);
}

.sec-footer .footer-nav-list .footer-nav-item:not(:last-child) {
  border-right: 1px solid var(--clr-neutral-900);
  padding-right: 1.25rem;
  display: inline-flex;
  align-items: center;
}

.sec-footer .footer-nav-list .footer-nav-item {
  max-height: 1.25rem;
}

/* below 1200px */
@media (max-width: 75em) {
  .main-header {
    padding-inline: 30px;
    border-bottom: 1px solid var(--clr-border-800);
  }
}

/* below 1024px hamburger menu */
@media (max-width: 64em) {
	main {
    padding-top: 78px;
  }

	.logo-link .logo-img {
		width: min(40vw, 156px);
		height: min(11.538vw, 45px);
	}

  .main-header .header-nav {
    display: none;
  }

  .is-hamburger-open .main-header {
    background-color: var(--clr-neutral-100) !important;
  }

  /* Hamburger Navigation */
  .hamburger-menu {
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 8888;
    background-color: var(--clr-neutral-100);
    text-align: center;
    transform: translateX(100%);
    transform-origin: right center;
    will-change: transform;
    transition: transform 0.3s ease-in-out, opacity 0.3s 0.1s,
      visibility 0.3s;
  }

  .is-hamburger-open .hamburger-menu {
    transform: none;
    opacity: 1;
    visibility: visible;
    text-align: left;
  }

  .hamburger-menu-inner {
    padding-top: 8rem;
    padding-bottom: var(--space-50);
  }

  .hamburger-menu .hamburger-menu-list {
    display: flex;
    overflow: hidden;
    padding-bottom: 0;
    flex-direction: column;
    align-items: start;
  }

  .hamburger-menu .hamburger-menu-item {
    width: 100%;
  }

  .hamburger-menu-sub-list {
    display: none;
  }

  .hamburger-menu-sub-item {
    padding-bottom: 20px;
    font-size: var(--fs-16);
    text-align: left;
    padding-left: var(--space-20);
  }

  .hamburger-menu .hamburger-menu-link {
    text-align: left;
  }

  .hamburger-menu .hamburger-menu-link:not(.menu-btn) {
    display: inline-flex;
    padding-bottom: 3.711vw;
    color: var(--clr-neutral-900);
    align-items: center;
    position: relative;
    font-size: 3.906vw;
    padding-left: 5.371vw;
  }

  .hamburger-menu .hamburger-menu-link:not(.menu-btn)::before {
    display: block;
    width: 3.32vw;
    height: 3.32vw;
    content: '';
    position: absolute;
    background-image: url(../img/common/ico_kompo_hamurger_menu.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    aspect-ratio: 1;
    top: 1.465vw;
    left: 0;
  }

  .hamburger-menu-link.js-nav-sub-trigger {
    position: relative;
  }

  .hamburger-menu-link .header-nav-link {
    padding-block: 0;
    justify-content: space-between;
  }

  .hamburger-menu-link.js-nav-sub-trigger.nav-sub-open .plus-icon::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .hamburger-menu-link.js-nav-sub-trigger.nav-sub-open .plus-icon::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  .hamburger-menu .hamburger-menu-link.btn-contact {
    font-size: var(--fs-14);
    padding: var(--space-10) var(--space-45);
    max-width: 100%;
    margin-top: var(--space-50);
  }

  .hamburger-btn {
    display: block;
    place-content: center;
    width: 43px;
    height: 49px;
    border: none;
    appearance: none;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 100vw;
    position: relative;
    margin-right: 10px;
    padding: 0;
  }

  .hamburger-btn span {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    width: 50px;
    height: 6px;
    background-color: var(--clr-secondary);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    transform-origin: center;
  }

  .hamburger-btn span:nth-child(1) {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  .hamburger-btn span:nth-child(3) {
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
  }

  .is-hamburger-open .hamburger-btn span:nth-child(1) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .is-hamburger-open .hamburger-btn span:nth-child(2) {
    opacity: 0;
  }

  .is-hamburger-open .hamburger-btn span:nth-child(3) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .hamburger-nav-sub-list .menu-btn {
    font-size: 2.93vw;
    min-width: 32.227vw;
    height: 8.789vw;
    max-width: 100%;
    position: relative;
    padding-left: 9.082vw;
  }

  .hamburger-nav-sub-list .menu-btn:after {
    right: 2.93vw;
    width: 2.051vw;
    height: 2.051vw;
  }

  .hamburger-menu .hamburger-menu-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7.813vw;
  }

  .hamburger-menu .hamburger-menu-top {
    padding-top: 10.254vw;
    padding-inline: 5.176vw;
  }
}

/* below 768px hamburger menu */
@media (max-width: 48em) {
  .hamburger-menu .hamburger-menu-link:not(.menu-btn) {
    padding-bottom: 5.067vw;
    font-size: 5.333vw;
    padding-left: 7.333vw;
  }

  .hamburger-menu .hamburger-menu-link:not(.menu-btn)::before {
    width: 4.533vw;
    height: 4.533vw;
    top: 2vw;
  }

  .hamburger-btn {
    width: 5.733vw;
    height: 6.533vw;
    margin-right: 1.333vw;
  }

  .hamburger-btn span {
    width: 6.667vw;
    height: 0.8vw;
  }

  .hamburger-nav-sub-list .menu-btn {
    font-size: 4vw;
    min-width: 44vw;
    height: 12vw;
    padding-left: 12.4vw;
  }

  .hamburger-nav-sub-list .menu-btn:after {
    right: 4vw;
    width: 2.8vw;
    height: 2.8vw;
  }

  .hamburger-menu .hamburger-menu-bottom {
    padding-top: 10.667vw;
  }

  .hamburger-menu .hamburger-menu-top {
    padding-top: 14vw;
    padding-inline: 7.067vw;
  }

  .hamburger-btn span:nth-child(1) {
    -webkit-transform: translateY(-2vw);
    transform: translateY(-2vw);
  }

  .hamburger-btn span:nth-child(3) {
    -webkit-transform: translateY(2vw);
    transform: translateY(2vw);
  }

  .hamburger-menu-inner {
      padding-top: 17.067vw;
      padding-bottom: 6.667vw;
    }
}

/* below 1024px */
@media (max-width: 64em) {
  .main-header {
    padding: 16px 30px;
  }

  .sub-ttl {
    font-size: 3.32vw;
  }

  .sub-ttl .has-bg-white {
    font-size: 3.32vw;
  }

  .consultation-ttl,
  .register-ttl {
    font-size: 3.125vw;
  }

  .sec-consultation .consultation {
    position: relative;
  }

  .sec-consultation .consultation::after {
    width: 8.008vw;
    height: 20.605vw;
    right: 0;
    top: 3.906vw;
  }

  .sec-consultation .sub-ttl::after {
    top: 43%;
    right: 25%;
  }

  .sub-ttl .has-bg-blue {
    padding-inline: 7.129vw 6.348vw;
  }

  .sub-ttl .pcnone {
    display: block;
  }

  .sec-consultation .sub-ttl span.no-line-break {
    padding-inline: 1.465vw;
  }

  .sec-consultation .sub-ttl span.sp-line-break {
    padding-inline: 1.465vw;
  }

  .card-heading {
    font-size: 3.32vw;
  }

  .card-body-ttl {
    font-size: 3.223vw;
    padding-bottom: 2.441vw;
    padding-top: 2.441vw;
  }

  .card-body {
    column-gap: 3.906vw;
    padding-inline: 2.93vw 1.953vw;
    padding-bottom: 2.051vw;
  }

  .card-body p {
    font-size: 1.758vw;
  }

  .sub-ttl span.sp-line-break {
    border-radius: 0.781vw;
    padding-inline: 1.465vw;
    margin-top: 1.172vw;
    display: inline-block;
  }

  .sub-ttl span.no-line-break {
    border-radius: 0.781vw;
    padding-inline: 1.465vw;
  }

  .curved-bg::before {
    height: 100%;
    border-radius: 19.531vw 0px 0px 0px;
  }

  .sec-register.curved-bg::before {
    height: 100%;
  }

  .footer-logo img {
    width: 27.734vw;
    height: 8.008vw;
  }
}

/* below 768px */
@media (max-width: 48em) {
  .sec-wrap {
    --max-width: 690px;
    --padding: 30px;
    margin-inline: auto;
  }

  .main-header {
    padding: 16px 15px;
  }

  .sec-footer .info-container {
    flex-direction: column;
    row-gap: 2.8vw;
    padding-bottom: 55px;
  }

  .sub-ttl {
    font-size: 5.067vw;
  }

  .sub-ttl .has-bg-white {
    font-size: 5.067vw;
  }

  .sub-ttl span.sp-line-break {
    border-radius: 1.067vw;
    padding-inline: 2vw;
    margin-top: 1.6vw;
  }

  .sub-ttl span.no-line-break {
    border-radius: 1.067vw;
    padding-inline: 2vw;
  }

  .sec-consultation .sub-ttl span.no-line-break {
    padding-inline: 0.933vw 1.067vw;
  }

  .sec-consultation .sub-ttl span.sp-line-break {
    padding-inline: 2vw;
  }

  .btn {
    font-size: 4vw;
    min-width: 92vw;
    height: unset;
    padding-block: 2.4vw;
    border: 0.533vw solid var(--clr-neutral-100);
  }

  .btn:after {
    width: 2.8vw;
    height: 2.8vw;
    right: 4vw;
  }

  .btn.btn-bg-blue:after {
    right: 5.333vw;
 }

  .sec-consultation .consultation::after {
    width: 10.8vw;
    height: 28.133vw;
    right: 0;
    top: 9.333vw;
  }

  .consultation-ttl,
  .register-ttl {
    font-size: 5.067vw;
  }

  .sec-consultation .btn {
    margin-top: 4vw;
  }

  .sec-consultation .sub-ttl::after {
    top: 43%;
    right: 8.5%;
  }

  .card-heading {
    font-size: 5.067vw;
  }

  .card-body-ttl {
    font-size: 5.067vw;
    padding-bottom: 4vw;
    padding-top: 4vw;
  }

  .card-body {
    padding-inline: 5.333vw 3.733vw;
    padding-bottom: 2.051vw;
  }

  .card-body p {
    font-size: 4.267vw;
  }

  .sec-consultation {
    padding-block: 8.4vw 10.667vw;
  }

  .consultation-ttl {
    line-height: 1.8;
  }

  .curved-bg::before {
    border-radius: 13.333vw 0px 0px 0px;
  }

  .sec-register .register {
    align-items: center;
    flex-direction: column;
    padding-top: 5.333vw;
  }

  .sec-register .register-img-wrap {
    bottom: 0;
  }

  .sec-register {
    padding-block: 8.533vw 10.667vw;
  }

  .sec-register .sub-ttl .single-line-ttl {
    padding-inline: 0.667vw;
  }

  .sec-footer .footer-nav-list {
    gap: 3.333vw;
    padding-block: 15.2vw 13.333vw;
    flex-wrap: wrap;
  }

  .sec-footer .footer-nav-list a {
    font-size: 2.933vw;
  }

  .sec-footer .footer-nav-list .footer-nav-item:not(:last-child) {
    padding-right: 3.333vw;
  }

  .sec-footer .footer-nav-list .footer-nav-item {
    max-height: 3.467vw;
  }

  .sec-footer .info-container p {
    font-size: 2.8vw;
    font-weight: 500;
    text-align: center;
  }

  .sec-footer .footer-copyright {
    font-size: 3.2vw;
    padding-block: 1.4375rem;
  }

  .sec-footer {
    padding-top: 16vw;
  }

  .footer-logo img {
    width: 37.867vw;
    height: 10.933vw;
  }

}

/* below 400px */
@media (max-width: 25rem) {
  .sec-register .sub-ttl .single-line-ttl {
    padding-inline: 0.25vw;
  }

  .sec-register .sub-ttl {
    font-size: 4vw;
  }
}

/* below 375px */
@media (max-width: 23.4375em) {
  .sec-register .sub-ttl .single-line-ttl {
    padding-inline: 1.333vw;
    font-size: 4.533vw;
  }
}