@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
  --black: #0B0D10;
  --orange: #EC691A;
  --beige: #F3F0EE;
  --gray: #CACACA;
  --link: #154E97;
  --easing: cubic-bezier(0.33, 1, 0.68, 1);
}

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

html {
  font-size: .0694vw;
}
@media (width < 768px) {
  html {
    font-size: .2664vw;
  }
}

body {
	margin: 0;
	padding: 0;
	background: url("/assets/img/bg_texture.png") var(--beige);
	color: var(--black);
  font-family: "Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 15rem;
	font-weight: 400;
	line-height: 1.75;
  letter-spacing: .05em;
	-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 24rem;
}
dl,dt,dd {
	margin: 0;
	padding: 0;
}
figure {
	margin: 0;
	padding: 0;
}
em {
  font-style: normal;
}
a,
.a {
	color: var(--link);
  text-decoration: underline;
	cursor: pointer;
  transition: .2s var(--easing);
}
a:hover,
.a:hover {
  text-decoration: none;
}
a img {
	border: none;
}
img {
  width: 100%;
  height: auto;
	border: 0;
	vertical-align: middle;
}
sup {
  display: inline-block;
	font-size: 0.8em;
}
table {
	border-collapse: collapse;
}
main {
	display: block;
}




/* ---------------- fix */
@media (width < 1180px) {
  body.-fix {
    position: fixed;
    width: 100%;
  }
}



/* ---------------- general */

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

/* text */
.-txt-right {
  text-align: right;
}
.-txt-center {
  text-align: center;
}
.-txt-black {
  color: var(--black);
}
.-txt-white {
  color: #fff;
}
.-txt-orange {
  color: var(--orange);
}

/* en */
.-en {
  font-family: "Bodoni Moda", serif;
  font-variation-settings: "opsz" 28;
  font-style: italic;
  letter-spacing: -0.03em;
}

/* note */
.note {
  font-size: 12rem;
}
.note.-mark {
  position: relative;
  width: fit-content;
  padding-left: 12rem;
}
.note.-mark::before {
  content: '※';
  position: absolute;
  left: 0;
}

/* slash */
.-shash {
  display: flex;
  gap: 8rem;
  align-items: center;
  font-size: 24rem;
  line-height: 1.5;
}
.-shash::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 24rem;
  background: url("/assets/img/ico_slash.svg") no-repeat center / contain;
}
@media (width < 768px) {
  .-shash {
    font-size: 18rem;
  }
}

/* blank */
a.-blank,
.a.-blank {
  display: inline-block;
  position: relative;
  padding-right: 22rem;
}
a.-blank::after,
.a.-blank::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  aspect-ratio: 1;
  width: 14rem;
  background: url("/assets/img/ico_blank.svg") no-repeat center / contain;
  translate: 0 -50%;
}
a.-blank.-white::after,
.a.-blank.-white::after {
  background-image: url("/assets/img/ico_blank_white.svg");
}
a.-blank.-inline,
.a.-blank.-inline {
  margin-right: 8rem;
}

/* arw */
a.-arw {
  display: block;
  position: relative;
  padding: 0 24rem 12rem 0;
  color: var(--black);
  font-size: 14rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  line-height: 1;
}
a.-arw::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background: var(--black);
}
a.-arw::after {
  content: '';
  position: absolute;
  top: calc((1em * 1) / 2);
  right: 0;
  aspect-ratio: 1;
  width: 10rem;
  background: url("/assets/img/arw_link.svg") no-repeat center / contain;
  translate: 0 -50%;
}
a.-arw:hover::before {
  animation: line .4s;
}
a.-arw.-white {
  color: #fff;
}
a.-arw.-white::before {
  background: #fff;
}
a.-arw.-white::after {
  background-image: url("/assets/img/arw_link_white.svg");
}

@keyframes line {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  48% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  52% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}


/* btn */
a.-btn {
  display: flex;
  gap: 8rem;
  align-items: center;
  justify-content: center;
  height: 50rem;
  min-width: 240rem;
  padding: 0 16rem;
  border: 1rem solid var(--black);
  border-radius: 4rem;
  background: linear-gradient(90deg, #fff 50%, var(--black) 50%);
  background-size: 216%;
  background-position: 100%;
  color: #fff;
  font-size: 16rem;
  font-weight: 500;
  text-decoration: none;
}
a.-btn .label {
  mix-blend-mode: difference;
}
a.-btn.-white {
  border-color: #fff;
  background-image: linear-gradient(90deg, var(--black) 50%, #fff 50%);
}
a.-btn:hover {
  background-position: 0%;
}

/* calendar */
a.-btn.-calendar::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_calendar.svg") no-repeat center / contain;
  mix-blend-mode: difference;
}

/* mobile */
a.-btn.-mobile::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_smartphone.svg") no-repeat center / contain;
  mix-blend-mode: difference;
}

/* phone */
a.-phone {
  display: flex;
  gap: 8rem;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50rem;
  min-width: 240rem;
  padding: 0 16rem;
  color: var(--black);
  font-size: 16rem;
  font-weight: 500;
  text-decoration: none;
}
a.-phone::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_phone.svg") no-repeat center / contain;
}
a.-phone::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1rem solid var(--black);
  border-radius: 4rem;
  transition: .2s var(--easing);
}
a.-phone:hover::after {
  border-width: 2rem;
}
a.-phone.-white {
  color: #fff;
}
a.-phone.-white::before {
  background-image: url("/assets/img/ico_phone_white.svg");
}
a.-phone.-white::after {
  border-color: #fff;
}


/* list */
ul.-list {
  display: grid;
  gap: 16rem;
}
ul.-list li {
  position: relative;
  padding-left: 16rem;
}
ul.-list li::before {
  content: '';
  position: absolute;
  top: calc((1em * 1.75) / 2);
  left: 0;
  aspect-ratio: 1;
  width: 8rem;
  border-radius: 50%;
  background: var(--orange);
  translate: 0 -50%;
}
ul.-list li ul {
  display: grid;
  gap: 8rem;
  margin-top: 8rem;
}
ul.-list li ul li::before {
  aspect-ratio: auto;
  width: 8rem;
  height: 1rem;
  border-radius: 0;
}

dl.-list {
  display: grid;
  gap: 8rem;
}
dl.-list dt {
  font-weight: 500;
}
dl.-list * + dt {
  margin-top: 8rem;
}

/* bg */
.-bg-white {
  background: #fff;
}
.-bg-black {
  background: var(--black);
}
.-bg-beige {
	background: url("/assets/img/bg_texture.png") var(--beige);
}



/* ---------------- layout */
main {
  padding-top: 96rem;
}
@media (width < 768px) {
  main {
    padding-top: 60rem;
  }
}

/* home */
.home main {
  padding-top: 0;
}

/* container */
.l-container {
  max-width: 1280rem;
  margin: 0 auto;
}
.l-container.-w1060 {
  max-width: 1060rem;
}
@media (width < 768px) {
  .l-container {
    width: auto;
    padding: 0 24rem;
  }
}

/* section */
.-section {
  padding: 140rem 0 160rem;
}
@media (width < 768px) {
  .-section {
    padding: 64rem 0;
  }
}



/* ---------------- motion */
.act-image {
  overflow: clip;
  position: relative;
}
.act-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--beige);
  transition: .4s var(--easing);
}

/* action */
.act-image.-action::after {
  translate: 100% 0;
}

/* parallax */
.act-parallax {
  overflow: clip;
  position: relative;
  view-timeline-name: --figure;
  view-timeline-axis: block;
  background: #ccc;
}
.act-parallax figure {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(100% + 240rem);
  translate: 0 -50%;
}
.act-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  translate: 0 0;
  animation: parallax linear;
  animation-timeline: --figure;
  animation-range: entry 0% exit 100%;
}
@media (width < 768px) {
  .act-parallax figure {
    height: calc(100% + 160rem);
    translate: 0 -50%;
  }
}
@keyframes parallax {
  0% {
    translate: 0 -120rem;
  }
  100% {
    translate: 0 120rem;
  }
}
@keyframes parallax-mobile {
  0% {
    translate: 0 -60rem;
  }
  100% {
    translate: 0 60rem;
  }
}



