/* ==========================================================================
   Base & Global
========================================================================== */
body {
  margin: 0;
  background-image: url("../images/bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", sans-serif;
  color: #685126;
  overflow-x: hidden;
  --text: #685126;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Main Visual (MV)
========================================================================== */
.mv {
  position: relative;
  width: 100%;
  height: clamp(600px, 90vh, 900px);
}

.mv-visual {
  position: absolute;
  inset: 0 0 0 400px;
  z-index: 1;
  overflow: hidden;
}

.mv-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
  mask-image: url("../images/mv_mask.png");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: right top;
  -webkit-mask-image: url("../images/mv_mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: right top;
}

.mv-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: mvZoomFade 20s infinite;
}

.mv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.mv-slide:nth-child(1) { animation-delay: 0s; }
.mv-slide:nth-child(2) { animation-delay: 4s; }
.mv-slide:nth-child(3) { animation-delay: 8s; }
.mv-slide:nth-child(4) { animation-delay: 12s; }
.mv-slide:nth-child(5) { animation-delay: 16s; }

@keyframes mvZoomFade {
  0%   { opacity: 0; transform: scale(1); }
  5%, 20% { opacity: 1; }
  25%  { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; }
}

.mv-keys {
  position: absolute;
  left: 400px;
  right: 0;
  bottom: -80px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 5%;
  pointer-events: none;
  z-index: 5;
}

.keys-group {
  display: flex;
  gap: 32px;
}

.keys-space {
  width: 90px;
}

.key {
  width: 50px;
  height: 150px;
  background: #b49463;
  border-radius: 10px;
  opacity: 0.9;
  display: block;
  animation: keyFloat 2.4s ease-in-out infinite alternate;
}

@keyframes keyFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-26px); }
}

.key-1  { animation-delay: 0s; margin-top: 10px; }
.key-2  { animation-delay: .3s; margin-top: 0; }
.key-3  { animation-delay: .6s; margin-top: 18px; }
.key-4  { animation-delay: .15s; margin-top: 4px; }
.key-5  { animation-delay: .5s; margin-top: 12px; }
.key-6  { animation-delay: .25s; margin-top: 6px; }
.key-7  { animation-delay: .7s; margin-top: 20px; }
.key-8  { animation-delay: .4s; margin-top: 2px; }
.key-9  { animation-delay: .9s; margin-top: 14px; }
.key-10 { animation-delay: .65s; margin-top: 8px; }

.mv-catch {
  position: absolute;
  top: 50px;
  left: 150px;
  z-index: 10;
  letter-spacing: 0.1em;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.5;
}

.mv-catch .indent {
  display: inline-block;
  margin-left: 300px;
}

.mv-subcatch {
  position: absolute;
  top: 400px;
  left: 300px;
  display: flex;
  gap: 30px;
  z-index: 20;
  align-items: flex-start;
}

.subcard {
  writing-mode: vertical-rl;
  background: rgba(255, 255, 255, 0.9);
  padding: 40px 15px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: 0.4em;
  text-align: center;
  font-weight: 900;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.mv-subcatch .subcard:nth-child(1) { margin-top: -40px; }
.mv-subcatch .subcard:nth-child(2) { margin-top: 40px; }

/* Scroll Indicator */
.container_03 {
  margin: 0;
  padding-left: clamp(20px, 5vw, 70px);
  height: 1600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.scroll-down_03 {
  position: relative;
  width: 200px;
  height: 200px;
  color: #A58A57;
  font-family: serif;
  text-decoration: none;
}

.circle-text_03 {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}

.circle-text_03 span {
  position: absolute;
  left: 50%;
  font-size: 16px;
  transform-origin: 0 100px;
}

.mouse_03 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 30px;
  border: 1px solid #A58A57;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.mouse_03::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 1px;
  height: 6px;
  background-color: #A58A57;
  transform: translateX(-50%);
  animation: scroll_03 2s infinite;
}

@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes scroll_03 {
  0% { top: 5px; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 15px; opacity: 0; }
}

/* ==========================================================================
   Concept Section
========================================================================== */
.concept {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 120px 0 140px;
  background: url("../images/consept_bg.png") center top / cover no-repeat;
}

.concept-inner {
  width: 100%;
  padding: 0 clamp(20px, 5vw, 50px);
  box-sizing: border-box;
}

.concept-header-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.concept-flower {
  width: clamp(120px, 15vw, 220px);
  height: auto;
  flex-shrink: 0;
}

.concept-heading-text {
  display: flex;
  flex-direction: column;
  padding-top: clamp(40px, 10vw, 120px);
}

.concept-label-en {
  margin: 0 0 34px;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.25em;
  color: #c89a3b;
  font-weight: 500;
}

.concept-copy {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 2.0;
  font-weight: 700;
  letter-spacing: 0.25em;
}

.concept-content {
  margin-top: 80px;
}

.concept-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 80px);
}

