/* 文字コード指定 */
@charset "utf-8";

/* トランジション */
/* 全体 */
[v-cloak] { display : none; }
@keyframes cloak-in { 0% { opacity : 0.0; } 100% { opacity : 1.0; } }
#main { animation : cloak-in 1.0s; }
#main[v-cloak] { opacity : 0.0; }
/* フェードイン */
.fade-enter-active { transition : all 0.5s; }
.fade-enter { opacity : 0.0; }
.fade-enter-to { opacity : 1.0; }
/* フェードアウト */
.fade-leave-active { transition : all 0.5s; }
.fade-leave { opacity : 1.0; }
.fade-leave-to { opacity : 0.0; }

/* リセット */
* { margin : 0; padding : 0; user-select : none; }
/* ページ */
html, body { overflow : hidden; height : 100vh;}
body { font-family : "游明朝","Yu Mincho","YuMincho"; font-weight : bold; color : #ffffff; background : #555555; }
/* 全体 */
#main { position : absolute; top : 0; left : 0; width : 100%; height : 100%; }
/* タブ */
.tab_in { opacity : 1.0; transition : all 0.3s ease-in-out; }
.tab_out { opacity : 0.0; transition : all 0.3s ease-in-out; }
/* ボタン */
.btn { display : flex; justify-content : center; align-items : center; position : absolute; top : 0px; left : 0px; width : 150px; height : 30px; font-size : 15px; transition : all 0.5s; }
.btn_off { color : #000; background : #fff; border : 1px solid #908A6A; pointer-events : auto; cursor : pointer; }
.btn_on { color : #ffffff; background : #908A6A; border : 1px solid #908A6A; pointer-events : none; cursor : default; }
.btn_over { color : #ffffff; background : #b9b496; border : 1px solid #908A6A; pointer-events : auto; cursor : pointer; }
.btn_non { color : #000000; background : #fff; border : 1px solid #908A6A; pointer-events : none; cursor : default; opacity : 0.5; }


.btn2 { display : flex; justify-content : center; align-items : center; position : absolute; top : 0px; left : 0px; width : 180px; height : 30px; font-size : 14px; transition : all 0.5s; }
.btn2_off { color : #000; background : #fff; border : 1px solid #908A6A; pointer-events : auto; cursor : pointer; }
.btn2_on { color : #ffffff; background : #908A6A; border : 1px solid #908A6A; pointer-events : none; cursor : default; }
.btn2_over { color : #ffffff; background : #b9b496; border : 1px solid #908A6A; pointer-events : auto; cursor : pointer; }
.btn2_non { color : #000000; background : #fff; border : 1px solid #908A6A; pointer-events : none; cursor : default; opacity : 0.5; }

/* ポイント */
.point { width : 100px; height : 100px; }
.point_off { pointer-events : auto; cursor : pointer; }
.point_on { pointer-events : none; cursor : default; }
.point_non { pointer-events : none; cursor : default; opacity : 0.5; }

/* セレクト オプション */
select, option { font-size : 16px; transform : scale( 0.8 ); }

/* 閉じるボタン消す */ 
#div_close { display: none; }

@media screen and (max-width:770px){
    /* 閉じるボタンスマホでは表示 */ 
    #div_close { display: block; }
    #tab_btn_mask { opacity: 0.5; }
}