/* -- top common 共通パーツ
-------------------------------------------------- */
:root {
  --main-color: #010042;
  --sub-color: #d47612;
  --accent-color: #aac8cf;
  --white-color: white;

  --space-xs: 0.5rem;  /* 8px */
  --space-sm: 1rem;    /* 16px */
  --space-md: 2rem;    /* 32px */
  --space-lg: 4rem;    /* 64px */

  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 3rem;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px（基準） */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-xxl: 2.87rem;     /* 46px */
  --font-size-title: 3.75rem;     /* 60px */

  --font-weight-Light: 300;
  --font-weight-Medium: 500;
  --font-weight-Black: 900;

  --font-family-main: "M PLUS 1p", sans-serif;
  --font-family-spanish: "Libertinus Mono", monospace;
}
.sp-only {
  display: none;
}
@media (max-width: 768px) {
  :root {
    --gap-sm: .5rem;
    --gap-md: 1rem;
    --gap-lg: 2rem;

    --font-size-xs: 0.6875rem;   /* 11px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 0.937rem;      /* 15px（基準） */
    --font-size-lg: 1rem;   /* 16px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-xxl: 1.875rem;     /* 30px */
  --font-size-title: 2.187rem;     /* 35px */
  }

.sp-only {
  display: block;
}
html, body {
  overflow-x: hidden;
}
}

.bg-orange {
  background-color: var(--sub-color);
}
.wave:after {
  position: absolute;
  top: 0;
  bottom: -1px;
  right: 0;
  left: 0;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  /* background-size: contain; */
  pointer-events: none;
  background-position: bottom;
}

body {
    margin: 0;
    font-family: var(--font-family-main);
}
ul,h1,h2,h3,h4,p {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

.shake-on-hover {
  display: inline-block;
  transition: transform 0.3s;
  transform-origin: center bottom;
}
.shake-on-hover:hover {
  animation: rotate-shake-strong 1s ease-out 1;
}
@keyframes rotate-shake-strong {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(10deg); }
  30%  { transform: rotate(-10deg); }
  45%  { transform: rotate(8deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(4deg); }
  90%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
}


/* -- toppage
-------------------------------------------------- */

.mv-wrapper {
  height: 100vh;
  position: relative;
  background-color: var(--main-color);
  background-image: url("../images/common/pattern_dot.svg");
  background-repeat: repeat;
  background-size: cover;
}
.mv-wrapper .mv-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 70vh;
    justify-items: normal;
    align-items: center;
}
.mv-wrapper.wave:after {
    background-image: url('../images/common/pattern_wave-orange.svg');
}

img.site-logo {
    width: 100%;
    max-width: 350px;
}
.site-title {
  padding: var(--space-sm);
}
.site-title span {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--white-color);
}

.site-nav-list {
  width: 500px;
  margin: 0 auto;
  display: grid;
  gap: var(--gap-lg);
}
li.site-nav-list-item {
    text-align: center;
    font-weight: var(--font-weight-Black);
}
li.site-nav-list-item a {
    position: relative;
    color: var(--white-color);
    font-size: var(--font-size-lg);
}
li.site-nav-list-item a:hover {
    color: var(--sub-color);
    transition: .5s;
}
li.site-nav-list-item a .item-arrow {
    position: absolute;
}
li.site-nav-list-item a .item-icon {
    position: absolute;
}
.item-icon {
    display: inline-block;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
  pointer-events: none;
}
.item-icon.rotate {
  transform: rotateY(360deg);
}


/* beginners */
li.site-nav-list-item.__beginners .item-arrow {
    top: 26px;
    left: 0;
}
li.site-nav-list-item.__beginners .item-arrow img {
    width: 240px;
}
li.site-nav-list-item.__beginners .item-icon {
    left: 190px;
    top: -30px;
}
li.site-nav-list-item.__beginners .item-icon img {
    width: 110px;
}

/* instructor */
li.site-nav-list-item.__instructor .item-arrow {
    top: 26px;
    right: 0;
}
li.site-nav-list-item.__instructor .item-arrow img {
    width: 290px;
}
li.site-nav-list-item.__instructor .item-icon {
    right: 200px;
    top: -30px;
}
li.site-nav-list-item.__instructor .item-icon img {
    width: 140px;
}

/* classes-fees */
li.site-nav-list-item.__classes-fees .item-arrow {
    top: 26px;
    left: 0;
}
li.site-nav-list-item.__classes-fees .item-arrow img {
    width: 240px;
}
li.site-nav-list-item.__classes-fees .item-icon {
    left: 150px;
    top: -10px;
}
li.site-nav-list-item.__classes-fees .item-icon img {
    width: 110px;
}

