/* 全体統一 */

html, body {
    overflow-x: hidden; /* ★ページ全体で横スクロールを禁止 */
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #FFFCF5;
    overflow-x: hidden; /* 横スクロールをなくす */
    align-items: flex-start;    /* 水平方向の左揃えに変更 */
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

h2 {
    color: #775A42;
    font-size: 40px;
    padding-bottom: 56px;
}

h3 {
    color: #F68467;
    font-size: 24px;
    padding-bottom: 5px;
}

p {
    color: #775A42;
    font-size: 20px;
    line-height: 2.5; /* 行間指定 */
}


/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden; /* 横スクロールをなくす */
        align-items: flex-start;    /* 水平方向の左揃えに変更 */
    }

    h2 {
        font-size: 24px;
        padding-bottom: 30px;
    }

    h3 {
        font-size: 14px;
    }

    p {
        font-size: 14px;
        line-height: 1.9; /* 行間指定 */
    }
}







/* ヘッダー本体のスタイル */
.site-header {
    /* 1. 配置とサイズ */
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;     /* 横幅を画面100%に */
    height: 80px;    /* ヘッダーの高さ */
    z-index: 1000;   /* 他の要素より手前に表示 */

    /* 2. デザイン */
    background-color: #fff; /* 背景は白 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 画像にあるような薄い影 */

    /* 3. 中身の配置 (Flexbox) */
    display: flex;
    justify-content: space-between; /* 両端に寄せる */
    align-items: center;            /* 上下中央揃え */
    padding: 0 4%;                  /* 左右に余白を設定 */
    box-sizing: border-box;         /* paddingを含めてwidth:100%にする */

    /* 4. 表示/非表示のアニメーション */
    transform: translateY(-100%); /* 初期状態では画面の外(上)に隠す */
    transition: transform 0.4s ease-in-out; /* 0.4秒かけてスライド表示 */
}

/* JavaScriptでこのクラスが付くとヘッダーが表示される */
.site-header.is-visible {
    transform: translateY(0); /* 画面内に表示 */
}

/* 左側のロゴのスタイル */
.header-logo img {
    height: 40px; /* ヘッダーの高さに合わせて調整 */
    width: auto; /* 縦横比を維持 */
    vertical-align: middle; /* 画像の下の余白を消す */
}

/* 中央のナビゲーションメニューのスタイル */
.header-nav ul {
    display: flex; /* 横並びにする */
    list-style: none;
    gap: 32px; /* 項目間のスペース */
}

.header-nav a {
    text-decoration: none;
    color: #775A42; 
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
}

/* ナビゲーションのホバーエフェクト（下線） */
.header-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #F68467;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
}

.header-nav a:hover::after {
    transform: scaleX(1);
}

/* 右側のボタンのスタイル */
.header-button a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    background-color: #F68467;
    border-radius: 40px;
    padding: 15px 28px;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.header-button a:hover {
    background-color: #e07054;
}


