/* ブラウザーごとの差異をなくす */
@import url(sanitize.css);

/* デフォルト（ライトモード）時の罫線設定 */
    .border { border-bottom: 2px solid black; }  
    .border-bottom { border-bottom: 2px solid black; }
    .border-left { border-left: 2px solid black; }
    .border-top { border-top: 2px solid black; }
    .border-right { border-right: 2px solid black; }


/*ダークモード対応*/
@media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
      color: #fff;
    }

    table, td {
        border-color: white; /* 罫線を白に */
    }

    a:link{
        color: #00bfff; /* 訪問していないリンクテキストの色を設定 */
    }
    a:visited{
        color: #c5e; /* 既に訪問したリンクテキストの色を設定 */
    }

    .border { border: 2px solid white;}  
    .border-bottom { border-bottom: 2px solid white; }
    .border-left { border-left: 2px solid white; }
    .border-top { border-top: 2px solid white; }
    .border-right { border-right: 2px solid white; }


/* a:link: 訪問していないリンク。
a:visited: 既に訪問したリンク。
a:hover: マウスオーバー（リンクにカーソルが重なった状態）。
a:active: リンクをクリックしている瞬間。 */

    }

    body{
        display: grid;               /* tableを中央に表示するためグリッドレイアウトを使用 */
        place-items: center;          /* 水平・垂直方向の中央揃え */
        text-align: center;
    }
   
    .container {
        display: flex;
        gap: 10px; /* テーブル間の隙間 */
        padding: 10px;
        justify-content: center; /* テーブルを中央に配置 */
    }

    img {
        display: block;
        margin: auto;  /* 画像を中央揃え  */
    }

    button {
        display: block;
        margin: auto;  /* ボタンを中央揃え  */
        border: none; /* ボタンの枠線（border）を削除します。*/
        outline: none; /* ボタンをクリックしたときに出るアウトラインを削除します（キーボード操作時も含む）。*/
        padding: 0; /* デフォルトの余白を削除します（必要に応じて）。*/
        /* background: none; ボタンの背景色を削除します（必要に応じて）ダークモードの場合カーソルをボタンの上に移動すると暗くなる。*/
    }

    textarea{
        display: block;
        margin: auto;  /* テキストエリアを中央揃え  */
    }

    img.title{
        width: 640px;
        text-align: center;     
        /* margin-bottom: 30px; */
    }

    h1{
        margin-bottom: 20px;
    }


    table{
        margin: 0 20px;
        text-align: left;
    }
    
    td{
        width: 80px;
        min-width: 80px;         /* 最小幅を指定して変動を防止 */
        max-width: 80px;         /* 最大幅を指定して変動を防止 */
    }

    p{
        margin-top: 0px;
        text-align: center;
    }

    .close{
        font-size: 1.2em;       /*閉じるボタンのサイズ*/
        margin: 40px;
    }

    .tittle{
        font-size: 1.5em;       /*タイトルの文字サイズ*/
    }


    /*カーソルが画僧の上に来た時の動作*/
button>img:hover{ 
	opacity:0.3;            /*透明度*/
	transition:0.3s;        /*変化時間*/
    cursor: pointer;
}

/*画僧をクリックした時の動作*/
button>img:active{ 
	opacity:1;            /*透明度*/
	transition:0.3s;        /*変化時間*/
}

/*MagicSkill用*/
 .container1{
        position: relative;
}
.container1 img{
        width:900px;
}
.HP{
        position: absolute;
        top:65px;
        left:118px;
        font-size:40px;
        color: white;
        padding:0;
        margin:0;
}
.MP{
        position: absolute;
        top:65px;
        right:113px;
        font-size:40px;
        color: white;
        padding:0;
        margin:0;
}
.LV{
        position: absolute;
        top:80px;
        left:360px;
        font-size:40px;
        color: white;
        padding:0;
        margin:0;
}
.LD{
        position: absolute;
        top:32px;
        left:360px;
        font-size:40px;
        color: white;
        padding:0;
        margin:0;
}
.AD{
        position: absolute;
        top:140px;
        left:40px;
        font-size:40px;
        color: white;
        padding:0;
        margin:0;
}
.CT{
        position: absolute;
        top:140px;
        right:35px;
        font-size:40px;
        color: white;
        padding:0;
        margin:0;
}

 .container2{
        position: relative;
}
.container2 img{
        width:640px;
}
.STR{
        position: absolute;
        top:50px;
        left:310px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.AGI{
        position: absolute;
        top:154px;
        left:310px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.INT{
        position: absolute;
        top:258px;
        left:310px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.HitP{
        position: absolute;
        top:362px;
        left:310px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.MagicP{
        position: absolute;
        top:466px;
        left:310px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.ReSTA{
        position: absolute;
        top:1px;
        left:193px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.Level{
        position: absolute;
        top:578px;
        left:283px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.EXP{
        position: absolute;
        top:664px;
        left:348px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.NextLevel{
        position: absolute;
        top:664px;
        left:568px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.Undo{
        position: absolute;
        top:589px;
        left:174px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.Decision{
        position: absolute;
        top:660px;
        left:174px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
 .container3{
        position: relative;
}
.container3 img{
        width:640px;
}
.Skill{
        position: absolute;
        top:40px;
        left: 433px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.Undo_s{
        position: absolute;
        top:589px;
        left:190px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}
.Decision_s{
        position: absolute;
        top:660px;
        left:190px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}

 .container4{
        position: relative;
}
.container4 img{
        width:640px;
}

.SkillBox{
        position: absolute;
        top:580px;
        left:195px;
        font-size:50px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 2px white; /* 縁取り */
        padding:0;
        margin:0;
}

.SkillList{
        position: absolute;
        top:138px;
        left: 406px;
        font-size:100px;
        font-weight: bold;
        color: rgb(255, 55, 0);         /* 文字色 */
        -webkit-text-stroke: 3px white; /* 縁取り */
        padding:0;
        margin:0;
}