/* access */
li.site-nav-list-item.__access .item-arrow {
    top: 25px;
    right: 0;
}
li.site-nav-list-item.__access .item-arrow img {
    width: 150px;
}
li.site-nav-list-item.__access .item-icon {
    right: 130px;
    top: -10px;
}
li.site-nav-list-item.__access .item-icon img {
    width: 110px;
}

/* news */
li.site-nav-list-item.__news .item-arrow {
    top: 25px;
    left: 0;
}
li.site-nav-list-item.__news .item-arrow img {
    width: 210px;
}
li.site-nav-list-item.__news .item-icon {
    left: 185px;
    top: -10px;
}
li.site-nav-list-item.__news .item-icon img {
    width: 110px;
}

/* contact */
li.site-nav-list-item.__contact .item-arrow {
    top: 25px;
    right: 0;
}
li.site-nav-list-item.__contact .item-arrow img {
    width: 250px;
}
li.site-nav-list-item.__contact .item-icon {
    right: 225px;
    top: -50px;
}
li.site-nav-list-item.__contact .item-icon img {
    width: 105px;
}

/* sns */
li.site-nav-list-item.__sns {
    display: flex;
    gap: var(--gap-sm);
    justify-content: end;
}
li.site-nav-list-item.__sns img {
    width: 50px;
}

