/* 基本設定 */
body {
    background-image: url(../images/background-texture.png); /* 背景画像 */
    font-family: 'Arial', sans-serif; /* フォントの設定 */
    margin: 0; /* 余白なし */
    padding: 0; /* パディングなし */
    margin:0 auto 0 auto;
    max-width: 1500px;
    background-size: 100%; /* 画面いっぱいに表示 */
    background-position: center; /* 画像の中央を表示 */
}

/* ヘッダーのスタイル */
header {
    background-color: #b07c5d; /* ヘッダーの背景色 */
    padding: 10px; /* 上下左右の余白 */
    display: flex; /* フレックスボックスでレイアウト */
    justify-content: space-between; /* 両端揃え */
    align-items: center; /* 垂直方向の中央揃え */
    color: white; /* テキストカラー */
    position: fixed; /* 上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素の上に表示 */
}
/*PIANO SCHOOL */
.logo a{
    color: white; /* 文字色 */
    text-decoration: none; /* 下線を削除 */
}
.logo h1{
    margin: 0; /* 余白なし */
    font-size: 24px; /* フォントサイズ */
}

/* ナビゲーションメニュー */
nav ul {
    list-style: none; /* リストのデフォルトのスタイルを削除 */
    margin: 0; /* 余白なし */
    padding: 0; /* パディングなし */
    display: flex; /* フレックスボックス */
    gap: 20px; /* 各リストアイテムの間隔 */
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 縦方向も中央 */
}
nav ul li {
    display: inline; /* インライン要素として表示 */
    font-size: 16px; /* フォントサイズ */
}
nav ul li a {
    color: white; /* 文字色 */
    text-decoration: none; /* 下線を削除 */
    font-size: 16px; /* フォントサイズ */
}
nav ul li a img:hover {
    background-color: #e0c3a3; /* ホバー時の背景色 */
    border-radius: 3px; /* 角を丸く */
}
nav ul li a:hover {
    background-color: #e0c3a3; /* ホバー時の背景色 */
    border-radius: 5px; /* 角を丸く */
}
/* ヘッダー お問い合わせボタン*/
header nav a img{
    width: 180px;
    height: auto;
}


/* ボタンのスタイル */
.btn {
    background-color: #b07c5d; /* 背景色 */
    color: white; /* 文字色 */
    padding: 8px 16px; /* 余白 */
    border-radius: 20px; /* 角を丸く */
    text-decoration: none; /* 下線を削除 */
    font-size: 14px; /* フォントサイズ */
    font-weight: bold; /* フォントの太さ */
}

.btn:hover {
    background-color: #e0c3a3; /* ホバー時の背景色 */
}


/* サイドバーの基本デザイン */
.fixed-sidebar {
    position: fixed; /* 固定表示するための設定 */
    top: 20%; /* 上からの距離 */
    right: -5px; /* 右からの距離 */
    z-index: 1000; /* 他の要素よりも前面に表示 */
}

.instagram-button {
    display: inline-block;
    padding: 5px;
    border-radius: 30px; /* 角を丸く */
}

.instagram-button:hover {
    background-color: #C13584; /* ホバー時の色 */
}

.instagram-icon {
    width: 10vw;
    height: 10vw;
    object-fit: cover; /* アイコンのサイズ調整を最適化 */
    display: block;
}

/* ヒーローバナーの基本デザイン */
.hero-banner {
    margin-top: 50px; /* 上部の余白 */
    display: flex;
    justify-content: center; /* 中央寄せ */
    flex-direction: column; /* 縦方向に配置 */
    text-align: center;
}
/* ヒーローバナー画像 */
.hero-banner img{
    max-width: 100%; /* 画像の最大幅 */
}
/* テキスト部分 */
.hero-text p{
    font-size: 24px;
    font-weight: bold; /* フォントの太さ */
    text-decoration: underline dotted #ffcf4a; /* 下線をドットに */
}

.hero-about{
    display: flex; /* 画像とテキストを横並びに */
    align-items: center; /* 垂直方向を中央揃え */
}

.hero-about img{
    width: 50%; /* 画像を画面幅の50%に設定 */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像のバランスを崩さずフィット */
}

