@charset "utf-8";

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

:root {
  --text-color: #002946;
  --primary-color: #EF7316;
  --secondary-color: #FFBC56;
  --gradient-color: linear-gradient(90deg,rgba(18 120 195 / 100%) 0%, rgba(15 123 85 / 100%) 100%);
  --gradient-btn: linear-gradient(90deg,rgba(39 151 226 / 100%) 0%, rgba(81 184 149 / 100%) 100%);
  --glass-color: linear-gradient(135deg,rgba(255 255 255 / 50%) 0%, rgba(255 255 255 / 30%) 100%);
  --glass-border: 1px solid rgba(255 255 255 / 60%);
  --glass-white: linear-gradient(135deg,rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 90%) 100%);
  --border-color: #002946;
  --box-shadow: 0 0 40px rgba(0 0 0 / 12%);
  --easing: cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes typography {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: -360deg;
  }
}

@keyframes case {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}

html {
  font-size: 0.0732vw;
}
@media (width < 768px) {
  html {
    font-size: 0.2666vw;
  }
}
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--text-color);
  font-family: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  -webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: 100%;
	font-weight: 400;
	line-height: 1.5;
}
p {
	margin: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol {
	margin: 0;
	padding: 0 0 0 28px;
}
dl,dt,dd {
	margin: 0;
	padding: 0;
}
figure {
	margin: 0;
	padding: 0;
}
a,
.a {
	color: var(--text-color);
  text-decoration: none;
	cursor: pointer;
  transition: .2s var(--easing);
}
a:hover,
.a:hover {
  color: #2797E2;
}
a img {
	border: none;
}
img {
  height: auto;
  max-width: 100%;
	border: 0;
	vertical-align: middle;
}
sup {
  display: inline-block;
	font-size: 0.8em;
}
em {
  font-style: normal;
}
table {
	border-collapse: collapse;
}
main {
	display: block;
}
@media (width < 768px) {
}



/* ---------------- fix */
html {
  overflow-y: scroll;
}
body.-fix {
  position: fixed;
  width: 100%;
}



/* ---------------- layout */
.l-wrap {
  padding-top: 80px;
}
main section {
  overflow: hidden;
  position: relative;
  margin-bottom: -80px;
  padding: 152px 0 203px;
  background: #fff;
  border-radius: 80px 80px 0 0;
}
.l-container {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (width < 768px) {
  main section {
    margin-bottom: -40px;
    padding: 64px 0 104px;
    border-radius: 40px 40px 0 0;
  }
  .l-container {
    padding: 0 24px;
  }
}



/* ---------------- general */
.-mobile {
  display: none;
}
@media (width < 768px) {
  .-pc {
    display: none;
  }
  .-mobile {
    display: block;
  }
}

/* btn */
.-btn {
  display: inline-block;
  position: relative;
  padding: 0 24px;
  background: linear-gradient(90deg,rgba(39 151 226 / 100%) 50%, rgba(81 184 149 / 100%) 100%);
  background-size: 200%;
  background-position: 100%;
  border-radius: 120px;
  box-shadow: 0 4px 20px rgba(16 121 140 / 40%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  line-height: 40px;
}
.-btn:hover {
  background-position: 0;
  color: #fff;
}
.-btn.-inquiry {
  width: 100%;
  max-width: 456px;
  font-size: 24px;
  line-height: 70px;
}
.-btn.-inquiry::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 32px;
  aspect-ratio: 1 / 1;
  width: 32px;
  background: url("/assets/img/lp/ico_download.svg") no-repeat center center / contain;
  translate: 0 -50%;
}
@media (width < 768px) {
  .-btn.-inquiry {
    font-size: 18px;
    line-height: 64px;
  }
  .-btn.-inquiry::after {
    right: 24px;
    width: 24px;
  }
}

/* banner */
.btn-download {
  position: fixed;
  z-index: 90;
  top: 160px;
  right: 0;
  translate: 160% 0;
  transition: .2s var(--easing);
}
.btn-download.-action {
  translate: 0 0;
}
.btn-download .-btn {
  padding: 16px 0;
  background: linear-gradient(rgba(39 151 226 / 100%) 50%, rgba(81 184 149 / 100%) 100%);
  background-size: 100% 200%;
  background-position: 0 100%;
  border-radius: 4px 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 56px;
  writing-mode: vertical-rl;
}
.btn-download .-btn:hover {
  background-position: 0 0;
}
.btn-download .-btn::after {
  content: '';
  display: inline-block;
  margin-top: 8px;
  aspect-ratio: 1 / 1;
  width: 24px;
  background: url("/assets/img/lp/ico_document.svg") no-repeat center center / contain;
}
@media (width < 768px) {
  .btn-download .-btn {
    line-height: 40px;
  }
}

/* list */
ul.-list li + li {
  margin-top: 16px;
}
ul.-list li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
}
ul.-list li::before {
  content: '';
  position: absolute;
  top: calc((1em * 1.5) / 2);
  left: 0;
  aspect-ratio: 1 / 1;
  width: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  translate: 0 -50%;
}



/* ---------------- action */
/* fade */
.-fade {
  opacity: 0;
  transition: .4s var(--easing);
}
.-fade.-action {
  opacity: 1;
}

/* fill */
.-fill {
  background: linear-gradient(90deg, #fff 50%, transparent 50%);
  background-size: 200%;
  background-position: 100%;
  transition: .4s var(--easing);
}
.-fill.-action {
  background-position: 0;
}


/* ---------------- background */
.bg-type01 {
  position: relative;
}
.bg-type01 > * {
  position: relative;
  z-index: 1;
}
.bg-type01::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  aspect-ratio: 418 / 593;
  width: 418px;
  background: url("/assets/img/lp/bg_type_01_01.svg") no-repeat left top / contain;
}
.bg-type01::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 366 / 660;
  width: 366px;
  background: url("/assets/img/lp/bg_type_01_02.svg") no-repeat right bottom / contain;
}
.bg-type02 {
  position: relative;
}
.bg-type02 > * {
  position: relative;
  z-index: 1;
}
.bg-type02::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  aspect-ratio: 734 / 996;
  width: 734px;
  background: url("/assets/img/lp/bg_type_02_01.svg") no-repeat left top / contain;
}
.bg-type03 {
  position: relative;
}
.bg-type03 > * {
  position: relative;
  z-index: 1;
}
.bg-type03::before {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 721 / 1035;
  width: 721px;
  background: url("/assets/img/lp/bg_type_03_01.svg") no-repeat right bottom / contain;
}
.bg-type04 {
  position: relative;
}
.bg-type04 > * {
  position: relative;
  z-index: 1;
}
.bg-type04::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  aspect-ratio: 721 / 1035;
  width: 721px;
  background: url("/assets/img/lp/bg_type_04_01.svg") no-repeat right top / contain;
}
.bg-type05 {
  position: relative;
}
.bg-type05 > * {
  position: relative;
  z-index: 1;
}
.bg-type05::before {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: 636 / 733;
  width: 636px;
  background: url("/assets/img/lp/bg_type_05_01.svg") no-repeat left bottom / contain;
}
@media (width < 768px) {
  .bg-type01::before,
  .bg-type01::after,
  .bg-type02::before,
  .bg-type02::after,
  .bg-type03::before,
  .bg-type03::after,
  .bg-type04::before,
  .bg-type04::after,
  .bg-type05::before,
  .bg-type05::after {
    width: 240px;
  }
}


