﻿/***********************************
*	HEADER  *
***********************************/

@media screen and (min-width: 1000px) { 
	
	.content_hdr{
		width:1200px;
		text-align:left;
		margin:0px auto 0px auto;
		padding: 0px 0px;
		clear:both;
	}
	header {
		position: fixed;
		top: 0;
		width: 100%;
		height   :100px;
		background:#fff;
		z-index:9999;
	}
	#fixedBox{
		background-color:#fff;
		height   :100px;
	}
	.content_hdr{
		width     :1200px;
		text-align:left;
		margin    :0px auto 0px auto;
	}
	header #logo {
		float  :left;
		margin :35px 0px 0px 30px;
		padding:0;
	}	
	header #logo img{
		max-height:38px;
	}
	#global-nav_pc{
		float     : right;
		margin-top: 0px;
		padding   : 0;
	}
	#global-nav_pc01{		
		margin-top:25px;
		float     : right;
	}
	#global-nav_pc03{
		margin-top:20px;
		margin-bottom:15px;
		margin-right:10px;
		float     : right;
	}
	#global-nav_pc02{
		clear     : both;
		float     : right;
	}
	#global-nav_pc ul li{
		float: left;
	}
	#global-nav_pc01 li{
		padding-left :10px;
		padding-right:10px;
	}	
	#global-nav_pc01 li img{
		max-height:11px;
	}
	#global-nav_pc01 li:last-child{
		border-left :1px solid #000;
	}
	#global-nav_pc02 li{
		padding-left :30px;
		padding-right:10px;
	}
	#global-nav_pc03 li{
		padding-left :10px;
		padding-right:10px;
	}	
	#global-nav_pc03 li img{
		max-height:23px;
	}
	#global-nav_pc02 li img{
		max-height:15px;
	}
	#global-nav_sp{
		display:none;
	}
	header #nav-btn {
		display: none;
	}
	
}
@media (max-width:999px) {
	
	.content_hdr{

	}
	header {
		position: fixed;
		top: 0;
		width: 100%;
		height   :60px;
		background:#fff;
		z-index:9999;
	}
	#fixedBox{
		background-color:#fff;
		height   :60px;
	}
	.content_hdr{
		position: relative;
		width: 100%;
		text-align:left;
		margin    :0px auto 0px auto;
	}
	header #logo {
		text-align:center;
		margin :20px 0px 14px 0px;
		padding:0;
	}		
	header #logo img{
		max-height:38px;
	}
	#global-nav_pc{
		display:none;
	}
	#global-nav_pc01{
		display:none;
	}
	#global-nav_pc02{
		display:none;
	}
	#global-nav_pc03{
		display:none;
	}
	#global-nav_pc ul li{
		float: left;
	}
	#global-nav_pc01 li{
		padding-left :10px;
		padding-right:10px;
	}
	#global-nav_pc01 li:first-child{
		border-right :1px solid #000;
	}
	#global-nav_pc02 li{
		padding-left :70px;
		padding-right:10px;
	}

	/* ----- SP NAVI ----- */

	#global-nav_sp{
		padding-top:   0px;
		padding-right: 0px;
	}
	header #nav-btn {
		display: none;
	}
	header #nav-btn {
		display: block;
		position: absolute;
		top: 0px;
		right: 10px;
	}
	header #nav-btn a {
		display: block;
		width: 48px;
		height: 48px;
		background: white url(http://www.shokkyo.co.jp/img/bg_nav_btn.png) 0 0 no-repeat;
		text-indent: -9999px;
	}
	header #nav-btn.show a {
		background-position: 0 -48px;
	}
	header #global-nav_sp ul{
		width: 100%;
		display: none;
		float: none;
		overflow: hidden;
		margin-right: 0;
	}
	header #global-nav_sp ul li {
		width: 100%;
		text-align: center;
		background-color: #fff;
		color:#fff;
	}
	header #global-nav_sp ul a {
		display:block;
		width: 100%;
		padding: 15px 0;
	}
	
	header #global-nav_sp ul a:hover {
		background-color:#0A1932;
		color:#fff;
	}

}