/* ---------------- header */
header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
}

/* p-header */
.p-header {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 80rem;
  padding: 0 32rem;
  transition: .2s var(--easing);
}
.p-header .container {
  display: flex;
  gap: 40rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.p-header .logo {
  width: 168rem;
}
.p-header .nav-container .wrap {
  display: flex;
  gap: 32rem;
  align-items: center;
}
.p-header .nav {
  display: flex;
  gap: 24rem;
  align-items: center;
}
.p-header .nav a {
  color: var(--black);
  font-size: 14rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
}
.p-header .nav a:hover {
  opacity: .4;
}
.p-header .sns {
  display: flex;
  gap: 16rem;
  align-items: center;
}
.p-header .sns a {
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_instagram.svg") no-repeat center / contain;
}
.p-header .sns a.facebook {
  background-image: url("/assets/img/ico_facebook.svg");
}
.p-header .sns a.youtube {
  background-image: url("/assets/img/ico_youtube.svg");
}
.p-header .btns {
  display: flex;
  gap: 24rem;
  align-items: center;
}
.p-header .btns li > .time {
  display: none;
}
.p-header .btns .-btn {
  font-size: 14rem;
  height: 32rem;
  min-width: 150rem;
}
.p-header .btns .-btn::before {
  width: 14rem;
}
.p-header .btns .-phone {
  height: 32rem;
  font-size: 14rem;
}
.p-header .btns .-phone::before {
  width: 14rem;
}
.p-header .-phone .label {
  display: flex;
}
.p-header .-phone .label .time {
  position: relative;
  margin-left: 12rem;
  padding-left: 12rem;
}
.p-header .-phone .label .time::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;
  height: 14rem;
  background: var(--black);
  translate: 0 -50%;
}
@media (width < 768px) {
  .p-header {
    height: 60rem;
    padding: 0 16rem;
  }
  .p-header .logo {
    width: 147rem;
  }
  .p-header .nav-container {
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    padding: 0 24rem;
    background: var(--black);
    color: #fff;
    transition: .2s var(--easing);
  }
  .p-header .nav-container .wrap {
    overflow: auto;
    display: grid;
    gap: 48rem;
    max-height: 100%;
    padding: 24rem 0;
  }
  .p-header .nav {
    display: grid;
    gap: 32rem;
  }
  .p-header .nav li {
    display: flex;
    justify-content: center;
  }
  .p-header .nav a {
    color: #fff;
    font-size: 16rem;
  }
  .p-header .nav .-blank::after {
    background-image: url("/assets/img/ico_blank_white.svg");
  }
  .p-header .sns {
    gap: 24rem;
    justify-content: center;
  }
  .p-header .sns a.instagram {
    background-image: url("/assets/img/ico_instagram_white.svg");
  }
  .p-header .sns a.facebook {
    background-image: url("/assets/img/ico_facebook_white.svg");
  }
  .p-header .sns a.youtube {
    background-image: url("/assets/img/ico_youtube_white.svg");
  }
  .p-header .btns {
    display: grid;
    gap: 32rem;
  }
  .p-header .btns .-btn {
    font-size: 14rem;
    height: 32rem;
    min-width: 150rem;
  }
  .p-header .btns .-btn {
    height: 50rem;
    min-width: 240rem;
    font-size: 16rem;
    background-image: linear-gradient(90deg, var(--black) 50%, #fff 50%);
  }
  .p-header .btns .-btn::before {
    width: 20rem;
  }
  .p-header .btns li > .time {
    display: flex;
    gap: 8rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rem;
  }
  .p-header .btns li > .time::before,
  .p-header .btns li > .time::after {
    content: '';
    display: block;
    width: 24rem;
    height: 1rem;
    background: #fff;
  }
  .p-header .btns .-phone {
    height: 50rem;
    color: #fff;
  }
  .p-header .btns .-phone::before {
    width: 20rem;
    background-image: url("/assets/img/ico_phone_white.svg");
  }
  .p-header .btns .-phone::after {
    border-color: #fff;
  }
  .p-header .btns .-phone .time {
    display: none;
  }
  .p-header .btn-nav {
    position: absolute;
    top: 50%;
    right: 16rem;
    translate: 0 -50%;
  }
  .p-header .btn-nav .a {
    display: grid;
    place-items: center;
    position: relative;
    aspect-ratio: 1;
    width: 32rem;
    border-radius: 4rem;
    background: var(--black);
    transition: .2s var(--easing);
  }
  .p-header .btn-nav .a span {
    display: block;
    grid-area: 1 / 1;
    width: 16rem;
    height: 1rem;
    background: #fff;
    transition: .2s var(--easing);
  }
  .p-header .btn-nav .a span:nth-child(1) {
    translate: 0 -6rem;
  }
  .p-header .btn-nav .a span:nth-child(3) {
    translate: 0 6rem;
  }
}

/* scroll */
.p-header.-scroll {
  background: #fff;
}

/* open */
@media (width < 768px) {
  .p-header.-open {
    background: #fff;
  }
  .p-header.-open .nav-container {
    opacity: 1;
    visibility: visible;
  }
  .p-header.-open .btn-nav .a {
    background: #fff;
  }
  .p-header.-open .btn-nav .a span {
    background: var(--black);
  }
  .p-header.-open .btn-nav .a span:nth-child(1) {
    translate: 0;
    rotate: -45deg;
  }
  .p-header.-open .btn-nav .a span:nth-child(2) {
    opacity: 0;
  }
  .p-header.-open .btn-nav .a span:nth-child(3) {
    translate: 0;
    rotate: 45deg;
  }
}



/* ---------------- footer */
footer {
  position: relative;
  padding: 120rem 0 140rem;
  background: var(--black);
  color: #fff;
}
footer::before {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 810 / 640;
  width: 810rem;
  background: url("/assets/img/bg_footer.svg") no-repeat right bottom / contain;
}
footer a {
  color: #fff;
  text-decoration: none;
}
@media (width < 768px) {
  footer {
    padding: 64rem 0;
  }
  footer::before {
    width: 320rem;
  }
}

/* p-footer */
.p-footer {
  display: grid;
  gap: 40rem;
  position: relative;
  z-index: 1;
}
.p-footer {
  display: grid;
  gap: 40rem;
}
.p-footer .top-container {
  display: grid;
  grid-template-columns: 400rem 1fr;
  gap: 40rem;
  align-items: start;
}
.p-footer .logo {
  width: 210rem;
}
.p-footer .facility {
  margin-top: 48rem;
  font-size: 14rem;
}
.p-footer .facility .mail {
  display: flex;
  gap: 8rem;
  align-items: center;
  margin-top: 8rem;
  font-size: 14rem;
  line-height: 1.5;
}
.p-footer .facility .mail::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_mail_white.svg") no-repeat center / contain;
}
.p-footer .nav-items {
  display: grid;
  gap: 32rem;
}
.p-footer .nav-items .item {
  display: grid;
  grid-template-columns: 86rem 1fr;
  gap: 24rem;
  align-items: center;
}
.p-footer .nav-items .head {
  font-size: 20rem;
  font-weight: 500;
  line-height: 1;
}
.p-footer .nav-items ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16rem 24rem;
}
.p-footer .nav-items ul a {
  color: #fff;
  font-size: 14rem;
}
.p-footer .nav-items ul a:hover {
  opacity: .4;
}
.p-footer .nav-items a.instagram {
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_instagram_white.svg") no-repeat center / contain;
}
.p-footer .nav-items a.facebook {
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_facebook_white.svg") no-repeat center / contain;
}
.p-footer .nav-items a.youtube {
  display: block;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/ico_youtube_white.svg") no-repeat center / contain;
}
.p-footer .btm-container {
  padding-top: 40rem;
  border-top: 1rem dotted #fff;
}
.p-footer .info-list {
  display: grid;
  gap: 8rem;
}
.p-footer .info-list .group {
  display: flex;
  gap: 8rem 16rem;
  align-items: center;
  line-height: 1.5;
}
.p-footer .info-list dt {
  font-weight: 500;
}
.p-footer .btm {
  display: flex;
  flex-wrap: wrap;
  gap: 24rem 40rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rem;
  font-size: 12rem;
}
@media (width < 768px) {
  .p-footer .top-container {
    grid-template-columns: 1fr;
  }
  .p-footer .nav-items .item {
    grid-template-columns: 1fr;
  }
  .p-footer .info-list {
    gap: 16rem;
  }
  .p-footer .info-list .group {
    display: grid;
  }
}