.concept-images {
  position: relative;
  width: 45%;
  min-height: 500px;
}

.concept-images .img-top {
  position: absolute;
  top: 0;
  right: 20px;
  width: 30%;
  height: auto;
}

.concept-images .img-bottom {
  position: absolute;
  bottom: 0;
  top: 120%;
  left: 100px;
  width: 50%;
  height: auto;
}

.concept-text {
  width: 50%;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 3.0;
  font-weight: 600;
}

/* ==========================================================================
   Buttons (Shared Styles)
========================================================================== */
.button-container {
  text-align: center;
  width: 100%;
}

.concept-button, .feature-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  height: 64px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #4b3b2b;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid #c8b28a;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(3px);
  transition: all .3s ease;
  box-sizing: border-box;
}

.concept-button {
  margin-top: 60px;
}

.feature-button {
  margin-top: 0;
  margin-bottom: 0;
}

.concept-button .arrow, .feature-button .arrow {
  margin-left: 40px;
  font-size: 24px;
  transition: transform .3s ease;
}

.concept-button:hover, .feature-button:hover {
  background: #A58A57;
  border-color: #A58A57;
  color: #ffffff;
  transform: translateY(-3px);
}

.concept-button:hover .arrow, .feature-button:hover .arrow {
  transform: translateX(6px);
}

.concept-button, .feature-button, .courseCard__btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   Fade Animations
========================================================================== */
.js-fadeup {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(0.22, 1, 0.36, 1), filter .9s ease-out;
}
.js-fadeup.is-show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.js-fadeimg {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(10px);
  transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 1.1s ease-out;
}
.js-fadeimg.is-show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.img-top.js-fadeimg { transition-delay: .1s; }
.img-bottom.js-fadeimg { transition-delay: .25s; }

/* ==========================================================================
   FEATURE Section (Modified for Horizontal Scroll & Center Sticky)
   参照サイト同様の sticky + translateX 方式
========================================================================== */
/* ==========================================================================
   FEATURE Section (修正版)
========================================================================== */
.featureX {
  position: relative;
  width: 100%;
}

.featureX__spacer {
  /* JSで動的に高さを計算するため、初期値は適当でOK */
  height: 200vh;
}

.featureX__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url("../images/bg2.png") center / cover no-repeat;
  overflow: hidden;
  z-index: 1;
}