/* 円形スライド */
    .circle-frame {
      position: relative;
      width: 520px;
      height: 520px;
    }

    .circular-slider {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/common/dot_circle.svg");
    background-size: cover;
    }

    .top-swiper {
      width: 450px;
      height: 450px;
      border-radius: 50%;
      position: relative;
      display: inline-block;
      z-index: 2;
    }

    .top-swiper .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .circle-text {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 9px;
      font-family: var(--font-family-spanish);
      fill: #565581;
      letter-spacing: -0.5px;
      z-index: 3;
      pointer-events: none;
      animation: rotateText 20s linear infinite;
    }

    @keyframes rotateText {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

/* ランタン */
    .lantern-wrapper {
      position: absolute;
      bottom: 80px;
      right: 110px;
      z-index: 3;
      transition: opacity 1.5s ease-in-out;
    }
    .lantern-wrapper img{
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .lantern.off {
      width: 231.5px;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .lantern.on {
      opacity: 0;
      width: 270px;
      position: absolute;
      right: -18px;
      bottom: 0;
    }
    .lantern.shadow {
      width: 231.5px;
      position: absolute;
      right: 0;
      top: -2px;
    }


.section-title {
  padding: var(--space-lg) 0;
  color: var(--main-color);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-Black);
  text-align: center;
}
.section-title span {
  display: block;
  font-size: var(--font-size-md);
}
.section__inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

@media (max-width: 1540px) {
.mv-wrapper .mv-content {
    grid-template-rows: 80vh;
}
.lantern.off {
      width: 214.5px;
    }
    .lantern.on {
      width: 250px;
    }
    .lantern.shadow {
      width: 214.5px;
    }
}

@media (max-width: 768px) {
.mv-wrapper {
  overflow: hidden;
}
main.site-main {
  overflow: hidden;
}
.mv-wrapper .mv-content {
    grid-template-rows: 80vh;
}
.site-title {
    z-index: 5;
    position: relative;
}
.circle-frame {
z-index: 4;
    }
.circle-text {
    font-size: 8px;
}
    .circle-frame {
      width: 520px;
      height: 520px;
    }

.circular-slider {
    width: 500px;
    height: 500px;
    top: 10px;
    left: 10px;
}
    .top-swiper {
      width: 450px;
      height: 450px;
    }
.lantern-wrapper {
    bottom: 10px;
    right: -30px;
}
    .lantern.shadow {
display: none;
    }
.section__inner {
    padding: 0 var(--space-sm);
}
.wave:after {
  background-size: auto;
}
}
@media (max-width: 468px) {
img.site-logo {
    max-width: 200px;
}
    .circle-frame {
        width: 420px;
        height: 420px;
        margin: 0 auto;
    }
    .circular-slider {
        width: 400px;
        height: 400px;
    }
    .top-swiper {
        width: 350px;
        height: 350px;
    }
    .lantern.off {
      width: 211.5px;
    }
    .lantern.on {
      width: 250px;
}
}
@media (max-width: 375px) {
    .circle-frame {
        width: 370px;
        height: 370px;
        margin: 0 auto;
    }
    .circular-slider {
        width: 350px;
        height: 350px;
    }
    .top-swiper {
        width: 300px;
        height: 300px;
    }
}

/* -- sp menu
-------------------------------------------------- */
@media (max-width: 768px) {
.sp-menu-button {
  position: fixed;
  top: 20px;
  right: 16px;
  width: 50px;
  height: 50px;
  z-index: 10000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: none;
}
.icon-sp-menu-icon {
  width: 50px;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}
.icon-close {
  opacity: 0;
  pointer-events: none;
}
.sp-menu-button.is-open .icon-open {
  opacity: 0;
  pointer-events: none;
}
.sp-menu-button.is-open .icon-close {
  opacity: 1;
  pointer-events: auto;
}
.sp-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease, visibility 0.3s;
  visibility: hidden;
  background-color: var(--main-color);
  background-image: url("../images/common/pattern_dot.svg");
  background-repeat: repeat;
  background-size: cover;
}
.sp-nav-wrapper.is-open {
  visibility: visible;
  transform: translateX(0);
}
.sp-site-nav-logo {
  max-width: 330px;
  padding: var(--space-sm);
}
.sp-site-nav {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sp-site-nav-list {
  width: 100%;
  margin: auto;
  text-align: center;
}
li.sp-site-nav-list-item {
    margin: 0 auto var(--space-md);
}
li.sp-site-nav-list-item a {
    position: relative;
    color: var(--white-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-Black);
}
li.sp-site-nav-list-item a .sp-item-icon {
    position: absolute;
}
/* beginners */
li.sp-site-nav-list-item.__beginners .sp-item-icon {
    bottom: -30px;
    left: 0;
}
li.sp-site-nav-list-item.__beginners .sp-item-icon img {
    width: 240px;
}
/* instructor */
li.sp-site-nav-list-item.__instructor .sp-item-icon {
    bottom: -40px;
    right: 0;
}
li.sp-site-nav-list-item.__instructor .sp-item-icon img {
    width: 248px;
}
/* classes-fees */
li.sp-site-nav-list-item.__classes-fees .sp-item-icon {
    bottom: -40px;
    left: 0;
}
li.sp-site-nav-list-item.__classes-fees .sp-item-icon img {
    width: 240px;
}
/* access */
li.sp-site-nav-list-item.__access .sp-item-icon {
    bottom: -25px;
    right: 0;
}
li.sp-site-nav-list-item.__access .sp-item-icon img {
    width: 220px;
}
/* news */
li.sp-site-nav-list-item.__news .sp-item-icon {
    bottom: -37px;
    left: 0;
}
li.sp-site-nav-list-item.__news .sp-item-icon img {
    width: 225px;
}
/* contact */
li.sp-site-nav-list-item.__contact .sp-item-icon {
    bottom: -22px;
    right: 0;
}
li.sp-site-nav-list-item.__contact .sp-item-icon img {
    width: 230px;
}
.sp-site-nav-sns {
  padding: 0 var(--space-sm) 0 0;
    display: flex;
    gap: var(--gap-sm);
    justify-content: end;
}
.sp-site-nav-sns img {
    width: 50px;
}
.simple-wave-orange img {
  vertical-align: bottom;
}
.sp-site-nav-title {
    position: relative;
    padding: var(--space-sm);
    background-color: var(--sub-color);
    font-size: var(--font-size-xs);
}
.sp-site-nav-title-main,
.sp-site-nav-title-sub {
  color: var(--white-color);
}
}
@media (max-width: 468px) {
.sp-site-nav-logo {
  max-width: 250px;
  padding: var(--space-sm);
}
}
@media (max-width: 769px) {
  .sp-menu-button,
  .sp-nav-wrapper {
    display: block;
  }
  .site-nav {
    display: none;
  }
  .common-site-nav {
      display: none;
  }
}

/* -- news
-------------------------------------------------- */
.section-news {
  position: relative;
  padding: var(--space-lg) 0 10rem;
}
.section-news.wave:after {
  background-image: url("../images/common/pattern_wave-white.svg");
}
.news-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--gap-sm);
  padding-bottom: var(--space-lg);
}
.news-list-item {
  max-width: 300px;
}
.news-list-item a {
  color: var(--main-color);
}
.news-list-item .post-item-thumbnail {
	max-width: 270px;
	flex: 1 1 calc(25% - 40px);
}
.news-list-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.entry-header {
  color: var(--main-color);
}
.post-item-title {
  font-size: var(--font-size-lg);
  font-weight: 800;
}
.more-btn {
  display: flex;
  max-width: 260px;
  margin: 0 auto var(--space-lg);
  background-color: var(--white-color);
  border-radius: 10px;
}
.more-btn a {
  width: 100%;
  padding: .5rem 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.more-btn a span {
  width: 100%;
}
.more-btn a span.__ja {
  color: var(--main-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Black);
}
.more-btn a span.__en {
  color: var(--accent-color);
  font-weight: var(--font-weight-Black);
}

@media (max-width: 768px) {
  .section-news {
    padding: var(--space-lg) 0 5rem;
  }
  .news-list {
    grid-template-columns: 1fr 1fr;
  }
  .news-list-item {
    margin: 0 auto;
  }
}



/* -- about
-------------------------------------------------- */
.section-about {
  position: relative;
  padding: var(--space-lg) 0 10rem;
}
.section-about.wave:after {
  background-image: url("../images/common/pattern_wave-orange.svg");
}
.lantern-orange {
    position: absolute;
    bottom: 0;
    right: 20px;
}
.lantern-orange img {
    width: 350px;
}
.section-title.__about {
    text-align: left;
}
.section-about_description {
    margin-bottom: var(--space-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-Medium);
}
.bnr_for-beginners {
    margin-bottom: var(--space-lg);
    text-align: right;
}
.bnr_for-beginners img {
  width: 400px;
}
.signature-wrapper {
    max-width: 50vw;
    margin: 10rem auto var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.signature {
  opacity: 0;
  max-width: 100%;
  height: auto;
}
.signature__es {
    margin-bottom: var(--space-md);
    font-size: var(--font-size-xl);
    text-align: center;
}
.signature__ja {
    margin-bottom: var(--space-md);
    font-size: var(--font-size-xl);
    text-align: center;
}
.bnr_instructor-profile {
    margin-bottom: var(--space-lg);
    max-width: 50vw;
}
.bnr_instructor-profile img {
  width: 500px;
}


@media (max-width: 768px) {
.section-about {
  position: relative;
  padding: var(--space-lg) 0 5em;
}
.section-title.__about {
    font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
    line-height: 1.3;
}
.signature-wrapper {
  max-width: 90vw;
}
.signature {
  filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px white) drop-shadow(-1px 0 white) drop-shadow(1px 0 white) drop-shadow(0 -1px white) drop-shadow(0 1px white);
}
.bnr_for-beginners {
    max-width: 100vw;
}
.bnr_for-beginners img {
  width: 350px;
}
.bnr_instructor-profile {
    max-width: 100vw;
}
.bnr_instructor-profile img {
    width: 450px;
}
.lantern-orange {
    right: -30px;
}
.lantern-orange img {
    width: 250px;
}
}

@media (max-width: 468px) {
    .bnr_for-beginners img {
        width: 280px;
    }
.bnr_instructor-profile img {
  width: 300px;
}
}


/* -- class
-------------------------------------------------- */
.section-class {
  position: relative;
  padding: var(--space-lg) 0 10rem;
}
.section-class.wave:after {
  background-image: url("../images/common/pattern_wave-white.svg");
}

ul.class-icon-area {
  margin: 0 auto var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  justify-content: center;
}

.class-icon-a {
  width: 350px;
}
.class-icon-b {
  width: 370px;
}
.class-icon-c {
  width: 385px;
}
.class-icon-d {
  width: 357px;
}
.class-icon-e {
  width: 340px;
}

.class-bnr-area {
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-lg);
}
.class-bnr-area .bnr_class img {
  width: 450px;
}
.class-bnr-area .bnr_about_fee img {
  width: 400px;
}


