/* 文字コード指定 */
@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; width: 100%; height: 100%;}
body { font-family : "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; color : #000000; background : #555555; }
/* 全体 */
#main { position : absolute; top : 60px; left : 0; width : 100%; height : calc(100% - 60px); }
/* タブ */
.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; top : 0px; left : 0px; width : 120px; height : 24px; font-size : 12px; transition : all 0.5s; margin: 5px; border: 2px solid #6E6664;}
.btn_off { color : #6E6664; background : #ffffff; pointer-events : auto; cursor : pointer; }
.btn_on { color : #ffffff; background : #6E6664;  pointer-events : none; cursor : default; }
.btn_over { color : #ffffff; background : #6E6664;  pointer-events : auto; cursor : pointer; }
.btn_non { color : #ffffff; background : #85c9e8; border : 1px solid #ffffff; pointer-events : none; cursor : default; opacity : 0.5; }
/* ポイント */
.point { width : 100px; height : 100px; }
.point_off { pointer-events : auto; cursor : pointer; opacity : 1.0;}
.point_on { pointer-events : none; cursor : default; }
.point_non { pointer-events : none; cursor : default; opacity : 0.5; }

#tab_btn_mask { display: block;  position : absolute; top : 0px; left : 0px; width : 40px; height : 40px; background : #C9C4BE; }

/* スペック */
#div_type { font-size: 28px; }
#span_type { font-size: 20px; }
#div_spec { font-size: 15px;}
#div_sp_label { font-size: 14px; display: none;}
#div_area_label { font-size: 14px;}
#div_area_ba_label { font-size: 14px; }
/* トランクルーム面積 */
#div_area_tr_label { font-size : 14px; }
/* トランクルーム面積2 */
#div_area_tr_2_label { font-size : 14px; }
#div_area_text { font-size: 18px; }
#div_tubo { font-size: 16px; }
#div_taste_label { font-size: 14px; }
#div_taste_text { font-size: 16px; }
#div_plan_text {font-size: 16px;}
#div_type_select_btn { display: none;}

/* タブ */
#tab { position: absolute;  top:0px; left:0px ; width: 500px; height: 880px; }

/* 図面 */
#div_dirs { position: absolute; top: 300px; left: 25px; width: 450px; height: 450px; border: 1px solid #000000;}

/* オプションボタン */

#div_dir_back { display: none; }

/* 画像用 注釈 */
#div_hand_desc { display: none; }

/* スマホ てっぺんに戻るボタン*/
#div_top_scroll { display: none;}

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

/* ポップアップ */
#popup { display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.7 ); cursor: pointer; overflow: hidden;}

/* 右上closeボタン */
#div_close { position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer; }

#header { position: absolute; top: 0px; left: 0px; width: 100%; height: 60px; background: #ffffff; display: flex; justify-content: space-between; box-shadow: 0px 6px 10px 0 rgba(0, 0, 0, 0.1); }
#header img { height: 100%; width: auto; }
#top, #logo { cursor: pointer; }
#top { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; color: #758492; margin-right: 24px; }
#top img { height: 60%; width: auto; }

@media screen and (max-width:1000px){
    #tab_btn_mask { display: none; }
}

@media screen and ( max-aspect-ratio: 10/9 ) and ( max-aspect-ratio: 10/10 ){
    html, body { overflow-x : hidden ; width: 100%; height : 100vh;}
    #main { overflow-y : scroll; }
    #tab { position: absolute;  top: 0px; left:0px ; width: 100%; height: 1010px; overflow-y : hidden;}
    #tab_btn_mask { display: none; }
    /* スペック */
    #div_type { position: absolute; top : -445px ; left : -5px ; font-size: 18px; }
    #span_type { font-size: 14px; display: none;}
    #div_sp_label { font-size: 12px; display :block; line-height: bottom 20px;}
    #div_area_label { font-size: 12px; }
    #div_area_ba_label {font-size: 12px; }
	/* トランクルーム面積 */
    #div_area_tr_label { font-size : 12px; }
	/* トランクルーム面積2 */
    #div_area_tr_2_label { font-size : 12px; }
    #div_area_text { padding-left : 20px; font-size: 12px; white-space: nowrap;}
    #div_tubo { font-size: 12px; }
    #div_spec { font-size: 12px; }
    #div_taste_label { top : 510px ; left : 20px;  font-size: 12px; }
    #div_taste_text { top : 0px ; left : 110px; font-size: 12px; white-space: nowrap;}
    #div_plan_text { display: block; position: absolute; top : -443px ; left : 100px; font-size: 12px; }

    /* スマホのみ ラベル*/
    #div_type_label_text { display: flex; position: absolute; top : -444px ; left : 50px ; font-size: 14px; }
    #div_type_select_btn { display: block; position: absolute; top : 6px ; left : 70px ; width: 25px; height: 25px; display: none;}
    #div_type_select_btn img{ width: 100%; height: 100% ; transform: rotate(180deg); }

    #div_dirs { position: absolute; top: 576px;  width: 450px; height: 450px; background: #ffffff; border: none; };
    #div_dir_back { display: block; position: absolute; top: 505px; left: 0px; width: 100%; height: 340px; background: #ffffff; }

    /* 画像用 注釈*/
    #div_hand_desc { display: none; position: absolute; top: 0px;  left: 0px; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.7 ); cursor: pointer; overflow: hidden;}

    /* 一番上に戻る */
    #div_top_scroll { display: block; position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; opacity: 0.7;}

    /* ボタン */
    .btn { display : flex; justify-content : center; align-items : center; top : 0px; left : 0px; width : 100px; height : 20px; font-size : 8px; transition : all 0.5s; margin: 3px;}

    /* ポップアップ */
    #popup { display: none; position: absolute; top: 40px; left: 0px; width: 100%; height: 410px; background: rgba( 0, 0, 0, 0.7 ); overflow: hidden; }

}