/* ハンバーガーボタン本体 */
.hamburger {
    display: none; /* ★PCでは非表示 */
    position: relative;
    z-index: 100; /* メニューより手前に表示 */
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* ハンバーガーの三本線 */
.hamburger-bar {
    display: block;
    position: absolute;
    left: 5px;
    width: 30px;
    height: 2px;
    background-color: #775A42;
    transition: all 0.3s ease-in-out;
}

.hamburger-bar:nth-child(1) { top: 10px; }
.hamburger-bar:nth-child(2) { top: 19px; }
.hamburger-bar:nth-child(3) { top: 28px; }


/* --- スマホ表示のスタイル (`max-width: 768px`) --- */
@media screen and (max-width: 768px) {  
    /* PC用の右側ボタンを非表示に */
    .site-header .header-button {
        display: none;
    }
    /* ハンバーガーボタンを表示 */
    .hamburger {
        display: block;
    }

    /* ナビゲーションメニューのスタイルをスマホ用に変更 */
    .header-nav {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 99;
        width: 280px; /* メニューの幅 */
        height: 100vh; /* 画面全体の高さ */
        background-color: rgba(255, 252, 245, 0.588); /* 半透明の背景 */
        backdrop-filter: blur(5px);
        padding-top: 100px; /* 上部に余白 */
        
        /* ★初期状態では画面の外（右側）に隠す */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
    }

    /* スマホメニュー内のリストのスタイル */
    .header-nav ul {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        gap: 25px;
    }
    .header-nav a {
        font-size: 18px;
        font-weight: bold;
    }

    
    /* メニューを画面内に表示 */
    .site-header.is-open .header-nav {
        transform: translateX(0);
    }

    /* ハンバーガーを「×」印に変形 */
    .site-header.is-open .hamburger-bar:nth-child(1) {
        top: 19px;
        transform: rotate(45deg);
    }
    .site-header.is-open .hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    .site-header.is-open .hamburger-bar:nth-child(3) {
        top: 19px;
        transform: rotate(-45deg);
    }
}


















/* top-page */



.top-page {
    display: flex;
}

/* top-page-left */

.top-page-left {
    margin-left: 5%;
}

/* ロゴ */
.top-page-left img {
    width: 250px;
    height: 250px;
    margin-top: 20px;
}

.nav-top ul {
    list-style: none;
}

.nav-top li {
    margin-bottom: 30px;
}


.nav-top a {
    /* 1. 配置の基準設定 */
    position: relative;
    display: inline-flex; /* ★ テキストと疑似要素を整列させるためflexに変更 */
    align-items: center;  /* ★ 上下中央揃え */

    /* 2. デザインの共通部分 */
    text-decoration: none;
    color: #fff;
    font-size: 24px; /* 少し大きくするとバランスが良くなります */
    background-color: #D1AD92;
    border-radius: 63px;
}

/* ★ 左側の円形画像を::beforeで作成 */
.nav-top a::before {
    content: '';
    position: absolute;
    left: 5px; /* ボタンの左端からの距離 */
    top: 50%;
    transform: translateY(-50%);

    width: 45px;  /* 円の幅 */
    height: 45px; /* 円の高さ */

    background-image: url('image/wood.png'); /* 画像を指定 */
    background-size: cover;
    background-position: center;
}


/* paddingでテキストの位置を調整 */
.nav-top .box-1 {
    padding: 10px 50px 10px 65px;
} 

.nav-top .box-2 {
    padding: 10px 95px 10px 65px;
}

/* 下線のホバーアニメーション（変更なし）
*/
.nav-top a::after {
    width: 60%;
    left: 25%;
    content: '';
    position: absolute;
    height: 1.5px;
    background: #6F4E37;
    bottom: 8px; /* 位置を微調整 */
    transform: scale(0, 1);
    transform-origin: center; /* 中央から広がるように変更 */
    transition: transform 0.3s;
}

.nav-top a:hover::after {
    transform: scale(1, 1);
}



/* 無料体験申込はこちら */
.box-3 {
    margin-top: 70px;
}

.box-3 a {
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    background-color: #F68467;
    font-weight: bold;       /* 文字を太くする */
    border-radius: 40px;
    padding: 28px 40px;
    white-space: nowrap; /* 折り返さないようにする */
}

.box-3 a:hover {
    background-color: #e07054; /* 少し暗い色に */
}



/* top-page-right */
.top-page-right {
    position: relative;
    margin-left: 80px;
    /* コンテナ自体のサイズを画像のサイズに合わせておくとレイアウトが安定します */
    width: 1350px;
    height: 800px;
}


/* スライダー全体のコンテナ */
.slider-container {
    position: relative; /* 中の画像を絶対位置で配置するための基準 */
    width: 100%;
    height: 100%;
    border-top-left-radius: 206px; /* 角丸をコンテナに適用 */
    border-bottom-left-radius: 206px;
    overflow: hidden;      /* 角丸からはみ出す部分を隠す */
    position: relative;
}

.slider-container h1 {
    font-size: 56px;
    color: #fff;
    position: absolute;
    bottom: 70px;
    left: 90px;
}

/* スライダー内の各画像（slide-item）のスタイル */
.slider-container .slide-item {
    /* 画像を重ねるための設定 */
    position: absolute;
    top: 0;
    left: 0;

    /* 親コンテナいっぱいに広げる */
    width: 100%;
    height: 100%;

    object-fit: cover; /* 縦横比を維持したまま全体を覆う */

    /* フェード効果の設定 */
    opacity: 0; /* 基本は透明にして非表示 */
    transition: opacity 1.5s ease-in-out; /* 1.5秒かけてフワッと切り替わるように設定 */
}

/* 表示する画像に適用するactiveクラス */
.slider-container .slide-item.active {
    opacity: 1; /* 透明度を1にして表示状態にする */
}


.top-page-right .blue-circle {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 10px;
    left: -80px;
}

.top-page-right .yellow-circle {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: -50px;
    right: 170px;
}




/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {

    /* .top-page-left クラスを持つ要素とその中身をすべて非表示にする */
    .top-page-left {
        display: none;
    }

    .top-page-right .blue-circle {
        width: 150px;
        height: 150px;
    }

    .top-page-right .yellow-circle {
        display: none;
    }

    .top-page-right h1 {
        font-size: 30px;
        position: absolute;
        bottom: 580px;
        left: 80px;
    }
  
}










/* アニメーション全体を囲むコンテナ */
.animation-container {
    margin-top: 100px;
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center;    /* 要素を中央揃えにする */
  }
  
  /* 「SCROLL」テキストのスタイル */
  .scroll-text {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.2em; /* 文字と文字の間隔 */
    color: #775A42;
    text-indent: 0.2em; /* letter-spacingによるズレを補正 */
    margin-bottom: 24px;   /* 線との間の余白 */
  }
  
  /* アニメーションの線のスタイル */
  .line-container {
    width: 3px;  /* 線の太さ */
    height: 70px; /* 線の長さ */
    background-color: #e6e6e6; /* 背景の薄いグレーの線 */
    position: relative; /* 赤い線を重ねるための基準 */
  }
  
  /* 疑似要素(::before)を使ってアニメーションする赤い線を作成 */
  .line-container::before {
    content: ''; /* 疑似要素には必須 */
    position: absolute; /* 親要素を基準に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5BA5D0; /* 赤色 */
    
    /* アニメーションを適用 */
    /* animation: [名前] [時間] [変化の仕方] [繰り返し]; */
    animation: stretch-and-shrink 4.0s ease-in-out infinite;
  
    /* transform（変形）の基点を上端に設定 */
    transform-origin: top;
  }
  
  /* アニメーションの動きを定義 (キーフレーム) */
  @keyframes stretch-and-shrink {
    /* アニメーション開始時 (0%) と終了時 (100%) */
    0%, 100% {
      transform: scaleY(0.15); /* Y軸方向(垂直)に15%の大きさに縮小 */
    }
    /* アニメーションの中間地点 (50%) */
    50% {
      transform: scaleY(1); /* Y軸方向に等倍の大きさ（元の高さ）に拡大 */
    }
  }

















/* about */



.about {
    text-align: center;
    margin-top: 200px;
    margin-bottom: 400px;
    position: relative;
}

.about .yellow-circle {
    position: absolute;
    top: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
}

.about .green-square {
    position: absolute;
    top: -200px;
    right: 200px;
    transform: rotate(30deg);
    width: 150px;
    height: 150px;
}

.about .blue-triangle {
    position: absolute;
    bottom: -200px;
    left: 190px;
    transform: rotate(20deg);
    width: 200px;
    height: 200px;
}

.about .foot1 {
    position: absolute;
    top: 350px;
    right: 350px;
    transform: rotate(170deg);
    width: 160px;
    height: 160px;
}

.about .foot2 {
    position: absolute;
    top: 500px;
    right: 500px;
    transform: rotate(175deg);
    width: 160px;
    height: 160px;
}




/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.about .spbr{
		display: none;
	}
}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .about .br-sp {
      display: none;
    }

    .about {
        margin-bottom: 200px;
        z-index: 0;
        position: relative;
    }

    .about .green-square {
        width: 150px;
        height: 150px;
        position: absolute;
        top: -200px;
        right: 0px;;
    } 

    .about .yellow-circle {
        display: none;
    }

    .about .blue-triangle {
        width: 170px;
        height: 170px;
        left: 0px;
        bottom: -200px;
        z-index: 1000;
    }

    .about .foot1 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 500px;
        right: 90px;
    }

    .about .foot2 {
        width: 100px;
        height: 100px;
        top: 640px;
        right: 130px;
    }
  
}
