/***********************************
*	FOOTER  *
***********************************/

@media screen and (min-width: 1000px) { 

	footer,
	#footer{
		clear  :both;
		width  :100%;

		
	}
}
@media (max-width:999px) {

	footer,
	#footer{
		clear:both;
		width:100%;
		text-align:center;
		font-size:70%;
		padding:20px 0px;
	}

}
/***********************************
*	HOME  *
***********************************/


@media screen and (min-width: 1000px) { 

	#home_contents{
		padding-top:100px;	
	}
	#home_main{
		width      : 100%;
		min-width  : 100%;
		position   : relative;
		background : #fff;
	}

}
@media (max-width:999px) {

	#home_contents{
		padding-top:60px;	
	}
	#home_main{
		width:96%;
		text-align:left;
		margin: 0 auto;
		clear:both;
	}

}


/***********************************
*	contents  *
***********************************/

@media screen and (min-width: 1000px) { 

	.home_bottom{
	    height:255px;
		clear:both;
	}
	#home_main_content{
		width: 795px;
		z-index: 10 !important;
		background: #fff;
		float: right;
	}
	* html #home_main_content{
		zoom: 100%;
	}
	*:first-child+html #home_main_content{
		display: inline-block;
	}
	.home_main_bnr01{
		float:left;
		margin:0px 10px 10px 0px;
	}
	.home_main_bnr02{
		float:right;
		margin:0px 10px 10px 0px;
	}
	.home_main_bnr03{
		float:left;
		margin:0px 10px 10px 0px;
	}
	
}
@media (max-width:999px) {

	.home_bottom{
	    height:255px;
		clear:both;
	}
	.home_main_bnr01{
		width:50%;
		float:left;
		margin:0px 5px 10px 5px;
	}
	.home_main_bnr01 img{
		width:100%;
	}
	.home_main_bnr02{
		width     :100%;
		margin:0px 5px 10px 5px;
	}
	.home_main_bnr02 img{
		width:100%;
	}
	.home_main_bnr03{
		width:96%;
		margin:0px 5px 10px 5px;
	}
	
}

/* ----- もっと。 ----- */

