/* 最新ニュースセクションのレイアウト */
.latest_news {
    margin-bottom: var(--spacing_xl);
    padding: var(--spacing_md);
    /* 最新ニュースのコンテナ */
    & .latest_news_container {
        display: flex; /* フレックスボックスでレイアウト */
        flex-direction: column; /* 縦並び */
        gap: var(--spacing_md); /* アイテム間の隙間 */
        /* 最新ニュースアイテム */
        .latest_news_item {
            border-bottom: 1px dashed #333; /* 下部の罫線 */
            margin-bottom: var(--spacing_sm);
            padding: var(--spacing_xs);
        }
    }
}
/* メインメッセージセクション */
.main_message {
    margin-bottom: var(--spacing_xl);
    padding: var(--spacing_md);
    /* メインメッセージのコンテナ */
    & .main_message_container {
        display: flex; /* フレックスボックスでレイアウト */
        justify-content: center; /* 中央揃え */
        align-items: center; /* 中央揃え */
        gap: var(--spacing_md); /* アイテム間の隙間 */
        flex-wrap: wrap; /* 折り返し */
        /* メインメッセージのコンテンツ */
        & .main_message_text {
            flex: 1; /* フレックスアイテムの拡張 */
            max-width: 50%; /* 最大幅 */
            /* メインメッセージのパラグラフ */
            & p{
                max-width: 800px; /* 最大幅 */
            }
        }
        /* メインメッセージの画像 */
        & .main_message_image {
            flex: 1; /* フレックスアイテムの拡張 */
            & img{
                max-width: 100%; /* 最大幅 */
            }
        }
    }
}

.coaches_intro{
    /* コーチリスト */
    & .coaches_container {
        display: flex; /* フレックスボックスでレイアウト */
        flex-wrap: wrap; /* 折り返し */
        justify-content: center; /* 中央揃え */
        gap: var(--spacing_md); /* アイテム間の隙間 */
        /* コーチ */
        & .coach{
            max-width: 300px; /* 最大幅 */
            margin: 0 12px; /* マージン */
            border: 4px solid #1300ff;
            /* コーチ画像 */
            & img{
                width: 100%; /* 最大幅 */
                height: auto; /* 高さ自動 */
                object-fit: cover; /* 画像の切り抜き方法 */
            }
            & .coach_name {
                padding: var(--spacing_sm);
            }
        }
    }
}
.school_info{
    & .school_info_container {
        display: flex; /* フレックスボックスでレイアウト */
        flex-direction: row; /* 横並び */
        gap: var(--spacing_md); /* アイテム間の隙間 */
        align-items: flex-start; /* 上揃え */
        justify-content: center; /* 中央揃え */
        & .school_class {
            display: flex; /* フレックスボックスでレイアウト */
            flex-direction: column; /* 縦並び */
            align-items: center; /* 中央揃え */
            width: 45%; /* 各クラスの幅 */
            max-width: 500px; /* 最大幅 */
            margin: 0 12px; /* 中央揃え */
            border: 4px solid #1300ff;
            /* クラス画像 */
            & .class_image {
                flex: 1; /* フレックスアイテムの拡張 */
                display: flex; /* フレックスボックスでレイアウト */
                justify-content: center; /* 中央揃え */
                align-items: center; /* 中央揃え */
                border-bottom: 4px solid #1300ff;
                & img{
                    max-width: 100%; /* 最大幅 */
                    height: auto; /* 高さ自動 */
                }
            }
            /* クラステキスト */
            & .class_text {
                display: flex; /* フレックスボックスでレイアウト */
                flex: 1; /* フレックスアイテムの拡張 */
                flex-direction: column; /* 縦並び */
                align-items: center; /* 中央揃え */
                padding: var(--spacing_md);
                & .class_text_container p{
                    margin-bottom: var(--spacing_sm);
                    &:last-child{
                        margin-bottom: 0px;
                    }
                }
            }
        }
    }
}

.practice_scenes{
    & .practice_scenes_content{
        & p{
            margin-bottom: var(--spacing_md); /* 下部マージン */
        }
        /* ソーシャルリンクコンテナ */
        & .social_links {
            display: flex; /* フレックスボックスでレイアウト */
            justify-content: center; /* 中央揃え */
            gap: var(--spacing_md); /* アイテム間の隙間 */
        }
    }
}