/* ---------------- head */
.p-head {
  margin-bottom: 64px;
}
.p-head h2 {
  font-size: 64px;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}
.p-head .shoulder {
  width: fit-content;
  margin: 0 auto;
  padding-right: 41px;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.p-head .shoulder::before {
  content: '';
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: 41px;
  background: url("/assets/img/lp/shoulder_decoration.svg") no-repeat center center / contain;
  translate: 0 -24px;
}
.p-head .lead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.p-head .lead::before,
.p-head .lead::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--text-color);
}
@media (width < 768px) {
  .p-head {
    margin-bottom: 40px;
  }
  .p-head .shoulder {
    padding-right: 24px;
    font-size: 20px;
  }
  .p-head .shoulder::before {
    width: 24px;
    translate: 0 -16px;
  }
  .p-head h2 {
    font-size: 24px;
  }
  .p-head .lead {
    gap: 8px;
    font-size: 16px;
  }
  .p-head .lead::before,
  .p-head .lead::after {
    width: 32px;
  }
}



/* ---------------- inquiry */
.p-inquiry {
  max-width: 792px;
  margin: 0 auto;
  padding: 56px 24px 64px;
  background: var(--glass-white);
  border:  var(--glass-border);
  border-radius: 40px;
  box-shadow: var(--box-shadow);
}
.p-inquiry .head {
  width: fit-content;
  margin: 0 auto 40px;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-inquiry .btn {
  text-align: center;
}
.p-inquiry .btn .copy {
  position: relative;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 700;
}
.p-inquiry .btn .copy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 40px;
  background: #EF7316;
  translate: 0 -50%;
  rotate: -30deg;
}
.p-inquiry .btn .copy::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 40px;
  background: #EF7316;
  translate: 0 -50%;
  rotate: 30deg;
}
@media (width < 768px) {
  .p-inquiry {
    padding: 24px;
  }
  .p-inquiry .head {
    margin-bottom: 24px;
    font-size: 20px;
  }
}



/* ---------------- header */
header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--glass-color);
  backdrop-filter: blur(100px);
}
header .l-container {
  max-width: 1374px;
}
header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  height: 80px;
}
header .nav nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
header .nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
}
header .nav ul .a {
  font-size: 14px;
  line-height: 1.5;
}
@media (width < 1024px) {
  header {
    height: 64px;
  }
  header .l-container {
    padding: 0 16px;
  }
  header .wrap {
    display: block;
    height: auto;
  }
  header .logo {
    display: flex;
    align-items: center;
    height: 64px;
  }
  header .logo img {
    width: 238.78px;
  }
  header .btn-nav {
    position: absolute;
    top: 12px;
    right: 16px;
 }
  header .btn-nav .a {
    display: block;
    width: 40px;
    height: 40px;
    background: var(--gradient-btn);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(16 121 140 / 40%);
  }
  header .btn-nav .a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/assets/img/lp/ico_nav.svg") no-repeat center center  / contain;
  }
  header .nav {
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    height: 0;
    padding: 80px 0 40px;
    transition: opacity .4s var(--easing);
 }
  header .nav nav {
    display: block;
  }
  header .nav ul {
    display: block;
  }
  header .nav li + li {
    margin-top: 8px;
  }
  header .nav ul .a {
    display: block;
    padding: 16px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
  header .nav .btn {
    margin-top: 32px;
    text-align: center;
  }
  header .nav .btn .-btn {
    width: 240px;
    font-size: 18px;
    font-weight: 800;
    line-height: 60px;
  }
  
  /* open */
  header.-open {
    height: auto;
  }
  header.-open .nav {
    opacity: 1;
    visibility: visible;
    height: calc(100svh - 64px);
 }
  header.-open .btn-nav .a {
    background: #fff;
  }
  header.-open .btn-nav .a::after {
    background-image: url("/assets/img/lp/ico_close.svg");
  }
}



/* ---------------- footer */
footer {
  background: linear-gradient(90deg, rgba(39 151 226 / 100%) 0%, rgba(81 184 149 / 100%) 100%);
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 68px 0;
}
footer .copyright {
  color: #fff;
  font-size: 11px;
  font-weight: 400;
}
@media (width < 1024px) {
  footer .wrap {
    display: block;
    padding: 40px;
  }
  footer .logo {
    text-align: center;
  }
  footer .copyright {
    margin-top: 8px;
    text-align: center;
  }
}



/* ---------------- hero */
section.hero {
  position: relative;
  margin-bottom: 0;
  padding: 16px 0 0;
  border-radius: 0;
}
section.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 92px;
  background: url("/assets/img/lp/bg_hero_01.png") no-repeat center bottom;
  background-size: 100% 100%;
}
@media (width < 768px) {
  section.hero {
    padding-top: 24px;
  }
  section.hero::after {
    height: 40px;
  }
  .p-hero .btn .copy::before,
  .p-hero .btn .copy::after {
    height: 40px;
  }
}