@media (max-width: 768px) {
.section-class {
  padding: var(--space-lg) 0 5rem;
}
.class-bnr-area {
  flex-wrap: wrap;
}
.schedule-wrapper {
  max-width: 95%;
  margin: 0 auto;
}
ul.class-icon-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}
.class-icon-a {
  width: 300px;
}
.class-icon-b {
  width: 310px;
}
.class-icon-c {
  width: 315px;
}
.class-icon-d {
  width: 307px;
}
.class-icon-e {
  width: 300px;
}

.class-bnr-area .bnr_class img {
  width: 350px;
}
.class-bnr-area .bnr_about_fee img {
  width: 300px;
}
}

@media (max-width: 468px) {
ul.class-icon-area {
  grid-template-columns: 1fr;
}
.class-icon svg {
    width: 100%;
    height: auto;
}
.class-bnr-area .bnr_class img {
  width: 300px;
}
.class-bnr-area .bnr_about_fee img {
  width: 280px;
}
}


/* -- footer
-------------------------------------------------- */
.site-footer {
    margin-top: 10rem;
    position: relative;
}
.site-footer.wave:after {
  background-image: url("../images/common/pattern_wave-footer.svg");
  top: -1px;
  margin-bottom: 1px;
  background-position: top;
}
img.footer-icon-01 {
    position: absolute;
    top: -120px;
    left: 40px;
    z-index: 1;
    max-width: 350px;
}
img.footer-icon-02 {
    position: absolute;
    top: -180px;
    right: 630px;
    z-index: 1;
    max-width: 400px;
}
img.footer-icon-03 {
    position: absolute;
    top: -270px;
    right: 50px;
    z-index: 1;
    max-width: 500px;
}
.footer-inner {
  padding: 35rem var(--space-md) var(--space-md);
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a b"
    "c d";
}
.footer-item-a { grid-area: a; }
.footer-item-b { grid-area: b; }
.footer-item-c { grid-area: c; }
.footer-item-d { grid-area: d; }
.footer-title {
  color: var(--white-color);
}
.footer-title-main {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-lg);
}
.footer-title-sub {
  margin-bottom: var(--space-xs);
}
.footer-sns ul {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
.footer-sns ul li img {
    width: 50px;
}
.footer-logo img{
  width: 320px;
}
.footer-menu ul {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}
.footer-menu.__item-c ul {
  justify-content: flex-start;
}
.footer-menu ul li {
  position: relative;
  padding-right: var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-Medium);
  color: var(--white-color);
}
.footer-menu.__item-c ul li {
  font-size: var(--font-size-xs);
}
.footer-menu ul li a {
  color: var(--white-color);
}
.footer-menu ul li a:hover {
    color: var(--main-color);
    transition: .5s;
}
.footer-menu ul li:after {
  position: absolute;
  content: "|";
  right: 0;
  top: 0;
}
.footer-menu ul li:last-of-type:after {
  content: none;
}