/* ---------------- p-btn-contact */
.p-btn-contact ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24rem 32rem;
  align-items: end;
}
.p-btn-contact ul .time {
  display: flex;
  gap: 8rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rem;
  color: #fff;
  font-size: 12rem;
}
.p-btn-contact ul .time::before,
.p-btn-contact ul .time::after {
  content: '';
  display: block;
  width: 24rem;
  height: 1rem;
  background: #fff;
}
@media (width < 768px) {
  .p-btn-contact ul {
    justify-content: center;
  }
}



/* ---------------- p-fix-banner */
.p-fix-banner {
  position: fixed;
  z-index: 200;
  bottom: 24rem;
  right: 24rem;
}
.p-fix-banner .close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  translate: 50% -50%;
}
.p-fix-banner .close .a {
  display: block;
  position: relative;
  aspect-ratio: 1;
  width: 32rem;
  border: 1rem solid #fff;
  border-radius: 50%;
  background: var(--black);
}
.p-fix-banner .close .a::before,
.p-fix-banner .close .a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 1rem;
  background: #fff;
  translate: -50% -50%;
  rotate: -45deg;
}
.p-fix-banner .close .a::after {
  rotate: 45deg;
}
.p-fix-banner .container {
  max-width: 360rem;
  background: #fff;
}
.p-fix-banner .container a {
  display: block;
  border: 2rem solid #154E97;
  color: var(--black);
  text-decoration: none;
}
.p-fix-banner .container a:hover {
  opacity: .4;
}
.p-fix-banner .head-group {
  padding: 8rem 16rem;
  background: #154E97;
  color: #fff;
}
.p-fix-banner .head-group .schedule {
  display: flex;
  gap: 8rem;
  justify-content: center;
  align-items: center;
  font-size: 12rem;
  font-weight: 500;
}
.p-fix-banner .head-group .schedule::before,
.p-fix-banner .head-group .schedule::after {
  content: '';
  display: block;
  width: 16rem;
  height: 1rem;
  background: #fff;
  line-height: 1;
}
.p-fix-banner .head-group .schedule em {
  font-size: 16rem;
}
.p-fix-banner .head-group .head {
  display: grid;
  grid-template-columns: 44rem auto;
  gap: 8rem;
  justify-content: center;
  align-items: center;
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-fix-banner .head-group .head .price {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: #154E97;
}
.p-fix-banner .head-group .head .note {
  font-size: 14rem;
}
.p-fix-banner .body-group {
  padding: 8rem 24rem;
  font-size: 12rem;
}
.p-fix-banner .body-group .copy {
  display: flex;
  gap: 8rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
  color: #154E97;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-fix-banner .body-group .copy::before,
.p-fix-banner .body-group .copy::after {
  content: '';
  display: block;
  width: 24rem;
  height: 1rem;
  background: #154E97;
  rotate: 45deg;
}
.p-fix-banner .body-group .copy::after {
  rotate: -45deg;
}
@media (width < 768px) {
  .p-fix-banner .container {
    max-width: calc(100svw - 48rem);
  }
  .p-fix-banner .head-group .schedule::before,
  .p-fix-banner .head-group .schedule::after {
    display: none;
  }
  .p-fix-banner .body-group .copy::before,
  .p-fix-banner .body-group .copy::after {
    display: none;
  }
}

/* none */
.p-fix-banner.-none {
  display: none;
}



/* ---------------- p-page-container */
.p-page-container {
  padding: 64rem 0 140rem;
}



/* ---------------- p-article */
.p-article {
  display: grid;
  gap: 24rem;
}
.p-article h2 {
  font-size: 24rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-article h3 {
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-article * + h2 {
  margin-top: 24rem;
}
.p-article * + h3 {
  margin-top: 8rem;
}
@media (width < 768px) {
  .p-article h2 {
    font-size: 20rem;
  }
  .p-article h3 {
    font-size: 18rem;
  }
}



/* ---------------- p-update */
.p-update {
  margin-top: 16rem;
  padding-top: 40rem;
  border-top: 1rem dotted var(--black);
}



/* ---------------- p-head-container */
.p-head-container {
  margin-bottom: 80rem;
  text-align: center;
}
.p-head-container h1 {
  color: var(--orange);
  font-size: 80rem;
  line-height: 1;
}
.p-head-container .shoulder {
  margin-top: 24rem;
  font-size: 28rem;
  font-weight: 500;
  line-height: 1.5;
}
@media (width < 768px) {
  .p-head-container {
    margin-bottom: 64rem;
    text-align: center;
  }
  .p-head-container h1 {
    font-size: 40rem;
  }
  .p-head-container .shoulder {
    margin-top: 16rem;
    font-size: 20rem;
  }
}



/* ---------------- p-hero-trial */
.p-hero-trial .container {
  display: grid;
  grid-template-columns: 630rem 1fr;
  gap: 40rem 110rem;
  align-items: start;
  padding: 16rem 0 80rem;
}
.p-hero-trial .body-container {
  margin-top: 48rem;
}
.p-hero-trial .head-group {
  margin-bottom: 48rem;
}
.p-hero-trial .head-group h1 {
  color: var(--orange);
  font-size: 80rem;
  line-height: 1;
}
.p-hero-trial .head-group .shoulder {
  margin-top: 24rem;
  font-size: 28rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-hero-trial .body-group {
  max-width: 510rem;
}
.p-hero-trial .body-group .lead {
  margin-bottom: 24rem;
  font-size: 20rem;
  font-weight: 500;
}
@media (width < 768px) {
  .p-hero-trial .container {
    grid-template-columns: 1fr;
    padding: 0 0 64rem;
  }
  .p-hero-trial .body-container {
    margin-top: 0;
    padding: 0 24rem;
  }
  .p-hero-trial .head-group {
    margin-bottom: 40rem;
  }
  .p-hero-trial .head-group h1 {
    font-size: 40rem;
  }
  .p-hero-trial .head-group .shoulder {
    margin-top: 16rem;
    font-size: 20rem;
  }
  .p-hero-trial .body-group .lead {
    font-size: 18rem;
  }
}



/* ---------------- p-head-group */
.p-head-group {
  margin-bottom: 40rem;
}
.p-head-group h2 {
  color: var(--orange);
  font-size: 80rem;
  line-height: 1;
}
.p-head-group .shoulder {
  margin-top: 24rem;
  text-align: left;
}
@media (width < 768px) {
  .p-head-group h2 {
    font-size: 40rem;
  }
  .p-head-group .shoulder {
    margin-top: 16rem;
  }
}

/* center */
.p-head-group.-center h2 {
  text-align: center;
}
.p-head-group.-center .shoulder {
  justify-content: center;
}

/* multi */
.p-head-group h2.-multi span {
  display: block;
}
.p-head-group h2.-multi span + span {
  margin: 8rem 0 0 180rem;
}
@media (width < 768px) {
  .p-head-group h2.-multi span + span {
    margin-left: 64rem;
  }
}



/* ---------------- p-flow */
.p-flow .container {
  display: grid;
  grid-template-columns: 550rem 1fr;
  grid-template-rows: auto 1fr;
  gap: 80rem 110rem;
  align-items: start;
}
.p-flow .p-head-group {
  margin-bottom: 0;
}
.p-flow .body-container {
  grid-row: span 2;
}
.p-flow .flow {
  display: grid;
  gap: 92rem;
}
.p-flow .flow .item {
  display: grid;
  grid-template-columns: 196rem 1fr;
  gap: 24rem;
  align-items: start;
  position: relative;
}
.p-flow .flow .item + .item::before {
  content: '';
  position: absolute;
  top: -46rem;
  left: 50%;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/arw_flow.svg") no-repeat center / contain;
  translate: 0 -50%;
}
.p-flow .flow .number {
  display: flex;
  gap: 8rem;
  align-items: center;
  margin-bottom: 24rem;
  color: var(--orange);
  font-size: 14rem;
  line-height: 1.5;
}
.p-flow .flow .number::before {
  content: '';
  display: block;
  width: 24rem;
  height: 1rem;
  background: var(--orange);
}
.p-flow .flow .head {
  margin-bottom: 16rem;
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-flow .information {
  padding: 32rem 48rem;
  background: var(--beige);
}
.p-flow .information dl {
  display: grid;
  grid-template-columns: 120rem 1fr;
  font-weight: 500;
}
.p-flow .information dt,
.p-flow .information dd {
  padding: 16rem 24rem;
  border-top: 1rem dotted var(--gray);
}
.p-flow .information dt:nth-of-type(1),
.p-flow .information dd:nth-of-type(1) {
  border-top: none;
}
.p-flow .information dt {
  display: flex;
  align-items: center;
}
@media (width < 768px) {
  .p-flow .container {
    grid-template-columns: 1fr;
    grid-auto-rows: none;
    gap: 40rem;
  }
  .p-flow .flow {
    gap: 64rem;
  }
  .p-flow .flow .item + .item::before {
    top: -32rem;
  }
  .p-flow .flow .item {
    grid-template-columns: 96rem 1fr;
  }
  .p-flow .flow .number {
    margin-bottom: 8rem;
  }
  .p-flow .flow .head {
    margin-bottom: 8rem;
    font-size: 16rem;
  }
  .p-flow .information {
    padding: 16rem 24rem;
  }
  .p-flow .information dl {
    grid-template-columns: 1fr;
  }
  .p-flow .information dt {
    padding: 16rem 16rem 0;
  }
  .p-flow .information dd {
    padding: 8rem 16rem 16rem;
    border-top: none;
  }
}



/* ---------------- p-faq */
.p-faq .container {
  display: grid;
  grid-template-columns: 1fr 840rem;
  gap: 40rem 110rem;
  padding-left: 110rem;
}
.p-faq .items {
  display: grid;
  gap: 40rem;
}
.p-faq .items .item {
  padding: 0 40rem;
  background: #fff;
  border-radius: 4rem;
}
.p-faq .items .faq-q {
  padding: 32rem 0;
}
.p-faq .items .faq-q .a {
  display: block;
  position: relative;
  padding-right: 32rem;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  line-height: 1.5;
}
.p-faq .items .faq-q .a::before,
.p-faq .items .faq-q .a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 16rem;
  height: 1rem;
  background: var(--black);
}
.p-faq .items .faq-q .a::after {
  rotate: 90deg;
  transition: .4s var(--easing);
}
.p-faq .items .faq-q .a:hover {
  opacity: .4;
}
.p-faq .items .faq-q p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8rem;
  align-items: center;
}
.p-faq .items .faq-q p::before {
  content: 'Q';
  color: var(--orange);
  font-size: 20rem;
}
.p-faq .items .faq-a {
  display: none;
  padding: 32rem 24rem;
  border-top: 1rem dotted var(--gray);
  font-size: 14rem;
}
@media (width < 768px) {
  .p-faq .container {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .p-faq .p-head-group {
    margin-bottom: 0;
  }
  .p-faq .items {
    gap: 24rem;
  }
  .p-faq .items .item {
    padding: 0 24rem;
  }
  .p-faq .items .faq-q {
    padding: 24rem 0;
  }
  .p-faq .items .faq-q p {
    gap: 16rem;
  }
  .p-faq .items .faq-a {
    padding: 24rem 0;
  }
}

/* active */
.p-faq .items .faq-q .a.-active::after {
  opacity: 0;
}



/* ---------------- p-reserve */
.p-reserve {
  padding: 120rem 0 140rem;
  background: url("/assets/img/bg_reserve.jpg") no-repeat center / cover var(--black);
  color: #fff;
  text-align: center;
}
.p-reserve .container {
  max-width: 620rem;
  margin: 0 auto;
}
.p-reserve .flow {
  display: flex;
  gap: 94rem;
  align-items: center;
  justify-content: center;
  margin-top: 64rem;
}
.p-reserve .flow .item {
  position: relative;
}
.p-reserve .flow .item + .item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -47rem;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/arw_flow.svg") no-repeat center / contain;
  translate: -50% -50%;
  rotate: -90deg;
}
.p-reserve .flow .number {
  font-size: 14rem;
  line-height: 1.5;
}
.p-reserve .reserve-container .btn {
  max-width: 300rem;
  margin: 24rem auto 16rem;
}
.p-reserve .reserve-container .note {
  width: fit-content;
  margin: 0 auto;
}
.p-reserve .phone-container {
  margin-top: 64rem;
  padding-top: 64rem;
  border-top: 1rem dotted #fff;
}
.p-reserve .phone-container .head {
  display: flex;
  gap: 8rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rem;
}
.p-reserve .phone-container .head::before,
.p-reserve .phone-container .head::after {
  content: '';
  display: block;
  width: 24rem;
  height: 1rem;
  background: #fff;
}
.p-reserve .phone-container .btn {
  max-width: 240rem;
  margin: 0 auto 16rem;
}
.p-reserve .phone-container .note {
  width: fit-content;
  margin: 0 auto;
}
@media (width < 768px) {
  .p-reserve {
    padding: 64rem 24rem;
  }
  .p-reserve .flow {
    display: grid;
    gap: 64rem;
    margin-top: 40rem;
  }
  .p-reserve .flow .item + .item::before {
    top: -32rem;
    left: 50%;
    rotate: 0deg;
  }
  .p-reserve .reserve-container .btn {
    margin-top: 40rem;
  }
  .p-reserve .phone-container {
    margin-top: 40rem;
    padding-top: 40rem;
  }
}



/* ---------------- p-home */
.p-home-effect {
  overflow: clip;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* copy */
.p-home-effect .copy {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.p-home-effect .copy p {
  display: flex;
  gap: 1em;
  width: fit-content;
  padding: 0 .5em;
  font-size: 100rem;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  translate: 0%;
  animation: txt 24s linear infinite;
}
@keyframes txt {
  0% {
    translate: 0%;
  }
  100% {
    translate: -50%;
  }
}
@media (width < 768px) {
  .p-home-effect .copy p {
    font-size: 32rem;
  }
}

/* img */
.p-home-effect .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  width: auto;
  min-width: 100svw;
  min-height: 100svh;
  clip-path: circle(0% at 50% 50%);
  translate: -50% -50%;
  transition: .8s var(--easing);
}
.p-home-effect.-active .img img {
  clip-path: circle(70.8% at 50% 50%);
}
@media (width < 768px) {
  .p-home-effect .img img {
    transition: 1.6s var(--easing);
  }
}

/* contents */
.p-home-container {
  position: relative;
  z-index: 1;
}

/* trigger */
.p-home-effect-trigger {
  height: 800rem;
}
@media (width < 768px) {
  .p-home-effect-trigger {
    height: 400rem;
  }
}



/* ---------------- p-hero */
.p-hero {
  position: relative;
  padding-top: 96rem;
  padding-bottom: 140rem;
}
.p-hero .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}
.p-hero .body-container {
  padding: 0 40rem 56rem 0;
}
.p-hero .p-hero-image {
  position: sticky;
  top: 96rem;
}
@media (width < 768px) {
  .p-hero {
    padding-top: 84rem;
    padding-bottom: 64rem;
  }
  .p-hero .container {
    grid-template-columns: 1fr;
    gap: 72rem;
  }
  .p-hero .body-container {
    padding: 0;
  }
}

/* hero */
.p-hero .hero-section {
  position: relative;
  padding: 120rem 0 140rem 80rem;
  text-align: center;
}
.p-hero .hero-section .subtitle {
  display: flex;
  position: absolute;
  top: 165rem;
  left: 24rem;
  font-size: 14rem;
  font-weight: 500;
  writing-mode: vertical-rl;
}
.p-hero .hero-section .subtitle .en {
  margin-top: 12rem;
  padding-top: 12rem;
  border-top: 1rem solid var(--black);
}
.p-hero .hero-section .title img {
  max-width: 574.91rem;
}
.p-hero .hero-section .shoulder {
  margin-top: 16rem;
  font-size: 28rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.p-hero .p-btn-contact {
  margin-top: 64rem;
}
.p-hero .p-btn-contact ul {
  width: fit-content;
  margin: 0 auto;
}
.p-hero .p-btn-contact .note-group {
  margin-top: 16rem;
  text-align: left;
}
.p-hero .p-btn-contact .note-group .note {
  width: fit-content;
  margin: 0 auto;
}
.p-hero .link-group {
  margin-top: 48rem;
}
.p-hero .link-group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 32rem;
  justify-content: center;
}
.p-hero .link-group li {
  width: 240rem;
}
.p-hero .link-group .-blank {
  display: inline-block;
  position: relative;
  padding-right: 22rem;
}
.p-hero .link-group .-blank::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  aspect-ratio: 1;
  width: 14rem;
  background: url("/assets/img/ico_blank.svg") no-repeat center / contain;
  translate: 0 -50%;
}
@media (width < 768px) {
  .p-hero .hero-section {
    padding: 0 24rem;
  }
  .p-hero .hero-section .subtitle {
    display: block;
    position: static;
    margin-bottom: 24rem;
    font-size: 12rem;
    writing-mode: horizontal-tb;
  }
  .p-hero .hero-section .subtitle span {
    display: block;
  }
  .p-hero .hero-section .subtitle .en {
    margin-top: 8rem;
    padding-top: 0;
    border-top: none;
  }
  .p-hero .hero-section .shoulder {
    font-size: 18rem;
  }
  .p-hero .p-btn-contact {
    margin-top: 40rem;
  }
}

/* lead */
.p-hero .lead-section {
  padding: 120rem 0 140rem;
}
.p-hero .lead-section .body {
  display: grid;
  gap: 32rem;
  max-width: 480rem;
  margin: 0 auto;
  font-size: 18rem;
  font-weight: 500;
  line-height: 2;
}
@media (width < 768px) {
  .p-hero .lead-section {
    margin-top: 40rem;
    padding: 0 24rem;
  }
  .p-hero .lead-section .body {
    gap: 24rem;
    font-size: 15rem;
  }
}

/* img */
.p-hero-image {
  position: relative;
  aspect-ratio: 700 / 875;
}
.p-hero-image .img-group::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: -1rem;
  left: -1rem;
  width: calc(100% + 1rem);
  height: calc(100% + 2rem);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  background: var(--orange);
}
.p-hero-image .img-group li {
  overflow: clip;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p-hero-image .img-group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1;
}
.p-hero-image .marker {
  display: grid;
  gap: 8rem;
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 40rem;
}
.p-hero-image .marker .a {
  display: block;
  aspect-ratio: 1;
  width: 8rem;
  background: #fff;
}
.p-hero-image .marker .a.-active {
  background: #FFB454;
}
.p-hero-image .scroll {
  display: flex;
  gap: 8rem;
  align-items: center;
  position: absolute;
  z-index: 10;
  bottom: -46rem;
  right: 43rem;
  color: var(--black);
  font-size: 14rem;
  font-style: normal;
  line-height: 1;
  writing-mode: vertical-rl;
}
.p-hero-image .scroll::before {
  content: 'Scroll';
  display: block;
}
.p-hero-image .scroll::after {
  content: '';
  display: block;
  width: 1rem;
  height: 92rem;
  background: var(--black);
}
@media (width < 768px) {
  .p-hero-image .marker {
    right: 16rem;
  }
  .p-hero-image .scroll {
    bottom: -16rem;
    right: 16rem;
  }
  .p-hero-image .scroll::after {
    height: 32rem;
  }
}

/* active */
.p-hero-image .img-group li.-active {
  z-index: 1;
}
.p-hero-image .img-group li.-active img {
  scale: 1.1;
  transition: 8s linear;
}

/* transition */
.p-hero-image.-transition .marker .a {
  pointer-events: none;
}
.p-hero-image.-transition .img-group::after {
  animation: transition .8s;
}
@keyframes transition {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  40% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  60% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

/* copy */
.p-hero .copy {
  position: absolute;
  bottom: 0;
  left: 80rem;
  font-size: 100rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
@media (width < 768px) {
  .p-hero .copy {
    position: relative;
    top: 0;
    left: 0;
    margin-top: -16rem;
    padding: 0 24rem;
    font-size: 34rem;
  }
}



/* ---------------- p-about */
.p-about {
  padding: 140rem 0 140rem;
}
.p-about .head-container {
  display: grid;
  grid-template-columns: 440rem 1fr;
  gap: 40rem 110rem;
  align-items: start;
  margin-bottom: 80rem;
}
.p-about .head-container .p-head-group {
  margin-bottom: 0;
}
.p-about .body-container {
  display: grid;
  grid-template-columns: 1fr 510rem;
  gap: 40rem 110rem;
  align-items: start;
}
.p-about .body-container .body {
  display: grid;
  gap: 24rem;
  max-width: 400rem;
  margin-left: 110rem;
  padding-top: 80rem;
}
.p-about .body-container .img-group {
  position: relative;
  aspect-ratio: 510 / 500;
}
.p-about .body-container .img-group .img01 {
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 290 / 435;
  width: 56.86%;
}
.p-about .body-container .img-group .img02 {
  position: absolute;
  bottom: 0;
  left: 0;
  aspect-ratio: 1;
  width: 56.86%;
}
@media (width < 768px) {
  .p-about {
    padding: 0 0 64rem;
  }
  .p-about .head-container {
    grid-template-columns: 1fr;
    margin-bottom: 40rem;
  }
  .p-about .body-container {
    grid-template-columns: 1fr;
  }
  .p-about .body-container .body {
    margin: 0;
    padding: 0;
  }
}



/* ---------------- p-feature */
.p-feature {
  padding: 0 0 140rem;
}
.p-feature .head-container {
  max-width: 1060rem;
  margin: 0 auto 64rem;
}
.p-feature .head-container .body-group {
  display: grid;
  grid-template-columns: 1fr 440rem;
  gap: 40rem 110rem;
  margin-top: 80rem;
  padding-left: 110rem;
}
.p-feature .body-container {
  display: grid;
  grid-template-columns: 520rem 510rem;
  gap: 40rem 110rem;
}
.p-feature .body-container .item {
  padding: 40rem 0 48rem;
  border-bottom: 1rem dotted var(--gray);
}
.p-feature .body-container .item .h-min {
  margin-bottom: 64rem;
  color: var(--orange);
  font-size: 16rem;
  line-height: 1.5;
}
.p-feature .body-container .item .head {
  margin-bottom: 40rem;
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-feature .body-container .item .note {
  margin-top: 16rem;
}
.p-feature .body-container.-reverse {
  grid-template-columns: 630rem 510rem;
  justify-content: end;
  margin-top: 64rem;
}
.p-feature .body-container.-reverse .body-group {
  grid-row: 1 / 2;
}
.p-feature .body-container.-reverse .item {
  border-bottom: none;
}
@media (width < 768px) {
  .p-feature {
    padding: 0 0 64rem;
  }
  .p-feature .head-container {
    padding: 0 24rem;
  }
  .p-feature .head-container .body-group {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding: 0;
  }
  .p-feature .body-container {
    grid-template-columns: 1fr;
  }
  .p-feature .body-container .items {
    padding: 0 24rem;
  }
  .p-feature .body-container .item {
    padding: 24rem 0;
  }
  .p-feature .body-container .item .h-min {
    margin-bottom: 24rem;
  }
  .p-feature .body-container .item .head {
    margin-bottom: 24rem;
    font-size: 16rem;
  }
  .p-feature .body-container.-reverse {
    grid-template-columns: 1fr;
    margin-top: 40rem;
  }
  .p-feature .body-container.-reverse .body-group {
    grid-row: auto;
  }
}



/* ---------------- p-space */
/* lead*/
.p-space .lead-container {
  position: relative;
  padding: 120rem 0 140rem;
  color: #fff;
}
.p-space .lead-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 400rem;
  background: linear-gradient(transparent, var(--black));
}
.p-space .lead-container > * {
  position: relative;
  z-index: 1;
}
.p-space .lead-container .h-min {
  margin-bottom: 362rem;
  font-size: 16rem;
  line-height: 1.5;
}
.p-space .lead-container .lead {
  max-width: 510rem;
}
@media (width < 768px) {
  .p-space .lead-container {
    padding: 64rem 0;
  }
  .p-space .lead-container .h-min {
    margin-bottom: 64rem;
  }
}

/* body */
.p-space .body-container {
  position: relative;
  background: var(--black);
  padding: 140rem 0 160rem;
  color: #fff;
}
.p-space .body-container .l-container {
  max-width: 1140rem;
}
.p-space .body-container .copy {
  display: flex;
  gap: 16rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rem;
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-space .body-container .copy::before,
.p-space .body-container .copy::after {
  content: '';
  display: block;
  width: 48rem;
  height: 1rem;
  background: #fff;
}
.p-space .body-container .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 180rem;
}
.p-space .body-container .item {
  position: relative;
  padding: 40rem 48rem 48rem;
  border: 4rem solid var(--orange);
  background: linear-gradient(90deg, #fff, #FFF2E1);
  color: var(--black);
}
.p-space .body-container .item + .item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -90rem;
  aspect-ratio: 1;
  width: 85rem;
  background: url("/assets/img/img_space_cross.svg") no-repeat center / contain;
  translate: -50% -50%;
}
.p-space .body-container .item .h-min {
  margin-bottom: 64rem;
  color: var(--orange);
  font-size: 16rem;
  line-height: 1.5;
}
.p-space .body-container .item .head {
  position: relative;
  margin-bottom: 40rem;
  padding-left: 76rem;
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-space .body-container .item .head::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  aspect-ratio: 1;
  width: 60rem;
  background: url("/assets/img/img_space_graph.svg") no-repeat center / contain;
  translate: 0 -50%;
}
.p-space .body-container .item .head.-compass::before {
  background-image: url("/assets/img/img_space_compass.svg");
}
.p-space .body-container .end {
  position: absolute;
  bottom: 32rem;
  left: calc(50% - 20rem);
  line-height: 2;
  translate: -100% 0;
}
.p-space .body-container .scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1rem;
  height: 160rem;
  border-right: 2rem dashed var(--orange);
  translate: -50% 50%;
}
.p-space .body-container .scroll::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1;
  width: 16rem;
  border-radius: 50%;
  background: var(--orange);
  translate: -50% -50%;
  animation: dot 1.2s ease-out infinite;
}
@keyframes dot {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}
@media (width < 768px) {
  .p-space .body-container {
    padding: 64rem 0;
  }
  .p-space .body-container .copy {
    margin-bottom: 40rem;
    gap: 8rem;
    font-size: 16rem;
  }
  .p-space .body-container .copy::before,
  .p-space .body-container .copy::after {
    width: 24rem;
  }
  .p-space .body-container .items {
    grid-template-columns: 1fr;
    gap: 96rem;
  }
  .p-space .body-container .item {
    padding: 24rem;
  }
  .p-space .body-container .item + .item::before {
    top: -48rem;
    left: 50%;
    width: 64rem;
  }
  .p-space .body-container .item .h-min {
    margin-bottom: 24rem;
  }
  .p-space .body-container .item .head {
    grid-template-columns: 48rem 1fr;
    margin-bottom: 24rem;
    font-size: 16rem;
  }
  .p-space .body-container .end {
    position: static;
    margin-top: 40rem;
    text-align: center;
    translate: 0;
  }
  .p-space .body-container .scroll {
    height: 80rem;
  }
}



/* ---------------- p-coaches */
.p-coaches {
  padding: 140rem 0 140rem;
}
.p-coaches .p-head-group {
  margin-bottom: 80rem;
}
.p-coaches .body-container {
  position: relative;
}
.p-coaches .body-container + .body-container {
  margin-top: 120rem;
}
.p-coaches .body-container > figure {
  position: absolute;
  top: 32rem;
  right: 70rem;
  width: 260rem;
}
.p-coaches .body-container .wrap {
  max-width: 400rem;
  margin: 0 auto;
}
.p-coaches .head-group {
  margin-bottom: 32rem;
  text-align: center;
}
.p-coaches .head-group .post {
  display: flex;
  gap: 8rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rem;
  color: var(--orange);
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-coaches .head-group .name {
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-coaches .head-group .en {
  margin-top: 16rem;
  color: #828282;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}
.p-coaches .body-group .body {
  display: grid;
  gap: 24rem;
}
.p-coaches .body-group .achievements {
  display: flex;
  gap: 8rem;
  justify-content: center;
  margin-top: 32rem;
}
@media (width < 768px) {
  .p-coaches {
    padding: 64rem 0;
  }
  .p-coaches .p-head-group {
    margin-bottom: 40rem;
  }
  .p-coaches .body-container + .body-container {
    margin-top: 64rem;
  }
  .p-coaches .body-container > figure {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto 40rem;
  }
}

/* hoshino */
.p-coaches .body-container.-hoshino > figure {
  left: 70rem;
  right: auto;
}
@media (width < 768px) {
  .p-coaches .body-container.-hoshino > figure {
    left: 0;
    right: 0;
  }
}


/* ---------------- p-visual */
.p-visual .act-parallax {
  aspect-ratio: 1440 / 800;
  width: 100%;
}


/* ---------------- p-plans */
.p-plans {
  padding: 140rem 0 140rem;
}
.p-plans ul.-list {
  gap: 8rem;
}
.p-plans .lead-container {
  display: grid;
  gap: 8rem;
  margin-bottom: 80rem;
  text-align: center;
}
.p-plans .body-container {
  display: grid;
  gap: 64rem 32rem;
}
.p-plans .items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64rem 40rem;
  padding-top: 32rem;
}
.p-plans .items .item {
  position: relative;
  padding: 0 40rem 40rem
}
.p-plans .items .item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 24rem);
  background: #fff;
}
.p-plans .items .item > * {
  position: relative;
  z-index: 1;
}
.p-plans .items .recommend {
  display: flex;
  gap: 8rem;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -12rem;
  left: 50%;
  color: var(--orange);
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.5;
  translate: -50% -100%;
}
.p-plans .items .recommend::before,
.p-plans .items .recommend::after {
  content: '';
  display: block;
  width: 24rem;
  height: 1rem;
  background: var(--orange);
}
.p-plans .items p.head {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 289rem;
  height: 56rem;
  margin: 0 auto;
  background: var(--black);
  clip-path: polygon(24rem 0, 100% 0, calc(100% - 24rem) 100%, 0 100%);
  color: #fff;
  font-size: 20rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}
.p-plans .items .price {
  margin: 48rem 0 40rem;
  font-size: 20rem;
  font-weight: 500;
  text-align: center;
  line-height: 1;
}
.p-plans .items .price .num {
  font-size: 40rem;
}
.p-plans .items .-list {
  margin-top: 24rem;
  padding-top: 24rem;
  border-top: 1rem dotted var(--gray); 
}
.p-plans .items .table {
  display: grid;
  grid-template-columns: repeat(2, auto);
  margin: 24rem 0 32rem;
  font-weight: 500;
}
.p-plans .items .table dt {
  display: flex;
  align-items: center;
  padding: 16rem 0;
  border-bottom: 1rem dotted var(--gray); 
}
.p-plans .items .table dd {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 16rem 0;
  border-bottom: 1rem dotted var(--gray); 
  text-align: right;
}
.p-plans .items .table .num {
  font-size: 24rem;
}
.p-plans .items .table dt.head,
.p-plans .items .table dd.head,
.p-plans .items .table dt:last-of-type,
.p-plans .items .table dd:last-of-type {
  border-bottom: none;
}
.p-plans .items .table dt.head,
.p-plans .items .table dd.head {
  color: #828282;
}
.p-plans .items .table dt:first-of-type,
.p-plans .items .table dd:first-of-type {
  padding-top: 0;
}
.p-plans .items .table dt:last-of-type,
.p-plans .items .table dd:last-of-type {
  padding-bottom: 0;
}
.p-plans .contact {
  margin-top: 48rem;
  font-size: 20rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}
@media (width < 768px) {
  .p-plans {
    padding: 64rem 0;
  }
  .p-plans .lead-container {
    margin-bottom: 40rem;
  }
  .p-plans .items {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .p-plans .items .item {
    padding: 0 24rem 32rem;
  }
  .p-plans .items p.head {
    width: 264rem;
    height: 48rem;
    font-size: 18rem;
  }
  .p-plans .items .price {
    margin: 24rem 0;
    font-size: 18rem;
  }
  .p-plans .items .price .num {
    font-size: 28rem;
  }
  .p-plans .items .table .num {
    font-size: 20rem;
  }
  .p-plans .contact {
    font-size: 16rem;
  }
}

/* elete */
.p-plans .items .item.-elete::before {
  border: 4rem solid var(--orange);
  background: linear-gradient(90deg, #fff, #FFF2E1);
}
.p-plans .items .-elete p.head {
  background: var(--orange);
}

/* associate */
.p-plans .items .-associate p.head {
  background: #CACACA;
  color: var(--black);
}

/* corporate */
.p-plans .items .-corporate p.head {
  background: #838588;
}
.p-plans .items .-corporate .body-group {
  max-width: 334rem;
  margin: 48rem auto 0;
}
.p-plans .items .-corporate .text {
  font-size: 20rem;
  text-align: center;
}
@media (width < 768px) {
  .p-plans .items .-corporate .body-group {
    margin-top: 24px;
  }
  .p-plans .items .-corporate .text {
    font-size: 16rem;
  }
}

/* lesson */
.p-plans .items .-lesson p.head {
  background: #838588;
}

/* col2 */
.p-plans .items.-col2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (width < 768px) {
  .p-plans .items.-col2 {
    grid-template-columns: 1fr;
  }
}

/* option */
.p-plans .items.-option {
  grid-template-columns: 620rem;
  justify-content: center;
  margin-top: 48rem;
}
.p-plans .items.-option p.head {
  background: var(--gray);
  color: var(--black);
}
.p-plans .items.-option .table {
  margin: 24rem 0 0;
}
@media (width < 768px) {
  .p-plans .items.-option {
    grid-template-columns: 1fr;
  }
}

/* ---------------- p-options */
.p-options {
  padding: 0 0 140rem;
}
.p-options .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem;
}
.p-options .items .item {
  display: grid;
  grid-template-rows: subgrid;
  gap: 24rem;
  grid-row: span 2;
}
.p-options .item > .head {
  font-size: 20rem;
  font-weight: 500;
  line-height: 1.5;
}
.p-options .item .body-group {
  background: #fff;
}
.p-options .table .group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  position: relative;
  padding: 16rem 40rem;
  background: #fff;
}
.p-options .table .group:not(.-head) + .group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40rem;
  width: calc(100% - 80rem);
  height: 1rem;
  border-top: 1rem dotted var(--gray);
}
.p-options .table .group.-head {
  background: #838588;
  color: #fff;
  margin-bottom: 8rem;
}
.p-options .table dd {
  text-align: right;
}
.p-options .table .price {
  display: flex;
  gap: 20rem;
  justify-content: end;
  align-items: baseline;
}
.p-options .table .price .w {
  position: relative;
}
.p-options .table .price .w + .w::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: -10rem;
  width: 1rem;
  height: 16rem;
  background: var(--black);
  rotate: 30deg;
}
.p-options .table .num {
  font-size: 24rem;
}
.p-options .text-group {
  padding: 16rem 40rem 40rem;
}
@media (width < 768px) {
  .p-options {
    padding: 0 0 64rem;
  }
  .p-options .items {
    grid-template-columns: 1fr;
  }
  .p-options .items .item {
    gap: 16rem;
  }
  .p-options .item > .head {
    font-size: 16rem;
  }
  .p-options .table .group {
    padding: 16rem 24rem;
  }
  .p-options .table .group.-head {
    margin-bottom: 0;
  }
  .p-options .table .group:not(.-head) + .group::before {
    left: 24rem;
    width: calc(100% - 48rem);
  }
  .p-options .table .num {
    font-size: 20rem;
  }
  .p-options .text-group {
    padding: 0 24rem 24rem;
  }
}

