@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*pc用のcssを記述*/
	body {
		-webkit-text-size-adjust: 100%; 
		-moz-text-size-adjust: 100%; 
		-ms-text-size-adjust: 100%; 
		-o-text-size-adjust: 100%; 
		text-size-adjust: 100%;
	}
	.button {
		-webkit-appearance:none;
		background-color:#cea17e; 
		background:-webkit-gradient(linear, left top, left bottom, from(#cea17e), to(#cea17e));
	}
	/* clearfix */
	.clearfix:after {
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	font-size: 0;
	clear: both; 
	}
	.clearfix{
	min-height: 1px;
	}

	* html .clearfix{
	height: 1px;
	}
	/* パソコンで見たときは"pc"のclassがついた画像が表示される */
	.pc {
		display: block !important;
	}
	.sp {
		display: none !important;
	}
	/*----------共通---------*/
	.pro_cat_area{
		font-size: 14px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content h1{
		background: none;
		display: block;
		height: auto;
		width: 100%;
		padding: 0;
		margin:40px 0;
	}
	.pro_cat_area #contents #container #main_lp #pro_content h2{
		background:url(/product_list/images/o_line.png) repeat-x;
		text-align: center;
		padding: 0 0 20px 0;
	}
	.pro_cat_area #contents #container #main_lp #pro_content h2 img{
		background: #fff;
		padding: 0 3%;
		margin: 0 auto;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area{
		padding: 0 0 25px 0;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box{
		height: 250px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(2),.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(4){
		padding: 0 10px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(6){
		padding: 0 0 0 10px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner{
		width: 15%;
		display: inline-block;
		vertical-align: top;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:first-child{
		padding: 0!important;
	}
	.ttp{
		text-align: right;	
	}
	/*-----ホバー-------*/
	.fd {
		display: none;
		top: 40.5%;
		border-radius: 5px;
		background: #555;
		color: #fff;
		text-align: center;
		font-size: 10px;
		width: 145px;
		padding: 5px 0;
		margin: 3px 0 0 0;
		position: relative;
	}
	.itext:hover + .fd {
		display: block;
	}

	.fd:before{
		content: "";
		position: absolute;
		top: -18px;
		left: 54%;
		margin-left: -15px;
		border: 10px solid transparent;
		border-bottom: 10px solid #555;
	}
	/*----------second_pro_cat_area---------*/
	.second_pro_cat_area{
		margin: 15px 0 75px 0;
		background: #fff2de;
		text-align: center;
		display: block;
		padding: 40px 0;
	}
	.second_pro_cat_area h3{
		background: url(../../image/common/bg_h1.gif) no-repeat left top;
		height: 40px;
		padding: 20px 0 0 25px;
		margin: 0 0 15px 0;
		font-size: 154%;
		font-weight: bold;
		color: #ffaa21;
		background-size: 100% 100%;
	}
	.second_pro_cat_area .t_text01{
		padding: 0 0 15px 0;
	}
	.second_pro_cat_area .t_cent01{
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		margin: 0 0 15px 0;
	}
	.second_pro_cat_area .a_tag_area{
		text-align: center;
	}
	.long_ttl p{
		font-size: 14px;
		padding: 0 0 30px 0;
		border-bottom: 2px solid #ffaa21;
		margin: 0 0 30px 0;
	}
	.long_ttl p img{
		vertical-align: middle;
	}
	.long_ttl p .spa_fb{
		font-size: 16px;
		font-weight: bold;
		vertical-align: middle;
		margin: 0 1.3%;
	}
	/*---------second_pro_cat_area02----------*/
	.pro_cat_area #contents #container #main_lp #pro_content .second_pro_cat_area02 h2{
		background: url(../../image/common/bg_h1.gif) no-repeat left top;
		height: 40px;
		padding: 20px 0 0 25px;
		margin: 0 0 35px 0;
		font-size: 154%;
		font-weight: bold;
		color: #ffaa21;
		text-align: left;
		background-size: 100% 100%;
	}
	.second_pro_cat_area02 .step_area h3{
		font-size: 20px;
		font-weight: bold;
		color: #ffaa21;
		margin: 0 0 20px 0;
	}
	.second_pro_cat_area02 .step_area h3 img{
		margin: 0 10px 0 0;
	}
	.second_pro_cat_area02 .step_area .step_contents{
		border-bottom: 1px solid #c8c8c8c8;
		padding: 0 0 40px 0;
		margin: 0 0 30px 0;
	}
	.second_pro_cat_area02 .step_area .step_contents img{
		height: auto;
		margin: 0 auto;
		display: block;
	}
	.second_pro_cat_area02 .step_area:nth-child(5) .step_contents{
		border: none;
		margin: 0;
	}
	/*----------price_cell_area--------*/
	.price_cell_area{
		text-align: center;
	}
	.price_cell_area .t_cent01{
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		margin: 0 0 15px 0;
	}
	.price_cell_area .a_tag_area{
		margin: 0 0 40px 0;
	}
	.price_cell_area .t_left01{
		text-align: left;
		padding: 0 0 55px 0;
		border-bottom: 1px solid #c8c8c8;
		margin: 0 0 40px 0;
	}
	.price_cell_area .t_left01 a{
		text-decoration: underline;
	}
	/*---------cat_contact_centerbox----------*/
	.cat_contact_centerbox{
	}
	.cat_contact_centerbox .c3_l_box{
		display: inline-block;
		width: 55%;
		vertical-align: top;
	}
	.cat_contact_centerbox .c3_r_box{
		display: inline-block;
		width: 44%;
		vertical-align: bottom;
	}
	.cat_contact_centerbox .c3_l_box h4{
		font-size: 20px;
		font-weight: bold;
		color: #ffaa21;
		margin: 0 0 15px 0;
	}
	.cat_contact_centerbox .c3_l_box .c3p{
		font-size: 14px;
		margin: 0 0 10px 0;
	}
	.cat_contact_centerbox .c3_l_box .c3i{
	}
	.cat_contact_centerbox .c3_r_box .c3i{
		width: 100%;
		height: auto;
	}
	.cat_contact_centerbox .pro_tc_box{
		text-align: center;
		margin: 40px 0 27px 0;
	}
/*-------tab--------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {
	body{
		max-width: 1024px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(2), .pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(4) {
		padding: 0 7px;
	}
}
/*-------SP_new--------*/
@media screen and (min-width: 481px) and (max-width: 896px) {
	body{
		max-width: 896px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(4),.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(5),.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(6){
	    padding: 0 0 0 7px!important;	
	}
	.t_left01 .pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	.loop_box_innner:nth-child(3n+2){
		margin: 0;
	}
	.loop_box_innner {
		display: inline-block;
		width: 30%;
		margin: 0 0 10% 0;
	}
}
/*-------sp--------*/
@media screen and (min-width: 1px) and (max-width: 480px) {
	body{
		max-width: 480px;
		margin: 0 auto!important;
	}
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	img {
		width: 100%;
		height: auto;
	}
	.pro_cat_area #contents{
		max-width: 480px;
		margin: 0 auto!important;
	}
	.second_pro_cat_area02 .step_area h3 img{
		margin: 0 5px 0 0;
		width: 20%!important;
	}
	.pro_cat_area #contents #container #main_lp #pro_content h2 img{
		background: #fff;
		margin: 0 auto;
		padding: 0;
		width: 180px!important;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:first-child{
		padding: 0;
		width: 30%;		
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(2), .pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(4),.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner:nth-child(6) {
		padding: 0;
		width: 30%;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box .loop_box_innner{
		padding: 0;
		width: 30%;
		float: left;
		margin: 0 0 4% 2.7%;
		height: 155px;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box {
		height: auto;
	}
	.cat_contact_centerbox .c3_l_box{
		width: 100%;
	}
	.ttp a{
		display: inline-block;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area{
		padding: 0 3% 25px;
	}
	.second_pro_cat_area{
		padding: 40px 3%;
	}
	.long_ttl p img{
		display: inline-block;
		width: 8%!important;
	}
	.long_ttl p{
	    padding: 0 3% 30px;
	}
	.step_area{
		padding: 0 3%;
		display: block;
	}
	.second_pro_cat_area02 .step_area h3{
		font-size: 18px;
	}
	.price_cell_area,.cat_contact_centerbox .c3_l_box h4,.cat_contact_centerbox .c3_l_box .c3p,.cat_contact_centerbox .c3_l_box .c3i{
		padding: 0 3%;
	}
	.price_cell_area .t_left01{
		padding: 0 0 30px 0;
		margin: 0 0 20px 0;
	}
	.cat_contact_centerbox .c3_l_box .c3i,.pro_tc_box2{
		margin: 0 0 10% 0;
	}
	.cat_contact_centerbox .c3_r_box{
		width: 100%!important;
	}
	.cat_contact_centerbox .c3_l_box .c3i,.pro_tc_box2{
		width: 94%!important;
		margin: 0 auto 10%;
	}
	.pro_cat_area #contents #container #main_lp #pro_content .loop_area .loop_box{
		margin: 0;
	}
	.fd{
		width: 100%;
	}
	.pro_cat_area #contents #container #main_lp #pro_content h1{
		width: 270px;
		margin: 30px auto;
	}
	.second_pro_cat_area .a_tag_area{
		width: 230px;
		margin: 0 auto;
	}
	.price_cell_area .a_tag_area{
		margin: 0 auto 30px;
		width: 230px;
	}
	.pro_tc_box2{
		width: 250px!important;
	}
}

@media以外の所は全てのサイズで読み込まれます。 */;