@media screen and (min-width: 1000px) { 
	
	/*バナー全体のサイズ*/
	.home_main_bnr_more {
		margin:0px 10px 10px 0px;
	    width :255px;
	    height:255px;
	    overflow:hidden;
	    position:relative;
	}
	/*マウスオーバーするマスク*/
	.home_main_bnr_more .home_main_bnr_more_mask{
	    width: 255px;
	    height:255px;
	    position: absolute;
	    overflow: hidden;
	    top: 0;
	    left:0;
	}
	
	.home_main_bnr_more_x{
		margin:0px 10px 10px 0px;
	    width: 520px;
	    height:255px;
	    overflow:hidden;
	    position:relative;
	}
	/*マウスオーバーするマスク*/
	.home_main_bnr_more_x .home_main_bnr_more_mask_x{
	    width: 520px;
	    height:255px;
	    position: absolute;
	    overflow: hidden;
	    top: 0;
	    left:0;
	}
	
	.home_main_bnr_more_y{
		margin:0px 10px 10px 0px;
	    width :255px;
	    height:520px;
	    overflow:hidden;
	    position:relative;
	}
	/*マウスオーバーするマスク*/
	.home_main_bnr_more_y .home_main_bnr_more_mask_y{
	    width: 255px;
	    height:520px;
	    position: absolute;
	    overflow: hidden;
	    top: 0;
	    left:0;
	}
	
	/*見出し*/
	.home_main_bnr_more-view_x .home_main_bnr_more_mask_x .home_main_bnr_more_icon_x,
	.home_main_bnr_more-view .home_main_bnr_more_mask .home_main_bnr_more_icon{
	    text-align: center;
	    position: relative;
	    padding-top:105px;
	}
	.home_main_bnr_more-view_y .home_main_bnr_more_mask_y .home_main_bnr_more_icon_y{
	    text-align: center;
	    position: relative;
	    padding-top:235px;
	}
	/*黒にする*/
	.home_main_bnr_more-view_y .home_main_bnr_more_mask_y,
	.home_main_bnr_more-view_x .home_main_bnr_more_mask_x,
	.home_main_bnr_more-view .home_main_bnr_more_mask{
		opacity: 0;
		transition-property:background-color,width ;
		transition-duration:0.3s;
		transition-timing-function:linear;
		transition-delay:0s,0.3s;
	}
	/*マウスオーバーしたとき　不透明度を下げる**/
	.home_main_bnr_more-view_y:hover .home_main_bnr_more_mask_y ,
	.home_main_bnr_more-view_x:hover .home_main_bnr_more_mask_x ,
	.home_main_bnr_more-view:hover .home_main_bnr_more_mask {
		opacity: 1;
	    background-color: rgba(254, 254, 254, 0.75);
	}

	.home_main_news{
		margin    :0px 0px 10px 0px;
	    width     :785px;
	    height    :255px;
	    border    :1px solid #DCDCDC;
	}
	.home_main_news img{
	    max-width     :785px;
	}

}
@media (max-width:999px) {


	/*バナー全体のサイズ*/
	.home_main_bnr_more,
	.home_main_bnr_more_y{
		float:left;
		margin:0px 5px 10px 5px;
		width :calc(50% - 10px);
	    height:auto;
	    overflow:hidden;
	    position:relative;
	}
	.home_main_bnr_more_x{
		float:left;
		margin:0px 5px 10px 5px;
		width :calc(100% - 10px);
	    height:auto;
	    overflow:hidden;
	    position:relative;
	}
	.home_main_bnr_more img,
	.home_main_bnr_more_y img,
	.home_main_bnr_more_x img{
		width :100%;
	}
	/*マウスオーバーするマスク*/
	.home_main_bnr_more .home_main_bnr_more_mask,
	.home_main_bnr_more_y .home_main_bnr_more_mask_y,
	.home_main_bnr_more_x .home_main_bnr_more_mask_x{
	    width :100%;
	    height:auto;
	    position: absolute;
	    overflow: hidden;
	    top: 0;
	    left:0;
	}
	.home_main_bnr_more-view .home_main_bnr_more_mask .home_main_bnr_more_icon img,
	.home_main_bnr_more-view_y .home_main_bnr_more_mask_y .home_main_bnr_more_icon_y img,
	.home_main_bnr_more-view_x .home_main_bnr_more_mask_x .home_main_bnr_more_icon_x img{
	    display:none;
	}
	.home_main_news{
		margin    :0px 5px 10px 5px;
	    width     :calc(100% - 10px);
	    border    :1px solid #DCDCDC;
	}
	.home_main_news img{
	    width     :100%;
	    height    :auto;
	}

}
	
/* ----- HOME_SLIDER ----- */

@media screen and (min-width: 1000px) { 

	#home_slider{
		height: 100vh;
		position: fixed;
		z-index: 100 !important;
	}
	#home_slider #hdr_whole{
		/*
		height: 100vh;
		background-size:auto 100%;
		background-position: center center;
		*/
		background-size:auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		display: block;
	}
	*::-ms-backdrop, #home_slider #hdr_whole{
		height: 100vh;
		background-size:auto 100%;
		background-position: center center;
	}
	.home_slider_copy{
		position: relative;
		text-align:center;
		top: 58%;
		-webkit-transform: translateY(-78%); /* Safari用 */
		transform: translateY(-78%);
		font-size:70%;
	}
	.home_slider_logo{
		position: relative;
		top: 35%;
		-webkit-transform: translateY(-25%); /* Safari用 */
		transform: translateY(-25%);
		text-align:center;
	}
	.home_slider_logo img{
		height:50%;
		width:50%;
		max-width:350px;
		max-height:280%;
	}
	#home_slider02,
	#hdr_whole02,
	.home_slider_logo02,
	.home_slider_copy02{
		display:none;
	
	}
	
}
@media (max-width:999px){
	
	#home_slider,
	#hdr_whole{
		display:none;
	}
	#home_slider02{
		margin:0px 0px 10px 0px;
		height:320px;
	}
	#hdr_whole02{
		background-size:auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		display: block;
		height:320px;
	}
	#hdr_whole02 img{
		width:50%;
		margin:30px 0px 0px 80px;
	}
	.home_slider_logo02{
		position: relative;
		top: 25%;
		-webkit-transform: translateY(-25%); /* Safari用 */
		transform: translateY(-25%);
		text-align:center;
		margin-left:-125px;
	}
	.home_slider_logo02 img{
		width:250px;
		height:200px;
		max-width:250px;
		max-height:200px;
		text-align:left;
		margin:0px auto;
	}
	.home_slider_copy02{
		display:none;
	
	}
	
}