/* our message */



.message {
    background-color: #FFF5E5;
    padding-top: 300px;  /* sectionで背景色をつけているからpaddingにする */
    padding-bottom: 300px;
    position: relative;
    z-index: -90;
}

.message .wave1 {
    width: 100%;
    height: auto;
    position: absolute;
    top: -100px;
    z-index: -100;
}

.message .wave1-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -100px;
}

.our-message-center {
    display: flex;
    align-items: flex-start;
}

.message .our-message {
    margin-left: 270px;
}

.message .photo-1 {
    margin-left: 150px;
}

.message .red-circle {
    position: absolute;
    top: -400px;
    right: -200px;
    width: 600px;
    height: 600px;
}

.message .green-moon {
    position: absolute;
    top: 50px;
    left: -60px;
    width: 400px;
    height: 400px;
}

.message .red-square {
    position: absolute;
    left: 150px;
    bottom: 10px;
    transform: rotate(50deg);
    width: 150px;
    height: 150px;
}

.message .blue-circle {
    position: absolute;
    right: -100px;
    bottom: -300px;
    width: 400px;
    height: 400px;
}

.message .foot1 {
    position: absolute;
    bottom: 300px;
    right: 700px;
    transform: rotate(170deg);
    width: 160px;
    height: 160px;
}

.message .foot2 {
    position: absolute;
    bottom: 150px;
    right: 800px;
    transform: rotate(175deg);
    width: 160px;
    height: 160px;
}





/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.message .spbr{
		display: none;
	}
}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .message .br-sp {
      display: none;
    }

    .message {
        padding-top: 100px;
        padding-bottom: 100px;
        text-align: center;
    }

    .message .wave1 {
        width: 100vw;
        height: 10%;
        transform: translateX(-50%);
        top: -90px;
    }

    .message .wave1-bottom {
        width: 100vw;
        height: 10%;
        transform: translateX(-50%);
        bottom: -90px;
    }

    .message .red-circle {
        display: none;
    }

    .message .green-moon {
        display: none;
    }

    .message .our-message-center {
        flex-direction: column-reverse;
        align-items: center;
        gap: 40px;
    }

    .message .our-message-center .our-message {
        text-align: left;
        margin-left: 7%;
    }

    .message .our-message-center .photo-1 {
        margin-left: 7%;
        width: 300px;
        height: auto;
    }

    .message .blue-circle {
        display: none;
    }

    .message .red-square {
        position: absolute;
        bottom: -50px;
        left: 0px;
        width: 100px;
        height: 100px;
    }

    .message .foot1 {
        position: absolute;
        bottom: 130px;
        right: 20px;
        width: 100px;
        height: 100px;
    }
    
    .message .foot2 {
        position: absolute;
        bottom: 0px;
        right: 100px;
        width: 100px;
        height: 100px;
    }
  
}









/* curriculm */



.curriculum {
    margin-top: 200px;
    margin-bottom: 600px;
    position: relative;
    height: 2100px;
}

.curriculum-top {
    text-align: center;
    position: relative;
}

.curriculum .curriculum-top h2 {
    padding-bottom: 20px;
}

.curriculum-top .yellow-triangle {
    position: absolute;
    transform: rotate(20deg);
    bottom: -200px;
    right: 300px;
    width: 150px;
    height: 150px;
}

.curriculum h4 {
    color: #fbe9d5b3;
    font-size: 80px;
}

.curriculum .code-1 {
    position: absolute;
    transform: rotate(-20deg);
    z-index: 1; /* ★追加：レイヤーを1番に設定 */
}

.curriculum .code-4 {
    position: absolute;
    transform: rotate(-20deg);
    top: 600px;
    right: 0px;
    z-index: 1; /* ★追加：レイヤーを1番に設定 */
}