.hero-about .text-content {
    font-weight: lighter;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 5%;
    width: 50%; /* テキストの幅を調整 */
}


.hero-lesson{
    display: flex; /* 画像とテキストを横並びに */
    align-items: center; /* 垂直方向を中央揃え */
}

.hero-lesson img{
    width: 50%; /* 画像を画面幅の50%に設定 */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像のバランスを崩さずフィット */
}

.hero-lesson .text-content {
    font-weight: lighter;
    font-size: 16px;
    padding-left: 5%;
    padding-right: 20px;
    width: 50%; /* テキストの幅を調整 */
}

.hero-contact{
    display: flex; /* 画像とテキストを横並びに */
    align-items: center; /* 垂直方向を中央揃え */
}

.hero-contact img{
    width: 50%; /* 画像を画面幅の50%に設定 */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像のバランスを崩さずフィット */
}

.hero-contact .text-content {
    font-weight: lighter;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 5%;
    padding: auto;
    width: 50%; /* テキストの幅を調整 */
}

.hero-lesson .text-content p,.hero-contact .text-content p{
    text-align: left;
}

/* フッターのスタイル */
footer {
    background-color: #b07c5d; /* 背景色 */
    color: white; /* 文字色 */
    text-align: center; /* テキストを中央揃え */
    padding: 20px; /* 余白 */
    margin-top: 50px; /* 上部の余白 */
}


/* ヒーローバナーの基本デザイン */
#service {
    margin-top: 100px; /* 上部の余白 */
    display: flex;
    justify-content: center; /* 中央寄せ */
    flex-direction: column; /* 縦方向に配置 */
    text-align: center;
    max-width: 100%; /* 最大幅を指定 */
}

.service-top h1{
    font-size:56px;
    font-weight: lighter;
}

.service-top p{
    font-size: 24px;
    font-weight: lighter;
}



.service-Infant {
    position: relative; /* 相対位置を指定 */
    display: inline-block; /* インラインブロックで表示 */
    width:100%; /* コンテナの幅を調整 */
}

.service-Infant img {
    width: 100%; /* 画像の幅を全体に合わせる */
    height: auto; /* アスペクト比を保つ */
}

.service-Infant .text-content {
    position: absolute; /* 絶対位置を指定 */
    top:13%; /* 親要素の高さの中央 */
    left:12%; /* 親要素の幅の中央 */

    color: black; /* 文字色 */
    font-size: 1.5vw; /* 画面幅に応じて文字サイズを調整 */
    text-align: left; /* テキストを左揃え */
}



.service-elementary{
    position: relative; /* 相対位置を指定 */
    display: inline-block; /* インラインブロックで表示 */
    width:100%; /* コンテナの幅を調整 */
}

.service-elementary img {
    width: 100%; /* 画像の幅を全体に合わせる */
    height: auto; /* アスペクト比を保つ */
}

.service-elementary .text-content {
    position: absolute; /* 絶対位置を指定 */
    top:4%; /* 親要素の高さの中央 */
    left:7%; /* 親要素の幅の中央 */

    color: black; /* 文字色 */
    font-size: 1.5vw; /* 画面幅に応じて文字サイズを調整 */
    text-align: left; /* テキストを左揃え */
}

.service-adult{
    position: relative; /* 相対位置を指定 */
    display: inline-block; /* インラインブロックで表示 */
    width:100%; /* コンテナの幅を調整 */
}

.service-adult img {
    width: 100%; /* 画像の幅を全体に合わせる */
    height: auto; /* アスペクト比を保つ */
}

.service-adult .text-content {
    position: absolute; /* 絶対位置を指定 */
    top:1%; /* 親要素の高さの中央 */
    left:14%; /* 親要素の幅の中央 */

    color: black; /* 文字色 */
    font-size: 1.5vw; /* 画面幅に応じて文字サイズを調整 */
    text-align: left; /* テキストを左揃え */
}


.service-senior{
    position: relative; /* 相対位置を指定 */
    display: inline-block; /* インラインブロックで表示 */
    width:100%; /* コンテナの幅を調整 */
}