.p-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 56%;
  gap: 0;
}
.p-hero .body-area {
  margin-bottom: min(190rem, 190px);
}
.p-hero h1 {
  font-family: "Noto Serif JP", serif;
  font-size: min(64rem, 64px);
  font-weight: 700;
  line-height: 1.4;
}
.p-hero h1 em {
  display: inline-block;
  padding: 0 8px;
  background: #FDD835;
  background: linear-gradient(90deg, #FDD835 50%, transparent 50%);
  background-size: 200%;
  background-position: 100%;
  line-height: min(78rem, 78px);
  transition: .4s var(--easing);
}
.-load .p-hero h1 em {
  background-position: 0;
}
.p-hero .lead {
  margin-top: min(24rem, 24px);
  font-size: min(24rem, 24px);
}
.p-hero .btn {
  width: min(314rem, 314px);
  margin-top: min(32rem, 32px);
}
.p-hero .btn .copy {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: min(16rem, 16px);
  padding-left: min(24rem, 24px);
  padding-right: min(24rem, 24px);
  font-size: min(14rem, 14px);
  font-weight: 700;
  text-align: center;
}
.p-hero .btn .copy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: min(40rem, 40px);
  background: #EF7316;
  translate: 0 -50%;
  rotate: -30deg;
}
.p-hero .btn .copy::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: min(40rem, 40px);
  background: #EF7316;
  translate: 0 -50%;
  rotate: 30deg;
}
.p-hero .btn .-btn {
  padding-left: min(32rem, 32px);
  padding-right: min(32rem, 32px);
  font-size: min(24rem, 24px);
  text-align: left;
  line-height: min(70rem, 70px);
}
.p-hero .btn .-btn::after {
  width: min(32rem, 32px);
}
.p-hero figure {
  position: relative;
  aspect-ratio: 682 / 761;
}
.p-hero figure img {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .4s var(--easing);
}
.-load .p-hero figure img {
  opacity: 1;
}
.-load .p-hero figure img:nth-child(2) {
  transition-delay: 1s;
}
.-load .p-hero figure img:nth-child(3) {
  transition-delay: 2s;
}
@media (width < 768px) {
  .p-hero .wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-hero .body-area {
    margin-bottom: 0;
  }
  .p-hero h1 {
    font-size: max(32rem, 32px);
  }
  .p-hero h1 em {
    line-height: max(46rem, 46px);
  }
  .p-hero .lead {
    margin-top: 24px;
    font-size: max(14rem, 14px);
  }
  .p-hero .btn {
    width: auto;
    margin-top: 24px;
    text-align: center;
  }
  .p-hero .btn .copy {
    margin-bottom: 16px;
    font-size: max(12rem, 12px);
  }
  .p-hero .btn .-btn {
    max-width: max(240rem, 240px);
    padding-left: max(24rem, 24px);
    padding-right: max(24rem, 24px);
    font-size: max(18rem, 18px);
    line-height: max(60rem, 60px);
  }
  .p-hero .btn .-btn::after {
    width: max(24rem, 24px);
  }
  .p-hero figure {
    width: max(240rem, 240px);
    margin: 0 auto;
  }
}



/* ---------------- lead */
section.lead {
  padding: 32px 0 180px;
  background: #FFAD34;
  border-radius: 0;
}
section.lead > * {
  position: relative;
  z-index: 1;
}
section.lead::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 43px;
  right: 0;
  aspect-ratio: 550 / 457;
  width: 550px;
  background: url("/assets/img/lp/bg_lead_01.svg") no-repeat right center / contain;
}
section.lead::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: 605 / 393;
  width: 605px;
  background: url("/assets/img/lp/bg_lead_02.svg") no-repeat right center / contain;
}
@media (width < 768px) {
  section.lead {
    padding-bottom: 104px;
  }
  section.lead::before,
  section.lead::after {
    top: auto;
    bottom: 0;
    width: 240px;
  }
}