/***********************************
*	NEWS	*
***********************************/

@media screen and (min-width: 1000px) { 

	.news_area{
		float     :left;
		margin    :0px 10px 10px 0px;
		border    :1px solid #DCDCDC;
		width     :518px;
		height    :253px;
	}
	.table       {
		width     : 500px;
		text-align: left;
		margin    : 0px auto 0px auto;
		display:table;
		border-collapse:collapse;
	}
	.table_row   {display: table-row;}
	.table-cell{
		display:table-cell;
		vertical-align:top;
		padding       :12px 5px 12px 5px;
		border-top    :1px dotted #DCDCDC;
		font-size     :80%;
		vertical-align: middle;
	}
	.news_area_dt{
	
	}
	.news_area_tt{
	
	}
	.news_area_ic{
	
	}
	
}
@media (max-width:999px) {

	.news_area{
		float     :left;
		margin    :0px 5px 10px 5px;
		border    :1px solid #DCDCDC;
		width     :calc(100% - 10px);
	}
	.news_area .table{
		display:table;
		border-collapse:collapse;
		width     :100%;
		text-align: left;
		margin    : 0px auto 0px auto;
	}
	.news_area .table_row   {display: table-row;}
	.news_area .table-cell{
		display       :table-cell;
		vertical-align:top;
		padding       :12px 10px 12px 10px;
		border-top    :1px dotted #DCDCDC;
		font-size     :80%;
		vertical-align:middle;
		line-height   :1.8;
	}
	.news_area_dt{
	
	}
	.news_area_tt{
	
	}
	.news_area_ic{
	
	}
	
}

/***********************************
*	shopping	*
***********************************/

@media screen and (min-width: 1000px) { 

	.home_main_bnr_sh{
		float     : left;
		margin    : 0px 10px 10px 0px;
		width     : 520px;
		height    : 255px;
		background: #CD0012;
	}
	.home_main_bnr_sh_title{
		text-align: center;
		margin    :30px 0px 20px 0px;
	}
	.home_main_bnr_sh .table{
		width     : 410px;
		text-align: left;
		margin    : 0px auto 0px auto;
	}
	.home_main_bnr_sh .table-cell{
		padding-left :35px;
		padding-right:35px;
		text-align: center;
	}
	.home_main_bnr_sh .table       {display:table;border-collapse:collapse;}
	.home_main_bnr_sh .table_row   {display: table-row;}
	.home_main_bnr_sh .table-cell{
		display:table-cell;
		vertical-align:top;
	}

}
@media (max-width:999px) {

	.home_main_bnr_sh{
		float     : left;
		margin    : 0px 5px 10px 5px;
		width     : calc(100% - 10px);
		height    : auto;
		background: #CD0012;
	}
	.home_main_bnr_sh_title{
		text-align: center;
		margin    :30px 0px 20px 0px;
	}
	.home_main_bnr_sh_title img{
		width     : 90%;
	}
	.home_main_bnr_sh .table{
		width     : 100%;
		text-align: left;
		margin    : 0px auto 0px auto;
	}
	.home_main_bnr_sh .table       {display:table;border-collapse:collapse;}
	.home_main_bnr_sh .table_row   {display: table-row;}
	.home_main_bnr_sh .table-cell{
		text-align: center;
		display:table-cell;
		vertical-align:top;
		padding   :10px 0px 30px 0px;
	}
	.home_main_bnr_sh .table-cell img{
		width     : 50%;
	}
}





@media screen and (min-width: 1000px) { 


}
@media (max-width:999px) {

	
}