/* CSS Document */

/* 04=slide 320
----------------------------------------------------*/

/*W320 スライダー部の大枠*/
.slider_box {
	margin:0px 0px 20px;
	width:98%;	
}

/*商品名・キャッチの位置*/
.bx_chatch {
	width:100%;
	background-color: #e71f10;
	text-align:left;
	padding:10px 10px 10px;
}

.bx_chatch2 {
	width:100%;
	background-color: #e71f10;
	text-align:left;
	padding:10px 10px 10px;
}

.bx_li a {
	text-decoration:none;
}

div.bx_chatch h2 {
	font-family: Lato,sans-serif;
	line-height:110%;
	color:#FFF;
	font-weight:bold;
}

div.bx_chatch2 h2 {
	font-family: Lato,sans-serif;
	line-height:110%;
	color:#FFF;
	font-weight:bold;
}


.bx_chatch p {
	color:#FFF;
}

.bx_chatch2 p {
	color:#FFF;
}


/*ページャーの位置*/
.flex-control-nav {
	display:none;
}

.bx_chatch p.chatch {
	display: none;	
}

.bx_chatch2 p.chatch {
	display: none;	
}


/*　新着情報
------------------------------------------------*/

/**/
.news_box {
	margin:30px 0px 10px;
	background-color: #000;
	width:98%;	
}

.news_box:after {
	content: '';
	clear:both;
	display: block;
}

.news_ttl {
	background-color: #e71f10;
	color:#fff;
    padding: 10px;
}

.news_cont {
	height:75px;
}

.ticker {
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    position: relative;
	height:120px;
	overflow:hidden;
}
.ticker ul {
    width: 100%;
    position: relative;
}
 
.ticker ul li {
    width: 100%;
    display: none;
}


.ticker ul li a {
	color:#FFF;
	text-decoration:none;
}

.ticker ul li a:hover {
	text-decoration:underline;	
}


/*　外部リンクボタン
------------------------------------------------*/
.link_button_box {
	width:100%;
	margin:50px auto;
	max-width:1280px;
}

.button {
	display: inline-block;
	width: 318px;
	height: 112px;
	text-decoration: none;
	outline: none;
	text-indent:-9999px;
	float:left;
}

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.button {
	position: relative;
	z-index: 2;
	line-height: 50px;
	overflow: hidden;
	margin:0px 0px 2px 2px;
}
.button a {
	display:block;
	cursor: pointer;
	width:100%;
	height:100%;
}
.button:hover {
}

.button::after {
	bottom: -100%;
	width: 100%;
	height: 100%;
}

.button:hover::after {
	bottom: 0;
}

/*ボタン：中山式公式*/
.btn_nakayama {
	background-image:url(../img/bottom/btn_nakayama.png);
}
.btn_nakayama:hover::after {
	background-image:url(../img/bottom/btn_nakayama_on.png);
}


/*ボタン：マジコ*/
.btn_magico {
	background-image:url(../img/bottom/btn_magico.png);
}
.btn_magico:hover::after {
	background-image:url(../img/bottom/btn_magico_on.png);
}

/*ボタン：Dr.magico*/
.btn_drm {
	background-image:url(../img/bottom/btn_drm.png);
}
.btn_drm:hover::after {
	background-image:url(../img/bottom/btn_drm_on.png);
}

/*ボタン：magico sport*/
.btn_mlb {
	background-image:url(../img/bottom/btn_mlb.png);
}
.btn_mlb:hover::after {
	background-image:url(../img/bottom/btn_mlb_on.png);
}

/*ボタン：magico GOLF*/
.btn_mg {
	background-image:url(../img/bottom/btn_mg.png);
}
.btn_mg:hover::after {
	background-image:url(../img/bottom/btn_mg_on.png);
}

/*ボタン：中山式オンラインショップ*/
.btn_nol {
	background-image:url(../img/bottom/btn_nol.png);
}
.btn_nol:hover::after {
	background-image:url(../img/bottom/btn_nol_on.png);
}
/*ボタン：マジコストア*/
.btn_mst {
	background-image:url(../img/bottom/btn_mst.png);
}
.btn_mst:hover::after {
	background-image:url(../img/bottom/btn_mst_on.png);
}




.link_bn {
	clear:both;
	margin:0px 0px 50px;
}

.link_bn_left img,
.link_bn_right img {
	width:100%;
}




#movie_test video {
  width: 80vw;
  height: auto;
  display: block;
  background-size: cover; /*画面サイズに応じてサイズを可変するように設定。*/
}