.p-lead {
  position: relative;
  max-width: 792px;
  margin: 0 auto;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 2;
}
.p-lead::before {
  content: '';
  position: absolute;
  top: -32px;
  left: -48px;
  aspect-ratio: 1 / 1;
  width: 200px;
  background: url("/assets/img/lp/lp_lead_img_01.png") no-repeat center center / contain;
  translate: -100% 0;
}
.p-lead::after {
  content: '';
  position: absolute;
  bottom: -48px;
  right: -48px;
  aspect-ratio: 1 / 1;
  width: 200px;
  background: url("/assets/img/lp/lp_lead_img_02.png") no-repeat center center / contain;
  translate: 100% 0;
}
.p-lead em {
  display: inline-block;
  margin: 0 8px;
  padding: 0 8px;
  line-height: 1.5;
}
.p-lead em span {
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-lead em span strong {
  font-size: 40px;
  font-weight: inherit;
}
.p-lead p + p {
  margin-top: 24px;
}
@media (width < 768px) {
  .p-lead {
    font-size: 18px;
  }
  .p-lead em span strong {
    font-size: 20px;
  }
}




/* ---------------- intro */
section.intro {
  background: #FFF4E1;
}
.p-intro .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.p-intro .items .item {
  width: 376px;
  padding: 28px 24px 40px;
  background: var(--glass-color);
  border: var(--glass-border)var(--glass-border);
  backdrop-filter: blur(100px);
  box-shadow: var(--box-shadow);
  border-radius: 40px;
}
.p-intro .items figure {
  width: 140px;
  margin: 0 auto 28px;
}
.p-intro .items .head {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-intro .items .body {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.p-intro .items .body .num {
  display: inline-block;
  position: relative;
  color: var(--primary-color);
  font-family: "Oswald", sans-serif;
  font-size: 80px;
  font-weight: 500;
}
.p-intro .items .body .num .origin {
  opacity: 0;
}
.p-intro .items .body .num .action {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: right;
}
.p-intro .items .note {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  line-height: 1.5;
}
@media (width < 768px) {
  .p-intro .items {
    gap: 24px;
  }
  .p-intro .items .item {
    padding: 24px;
    border-radius: 24px;
  }
  .p-intro .items figure {
    margin-bottom: 16px;
  }
  .p-intro .items .head {
    font-size: 18px;
  }
  .p-intro .items .body {
    font-size: 24px;
  }
  .p-intro .items .body .num {
    font-size: 64px;
  }
}




/* ---------------- supervise */
.p-supervise .wrap {
  display: grid;
  grid-template-columns: 47.7% 1fr;
  gap: 64px;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.p-supervise figure img {
  border-radius: 4px;
  box-shadow: var(--box-shadow);
}
.p-supervise .body {
  position: relative;
  padding-top: 24px;
  font-weight: 400;
}
.p-supervise .body::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  width: 220px;
  background: url("/assets/img/lp/typography_supervise_01.svg") no-repeat center center / contain;
  translate: 50% -50%;
  animation: typography 24s linear infinite;
}
.p-supervise .body * {
  position: relative;
}
.p-supervise .body p + p {
  margin-top: 24px;
}
.p-supervise .head {
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.p-supervise .head .name {
  font-size: 24px;
}
@media (width < 768px) {
  .p-supervise .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-supervise .body {
    padding-top: 0;
  }
  .p-supervise .body::before {
    width: 160px;
  }
  .p-supervise .head {
    margin-bottom: 24px;
    font-size: 16px;
  }
  .p-supervise .head .name {
    font-size: 20px;
  }
}



/* ---------------- problem */
section.problem {
  background: #FFBC56;
}
.p-problem .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.p-problem .items .item:not(.-bubble) {
  padding: 32px 48px 40px;
  background: var(--glass-white);
  border: var(--glass-border);
  border-radius: 40px;
  box-shadow: var(--box-shadow);
}
.p-problem .items .wrap {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: center;
}
.p-problem .items .head-group {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.p-problem .items figure {
  margin-bottom: 16px;
}
.p-problem .items .head-group em {
  font-size: 24px;
}
.p-problem .items .-list {
  font-size: 18px;
}
.p-problem .items .item.-bubble {
  position: relative;
  padding: 32px 0 0;
}
.p-problem .items .item.-bubble::after {
  content: '';
  position: absolute;
  bottom: -124px;
  left: 50%;
  aspect-ratio: 168 / 243;
  width: 168px;
  background: url("/assets/img/lp/character_problem_01.png") no-repeat center center / contain;
  translate: -50% 0;
}
.p-problem .items .bubble {
  position: relative;
  max-width: 456px;
  margin: 0 auto;
  padding: 40px 48px;
  background: #EF7316;
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.p-problem .items .bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 144px;
  aspect-ratio: 1 / 1;
  width: 32px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: #EF7316;
}
@media (width < 1024px) {
  .p-problem .items {
    grid-template-columns: 1fr;
  }
  .p-problem .items .item.-bubble {
    margin-bottom: -124px;
  }
  .p-problem .items .item.-bubble::after {
    display: block;
    position: static;
    margin: 32px auto 0;
    translate: 0 0;
  }
}
@media (width < 767px) {
  .p-problem .items .item:not(.-bubble) {
    padding: 24px;
    border-radius: 24px;
  }
  .p-problem .items .wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-problem .items .head-group {
    font-size: 16px;
  }
  .p-problem .items .head-group em {
    font-size: 20px;
  }
  .p-problem .items .-list {
    font-size: 15px;
  }
  .p-problem .items .item.-bubble {
    margin-bottom: -65px;
    padding: 0;
  }
  .p-problem .items .bubble {
    padding: 24px;
    font-size: 16px;
  }
  .p-problem .items .bubble::after {
    left: 32px;
    width: 24px;
  }
}



/* ---------------- training */
section.training {
  background: #FFAD34;
  border-radius: 0;
}

.p-lisk .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.p-lisk .items .item {
  width: 100%;
  max-width: 376px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.p-lisk .items figure {
  margin-bottom: 16px;
}
.p-lisk .items figure img {
  border-radius: 8px;
  box-shadow: var(--box-shadow);
}
.p-lisk .items .head {
  width: fit-content;
  margin: 0 auto 16px;;
  padding: 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.p-lisk .items .head em {
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-lisk .items ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  position: relative;
  margin-top: 16px;
  padding-top: 40px;
}
.p-lisk .items ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  aspect-ratio: 28 / 25;
  width: 28px;
  background: url("/assets/img/lp/arw_white.svg") no-repeat center center / contain;
  translate: -50% 0;
}
.p-lisk .items ul li {
  position: relative;
  padding: 13px 20px 13px 32px;
  background: #FFE2B5;
  border-radius: 120px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.p-lisk .items ul li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16px;
  aspect-ratio: 1 / 1;
  width: 8px;
  background: #EF7316;
  border-radius: 50%;
  translate: 0 -50%;
}
@media (width < 768px) {
  .p-lisk .items {
    gap: 48px;
  }
  .p-lisk .items .item {
    font-size: 15px;
  }
  .p-lisk .items .head {
    font-size: 20px;
    line-height: 32px;
  }
  .p-lisk .items ul {
    margin-top: 8px;
    padding-top: 32px;
  }
  .p-lisk .items ul::before {
    width: 24px;
  }
  .p-lisk .items ul li {
    padding: 8px 16px 8px 32px;
    font-size: 15px;
  }
}

.p-cycle {
  position: relative;
  margin-top: 64px;
  padding: 40px 56px 48px;
  background: var(--glass-white);
  border: var(--glass-border);
  border-radius: 40px;
  box-shadow: var(--box-shadow);
}
.p-cycle::before {
  content: '';
  position: absolute;
  bottom: -124px;
  left: 42px;
  aspect-ratio: 142 / 200;
  width: 142px;
  background: url("/assets/img/lp/character_cycle_01.png") no-repeat center center / contain;
}
.p-cycle::after {
  content: '';
  position: absolute;
  bottom: -124px;
  right: 42px;
  aspect-ratio: 142 / 200;
  width: 142px;
  background: url("/assets/img/lp/character_cycle_02.png") no-repeat center center / contain;
}
.p-cycle .head {
  width: fit-content;
  margin: 0 auto 32px;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-cycle ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.p-cycle ul li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  width: 25px;
  height: 28px;
  background: url("/assets/img/lp/arw_orange.svg") no-repeat center center / contain;
  translate: -100% -50%;
}
.p-cycle ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100px;
  padding: 16px;
  background: #FFE2B5;
  border-radius: 120px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-cycle .summary {
  max-width: 792px;
  margin: 24px auto 0;
  padding: 40px 48px;
  background: #EF7316;
  border-radius: 40px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
@media (width < 1024px) {
  .p-cycle ul {
    grid-template-columns: 1fr;
  }
  .p-cycle ul li + li::before {
    top: -4px;
    left: 50%;
    translate: -50% -100%;
    rotate: 90deg;
  }
}
@media (width < 768px) {
  .p-cycle {
    margin-top: 40px;
    padding: 24px;
    border-radius: 24px;
  }
  .p-cycle .head {
    margin-bottom: 24px;
    font-size: 20px;
  }
  .p-cycle ul li {
    height: 48px;
    font-size: 16px;
  }
  .p-cycle .summary {
    padding: 24px;
    border-radius: 16px;
    font-size: 18px;
  }
  .p-cycle::before,
  .p-cycle::after {
    display: none;
  }
}



/* ---------------- solution */
section.solution {
  background: #FFF4E1;
}

.p-solution .solutions .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 168px;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.p-solution .solutions .item {
  position: relative;
  padding: 40px 56px 48px;
  border-radius: 40px;
}
.p-solution .solutions .item.-before {
  background: #E4DFDD;
}
.p-solution .solutions .item.-before::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -84px;
  aspect-ratio: 68 / 77.14;
  width: 68px;
  background: url("/assets/img/lp/arw_orange_large.svg") no-repeat center center / contain;
  translate: 50% -50%;
}
.p-solution .solutions .-list {
  font-size: 18px;
}
.p-solution .solutions .item.-before .-list li::before {
  background-color: var(--text-color);
}
.p-solution .solutions .head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-solution .solutions .item.-after::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-color);
  border-radius: 40px;
  backdrop-filter: blur(100px);
  box-shadow: var(--box-shadow);
}
.p-solution .solutions .item.-after::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  width: 220px;
  background: url(/assets/img/lp/typography_solution_01.svg) no-repeat center center / contain;
  translate: 50% -50%;
  animation: typography 24s linear infinite;
}
.p-solution .solutions .item.-after > * {
  position: relative;
  z-index: 2;
}
.p-solution .solutions .item.-after .head::before {
  content: '';
  display: inline-block;
  margin-right: 12px;
  aspect-ratio: 1 / 1;
  width: 36px;
  background: url("/assets/img/lp/ico_inspiration.svg") no-repeat center center / contain;
}
@media (width < 1024px) {
  .p-solution .solutions .items {
    grid-template-columns: 1fr;
    gap: 160px;
  }
  .p-solution .solutions .item.-before::after {
    top: auto;
    bottom: -80px;
    left: 50%;
    right: auto;
    translate: -50% 50%;
    rotate: 90deg;
  }
  .p-solution .solutions .item.-after::after {
    width: 160px;
  }
}
@media (width < 768px) {
  .p-solution .solutions .items {
    gap: 64px;
  }
  .p-solution .solutions .item {
    padding: 24px;
    border-radius: 24px;
  }
  .p-solution .solutions .item.-before::after {
    bottom: -32px;
    width: 32px;
  }
  .p-solution .solutions .item.-after::before {
    border-radius: 24px;
  }
  .p-solution .solutions .head {
    font-size: 18px;
  }
  .p-solution .solutions .-list {
    font-size: 15px;
  }
}

.p-solution .spiral {
  margin-top: 64px;
}
.p-solution .spiral .box + .box {
  margin-top: 152px;
}
.p-solution .spiral .box + .box::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  aspect-ratio: 68 / 77.14;
  width: 68px;
  background: url(/assets/img/lp/arw_orange_large.svg) no-repeat center center / contain;
  translate: -50% -100%;
  rotate: 90deg;
}
.p-solution .spiral .box {
  position: relative;
  background: var(--glass-color);
  border:  var(--glass-border);
  border-radius: 40px;
  backdrop-filter: blur(100px);
  box-shadow: var(--box-shadow);
}
.p-solution .spiral .box.-spiral {
  padding: 40px 24px 48px;
}
.p-solution .spiral .head {
  width: fit-content;
  margin: 0 auto 32px;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-solution .spiral .wrap {
  display: grid;
  grid-template-columns: 1fr 430px;
  align-items: center;
  gap: 64px;
  max-width: 1000px;
  margin: 0 auto;
}
.p-solution .spiral .numbers {
  counter-reset: number 0;
}
.p-solution .spiral .numbers li + li {
  margin-top: 32px;
}
.p-solution .spiral .numbers li {
  position: relative;
  padding-left: 56px;
  font-size: 24px;
  font-weight: 700;
}
.p-solution .spiral .numbers li {
  position: relative;
  padding-left: 56px;
  font-size: 24px;
  font-weight: 700;
}
.p-solution .spiral .numbers li::before {
  counter-increment: number 1;
  content: counter(number)'.';
  position: absolute;
  top: 50%;
  left: 0;
  color: var(--primary-color);
  font-family: "Oswald", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  translate: 0 -50%;
}
.p-solution .spiral .box.-result {
  padding: 40px 24px;
}
.p-solution .spiral .result {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
}
.p-solution .spiral .result li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  padding: 16px;
  background: #EF7316;
  border-radius: 40px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
@media (width < 1024px) {
  .p-solution .spiral .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-solution .spiral figure {
    max-width: 505px;
    margin: 0 auto;
  }
  .p-solution .spiral .numbers {
    width: fit-content;
    margin: 0 auto;
  }
}
@media (width < 768px) {
  .p-solution .spiral {
    margin-top: 40px;
  }
  .p-solution .spiral .box {
    padding: 24px !important;
    border-radius: 24px;
  }
  .p-solution .spiral .head {
    margin-bottom: 24px;
    font-size: 20px;
  }
  .p-solution .spiral .wrap {
    gap: 24px;
  }
  .p-solution .spiral .numbers li + li {
    margin-top: 24px;
  }
  .p-solution .spiral .numbers li {
    padding-left: 48px;
    font-size: 18px;
  }
  .p-solution .spiral .numbers li::before {
    font-size: 40px;
  }
  .p-solution .spiral .box.-result {
    margin-top: 64px;
  }
  .p-solution .spiral .box + .box::before {
    top: -32px;
    width: 32px;
    translate: -50% -50%;
  }
  .p-solution .spiral .result {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-solution .spiral .result li {
    height: 80px;
    font-size: 18px;
  }
}

.p-solution .p-inquiry {
  margin-top: 80px;
}
@media (width < 768px) {
  .p-solution .p-inquiry {
    margin-top: 40px;
  }
}



/* ---------------- feature */
section.feature {
  background: #FFAD34;
}

.p-feature .items {
  counter-reset: number 0;
}
.p-feature .items .item + .item {
  margin-top: 56px;
}
.p-feature .items .item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
}
.p-feature .items .item:nth-child(even) figure {
  order: 1;
}
.p-feature .items .item:nth-child(even) .body {
  order: 2;
}
.p-feature .items figure {
  background: var(--glass-white);
  border: var(--glass-border);
  border-radius: 40px;
  box-shadow: var(--box-shadow);
}
.p-feature .items figure img {
  border-radius: 40px;
}
.p-feature .items .body {
  position: relative;
  padding-top: 40px;
  font-size: 16px;
}
.p-feature .items .body > * {
  position: relative;
}
.p-feature .items .body::before {
  counter-increment: number 1;
  content: '0'counter(number);
  position: absolute;
  z-index: 0;
  top: 16px;
  right: 0;
  color: rgba(255 255 255 / 30%);
  font-size: 128px;
  font-weight: 700;
  line-height: 1;
}
.p-feature .items .head {
  margin-bottom: 28px;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
}
.p-feature .items .head em + em {
  margin-top: 8px;
}
.p-feature .items .head em {
  display: block;
  width: fit-content;
  padding: 0 8px;
}
.p-feature .items .head em span {
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-feature .items .body > ul.-list li {
  font-size: 18px;
}
.p-feature .items ul.-list li::before {
  background: #fff;
}
.p-feature .items .box {
  padding: 16px 56px 24px;
  border: 1px solid var(--text-color);
  border-radius: 4px;
}
.p-feature .items ul.-list + .box {
  margin-top: 16px;
}
.p-feature .items .box ul.-list li::before {
  width: 6px;
  background: var(--text-color);
}
.p-feature .items .box p {
  margin-bottom: 16px;
  font-weight: 700;
}
.p-feature .items .box ul.-list li + li {
  margin-top: 8px;
}
@media (width < 1024px) {
  .p-feature .items {
    max-width: 584px;
    margin: 0 auto;
  }
  .p-feature .items .item {
    grid-template-columns: 1fr;
  }
  .p-feature .items .item:nth-child(even) figure {
    order: 2;
  }
  .p-feature .items .item:nth-child(even) .body {
    order: 1;
  }
  .p-feature .items .body {
    padding-top: 0;
  }
}
@media (width < 768px) {
  .p-feature .items .item + .item {
    margin-top: 56px;
  }
  .p-feature .items .item {
    gap: 24px;
  }
  .p-feature .items .body {
    font-size: 15px;
  }
  .p-feature .items .body::before {
    top: -16px;
    font-size: 96px;
  }
  .p-feature .items .head {
    font-size: 20px;
    line-height: 32px;
  }
  .p-feature .items .body > ul.-list li {
    font-size: 16px;
  }
  .p-feature .items .box {
    padding: 16px;
  }
}

.p-feature + .p-functions {
  margin-top: 64px;
}
.p-functions h3 {
  margin-bottom: 48px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}
.p-functions .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-content: center;
}
.p-functions .items .item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 24px;
  font-size: 18px;
  font-weight: 700;
}
.p-functions .items figure {
  max-width: 160px;
  margin: 0 auto;
}
.p-functions .items figure img {
  border-radius: 4px;
}
.p-functions .items .head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}
.p-functions .items .head em {
  display: block;
  width: fit-content;
  padding: 0 8px;
}
.p-functions .items .head em span {
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (width < 1024px) {
  .p-functions .items {
    grid-template-columns: repeat(2, 376px);
  }
}
@media (width < 768px) {
  .p-feature + .p-functions {
    margin-top: 64px;
  }
  .p-functions h3 {
    margin-bottom: 32px;
    font-size: 18px;
  }
  .p-functions .items {
    grid-template-columns: repeat(1, 1fr);
  }
  .p-functions .items .item {
    gap: 16px;
    font-size: 15px;
  }
  .p-functions .items .head {
    font-size: 20px;
  }
}



/* ---------------- result */
section.result {
}

.p-results .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.p-results .items .item {
  width: 520px;
  padding: 40px 24px;
  background: var(--glass-color);
  border: var(--glass-border) var(--glass-border);
  backdrop-filter: blur(100px);
  box-shadow: var(--box-shadow);
  border-radius: 40px;
}
.p-results .items .head {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.p-results .items .body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 32px;
  font-weight: 700;
}
.p-results .items .num {
  font-family: "Oswald", sans-serif;
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
}
.p-results .items .arw {
  display: block;
  width: 25px;
  height: 28px;
  background: url(/assets/img/lp/arw_orange.svg) no-repeat center center / contain;
}
.p-results .items .before {
  position: relative;
}
.p-results .items .after {
  position: relative;
}
.p-results .items .after .num {
  color: var(--primary-color);
}
@media (width < 768px) {
  .p-results .items {
    display: block;
  }
  .p-results .items .item + .item {
    margin-top: 24px;
  }
  .p-results .items .item {
    width: auto;
    padding: 24px;
  }
  .p-results .items .head {
    font-size: 18px;
  }
  .p-results .items .body {
    font-size: 18px;
  }
  .p-results .items .num {
    font-size: 40px;
  }
}

/* action */
.p-results .items .arw {
  opacity: 0;
  translate: -24px 0;
  transition: .4s var(--easing);
}
.p-results .items.-action .arw {
  opacity: 1;
  translate: 0 0;
}
.p-results .items .after {
  opacity: 0;
  translate: -48px 0;
  transition: .4s var(--easing);
}
.p-results .items.-action .after {
  opacity: 1;
  translate: 0 0;
}



/* ---------------- reason */
section.reason {
  background: #FFAD34;
}

.p-reason .items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  justify-content: center;
}
.p-reason .items .item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 24px;
  font-size: 18px;
  font-weight: 700;
}
.p-reason .items figure {
  background: var(--glass-white);
  border: var(--glass-border);
  border-radius: 40px;
  box-shadow: var(--box-shadow);
}
.p-reason .items .head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}
.p-reason .items .head em {
  display: block;
  width: fit-content;
  padding: 0 8px;
}
.p-reason .items .head em span {
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-reason .items ul.-list li::before {
  background: #fff;
}
@media (width < 1272px) {
  .p-reason .items {
    grid-template-columns: repeat(2, 272px);
  }
}
@media (width < 768px) {
  .p-reason .items {
    grid-template-columns: repeat(1, 1fr);
  }
  .p-reason .items .item {
    gap: 16px;
    font-size: 15px;
  }
  .p-reason .items figure {
    max-width: 272px;
    margin: 0 auto;
  }
  .p-reason .items .head {
    font-size: 18px;
  }
}

.p-reason + .p-inquiry {
  margin-top: 80px;
}
@media (width < 768px) {
  .p-reason + .p-inquiry {
    margin-top: 40px;
  }
}



/* ---------------- support */
.p-support .box {
  overflow: hidden;
  position: relative;
  max-width: 1000px;
  margin: 64px auto 0;
  background: #FFAD34;
  border-radius: 40px;
  padding: 40px 40px 48px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 2;
}
.p-support .box::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  aspect-ratio: 434 / 380;
  width: 434px;
  background: url("/assets/img/lp/bg_support_01.svg") no-repeat right top / contain;
}
.p-support .box::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: 538 / 290;
  width: 538px;
  background: url("/assets/img/lp/bg_support_02.svg") no-repeat left bottom / contain;
}
.p-support .box > * {
  position: relative;
  z-index: 1;
}
.p-support .box p + p {
  margin-top: 24px;
}
.p-support em {
  display: inline-block;
  margin: 0 8px;
  padding: 0 8px;
  line-height: 1.5;
}
.p-support em span {
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-support em span strong {
  font-size: 40px;
  font-weight: inherit;
}
@media (width < 768px) {
  .p-support .box {
    margin-top: 40px;
    padding: 24px;
    font-size: 18px;
  }
  .p-support .box::before,
  .p-support .box::after {
    width: 240px;
  }
  .p-support .box p + p {
    margin-top: 16px;
  }
  .p-support em span strong {
    font-size: 20px;
  }
}



/* ---------------- case */
section.case {
  background: #FFF4E1;
}

.p-case {
  margin-bottom: 80px;
}
.p-case .copy {
  position: relative;
  width: fit-content;
  margin: 0 auto 48px;
  padding: 0 48px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}
.p-case .copy::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: calc(100% * 1.1);
  background: #EF7316;
  translate: 0 -50%;
  rotate: -30deg;
}
.p-case .copy::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: calc(100% * 1.1);
  background: #EF7316;
  translate: 0 -50%;
  rotate: 30deg;
}
.p-case .items {
  width: 6400px;
  margin-bottom: 120px;
}
.p-case .items .wrap {
  display: flex;
  animation: case 56s linear infinite;
}
.p-case .items .inner {
  display: flex;
  gap: 40px;
  width: fit-content;
  padding-right: 40px;
}
.p-case .items .item {
  position: relative;
  width: 376px;
  padding: 40px 40px 128px;
  background: #FFF8ED;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  font-size: 20px;
  font-weight: 500;
  will-change: transform;
}
.p-case .items .item::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 104px;
  aspect-ratio: 1 / 1;
  width: 32px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: #FFF8ED;
  translate: 0 100%;
}
.p-case .items .item:nth-child(even) {
  translate: 0 40px;
}
.p-case .items .post {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 24px;
  position: absolute;
  bottom: 24px;
  left: 40px;
}
.p-case .items .post::before {
  content: '';
  display: block;
  aspect-ratio: 1 / 1;
  background: url(/assets/img/lp/lp_problem_img_01.png) no-repeat center center / contain;
}
.p-case .items .post.-post02::before {
  background-image: url(/assets/img/lp/lp_problem_img_03.png);
}
.p-case .summary {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 56px;
  background: #FFBC56;
  border-radius: 40px;
  box-shadow: var(--box-shadow);
  font-size: 24px;
  font-weight: 700;
}
@media (width < 768px) {
  .p-case {
    margin-bottom: 64px;
  }
  .p-case .copy {
    padding: 0 32px;
    font-size: 18px;
  }
  .p-case .items {
    margin-bottom: 64px;
  }
  .p-case .items .wrap {
    animation:  case 72s linear infinite
  }
  .p-case .items .item:nth-child(even) {
    translate: 0 24px;
  }
  .p-case .items .inner {
    gap: 16px;
    padding-right: 16px;
  }
  .p-case .items .item {
    width: 188px;
    padding: 24px 24px 72px;
    font-size: 14px;
  }
  .p-case .items .post {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    bottom: 16px;
    left: 24px;
  }
  .p-case .summary {
    padding: 24px;
    border-radius: 24px;
    font-size: 18px;
  }
}



