@charset "UTF-8";

/*共通部分*/
html, body {
    font-family: 'Kiwi Maru', 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
    background-color: #FFFBCB;
    color: #333;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

/*メインビジュアル*/
.main-visual {
    background-color: #FFFBCB; /* カンプに合わせた優しい薄黄色 */
    padding: 60px 20px;
    text-align: center;
}

/* おとのわの丸たちを横並びにして中央に寄せる */
.otonowa-circles {
    display: flex;
    justify-content: center;
    gap: 15px; /* 丸と丸の間のすき間 */
    margin-bottom: 30px;
}

/* 丸の基本の形（カンプのあのぷっくりした形！） */
.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;  /* カンプに合わせて少し存在感を出しました */
    height: 65px;
    border-radius: 50%; /* これで綺麗な正円になります */
    font-size: 26px;    /* 文字をパッと見やすく */
    font-weight: bold;
    color: #ffffff;     /* 文字は白文字 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* ほんのり影をつけて、カンプみたいな立体感に */
}


.orange {
    background-color: #ff9800; /* 元気いっぱいのオレンジ */
}

.green {
    background-color:#8bc34a ; /* のびのび優しい若草色 */
}

.txt-music {
    color: #8bc34a;
    font-weight: bold; /* 文字を太くする魔法 */
    font-size: 28px; /* 音の文字を少し大きくして、存在感を出す */
}

.txt-smile {
    color: #ff9800;
    font-weight: bold; /* 文字を太くする魔法 */
    font-size: 28px; /* 笑顔の輪の文字を少し大きくして、存在感を出す */
}

/* ==========================================================================
   4. アニメーション設定（ふわっと浮き出るタイトル ＆ シャボン玉）
   ========================================================================== */

/* --- ① タイトルをふわっと出す魔法 --- */
.main-visual > * {
    animation: fadeInUp 1.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* 20px下から */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* 元の位置へじわっと昇る */
    }
}

/* --- ② シャボン玉全体の背景設定 --- */
.main-visual {
    position: relative; /* シャボン玉が飛び出さないように固定 */
    overflow: hidden;   /* 枠からはみ出たシャボン玉を隠す */
}

/* --- ③ シャボン玉の見た目と動き --- */
.bubble {
    position: fixed;   /* 💡 absolute から fixed に変更！これでスクロールしてもついてきます */
    bottom: -50px;     /* 画面の一番下からスタート */
    background-color: rgba(135, 206, 235, 0.4); 
    border: 1px solid rgba(30, 144, 255, 0.5);
    border-radius: 50%;
    pointer-events: none; 
    animation: floatUp linear forwards;
    z-index: 0;        /* 💡 一番背景に持っていくことで、文字や写真の邪魔をしないようにする */
}

/* 交互に並んだ文字たちがシャボン玉に隠れないように上に上げる */
.otonowa-circles, .main-title, .sub-title {
    position: relative;
    z-index: 10;
}

.otonowa-circles, .main-title {
    font-family: 'Mochiy Pop One', sans-serif;
}

/*コンセプト*/

.concept h2 {
    font-family: 'Zen Maru Gothic', sans-serif; /* 本文や見出しは読みやすい丸ゴシック */
    font-size: 32px; /* コンセプトの見出しは大きめにして、目を引くように */
    color: #ff9800;
    margin-bottom: 20px;
}

.concept {
    background-color: #e0fcff; /* 枠の中をパキッと白い背景にする */
    border: 3px solid #ff9800; /* おとのわオレンジの優しい太めのフチ線 */
    border-radius: 20px;       /* 角を丸くして可愛い雰囲気に（ここがポイント！） */
    
    /* 上下左右に適度な余白を作って、中の文字がフチにぶつからないようにする */
    padding: 40px 30px;        
    
    /* 画面の横幅いっぱいに広がらないように、最大幅を決めて中央に寄せる */
    max-width: 800px;
    margin: 60px auto;        /* 上下に60pxの隙間を作り、左右はautoで中央配置 */
    
    /* ほんのり優しい影をつけて、画面から少し浮き出た立体感を出す */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); 
    
    text-align: center;        /* 中の文字を中央揃えにする */
}

