:root {
    --raise-button-color: #f03c3c;
    --call-button-color: #5ab966;
    --fold-button-color: #3d7cb8;
    --seekerstart-color: #f2ba22;
}

* {
    margin: 0;
    padding: 0;
}

.header {
    /* background-color: var(--seekerstart-color); */
    background: linear-gradient(to right, var(--seekerstart-color), #c9cbca);
    color: black;
    font-style: italic;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 5em;
    line-height: 5em;
}

.main-content {
    display: flex;
}

.left-pane {
    display: block;
    width: calc(30% - 7px);
    height: 100%;
    margin: 20px 8px 8px 8px;
    box-sizing: border-box;
    overflow-y: scroll;
    transform: translateZ(0);
}

.explanation {
    width: 90%;
    align-items: center;
}

.detailExplanation {
    font-size: small;
}

.right-pane {
    display: block;
    width: calc(70% - 7px);
    height: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
    transform: translateZ(0);
}

.gutter {
    display: block;
    box-sizing: border-box;
    width: 14px;
    /* cursor: ew-resize; */
    background-image: url("images/gutter.png");
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: center;
}

#seats-image-container {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}

.question {
    font-size: 20px;
    margin: 20px 2em;
}

#hero-hand-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3em auto;
}

.hero-card-container {
    position: relative;
    width: 100px; /* カードの幅 */
    height: 145px;
    /* background-color: magenta; */
}

.overlay-image,
.base-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.base-image {
    z-index: 1;
}

.overlay-image {
    z-index: 2;
}

#nextButton-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.nextButton {
    /* background-color: #4CAF50; Green */
    background-color: white;
    border: 3px solid black;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
}

#actionButton-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.actionButton {
    border: none;
    color: white;
    /* padding: 15px 32px; */
    height: 60px;
    width: 30%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
}

#raiseButton {
    background-color: var(--raise-button-color);
}
#callButton {
    background-color: var(--call-button-color);
}
#foldButton {
    background-color: var(--fold-button-color);
}

@media screen and (max-width: 768px) {
    .main-content {
        flex-direction: column-reverse;
    }
    .right-pane {
        width: 100%;
    }
    .left-pane {
        width: 100%;
    }
    .gutter {
        display: none;
    }
}