@charset "utf-8";
/* CSS Document */
@import "/files/ocp/ja_jp/products/musical-instruments/winds/start/style.css";

/* contents
--------------------------------------------------------------------------
01. product (div#main_visual.product)
02. point (div.point)
03. point_catch(div#point_catch)
04. product_navi(div.product_navi)
05. product_select(div#product_select)
06. product_detail(div.product_detail)
07. standard_series(div#standard_series)
--------------------------------------------------------------------------
*/

/* 01. product
----------------------------------------------------------------------- */
div#product_visual{
	margin: 0 0 10px;
	padding: 20px 0 0 30px;
}
@media (max-width: 767px){
	div#product_visual{
		padding-left: 0;
	}
}
div#product_visual:after{
	content: "";
	display: block;
	clear: both;
}
div#product_visual p{
	margin: 0 0 15px;
	font-size: 14px;
	line-height: 1.7;
	}
div#product_visual .bg{
	float: right;
}
@media (max-width: 767px){
	div#product_visual .bg{
		float: none;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-bottom: 10px;
	}
	div#product_visual .bg img{
		margin-left: auto;
		margin-right: auto;

	}
}
/* 02. point
----------------------------------------------------------------------- */
div.point{
	padding: 20px 0;
	}
div.point div.img{
	float: left;
	padding: 0 0 0 20px;
	width: 225px;
}
@media (min-width: 768px) and (max-width: 991px) {
	div.point div.img{
		padding: 0 0 0 0;
		width: 200px;
	}
}
@media (max-width: 767px) {
	div.point div.img{
		float: none;
		padding: 0 0 0 0;
		width: 225px;
		margin-left: auto;
		margin-right: auto;
	}
}
div.point div.img img{
	max-width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	div.point div.img img{
		max-width: 100%;
		height: auto;
	}
}
div.point div.txt{
	float: right;
	padding: 22px 0 0;
	width: 475px;
	}
@media (max-width: 767px) {
	div.point div.txt{
		float: none;
		padding: 22px 0 0;
		width: 100%;
	}
}
div.point div.txt h2{
	margin: 0 0 15px;
	}
@media (max-width: 767px) {
	div.point div.txt h2 img{
		height: 45px;
		width: auto;
	}
}
div.point div.txt p{
	margin: 0 0 0 15px;
	font-size: 14px;
	}


/* 03. point_catch
----------------------------------------------------------------------- */
div#point_catch{
	margin: 30px 0 40px;
	text-align: center;
	}
div#point_catch p{
	font-size: 14px;
	}

/* 04. product_navi
----------------------------------------------------------------------- */
div.product_navi{
	margin: 0 0 40px;
	}
div.product_navi.current{
	margin: 0;
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/bg_product_navi.gif) repeat-x 0 84px;
	}
div.product_navi h2{
	margin: 10px -5px;
	}
@media (max-width: 767px) {
	div.product_navi h2{
		margin: 10px 0;
	}
}
div.product_navi ul{
	padding-left: 0;
	list-style: none;
}
div.product_navi ul{
	margin-left: -5px;
	margin-right: -5px;
}
@media (max-width: 767px) {

}
div.product_navi ul li{
	float: left;
	padding-left: 5px;
	padding-right: 5px;
	width: 25%;
}
@media (max-width: 767px) {
	div.product_navi ul li{
		width: 50%;
		margin-bottom: 10px;
	}
}
div.product_navi ul li a{
	position: relative;
	display: block;
}

div.product_navi ul li a img{
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

div.product_navi ul li a img.hover{
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	max-width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 0.4s ease-out;
	z-index: 2;
}
div.product_navi ul li a:hover img.hover {
	opacity: 1;
}
/* 05. product_select
----------------------------------------------------------------------- */
div#product_select{
	position: relative;
	margin: 40px 0 50px;
	padding: 4px;
	border: 1px solid #dfdfdf;
	}
div#product_select h2{
	margin: 5px 0 10px;
	}
div#product_select p{
	font-size: 14px;
	}
/*--flute--*/	
div#product_select div.bg_flute{
	padding: 30px 15px 30px 105px;
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/flute/instrument.jpg) no-repeat 390px 15px #f9dce5;
	}
div#product_select div.bg_flute p{
	width: 250px;
	}
div#product_select div.bg_flute div.btn_shop{
	position: absolute;
	bottom: -20px;
	right: 15px;
	_top: 150px;
	_left: 460px;
	}	
div#product_select div.bg_flute div.img{
	position: absolute;
	top: -20px;
	left: 30px;
	}
/*--clarinet--*/	
div#product_select div.bg_clarinet{
	padding: 20px 15px 20px 120px;
	min-height: 220px;
	height: auto !important;
	height: 220px;	
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/clarinet/instrument.jpg) no-repeat 370px 10px #e9f2d2;
	}
div#product_select div.bg_clarinet p{
	width: 200px;
	}
div#product_select div.bg_clarinet div.btn_shop{
	position: absolute;
	bottom: -20px;
	right: 15px;
	_top: 230px;
	_left: 460px;
	}	