/*クラス紹介*/

.section-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 30px;
    color: #ff9800; 
    margin-bottom: 20px;
    text-align: center; /* 💡 文字列を中央に寄せるのは text-align が正解！ */
    animation: fadeInUp 1.5s ease-out forwards;
}

/* 👥 親要素：3つの円を横並びにする役割 */
.class-list-container {
    display: flex;
    flex-wrap: wrap;       /* 画面が狭くなったら折り返す */
    justify-content: center; /* 中央寄せ */
    gap: 30px;               /* 円と円の間のすき間 */
    padding: 60px 20px;
    width: 100%;             /* 横幅いっぱいに広げる */
}

/* 🟢 子要素：1つ1つの箱を「丸」にする役割 */
.class-list {
    background-color: #e0fcff; /* カンプに合わせた可愛い薄水色 */
    width: 380px;              /* 💡 文字がはみ出ないように少し大きめ（380px）がおすすめ！ */
    height: 380px;             /* 幅と同じにして綺麗な正方形のベースを作る */
    border-radius: 50%;        /* これで綺麗な丸になる！ */
    border: 5px solid #ff9800;  /* オレンジのフチ線 */
    
    /* 円の中の文字を上下左右の中央に集める魔法 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;             /* 円の内側の余白 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    color: #333;               /* 文字色を読みやすく */
}

/* 円の中の見出しや文字の微調整 */
.class-list h4 {
    font-size: 18px;
    color: #ff9800;
    margin-bottom: 8px;
    font-weight: bold;
}

.class-target {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.3;
}

.class-text {
    font-size: 13px;          /* 💡 丸の中に収まるように少し小さめにするのがコツ！ */
    line-height: 1.5;
}

/* シャボン玉が下から上へ昇るアニメーション */
@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 1; /* 出現した瞬間にクッキリ */
    }
    90% {
        opacity: 0.7;
    }
    100% {
        /* 💡 画面の一番上（-110vh = 画面の高さ1.1倍分）まで突き抜けさせる */
        transform: translateY(-110vh) translateX(50px); 
        opacity: 0; /* 上に着いたら消える */
    }
}


/*講師紹介*/

.teacher .section-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 30px;
    color: #ff9800; 
    margin-bottom: 20px;
    text-align: center;
}

/* 👥 講師紹介全体の水色ボックス */
.teacher {
    background-color: #e0fcff;
    width: 100%;
    max-width: 650px;       /* 💡 枠の横幅をここでちょうどいいサイズに固定！ */
    height: auto;           /* 縦長に伸びるのを防ぐお守り */
    padding: 50px 40px; 
    border-radius: 15px;
    border: 3px solid #ff9800;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
    margin: 60px auto;      /* 画面の中央に寄せる */
}

/* 📷 写真の設定（ここでサイズを調整できるよ！） */
.teacher-photo {
    width: 280px;           /* 💡 写真をもっと大きくしたいならここを300pxとかにしてみてね */
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* ✍️ 先生の名前（山田花子） */
.teacher-info h4 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}

/* 📜 経歴（リトミック研究センター〜2児の母）の行間 */
.teacher-info p {
    color: #333;
    line-height: 1.8;
}

/* 💌 💡 ここがポイント！「みなさん、はじめまして！」の文章設定 */
.teacher-greeting {
    margin-top: 30px;       /* 💡 これで「2児の母」との間に綺麗に1行以上の空き地ができます！ */
    border-top: 1px dashed rgba(255, 152, 0, 0.4); /* ついでに可愛い薄い点線を入れるとさらに見やすい！不要なら消してね */
    padding-top: 25px;
    text-align: center;
    font-size: 15px;
}

/*料金*/

.price {
    background-color: #e0fcff;
    width: 100%;
    max-width: 650px;       /* 💡 枠の横幅をここでちょうどいいサイズに固定！ */
    height: auto;           /* 縦長に伸びるのを防ぐお守り */
    padding: 50px 40px; 
    border-radius: 15px;
    border: 3px solid #ff9800;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
    margin: 60px auto;      /* 画面の中央に寄せる */
}

.h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}