@media (max-width: 768px) {
.site-footer {
    margin-top: 5rem;
}
img.footer-icon-01 {
    position: absolute;
    top: -10px;
    left: 10px;
    z-index: 1;
    max-width: 200px;
}
img.footer-icon-02 {
    top: -40px;
    right: 300px;
    max-width: 210px;
}
img.footer-icon-03 {
    top: -180px;
    right: 10px;
    max-width: 280px;
}
  .footer-inner {
      padding: 15rem var(--space-md) var(--space-md);
      grid-template-columns: 1fr;
      grid-template-areas:
          "b"
          "d"
          "a"
          "c";
      gap: var(--gap-lg);
  }
  .footer-sns ul {
      justify-content: center;
  }
  .footer-menu  {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid white;
  }
  .footer-menu ul {
    max-width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .footer-menu.__item-c ul {
    max-width: 100%;
    grid-template-columns: 1fr;
  }
  .footer-menu ul li {
    text-align: center;
  }
  .footer-menu.__item-c ul li {
    padding-right: 0;
  }
  .footer-menu ul li:after {
    content: none;
  }
  .footer-title {
      text-align: center;
  }
  .footer-logo {
      text-align: center;
  }
}
@media (max-width: 468px) {
  .footer-inner {
      padding: 10rem var(--space-md) var(--space-md);
  }
img.footer-icon-01 {
    position: absolute;
    top: -20px;
    left: 10px;
    z-index: 1;
    max-width: 130px;
}
img.footer-icon-02 {
    display: none;
}
img.footer-icon-03 {
    top: -140px;
    right: 10px;
    max-width: 160px;
}
  }

/* -- 下層共通など
-------------------------------------------------- */

.common-wrapper {
  height: 100vh;
  position: relative;
  background-size: cover;

  transform: scale(1.08);
  opacity: 0;
  animation: heroZoomFade 1.8s ease-out forwards;
}
@keyframes heroZoomFade {
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.common-wrapper.wave:after {
    background-image: url('../images/common/pattern_wave-orange.svg');
    background-position: bottom;
}
.common-wrapper:before {
  position: absolute;
    bottom: 6rem;
    left: 6rem;
      mix-blend-mode:difference;
}

.common-wrapper .common-header {
  padding-bottom: 9rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url('../images/common/pattern_wave-header_1.svg');
  background-size: cover;
  background-position: bottom;
}
.common-wrapper .common-header:before {
    background-image: url('../images/common/pattern_wave-orange.svg');
}

img.common-site-logo {
    width: 100%;
    max-width: 300px;
}
.common-site-title {
  display: block;
  padding: var(--space-sm);
}
.common-site-title span {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--white-color);
}

.common-site-nav-list {
  display: flex;
  align-items: end;
  gap: var(--gap-md);
  padding: var(--space-sm);
}
.common-site-nav-list-item {
    min-width: 100px;
    text-align: center;
}
.common-site-nav-list-item a {
    color: var(--white-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-Medium);
    display: block;
}
.common-site-nav-list-item a:hover {
    color: var(--sub-color);
    transition: .5s;
}
.common-item-icon {
    display: inline-block;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    pointer-events: none;
}
.common-item-icon.rotate {
    transform: rotateY(360deg);
}
.common-site-nav-list-item a span {
    display: block;
}
.common-site-nav-list-item.__beginners a img {
    width: 82px;
}
.common-site-nav-list-item.__instructor a img {
    width: 110px;
}
.common-site-nav-list-item.__classes-fees a img {
    width: 86px;
}
.common-site-nav-list-item.__access a img {
    width: 81px;
}
.common-site-nav-list-item.__news a img {
    width: 75px;
}
.common-site-nav-list-item.__contact a img {
    width: 71px;
}


.common-section {
  position: relative;
  padding: 0 0 20rem 0;
}
.common-section.wave:after {
  background-image: url("../images/common/pattern_wave-white.svg");
}
.common-section-title {
  padding: var(--space-lg) 0;
  color: var(--main-color);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-Black);
  text-align: center;
}
.common-section-title span {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-Medium);
}
.common-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

