@charset "utf-8";
/* ==================================================================
CSS information
style info :サイドナビ用（日本語版）
================================================================== */

/* --------------------------------------------------------
#gNavi_wrap
-------------------------------------------------------- */
#gNavi_wrap { background:url(../img/gnavi-bg.jpg) repeat-y 0 0; width:238px; padding:0px 0 0px; z-index:110; position: absolute; top:0; left:0; height:100%; }
#gNavi_wrap:after { content: ""; display: block; clear: both; }
#gNavi_wrap { zoom:1; }
#gNavi_wrap { overflow:hidden;}

#gNavi_set { position: fixed; top:44px; left:0; width: auto; height: 100%;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#lower #gNavi_wrap { background:#000; padding:0px 0 10px; }
#gNavi_wrap { background:#000; padding:0px 0 10px; }
#gNavi_wrap { width:100%; position: relative; height:100%; }

#gNavi_set { position: relative; top:0px; left:0; width: auto; height: auto;}
}


/* #sb-tpp / #sb-gz
-------------------------------------------------------- */
#sb-set { width:72px; height:100%; position:relative; float:left; margin-top:-3px;}
#sb-tpp { width:36px; height:100%; position:relative; float:left;}
#sb-gz { width:36px; height:100%; position:relative; float:left;}

#sb-tpp a { display:block; width:100%; height:100%; position:relative; border:0px solid #00F; }
#sb-gz a { display:block; width:100%; height:100%; position:relative; border:0px solid #00F; }

#sb-tpp a span { white-space:nowrap; text-indent:100%; overflow:hidden; display:block; width:36px; height:100%; position: relative; }
#sb-gz a span { white-space:nowrap; text-indent:100%; overflow:hidden; display:block; width:36px; height:100%; position: relative; }

#sb-tpp a .ti { background:url(../img/sb-tpp.png) no-repeat 0 0; }
#sb-tpp a .ti.menuclose { background:url(../img/sb-tpp_c.png) no-repeat 0 0; }
#sb-gz a .ti { background:url(../img/sb-gz.png) no-repeat 0 0; }

#sb-tpp a .sub { background:url(../img/sb-tpp-sub.png) no-repeat 0 bottom; position:absolute; left:0; bottom:0; height:120px; }
#sb-gz a .sub { background:url(../img/sb-gz-sub.png) no-repeat 0 bottom; position:absolute; left:0; bottom:0; height:120px; }

#sb-tpp a:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
#sb-gz a:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#sb-set { display:none;}

#sb-tpp_sp img { width:100%; height: auto;}
#sb-gz_sp img { width:100%; height: auto;}

#sb-tpp_sp { display: none;}
#sb-gz_sp { display: none;}
}

/* #gnav
-------------------------------------------------------- */
/*
#gNavi { position:fixed; top:36px; left:72px; width:162px; height:100%; background:url(../img/gnav-m.png) repeat-y 0 0; }
*/
#gNavi { position: relative; top:0px; left:0px; width:162px; float:left; }


#gNavi:before { content: url(../img/gnav-t.png); width:162px; display:block; position:absolute; top:-8px; left:0;}
/*#gNavi:after { content: url(../img/gnav-b.png); width:162px; display:block; position:absolute; bottom:-3px; left:0;}*/

#gNavi ul:after { content:""; display:block; clear:both; }
#gNavi ul { zoom:1; text-align:left; padding-top:10px;}

#gNavi li { display:block; zoom:1; margin:0; }
#gNavi li.gbtn0 { display:none; zoom:1; margin:8px 0 0; }
#gNavi li a { display:block; width:160px; height:39px; }
#gNavi li.gbtn0 a { width:159px; height:24px; margin-left:1px; }

#gNavi li a span { white-space:nowrap; text-indent:100%; height:39px; overflow:hidden; display:block;}
#gNavi li.gbtn1 a span { background:url(../img/gnav_jp/gnav01.png) no-repeat left top; }
#gNavi li.gbtn2 a span { background:url(../img/gnav_jp/gnav02.png) no-repeat left top; }
#gNavi li.gbtn3 a span { background:url(../img/gnav_jp/gnav03.png) no-repeat left top; }
#gNavi li.gbtn4 a span { background:url(../img/gnav_jp/gnav04.png) no-repeat left top; }
#gNavi li.gbtn5 a span { background:url(../img/gnav_jp/gnav05.png) no-repeat left top; }
#gNavi li.gbtn6 a span { background:url(../img/gnav_jp/gnav06.png) no-repeat left top; }
#gNavi li.gbtn7 a span { background:url(../img/gnav_jp/gnav07.png) no-repeat left top; }
#gNavi li.gbtn8 a span { background:url(../img/gnav_jp/gnav08.png) no-repeat left top; }
#gNavi li.gbtn9 a span { background:url(../img/gnav_jp/gnav09.png) no-repeat left top; }
#gNavi li.gbtn10 a span { background:url(../img/gnav_jp/gnav10.png) no-repeat left top; }
#gNavi li.gbtn11 a span { background:url(../img/gnav_jp/gnav11.png) no-repeat left top; }
#gNavi li.gbtn12 a span { background:url(../img/gnav_jp/gnav12.png) no-repeat left top; }
#gNavi li.gbtn13 a span { background:url(../img/gnav_jp/gnav13.png) no-repeat left top; }
#gNavi li.gbtn14 a span { background:url(../img/gnav_jp/gnav14.png) no-repeat left top; }
#gNavi li.gbtn15 a span { background:url(../img/gnav_jp/gnav15.png) no-repeat left top; }
#gNavi li.gbtn16 a span { background:url(../img/gnav_jp/gnav16.png) no-repeat left top; }
#gNavi li a:hover span { background-position:right top;}