/*お知らせについてのレスポンシブスタイル部分 */
.news_section{
    margin-top: var(--spacing_xl);
    padding: var(--spacing_md);
    & .news_year_heading {
        margin-bottom: var(--spacing_md); /* 下部の余白を4の倍数に調整 */
        border-left: 4px solid #1300ff; /* 左側にカラフルなボーダー */
        padding: 12px 0; /* 上下の余白 */
        padding-left: var(--spacing_md); /* テキストとボーダーの間の余白を4の倍数に調整 */
    }
    /* ニュース項目全体のスタイル */
    & .news_items {
        margin-bottom: var(--spacing_xl);
        padding: var(--spacing_md); /* 余白を4の倍数に調整 */
        /* 各ニュース項目のスタイル */
        & .news_item {
            margin-bottom: var(--spacing_lg); /* 各ニュース項目の下部の余白を4の倍数に調整 */
            border-bottom: 1px dashed #aaa; /* 下部の破線ボーダー */
            &:last-child{
                margin-bottom: 0; /* 最後のニュース項目の余白を削除 */
            }
            & p{
                padding: var(--spacing_sm);
            }
        }
    }
}

/* クラブについてのレイアウトスタイル部分*/
.history {
    margin-top: var(--spacing_xl);
    margin-bottom: var(--spacing_xl); /* 下部の余白を4の倍数に調整 */
    padding: var(--spacing_md);
    & .history__photo {
        margin-bottom: var(--spacing_md); /* 下部の余白を4の倍数に調整 */
        img{
            max-width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: cover;
        }
    }
}
/* クラブポリシーセクションのスタイル */
.policy {
    margin-bottom: var(--spacing_xl); /* 下部の余白を4の倍数に調整 */
    padding: var(--spacing_md);
    & p{
        margin-bottom: var(--spacing_xs);
    }
    & .policy__list {
        display: inline-block;
        padding: var(--spacing_md);
        & .policy__item {
            margin-bottom: var(--spacing_md); /* 下部の余白を4の倍数に調整 */
        }
    }
}

/* クラブの特徴セクションのスタイル */
.features {
    margin-bottom: var(--spacing_xl); /* 下部の余白を4の倍数に調整 */
    padding: var(--spacing_md);
    & .features__heading {
        margin-bottom: var(--spacing_xl); /* 下部の余白を4の倍数に調整 */
    }
    /* スキルセクションのスタイル */
    & .skills {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--spacing_md); /* 要素間の余白を4の倍数に調整 */
        padding: var(--spacing_md);
        & .skill {
            flex: 1 1 calc(33% - 16px); /* 幅とギャップを考慮して調整 */
            border: 1px solid #ddd;
            padding: var(--spacing_md); /* パディングを4の倍数に調整 */
            border-radius: 8px;
            & .skill__icon{
                & img{
                    max-width: 100%;
                    height: auto;
                }
                & .skill__point {
                    border-radius: 20px;
                    padding: 8px 12px;
                    display: inline-block;
                    margin-bottom: var(--spacing_md); /* 下部の余白を4の倍数に調整 */
                }
            }
            & .skill__content{
                & .skill__title {
                    margin-bottom: var(--spacing_md); /* 下部の余白を4の倍数に調整 */
                }          
            }
        }
    }
}




/* コーチ紹介のレイアウトスタイル部分 */
.coach_intro{
    margin-top: var(--spacing_xl);
    margin-bottom: var(--spacing_xl);
    padding: var(--spacing_md);
    & .coach_profiles {
        display: flex;
        justify-content: space-between; /* コーチプロファイルを均等に配置 */
        flex-wrap: wrap; /* 必要に応じて内部要素を改行 */
        & .coach_profile {
            width: calc(33.33% - 24px); /* 3列に並べるための幅設定 */
            margin: var(--spacing_sm);
            border: 2px solid #1300ff; /* ボーダー */
            padding: var(--spacing_md);
            border-radius: 8px;
            & .coach_photo {
                flex: 0 0 auto; /* 画像のサイズによって固定 */
                & img{
                    width: 100%;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                }
            }
            & .coach_details {
                display: flex;
                flex-direction: column;
                justify-content: center;
                & .details_list {
                    border: 2px solid #1300ff; /* ボーダーを追加 */
                    margin-top: var(--spacing_md); /* 上部マージンを追加 */
                    width: 100%; /* 幅を100%に設定 */
                    & li{
                        display: flex; /* フレックスボックスとして表示 */
                        align-items: center; /* 中央揃え */
                        margin-bottom: var(--spacing_sm);
                        padding: var(--spacing_md); /* 項目の内側の余白 */
                        border-bottom: 2px solid #1300ff; /* 下ボーダーを追加 */
                        &:last-child{
                            border-bottom: none; /* 最後の項目のボーダーを削除 */
                        }
                        & .list_label {
                            width: 80px; /* ラベルの幅を固定 */
                        }
                        & .list_content {
                            margin-left: var(--spacing_sm); /* ラベルと内容の間隔 */
                            flex: 1; /* 残りのスペースを均等に分配 */
                        }
                    }
                }
            }
        }
        & .special_coach {
            width: 100%; /* 深山コーチのプロフィールを1列幅に設定 */
            border: 2px solid #1300ff; /* 特別なボーダー */
            display: flex;
            align-items: center;
            & .special_photo {
                width: 50%;
                margin-right: var(--spacing_md);
            }
        }
        & .dummy_box {
            width: calc(33.33% - 24px); /* コーチプロファイルと同じ幅 */
            margin: 8px;
            visibility: hidden;
        }

    }
}


