/*横長のスタイル*/
@media (min-aspect-ratio: 1/1) {
    :root{
        font-size: 20px;
    }
    body {
        background-color: #00f;
    }



    .main-content{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        position: absolute;
        width:100%;
        z-index: 1;
    }



    .control-area{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }
    .game-board-area{
        width:50%;
    }
    .control-area{

        width:50%;

    }

    .control-leftcenter{
        
        width: 75%;
    }
    .control-left{
        width:40%;
    }
    
    .control-center{
        width:60%;
    }
    
    .control-right{
        width:25%;
    }

    .count-stone-text{
        font-size: 2rem;
        font-weight: bold;
        margin:auto;
    }


    .row {
        display: flex;
        width:100%;
        
    
    }
    
    .cell {
    
        width: 12%;
        /*max-width: 80px;*/
        aspect-ratio: 1 / 1;
        background-color: var(--content-bg);
        border-color: black;
        border:  2px solid;
    
        display: flex;          /* フレックスボックスとして設定 */
        justify-content: center; /* 水平方向の中央揃え */
        align-items: center;    /* 垂直方向の中央揃え */
        position: relative;
    }
    
    
    .stone{
        width: 90%;/*幅*/
        aspect-ratio: 1 / 1;
        border-radius: 50%;/*角丸*/
        border:  2px solid;
        position: absolute;
        z-index: 20;
    }
    .strong{
        width: 20%;/*幅*/
        height: 20%;/*高さ*/
        border-radius: 10%;/*角丸*/
        border-color: #cc0;
        border:  2px solid;
        background: #aa0;

        position: absolute;
        z-index: 100;
    }


    .cpu-custom-selectbox{

        width:100%;
        height: 40%;
        
    
    }

}