@media (max-width: 768px) {
.common-wrapper {
  height: 70vh;
}
.common-wrapper .common-header {
  padding-bottom: 2rem;
}
.common-wrapper:before {
    left: 3rem;
}
.common-section {
  position: relative;
  padding: 0 0 15rem 0;
}
}
@media (max-width: 468px) {
.common-wrapper {
  height: 50vh;
}
.common-wrapper .common-header {
    padding-bottom: 0rem;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: top;
}
.common-section {
  position: relative;
  padding: 0 0 10rem 0;
}
.common-section-title {
  padding: var(--space-md) 0;
}
.common-site-title {
  width: 100%;
  min-height: 60px;
}
.common-site-title span {
  display: none;
}
}


/* -- 下層 access
-------------------------------------------------- */
.common-wrapper.__access {
  background-image: url('../images/access/access-image.jpg');
  background-position: center;
}
.common-wrapper:before {
  position: absolute;
  bottom: 6rem;
  left: 6rem;
  mix-blend-mode:difference;
}
.common-wrapper.__access:before {
  content: url("../images/access/access-title.svg");
  width: 450px;
}
.access-main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
.access-main-item-title {
    padding: var(--space-sm) 0 0 0;
    color: var(--main-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-Black);
}
.access-main-item-sub-title {
    padding: var(--space-sm) 0 0 0;
    color: var(--main-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-Black);
}
.access-main-item-info {
    padding: var(--space-sm) 0 0 0;
    color: var(--white-color);
    font-weight: var(--font-weight-Light);
}
.access-main-map {
    padding: var(--space-sm) 0 0 0;
}
.access-main-map iframe {
    width: 100%;
}



@media (max-width: 768px) {
.common-wrapper.__access:before {
    width: 300px;
    left: 3rem;
}
.access-main-layout {
  grid-template-columns: 1fr;
}
.access-main-item {
  padding: 0 var(--space-md) 0;
}
}

@media (max-width: 468px) {
.common-wrapper.__access:before {
    width: 220px;
    left: 1rem;
    bottom: 4rem;
}
.access-main-map iframe {
    height: 300px;
}
}

/* -- 下層 instructor
-------------------------------------------------- */

.common-wrapper.__instructor {
  background-image: url('../images/instructor/instructor-image.jpg');
  background-position: center;
}
.common-wrapper.__instructor:before {
  content: url("../images/instructor/instructor-title.svg");
  width: 650px;
}
.instructor-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
/* .instructor-main-visual {
} */
.instructor-main-visual img {
  width: 100%;
}
.instructor-main-profile-title {
    padding: var(--space-sm) 0 0 0;
    color: var(--main-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-Black);
}
.instructor-main-profile-title span {
  display: block;
}
.instructor-main-profile-sub-title {
    padding: var(--space-sm) 0 0 0;
    color: var(--main-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-Black);
}
.instructor-main-profile-info {
    padding: var(--space-md) 0 0 0;
    color: var(--main-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-Medium);
}
.instructor-main-awards-title,
.instructor-main-media-title {
    padding: var(--space-md) 0 var(--space-sm) 0;
    color: var(--main-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-Black);
}
.instructor-main-awards-info,
.instructor-main-media-info {
    color: var(--main-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-Medium);
}

@media (max-width: 768px) {
.common-wrapper.__instructor:before {
  width: 450px;
  left: 3rem;
}
.instructor-main {
    padding: 0 var(--space-md);
}
.instructor-main-profile-title {
    padding: 0;
    font-size: var(--font-size-xxl);
}
.instructor-main-profile-title span {
    font-size: var(--font-size-xl);
}
.instructor-main-profile-sub-title {
    font-size: var(--font-size-lg);
}
.instructor-main-profile-info {
    padding: var(--space-sm) 0 0 0;
}
}

