@charset "UTF-8";

/* CSS Document */



body{ margin:0; padding:0; background:#000 none no-repeat center top; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:1.3em; font-size:18px; color:#FFF;  }
img{ border:none; }

.clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; }

a,a:hover {color:#FFF;transition:.3s;}
a:hover {color:#d9c07b;text-decoration:none;}
a img,a:hover img {transition:.3s;}
a:hover img {opacity:.85;-ms-filter: "alpha(opacity=85)";}

h1,h2,h3,h4,div,p,ul,li,span{ margin:0; padding:0;
max-height: 999999px;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
}
ul { list-style: none;}

#wrap{ margin:0 auto; max-width: 1920px; min-width: 1100px;}
#wrap.bg_pc{background: url("../img/cmn/bg.jpg") no-repeat top center; background-attachment:fixed;}
/*背景処理*/
.pc_hidden{display:none;}
#sp_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
#container{ margin:0 auto;}

#pullup { padding: 5px; position: fixed; bottom: 90px; right: 10px; z-index: 1000;}


/*------------------------------------------
【共通】ホバー時にimgを白黒にする
--------------------------------------------*/
.img_gray img{
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-ms-filter: grayscale(0);
	-o-filter: grayscale(0);
	filter: grayscale(0);
}
.img_gray img:hover {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}



/*------------------------------------------
メインビジュアル
--------------------------------------------*/
.slideshow{width: 100% !important; margin:0 auto 5px;}
.slideshow #main_visual{ background: url("../img/main/main_bg04.png") no-repeat top center; width: 100% !important; height: 780px; margin:0 auto;}

.slideshow .ss01{ background: url("../img/main/main_bg01.jpg") no-repeat top center; max-width: 100%; height: 780px; margin:0 auto; width: 100% !important;}
.slideshow .ss02{ background: url("../img/main/main_bg02.jpg") no-repeat top center; max-width: 100%; height: 780px; margin:0 auto; width: 100% !important;}
.slideshow .ss03{ background: url("../img/main/main_bg03.jpg") no-repeat top center; max-width: 100%; height: 780px; margin:0 auto; width: 100% !important;}

.slideshow .inner{ position: relative; width: 1100px; height: 780px; margin:0 auto;}
.slideshow #main_visual .inner .logo_cb{ position: absolute; top: 20px; left: 20px;}
.slideshow #main_visual .inner .logo_shf{ position: absolute; top: 20px; right: 20px;}
.slideshow #main_visual .inner .text01{ position: absolute; top: 480px; left: 20px;}
.slideshow #main_visual .inner .img01{ position: absolute; bottom: 7px; left: 520px;}

/*------------------------------------------
ラインナップ
--------------------------------------------*/
#lineup{
	padding: 93px 0 0;
	text-align: center;
}

#lineup .tit{
	margin: 0 50px 9px 0;
}

#lineup ul{
	overflow: hidden;
	width: 820px;
	margin: auto;
}

#lineup li{
	float: left;
	margin-right: 20px;
}

#lineup li:last-child{
	margin-right: 0;
}
/*------------------------------------------
【共通】商品紹介 .item_con
--------------------------------------------*/
.item_con { position: relative; width: 1100px; text-align: left; margin:0 auto;}
.item_con .intro{ padding: 110px 0 69px; margin:0 auto; text-align: center;}
.item_con .left_area{margin: 12px 0 0 50px; width:510px;}
.item_con .left_area .thum { display: flex; justify-content:space-between; width:510px; margin-bottom:12px;}
.item_con .left_area .text01{ margin-bottom:30px; }
.item_con .left_area .text02{ }
.item_con .left_area .box_d{ font-size: 26px; color: #c1b20b; border: solid 1px; margin-bottom: 10px; padding: 3px 3px 1px; display: inline-block;}
.item_con .left_area .box_p{ font-size: 21px; color: #c1b20b; border: solid 1px; margin-bottom: 8px; padding: 3px 3px 1px; display: inline-block;}


/*-- スパイク --*/
#spike{ background: url(../img/spike/item_bg.png) right 0px top 212px no-repeat; margin-bottom:150px; height: 1085px;}
#spike.item_con p.img{ position: absolute; top:211px; right: 45px;}
#spike .btn a{border: solid 1px #255bff; color: #FFF; background:#102669; display: inline-block;
							padding:8px 8px 6px; transition:.3s; margin-top: 30px; text-decoration: none;}
#spike .btn a:hover{ background: #0b2b8e; color: #FFF;}

/*-- ビシャス --*/
#vicious{ background: url(../img/vicious/item_bg.png) right 15px top 210px no-repeat; margin-bottom:40px; height: 1085px;}
#vicious.item_con p.img{ position: absolute; top:209px; right: 0;}
#vicious .btn a{border: solid 1px #7725ff; color: #FFF; background:#421263; display: inline-block;padding:8px 8px 6px; transition:.3s; margin-top: 30px; text-decoration: none;}
#vicious .btn a:hover{ background: #52137f; color: #FFF;}

/*-- ギャラリー --*/
#gallery{ width: 1000px; margin: 0 auto 74px;}
#gallery .tit{ margin-bottom:9px; text-align: center;}
#gallery ul{ overflow: hidden;width:1000px;}
#gallery ul li{float: left;margin: 0 12px 19px 0;}
#gallery ul li:nth-child(3){margin-right: 0;}
/*-- SEE YOU --*/
#wrap .cb_end{ width: 1050px; text-align: right; margin: 0 auto 170px;}


/*------------------------------------------
魂OPTION
--------------------------------------------*/
#t_option{ width: 1100px; margin: 0 auto; margin-bottom: 50px;}
#t_option h2{ padding-bottom: 20px;}
#t_option .main_text{ padding-bottom: 38px; text-align: center;}
#t_option .img{ margin: 0 0 22px 45px; }
#t_option .text_area{ width: 1000px; margin: 0 auto;}
#t_option .bw{ text-align: left; width: 490px; margin-left: 10px; float: left;}
#t_option .bw .name{ height: 108px;}
#t_option .bw .date {display: inline-block; margin-top: 10px;}
#t_option .bw_gray .btn a{border: solid 1px #3488dd; background:#002040; color: #FFF; margin-top: 14px;
													padding:8px; transition:.3s; text-decoration: none; display: inline-block;}