/* ---------------- price */
.p-price .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.p-price .items .item {
  width: 376px;
  font-size: 18px;
  font-weight: 500;
}
.p-price .items .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  margin-bottom: 24px;
  background: var(--glass-color);
  border: var(--glass-border) var(--glass-border);
  backdrop-filter: blur(100px);
  box-shadow: var(--box-shadow);
  border-radius: 50%;
}
.p-price .items .circle p:not(.head) {
  font-size: 48px;
  font-weight: 700;
}
.p-price .items .circle .head {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-price .items .circle .num {
  display: inline-block;
  position: relative;
  color: #EF7316;
  font-family: "Oswald", sans-serif;
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
}
.p-price .items .circle .num .origin {
  opacity: 0;
}
.p-price .items .circle .num .action {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: right;
}
.p-price .items .body p + ul {
  margin-top: 8px;
}
.p-price .items .body ul + p {
  margin-top: 24px;
}
.p-price .items .body ul.-list li + li {
  margin-top: 8px;
}
.p-price .items .body .note {
  font-size: 11px;
  font-weight: 400;
}
@media (width < 768px) {
  .p-price .items .item {
    font-size: 14px;
  }
  .p-price .items .circle {
    width: 264px;
    margin: 0 auto 24px;
  }
  .p-price .items .circle p:not(.head) {
    font-size: 24px;
  }
  .p-price .items .circle .head {
    font-size: 20px;
  }
  .p-price .items .circle .num {
    font-size: 48px;
  }
}

.p-price + .p-option {
  margin-top: 64px;
}
.p-option h3 {
  width: fit-content;
  margin: 0 auto 48px;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-option .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 40px;
}
.p-option .items {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  position: relative;
}
.p-option .items::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 104px);
  border-radius: 4px;
}
.p-option .item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 24px;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
}
.p-option .item.-head {
  height: 80px;
  margin-bottom: 24px;
  background: #FFBC56;
  border-radius: 4px;
  font-size: 18px;
}
.p-option .item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(100% - 64px);
  height: 1px;
  background: #ccc;
  translate: -50% 0;
}
.p-option .item:first-child::after,
.p-option .item:last-child::after {
  display: none;
}
.p-option .items.-head::after {
  background: #FFE2B5;
}
.p-option .items.-regular::after {
  background: #fff;
  box-shadow: var(--box-shadow);
}
.p-option .items.-regular::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  width: 220px;
  background: url(/assets/img/lp/typography_price_01.svg) no-repeat center center / contain;
  translate: 50% -50%;
  animation: typography 24s linear infinite;
}
.p-option .items.-regular .item.-head {
  background: #FC931B;
}
@media (width < 1024px) {
  .p-option .wrap {
    gap: 8px;
  }
}
@media (width < 768px) {
  .p-option h3 {
    margin-bottom: 32px;
    font-size: 20px;
  }
  .p-option .wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-option .items {
    display: block;
  }
  .p-option .items.-head {
    display: none;
  }
  .p-option .items::after {
    height: calc(100% - 64px);
  }
  .p-option .item {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    font-size: 15px;
  }
  .p-option .item:not(.-head)::before {
    content: attr(data-head);
    display: block;
    font-weight: 700;
  }
  .p-option .item.-head {
    height: 48px;
    margin-bottom: 16px;
    font-size: 16px;
  }
  .p-option .items.-regular::before {
    width: 160px;
  }
}