.curriculum .code-3 {
    position: absolute;
    transform: rotate(-20deg);
    bottom: 750px;
    left: -50px;
    z-index: 1; /* ★追加：レイヤーを1番に設定 */
}

.curriculum .code-2 {
    position: absolute;
    transform: rotate(-20deg);
    bottom: -200px;
    right: -300px;
    z-index: 1; /* ★追加：レイヤーを1番に設定 */
}


/* カードの親要素 */
.curriculum-card {
    position: relative;
}

/* カードのスタイル */
.curriculum-card .curriculum-card-red {
    position: absolute;
    width: 620px;
    height: 711px;
    top: 150px;
    left: 280px;
    z-index: 2; /* ★追加：レイヤーを2番に設定 */
}

.curriculum-card .curriculum-card-yellow {
    position: absolute;
    width: 620px;
    height: 711px;
    top: 400px;
    right: 150px;
    z-index: 2; /* ★追加：レイヤーを2番に設定 */
}

.curriculum-card .curriculum-card-green {
    position: absolute;
    width: 620px;
    height: 807px;
    top: 1050px;
    left: 280px;
    z-index: 2; /* ★追加：レイヤーを2番に設定 */
}

.curriculum-card .curriculum-card-blue {
    position: absolute;
    width: 620px;
    height: 726px;
    top: 1300px;
    right: 150px;
    z-index: 2; /* ★追加：レイヤーを2番に設定 */
}

.curriculum .circle-button {
    width: 300px;
    height: 300px;
    background-color: #F68467; 
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: relative;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: -450px;
    left: 200px;
  }

  .curriculum a:hover {
    background-color: #e07054; /* 少し暗い色に */
}
  
.circle-arrow {
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    color: #775A42;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    margin-top: 20px;
  }






/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.curriculum .spbr{
		display: none;
	}

    .curriculum .curriculum-card-sp {
        display: none;
    }
}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .curriculum .br-sp {
      display: none;
    }

    .curriculum {
        margin-top: 200px;
        margin-bottom: 100px;
        text-align: center;
        height: 2600px;
        z-index: 0;
    }

    .curriculum h4 {
        font-size: 32px;
    }

    .curriculum .curriculum-top .yellow-triangle {
        position: absolute;
        bottom: -70px;
        right: 0px;
        width: 100px;
        height: 100px;
    }

    .curriculum .curriculum-card {
        display: none;
    }

    .curriculum-card-sp {
        display: flex;
        flex-direction: column; /* 子要素を縦方向に並べます */
        align-items: center;    /* 子要素を水平方向の中央に揃えます */

    /* このコンテナ自体をページの中央に配置します */
        width: 100%;      /* 親要素に対して幅を100%にし */
        margin: 0 auto;   /* 左右の余白を自動にすることで中央揃えになります */
    }

    .curriculum-card-sp .sp-red-schedule {
        width: 280px;
        height: auto;
        margin-top: 70px;
        z-index: 0;
    }

    .curriculum-card-sp .sp-yellow-schedule {
        width: 280px;
        height: auto;
        margin-top: 70px;
        z-index: 0;
    }

    .curriculum-card-sp .sp-green-schedule {
        width: 280px;
        height: auto;
        margin-top: 70px;
        z-index: 0;
    }    

    .curriculum-card-sp .sp-blue-schedule {
        width: 280px;
        height: auto;
        margin-top: 70px;
        z-index: 0;
    }

    .curriculum .code-1 {
        position: absolute;
        top: 300px;
        left: -30px;
        transform: rotate(-10deg);
        z-index: -100;
    }

    .curriculum .code-2 {
        position: absolute;
        top: 950px;
        right: -400px;
        transform: rotate(-10deg);
        z-index: -100;
    }

    .curriculum .code-3 {
        position: absolute;
        top: 1750px;
        left: 70px;
        transform: rotate(-10deg);
        z-index: -100;
    }

    .curriculum .code-4 {
        position: absolute;
        top: 2550px;
        right: -10px;
        transform: rotate(-10deg);
        z-index: -100;
    }

    .curriculum .circle-button {
        position: absolute;
        top: 2400px;
        left: 130px;
        width: 150px;
        height: 150px;
        font-size: 14px;
    }    

    .curriculum .circle-arrow {
        width: 60px;
        height: 60px;
        font-size: 20px;
        margin-top: 10px;
    }
}













  /* profile */



.profile {
    background-color: #FFF5E5;
    padding-top: 200px;  /* sectionで背景色をつけているからpaddingにする */
    padding-bottom: 300px;
    height: 1800px;
    position: relative;
}

.profile .wave2 {
    width: 100%;
    height: auto;
    position: absolute;
    top: -100px;
}

.profile .wave2-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -100px;
}

.profile .blue-circle {
    position: absolute;
    top: -250px;
    left: 550px;
    width: 200px;
    height: 200px;
  }

.profile .profile-top {
    text-align: center;
}

.profile .team-container {
    width: 1066px;
    margin: 0 auto;
    position: relative;
}
  
 /* 宮野教授 */
.profile .team-container .miyano-profile-box {
    display: flex;
    background-color: white;
    border-radius: 40px;
    padding: 20px;
    height: 518px;
    box-sizing: border-box;
    position: relative;
}
  
.profile .teacher-icon {
    width: 370px;
    height: 370px;
    margin-top: 40px;
    margin-left: 70px;
}
  
.miyano-profile-text {
    margin-top: 45px;
    margin-left: 80px;
    flex: 1;
}

.miyano-profile-text .miyano-profile-title {
    display: flex;
    align-items: flex-end;
}
  