div#product_select div.bg_clarinet div.img{
	position: absolute;
	top: -5px;
	left: 20px;
	}
/*--sax--*/	
div#product_select div.bg_sax{
	padding: 30px 15px 10px 145px;
	min-height: 225px;
	height: auto !important;
	height: 225px;	
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/sax/instrument.jpg) no-repeat 370px 10px #f8e3cd;
	}
div#product_select div.bg_sax p{
	width: 180px;
	}
div#product_select div.bg_sax div.btn_shop{
	position: absolute;
	bottom: -20px;
	right: 15px;
	_top: 230px;
	_left: 460px;
	}	
div#product_select div.bg_sax div.img{
	position: absolute;
	top: 15px;
	left: 40px;
	}
/*--trumpet--*/	
div#product_select div.bg_trumpet{
	padding: 25px 15px 25px 110px;
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/trumpet/instrument.jpg) no-repeat 380px 10px #d9f2f7;
	}
div#product_select div.bg_trumpet p{
	width: 240px;
	}
div#product_select div.bg_trumpet div.btn_shop{
	position: absolute;
	bottom: -20px;
	right: 15px;
	_top: 155px;
	_left: 460px;
	}	
div#product_select div.bg_trumpet div.img{
	position: absolute;
	top: -20px;
	left: 30px;
	}
	
/* 06. product_detail
----------------------------------------------------------------------- */
.product_detail{
	position: relative;
	margin: 0 0 50px;
	/*padding: 0 140px 0 110px;*/
	padding: 0 125px 0 125px;
	}
.product_detail h3,
.product_detail h4{
	padding: 32px 0 17px;
	width: 450px;
	text-align: center;
	}
.product_detail p{
	padding: 0 15px;
	font-size: 14px;
	}	
.product_detail div.detail_img{
	margin: 30px 0 20px;
	text-align: center;
	}
.product_detail div.detail_imgFloat{
	float: left;
	margin: 30px 20px 20px 0;
	}
.product_detail div.detail_imgFloat p.font10{
	margin: 0;
	padding: 0;
	width: 215px;
	font-size: 10px;
	}	
/*--flute--*/
.flute_detail01{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/flute/bg_detail01.gif) no-repeat top center;
	}
.flute_detail02{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/flute/bg_detail02.gif) no-repeat top center;
	}
/*--clarinet--*/
.clarinet_detail01{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/clarinet/bg_detail01.gif) no-repeat top center;
	}
.clarinet_detail02{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/clarinet/bg_detail02.gif) no-repeat top center;
	}
/*--sax--*/
.sax_detail01{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/sax/bg_detail01.gif) no-repeat top center;
	}
.sax_detail02{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/sax/bg_detail02.gif) no-repeat top center;
	}
/*--trumpet--*/
.trumpet_detail01{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/trumpet/bg_detail01.gif) no-repeat top center;
	}
.trumpet_detail02{
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/trumpet/bg_detail02.gif) no-repeat top center;
	}


/* 07. standard_series
----------------------------------------------------------------------- */
#standard_series{
	padding: 15px 0 0 80px;
	}
#standard_series h2{
	margin: 0 0 25px 30px;
	}
.flute_standard{/*--flute--*/
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/flute/title_standard_bg.gif) no-repeat top;
	}
.clarinet_standard{/*--clarinet--*/
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/clarinet/title_standard_bg.gif) no-repeat 0 0;
	}
.sax_standard{/*--sax--*/
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/sax/title_standard_bg.gif) no-repeat 0 0;
	}
.trumpet_standard{/*--trumpet--*/
	background: url(/files/ocp/ja_jp/products/musical-instruments/winds/start/products/trumpet/title_standard_bg.gif) no-repeat top;
	}

#standard_series h3.subtitle{
	margin: 0 0 10px 30px;
	}
#standard_series div.series_list{
	padding: 20px 0 0;
	}
	
/*--non float--*/
#standard_series div.series_list div.series{
	float: left;
	padding: 0 0 0 30px;
	width: 300px;
	}
#standard_series div.series_list div.series div.img{
	margin: 0 0 15px;
	text-align: center;
	}
#standard_series div.series_list div.series div.txt{
	margin: 10px 0;
	}
#standard_series div.series_list div.series div.txt h4{
	margin: 0 0 13px;
	}
#standard_series div.series_list div.series div.txt h3,
#standard_series div.series_list div.series div.txt dt,
#standard_series div.series_list div.series div.txt dd{
	margin: 0 0 10px;
	}
#standard_series div.series_list div.series div.txt dd span.font10{
	color: #777;
	font-size: 10px;
	}
	
/*--float--*/
#standard_series div.series_list div.series.imgFloat{
	float: left;
	padding: 0 0 0 10px;
	width: 320px;
	}
#standard_series div.series_list div.series.imgFloat div.img{
	float: left;
	margin: 0;
	width: 105px;
	text-align: center;
	}
#standard_series div.series_list div.series.imgFloat div.txt{
	float: right;
	margin: 40px 0 0;
	width: 205px;
}