@charset "UTF-8";

/*タブレット用css*/
/*デバイスが縦向きの場合の記述*/
@media (orientation: portrait){

header,
#mainMenu,
#mainMenuWrap,
#mainVisual,
#mainBG,
#mainChara,
#catch{
height: 55vh;
}
#spBnrWrap{
width: 12vh;
min-width: 120px;
}

#mainBG{
background: url("/eximages/2020/images_new/pc_header_bg_h.jpg") center bottom no-repeat;
background-size: auto 150%;
}
#mainChara1{
background: url("/eximages/2020/images_new/pc_header_chara1_h.png") center  12% no-repeat;
background-size: auto 50%;
}
#mainChara2{
background: url("/eximages/2020/images_new/pc_header_chara2_h.png") center  12% no-repeat;
background-size: auto 50%;
}
#catch{
background: url("/eximages/2020/images_new/catch_pc_h2.png") center  12% no-repeat;
background-size: auto 80%;
}
#main2BG{
background: url("/eximages/2020/images_new/pc_header2_bg.jpg") center -75% no-repeat;
background-size: auto 75%;
}
#main2Chara{
background: url("/eximages/2020/images_new/pc_header2_chara2.png") center 8% no-repeat;
background-size: auto 50%;
}
#catch2{
background: url("/eximages/2020/images_new/catch2_pc.png") center 7% no-repeat;
background-size: auto 50%;
}

}

/*デバイスが横向きの場合*/
@media (orientation: landscape){

header,
#mainMenu,
#mainMenuWrap,
#mainVisual,
#mainBG,
#mainChara,
#catch{
height: 96vh;
}
#spBnrWrap{
width: 20vh;
min-width: 150px;
}

#mainChara1{
background: url("/eximages/2020/images_new/pc_header_chara1_h.png") center bottom no-repeat;
background-size: auto 80%;
}
#mainChara2{
background: url("/eximages/2020/images_new/pc_header_chara2_h.png") center bottom no-repeat;
background-size: auto 80%;
}
#catch{
background: url("/eximages/2020/images_new/catch_pc_h2.png") center bottom no-repeat;
background-size: auto 80%;
}
#main2Chara{
background: url("/eximages/2020/images_new/pc_header2_chara2.png") center bottom no-repeat;
background-size: auto 80%;
}
 
}