#t_option .bw_gray .btn a:hover{ background:#003265; color: #FFF;}
#t_option .bw_brown .btn a{border: solid 1px #d8791b; background:#4c2600; color: #FFF; margin-top: 14px;
														padding:8px; transition:.3s; text-decoration: none; display: inline-block;}
#t_option .bw_brown .btn a:hover{ background:#773b00; color: #FFF;}


/*-- 魂OPTIONスライダー #loopSlide --*/
#loopSlide{ padding:10px 0; border-top: solid #d8791b 1px; border-bottom: solid #3488dd 1px; margin-bottom: 130px;}
.simply-scroll-container { position: relative;}
.simply-scroll-clip { position: relative; overflow: hidden;}
.simply-scroll-list { overflow: hidden; margin: 0; padding: 0;}
.simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    padding: 0; margin: 0　5px; width: 2624px; height: 360px; list-style: none;}
.simply-scroll-list li img {  display: block;}




/*------------------------------------------
【商品詳細BOX】
--------------------------------------------*/

#itembox{ border:1px solid #666; padding:20px; width:380px; margin:2em auto; background:#FFF; color:#666; font-size:12px;}

#bitembox ul{ list-style:none; margin:0; padding:0; width:380px; display:table;}

#itembox ul li{ display:table-cell; vertical-align:top; list-style:none inside; height:auto;}

#itembox ul .img-thum{ width:130px; padding-right:20px; }

#itembox ul .img-thum img{ border-radius:3px; width:130px; height:auto; }

#itembox ul .item-spec{ width:230px; text-align:left; }

#itembox ul .item-spec .title_b{ font-size:12px;}

#itembox ul .item-spec .title_item{padding:5px 0 10px; font-size:20px;}

#itembox ul .item-spec .announced{ padding-top:15px; font-size:10px;}

/*------------------------------------------
【その他大リンク】
--------------------------------------------*/

a .L_btn{font-size:18px; display: inline-block; margin:20px 0; padding:13px 40px; border: 1px solid #666; background: transparent; color: #666; text-align: center; text-decoration: none; line-height:1.5em; transition: .3s; text-indent: 1em; letter-spacing: 0.1em;
}

a .L_btn:hover { background:#666; color: #FFF;
}

/*------------------------------------------
【ブランド詳細BOX】
--------------------------------------------*/