@media screen and (max-width: 768px) { /* 768px以下の記述 */
#gNavi { width:100%; height:auto; background:none; float:none; }

#gNavi:before { content: none; }
#gNavi:after { content: none; }

#gNavi ul { display: none;}

#gNavi ul { background:url(../img/gnavi-bg_sp.jpg) repeat-y 0 0; background-size:cover; padding:10px; }

#gNavi li { display:inline-block; width:50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#gNavi li { margin:0 0 5px; }
#gNavi li.gbtn0 { display:inline-block; margin:0 0 5px; }
#gNavi li:nth-child(odd){ padding-right:5px;}
#gNavi li:nth-child(even){ padding-left:5px;}
#gNavi li a { display:block; width:100%; height:auto; }
#gNavi li.gbtn0 a { width:100%; height:auto; margin-left:0px; }
#gNavi li a span { height:inherit; }

#gNavi li div { position:relative;}
#gNavi li div:after { padding-top:27.586%; display:block; content:""; }
#gNavi li div > a { position:absolute; top:0px; left:0px; bottom:0px; right:0px; display:block; background:#000; }

#gNavi li a span { white-space:nowrap; text-indent:100%; height:100%; overflow:hidden; display:block;}

#gNavi li.gbtn1 a span { background:url(../img/gnav_jp/gnav01_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn2 a span { background:url(../img/gnav_jp/gnav02_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn3 a span { background:url(../img/gnav_jp/gnav03_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn4 a span { background:url(../img/gnav_jp/gnav04_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn5 a span { background:url(../img/gnav_jp/gnav05_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn6 a span { background:url(../img/gnav_jp/gnav06_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn7 a span { background:url(../img/gnav_jp/gnav07_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn8 a span { background:url(../img/gnav_jp/gnav08_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn9 a span { background:url(../img/gnav_jp/gnav09_sp.png) no-repeat left top; background-size:cover; width: 100%; }
#gNavi li.gbtn0 a span { background:url(../img/gnav_jp/gnav00_sp.png) no-repeat left top; background-size:cover; width: 100%; }

#gNavi li a:hover span { background-position:left top;}
#gNavi li a:hover span { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

}


/* #set
-------------------------------------------------------- */
#bnr-set { padding-top:10px; }
#bnr-set .bnr { margin:9px 0 0 9px;}
#bnr-set .bnr:last-child { padding-bottom:20px; }
#bnr-set .bnr a { display:block; }
#bnr-set .bnr a:hover { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}

#bnr-set .no01 a { background:url(../img/bnr_jp/bnr-gz.jpg) no-repeat 0 0; width:142px; height:111px;}
#bnr-set .no02 a { background:url(../img/bnr_jp/bnr-mgo.jpg) no-repeat 0 0; width:142px; height:111px;}
#bnr-set .no03 a { background:url(../img/bnr_jp/bnr-history.jpg) no-repeat 0 0; width:142px; height:111px;}
#bnr-set .no04 a { background:url(../img/bnr_jp/bnr-metao.jpg) no-repeat 0 0; width:142px; height:111px;}
#bnr-set .order a { background:url(../img/bnr_jp/bnr-preorder.png) no-repeat 0 0; width:142px; height:34px;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#bnr-set { padding: 0 10px 10px; text-align:center; }
#bnr-set .bnr { margin:10px 0 0 0px; text-align:center;}
#bnr-set .bnr:first-child { margin-top: 0; }
#bnr-set .bnr:last-child { padding-bottom:0px; }
#bnr-set .bnr a { width:100%; text-align:center; }
#bnr-set .bnr img { width:100%; height:auto;}
#bnr-set .no01 a,
#bnr-set .no02 a,
#bnr-set .no03 a,
#bnr-set .no04 a { background:none; width:100%; height:auto;}
#bnr-set .order a { background:none; width:70%; height:auto; margin:0 auto;}

}