.miyano-profile-text .miyano-profile-title .role-title1 {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 28px;
}
.miyano-profile-text .miyano-profile-title .role-title2 {
    font-weight: bold;
    margin-bottom: 5px;
    margin-left: 40px;
    font-size: 20px;
}

.miyano-profile-text .miyano-profile-title .role-title1,
.miyano-profile-text .miyano-profile-title .role-title2 {
  margin-bottom: 0; /* ↓ここで統一 */
  line-height: 1;
}

  
.miyano-profile-text .name {
    font-size: 22px;
    font-weight: bold;
    margin-top: 20px;
}
  
.miyano-profile-text .description {
    line-height: 1.7;
    margin-top: -10px;
}
  
.miyano-profile-box .grass {
    position: absolute;
    bottom: 0px;
    right: 60px;
    width: 259px;
    height: 110px;
}
  

.card-container {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 50px;
    position: relative;
}
  
  .card {
    background-color: white;
    border-radius: 40px;
    width: 350px;
    height: 489px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
  }
  
  .icon {
    width: 220px;
    height: 220px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .title {
    font-weight: bold;
    color: #795548;
  }
  
  .name {
    font-weight: bold;
    margin-top: -10px;
  }
  
  .detail {
    font-size: 16px;
    color: #795548;
    margin-top: 5px;
  }
  
.card-container .grass2 {
    position: absolute;
    bottom: 0px;
    left: 200px;
    width: 100px;
    height: 50px;
}

.card-container .grass3 {
    position: absolute;
    bottom: 0px;
    left: 550px;
    width: 120px;
    height: 60px;
}

.card-container .grass4 {
    position: absolute;
    bottom: 0px;
    left: 900px;
    width: 100px;
    height: 50px;
}
  
.team-container .yellow-square {
    position: absolute;
    transform: rotate(20deg);
    top: -250px;
    right: -200px;
    width: 300px;
    height: 300px;
}

.team-container .green-circle {
    position: absolute;
    bottom: -250px;
    left: -450px;
    width: 350px;
    height: 350px;
}

.profile .team-container .blue-triangle {
    position: absolute;
    transform: rotate(20deg);
    bottom: -300px;
    left: 0px;
    width: 150px;
    height: 140px;
}

.profile .team-container .red-black-2 {
    position: absolute;
    bottom: -100px;
    right: 0px;
    width: 300px;
    height: 140px;
}





/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.profile .spbr{
		display: none;
	}

    .sp-teacher {
        display: none;
    }
}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .profile .br-sp {
      display: none;
    }

    .profile {
        padding-top: 70px;
        padding-bottom: 100px;
        text-align: center;
        height: 1300px;
    }

    .profile .wave2 {
        width: 100vw;
        height: 5%;
        transform: translateX(-50%);
        top: -30px;
    }

    .profile .wave2-bottom {
        width: 100vw;
        height: 5%;
        transform: translateX(-50%);
        bottom: -30px;
    }

    .profile .team-container {
        width: 100%; /* PC用の固定幅がもしあれば、それを解除します */
        padding: 0 20px; /* 画面の左右に少し余白を持たせると見栄えが良くなります */
        box-sizing: border-box; /* paddingを含めて幅を100%に保ちます */
    }

    .profile .team-container .miyano-profile-box {
        display: none;
    }

    .profile .card-container {
        display: none;
    }

    .profile .sp-teacher {
        display: flex;
        flex-direction: column; /* 子要素を縦方向に並べます */
        align-items: center;    /* 子要素を水平方向の中央に揃えます */

    /* このコンテナ自体をページの中央に配置*/
        width: 100%;      /* 親要素に対して幅を100%にし */
        margin: 0 auto;   /* 左右の余白を自動にすることで中央揃えになります */
    }
    .profile .sp-teacher .sp-teacher-1 {
        width: 280px;
        height: auto;
        margin-top: 40px;
        z-index: 0;
    }

    .profile .sp-teacher .sp-teacher-2 {
        width: 280px;
        height: auto;
        margin-top: 20px;
        z-index: 0;
    }

    .profile .sp-teacher .sp-teacher-3 {
        width: 280px;
        height: auto;
        margin-top: 20px;
        z-index: 0;
    }

    .profile .sp-teacher .sp-teacher-4 {
        width: 280px;
        height: auto;
        margin-top: 20px;
        z-index: 0;
    }

    .profile .blue-circle {
        position: absolute;
        top: -200px;
        left: 300px;
        width: 70px;
        height: 70px;
    }

    .profile .team-container .yellow-square {
        position: absolute;
        top: -30px;
        right: 50px;
        width: 100px;
        height: 100px;
    }

    .profile .team-container .blue-triangle {
        position: absolute;
        bottom: -170px;
        left: -10px;
        width: 100px;
        height: 100px;
    }

    .profile .team-container .red-black-2 {
        position: absolute;
        bottom: -60px;
        right: 50px;
        width: 200px;
        height: auto;
    }
    
}






/* class */




.class {
    height: 1300px;
}

.class .class-top {
    margin-top: 200px;
    margin-left: 270px;
}

.class .class-top h2 {
    padding-bottom: 20px;
}

.class .class-top p{
    padding-bottom: 100px;
}

