/*──────────────────────────────
0. SR-only
──────────────────────────────*/
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/*──────────────────────────────
0.5 ページフェード
──────────────────────────────*/
@keyframes pageFade{from{opacity:1}to{opacity:0}}
body::before{content:"";position:fixed;inset:0;background:#fff;z-index:9999;pointer-events:none;animation:pageFade 1s ease-out forwards}

/*──────────────────────────────
1. ベース
──────────────────────────────*/
*{box-sizing:border-box;margin:0;padding:0}
body{background:#bed3da;color:#333;font-family:"Sawarabi Mincho",sans-serif;font-size:15px;line-height:1.6;padding:1rem}
.wrapper{width:100%;max-width:960px;margin:1.5rem auto;background:#fff;border-radius:18px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:3rem}
@media(max-width:480px){.wrapper{padding:2rem 1.5rem}}

/*──────────────────────────────
2. 共通フェードイン
──────────────────────────────*/
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/*──────────────────────────────
3. ヒーロー
──────────────────────────────*/
.hero{text-align:center;margin:3rem 0 4rem}
.hero .logo{display:block;margin:2.5rem auto;width:968px;max-width:100%;opacity:0;animation:fadeInUp .6s ease-out .3s forwards}
.hero .catch-img{display:block;margin:0 auto 3rem;width:100%;max-width:800px;opacity:0;animation:fadeInUp .6s ease-out .6s forwards}
@media(max-width:480px){.hero .catch-img{margin:0 auto 2rem}}

.menu-toggle{position:fixed;top:1rem;right:1rem;width:2.5rem;height:2.5rem;background:#bed3da;border:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;cursor:pointer;opacity:0;animation:fadeInUp .6s ease-out 1.2s forwards;z-index:200}
.menu-toggle span{width:60%;height:3px;background:#fff;border-radius:2px;transition:background-color .3s}
.menu-toggle.open{background:#333}.menu-toggle.open span{background:#fff}

/*──────────────────────────────
4. ナビ
──────────────────────────────*/
.section-nav{position:fixed;top:0;right:0;width:80%;max-width:320px;height:100%;background:rgba(255,255,255,.95);padding:4rem 1.5rem;overflow-y:auto;z-index:150;display:flex;flex-direction:column;gap:1rem;transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.18,1)}
.section-nav.open{transform:translateX(0)}
.section-nav a{display:block;margin:.5rem 0;padding:.8rem;background:#bed3da;color:#000;text-decoration:none;border-radius:6px;text-align:center;font-weight:600;font-family:"M PLUS 1p",sans-serif}

/*──────────────────────────────
5. コース概要
──────────────────────────────*/
.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:2rem}
.overview-grid img{width:100%;border-radius:8px}

/*──────────────────────────────
A. セクション見出し（h2）
──────────────────────────────*/
.section h2{
  margin:0 0 1rem;
  padding-bottom:.15rem;
  text-align:center;
  font-family:"M PLUS 1p",sans-serif;
  font-weight:700;
  font-size:1.8rem;
  line-height:1.25;
  border-bottom:1px solid #bed3da;
}
/* 体験レッスンの見出しだけは下線を消す */
#trial h2{border-bottom:none;padding-bottom:0;margin-bottom:1.5rem}

/*──────────────────────────────
B. セクション区切り線  (.section-divider)
──────────────────────────────*/
.section-divider{border:none;border-top:1px solid rgba(0,0,0,.08);margin:2rem 0}

/*──────────────────────────────
C. 体験レッスン受付ボタンの下線を消す
──────────────────────────────*/
#trial .btn{text-decoration:none;border-bottom:none}

/*──────────────────────────────
7. 講師
──────────────────────────────*/
.teacher-photo{display:block;margin:1.5rem auto;width:100%;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.teacher-name{font-size:1.25rem;font-weight:700;margin:1rem 0 .5em;text-align:center}
.teacher-bio{max-width:540px;margin:0.5rem auto;padding:1.5em}
.teacher-bio p{margin:1em 0;text-indent:1.2em;line-height:1.7}

/*──────────────────────────────
8. 料金表
──────────────────────────────*/
.fee-images{display:grid;gap:1rem;grid-template-columns:1fr}
.fee-images img{width:100%;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.1)}

/*──────────────────────────────
9. アクセス
──────────────────────────────*/
#access iframe{width:100%;height:320px;border:0;margin-bottom:1rem}

/*──────────────────────────────
10. 汎用 CTA ボタン
──────────────────────────────*/
.cta{padding:1.5rem;background:rgba(190,211,218,.2);text-align:center}
.btn{display:inline-block;padding:.6rem 1.2rem;background:#bed3da;color:#000;text-decoration:none;border-radius:6px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.05);transition:opacity .3s}
.btn:hover{opacity:.9}

/*──────────────────────────────
11. コピーライト
──────────────────────────────*/
.site-footer{text-align:center;font-size:.7rem;color:#333}

/*──────────────────────────────
12. 見出しサイズ調整
──────────────────────────────*/
@media(max-width:480px){.section h2{font-size:1.3rem;line-height:1.4}}
@media(min-width:481px)and(max-width:768px){.section h2{font-size:1.6rem;line-height:1.5}}

/*──────────────────────────────
SNSリンク
──────────────────────────────*/
.sns-links{text-align:center;background:rgba(190,211,218,.1);padding:2rem 1rem;border-radius:12px;margin-top:3rem}
.sns-links h2{font-size:1.5rem;margin-bottom:1rem;font-family:"M PLUS 1p",sans-serif}
.sns-text{margin:1rem 0;font-size:1rem;line-height:1.6}
.sns-link{font-weight:700;color:#0077b6;text-decoration:none;border-bottom:1px dashed #0077b6}
.sns-link:hover{opacity:.8}
.social-icons{list-style:none;display:flex;justify-content:center;gap:2rem;margin-top:1.5rem;padding:0}
.social-icons li img{width:40px;height:40px}
.social-icons a:hover img{opacity:.8}

/*──────────────────────────────
13. 体験レッスン受付セクション (#trial)
──────────────────────────────*/
#trial{position:relative;background:linear-gradient(135deg,rgba(190,211,218,.6),rgba(190,211,218,.2));padding:2rem 1rem;border-radius:16px;text-align:center;margin-bottom:2rem;overflow:hidden}
#trial::before{content:"";position:absolute;top:1rem;left:1rem;right:1rem;bottom:1rem;border:2px solid #fff;border-radius:12px;pointer-events:none}
#trial h2{position:relative;z-index:1;font-family:"M PLUS 1p",sans-serif;font-size:1.6rem;color:#7d5a50;margin-bottom:1.5rem}
#trial .btn{position:relative;z-index:1;display:inline-block;padding:.8rem 1.6rem;background:#fff;color:#333;border:2px solid #0077b6;border-radius:50px;font-family:"M PLUS 1p",sans-serif;font-weight:600;text-decoration:none;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:opacity .3s}
#trial .btn:hover{opacity:.8}
#trial .trial-btn{display:inline-block;padding:1rem 2.2rem;background:#fff;color:#333;border:3px solid #bed3da;border-radius:9999px;font-family:"M PLUS 1p",sans-serif;font-size:1.1rem;line-height:1.45;font-weight:700;text-align:center;text-decoration:none;box-shadow:0 4px 8px rgba(0,0,0,.08);transition:opacity .25s,transform .15s}
#trial .trial-btn:hover{opacity:.85;transform:translateY(-2px)}
#trial .trial-btn:active{transform:translateY(0);opacity:.9}

/*──────────────────────────────
14. ご案内 / 個人情報 box
──────────────────────────────*/
.notice-block{margin-top:2.5rem;padding:1.8rem 1.4rem;background:#fafafa;border-radius:12px;font-family:"Sawarabi Mincho",serif}
.notice-block h3{display:flex;align-items:center;font-family:"M PLUS 1p",sans-serif;font-size:1.25rem;margin-bottom:1rem}
.notice-bar{display:inline-block;width:5px;height:1.4em;background:#bed3da;border-radius:3px;margin-right:.6em}
.notice-block p{font-size:.9rem;line-height:1.8}
@media(max-width:480px){.notice-block{padding:1.5rem 1rem}.notice-block h3{font-size:1.1rem}}

/*──────────────────────────────
★ 15. trial ページの LINE / Instagram アイコンを縮小
──────────────────────────────*/
#trial-form img[src$="line.jpeg"],
#trial-form img[src$="instagram.png"]{
  display:block;
  margin:1rem auto;
  max-width:65px;
  width:100%;
  height:auto;
}
/*──────────────────────────────*/

/* 初期状態（非表示） */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示状態 */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

/* ───────── セクション区切り線（余白だけ残す） ───────── */
.section-divider{
  border:none;
  height:3.5rem;
  margin:0;
}

.btn-outline{
  background:#fff; color:#333; border:2px solid #bed3da;
  border-radius:9999px; padding:.7rem 1.4rem; font-weight:700;
  text-decoration:none; transition:background .2s, color .2s;
}
.btn-outline:hover{ background:#bed3da; color:#000; }

/* 一行化＆モバイルだけ少しだけ縮める */
.btn-nowrap{
  white-space: nowrap;
  word-break: keep-all;
}
@media (max-width: 480px){
  .btn-nowrap{
    font-size: .95rem;
    padding: .6rem 1.1rem;
    letter-spacing: 0;
  }
}

/* 影なし・角丸なしで白背景に溶け込ませる */
.figure.figure--plain{
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* 余白も最小限にしたい場合（任意） */
.figure.figure--plain.is-tight{
  margin: .5rem auto;
}

/* 影なし・角丸なし（以前の指定を活かす） */
.figure.figure--plain{ box-shadow:none; border-radius:0; background:transparent; }

/* うさぎ画像：SNSカードより少し小さく */
.usagi-illust{
  display:block;
  margin: 1.2rem auto 0;
  width: min(520px, 50%);
  height:auto;
}
@media (min-width: 768px){
  .usagi-illust{ width: min(560px, 62%); }
}
/* うさぎイラストの上下にゆとりを追加 */
.usagi-illust{
  display:block;
  margin-top:  clamp(2.8rem, 4.5vw, 2.4rem);
  margin-bottom: clamp(3.0rem, 6.5vw, 3.4rem);
}

/* ボタンを厳密に中央に置く（Safariでも安定） */
.btn-center{
  display:table;        /* 内容幅で縮む（fit-content の誤差回避） */
  margin:1rem auto 0;   /* 左右 auto で中央 */
  text-indent:0;
}
/* 念のため、ボタン行でインデントを無効化 */
.btn-row{ text-align:center; margin-top:1rem; text-indent:0; }

/* （※ 以前あった .btn-center の display:block 版は削除） */