.featureX__inner {
  width: min(1100px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* タイトルエリア */
.feature__head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 56px;
}

.feature__titleBlock { text-align: center; min-width: 220px; }
.feature__labelEn { font-size: clamp(24px, 4vw, 34px); letter-spacing: 0.25em; color: #c89a3b; font-weight: 500; margin: 0; }
.feature__labelJa { margin: 12px 0 0; font-size: clamp(16px, 2vw, 20px); color: var(--text); font-weight: 500; letter-spacing: 0.2em; }
.feature__subTitle { margin: 0; font-size: clamp(18px, 3vw, 24px); line-height: 1.6; color: var(--text); font-weight: 500; letter-spacing: 0.25em; }
.feature__lead { margin: 16px 0 0; font-size: clamp(14px, 2vw, 18px); line-height: 2.0; color: var(--text); font-weight: 500; }

/* スライドエリア */
.featureX__viewport {
  width: 100%;
  position: relative;
  margin-top: 40px;
}

.featureX__track {
  width: 100%;
  /* 左端の開始位置をコンテンツ幅に合わせる */
  padding-left: max(16px, calc((100vw - 1100px) / 2));
  box-sizing: border-box;
}

/* ★重要：カードを横一列に並べる */
.feature__cards {
  display: flex;
  gap: 50px;
  width: max-content; 
  will-change: transform;
}

.featureCard {
  width: min(500px, 85vw);
  background: #fff;
  border-radius: 999px 999px 100px 100px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 60px 40px 100px;
  position: relative;
  flex: 0 0 auto; /* 横幅を固定して維持 */
  box-sizing: border-box;
}

/* カード内装飾（既存のまま） */
.featureCard__num {
  width: 56px; height: 56px; margin: 0 auto 30px; display: grid; place-items: center; position: relative; border-radius: 999px; font-size: 18px; letter-spacing: .1em; z-index: 2;
}
.featureCard__num::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(135deg, #EFDEA8 0%, #C2ECDB 100%); filter: blur(6px); transform: scale(1.15); opacity: .95; box-shadow: 0 0 26px rgba(239,222,168,.55), 0 0 28px rgba(194,236,219,.60); z-index: -1;
}
.featureCard__title { margin: 0 0 30px; text-align: center; font-size: 18px; line-height: 1.8; color: var(--text); font-weight: 800; }
.featureCard__img { border-radius: 12px; overflow: hidden; }
.featureCard__img img { display: block; width: 100%; height: auto; }

.featureCard__keys {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -18px; width: 60%; height: 56px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none;
}
.keysGroup { display: flex; gap: 10px; }
.keyBar { width: 20px; height: 60px; background: #cbbfa8; border-radius: 4px; position: relative; }
.keyBar:nth-child(1){ top: 6px; }
.keyBar:nth-child(2){ top: -4px; }
.keyBar:nth-child(3){ top: 10px; }

.feature__flower {
  position: absolute;
  right: calc(100% + 50px);
  top: -120px;
  transform: translateY(-50%);
  width: clamp(100px, 15vw, 160px);
  height: auto;
  pointer-events: none;
}

/* フッターボタンエリア */
.featureX__sticky > .button-container {
  margin-top: 40px;
}

.feature__flower2 {
  position: absolute; right: 0; bottom: -10px; transform: translateY(50%); width: clamp(100px, 15vw, 160px); height: auto; z-index: 2; pointer-events: none;
}


/* ==========================================================================
   Lesson Course
========================================================================== */
.lesson-course {
  margin-top: clamp(100px, 15vw, 200px);
  padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 260px);
}

.lesson-course__inner { max-width: 1400px; margin: 0 auto; }
.lesson-course__head { text-align: left; }

.lesson-course__labelEn {
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: 0.25em;
  color: #c89a3b;
  font-weight: 500;
  margin: 0;
}

.lesson-course__labelJa {
  margin-top: 12px;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--text);
}

.lesson-course__lead {
  margin: 40px 0 0;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 2.0;
  color: var(--text);
  font-weight: 500;
}

.courseCards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1400px;
  margin: clamp(60px, 10vw, 120px) auto 0;
  gap: 60px;
}

.courseCard {
  position: relative;
  width: 100%;
  max-width: 400px;
  flex: 0 1 400px;
  opacity: 0;
  transform: translateY(40px);
}

.courseCard__glow {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}

.courseCard__glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #EFDEA8 0%, #C2ECDB 100%);
  filter: blur(10px);
  transform: scale(1.25);
  opacity: .95;
  box-shadow: 0 0 26px rgba(239,222,168,.55), 0 0 28px rgba(194,236,219,.60);
}

.courseCard__photo { overflow: hidden; }
.courseCard__photo img { display: block; width: 100%; height: auto; }

.courseCard__body {
  background: #fff;
  border-radius: 0 0 20px 20px;
  padding: 26px 28px 28px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.courseCard__title {
  margin: 0;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--text);
  font-weight: 600;
}

.courseCard__line {
  display: block;
  width: 100px;
  height: 1px;
  background: #c89a3b;
  margin: 14px 0 18px;
}

.courseCard__text {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 2.0;
  color: var(--text);
  flex-grow: 1;
}

.courseCard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin: auto auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(200,154,59,.7);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  transition: all .3s ease;
  box-sizing: border-box;
}

.courseCard__btn .arrow {
  margin-left: 20px;
  font-size: 18px;
  transition: transform .3s ease;
}

.courseCard__btn:hover {
  background: #A58A57;
  border-color: #A58A57;
  color: #ffffff;
  transform: translateY(-3px);
}

