/* リセット & 基本 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { font-family: "游ゴシック体", YuGothic, sans-serif; background: #f9f9f9; color: #1a1a1a; text-align: center; }
html { scroll-padding-top: 60px; scroll-behavior: smooth; }
main { padding-top: 30px; }
footer { padding: 30px; background: #fff; }

/* ヘッダー・ナビ */
.header { position: fixed; top:0; left:0; right:0; height:60px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; z-index:1000; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.drawer_open { width:30px; height:30px; background:none; border:none; cursor:pointer; position:relative; z-index:1100; }
.drawer_open span,
.drawer_open span::before,
.drawer_open span::after {
  content:""; position:absolute; width:24px; height:3px; background:#333; transition:0.3s; left:0;
}
.drawer_open span { top:50%; transform:translateY(-50%); }
.drawer_open span::before { top:-8px; }
.drawer_open span::after { top:8px; }
.drawer_open.open span { background:transparent; }
.drawer_open.open span::before { transform:rotate(45deg) translate(5px,5px); }
.drawer_open.open span::after { transform:rotate(-45deg) translate(5px,-5px); }

.nav_content { position:fixed; top:0; left:0; right:0; height:100%; background:rgba(50,50,50,0.95); transform:translateY(-100%); transition:transform .3s; padding-top:60px; z-index:1000; }
.nav_content.open { transform:translateY(0); }
.nav_list { list-style:none; }
.nav_list li { margin:20px 0; }
.nav_link { color:#fff; text-decoration:none; font-size:16px; transition:color .3s; }
.nav_link:hover, .nav_link:focus { color:#f0c040; text-decoration:underline; }

/* PC対応 */
@media(min-width:768px) {
  .drawer_open { display:none; }
  .nav_content { position:static; transform:none!important; background:none; height:auto; padding:0; }
  .nav_list { display:flex; justify-content:flex-end; }
  .nav_list li { margin:0 10px; }
  .nav_link { color:#333; }
}

/* スライドショー */
a img { 
  border:none;
  verticle-align:top;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  }
a:hover img {
  opacity: 0.3;
  filter: alpha(opacity=80)
   }
#stage {
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
        width: 100%;
        height: 100%;
        object-fit: cover;	
        opacity:0;
	-moz-animation: imgTrans 30s infinite;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}
#photo1 img {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
#photo3 img {
	-moz-animation-delay: 12s;
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#photo4 img{
	-moz-animation-delay: 18s;
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}
#photo5 img {
	-moz-animation-delay: 24s;
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}

#frame {
  width: 100%;
  height: auto;
  position: relative;
  padding-top: 121.7%; /* ＝584 ÷ 480 × 100％でアスペクト比を維持 */
  overflow: hidden;
  text-align: center;
}

@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}


/* パララックス背景 */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:rgba(255,255,255,0.8);
  background-blend-mode:lighten;
}

/* 背景ごとの画像 */
.img-bg-01 {
  background-image: url('https://yabeyukihide.jp/hm/dance_cupple.jpg');
}
.img-bg-02 {
  background-image: url('https://yabeyukihide.jp/hm/dance_step.jpg');
}
.img-bg-03 {
  background-image: url('https://yabeyukihide.jp/seedbed/disco.jpg');
}
.img-bg-04 {
  background-image: url('https://yabeyukihide.jp/seedbed/umi.jpg');
}
.img-bg-05 {
  background-image: url('https://yabeyukihide.jp/hm/dance_step.jpg');

}

/* 各コンテンツ内のテキストスタイル */
.content {
  color: #1a1a1a;
  font-size: 2rem;
  padding: 2rem;
  writing-mode: horizontal-tb;
  text-align: left;
}

/* 各セクション内のスタイル */
section {
  margin: 30px 0;
}



/* スクロールボックス */
.scrollbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5rem;
  color: #fff;
  padding: 5%;
}