.price-table p {
    color: #333;
    line-height: 1.8;
}

.price-note-area {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央に寄せる */
}

/* オレンジの矢印 */
.arrow {
    color: #ff9800;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* ふわふわ動く丸いバルーン */
.balloon-box {
    background-color: #e8fff8; /* 2枚目の画像の薄いミントグリーン */
    border: 2px solid #ffffff; /* 枠線を白にして馴染ませる */
    border-radius: 50%;        /* まん丸（楕円）にする魔法 */
    width: 260px;              /* 綺麗な楕円になるように横幅と高さを固定 */
    height: 160px;
    display: flex;
    align-items: center;       /* 文字を縦方向の中央にする */
    justify-content: center;   /* 文字を横方向の中央にする */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-top: 20px;
    
    /* 🚀 アニメーションの設定（3秒かけて往復、ずーっとループ） */
    animation: fuwafuwa 3s ease-in-out infinite alternate;
}

/* バルーンの中の文字 */
.balloon-text {
    color: #00e613 !important; /* 鮮やかなグリーン */
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4 !important;
}

/* 「500円！」だけちょっと大きく目立たせる */
.balloon-text span {
    font-size: 24px;
}

/* （今月末まで）の文字を少し小さく */
.balloon-text small {
    font-size: 16px;
    font-weight: normal;
}

/* 🚀 ふわふわ上下に揺れるアニメーションの動きの指定 */
@keyframes fuwafuwa {
    0% {
        transform: translateY(0); /* スタート位置 */
    }
    100% {
        transform: translateY(-10px); /* 10px上に浮く */
    }
}

/*住所*/

.address {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 40px;
}

.section-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 30px;
    color: #ff9800; 
    margin-bottom: 20px;
    text-align: center; /* 💡 文字列を中央に寄せるのは text-align が正解！ */
    animation: fadeInUp 1.5s ease-out forwards;
}
.address p {
    margin: 10px 0;
}

/*申し込みボタン*/

/* 💡 お申し込みエリア全体の背景（黄色い部分） */
.cta-section {
    background-color: #fffde0; /* 画像のような優しい薄黄色 */
    padding: 60px 20px;
    text-align: center;
    width: 100%;
    margin-top: 50px;
}

/* 🚀 水色の楕円形ボタン本体の設定 */
.pikapika-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    background-color: #8bc34a; /* 料金表とお揃いの綺麗な水色 */
    color: #fff;           /* 画像のような可愛いオレンジ文字 */
    font-size: 24px;          /* 文字をパッと大きく目立たせる */
    font-weight: bold;
    text-decoration: none;    /* リンクの下線を消すお守り */
    
    /* 楕円形にするための設定 */
    width: 90%;
    max-width: 450px;         /* スマホでもはみ出さない丁度いい横幅 */
    height: 100px;            /* 縦幅をしっかり持たせて丸みをつける */
    border-radius: 50px;      /* 縦幅（100px）の半分の数字にするときれいなカプセル型（楕円）になります */
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ほんのり影をつけて立体的に */
    transition: transform 0.2s;
    
    /* 🕒 アニメーション（1.2秒かけてじわっと点滅、ずーっとループ） */
    animation: chika-chika 1.2s ease-in-out infinite alternate;
}

/* マウスを乗せたときにちょっとだけ大きくする（パソコン用のおまけ機能） */
.pikapika-btn:hover {
    transform: scale(1.05);
}

@keyframes chika-chika {
    0% {
        opacity: 1;    /* はっきり見える状態 */
        filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6)); /* 💡 光ってる感を出すために、オレンジのネオンっぽい影をプラス！ */
    }
    100% {
        opacity: 0.2;  /* 💡 薄さを0.5から「0.2」まで落として、明暗の差を激しくしたよ！ */
        filter: drop-shadow(0 0 0px rgba(255, 152, 0, 0));
    }
}

/* パソコンではスマホ用の改行を無視する */
.sp-only {
    display: none;
}

/*スマホ版*/
@media screen and (max-width: 768px) {
.class-list-container {
        flex-direction: column;
        align-items: center;
    }

    .sp-only {
        display: inline;
    }
}