@media (max-width: 468px) {
  .common-wrapper.__instructor:before {
    width: 320px;
    left: 1rem;
    bottom: 4rem;
  }
.instructor-main {
    display: grid;
    grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
}


/* -- 下層 instructor
-------------------------------------------------- */

.common-wrapper.__beginners {
  background-image: url('../images/beginners/beginners-image.jpg');
  background-position: center;
}
.common-wrapper.__beginners:before {
  content: url("../images/beginners/beginners-title.svg");
  width: 650px;
}
.signature-wrapper.__beginners {
    max-width: 900px;
    margin: var(--space-md) auto;
    gap: 1rem;
}
.beginners-main {
    margin-bottom: 15rem;
}
.signature {
  opacity: 0;
  max-width: 100%;
  height: auto;
}
.signature__es {
    margin-bottom: var(--space-md);
    font-size: 2.2rem;
    font-weight: var(--font-weight-Medium);
    color: var(--main-color);
    text-align: center;
}
.signature__ja {
    margin-bottom: var(--space-md);
    font-size: var(--font-size-lg);
    color: var(--main-color);
    text-align: center;
}
.beginners-about {
    margin-bottom: 5rem;
}
.beginners-about-title {
    margin-bottom: var(--space-md);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-Black);
    color: var(--main-color);
}
.beginners-about_description {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-Medium);
    color: var(--main-color);
}
.lantern-white {
    position: absolute;
    bottom: 0;
    right: 20px;
}
.lantern-white img {
    width: 480px;
}

.common-section.beginners-flow {
  padding: 0 0 10rem 0;
}
.beginners-flow-list {
  counter-reset: number;
  list-style: none;
  padding-left: 1.5em;
  margin-bottom: var(--space-lg);
}
.beginners-flow-list-item {
  counter-increment: number;
  position: relative;
  margin-bottom: var(--space-sm);
  padding-bottom: 5px;
  font-size: var(--font-size-lg);
  color: var(--main-color);
  border-bottom: 1px solid var(--accent-color);
}
.beginners-flow-list-item:before {
  content: counter(number);
  position: absolute;
  left: -1.5em;
}
.beginners-flow-list-item:nth-child(1):before { content: "①"; }
.beginners-flow-list-item:nth-child(2):before { content: "②"; }
.beginners-flow-list-item:nth-child(3):before { content: "③"; }
.beginners-flow-list-item:nth-child(4):before { content: "④"; }