/* カルーセルの表示領域を定義 */
.carousel-viewport {
    width: 100vw; /* 画面のビューポート幅いっぱいに設定 */
    /* max-width は削除 */
    overflow: hidden; /* この領域からはみ出たコンテンツは非表示にします */
    position: relative; /* 子要素の絶対位置指定の基準にします */
    /* ここを修正：左上から時計回りに値を指定 (左上 右上 右下 左下) */
    border-radius: 20px 0 0 20px; /* 左上と左下は20px、右上と右下は0px（角張る） */
    /* padding は削除。これにより width: 100vw との組み合わせで横スクロールバーが出なくなります。 */
}

/* 画像を内包するコンテナ (実際にスライドで動く部分) */
.class-photo-inst {
    display: flex; /* Flexbox で画像を横並びにします */
    gap: 20px; /* 画像間の隙間 */
    /* ここから transition: transform ... を削除しました。JavaScriptで直接アニメーションします。 */
    padding: 0 20px; /* 左右の余白は維持 */
    align-items: flex-end; /* 垂直方向の下揃えに変更 */
}

/* 個々の画像に適用されるスタイル */
.instagram-photo {
    border-radius: 40px; /* 角を丸くします */
    width: 409px; /* 通常時の画像幅 */
    height: 409px; /* 通常時の画像高さ */
    object-fit: cover; /* 画像の比率を保ちながら要素にフィットさせます */
    flex-shrink: 0; /* Flex アイテムが縮まないようにします */

}

/* アクティブ（拡大）時の画像に適用されるスタイル */
.instagram-photo.active {
    width: 500px; /* 拡大後の画像幅を500pxに設定 */
    height: 500px; /* 拡大後の画像高さを500pxに設定 */
}

.carousel-viewport {
    position: relative;
}

.carousel-viewport .grass1 {
    position: absolute;
    bottom: -10px;
    left: 300px;
    width: 300px;
    height: 100px;
}

.carousel-viewport .grass3 {
    position: absolute;
    bottom: -10px;
    right: 200px;
    width: 400px;
    height: 150px;
}

.class .instagram {
    text-align: center;
    margin-top: 70px;
    position: relative;
}

/* ボタンをページ中央に配置するための設定 */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  
  /* ボタン本体のスタイル */
.instagram-button {
    /* 1. 大きさと形 */
    width: 293px;
    height: 92px;
    background-color: #F68467; /* 背景色 */
    border-radius: 40px;      /* 角を完全に丸くする (高さの半分) */
    padding: 28px 30px;          /* 内側の余白（上下は0、左右は12px）*/
    box-sizing: border-box;   /* paddingを含めてサイズを計算する */
  
    /* 2. 中身の配置（Flexbox）*/
    display: flex;
    align-items: center;         /* テキストとアイコンを上下中央に揃える */
    justify-content: space-between; /* テキストを左、アイコンを右に寄せる */
  
    /* 3. リンクのスタイル */
    text-decoration: none; /* 下線を消す */
}
  
  /* ボタン内のテキストのスタイル */
.instagram-button .button-text {
    color: white;
    font-size: 24px;
    font-weight: bold;       /* 文字を太くする */
    margin-left: 20px;       /* ボタンの左端から少し離す */
}
  
  /* ボタン内のアイコンのスタイル */
.instagram-button .instagram-icon {
    width: 68px;  /* アイコンの幅 */
    height: 68px; /* アイコンの高さ */
}

.button-container a:hover {
    background-color: #e07054; /* 少し暗い色に */
}

.class .instagram .yellow-square {
    position: absolute;
    transform: rotate(20deg);
    bottom: -400px;
    left: 100px;
}

.class .instagram .red-circle {
    position: absolute;
    top: -1000px;
    right: -100px;
}




/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.class .spbr{
		display: none;
	}

    
}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .class .br-sp {
      display: none;
    }

    .class {
        margin-top: 40px;
        margin-bottom: 0px;
        height: 900px;
    }

    .class .class-top {
        max-width: 70%; 
        margin-left: auto;   
        margin-right: auto;  
        text-align: left;
    }

    /* カルーセルの表示領域のスタイルをスマホ用に調整 */
    .carousel-viewport {
        width: 100%; /* 100vwから変更し、親要素に幅を合わせる */
        border-radius: 0; /* PC用の左側だけの角丸をリセット */
    }

    /* 画像を内包するコンテナ */
    .class-photo-inst {
        /* この要素の左右のpaddingで、画面端の画像の切れ具合を調整します */
        padding: 0 20px;
    }

    .carousel-viewport .grass1 {
        position: absolute;
        left: 80px;
        width: 200px;
        height: auto;
    }

    /* 個々の画像に適用されるスタイル */
    .instagram-photo {
        border-radius: 20px; /* サイズに合わせて角丸も調整 */
        width: 230px; /* 通常時の画像幅 */
        height: 230px; /* 通常時の画像高さ */
    }

    /* アクティブ（拡大）時の画像に適用されるスタイル */
    .instagram-photo.active {
        border-radius: 30px; /* サイズに合わせて角丸も調整 */
        width: 300px; /* 拡大後の画像幅 */
        height: 300px; /* 拡大後の画像高さ */
    }

    .carousel-viewport .grass3 {
        display: none;
    }

    .instagram .red-circle {
        display: none;
    }

    .instagram-button {
        /* 1. 大きさと形 */
        width: 200px;
        height: 70px;
        background-color: #F68467; /* 背景色 */
        border-radius: 40px;      /* 角を完全に丸くする (高さの半分) */
        padding: 28px 30px;          /* 内側の余白（上下は0、左右は12px）*/
        box-sizing: border-box;   /* paddingを含めてサイズを計算する */
      
        /* 2. 中身の配置（Flexbox）*/
        display: flex;
        align-items: center;         /* テキストとアイコンを上下中央に揃える */
        justify-content: space-between; /* テキストを左、アイコンを右に寄せる */
      
        /* 3. リンクのスタイル */
        text-decoration: none; /* 下線を消す */
    }
      
      /* ボタン内のテキストのスタイル */
    .instagram-button .button-text {
        color: white;
        font-size: 16px;
        font-weight: bold;       /* 文字を太くする */
        margin-left: 16px;       /* ボタンの左端から少し離す */
    }
      
      /* ボタン内のアイコンのスタイル */
    .instagram-button .instagram-icon {
        width: 30px;  /* アイコンの幅 */
        height: 30px; /* アイコンの高さ */
    }
}

