/* スクール案内のレイアウトスタイル部分 */
.class_section {
    margin-top: var(--spacing_xl);
    padding: var(--spacing_md);
    & .class_section_heading {
        margin-bottom: var(--spacing_xl); /* 下部の余白を4の倍数に調整 */
    }
    /* 詳細セクションのスタイル */
    & .class_section_details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing_md);
        & img{
            max-width: 50%; /* 画像の幅を調整する場合に適宜変更してください */
        }
        & .class_section_details_info {
            max-width: 45%; /* 詳細情報の幅を調整する場合に適宜変更してください */
            & ul li{
                margin-bottom: var(--spacing_sm); /* 下部の余白を4の倍数に調整 */
                & span{
                    display: inline-block;
                    padding: 4px 8px; /* パディングを追加して余白を作る */
                    border-radius: 4px; /* 角を丸める */
                }
            }
        }
    }
}

/* 練習スケジュールのスタイル */
.schedule_section{
    margin-top: var(--spacing_xl);
    padding: var(--spacing_md);
    & .calendar_container{
        padding: var(--spacing_md);
    }
    
}

/* 練習場所のスタイル */
.locations_section{
    margin-top: var(--spacing_xl);
    margin-bottom: var(--spacing_xl);
    padding: var(--spacing_md);
    & .practice_locations {
        display: flex;
        justify-content: center;
        gap: var(--spacing_md); /* 各会場セクション間のスペースを4の倍数に調整 */
        & .practice_location {
            flex: 1 1 calc(50% - 16px); /* 2つの会場を横並びに配置 */
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 8px; /* 角を丸める */
            padding: var(--spacing_sm);
            border: 2px solid #1300ff;
            & .practice_location_info {
                margin-bottom: var(--spacing_md); /* 下部の余白を4の倍数に調整 */
                & h3{
                    margin-top: var(--spacing_sm);
                }
                & p{
                    margin: 8px 0; /* 各段落の間隔を調整 */
                }
            }
            & .practice_location_map {
                width: 100%;
            }
        }
    }
}

@media screen and (max-width: 1024px) {
   /* クラス案内のレスポンシブデザイン */
    .class_section{
        & .class_section_details {
            flex-direction: column;
            align-items: center;
            & img{
                max-width: 100%;
            }
            & .class_section_details_info {
                max-width: 100%;
                margin-top: var(--spacing_lg); /* 4の倍数に調整 */
            }
        }
    }
}

