/* 
 * デスクトップ版セクション共通レイアウト
 * BEM命名規則に基づくセクション構造
 */

/* Block: セクション */
.section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    left: 0;
    right: 0;
}

/* Element: セクションコンテナ */
.section__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}

/* Element: セクションタイトル */
.section__title {
    color: rgb(164, 11, 94);
    text-align: center;
    margin: 40px auto 30px;
    font-family: YuMincho, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro W3";
    width: 100%;
    font-size: 28px;
}

/* Element: セクションコンテンツ */
.section__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    overflow: visible;
    padding-bottom: 60px;
}

/* Element: セクションブロック */
.section__block {
    flex: 1 1 400px;
    max-width: 600px;
    padding: 0 30px;
    margin: 10px 15px;
    text-align: center;
    overflow: visible;
}

/* Modifier: デスクトップセクション */
.section--desktop {
    /* 既にデフォルトがデスクトップ向けなので追加スタイルは必要なし */
}

/* Modifier: 全幅セクション */
.section--full-width {
    max-width: 100vw;
}

/* Element + Modifier: 幅広コンテナ */
.section__container--wide {
    max-width: 1400px;
}

/* 
 * レガシーコード互換部分
 * 既存のコードとの互換性を保つための非BEMセレクタ
 */

/* 従来のクラス名との互換性 */
.section-container {
    /* .section__container と同じ */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}

.section-title {
    /* .section__title と同じ */
    color: rgb(164, 11, 94);
    text-align: center;
    margin: 40px auto 30px;
    font-family: YuMincho, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro W3";
    width: 100%;
    font-size: 28px;
}

.section-content {
    /* .section__content と同じ */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    overflow: visible;
    padding-bottom: 60px;
}

.section-block {
    /* .section__block と同じ */
    flex: 1 1 400px;
    max-width: 600px;
    padding: 0 30px;
    margin: 10px 15px;
    text-align: center;
    overflow: visible;
}

/* HTML要素セレクタによるスタイル（既存のHTMLに対応） */
section content {
    /* .section__content と同じ */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    padding-top: 0;
    padding-bottom: 60px;
}

section content block {
    /* .section__block と同じ */
    flex: 1 1 400px;
    padding: 0 30px;
    margin: 10px 15px;
    text-align: center;
}