/* schedule */



.schedule {
    background-color: #FFF5E5;
    padding-top: 200px;  /* sectionで背景色をつけているからpaddingにする */
    padding-bottom: 300px;
    height: 1800px;
    position: relative;
}

.schedule .yellow-square {
    position: absolute;
    transform: rotate(20deg);
    top: -300px;
    left: 100px;
}

.schedule .wave3 {
    width: 100%;
    height: auto;
    position: absolute;
    top: -100px;
}

.schedule .wave3-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -100px;
}

.schedule .schedule-top {
    text-align: center;
}

.schedule .schedule-top h3 {
    padding-bottom: 5px;
}

.schedule .schedule-top h2 {
    padding-bottom: 20px;
}

.schedule-list {
    display: block; /* img要素をブロック要素に変更 */
    margin-left: auto; /* 左マージンを自動調整 */
    margin-right: auto; /* 右マージンを自動調整 */
    margin-top: 50px;
    width: 1200px;
    height: 950px;
}

.schedule-block {
    position: relative;
}

.schedule-block .green-triangle {
    position: absolute;
    transform: rotate(20deg);
    width: 150px;
    height: 150px;
    bottom: -100px;
    left: 100px;
}

.schedule-block .red-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: -350px;
    left: 300px;
}

.schedule-block .blue-circle {
    position: absolute;
    width: 250px;
    height: 250px;
    top: -150px;
    right: 170px;
}

.schedule-block .red-black-1 {
    position: absolute;
    width: 300px;
    height: 120px;
    bottom: -100px;
    right: 170px;
}





/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.schedule .spbr{
		display: none;
	}

    .sp-schedule {
        display: none;
    }

}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .schedule .br-sp {
      display: none;
    }

    .schedule {
        padding-top: 70px;
        padding-bottom: 50px;
        text-align: center;
        height: 800px;
    }

    .schedule .wave3 {
        width: 100vw;
        height: 5%;
        transform: translateX(-50%);
        top: -30px;
    }

    .schedule .wave3-bottom {
        width: 100vw;
        height: 5%;
        transform: translateX(-50%);
        bottom: -30px;
    }

    .schedule .yellow-square {
        position: absolute;
        top: -150px;
        left: 500px;
        width: 130px;
        height: 130px;
    }

    .schedule .schedule-block {
        display: none;
    }

    .sp-schedule {
        position: relative;
        align-items: center;    /* 子要素を水平方向の中央に揃えます */

    /* このコンテナ自体をページの中央に配置 */
        width: 100%;      /* 親要素に対して幅を100% */
        margin: 0 auto;   /* 左右の余白を自動にすることで中央揃えになります */
    }

    .sp-schedule .sp-schedule-list {
        width: 280px;
        height: auto;
        margin-top: 70px;
        z-index: 0;
    }

    .sp-schedule .yellow-square {
        position: absolute;
        transform: rotate(20deg);
        top: 500px;
        left: 0px;
        width: 90px;
        height: 90px;
    }

    .sp-schedule .blue-circle {
        position: absolute;
        top: 600px;
        left: 100px;
        width: 70px;
        height: 70px;
    }

}



















/* aceess */



.aceess {
    display: flex;
    justify-content: center;
    margin-top: 300px;
    margin-bottom: 200px;
}

.aceess .aceess-left {
    margin-right: 50px;
}

.aceess .aceess-left .aceess-left-top h2{
    padding-bottom: 15px;
}

.aceess .aceess-left .aceess-left-top p{
    line-height: 2.0;
}

.aceess .aceess-left .aceess-left-bottom h2{
    font-size: 32px;
    padding-top: 50px;
    padding-bottom: 35px;
}

.aceess .aceess-left .aceess-left-bottom .aceess-train {
    width: 580px;
    height: 290px;
}




/* 画面幅が768px以上の場合に適用される */
@media screen and (min-width: 768px){

    /* .spbr クラスを持つbrタグを非表示にする */
	.aceess .aceess-left-top .spbr{
		display: none;
	}

    .aceess .aceess-left-top .sp-google-map {
        display: none;
    }
   
}



/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
  
    /* .br-sp クラスを持つbrタグを非表示にする */
    .aceess .br-sp {
      display: none;
    }

    .aceess {
        margin-top: -270px;
        margin-bottom: 0px;
        height: 1400px;
        flex-direction: column;
        align-items: center;
    }

    .aceess-left {
        width: 80%; 
        margin-left: auto;   
        margin-right: auto;
        text-align: left;
    }

    .aceess .aceess-left-top .sp-google-map {
        display: block;     /* ★表示タイプをブロックに統一 */
        margin-left: auto;  
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .aceess .aceess-left .aceess-left-bottom {
        display: none;
    }

    .aceess-right {
        display: none;
    }
    
}
















 /* contact */