/* #bottom_set
-------------------------------------------------------- */
#bottom_set { position:absolute; left:72px; bottom:5px; width:158px; padding-top:10px; padding-bottom:5px; padding-left:1px; }
#bottom_set:after { content: url(../img/gnav-b.png); width:162px; height:15px; display:block; position:absolute; bottom:-10px; left:0;}

/*#btn-top { position:relative; margin-bottom:10px;}
#btn-top a { display:block; width:100%; height:24px; background:url(../img/gnav_jp/gnav00.png) no-repeat left top; }
#btn-top a span { white-space:nowrap; text-indent:100%; height:100%; overflow:hidden; display:block;}
#btn-top a:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}*/

/* #snsList
-------------------------------------------------------- */
#snsList { position: relative; width:158px; }
#snsList ul:after { content: ""; display: block; clear: both; }
#snsList ul { zoom:1; }
#snsList li { display:block; width:29px; height:29px; margin-left:8px; float:left; }
#snsList li span { display:none; }
#snsList li a { display:block; width:29px; height:29px; }
#snsList li.tw a { background:url(../img/sns_tw.png) no-repeat 0 0; background-size:100%; }
#snsList li.fb a { background:url(../img/sns_fb.png) no-repeat 0 0; background-size:100%; }
#snsList li.gg a { background:url(../img/sns_gg.png) no-repeat 0 0; background-size:100%; }
#snsList li.yt a { background:url(../img/sns_yt.png) no-repeat 0 0; background-size:100%; }

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#bottom_set { position: relative; left: 0; bottom:0; width:100%; padding-bottom:5px; padding-left:1px; }
#bottom_set:after { content:none; display:none;}


#snsList { position: relative; width:100%; }
#snsList ul { text-align:center; font-size:0; padding:0; }
#snsList li { display:inline-block; margin:10px; float:none; }
#snsList li a { display:block; }
#snsList li.tw a { background:url(../img/sns_tw_sp.png) no-repeat 0 0; background-size:100%; }
#snsList li.fb a { background:url(../img/sns_fb_sp.png) no-repeat 0 0; background-size:100%; }
#snsList li.gg a { background:url(../img/sns_gg_sp.png) no-repeat 0 0; background-size:100%; }
#snsList li.yt a { background:url(../img/sns_yt_sp.png) no-repeat 0 0; background-size:100%; }
}




/* --------------------------------------------------------
#container
-------------------------------------------------------- */
h1#mainlogo_text a .toppage{ background:url(../img/gnav_jp/btn_toppage.png) no-repeat left center;}



/* --------------------------------------------------------
#SP用メニュー　HTMLはJSでのCLONE生成
-------------------------------------------------------- */
@media screen and (max-width: 768px) {
/*	#gNaviSPはcommon.cssに記載	*/
#gNaviSP #btnorder { display: block; position: relative; width: 100%; height: auto; margin: 10px 0 20px; }
#gNaviSP #btnorder { background: url(../img/gnav_jp/menu_cv.png) 0 0 no-repeat; background-size: contain; }
#gNaviSP #btnorder:before { content: ""; display: block; padding-top: 10.714%; }
#gNaviSP #btnorder span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden;}

#gNaviSP ul { position: relative; margin-bottom: 10px; border-top: 1px solid #292929; }
#gNaviSP li { border-bottom: 1px solid #292929; padding: 3px 0;}
#gNaviSP li a { display: block; position: relative; width: 100%; height: auto; }
#gNaviSP li a:before { content: ""; display: block; padding-top: 8.714%; }
#gNaviSP li a span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden;}

#gNaviSP .gbtn9 a { background: url(../img/gnav_jp/menu_news.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn1 a { background: url(../img/gnav_jp/menu_evolution.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn2 a { background: url(../img/gnav_jp/menu_story.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn3 a { }
#gNaviSP .gbtn4 a { background: url(../img/gnav_jp/menu_videos.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn5 a { background: url(../img/gnav_jp/menu_images.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn6 a { background: url(../img/gnav_jp/menu_mgo.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn7 a { background: url(../img/gnav_jp/menu_products.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn8 a { background: url(../img/gnav_jp/menu_goods.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn10 a { background: url(../img/gnav_jp/menu_history.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn11 a { background: url(../img/gnav_jp/menu_vlog.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn12 a { background: url(../img/gnav_jp/menu_faq.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn13 a { background: url(../img/gnav_jp/menu_campaigns.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn14 a { background: url(../img/gnav_jp/menu_companion_app.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn15 a { background: url(../img/gnav_jp/menu_base.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn16 a { background: url(../img/gnav_jp/menu_manual.png) left center no-repeat; background-size: 100% auto; }
#gNaviSP .gbtn0 { display: none;}
}