/* col1 */
.p-options .table.-col1 {
  padding-bottom: 24rem;
}
.p-options .table.-col1 .group {
  grid-template-columns: 1fr;
  text-align: center;
}
.p-options .table.-col1 .price {
  justify-content: center;
}
@media (width < 768px) {
  .p-options .table.-col1 {
    padding-bottom: 0;
  }
}


/* ---------------- p-lesson */
.p-lesson {
  padding: 0 0 140rem;
}
.p-lesson .container {
  display: grid;
  grid-template-columns: 1fr 620rem;
  gap: 40rem;
}
.p-lesson .container {
  display: grid;
  grid-template-columns: 1fr 620rem;
  gap: 40rem;
  padding-left: 110rem;
}
.p-lesson .table .group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  position: relative;
  padding: 16rem 40rem;
  background: #fff;
}
.p-lesson .table .group:not(.-head) + .group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40rem;
  width: calc(100% - 80rem);
  height: 1rem;
  border-top: 1rem dotted var(--gray);
}
.p-lesson .table .group.-head {
  background: var(--orange);
  color: #fff;
}
.p-lesson .table dd {
  text-align: right;
}
.p-lesson .table .price {
  display: flex;
  gap: 20rem;
  justify-content: end;
  align-items: baseline;
}
.p-lesson .table .price .w {
  position: relative;
}
.p-lesson .table .price .w + .w::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: -10rem;
  width: 1rem;
  height: 16rem;
  background: var(--black);
  rotate: 30deg;
}
.p-lesson .table .num {
  font-size: 24rem;
}
@media (width < 768px) {
  .p-lesson {
    padding: 0 0 64rem;
  }
  .p-lesson .container {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .p-lesson .table .group {
    padding: 16rem 24rem;
  }
  .p-lesson .table .group:not(.-head) + .group::before {
    left: 24rem;
    width: calc(100% - 48rem);
  }
  .p-lesson .table .num {
    font-size: 20rem;
  }
}


/* ---------------- p-makers */
.p-makers {
  padding: 140rem 0;
}
.p-makers .head-container {
  display: grid;
  grid-template-columns: 1fr 510rem;
  gap: 40rem;
  max-width: 1280rem;
  margin: 0 auto 64rem;
}
.p-makers .head-container .body {
  display: grid;
  gap: 24rem;
}
.p-makers .makers-container {
  overflow: clip;
  padding-left: 80rem;
}
.p-makers .note-container {
  max-width: 1280rem;
  margin: 48rem auto 0;
}
@media (width < 768px) {
  .p-makers {
    padding: 64rem 0;
  }
  .p-makers .head-container {
    grid-template-columns: 1fr;
    margin-bottom: 40rem;
    padding: 0 24rem;
  }
  .p-makers .head-container .p-head-group {
    margin-bottom: 0;
  }
  .p-makers .makers-container {
    padding-left: 24rem;
  }
  .p-makers .note-container {
    margin-top: 40rem;
    padding: 0 24rem;
  }
}



/* ---------------- p-carousel */
.p-carousel .items {
  display: flex;
  gap: 64rem;
  position: relative;
  left: 0;
  width: 90000rem;
  transition: left .4s var(--easing);
}
.p-carousel .items .item {
  width: 510rem;
  background: var(--beige);
  color: var(--black);
}
.p-carousel .logo-group {
  padding: 40rem 40rem 0;
  background: #fff;
}
.p-carousel .logo-group .head {
  font-size: 16rem;
  line-height: 1.5;
}
.p-carousel .logo-group figure {
  max-width: 370rem;
  margin: 0 auto;
}
.p-carousel .body-group {
  padding: 40rem 40rem 48rem;
}
.p-carousel .body-group .tools {
  margin-bottom: 16rem;
  font-size: 20rem;
  font-weight: 500;
}
.p-carousel .body-group .link {
  margin-top: 24rem;
}
.p-carousel .body-group .link a {
  position: relative;
  padding-bottom: 8rem;
  color: var(--black);
  text-decoration: none;
}
.p-carousel .body-group .link a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background: var(--gray);
}
.p-carousel .body-group .link a:hover::before {
  animation: line .4s;
}
.p-carousel .btns {
  display: flex;
  gap: 16rem;
  margin-top: 32rem;
}
.p-carousel .btns .a {
  display: block;
  position: relative;
  aspect-ratio: 1;
  width: 40rem;
  border: 1rem solid #fff;
  border-radius: 4rem;
}
.p-carousel .btns .a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  width: 20rem;
  background: url("/assets/img/arw_carousel.svg") no-repeat center / contain;
  translate: -50% -50%;
}
.p-carousel .btns .a:hover {
  border-width: 2rem;
}
.p-carousel .btns .a.-next {
  rotate: 180deg;
}
@media (width < 768px) {
  .p-carousel .items .item {
    width: 327rem;
  }
  .p-carousel .logo-group {
    padding: 24rem 24rem 0;
  }
  .p-carousel .body-group {
    padding: 24rem;
  }
  .p-carousel .body-group .tools {
    font-size: 16rem;
  }
}