/* 最大幅768px用のレスポンシブデザイン */
@media screen and (max-width: 768px) {

    /* ニュースセクション */
   .latest_news {
       padding: var(--spacing_lg); /* 内側の余白 */
       margin-bottom: var(--spacing_lg); /* 下部マージン */
   }

    /* メインメッセージセクション */
   .main_message {
       padding: var(--spacing_lg); /* 内側の余白 */
       margin: 16px 0; /* 上下マージン */
        & .main_message_container {
            flex-direction: column-reverse; /* フレックス方向 */
            text-align: center; /* テキスト中央揃え */
            & :is(.main_message_text,.main_message_image){
                max-width: 100%; /* 最大幅 */
            }
        }
   }

    /* コーチ紹介セクション */
   .coaches_intro{
        & .coaches_container{
            & .coach {
                flex: 1 1 100%; /* 幅設定 */
                max-width: 90%; /* 最大幅 */
                margin: 8px 0; /* 上下マージン */
            }         
        }
   }

    /* スクール情報セクション */
    .school_info{
        & .school_info_container {
            flex-direction: column; /* フレックス方向 */
            & .school_class {
                margin: 0 auto;
                width: 90%;
                & .class_text {
                    max-width: 80%; /* 最大幅 */
                }
            }
        }
   }

   /* 練習風景セクション */
   .practice_scenes {
       padding: var(--spacing_lg); /* 内側の余白 */
       border-radius: 4px; /* 角丸 */
       margin-bottom: var(--spacing_lg); /* 下部マージン */
       & .practice_scenes_content{
            & p{
                margin-bottom: var(--spacing_lg); /* 下部マージン */
            }
            & .social_links {
                align-items: center; /* 中央揃え */
                & .social_link {
                    padding: 8px 16px; /* 内側の余白 */
                    border-radius: 4px; /* 角丸 */
                }
            }
       }
   }    

   .history{
        /* Club History セクションのスタイル */
        & .history__photo {
            margin: 0 auto 16px; /* 下部の余白を4の倍数に調整 */
            & img{
                max-height: 300px; /* モバイル用に高さを調整 */
            }
        }
        & .history__text {
            margin: 0 16px; /* 横の余白を調整 */
        }
   }

   .policy{
        /* クラブポリシーセクションのスタイル */
        & .policy__list {
            padding: 0;
            margin: 0 16px; /* 横の余白を調整 */
            & .policy__item {
                margin-bottom: var(--spacing_lg); /* 下部の余白を4の倍数に調整 */
            }
        }
   }

   .features{
        & .features__heading {
            margin-bottom: var(--spacing_lg); /* 下部の余白を4の倍数に調整 */
        }
        & .skills {
            flex-direction: column; /* 縦並びに変更 */
            gap: var(--spacing_lg); /* 要素間の余白を4の倍数に調整 */
            & .skill {
                flex: 1 1 auto; /* 幅を自動調整 */
                padding: var(--spacing_lg); /* パディングを4の倍数に調整 */
                margin-bottom: var(--spacing_lg); /* 下部の余白を4の倍数に調整 */
                & .skill__icon{
                    & .skill__point {
                        margin-bottom: var(--spacing_lg); /* 下部の余白を4の倍数に調整 */
                    }
                }
                & .skill__content{
                    & .skill__title {
                        margin-bottom: var(--spacing_lg); /* 下部の余白を4の倍数に調整 */
                    }
                }
            }
        }
   }

   /* コーチ紹介のレスポンシブデザイン */
   .coach_intro{
        & .coach_profiles {
            flex-direction: column; /* コーチプロフィールを縦並びにする */
            align-items: center; /* 中央揃えにする */
            & .coach_profile {
                width: 100%; /* コーチプロファイルを幅100%に設定 */
                margin: 8px 0; /* 上下のマージンを調整 */
                & .coach_details{
                    margin-top: var(--spacing_lg);
                    & .details_list{
                        margin-top: var(--spacing_lg);
                        & li{
                            flex-direction: column; /* ラベルと内容を縦並びにする */
                            align-items: flex-start; /* 左寄せにする */
                            padding: var(--spacing_sm); /* パディングを調整 */
                            & .list_label{
                                width: auto; /* ラベルの幅を自動に設定 */
                                margin-bottom: var(--spacing_xs); /* ラベルと内容の間隔を調整 */
                            }
                            & .list_content{
                                margin-left: 0; /* ラベルと内容の間隔を調整 */
                            }
                        }
                    }
                }
            }
            & .dummy_box{
                display: none;
            }
            & .special_coach {
                width: 100%; /* 特別なコーチプロフィールも幅100%に設定 */
                margin: 8px 0; /* 上下のマージンを調整 */
                display: block; /* 縦並びにするために display: block に設定 */
                & .special_photo {
                    width: 100%;
                    margin-right: 0px;
                }
            }
        }
   }

   .locations_section{
        & .practice_locations {
            flex-direction: column;
            gap: var(--spacing_lg); /* 4の倍数に調整 */
            & .practice_location {
                width: 100%;
                margin-bottom: var(--spacing_lg); /* 4の倍数に調整 */
            }
        }
   }
}