.courseCard__btn:hover .arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   Place Section
========================================================================== */
.place {
  position: relative;
  padding: 120px clamp(24px, 6vw, 120px);
  background: url("../images/bg2.png") center / cover no-repeat;
  margin-top: 10%;
  margin-bottom: -170px;
  padding-bottom: calc(120px + 170px);
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s ease;
}

.place__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 80px);
  padding-left: clamp(20px, 6vw, 120px);
}

.place__flower {
  position: absolute;
  left: clamp(20px, 3vw, 100px);
  top: 0;
  transform: translateY(-55%);
  width: clamp(100px, 15vw, 180px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.place__content {
  position: relative;
  z-index: 3;
  flex: 1 1 560px;
  max-width: 620px;
}

.place__titleBlock { margin-bottom: 24px; }
.place__labelEn { 
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: .25em;
  color: #c89a3b;
  font-weight: 500;
}
.place__labelJa { 
  margin: 12px 0 0;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.place__subTitle { margin: clamp(40px, 6vw, 80px) 0 18px; font-size: clamp(18px, 3vw, 24px); line-height: 1.8; color: var(--text); font-weight: 600; }
.place__lead { margin: 0; font-size: clamp(14px, 2vw, 18px); line-height: 2.1; color: var(--text); font-weight: 500; }
.place .concept-button { margin-top: 36px; }

.place__media {
  flex: 0 0 min(520px, 100%);
  display: flex;
  justify-content: flex-end;
}

.place_image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 36px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

/* Slideshow */
.slideshow-wrap { display: flex; align-items: center; overflow: hidden; }
.slideshow {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  flex-shrink: 0;
  width: max-content;
  animation: loop-slide 40s linear infinite;
}

.slideshow-image { display: block; height: clamp(200px, 30vw, 340px); width: auto; }

@keyframes loop-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ==========================================================================
   Gallery Section
========================================================================== */
.gallery { text-align: center; margin-top: clamp(200px, 15vw, 250px); }
.gallery__labelEn { 
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: .25em;
  color: #c89a3b;
  font-weight: 500; 
}
.gallery__labelJa { 
  margin-top: 12px;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--text);
}
.gallery__text { margin-top: 35px; font-size: clamp(14px, 2vw, 18px); line-height: 2.1; color: var(--text); font-weight: 500; }

.ytGrid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0 clamp(20px, 4vw, 40px);
}

.ytCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 48px;
  opacity: 0;
  transform: translateY(40px);
}

.ytEmbed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

.ytEmbed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Instagram Section
========================================================================== */
.instagram {
  margin-top: clamp(100px, 15vw, 150px);
  padding: clamp(80px, 10vw, 140px) 20px;
  background: url("../images/insta_bg.png") center / 100% no-repeat;
}

.instagram__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.instagram__flower { width: clamp(120px, 15vw, 180px); }
.instagram__title { font-size: clamp(28px, 5vw, 42px); letter-spacing: .25em; font-weight: 500; margin-bottom: 50px; }
.snapwidget-widget { width: 100%; height: 420px; border: none; }

/* ==========================================================================
   Global Animations (JS Triggered)
========================================================================== */
.js .place,
.js .lesson-course,
.js .presentation,
.js .instagram,
.js .gallery {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s cubic-bezier(.25,.1,.25,1), transform .9s cubic-bezier(.25,.1,.25,1);
}

.place.is-show,
.lesson-course.is-show,
.presentation.is-show,
.instagram.is-show,
.gallery.is-show {
  opacity: 1;
  transform: translateY(0);
}

.lesson-course.is-show .courseCard,
.gallery.is-show .ytCard {
  opacity: 1;
  transform: none;
  transition: .6s;
}

.courseCard:nth-child(1) { transition-delay: .1s; }
.courseCard:nth-child(2) { transition-delay: .2s; }
.courseCard:nth-child(3) { transition-delay: .3s; }
.courseCard:nth-child(4) { transition-delay: .4s; }
.courseCard:nth-child(5) { transition-delay: .5s; }

.ytCard:nth-child(1) { transition-delay: .15s; }
.ytCard:nth-child(2) { transition-delay: .3s; }
.ytCard:nth-child(3) { transition-delay: .45s; }