/* disabled */
.p-carousel .btns .a.-disabled {
  opacity: .4;
  pointer-events: none;
}

/* touch */
.p-carousel .items.-touch {
  transition: none;
}



/* ---------------- p-application */
.p-application {
  padding: 140rem 0 160rem;
  position: relative;
  overflow: hidden;
}
.p-application p.scroll {
  position: absolute;
  display: flex;
  width: fit-content;
  white-space: nowrap;
  translate: 0%;
  animation: application-txt 20s linear infinite;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}
.p-application p.scroll span {
  font-size: 100rem;
  padding-right: 20rem;
}
@keyframes application-txt {
  0% {
    translate: 0%;
  }

  100% {
    translate: -50%;
  }
}
.p-application .container {
  position: relative;
  background: url("/assets/img/bg_application.jpg") no-repeat center / cover;
  z-index: 2;
  max-width: 920rem;
  margin: 0 auto;
  padding: 56rem 48rem 64rem;
  color: #fff;
}
.p-application .head-container {
  display: grid;
  grid-template-columns: 1fr 392rem;
  gap: 40rem;
  margin-bottom: 40rem;
}
.p-application .p-head-group {
  margin-bottom: 0;
}
.p-application .p-btn-contact ul {
  justify-content: center;
}
.p-application .note-group {
  margin-top: 16rem;
}
.p-application .note-group .note {
  width: fit-content;
  margin: 0 auto;
}
@media (width < 768px) {
  .p-application {
    padding: 64rem 24rem;
  }
  .p-application p.scroll {
    display: none;
  }
  .p-application .container {
    padding: 32rem 24rem;
  }
  .p-application .head-container {
    grid-template-columns: 1fr;
  }
}