.scrollbox1 { background-color: #fff; color: #000; }
.scrollbox2 { background-color: #222; }
.scrollbox3 { background-color: #333; }
.scrollbox4 { background-color: #444; }
.scrollbox5 { background-color: #555; }
.scrollbox6 { background-color: #666; }


/* スマホ向けの固定背景設定を解除 */
@media (max-width: 767px) {
  .parallax-bg {
    background-attachment: scroll;
  }
}





/* レッスン詳細・アコーディオン */
.details { display:flex; flex-wrap:wrap; justify-content:space-between; list-style:none; max-width:800px; margin:1em auto; }
.details li { flex:calc(33% - 12px); max-width:250px; margin-bottom:12px; border-radius:8px; position:relative; overflow:hidden; }
@media(max-width:720px) { .details li { flex:calc(50% - 12px); } }
@media(max-width:520px) { .details { flex-direction:column; align-items:center; } .details li { flex:100%; max-width:100%; } }
.details img { width:100%; height:auto; border-radius:8px; transition:opacity .3s; }
.details li:hover img { opacity:.7; }
.details .text { display:grid; grid-template-rows:1fr auto 1fr; position:absolute; inset:0; padding:16px; background:rgba(220,102,136,.9); color:#fff; opacity:0; transform:translateY(100%); transition:opacity .6s, transform .6s; }
.details li:hover .text { opacity:1; transform:translateY(0); }
.details .readmore { font-size:16px; text-align:center; }

/* アコーディオン共通 */
.accordion-content { display:none; padding:1em; text-align:center; max-width:800px; margin:1em auto; }

/* マップ */
.map { width:100%; max-width:600px; margin:1em auto; }
.map iframe { width:100%; aspect-ratio:4/3; border:0; }

/* プロフィール */
.profile-wrapper { max-width:800px; margin:0 auto; padding:20px; }
.profile { display:flex; align-items:flex-start; gap:20px; margin-bottom:40px; border-bottom:1px solid #ccc; padding-bottom:20px; }
@media(max-width:768px) { .profile { flex-direction:column; align-items:center; } }
.profile-photo img { width:200px; border-radius:8px; }
.profile-text { text-align:left; flex:1; }
.profile-text h3 { margin-top:0; font-size:1.2rem; }
.profile-text p { margin:0.5em 0; line-height:1.6; }

/* その他 */
.contact-btn { width:200px; height:auto; }

/* 横スライドカルーセル */
.carousel-container {
  overflow: hidden;
  width: 100%;
  margin-top: 30px;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll-left 61s linear infinite;
  gap: 20px;
}

.carousel-track img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 6px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* FAQ */
/* 全体 */
.faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.faq h2 {
  font-size: 1.8em;
  margin-bottom: 1em;
  text-align: center;
}
.faq-category h3 {
  font-size: 1.4em;
  margin: 1em 0;
  border-left: 4px solid #0073e6;
  padding-left: 0.5em;
}

/* カードデザイン */
.faq-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-bottom: 1em;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.faq-card:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* 質問部分 */
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1em;
  font-size: 1em;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* 回答部分（スムーズ開閉用） */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1em;
  color: #555;
  line-height: 1.6;
  text-align: left;
  border-top: 1px solid #eee;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-card.active .faq-answer {
  max-height: 200px; /* 回答の高さに応じて調整 */
  padding: 1em;
}

/* Q / A アイコン */
.faq-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
}
.faq-icon.q {
  background: #0073e6; /* 青 */
}
.faq-icon.a {
  background: #ff6666; /* 赤 */
  margin-right: 8px;
}

/* ▼▽切り替えアイコン */
.faq-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #cccccc;
  font-size: 1.1em;
  color: #fff;
  flex-shrink: 0;
  margin-left: auto;
}
.arrow {
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

/* 開いた時に△っぽく（▽を180度回転させる） */
.faq-card.active .arrow {
  transform: rotate(180deg);
}


  /* 右下フローティングCTAボタン */
  :root{
    --brand:#ff3b30;
    --brand-dark:#d92f26;
    --shadow: 0 10px 30px rgba(255,59,48,.25);
    --radius:14px;
  }
  /* 汎用CTAボタン */
  .cta{
    display:inline-flex; align-items:center; gap:.6rem;
    min-height:52px; padding:0 20px;
    border-radius:var(--radius); border:0; cursor:pointer; text-decoration:none;
    color:#fff; background:var(--brand); font-weight:700; letter-spacing:.02em;
    box-shadow:var(--shadow); transition:transform .15s ease, background .2s ease;
    position:relative; z-index:1; /* ← FIX: 前面にする */
  }
  .cta:hover{
    transform:translateY(-3px);/* 上に3pxだけ浮かせる */
    background:var(--brand-dark)/* 色を少し濃くする */
  }
  .cta:active{transform:translateY(1px)}
  .cta:focus-visible{outline:3px solid #1112; outline-offset:3px}
  .cta .icon{width:22px;height:22px}


  /* 右下固定＋控えめパルス */
  .floating{
    position:fixed; right:18px; bottom:18px; z-index:9999;
  }
  .pulse{
    position:absolute; inset:-8px; border-radius:999px;
    box-shadow:0 0 0 0 rgba(255,59,48,.35);
    animation:pulse 2.2s infinite;
    pointer-events:none; /* ← FIX: hover/clickを邪魔しない */
    z-index:0;           /* ← FIX: CTAの背面に固定 */

  }
  @keyframes pulse{
    50%{ box-shadow:0 0 0 16px rgba(255,59,48,0) }
    100%{ box-shadow:0 0 0 0 rgba(255,59,48,0) }
  }
  /* 動きが苦手なユーザー設定を尊重 */
  @media (prefers-reduced-motion: reduce){
    .cta, .pulse{transition:none; animation:none}
  }
  /* モバイルで指が届きやすい余白 */
  @media (max-width:480px){
    .floating{right:14px; bottom:14px}
    .cta{min-height:50px}
  }


/* 問い合わせフォーム */
.contact-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-form input, .contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.contact-form button {
  cursor: pointer;
}