.service-senior img {
    width: 100%; /* 画像の幅を全体に合わせる */
    height: auto; /* アスペクト比を保つ */
}

.service-senior .text-content {
    position: absolute; /* 絶対位置を指定 */
    top:8%; /* 親要素の高さの中央 */
    left:18%; /* 親要素の幅の中央 */

    color: black; /* 文字色 */
    font-size: 1.5vw; /* 画面幅に応じて文字サイズを調整 */
    text-align: left; /* テキストを左揃え */
}


/*レッスンについての情報のみの箇所 */
#info {
    text-align: center;
}

#info .info-text{
    display: flex; /* 画像とテキストを横並び */
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center; /* 縦方向の中央寄せ */
    padding: 20px;
    max-width: 100%; /* 最大幅を指定 */
    font-size: 1.2rem; /* フォントサイズ */
}
/* 左右のテキストボックス */
.left-text, .right-text {
    margin-left: 7%;
    width: 25%; /* 各カラムの幅 */
    display: flex;
    flex-direction: column;
}

/* h2 を楕円で覆う */
#info h2 {
    background-color: #ffcf4a; /* 背景色 */
    color: white; /* 文字色 */
    text-align: center; /* 文字を左ぞろえ */
    padding: 10px 20px; /* 内側の余白 */
    border-radius: 50px; /* 楕円形 */
    font-size: 1.2rem; /* フォントサイズ */
    width: 40%; /* 幅を調整 */
}

#info p {
    text-align: left; /* 文字を左ぞろえ */
    font-weight: bold;
}

#info .info-btn,#about .about-btn{
    padding-top: 10%;
    text-align: center;
}

#about{
    padding-top: 20%;
    text-align: center;
    display: flex; /* 横並び */
    justify-content: space-between; /* 左右に配置 */
    flex-direction: column;
}

#about .about-content
{
    display: flex; /* 画像とテキストを横並び */
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center; /* 縦方向の中央寄せ */
    max-width: 100%; /* 最大幅を指定 */
    font-size: 1.2rem; /* フォントサイズ */
    gap: 5%; /* 画像とテキストの間隔 */
}

#about .year-1994,
#about .year-2003
{
    display: flex; /* 横並び */
    justify-content: space-between; /* 左右に配置 */
    align-items: center; /* 縦方向の中央揃え */
    max-width: 100%; /* 最大幅を指定 */
    font-size: 1.2rem; /* フォントサイズ */
    gap: 2%; /* 画像とテキストの間隔 */
}

.about-year img{
    width: 15%;
    text-align: left;
}

/* 左右のテキストボックス */
.about-img, .about-text {
    width: 40%; /* 各カラムの幅 */
    display: flex;
    flex-direction: column;
}

.about-name, .about-year p{
    text-align: left;
}

#flow {
    padding-top: 20%;
    font-size: 1.8rem; /* フォントサイズ */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow-contact,
.flow-consultation,
.flow-trial,
.flow-day{
    display: flex; /* 画像とテキストを横並び */
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center; /* 縦方向の中央寄せ */
    gap: 10%; /* 画像とテキストの間隔 */
    max-width: 800px; /* 全体の最大幅 */
    width: 100%;
    font-size: 1.2rem; /* フォントサイズ */
    margin: 3% 0; /* 上下の余白 */
}
.flow-img{
    width: 30%;
}

.flow-text{
    text-align: left;
    width: 50%; /* テキストの幅を調整 */
    font-size: 1.2rem; /* フォントサイズ */
}

.flow-text  .highlight{
    background: linear-gradient(transparent 50%, yellow); /* 下線 */
    text-decoration-skip: spaces; /* スペース部分の下線をスキップする */
}


#access{
    text-align: center;
    padding-top: 20%;
}

.access-top{
    font-size: 2rem; /* フォントサイズ */
}

.access-content-top{
    display: flex; /* 画像とテキストを横並びに */

}

.access-content-top img{
    width: 50%; /* 画像を画面幅の50%に設定 */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像のバランスを崩さずフィット */
}

.access-content-top .text-content {
    font-weight: lighter;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 5%;
    width: 50%; /* テキストの幅を調整 */
}

