/* ========================================
   Three Buttons Horizontal Layout
   - three-buttons-horizontal レイアウト
   ======================================== */

.three-buttons-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    margin: 1rem 0 1.5rem;
    box-sizing: border-box;
}

.three-buttons-horizontal .irregular-button-row {
    display: contents;
}

.three-buttons-horizontal .irregular-button1,
.three-buttons-horizontal .irregular-button2,
.three-buttons-horizontal .irregular-button3 {
    flex: 0 0 100px;
    min-width: 100px;
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* モバイル（640px以下） */
@media (max-width: 640px) {
    .three-buttons-horizontal {
        gap: 0.6rem;
        padding-left: 0;
        padding-right: 0;
    }
}

/* タブレット（641px-1263px） */
@media (min-width: 641px) and (max-width: 1263px) {
    .three-buttons-horizontal {
        gap: 1rem;
        padding-left: 4%;
        padding-right: 4%;
    }

    .three-buttons-horizontal .irregular-button1,
    .three-buttons-horizontal .irregular-button2,
    .three-buttons-horizontal .irregular-button3 {
        flex: 0 0 130px;
        min-width: 130px;
        max-width: 130px;
    }
}

/* PC（1264px以上） */
@media (min-width: 1264px) {
    .three-buttons-horizontal {
        padding-left: 2%;
        padding-right: 2%;
    }

    .three-buttons-horizontal .irregular-button1,
    .three-buttons-horizontal .irregular-button2,
    .three-buttons-horizontal .irregular-button3 {
        flex: 0 0 130px;
        min-width: 130px;
        max-width: 130px;
    }
}

/* ========================================
   Two Buttons Horizontal Layout
   - two-buttons-horizontal レイアウト
   ======================================== */

.two-buttons-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin: 0.5rem 0;
    box-sizing: border-box;
}

.two-buttons-horizontal__button1,
.two-buttons-horizontal__button2 {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* モバイル（640px以下） */
@media (max-width: 640px) {
    .two-buttons-horizontal {
        gap: 0.75rem;
        padding-left: 0;
        padding-right: 0;
    }
    
    .two-buttons-horizontal__button1,
    .two-buttons-horizontal__button2 {
        flex: 0 0 auto;
    }
}

/* タブレット（641px-1263px） */
@media (min-width: 641px) and (max-width: 1263px) {
    .two-buttons-horizontal {
        gap: 1rem;
        padding-left: 4%;
        padding-right: 4%;
    }
    
    .two-buttons-horizontal__button1,
    .two-buttons-horizontal__button2 {
        flex: 0 0 auto;
    }
}

/* PC（1264px以上） */
@media (min-width: 1264px) {
    .two-buttons-horizontal {
        gap: 1rem;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    .two-buttons-horizontal__button1,
    .two-buttons-horizontal__button2 {
        flex: 0 0 auto;
    }
}