.brandbox{ border:1px solid #c1b20b; padding:20px; width:800px; margin:2em auto; color:#FFF; font-size:12px;}

.brandbox ul{ list-style:none; margin:0; padding:0; width:800px; display:table;}

.brandbox ul li{ display:table-cell; vertical-align:middle; list-style:none inside; height:auto;}

.brandbox ul .brandlogo{  width:270px; padding-right:30px; }

.brandbox ul .brandlogo img{ width:270px; height:auto; }

.brandbox ul .brandtext{ float:left; width:500px; text-align:left; }

.brandbox ul .btn_flame{width:500px; float:right;}


/*------------------------------------------
【商品詳細ボタン、ブランド商品一覧ボタン】
--------------------------------------------*/

a .btn{font-size:12px; display: inline-block; margin:20px 0 0; padding: 10px; border: 1px solid #c1b20b; background: transparent; color: #c1b20b; text-align: center; text-decoration: none; float:right; line-height:1.5em; transition: .3s;
}

a .btn:hover { background:#c1b20b; color: #000;
}


/*------------------------------------------
【フッター】
--------------------------------------------*/



#footer_wrap{ font:12px; padding:30px 0; background:#000000; color:#c1b20b; letter-spacing:0em; border-top:1px solid #c1b20b; font-size:12px;}

#footer_Box{ width:1000px; margin:0 auto; line-height:1.8em;}

#footer_Box ul{ list-style:none; margin:0; padding:0; display:table; width:100%;}

#footer_Box ul li { padding:0; margin:0; display:table-cell; vertical-align:top;}

#footer_Box ul li a{  text-decoration:none;}
#footer_Box ul li a:hover{ color:#bbbbbb; text-decoration:underline;}

/* デザインに合わせて変更*/
.copy { color:#bbbbbb; font-size:12px; line-height:1.8em; padding:30px 0; text-align: center; }
.link a{ color:#FFFFFF; }

#footer_Box ul .top_box{ border-left:1px #c1b20b dotted; padding:0 2%; width:31%; position:relative;}

#footer_Box ul .top_box2{ border-left:1px #c1b20b dotted; padding:0 2%; width:31%; position:relative;}

.top_box .title{ background:#333333; border-radius:3px; padding:5px 10px 3px;}
/*******************/


#footer_Box ul .top_box ul{ margin:10px 0 10px; padding:0; display:table;}

#footer_Box ul .top_box ul li{
	background: url(../img/cmn/listicon.png) left center no-repeat;
	float: left;
	list-style: none;
	padding: 0 15px;
	margin: 0;
	display: table-cell;
	vertical-align: middle;
	width: 224px;
	line-height:1.5em;
}


.top_box2 ul{ padding:0; margin:0 0 20px; width: 100%; display:table;}

.top_box2 ul li{
	float: left;
	list-style: none;
	padding: 0 15px;
	margin: 0;
	display: table-cell;
	vertical-align: middle;
	width: 224px;
}

.top_box2 ul li .note{ position:absolute; top:0; display:block; right:0; font-size:10px;}

.top_box2 ul li .link01{ background: url(../img/cmn/linkicon.png) no-repeat center left; position: absolute; display: block; bottom:25px; right:0; padding-left:20px; }

.top_box2 ul li .link02{ background: url(../img/cmn/linkicon.png) no-repeat center left; position: absolute; display: block; bottom:0; right:0; padding-left:20px; }

/* 下段ロゴ */

#footer_bottom{ margin:20px auto 0;}
#footer_bottom ul{ list-style:none; margin:0; padding:0; display:table; width:100%;}
#footer_bottom ul li { padding:0; margin:0; display:table-cell; vertical-align:bottom;}

#footer_bottom ul .left_Tbnr{ width:10%; text-align:left;}

#footer_bottom ul .center_Tnation{ width:80%; color:#CCC; font-size:10px; line-height:14px; text-align:center; padding:10px 0; margin:10px auto 0; word-break: keep-all;}

#footer_bottom ul .right_Bicon{ width:10%;  text-align:right;}




/* ------ */



/* common styles */
.hide{ display:none; }

/** margin control **/
.fonts13{ font-size: 13px;}
.fonts14{ font-size: 14px;}

/** margin control **/
.nomargin{ margin:0 !important; }
.notopmargin{ margin-top:0 !important; }
.nobtmargin{ margin-bottom:0 !important; }

.leftmargin1em{ margin:0 0 0 1em; }
.leftmargin2em{ margin:0 0 0 2em; }
.rightmargin1em{ margin:0 1em 0 0; }
.rightmargin2em{ margin:0 2em 0 0; }

.mgtop10{ margin-top:10px;}

/** padding control **/
.leftpad1em{ padding:0 0 0 1em; }
.leftpad2em{ padding:0 0 0 2em; }
.rightpad1em{ padding:0 1em 0 0; }
.rightpad2em{ padding:0 2em 0 0; }
.bpad1em{ padding:0 0 1em 0; }
.padtop10{ padding-top:10px;}
.padtop20{ padding-top:20px;}
.padtop30{ padding-top:30px;}
.padtop40{ padding-top:40px;}
.padtop50{ padding-top:50px;}
.padtop60{ padding-top:60px;}
.padtop70{ padding-top:70px;}
.padtop80{ padding-top:80px;}
.padbottom10{ padding-bottom:10px;}
.padbottom20{ padding-bottom:20px;}
.padbottom30{ padding-bottom:30px;}
.padbottom40{ padding-bottom:40px;}
.padbottom50{ padding-bottom:50px;}
.padbottom60{ padding-bottom:60px;}
.padbottom70{ padding-bottom:70px;}
.padbottom80{ padding-bottom:80px;}
/** text align **/
.aleft{ text-align:left !important; }
.aright{ text-align:right !important; }
.acenter{ text-align:center !important; }

/** float control **/
.fleft{ float:left !important; }
.fright{ float:right !important; }
.clear{ clear:both; }

/** fontsize control **/
.larger{ font-size:larger !important;}
.smaller{ font-size:smaller !important;}

/** width control **/
.contentwidth{ width:100%; }

/** notice color **/

.under_line{ border-bottom:1px solid #999; padding:5px 0; }

/* -- END -- common styles */



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
#cboxContent{margin-top:20px;background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc; font-size:12px;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc; font-size:12px;}
#cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../img/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../img/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../img/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}