/* ==========================================================================
   Responsive
========================================================================== */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (max-width: 1200px) {
  .mv-visual { inset: 0 0 0 200px; }
  .mv-keys { left: 200px; }
  .mv-catch { left: 80px; }
  .mv-subcatch { left: 200px; }

  .place__inner {
    flex-direction: column;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
  }
  .place__content {
    max-width: 100%;
    margin-bottom: -50px;
  }
  .place__media {
    display: none;
  }
  .place_image {
    border-radius: 20px;
    object-fit: cover;
  }
  .place .concept-button {
    display: inline-flex;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 900px) {
 .mv { height: 50vh; min-height: 500px; margin-top: 100px;}
  .mv-visual { inset: 0px 0px 0px 40px; } 
  
  /* ★ここを修正：マスク画像をモバイル用に切り替え */
  .mv-visual-inner { 
    mask-image: url("../images/mv_mask_mobile.png"); 
    -webkit-mask-image: url("../images/mv_mask_mobile.png"); 
    mask-size: 100% 100%;
    mask-position: center bottom;
    background: none; 
  }

  /* ★ここを修正：鍵盤の出し分けと位置調整 */
  .is-pc-only { display: none !important; }
  .is-sp-only { display: flex !important; }

  .mv-keys.is-sp-only {
    bottom: -40px;
    justify-content: center;
    padding-right: 0;
    right: 5%;
  }
  .key {
  width: 200px;
  height: 150px;
  background: #b49463;
  border-radius: 5px;
  opacity: 0.9;
  display: block;
  animation: keyFloat 2.4s ease-in-out infinite alternate;
}
  .mv-keys.is-sp-only .keys-space {
    width: 60px;
  }
  
  .mv-catch {
    top: 15%; 
    left: 5%;
    font-size: clamp(32px, 8vw, 48px);
  }
  .mv-catch .indent { margin-left: 160px; display: block; } 
  .mv-subcatch { top: auto; left: 5%; gap: 15px; }
  .subcard { padding: 25px 10px; font-size: 18px; }
  .concept-header-row { 
    flex-direction: column; 
    align-items: flex-start;
    text-align: left;
  }
  .concept-heading-text { padding-top: 20px; }
  .concept-row { flex-direction: column; }
  .concept-images {
    display: none;
  }
  .concept-images .img-top {
    position: relative;
    width: 48%;
    margin: 0;
    right: auto;
  }
  .concept-images .img-bottom {
    position: relative;
    top: auto;
    left: auto;
    width: 48%;
    margin-top: 40px;
    z-index: 2;
  }
  .concept-text { width: 100%; text-align: justify; line-height: 2.2; }

  .feature__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .feature__titleBlock {
    text-align: left;
  }
  .feature__textBlock {
    width: 100%;
    text-align: left;
  }
  .feature__flower { display: none; }
  .featureX__spacer {
    height: auto !important;
  }
  .featureX__sticky {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .featureX__track {
    transform: none !important;
    width: 100% !important;
  }
  .featureX__viewport {
    margin: 40px auto;
    padding: 0 20px;
  }
  .feature__cards {
    flex-direction: column;
    align-items: center;
    gap: 100px;
    padding-left: 0;
  }
  .featureCard {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .featureCard__keys {
  width: 80%;
}
  #feature .feature__titleBlock,
  #feature .feature__textBlock,
  #feature .feature-button {
    opacity: unset;
    transform: unset;
    filter: unset;
    transition: unset;
  }
}

/* --- 640px以下：スマホ --- */
@media (max-width: 640px) {
  .mv-catch { top: -20%; }
  .mv-subcatch { bottom: 50px; }
  .subcard { font-size: 16px; letter-spacing: 0.2em; }
  .keys-group { gap: 12px; }
  .key { width: 25px; height: 80px; }
  .keys-space { width: 20px; }
  .concept-copy { font-size: 22px; letter-spacing: 0.15em; }
  .featureCard { 
    width: 85vw; padding: 40px 20px 80px; 
    border-radius: 500px 500px 50px 50px; 
  }
  .featureCard__img img { width: 100%; height: 100%; object-fit: cover; }
  .lesson-course { padding: 60px 20px; }
  .instagram { background-size: cover; }
  .ytGrid { grid-template-columns: 1fr; }
}

/* --- 480px以下 --- */
@media (max-width: 480px) {
  .place__content .concept-button { max-width: 100%; padding: 0 20px; font-size: 14px; }
}