.access-weekdays,
.access-saturday{
    display: flex; /* 画像とテキストを横並びに */
    align-items: center; /* 垂直方向を中央揃え */
    padding: 10px;
}

.access-weekdays img,
.access-saturday img{
    width: auto; /* 画像を画面幅の50%に設定 */
    height: 8%; /* アスペクト比を維持 */
    object-fit: cover; /* 画像のバランスを崩さずフィット */
    text-align: left;
}

.access-content-top .text-content p{
    font-size: 1.2rem;
    width: 50%; /* テキストの幅を調整 */
}


.access-map img{
    width: 80%;
}


#form{
    text-align: center;
    padding-top: 20%;
}
.form-body{
    width: 50%;
    height: auto;
    background-color: hsl(64, 92%, 54%);
}



form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
}

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

input, textarea, button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: #45a049;
}



/*スマホスタイル */
@media screen and (max-width: 768px) {
    /* ヘッダーのスタイル */
    .logo{
        text-align: center; /* 中央配置 */
        width: 100%; /* 幅を100%に */
    }
    #nav-menu {
        display: none; /* 初期状態は非表示 */
    }

    .hero-about, .hero-contact{
        flex-flow: column;
        display: block; /* ブロック要素として表示 */
    }

    .hero-about img, .hero-contact img{
        text-align: right;
        width: 90%; /* 画像を画面幅の50%に設定 */
    }
    
    .hero-about .text-content, .hero-contact .text-content{
        text-align: center; /* テキストを中央揃え */
        padding-right:5%;
        padding-left: 5%;
        width: 85%; /* テキストの幅を調整 */
    }

    .hero-lesson{
        flex-flow: column;
        display: block; /* ブロック要素として表示 */
        display: flex;
        margin-top: 3%;
    }
    
    .hero-lesson img{
        width: 70%; /* 画像を画面幅の80%に設定 */
        order:1; /* 画像を上に配置 */
    }
    
    .hero-lesson .text-content {
        width: 85%; /* テキストの幅を調整 */
        order:2; /* テキストを下に配置 */
        
    }

    #info .info-text{
        flex-direction: column; /* スマホでは縦並び */
        align-items: center; /* 中央揃え */
    }
    
    .left-text, .right-text {
        width: 90%; /* スマホでは広めに取る */
        margin-bottom: 20px; /* 縦の間隔 */
    }

    .about-content{
        flex-direction: column; /* スマホでは縦並び */
        align-items: center; /* 中央揃え */
    }
    .about-img{
        width: 40%; /* スマホでは広めに取る */
    }
    .about-text {
        width: 70%; /* スマホでは広めに取る */
        margin-bottom: 20px; /* 縦の間隔 */
    }

    .flow-content{
        max-width: 80%;
    }
    .flow-arrow{
        max-height: 5%;
    }

    #form{
        padding: 10%;
    }

    .access-content-top{
        flex-flow: column;
        display: block; /* ブロック要素として表示 */
        display: flex;
    }
    .access-content-top img{
        text-align: right;
        width: 80%; /* 画像を画面幅の90%に設定 */
        height: auto; /* アスペクト比を維持 */
        object-fit: cover; /* 画像のバランスを崩さずフィット */
    }

    .access-content-top .text-content {
        text-align: center; /* テキストを中央揃え */
        font-weight: lighter;
        font-size: 16px;
        padding: 0 25%;
        width: 50%; /* テキストの幅を調整 */
    }

    .access-weekdays,
    .access-saturday{
        text-align: center; /* テキストを中央揃え */
        flex-direction: column; /* スマホでは縦並び */
        align-items: center; /* 中央揃え */
    }

    .access-weekdays img{
        width: 60%; /* 画像を画面幅の90%に設定 */
        height: auto; /* アスペクト比を維持 */
        object-fit: cover; /* 画像のバランスを崩さずフィット */
        text-align: center;
    }
    .access-saturday img{
        width: 20%; /* 画像を画面幅の90%に設定 */
        height: auto; /* アスペクト比を維持 */
        object-fit: cover; /* 画像のバランスを崩さずフィット */
        text-align: center;
    }
}