.contact {
    text-align: center;
    margin-top: 70px;
    position: relative;
    height: 600px;
}

.contact h2 {
    padding-bottom: 20px;
}

/* ★ ボタンを画面中央に配置するためのラッパー */
.button-container {
    display: flex;
    justify-content: center;
    padding-top: 25px;
}

/* ボタン本体のスタイル */
.contact-button {
    /* 1. 大きさと形 */
    width: 325px;
    height: 100px;
    background-color: #FDB142; /* 背景色 */
    border-radius: 40px;      /* ★角を完全に丸くする (高さの半分) */

    /* 2. 中身の配置（Flexbox）*/
    display: flex;
    align-items: center;         /* テキストとアイコンを上下中央に揃える */
    justify-content: center; /* ★ アイテムをまとめて中央に寄せる */
    gap: 20px;                   /* ★ テキストとアイコンの間隔を指定 */
  
    /* 3. リンクのスタイル */
    text-decoration: none; /* 下線を消す */
}
  
/* ボタン内のテキストのスタイル */
.contact-button .button-text {
    color: white;
    font-size: 24px;
    font-weight: bold;       /* 文字を太くする */
    /* margin-left: 60px;       ★ 削除 (gapで管理するため) */
    text-decoration: none; /* 下線を消す */
}
  
/* ボタン内のアイコンのスタイル */
.contact-button .mail-icon {
    width: 68px;  /* アイコンの幅 */
    height: 68px; /* アイコンの高さ */
}






/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {

    .contact {
        margin-top: -320px;
        margin-bottom: 0px;
        height: 400px;
    }

    .contact-button {
        /* 1. 大きさと形 */
        width: 200px;
        height: 60px;
        background-color: #FDB142; /* 背景色 */
        border-radius: 40px;      /* ★角を完全に丸くする (高さの半分) */
    
        /* 2. 中身の配置（Flexbox）*/
        display: flex;
        align-items: center;         /* テキストとアイコンを上下中央に揃える */
        justify-content: center; /* ★ アイテムをまとめて中央に寄せる */
        gap: 20px;                   /* ★ テキストとアイコンの間隔を指定 */
      
        /* 3. リンクのスタイル */
        text-decoration: none; /* 下線を消す */
    }
      
    /* ボタン内のテキストのスタイル */
    .contact-button .button-text {
        color: white;
        font-size: 16px;
        font-weight: bold;       /* 文字を太くする */
        text-decoration: none; /* 下線を消す */
    }
      
    /* ボタン内のアイコンのスタイル */
    .contact-button .mail-icon {
        width: 30px;  /* アイコンの幅 */
        height: 30px; /* アイコンの高さ */
    }
}















/* footer */



.footer-box {
    position: relative;
    z-index: 0;
}

.footer-box p{
    text-align: center;
    padding-bottom: 30px;
}

.footer-box .grass1 {
    position: absolute;
    bottom: 0px;
    left: 200px;
    width: 300px;
    height: 100px;
}

.footer-box .grass2 {
    position: absolute;
    bottom: 0px;
    right: 50px;
    width: 120px;
    height: 140px;
}

.footer-box .grass3 {
    position: absolute;
    bottom: 0px;
    right: 300px;
    width: 350px;
    height: 120px;
}

.footer-box .foot1 {
    position: absolute;
    bottom: 600px;
    left: 30px;
    transform: rotate(110deg);
    width: 160px;
    height: 160px;
}

.footer-box .foot2 {
    position: absolute;
    bottom: 450px;
    left: 100px;
    transform: rotate(100deg);
    width: 160px;
    height: 160px;
}

.footer-box .foot3 {
    position: absolute;
    bottom: 320px;
    left: 300px;
    transform: rotate(90deg);
    width: 160px;
    height: 160px;
}

.footer-box .foot4 {
    position: absolute;
    bottom: 150px;
    left: 500px;
    transform: rotate(80deg);
    width: 160px;
    height: 160px;
}

.footer-box .foot5 {
    position: absolute;
    bottom: 100px;
    left: 700px;
    transform: rotate(80deg);
    width: 160px;
    height: 160px;
}

.footer-box .foot6 {
    position: absolute;
    bottom: 60px;
    left: 960px;
    transform: rotate(50deg);
    width: 160px;
    height: 160px;
}

.footer-box .foot7 {
    position: absolute;
    bottom: 30px;
    left: 1200px;
    transform: rotate(40deg);
    width: 160px;
    height: 160px;
}

.footer-box .risu {
    position: absolute;
    bottom: 20px;
    left: 1380px;
    transform: rotate(0deg);
    width: 160px;
    height: 160px;
    z-index: -1;
}






/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {

    .footer-box {
        position: relative;
    }

    .footer-box .foot1 {
        display: none;
    }

    .footer-box .foot2 {
        display: none;
    }

    .footer-box .foot3 {
        display: none;
    }

    .footer-box .foot4 {
        display: none;
    }

    .footer-box .foot5 {
        display: none;
    }

    .footer-box .foot6 {
        display: none;
    }

    .footer-box .foot7 {
        display: none;
    }

    .footer-box .grass1 {
        display: none;
    }

    .footer-box .grass2 {
        position: absolute;
        bottom: 0px;
        right: 50px;
        width: 70px;
        height: 40px;
    }

    .footer-box .grass3 {
        position: absolute;
        bottom: 0px;
        left: 30px;
        width: 100px;
        height: 50px;
    }

}