.p-option + .p-ticket {
  margin-top: 64px;
}
.p-ticket h3 {
  width: fit-content;
  margin: 0 auto 48px;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-ticket .table {
  display: grid;
  grid-template-columns: 1fr;
}
.p-ticket .table .group {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4;
  align-items: center;
}
.p-ticket .table .group:nth-child(odd) {
  background: #FFE2B5;
  border-radius: 4px;
}
.p-ticket .table dt,
.p-ticket .table dd {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}
.p-ticket .table .group.-head {
  padding: 12px 0;
  background: #FFAD34;
}
.p-ticket .table .group.-head dt + dt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--text-color);
}
@media (width < 1024px) {
  .p-ticket .table .group {
    display: block;
    padding: 16px 24px;
  }
  .p-ticket .table dt {
    border-bottom: 1px solid #ccc;
    color: var(--primary-color);
    font-weight: 700;
  }
  .p-ticket .table dd {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .p-ticket .table dd::before {
    content: attr(data-head);
    display: block;
    font-weight: 700;
  }
  .p-ticket .table dd + dd {
    border-top: 1px solid #ccc;
  }
  .p-ticket .table .group.-head {
    display: none;
  }
}
@media (width < 768px) {
  .p-ticket h3 {
    margin-bottom: 32px;
    font-size: 20px;
  }
  .p-ticket .table dd {
    font-size: 15px;
  }
}



/* ---------------- faq */
section.faq {
  background: #FFF4E1;
}

.p-faq .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}
.p-faq .p-head .shoulder {
  margin-left: 0;
}
.p-faq .p-head h2 {
  padding-left: 41px;
  text-align: left;
}
.p-faq .message {
  position: relative;
  max-width: 456px;
  padding-bottom: 224px;
}
.p-faq .message::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  aspect-ratio: 168 / 180;
  width: 160px;
  background: url("/assets/img/lp/character_faq_01.png") no-repeat center center / contain;
  translate: -50% 0;
}
.p-faq .message .bubble {
  position: relative;
  padding: 40px 48px;
  background: #EF7316;
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.p-faq .message .bubble::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 144px;
  aspect-ratio: 1 / 1;
  width: 32px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: #EF7316;
  translate: 0 100%;
}
.p-faq .items .item + .item {
  margin-top: 24px;
}
.p-faq .items .item {
  padding: 0 24px;
  background: var(--glass-white);
  border: var(--glass-border);
  border-radius: 4px;
  box-shadow: var(--box-shadow);
}
.p-faq .items .item dt .a {
  display: block;
  position: relative;
  padding: 24px 40px; 24px 36px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.p-faq .items .item dt .a:hover {
  color: var(--primary-color);
}
.p-faq .items .item dt .a::before {
  content: 'Q.';
  position: absolute;
  top: 50%;
  left: 0;
  color: var(--primary-color);
  font-family: "Oswald", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  translate: 0 -50%;
}
.p-faq .items .item dt .a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  aspect-ratio: 22.31 / 12.58;
  width: 22.31px;
  background: url("/assets/img/lp/arw_faq.svg") no-repeat center center / contain;
  translate: 0 -50%;
  transition: .2s var(--easing);
}
.p-faq .items .item dt .a.-on::after {
  rotate: -180deg;
}
.p-faq .items .item dd {
  display: none;
  padding: 16px 16px 24px;
  border-top: 1px solid #ccc;
  font-weight: 400;
}
@media (width < 768px) {
  .p-faq .wrap {
    grid-template-columns: 1fr;
  }
  .p-faq .p-head .shoulder {
    margin-left: auto;
  }
  .p-faq .p-head h2 {
    padding-left: 0;
    text-align: center;
  }
  .p-faq .message {
    padding-bottom: 184px;
  }
  .p-faq .message .bubble {
    padding: 24px;
    font-size: 16px;
  }
  .p-faq .message .bubble::after {
    left: 48px;
  }
  .p-faq .items .item dt .a {
    font-size: 15px;
  }
}



