/* ===== Minimal Reset (安全・軽量版) ===== */
@layer reset, base, components, utilities;

/* すべての要素で box-sizing を境界内計算に */
@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 余白の初期値に左右されないように */
    * {
        margin: 0;
    }

    /* メディア要素を親幅に収める・行間崩れ防止 */
    img,
    svg,
    video,
    canvas,
    audio,
    iframe {
        display: block;
        max-width: 100%;
    }

    /* テキストが狭い画面であふれにくく */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: anywhere;
    }

    /* フォーム系を本文のフォントに揃える */
    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    /* ボタンらしさは残す／ユーザー選択は有効 */
    button {
        cursor: pointer;
    }

    /* リストのインデントが大きすぎる問題の緩和 */
    ul,
    ol {
        padding-left: 1.25rem;
    }

    /* テキスト系の読みやすさの土台 */
    html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100dvh;
        text-rendering: optimizeLegibility;
    }
}

header {
    padding: 15px;
    background-color: rgba(150, 197, 244, 0.618);
    position: sticky;
    top: 0;
}

.titleSection {
    max-width: 600px;
    margin: 0 auto;
    display: block;
}


#nextStageArtistTitle {
    display: block;
    border: 1px solid rgb(140, 120, 120);
    padding: 5px;
    margin: 15px auto 0;
    position: relative;
    width: 100%;
}

.mainSection {
    max-width: 600px !important;
    margin-top: 0 !important;
    padding-top: 0px !important;
    position: relative;
    top: -60px;
}

.sectionCategory {
    display: block;
    /* background-color: rgba(253, 245, 177, 0.588); */
    height: auto;
    width: auto;
    padding: 0 0 0 5px;
    border-radius: 10px;
    /* margin-bottom: 40px; */
}

.categoryTitle {
    /* background-color: white; */
    padding: 3px 0px 5px 10px;
    margin-bottom: 0;
    margin-top: 10px;
    color: rgb(105, 105, 105);
    background: transparent;
    border-left: 5px solid rgba(105, 105, 105, 1);
    font-size: larger;
}

.categoryTitle::before {
    /* content: "■"; */
    content: "";
    /* display: inline-block; */
}

.eachForm {
    margin: 25px auto 65px;
    /* margin-left: 30px; */
    background-color: rgba(200, 200, 220, 0.5);
    padding: 15px;
    border-radius: 20px;
}

.formSectionTitle {
    font-size: medium;
    margin: 20px 0 0 0!important;
}

.formSectionTitle::before {
    content: "■";
    color: blue;
    /* margin-left: -15px; */
}


.genderWrapper {
    display: flex;
}

.genderWrapper div {
    margin-right: 20px;

}



.bday {
    display: flex;
    gap: .5rem;
}

.bday select {
    padding: .5rem .6rem;
    font-size: 1rem;
    min-width: 7rem;
}

#s-m,
#s-d {
    min-width: 5.5rem;
}

.error {
    color: #c00;
    display: block;
    margin-top: .25rem;
}

.age-box {
    margin-top: .4rem;
    font-size: .95rem;
    color: #333;
}


.confirmBtnSection {
    margin-bottom: 0px;
}

#message{
    margin-top: 5px;
}