/*
	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:9999999999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
	#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; opacity: 0.9; filter: alpha(opacity = 90);}
	#colorbox{outline:0;}
	#cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;}
	#cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;}
	#cboxTopRight{width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(images/border.png) repeat-x bottom left; display: none;}
    #cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(images/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(images/controls.png) repeat-y -211px 0;}
    #cboxContent{/*background:#fff;*/ overflow:visible;}
		.cboxIframe{background:#fff;}
		#cboxError{padding:50px; border:1px solid #ccc;}
		#cboxLoadedContent{margin-bottom:5px;}
		#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
		#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
		#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
		#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C; display: none !important;}

		/* 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;  position:absolute; bottom:-29px; background:url( ../images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px; display: none !important;}
        
		/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
		#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

		#cboxPrevious{left:0px; background-position: 0px 0px;}
		/*#cboxPrevious:hover{background-position:-51px 0px;}*/
		#cboxNext{left:27px; background-position:-25px 0px;}
		/*#cboxNext:hover{background-position:-75px 0px;}*/
		#cboxClose{right:0; background-position:-50px 0;}
		/*#cboxClose:hover{background-position:-100px 0px;}*/

        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}





/* -------------------------------------------- */
/* ########  ▼タブレット用            ######## */
/* -------------------------------------------- */
@media all and (min-width: 618px){


/*W618 スライダー部の大枠*/
.slider_box {
	margin:0px 0px 20px;
	width:100%;	
}

.bx_li {
	position:relative;	
	overflow:hidden;
}

.bx_li a {
	color:#FFF;
}

.bx_img {
	width:70%;
	float:right;
	height:540px;
	background-color:#000;
}
	
.bx_img2 {
	width:100%;
	height:540px;
	background-color:#000;
}

/*写真*/
.bx_li .bx_img img {
	display:none !important;
}
	
.bx_li .bx_img2 img {
	display:none !important;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
	background-position:center;
	background-repeat:no-repeat;	
}

/*W618 姿勢サポ　コア*/
.slide1 {
	background-image:url(../img/slide/top_img3722.jpg);
}

/*W618 ひざサポ*/
.slide2 {
	background-image:url(../img/slide/test3.jpg);	
}

/*W618 コルセット　コア*/
.slide3 {
	background-image:url(../img/slide/test4.jpg);	
}

/*W618 動画*/
.slide4 {
	background-image:url(../img/slide/top_img_mov.jpg);
	background-position:center;
}
	
/*W618 stylecity動画*/
.slide5 {
	background-image:url(../img/slide/top_img_stylecity_tab.jpg);
	background-position:center;
}
	
/*W618 安田選手*/
.slide6 {
	background-image:url(../img/slide/top_img_3986_tab.jpg);
	background-position:center;
}

.bx_bg {
	position: absolute;
	left:-15%;
	width:55%;
	height:100%;
	transform: skewX(-15deg);
	background-color:#e71f10;
}

/*W618 商品名・キャッチの位置*/
.bx_chatch {
	position: absolute;
	top:10%;
	left:7%;
	background-color:transparent;
	padding:0px;
	width:auto;
}

.bx_chatch h2 {
	font-size:40px;
	 -webkit-font-smoothing: antialiased;
}

.bx_chatch p.name {
	margin:10px 0px 0px;
	 -webkit-font-smoothing: antialiased;
}

.bx_chatch p.chatch {
	margin:10px 0px 0px;
	display:block;
	 -webkit-font-smoothing: antialiased;
}
	
.bx_chatch2 { 
	display:none;		
}


/*W618 ページャーの位置*/
.flex-control-nav {
	display:block;
  width: 30%;
  position: absolute;
  bottom: 5%;
  left:5%;
}


/*　新着情報
------------------------------------------------*/

span.news_date {
	padding:0px 10px 0px 0px;
}

.news_box {
	display:table;
	width:100%;
	background-color: #e71f10;
}

.news_ttl {
	float:left;
	width:20%;
	height:100%;
	display:table-cell;
	vertical-align:middle;
}

.news_cont {
	float:right;
	width:75%;
	height:100%;
	display:table-cell;
	background-color: #000;
}

.ticker {
	height:100%;
}


}

/* -------------------------------------------- */
/* ########  ▼PC用            ######## */
/* -------------------------------------------- */
@media all and (min-width: 800px) {

.bx_chatch h2 {
	font-size:55px;
	 -webkit-font-smoothing: antialiased;
}
	
.bx_chatch2 { 
	display:none;		
}
	
.bx_img2 {
	width:100%;
	height:540px;
	background-color:#000;
}
	
/*PC stylecity動画バナー*/
.slide5 {
	background-image:url(../img/slide/top_img_stylecity.jpg);
	background-position:center;
}
	
.slide6 {
	background-image:url(../img/slide/top_img_3986.jpg);
	background-position:center;
}

.link_bn {
	clear:both;
	margin:0px 0px;
	padding:0px 0px 30px;
}

.link_bn_left img,
.link_bn_right img {
	width:100%;
}

.link_bn_right {
	width:48%;
	float:right;
}

.link_bn_left {
	width:48%;
	float:left;
}





}