/* ---------------- p-access */
.p-access {
  padding: 140rem 0 160rem;
}
.p-access .head-container {
  display: grid;
  grid-template-columns: 1fr 660rem;
  gap: 40rem;
  margin-bottom: 80rem;
  padding: 0 110rem 0 160rem;
}
.p-access .p-head-group {
  margin: 64rem 0 0;
}
.p-access .head-photos {
  position: relative;
  aspect-ratio: 660 / 319;
}
.p-access .head-photos .img01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 77.27%;
}
.p-access .head-photos .img02 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 39.39%;
}
.p-access .information-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem;
}
.p-access .information {
  padding-top: 8rem;
}
.p-access .information dl {
  display: grid;
  grid-template-columns: 70rem 1fr;
  font-weight: 500;
}
.p-access .information dt,
.p-access .information dd {
  padding: 16rem 0;
  border-bottom: 1rem dotted var(--gray);
}
.p-access .information dt {
  display: flex;
  align-items: center;
}
.p-access .information dd {
  padding-left: 40px;
}
.p-access .information .phone {
  display: flex;
  align-items: center;
  font-size: 14rem;
}
.p-access .information .phone .num {
  display: flex;
  gap: 8rem;
  align-items: center;
}
.p-access .information .phone .num::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 14rem;
  background: url("/assets/img/ico_phone.svg") no-repeat center / contain;
}
.p-access .information .phone .time {
  position: relative;
  margin-left: 12rem;
  padding-left: 12rem;
}
.p-access .information .phone .time::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;
  height: 14rem;
  background: var(--black);
  translate: 0 -50%;
}
.p-access .information .phone .time::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 1rem;
  height: 14rem;
  background: var(--black);
  translate: 0 -50%;
}
.p-access .information .mail {
  display: flex;
  gap: 8rem;
  align-items: center;
}
.p-access .information .mail::before {
  content: '';
  display: block;
  aspect-ratio: 1;
  width: 14rem;
  background: url("/assets/img/ico_mail.svg") no-repeat center / contain;
}
.p-access .map {
}
.p-access .map iframe {
  display: block;
  aspect-ratio: 620 / 487;
  width: 100%;
  height: auto;
}
@media (width < 768px) {
  .p-access {
    padding: 64rem 0;
  }
  .p-access .head-container {
    grid-template-columns: 1fr;
    margin-bottom: 40rem;
    padding: 0;
  }
  .p-access .p-head-group {
    margin: 0;
  }
  .p-access .information-container {
    grid-template-columns: 1fr;
  }
  .p-access .information {
    padding: 0;
  }
  .p-access .information dl {
    grid-template-columns: 1fr;
  }
  .p-access .information dt {
    padding: 16rem 24rem 0;
    border-bottom: none;
  }
  .p-access .information dd {
    padding: 8rem 24rem 16rem;
  }
}

/* text */
.p-access .information dd.-text {
  display: grid;
  gap: 8px;
}




/* ---------------- p-studio */
.p-studio {
  padding: 120rem 0 140rem;
  background: url("/assets/img/bg_reserve.jpg") no-repeat center / cover var(--black);
  color: #fff;
  text-align: center;
}
.p-studio .p-btn-contact {
  margin-top: 64rem;
}
.p-studio .p-btn-contact ul {
  justify-content: center;
}
.p-studio .note-group {
  margin-top: 16rem;
}
.p-studio .note-group .note {
  width: fit-content;
  margin: 0 auto;
}
.p-studio .link-group {
  margin-top: 48rem;
}
.p-studio .link-group li {
  width: 240rem;
}
.p-studio .link-group .-blank {
  display: inline-block;
  position: relative;
  padding-right: 22rem;
}
.p-studio .link-group .-blank::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  aspect-ratio: 1;
  width: 14rem;
  background: url("/assets/img/ico_blank_white.svg") no-repeat center / contain;
  translate: 0 -50%;
}
@media (width < 768px) {
  .p-studio {
    padding: 64rem 24rem;
  }
  .p-studio .note-group .note {
    margin: 0;
    text-align: left;
  }
}