html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

html,body { height: 100%; }
body { font-family:"Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif; line-height: 1; margin:0px; margin: 0; padding: 0; width: 100%; height: 100%;}

a { outline: none; text-decoration: none; }

ul li { list-style-type: none; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

@media screen and (min-width: 601px) {
body { background: #0a243a; min-width: 1300px; }

html[data-lc-type=inline] #lightcase-case, html[data-lc-type=ajax] #lightcase-case {
	width: 900px;
}

ul.nav {}
.menu_sfl { display:none;}
.mbhead_logo { display:none; }

#footer { position: fixed; bottom:0; width: 100%; height: 160px; overflow: hidden; pointer-events: none; }
#footer .foot_object { position: absolute; bottom:-230px; right:-100px; width: 650px; height: 300px; transform: rotate(-15deg); background: rgba(0,0,0,0.3); z-index:2; }

.copy { position:absolute; bottom:30px; right:50px; color:#FFF; font-size:12px; width: 300px; text-align: right; z-index: 3; }

br.pc_r {}
br.mb_r { display: none; }
}

@media screen and (max-width: 600px) {
body { background: #0a243a; width: 600px; }

ul.nav { display:none;}
.menu_sfl {}
.mbhead_logo { position: absolute; top:5px; left: 50%; width: 200px; height: 150px; margin: 0 0 0 -100px; background:url(../images/logo.png) no-repeat center center; background-size: 100% auto ; z-index: 3; }

#footer { position: relative; bottom:0; width: 100%; height: 160px; overflow: hidden; }
#footer .foot_object { position: absolute; bottom:-230px; right:-100px; width: 650px; height: 300px; transform: rotate(-15deg); background: rgba(0,0,0,0.3); z-index:2; }

.copy { position:absolute; bottom:30px; right:50px; color:#FFF; font-size:12px; width: 300px; text-align: right; z-index: 3; }

br.pc_r { display: none; }
br.mb_r {}
}

.mes_comm_fl img { width: 100%; height: auto; }
.ticker_fl { position:fixed; bottom:0; left: 0; width: 100%; z-index: 200;  }
/*
.nsj { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }
*/
.nsj { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; }
.hmc {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif; }

.clear { clear: both; width: 100%; }


@media screen and (min-width: 601px) {
#content.top_sec { padding:0; }
#content.cate_sec { padding:140px 0 80px 0; }

.title_fl { position:absolute; top:50px; left:50%; width:680px; height: 80px; margin: 0 0 0 -410px; opacity: 0; }
.title_wfl { position:relative; top:0; left:0; width:615px; height: 80px; margin: 0; overflow: hidden; }
.title_wfl .t_002 { position:absolute; top:0; left:-550px; width:617px; height: 80px; z-index:3; }

}
@media screen and (max-width: 600px) {
#content.top_sec { padding:0; }
#content.cate_sec { padding:170px 0 0 0; }
	
.title_fl { position:relative; width:570px; height: 65px; margin: 0 auto 30px auto; opacity: 0; overflow: hidden; }
.title_wfl { position:relative; width:540px; height: 65px; margin: 0; overflow: hidden; }
.title_wfl .t_002 { position:absolute; top:0; left:-500px; width:500px; height: 65px; margin: 0 0 0 30px; z-index:3; }

.nav { display:none;}
}

.title_fl .t_002.title_n01 { background: url(../images/title/title_fl02_t01.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n02 { background: url(../images/title/title_fl02_t02.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n03 { background: url(../images/title/title_fl02_t03.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n04 { background: url(../images/title/title_fl02_t04.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n05 { background: url(../images/title/title_fl02_t05.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n06 { background: url(../images/title/title_fl02_t06.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n07 { background: url(../images/title/title_fl02_t07.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n08 { background: url(../images/title/title_fl02_t08.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n09 { background: url(../images/title/title_fl02_t09.png) no-repeat; background-size:100% auto; }
.title_fl .t_002.title_n10 { background: url(../images/title/title_fl02_t10.png) no-repeat; background-size:100% auto; }


/* side menu */

.nav { position: fixed; top: 50%; margin: -200px 0 0 0; left: 0; height: 400px; z-index: 100; padding: 0 0 0 30px; transition-duration: 1s; }
.nav li { position: relative; cursor: pointer; margin: 18px 0; }
.nav li a { display: block; width: 5px; height: 20px; }
.nav li.close { pointer-events: none; }

.logo_sp { position: absolute; top:-120px; left:-25px; transition-duration: 0.3s;  width: 150px; height:130px; text-align: left; font-weight:900; background: url(../images/logo.png) no-repeat center center; background-size:95%; transition-duration: 1s; opacity: 1; }
a .logo_sp { transition-duration: 0.3s; padding: 7px 30px 7px 30px; font-weight:900; }
a:hover .logo_sp { transition-duration: 0.3s; padding: 7px 30px 7px 30px; font-weight:900;  }

.logo_sp_top { position: absolute; top:-235px; left:-25px; transition-duration: 0.3s;  width: 280px; height:230px; text-align: left; font-weight:900; background: url(../images/logo.png) no-repeat center center; background-size:95%; transition-duration: 1s; opacity: 1; }
a .logo_sp_top { transition-duration: 0.3s; padding: 7px 30px 7px 30px; font-weight:900; }
a:hover .logo_sp_top { transition-duration: 0.3s; padding: 7px 30px 7px 30px; font-weight:900;  }

.bt_sp { position: absolute; top:-5px; left:-50px; transition-duration: 0.3s;  width: 150px; text-align: left; font-weight:900; font-size:14px; display: inline-block; transform: skewX(-40deg); }
.bt_sp span { display: inline-block; transform: skewX(40deg); }
a .bt_sp { transition-duration: 0.3s; background: linear-gradient(90deg, #0E344E, #185A87); padding: 4px 30px 4px 50px; font-weight:900; font-size:16px; color: #FFF; }
a:hover .bt_sp { transition-duration: 0.3s; background: linear-gradient(90deg, #DE4F0D, #E29714); padding: 4px 80px 4px 50px; font-weight:900; font-size:16px; color: #FFF;  }
.active .bt_sp { position: absolute; top:-10px; right:30px; font-size:14px; transition-duration: 0.3s; font-weight:900; background: rgba(255,255,255,1.0); padding: 5px 10px; border-radius:30px;  }

li.close .bt_sp { background: linear-gradient(90deg, #555, #222); padding: 4px 30px 4px 50px; font-weight:900; font-size:16px; color: #FFF; opacity: 0.7; }

.pv_fl { position: absolute; top:0px; left:-10px; transition-duration: 0.3s;  width: 280px; height:160px; text-align: left; font-weight:900; background:url(../images/mgpv_img_01.jpg) no-repeat; background-size:100% auto;  transition-duration: 1s; opacity: 1; }

.bt_sp img { height:17px; width: auto; }

a .bt_sp .burn { position: absolute; bottom:0px; right:0px; width: 40px; height: 24px; background: url(../images/burn.png) no-repeat center center ; background-size:auto 100%; transform: skewX(40deg);  pointer-events: none; opacity: 0; transition-delay: 0s; transition-duration: 0s; }
a:hover .bt_sp .burn { position: absolute; bottom:0; right:-30px; width: 100px; height: 56px; background: url(../images/burn.png) no-repeat center center ; background-size:auto 100%; transition-duration: 0.5s; transform: skewX(40deg);  pointer-events: none; opacity: 1; transition-duration: 0.5s; transition-delay: 0.1s;  }

.bt_twi { position: absolute; top:0; left:-50px; opacity: 0; transition-duration: 0.7s;  width: 40px;text-align: left; font-weight:900; display: inline-block; transform: skewX(-40deg);}
a .bt_twi .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_twitter_00.png) no-repeat ; background-position:center center; background-size:150% auto; }
a .bt_twi { opacity: 1; transition-duration: 0.7s; background:linear-gradient(90deg, #0E344E, #185A87); padding: 3px 10px 3px 30px;   font-weight:900; }
a:hover .bt_twi { opacity: 1; transition-duration: 0.7s; background: linear-gradient(90deg, #DE4F0D, #E29714); padding: 3px 10px 3px 30px; font-weight:900; }
a:hover .bt_twi .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_twitter_00.png) no-repeat; background-position:center center; background-size:150% auto; }
.active .bt_twi { position: absolute; top:-5px; right:30px; font-size:12px; opacity: 1; transition-duration: 0.7s; font-weight:900; background: rgba(255,255,255,1.0); padding: 5px 10px; border-radius:30px;  }

.bt_face { position: absolute; top:0; left:40px; opacity: 0; transition-duration: 0.7s;  width: 40px;text-align: left; font-weight:900; display: inline-block; transform: skewX(-40deg);}
a .bt_face .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_facebook_00.png) no-repeat ; background-position:center center; background-size:130% auto; }
a .bt_face { opacity: 1; transition-duration: 0.7s; background:linear-gradient(90deg, #0E344E, #185A87); padding: 3px 10px 3px 20px; font-weight:900;  }
a:hover .bt_face { opacity: 1; transition-duration: 0.7s; background: linear-gradient(90deg, #DE4F0D, #E29714); padding: 3px 10px 3px 20px;  font-weight:900; }
a:hover .bt_face .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_facebook_00.png) no-repeat; background-position:center center; background-size:130% auto; }
.active .bt_face { position: absolute; top:-5px; right:30px; font-size:12px; opacity: 1; transition-duration: 0.7s; font-weight:900; background: rgba(255,255,255,1.0); padding: 5px 10px; border-radius:30px;  }

.bt_twi_top { position: absolute; top:145px; left:-50px; opacity: 0; transition-duration: 0.7s;  width: 40px;text-align: left; font-weight:900; display: inline-block; transform: skewX(-40deg);}
a .bt_twi_top .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_twitter_00.png) no-repeat ; background-position:center center; background-size:150% auto; }
a .bt_twi_top { opacity: 1; transition-duration: 0.7s; background:linear-gradient(90deg, #0E344E, #185A87); padding: 3px 10px 3px 30px;  font-weight:900; }
a:hover .bt_twi_top { opacity: 1; transition-duration: 0.7s; background: linear-gradient(90deg, #DE4F0D, #E29714); padding: 3px 10px 3px 30px;  font-weight:900; }
a:hover .bt_twi_top .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_twitter_00.png) no-repeat; background-position:center center; background-size:150% auto; }
.active .bt_twi_top { position: absolute; top:-5px; right:30px; font-size:12px; opacity: 1; transition-duration: 0.7s; font-weight:900; background: rgba(255,255,255,1.0); padding: 5px 10px; border-radius:30px;  }

.bt_face_top { position: absolute; top:145px; left:40px; opacity: 0; transition-duration: 0.7s;  width: 40px;text-align: left; font-weight:900; display: inline-block; transform: skewX(-40deg);}
a .bt_face_top .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_facebook_00.png) no-repeat ; background-position:center center; background-size:130% auto; }
a .bt_face_top { opacity: 1; transition-duration: 0.7s; background:linear-gradient(90deg, #0E344E, #185A87); padding: 3px 10px 3px 20px;  font-weight:900;  }
a:hover .bt_face_top { opacity: 1; transition-duration: 0.7s; background: linear-gradient(90deg, #DE4F0D, #E29714); padding: 3px 10px 3px 20px;  font-weight:900; }
a:hover .bt_face_top .bg {display: inline-block; transform: skewX(40deg); width:28px; height:28px; margin:0 auto;  background:url(../images/ico_facebook_00.png) no-repeat; background-position:center center; background-size:130% auto; }
.active .bt_face_top { position: absolute; top:-5px; right:30px; font-size:12px; opacity: 1; transition-duration: 0.7s; font-weight:900; background: rgba(255,255,255,1.0); padding: 5px 10px; border-radius:30px;  }

canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #0a243a; z-index: -1; opacity: 0.3; }

.mb01 { background:url(../images/mobile/mb_btm01.png) no-repeat; background-size:100% auto; }
.mb02 { background:url(../images/mobile/mb_btm02.png) no-repeat; background-size:100% auto; }
.mb03 { background:url(../images/mobile/mb_btm03.png) no-repeat; background-size:100% auto; }
.mb04 { background:url(../images/mobile/mb_btm04.png) no-repeat; background-size:100% auto; }
.mb05 { background:url(../images/mobile/mb_btm05.png) no-repeat; background-size:100% auto; }
.mb06 { background:url(../images/mobile/mb_btm06.png) no-repeat; background-size:100% auto; }
.mb07 { background:url(../images/mobile/mb_btm07.png) no-repeat; background-size:100% auto; }
.mb08 { background:url(../images/mobile/mb_btm08.png) no-repeat; background-size:100% auto; }
.mb09 { background:url(../images/mobile/mb_btm09.png) no-repeat; background-size:100% auto; }

@media screen and (min-width: 601px) {
.goods_cate_fl { padding: 30px 290px 0 10px; margin: 0 auto; width: 500px; }
.goods_cate_fl a .cate_ccbtm { float: left; padding: 10px 0; width: 120px; margin: 0 5px 5px 0; text-align: center; background:linear-gradient(90deg, #0E344E, #185A87); color: #FFF; font-size:12px; transition-duration: 0.5s; font-weight: 600; transform: skewX(-30deg);}
.goods_cate_fl a:hover .cate_ccbtm { background: linear-gradient(90deg, #DE4F0D, #E29714); color: #FFF; transition-duration: 0.5s;}
.goods_cate_fl .cate_ccbtm_nolink { float: left; padding: 10px 0; width: 120px; margin: 0 5px 5px 0; text-align: center; background:linear-gradient(90deg, #0E344E, #185A87); color: #FFF; font-size:12px; opacity: 0.5; transform: skewX(-30deg);}
.goods_cate_fl p { transform: skewX(30deg); }
}

@media screen and (max-width: 600px) {
.goods_cate_fl { padding: 30px 0; margin: 0 auto; width: 500px; }
.goods_cate_fl a .cate_ccbtm { float: left; padding: 20px 0; width: 120px; margin: 0 5px 5px 0; text-align: center; background:linear-gradient(90deg, #0E344E, #185A87); color: #FFF; font-size:14px; transition-duration: 0.5s; font-weight: 600; transform: skewX(-30deg);}
.goods_cate_fl a:hover .cate_ccbtm { background: linear-gradient(90deg, #DE4F0D, #E29714); color: #FFF; transition-duration: 0.5s;}
.goods_cate_fl .cate_ccbtm_nolink { float: left; padding: 20px 0; width: 120px; margin: 0 5px 5px 0; text-align: center; background:linear-gradient(90deg, #0E344E, #185A87); color: #FFF; font-size:14px; transition-duration: 0.5s; font-weight: 600; opacity: 0.3; transform: skewX(-30deg);}
.goods_cate_fl p { transform: skewX(30deg); }
}