/* ---------------- inquiry */
.p-form .head-group {
  display: grid;
  grid-template-columns: 688px 1fr;
  gap: 40px;
  margin-bottom: 64px;
}
.p-form .p-head {
  margin-bottom: 0;
}
.p-form .p-head .shoulder {
  margin-left: 0;
}
.p-form .p-head h2 {
  padding-left: 41px;
  text-align: left;
}
.p-form .lead {
  padding-top: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.p-form .lead p + p {
  margin-top: 12px;
}
.p-form .lead em {
  color: var(--primary-color);
}
.p-form .form {
  max-width: 1000px;
  margin: 0 auto;
}
@media (width < 1180px) {
  .p-form .head-group {
    display: block;
  }
  .p-form .p-head {
    margin-bottom: 64px;
  }
  .p-form .p-head .shoulder {
    margin-left: auto;
  }
  .p-form .p-head h2 {
    padding-left: 0;
    text-align: center;
  }
  .p-form .lead {
    padding-top: 0;
  }
}
@media (width < 768px) {
  .p-form .head-group {
    margin-bottom: 40px;
  }
  .p-form .p-head {
    margin-bottom: 40px;
  }
  .p-form .lead {
    font-size: 18px;
  }
}



/* ---------------- company */
section.company {
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
  padding: 0;
  background: #E3F2FA;
}
section.company::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  aspect-ratio: 407 / 529;
  width: 407px;
  background: url("/assets/img/lp/bg_company_01.svg") no-repeat left top / contain;
}
section.company::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 467 / 572;
  width: 467px;
  background: url("/assets/img/lp/bg_company_02.svg") no-repeat right bottom / contain;
}
section.company > .inner {
  position: relative;
  z-index: 1;
  padding: 152px 0 123px;
  background: var(--glass-color);
  border: var(--glass-border) var(--glass-border);
  backdrop-filter: blur(100px);
  box-shadow: var(--box-shadow);
}
@media (width < 768px) {
  section.company > .inner {
    padding: 64px 0;
  }
  section.company::before,
  section.company::after {
    width: 240px;
  }
}

.p-company {
  max-width: 675px;
  margin: 0 auto;
}
.p-company .head-group {
  margin-bottom: 64px;
}
.p-company .head-group .shoulder {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.p-company .head-group .shoulder::before,
.p-company .head-group .shoulder::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--text-color);
}
.p-company .body-group .wrap {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.p-company .body-group .head {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.p-company .body-group .h {
  margin: 16px 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.p-company .body-group ul.-list {
  font-size: 16px;
}
.p-company .body-group ul.-list li + li {
  margin-top: 8px;
}
.p-company .body-group ul.-list li::before {
  background: #0767B1;
}
@media (width < 768px) {
  .p-company .head-group {
    margin-bottom: 40px;
  }
  .p-company .head-group .shoulder {
    gap: 8px;
    font-size: 16px;
  }
  .p-company .head-group .shoulder::before,
  .p-company .head-group .shoulder::after {
    width: 32px;
  }
  .p-company .body-group .wrap {
    display: block;
  }
  .p-company .body-group .inquiry {
    margin-top: 40px;
  }
  .p-company .body-group .head {
    font-size: 20px;
  }
  .p-company .body-group .h {
    font-size: 16px;
  }
  .p-company .body-group ul.-list {
    font-size: 15px;
  }
}