.infinite-slider.swiper {
  width: 100%;
}
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
  gap: var(--gap-sm);
}
.infinite-slider .swiper-slide {
  height: 320px;
  width: auto;
}
.infinite-slider .swiper-slide img {
  width: auto;
  height: 100%;
}
.beginners-dress-code-pc,
.beginners-dress-code-bt {
  margin: 0 auto var(--space-lg);
  text-align: center;
  border-bottom: 1px solid var(--accent-color);
}
.beginners-dress-code-obi {
  display: inline-block;
  margin: 0 auto var(--space-md);
  padding: 10px 2em;
  background-color: var(--sub-color);
  border-radius: 10px;
  color: var(--white-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Black);
}
.beginners-dress-code-text {
  margin: 0 auto var(--space-lg);
  color: var(--main-color);
  font-size: var(--font-size-lg);
}
.beginners-mochimono {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}
.beginners-mochimono:first-of-type .beginners-mochimono-item {
  width: calc(100% / 3);
}
.beginners-mochimono-item:last-of-type .beginners-mochimono-item {
  width: calc(100% / 4);
}
.beginners-mochimono-item p {
  color: var(--main-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.beginners-mochimono-item img {
  max-width: 280px;
  height: 200px;
  margin: 0 auto var(--space-sm);
}
.beginners-dress-code-other p:first-of-type {
  margin: 0 auto var(--space-md);
  text-align: center;
  color: var(--main-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.beginners-dress-code-other p:last-of-type {
  text-align: center;
  color: var(--sub-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Medium);
}

@media (max-width: 768px) {
.common-wrapper.__beginners:before {
  width: 500px;
  left: 3rem;
}
.common-section.__beginners {
  padding: 0 0 10rem 0;
}
.beginners-main {
    margin-bottom: 10rem;
    padding: 0 var(--space-md);
}
.lantern-white img {
    width: 340px;
}
.beginners-about {
    margin-bottom: 5rem;
    padding: 0 var(--space-md);
}
.common-section.beginners-flow {
  padding: 0;
}
.beginners-flow .common-section__inner {
    padding: 0 var(--space-md);
}
section#beginners-dress-code {
    padding: 0 var(--space-md) 10rem;
}
.beginners-mochimono-item img {
    height: 120px;
}
}
@media (max-width: 468px) {
.common-wrapper.__beginners:before {
  width: 300px;
  left: 1rem;
  bottom: 4rem;
}
.beginners-main {
  margin-bottom: 5rem;
}
.signature__es {
    font-size: 1.2rem;
    text-align: left;
}
.signature__ja {
    text-align: left;
}
    .lantern-white img {
        width: 200px;
    }
.infinite-slider .swiper-slide {
  height: 260px;
  width: auto;
}
    section#beginners-dress-code {
        padding: 0 var(--space-md) 5rem;
    }
.beginners-dress-code-obi {
    padding: 10px 1em;
}
.beginners-mochimono {
  gap: var(--gap-sm);
}
.beginners-mochimono-item img {
    max-width: 80px;
    height: 70px;
}
.beginners-mochimono-item p {
    font-size: var(--font-size-md);
}
}


/* -- 下層 classes-fees
-------------------------------------------------- */
.common-wrapper.__classes-fees {
  background-image: url('../images/classes-fees/classes-fees-image.jpg');
  background-position: center;
}
.common-wrapper.__classes-fees:before {
  content: url("../images/classes-fees/classes-fees-title.svg");
  width: 450px;
}
.classes-list-item {
  margin-bottom: var(--space-lg);
  display: grid;
  grid-template-columns: .5fr 1fr;
  grid-template-areas:
    "a b"
    "a c";
  align-items: center;
}
.classes-list-item.__other {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "b"
    "c";
  gap: var(--gap-sm);
}
.a {  grid-area: a;}
.b {  grid-area: b;}
.c {  grid-area: c;}

.classes-list-item-img {
  width: 250px;
  margin: 0 auto;
}
.classes-list-item-title-box {
  display: flex;
  gap: var(--gap-sm);
}
.classes-list-item-title h3 {
  color: var(--main-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Black);
}
.classes-list-item-title h3 span {
  display: block;
  color: var(--main-color);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-Black);
}
.classes-list-item-people {
  display: flex;
  gap: 5px;
}
.classes-list-item-people img {
  width: 45px;
}
.classes-list-item-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  color: var(--main-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.classes-notice {
  margin: 5rem 0;
  color: var(--main-color);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-Black);
}
.bnr_private-lesson {
  text-align: right;
}
.bnr_private-lesson img {
  width: 600px;
}

.about-estudio-farol {
  margin: var(--space-lg) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
.about-estudio-farol-title {
  margin-bottom: var(--space-sm);
  color: var(--main-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Black);
}
.about-estudio-farol-title span {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.about-estudio-farol-info-title {
  color: var(--sub-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.about-estudio-farol-info {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.about-estudio-farol-access {
  color: var(--main-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.about-estudio-farol-access:hover {
  color: var(--sub-color);
  transition: .5s;;
}
.more-btn.__moushikomi {
  display: flex;
  max-width: 320px;
  background-color: var(--main-color);
}
.more-btn.__moushikomi a {
  padding: .8rem 0;
}
.more-btn.__moushikomi a span.__ja {
  color: var(--white-color);
}
.common-section.__about {
    padding: 0 0 10rem 0;
}

.fees-admission {
  display: flex;
  justify-content: space-between;
  color: var(--sub-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Black);

  margin-bottom: var(--space-sm);
  padding-bottom: 5px;
  border-bottom: 2px solid var(--accent-color);
}


.common-fees-class {
  margin: var(--space-lg) 0;
}
.common-fees-title {
  color: var(--main-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Black);
}
.common-fees-title span {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}
.common-fees-level {
  margin: 0 0 var(--space-sm) 0;
  color: var(--sub-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-Black);
}
.common-fees-list-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);

  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--accent-color);
}
.common-fees-coution {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-Medium);
}

@media (max-width: 768px) {
  .common-wrapper.__classes-fees:before {
    width: 300px;
    left: 3rem;
  }
  .classes-list-item {
    padding: 0 var(--space-md);
    gap: 1rem;
  }
  .classes-notice {
    padding: 0 var(--space-md);
  }
  .bnr_private-lesson {
    padding: 0 var(--space-md);
  }
  .common-section.__about {
    padding: 0;
  }
  .about-estudio-farol {
    padding: 0 var(--space-md);
  }
.common-section.__fees {
    padding: 5rem var(--space-md);
}
}
@media (max-width: 468px) {
  .common-wrapper.__classes-fees:before {
    width: 250px;
    left: 1rem;
    bottom: 3rem;
  }
.classes-notice {
    margin: 2rem 0;
    color: var(--main-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-Black);
}
  .classes-list-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c";
  }
  .about-estudio-farol {
    grid-template-columns: 1fr;
  }
  .common-section.__fees {
      padding: 0 var(--space-md) 3rem;
  }

}