@charset "UTF-8";
/* CSS Document */

/*　全体設定　*/
html { font-size: 62.5%; }
*,*::before, *::after { box-sizing: border-box;}

body {
	color: #333333;
	text-align: center;
	font-size: 1.4rem;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

img { vertical-align: bottom; }


a { 
   color: #333333;
   text-decoration: none;
}

/*各種ボタン*/

.page_top_bt{ 
	position: fixed;
	width: 80px;
	top:805px;
	right: 70px;
}

#tk{
	position: fixed;
	width: 150px;
	top: 135px;
	right: 75px;
	z-index: 9999;
}

#estimate_link{
	position: fixed;
	width: 150px;
	top: 410px;
	right: 30px;
}
.estimate_button_image{
	position: fixed;
	width: 130px;
	top: 585px;
	right: 40px;
}
.estimate_button:hover{ opacity: 0.7;}

.tel_image{
	position: fixed;
	width: 150px;
	top: 685px;
	right: 30px;
	
}

@media(max-width:1300px){
	#estimate_link{ display:none!important; }
	#tel{ display:none!important; }
	#page_top{ display:none!important; }
}
/*　ヘッダーエリア　*/

/* 1280px〜：大型PC
------------------------------ */
@media( min-width:1280px){
	.header{
		width: 100%;
	}
	.guide960px{
		width: 960px;
		margin: 0 auto 0;
	}
	.guide1200px{
		width: 1200px;
		margin: 0 auto 0;
		position: relative;
	}
	.title_obi_area{
		background-image: url("../images/top_obi_color.png");
		background-repeat: 100% 100%;
	}
	.title_obi_moji{
		margin: 13px 0;
		width: 960px;
	}

	.daialog_tel{
		width: 350px;
		position: absolute; /*ボタンの配置場所を固定*/
		top: 20px; 
		right: 0px; /*右からのボタンの配置場所を指定*/
	}

	.title_moji_area{
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: auto;
	}
	.title_moji{
		width: 700px;
		float: left;
		margin: 40px 0;
	}

	.title_moji_2{
		/*width: 860px;*/
		/*float: left;*/
		margin: 5px 0 0 0;
	}
	.top_area{
		background: url("../images/top_main_image.jpg" );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: auto;
	}
	.top_caption{
		width: 960px;
		margin: 0 0 80px;
		float: left;
	}

	.appeal_area{
		background: url("../images/appeal_area_backcolor.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.appeal_moji{ margin: 20px 0 5px; }
	.appeal_img{ margin: 0 0 50px; }
}


/* 960px〜1279px：小型PC
------------------------------ */
@media (min-width:960px) and (max-width:1279px) {
	.header{
		width: 100%;
	}
	.guide960px{
		width: 80%;
		margin: 0 auto 0;
	}
	.guide1200px{
		width: 95%;
		margin: 0 auto 0;
		position: relative;
	}
	.title_obi_area{
		background-image: url("../images/top_obi_color.png");
		background-repeat: 100% 100%;
	}
	.title_obi_moji{
		margin: 13px 0;
		width: 80%;
	}

	.daialog_tel{
		width: 28%;
		position: absolute; /*ボタンの配置場所を固定*/
		top: 10px; 
		right: 0px; /*右からのボタンの配置場所を指定*/
	}

	.title_moji_area{
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: auto;
	}
	.title_moji{
		width: 70%;
		float: left;
		margin: 40px 0;
	}
	.top_area{
		background: url("../images/top_main_image.jpg" );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: auto;
	}
	.top_caption{
		width: 95%;
		margin: 0 auto 80px;
		float: none;
	}

	.appeal_area{
		background: url("../images/appeal_area_backcolor.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.appeal_moji{ margin: 30px 0; }
	.appeal_img{ 
		margin: 0 0 50px;
		width: 100%
	}
	
}

/* 600px〜959px：タブレット
------------------------------ */
@media (min-width:600px) and (max-width:959px) {
	.header{
		width: 100%;
	}
	.guide960px{
		width: 85%;
		margin: 0 auto 0;
	}
	.guide1200px{
		width: 95%;
		margin: 0 auto 0;
		position: relative;
	}
	.title_obi_area{
		background-image: url("../images/top_obi_color.png");
		background-repeat: 100% 100%;
	}
	.title_obi_moji{
		margin: 13px 0;
		width: 90%;
	}

	.daialog_tel{
		width: 28%;
		position: absolute; /*ボタンの配置場所を固定*/
		top: 10px; 
		right: 0px; /*右からのボタンの配置場所を指定*/
	}

	.title_moji_area{
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: auto;
	}
	.title_moji{
		width: 72%;
		float: left;
		margin: 30px 0;
	}
	.top_area{
		background: url("../images/top_main_image.jpg" );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: auto;
	}
	.top_caption{
		width: 95%;
		margin: 0 auto 40px;
		float: none;
	}

	.appeal_area{
		background: url("../images/appeal_area_backcolor.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.appeal_moji{ margin: 20px 0; }
	.appeal_img{ 
		margin: 0 0 40px;
		width: 100%
	}
	

}

/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) { 
	.header{
		width: 100%;
	}
	.guide960px{
		width: 85%;
		margin: 0 auto 0;
	}
	.guide1200px{
		width: 95%;
		margin: 0 auto 0;
		position: relative;
	}
	.title_obi_area{
		background-image: url("../images/top_obi_color.png");
		background-repeat: 100% 100%;
	}
	.title_obi_moji{
		margin: 13px 0;
		width: 90%;
	}

	.daialog_tel{
		width: 28%;
		position: absolute; /*ボタンの配置場所を固定*/
		top: -5px; 
		right: 0px; /*右からのボタンの配置場所を指定*/
	}

	.title_moji_area{
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: auto;
	}
	.title_moji{
		width: 72%;
		float: left;
		margin: 20px 0;
	}
	.top_area{
		background: url("../images/top_main_image.jpg" );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: auto;
	}
	.top_caption{
		width: 95%;
		margin: 0 auto 40px;
		float: none;
	}

	.appeal_area{
		background: url("../images/appeal_area_backcolor.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.appeal_moji{ margin: 15px 0; }
	.appeal_img{ 
		margin: 0 0 25px;
		width: 100%
	}
	
	.title_moji_2 {
		width: 100%;
		float: left;
		margin: 5px 20px 0 0;
	}

}


/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	.header{
		width: 100%;
	}
	.guide960px{
		width: 85%;
		margin: 0 auto 0;
	}
	.guide1200px{
		width: 95%;
		margin: 0 auto 0;
		position: relative;
	}
	.title_obi_area{
		background-image: url("../images/top_obi_color.png");
		background-repeat: 100% 100%;
	}
	.title_obi_moji{
		margin: 13px 0;
		width: 90%;
	}

	.daialog_tel{
		width: 28%;
		position: absolute; /*ボタンの配置場所を固定*/
		top: -8px; 
		right: 0px; /*右からのボタンの配置場所を指定*/
	}

	.title_moji_area{
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: auto;
	}
	.title_moji{
		width: 72%;
		float: left;
		margin: 10px 0;
	}
	.top_area{
		background: url("../images/top_main_image.jpg" );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: auto;
	}
	.top_caption{
		width: 100%;
		margin: 0 auto 40px;
		float: none;
	}

	.appeal_area{
		background: url("../images/appeal_area_backcolor.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.appeal_moji{ margin: 15px 0; }
	.appeal_img{ 
		margin: 0 0 20px;
		width: 100%
	}
	


}


/* ナビエリア　*/

/* 1280px〜：大型PC
------------------------------ */
@media(min-width:1280px){
	#item_nav_area{ 
		background: linear-gradient(#f1f0f0, #c1bebd); 
		overflow: auto;
	}
	#item_nav_area a:hover { opacity: 0.7; }
	#item_nav_area a:hover img { opacity: 0.7; }
	.item_nav{ 
		width: 960px;
		margin: 20px auto ;
		list-style: none;
	}
	.item_nav li{
		width: 240px;
		float: left;
		border-right: 1px solid;
		margin-bottom: 20px;
	}
	.item_nav li:first-child{ border-left: 1px solid; }
	.item_nav a{
		font-weight: bold;
		font-size: 1.6rem;
		line-height: 1.4;
	}
}


/* 960px〜1279px：小型PC
------------------------------ */
@media (min-width:960px) and (max-width:1279px) {
	#item_nav_area{ 
		background: linear-gradient(#f1f0f0, #c1bebd); 
		overflow: auto;
	}
	#item_nav_area a:hover { opacity: 0.7; }
	#item_nav_area a:hover img { opacity: 0.7; }
	.item_nav{ 
		width: 80%;
		margin: 20px auto ;
		list-style: none;
	}
	.item_nav li{
		width: 25%;
		float: left;
		border-right: 1px solid;
		margin-bottom: 20px;
	}
	.item_nav li:first-child{ border-left: 1px solid; }
	.item_nav a{
		font-weight: bold;
		font-size: 1.4rem;
		line-height: 1.4;
	}
	.item{ width: 45%; }

}

/* 600px〜959px：タブレット
------------------------------ */
@media (min-width:600px) and (max-width:959px) {
	#item_nav_area{ 
		background: linear-gradient(#f1f0f0, #c1bebd); 
		overflow: auto;
	}
	#item_nav_area a:hover { opacity: 0.7; }
	#item_nav_area a:hover img { opacity: 0.7; }
	.item_nav{ 
		width: 85%;
		margin: 20px auto ;
		list-style: none;
	}
	.item_nav li{
		width: 25%;
		float: left;
		border-right: 1px solid;
		margin-bottom: 20px;
	}
	.item_nav li:first-child{ border-left: 1px solid; }
	.item_nav a{
		font-weight: bold;
		font-size: 1.4rem;
		line-height: 1.4;
	}
	.item{ width: 45%; }

}

/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) {
	#item_nav_area{ 
		background: linear-gradient(#f1f0f0, #c1bebd); 
		overflow: auto;
	}
	#item_nav_area a:hover { opacity: 0.7; }
	#item_nav_area a:hover img { opacity: 0.7; }
	.item_nav{ 
		width: 85%;
		margin: 20px auto ;
		list-style: none;
	}
	.item_nav li{
		width: 25%;
		float: left;
		border-right: 1px solid;
		margin-bottom: 20px;
	}
	.item_nav li:first-child{ border-left: 1px solid; }
	.item_nav a{
		font-weight: bold;
		font-size: 1.2rem;
		line-height: 1.4;
	}
	.item{ width: 45%; }
}

/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	#item_nav_area{ 
		background: linear-gradient(#f1f0f0, #c1bebd); 
		overflow: auto;
	}
	#item_nav_area a:hover { opacity: 0.7; }
	#item_nav_area a:hover img { opacity: 0.7; }
	.item_nav{ 
		width: 95%;
		margin: 10px auto ;
		list-style: none;
	}
	.item_nav li{
		width: 25%;
		float: left;
		border-right: 1px solid;
		margin-bottom: 10px;
	}
	.item_nav li:first-child{ border-left: 1px solid; }
	.item_nav a{
		font-weight: bold;
		font-size: 1vw;
		line-height: 1px;
	}
	.item{ width: 45%; }
	
}



/* メインカテゴリーエリア　*/

/* 1280px〜：大型PC
------------------------------ */

/*［共通］カテゴリーボックス*/
@media(min-width:1280px){
	.article_box{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 940px;
		height: 450px;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.article_box_a{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 940px;
		height: 450px;
		margin: 50px auto 50px;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	/*［共通］タグ　*/
	.tag {
		width: 180px;
		position: absolute;
		top: 45px;
		left: 50px;
	}
	/*［共通］商品画像　*/
	.item_image{
		position: absolute;
		top: 0;
		right: 0;
	}
	/*［共通］タイトル　*/
	.item_title{
		position: absolute;
		top: 140px;
		left: 60px;
		text-align: left;
		font-size: 4rem;
		line-height: 50px;
	}
	/*［共通］ボタン　*/
	.btn-flat-border {
		width: 800px;
		display: inline-block;
		padding: 0.3em 1em;
		border-radius: 100px;
		transition: .1s;
		font-size: 2.8rem;
		font-weight: bold;
		text-align: left;
		border-bottom: solid 3px #939393;
	}
	.btn-flat-border:active {
	  /*ボタンを押したとき*/
	  -webkit-transform: translateY(1px);
	  transform: translateY(1px);/*下に動く*/
	  border-bottom: none;/*線を消す*/
	}

	/*［共通］ボタン内の総厚 */
	.small{ 
		font-size: 2rem;
		vertical-align: 10%;
	}
	.small2{
		font-size: 1.5rem;
		vertical-align: 35%;
		font-weight: normal;
		padding: 0.5em 1em;
		border-radius: 50px;
	}
	.small2::after{
		font-family: "Font Awesome 5 Free";
		content: '\f0da';
		font-weight: 900;
		font-size: 2rem;
		vertical-align: -8%;
	}

	/*個別 ボタン*/
	.button1{
		position: absolute;
		bottom: 120px;
		left: 60px;
	}
	.button2{
		position: absolute;
		bottom: 55px;
		left: 60px;
		text-align: left;
	}
	.box_color1{ background-color: #B1DFDA; }
	.box_color1:hover {
		background: #4F9E96;
		color: white;
	}
	.box_color2{ background-color: #AEDFF4; }
	.box_color2:hover {
		background: #29ABE2;
		color: white;
	}
	.box_color3{ background-color: #feeda0; }
	.box_color3:hover {
		background: #fccf00;
		color: white;
	}
	.box_color4{ background-color: #fcc99b; }
	.box_color4:hover {
		background: #faa000;
		color: white;
	}
	.box_color5{ background-color: #85b4e2; }
	.box_color5:hover {
		background: #1a609b;
		color: white;
	}
	.box_color6{ background-color: #8fbec4; }
	.box_color6:hover {
		background: #0f7480;
		color: white;
	}
	.box_color7{ background-color: #c8aa49; }
	.box_color7:hover {
		background: #9b7500;
		color: white;
	}
	


}

/* 960px〜1279px：小型PC
------------------------------ */
@media (min-width:960px) and (max-width:1279px) {
	.article_box{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		height: 450px;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.article_box_a{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		height: 450px;
		margin: 50px auto 50px;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	/*［共通］タグ　*/
	.tag {
		width: 20%;
		position: absolute;
		top: 45px;
		left: 50px;
	}
	/*［共通］商品画像　*/
	.item_image{
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
	}
	/*［共通］タイトル　*/
	.item_title{
		position: absolute;
		top: 140px;
		left: 60px;
		text-align: left;
		font-size: 3.5rem;
		line-height: 50px;
	}
	/*［共通］ボタン　*/
	.btn-flat-border {
		width: 80% ;
		display: inline-block;
		padding: 0.6em 1em;
		border-radius: 100px;
		transition: .1s;
		font-size: 1.9vw;
		font-weight: bold;
		text-align: left;
		border-bottom: solid 3px #939393;
	}
	.btn-flat-border:active {
	  /*ボタンを押したとき*/
	  -webkit-transform: translateY(1px);
	  transform: translateY(1px);/*下に動く*/
	  border-bottom: none;/*線を消す*/
	}

	/*［共通］ボタン内の総厚 */
	.small{ 
		font-size: 1.5vw;
		vertical-align: 10%;
	}
	.small2{
		font-size: 1.5rem;
		vertical-align: 10%;
		font-weight: normal;
		padding: 0.5em 1em;
		border-radius: 50px;
	}
	.small2::after{
		font-family: "Font Awesome 5 Free";
		content: '\f0da';
		font-weight: 900;
		font-size: 2rem;
		vertical-align: -8%;
	}

	/*個別 ボタン*/
	.button1{
		position: absolute;
		bottom: 120px;
		left: 60px;
	}
	.button2{
		position: absolute;
		bottom: 55px;
		left: 60px;
		text-align: left;
	}
	.box_color1{ background-color: #B1DFDA; }
	.box_color1:hover {
		background: #4F9E96;
		color: white;
	}
	.box_color2{ background-color: #AEDFF4; }
	.box_color2:hover {
		background: #29ABE2;
		color: white;
	}
	.box_color3{ background-color: #feeda0; }
	.box_color3:hover {
		background: #fccf00;
		color: white;
	}
	.box_color4{ background-color: #fcc99b; }
	.box_color4:hover {
		background: #faa000;
		color: white;
	}
	.box_color5{ background-color: #85b4e2; }
	.box_color5:hover {
		background: #1a609b;
		color: white;
	}
	.box_color6{ background-color: #8fbec4; }
	.box_color6:hover {
		background: #0f7480;
		color: white;
	}
	.box_color7{ background-color: #c8aa49; }
	.box_color7:hover {
		background: #9b7500;
		color: white;
	}

}

/* 600px〜959px：タブレット
------------------------------ */
@media (min-width:600px) and (max-width:959px) {
	.article_box{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		padding: 55% 0 0;
		margin: 40px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.article_box_a{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		padding: 45% 0 0;
		margin: 40px auto 50px;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	/*［共通］タグ　*/
	.tag {
		width: 20%;
		position: absolute;
		top: 10%;
		left: 7%;
	}
	/*［共通］商品画像　*/
	.item_image{
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
	}
	/*［共通］タイトル　*/
	.item_title{
		position: absolute;
		top: 30%;
		left: 8%;
		text-align: left;
		font-size: 3.5vw;
		line-height: 150%;
	}
	/*［共通］ボタン　*/
	.btn-flat-border {
		width: 85% ;
		display: inline-block;
		padding: 0.6em 1em;
		border-radius: 100px;
		transition: .1s;
		font-size: 1.9vw;
		font-weight: bold;
		text-align: left;
		border-bottom: solid 3px #939393;
	}
	.btn-flat-border:active {
	  /*ボタンを押したとき*/
	  -webkit-transform: translateY(1px);
	  transform: translateY(1px);/*下に動く*/
	  border-bottom: none;/*線を消す*/
	}

	/*［共通］ボタン内の総厚 */
	.small{ 
		font-size: 1.5vw;
		vertical-align: 10%;
	}
	.small2{
		font-size: 1.7vw;
		vertical-align: 10%;
		font-weight: normal;
		padding: 0.5em 1em;
		border-radius: 50px;
	}
	.small2::after{
		font-family: "Font Awesome 5 Free";
		content: '\f0da';
		font-weight: 900;
		font-size: 2rem;
		vertical-align: -8%;
	}

	/*個別 ボタン*/
	.button1{
		position: absolute;
		bottom: 28%;
		left: 8%;
	}
	.button2{
		position: absolute;
		bottom: 12%;
		left: 8%;
		text-align: left;
	}
	.rakuraku_button{ bottom: 18%!important; }
	
	.box_color1{ background-color: #B1DFDA; }
	.box_color1:hover {
		background: #4F9E96;
		color: white;
	}
	.box_color2{ background-color: #AEDFF4; }
	.box_color2:hover {
		background: #29ABE2;
		color: white;
	}
	.box_color3{ background-color: #feeda0; }
	.box_color3:hover {
		background: #fccf00;
		color: white;
	}
	.box_color4{ background-color: #fcc99b; }
	.box_color4:hover {
		background: #faa000;
		color: white;
	}
	.box_color5{ background-color: #85b4e2; }
	.box_color5:hover {
		background: #1a609b;
		color: white;
	}
	.box_color6{ background-color: #8fbec4; }
	.box_color6:hover {
		background: #0f7480;
		color: white;
	}
	.box_color7{ background-color: #c8aa49; }
	.box_color7:hover {
		background: #9b7500;
		color: white;
	}

}

/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) { 
	.article_box{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		padding: 50% 0 0;
		margin: 20px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.article_box_a{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		padding: 40% 0 0;
		margin: 20px auto 50px;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	/*［共通］タグ　*/
	.tag {
		width: 20%;
		position: absolute;
		top: 10%;
		left: 7%;
	}
	/*［共通］商品画像　*/
	.item_image{
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
	}
	/*［共通］タイトル　*/
	.item_title{
		position: absolute;
		top: 30%;
		left: 8%;
		text-align: left;
		font-size: 3.5vw;
		line-height: 130%;
	}
	/*［共通］ボタン　*/
	.btn-flat-border {
		width: 88% ;
		display: inline-block;
		padding: 0.4em 1em;
		border-radius: 100px;
		transition: .1s;
		font-size: 1.9vw;
		font-weight: bold;
		text-align: left;
		border-bottom: solid 3px #939393;
	}
	.btn-flat-border:active {
	  /*ボタンを押したとき*/
	  -webkit-transform: translateY(1px);
	  transform: translateY(1px);/*下に動く*/
	  border-bottom: none;/*線を消す*/
	}

	/*［共通］ボタン内の総厚 */
	.small{ 
		font-size: 1.5vw;
		vertical-align: 10%;
	}
	.small2{
		font-size: 1.7vw;
		vertical-align: 10%;
		font-weight: normal;
		padding: 0.5em 0.5em;
		border-radius: 50px;
	}
	.small2::after{
		font-family: "Font Awesome 5 Free";
		content: '\f0da';
		font-weight: 900;
		font-size: 1rem;
		vertical-align: -8%;
	}

	/*個別 ボタン*/
	.button1{
		position: absolute;
		bottom: 28%;
		left: 8%;
	}
	.button2{
		position: absolute;
		bottom: 12%;
		left: 8%;
		text-align: left;
	}
	
	.rakuraku_button{ bottom: 15%!important; }
	
	.box_color1{ background-color: #B1DFDA; }
	.box_color1:hover {
		background: #4F9E96;
		color: white;
	}
	.box_color2{ background-color: #AEDFF4; }
	.box_color2:hover {
		background: #29ABE2;
		color: white;
	}
	.box_color3{ background-color: #feeda0; }
	.box_color3:hover {
		background: #fccf00;
		color: white;
	}
	.box_color4{ background-color: #fcc99b; }
	.box_color4:hover {
		background: #faa000;
		color: white;
	}
	.box_color5{ background-color: #85b4e2; }
	.box_color5:hover {
		background: #1a609b;
		color: white;
	}
	.box_color6{ background-color: #8fbec4; }
	.box_color6:hover {
		background: #0f7480;
		color: white;
	}
	.box_color7{ background-color: #c8aa49; }
	.box_color7:hover {
		background: #9b7500;
		color: white;
	}

}

/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	.article_box{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		padding: 50% 0 0;
		margin: 20px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.article_box_a{
		background: url("../images/stripe_box.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100% ;
		padding: 40% 0 0;
		margin: 20px auto 50px;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	/*［共通］タグ　*/
	.tag {
		width: 20%;
		position: absolute;
		top: 10%;
		left: 7%;
	}
	/*［共通］商品画像　*/
	.item_image{
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
	}
	/*［共通］タイトル　*/
	.item_title{
		position: absolute;
		top: 30%;
		left: 8%;
		text-align: left;
		font-size: 3.5vw;
		line-height: 130%;
	}
	/*［共通］ボタン　*/
	.btn-flat-border {
		width: 88% ;
		display: inline-block;
		padding: 0.4em 1em;
		border-radius: 100px;
		transition: .1s;
		font-size: 1vw;
		font-weight: bold;
		text-align: left;
		border-bottom: solid 3px #939393;
	}
	.btn-flat-border:active {
	  /*ボタンを押したとき*/
	  -webkit-transform: translateY(1px);
	  transform: translateY(1px);/*下に動く*/
	  border-bottom: none;/*線を消す*/
	}

	/*［共通］ボタン内の総厚 */
	.small{ 
		font-size: 1.5vw;
		vertical-align: 10%;
	}
	.small2{ display: none; }

	/*個別 ボタン*/
	.button1{
		position: absolute;
		bottom: 28%;
		left: 8%;
	}
	.button2{
		position: absolute;
		bottom: 12%;
		left: 8%;
		text-align: left;
	}
	
	.rakuraku_button{ bottom: 15%!important; }
	
	.box_color1{ background-color: #B1DFDA; }
	.box_color1:hover {
		background: #4F9E96;
		color: white;
	}
	.box_color2{ background-color: #AEDFF4; }
	.box_color2:hover {
		background: #29ABE2;
		color: white;
	}
	.box_color3{ background-color: #feeda0; }
	.box_color3:hover {
		background: #fccf00;
		color: white;
	}
	.box_color4{ background-color: #fcc99b; }
	.box_color4:hover {
		background: #faa000;
		color: white;
	}
	.box_color5{ background-color: #85b4e2; }
	.box_color5:hover {
		background: #1a609b;
		color: white;
	}
	.box_color6{ background-color: #8fbec4; }
	.box_color6:hover {
		background: #0f7480;
		color: white;
	}
	.box_color7{ background-color: #c8aa49; }
	.box_color7:hover {
		background: #9b7500;
		color: white;
	}


}


/* グローバルナビエリア　*/

/* 1280px〜：大型PC
------------------------------ */
#global_nav{ 
	width: 100%;
	margin: 0 auto 0;
	background: url("../images/appeal_area_backcolor.png");
	background-size: 100% 100%;
	overflow: auto;
}
.fixed{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;	
}

.nav_area{
	width: 900px;
	margin: 5px auto;
}

.nav_area li{
	float: left;
	/*width: 145px;*/
	padding: 8px;
	border-right: solid 1px ;
	margin-bottom: 20px;
}
.nav_area li:first-child{ border-left: 1px solid; }
.nav_area li:last-child{ border-right: none; padding-left: 0; }
.nav_area a{
	display: block;
	padding: 5px;
	font-weight: bold
}
.nav_area a:hover{
	background-image: url("../images/nav_back.png");
	transition: 2.0s ;
}
.red{ color: #AE0002; }


/* 960px〜1279px：小型PC
------------------------------ */
@media (min-width:960px) and (max-width:1279px) {
	#global_nav{ 
		width: 100%;
		margin: 0 auto 0;
		background: url("../images/appeal_area_backcolor.png");
		background-size: 100% 100%;
		overflow: auto;
	}
	
	.fixed{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;	
	}

	.nav_area{
		width: 100%;
		margin: 20px auto;
	}
	.nav_area li{
		float: left;
		width: 14%;
		border-right: solid 1px ;
		margin-bottom: 20px;
	}
	.nav_area li:first-child{ border-left: 1px solid; }
	.nav_area a{
		display: block;
		width: 100%;
		padding: 10px;
		font-weight: bold;
	}
	.nav_area a:hover{
		background-image: url("../images/nav_back.png");
		transition: 2.0s ;
	}

}

/* 600px〜959px：タブレット
------------------------------ */
@media (min-width:600px) and (max-width:959px) {
	#global_nav{ 
		width: 100%;
		margin: 0 auto 0;
		background: url("../images/appeal_area_backcolor.png");
		background-size: 100% 100%;
		overflow: auto;
	}
	
	.fixed{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;	
	}

	.nav_area{
		width: 95%;
		margin: 20px auto;
	}
	.nav_area li{
		float: left;
		width: 16%;
		border-right: solid 1px ;
		margin-bottom: 20px;
	}
	.nav_area li:first-child{ border-left: 1px solid; }
	.nav_area a{
		display: block;
		width: 100%;
		padding: 10px;
		font-weight: bold;
		font-size: 1.5vw;
	}
	.nav_area a:hover{
		background-image: url("../images/nav_back.png");
		transition: 2.0s ;
	}

}

/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) { 
	#global_nav{ 
		width: 100%;
		margin: 0 auto 0;
		background: url("../images/appeal_area_backcolor.png");
		background-size: 100% 100%;
		overflow: auto;
	}
	
	.fixed{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;	
	}


	.nav_area{
		width: 95%;
		margin: 10px auto;
	}
	.nav_area li{
		float: left;
		width: 16%;
		border-right: solid 1px ;
		margin-bottom: 10px;
	}
	.nav_area li:first-child{ border-left: 1px solid; }
	.nav_area a{
		display: block;
		width: 100%;
		padding: 10px 5px;
		font-weight: bold;
		font-size: 1.5vw;
	}
	.nav_area a:hover{
		background-image: url("../images/nav_back.png");
		transition: 2.0s ;
	}

}

/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	#global_nav{ 
		width: 100%;
		margin: 0 auto 0;
		background: url("../images/appeal_area_backcolor.png");
		background-size: 100% 100%;
		overflow: auto;
	}
	
	.fixed{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;	
	}

	.nav_area{
		width: 100%;
		margin: 10px auto;
	}
	.nav_area li{
		float: left;
		width: 16%;
		border-right: solid 1px ;
		margin-bottom: 10px;
	}
	.nav_area li:first-child{ border-left: 1px solid; }
	.nav_area a{
		display: block;
		width: 100%;
		padding: 10px 2px;
		font-weight: bold;
		font-size: 0.8vw;
	}
	.nav_area a:hover{
		background-image: url("../images/nav_back.png");
		transition: 2.0s ;
	}

}


/* 製品詳細エリア　*/

/* 1280px〜：大型PC
------------------------------ */
.area100 {
	background: linear-gradient(#f1f0f0, #c1bebd);
	overflow: hidden;
	padding-bottom: 150px;
}

/*［共通］カテゴリーボックス*/
.product_box{
	width: 950px;
	height: 620px;
	background-color: #fff;
	margin: 100px auto 0;
	position: relative;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
}

.souatsu{
	width: 150px;
	position: absolute;
	top:-50px;
	left: -50px;
}

/*［共通］左エリア*/
.left_image{
	float: left;
	width: 280px;
	margin-top: 50px;
	margin-left: 50px;
}
.product_image{ width: 100%;}
.cross_section{ 
	width: 90%;
	margin: 10px auto 0;
}

.quality{ 
	width: 100%;
	margin: 30px auto 0;
}
.quality2{
	width: 60%;
	margin: 30px auto 0;
}

/*［共通］右エリア*/
.right_detail{
	float: right;
	width: 560px;
}
.detail_title{
	text-align: left;
	font-size: 3rem;
	margin-top: 80px;
	margin-left: 10px;
	line-height: 40px;
}
.product_logo_h{ 
	margin-top: 20px; 
	text-align: left;
}
.product_logo{ 
	border-bottom: solid 1px;
	width: 90%;
}
.product_logo3{
	border-bottom: solid 1px;
	width: 70%;
}
.product_logo4{
	width: 70%;
}
.product_logo5{
		width: 50%;
	}
.point{
	margin-top: 20px; 
	list-style: none;
	text-align: left;
	font-size: 1.8rem;
	line-height: 30px;
}
.point li::before{
	content: '● ';
	color: #b2be4d;
}

.spec{
	text-align: left;
	font-size: 1.8rem;
	line-height: 30px;
	margin-top: 30px;
	border-collapse: separate;
	border-spacing: 0 10px; 
}
.spec th{
	background-color: #7cb3ba;
	padding: 0 10px;
	text-align: center;
}
.spec td{
	background-color: #e6e6e6;
	padding: 0 10px
}

/*［共通］カテゴリーボックス*/
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
.product_box2a{
	width: 445px;
	height: 460px;
	background-color: #fff;
	float: left;
	margin: 100px auto 0;
	position: relative;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
}
.product_box2b{
	width: 445px;
	height: 460px;
	background-color: #fff;
	float: right;
	margin: 100px auto 0;
	position: relative;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
}
.souatsu2{
	width: 100px;
	position: absolute;
	top:-40px;
	left: -40px;
}
.product_logo_h2{
	width: 85%;
	position: absolute;
	top: 30px;
	left: 50px;
}
.product_half{
	width: 75%;
	position: absolute;
	top: 85px;
	left: 60px;
}


/*［共通］左エリア*/
.left_image2{
	float: left;
	width: 150px;
	margin-top: 50px;
	margin-left: 20px;
}
.product_image_l2{ 
	width: 90%;
	margin-top: 90px;
}
.product_image_s2{ 
	width: 90%;
	margin-top: 90px;
}

/*［共通］右エリア*/
.right_detail2{
	float: right;
	width: 260px;
	margin-top: 110px;
}
.spec2{
	text-align: left;
	font-size: 1.8rem;
	line-height: 30px;
	margin-top: 30px;
	border-collapse: separate;
	border-spacing: 0 10px; 
}
.spec2 th{
	display: block;
	width: 100%;
	background-color: #7cb3ba;
	padding: 0 10px;
	text-align: center;
}
.spec2 td{
	display: block;
	width: 100%;
	background-color: #e6e6e6;
	padding: 0 10px
}

/*スペース*/
#sj48{ 
	display: block;
	width: 100%;
	height: 150px;
}
#sj48w{ 
	display: block;
	width: 100%;
	height: 150px;
}
#sj36{ 
	display: block;
	width: 100%;
	height: 150px;
}
#sjm2{ 
	display: block;
	width: 100%;
	height: 150px;
}
#j6{ 
	display: block;
	width: 100%;
	height: 150px;
}

#j10{ 
	display: block;
	width: 100%;
	height: 150px;
}
#rakuraku{ 
	display: block;
	width: 100%;
	height: 150px;
}


/* 960px〜1279px：小型PC
------------------------------ */
@media (min-width:960px) and (max-width:1279px) {
	.area100 {
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: hidden;
		padding-bottom: 150px;
	}

	/*［共通］カテゴリーボックス*/
	.product_box{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin: 100px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	}
	.product_box:before{
		content: '';
		display: block;
		padding-top: 75%;
	}

	.souatsu{
		width: 15%;
		position: absolute;
		top:-50px;
		left: -50px;
	}

	/*［共通］左エリア*/
	.left_image{
		float: left;
		width: 30%;
		top: 50px;
		left: 20px;
		position: absolute;
	}
	.product_image{ width: 100%;}
	.cross_section{ 
		width: 90%;
		margin: 10px auto 0;
	}
	.quality{ 
		width: 80%;
		margin: 30px auto 0;
	}
	.quality2{
		width: 60%;
		margin: 30px auto 0;
	}

	/*［共通］右エリア*/
	.right_detail{
		width: 55%;
		position: absolute;
		top: 50px;
		right:20px;
	}
	.detail_title{
		text-align: left;
		font-size: 2.5vw;
		margin-top: 10%;
		margin-left: 10px;
		line-height: 40px;
	}
	.product_logo_h{ 
		margin-top: 2%; 
		text-align: left;
	}
	.product_logo{ 
		border-bottom: solid 1px;
		width: 90%;
	}
	.product_logo3{
		border-bottom: solid 1px;
		width: 70%;
	}
	.product_logo4{
		width: 70%;
	}
	.product_logo5{
		width: 50%;
	}
	.point{
		margin: 20px 20px 0 0; 
		list-style: none;
		text-align: left;
		font-size: 1.6rem;
		line-height: 30px;
	}
	.point li::before{
		content: '● ';
		color: #b2be4d;
	}

	.spec{
		width: 100%;
		text-align: left;
		font-size: 1.6rem;
		line-height: 25px;
		margin-top: 2%;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec th{
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
		font-size: 1.4rem;
	}
	.spec td{
		background-color: #e6e6e6;
		padding: 0 10px;
		font-size: 1.4rem;
	}

	/*［共通］カテゴリーボックス*/
	.clearfix::after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.product_box2a{
		width: 47%;
		height: auto;
		background-color: #fff;
		float: left;
		margin: 100px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.product_box2a:before{
		content: '';
		display: block;
		padding-top: 110%;
	}
	.product_box2b{
		width: 47%;
		height: auto;
		background-color: #fff;
		float: right;
		margin: 100px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.product_box2b:before{
		content: '';
		display: block;
		padding-top: 110%;
	}
	.souatsu2{
		width: 100px;
		position: absolute;
		top:-40px;
		left: -40px;
	}
	.product_logo_h2{
		width: 80%;
		position: absolute;
		top: 30px;
		left: 50px;
	}
	.product_half{
		width: 70%;
		position: absolute;
		top: 85px;
		left: 60px;
	}
	

	/*［共通］左エリア*/
	.left_image2{
		float: left;
		width: 25%;
		position: absolute;
		top: 20px;
		left: 10px;
	}
	.product_image_l2{ width: 90%; }
	.product_image_s2{ width: 90%; }

	/*［共通］右エリア*/
	.right_detail2{
		width: 60%;
	position: absolute;
		top: 5px;
		right: 15px;
	}
	.spec2{
		width: 100%;
		text-align: left;
		font-size: 1.5vw;
		line-height: 160%;
		margin-top: 30px;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec2 th{
		display: block;
		width: 100%;
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
	}
	.spec2 td{
		display: block;
		width: 100%;
		background-color: #e6e6e6;
		padding: 0 10px;
		text-align: center;
	}
	/*スペース*/
	#sj48{ 
		display: block;
		width: 100%;
		height: 140px;
	}
	#sj48w{ 
		display: block;
		width: 100%;
		height: 140px;
	}
	#sj36{ 
		display: block;
		width: 100%;
		height: 140px;
	}
	#sjm2{ 
		display: block;
		width: 100%;
		height: 140px;
	}
	#j6{ 
		display: block;
		width: 100%;
		height: 140px;
	}

	#j10{ 
		display: block;
		width: 100%;
		height: 140px;
	}
	#rakuraku{ 
		display: block;
		width: 100%;
		height: 140px;
	}

}

/* 600px〜959px：タブレット
------------------------------ */
@media (min-width:600px) and (max-width:959px) {
	.area100 {
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: hidden;
	}

	/*［共通］カテゴリーボックス*/
	.product_box{
		width: 100%;
		padding: 3% 0;
		background-color: #fff;
		margin: 100px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	}

	.souatsu{
		width: 15%;
		position: absolute;
		top:-30px;
		left: -30px;
	}

	/*［共通］左エリア*/
	.left_image{
		float: left;
		width: 30%;
		margin-top: 30px;
		margin-left: 15px;
	}
	.product_image{ width: 100%;}
	.cross_section{ 
		width: 90%;
		margin: 10px auto 0;
	}
	.quality{ 
		width: 90%;
		margin: 30px auto 0;
	}
	.quality2{
		width: 60%;
		margin: 30px auto 0;
	}

	/*［共通］右エリア*/
	.right_detail{
		float: right;
		width: 57%;
		margin-right: 5%;
	}
	.detail_title{
		text-align: left;
		font-size: 2.8vw;
		margin-top: 10%;
		margin-left: 10px;
		line-height: 150%;
	}
	.product_logo_h{ 
		margin-top: 2%; 
		text-align: left;
	}
	.product_logo{ 
		border-bottom: solid 1px;
		width: 90%;
	}
	.product_logo3{
		border-bottom: solid 1px;
		width: 70%;
	}
	.product_logo4{
		width: 70%;
	}
	.product_logo5{
		width: 50%;
	}
	.point{
		margin: 20px 20px 0 0; 
		list-style: none;
		text-align: left;
		font-size: 1.5rem;
		line-height: 25px;
	}
	.point li::before{
		content: '● ';
		color: #b2be4d;
	}

	.spec{
		width: 100%;
		text-align: left;
		line-height: 25px;
		margin-top: 2%;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec th{
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
		font-size: 1.4rem;
	}
	.spec td{
		background-color: #e6e6e6;
		padding: 0 10px;
		font-size: 1.4rem;
	}

	/*［共通］カテゴリーボックス*/
	.clearfix::after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.product_box2a{
		width: 47%;
		height: auto;
		padding: 1% 0;
		background-color: #fff;
		float: left;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.product_box2b{
		width: 47%;
		height: auto;
		padding: 1% 0;
		background-color: #fff;
		float: right;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.souatsu2{
		width: 25%;
		position: absolute;
		top:-30px;
		left: -30px;
	}
	.product_logo_h2{
		width: 80%;
		position: absolute;
		top: 8%;
		left: 12%;
	}
	.product_half{
		width: 70%;
		position: absolute;
		top: 20%;
		left: 12%;
	}
	

	/*［共通］左エリア*/
	.left_image2{
		float: left;
		width: 25%;
		margin-top: 10%;
		margin-left: 20px;
	}
	.product_image_l2{ 
		width: 90%;
		margin-top: 90px;
	}
	.product_image_s2{ 
		width: 90%;
		margin-top: 90px;
	}

	/*［共通］右エリア*/
	.right_detail2{
		float: right;
		width: 55%;
		margin: 25% 20px 0 0;
	}
	.spec2{
		width: 100%;
		text-align: left;
		font-size: 1.2rem;
		line-height: 20px;
		margin-top: 30px;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec2 th{
		display: block;
		width: 100%;
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
	}
	.spec2 td{
		display: block;
		width: 100%;
		background-color: #e6e6e6;
		padding: 0 10px;
		text-align: center;
	}
	
	#sj48{ 
		display: block;
		width: 100%;
		height: 100px;
	}
	#sj48w{ 
		display: block;
		width: 100%;
		height: 100px;
	}
	#sj36{ 
		display: block;
		width: 100%;
		height: 100px;
	}
	#sjm2{ 
		display: block;
		width: 100%;
		height: 100px;
	}
	#j6{ 
		display: block;
		width: 100%;
		height: 100px;
	}

	#j10{ 
		display: block;
		width: 100%;
		height: 100px;
	}
	#rakuraku{ 
		display: block;
		width: 100%;
		height: 100px;
	}

}

/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) { 
	.area100 {
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: hidden;
	}

	/*［共通］カテゴリーボックス*/
	.product_box{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	}
	.product_box:before{
		content:'';
		display: block;
		padding-top: 130%;
	}

	.souatsu{
		width: 15%;
		position: absolute;
		top:-30px;
		left: -30px;
	}

	/*［共通］左エリア*/
	.left_image{
		position: absolute;
		float: left;
		width: 30%;
		top: 0%;
		margin-left: 3%;
	}
	.product_image{ width: 100%;}
	.cross_section{ 
		width: 90%;
		margin: 10px auto 0;
	}
	.quality{ 
		width: 100%;
		margin: 30px auto 0;
	}
	.quality2{
		width: 90%;
		margin: 30px auto 0;
	}

	/*［共通］右エリア*/
	.right_detail{
		position: absolute;
		float: right;
		width: 57%;
		right: 3%;
		top: 1%;
	}
	.detail_title{
		text-align: left;
		font-size: 3vw;
		margin-top: 10%;
		
		line-height: 150%;
	}
	.product_logo_h{ 
		margin-top: 2%; 
		text-align: left;
	}
	.product_logo{ 
		border-bottom: solid 1px;
		width: 90%;
	}
	.product_logo3{
		border-bottom: solid 1px;
		width: 70%;
	}
	.product_logo4{
		width: 70%;
	}
	.product_logo5{
		width: 50%;
	}
	.point{
		margin: 10px 20px 0 0; 
		list-style: none;
		text-align: left;
		font-size: 1.2rem;
		line-height: 20px;
	}
	.point li::before{
		content: '● ';
		color: #b2be4d;
	}

	.spec{
		width: 100%;
		text-align: left;
		line-height: 20px;
		margin-top: 2%;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec th{
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
		font-size: 1.2rem;
	}
	.spec td{
		background-color: #e6e6e6;
		padding: 0 10px;
		font-size: 1.2rem;
	}

	/*［共通］カテゴリーボックス*/
	.clearfix::after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.product_box2a{
		width: 100%;
		height: auto;
		padding-top: 100%;
		background-color: #fff;
		float: none;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.product_box2b{
		width: 100%;
		height: auto;
		padding-top: 100%;
		background-color: #fff;
		float: none;
		margin: 50px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.souatsu2{
		width: 15%;
		position: absolute;
		top:-30px;
		left: -30px;
	}
	.product_logo_h2{
		width: 80%;
		position: absolute;
		top: 8%;
		left: 12%;
	}
	.product_half{
		width: 60%;
		position: absolute;
		top: 20%;
		left: 20%;
	}
	

	/*［共通］左エリア*/
	.left_image2{
		float: left;
		width: 25%;
		position:absolute;
		top:40%;
		left:15%;
		transform: translate(-50%, -50%);
	}
	.product_image_l2{ 
		width: 90%;
	}
	.product_image_s2{ 
		width: 90%;
	}

	/*［共通］右エリア*/
	.right_detail2{
		float: right;
		width: 55%;
		margin: 25% 20px 0 0;
		position:absolute;
		top:30%;
		right:-25%;
		transform: translate(-50%, -50%);
	}
	.spec2{
		width: 100%;
		text-align: left;
		font-size: 1.2rem;
		line-height: 20px;
		margin-top: 30px;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec2 th{
		display: block;
		width: 100%;
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
	}
	.spec2 td{
		display: block;
		width: 100%;
		background-color: #e6e6e6;
		padding: 0 10px;
		text-align: center;
	}

	#sj48{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#sj48w{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#sj36{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#sjm2{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#j6{ 
		display: block;
		width: 100%;
		height: 80px;
	}

	#j10{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#rakuraku{ 
		display: block;
		width: 100%;
		height: 80px;
	}


}

/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	.area100 {
		background: linear-gradient(#f1f0f0, #c1bebd);
		overflow: hidden;
		padding-bottom: 30px;
	}

	/*［共通］カテゴリーボックス*/
	.product_box{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	}
	.product_box:before{
		content: '';
		display: block;
		padding-top: 130%;
		
	}

	.souatsu{
		width: 18%;
		position: absolute;
		top:-10px;
		left: -10px;
	}

	/*［共通］左エリア*/
	.left_image{
		position: absolute;
		float: left;
		width: 30%;
		top: -5%;
		margin-left: 3%;
	}
	.product_image{ width: 100%;}
	.cross_section{ 
		width: 90%;
		margin: 10px auto 0;
	}
	.quality{ 
		width: 100%;
		margin: 10px auto 0;
	}
	.quality2{
		width: 90%;
		margin: 30px auto 0;
	}

	/*［共通］右エリア*/
	.right_detail{
		position: absolute;
		float: right;
		width: 60%;
		right: 2%;
		top: 1%;
	}
	.detail_title{
		text-align: left;
		font-size: 3vw;
		margin-left: 10px;
		margin-top: 10%;
		font-weight: bold;
		line-height: 130%;
	}
	.product_logo_h{ 
		margin-top: 2%; 
		text-align: left;
	}
	.product_logo{ 
		border-bottom: solid 1px;
		width: 90%;
	}
	.product_logo3{
		border-bottom: solid 1px;
		width: 70%;
	}
	.product_logo4{
		width: 70%;
	}
	.product_logo5{
		width: 50%;
	}
	.point{
		margin: 10px 20px 0 0; 
		list-style: none;
		text-align: left;
		font-size: 0.5px;
		line-height: 15px;
	}
	.point li::before{
		content: '● ';
		color: #b2be4d;
	}

	.spec{
		width: 100%;
		text-align: left;
		line-height: 13px;
		margin-top: 2%;
		border-collapse: separate;
		border-spacing: 0 5px; 
	}
	.spec th{
		background-color: #7cb3ba;
		padding: 0 5px;
		text-align: center;
		font-size: 1px;
	}
	.spec td{
		background-color: #e6e6e6;
		padding: 0 5px;
		font-size: 1px;
	}

	/*［共通］カテゴリーボックス*/
	.clearfix::after{
	  content: "";
	  display: block;
	  clear: both;
	}
	.product_box2a{
		width: 100%;
		height: auto;
		padding-top: 100%;
		background-color: #fff;
		float: none;
		margin: 30px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.product_box2b{
		width: 100%;
		height: auto;
		padding-top: 100%;
		background-color: #fff;
		float: none;
		margin: 30px auto 0;
		position: relative;
		box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15)
	}
	.souatsu2{
		width: 17%;
		position: absolute;
		top:-15px;
		left: -15px;
	}
	.product_logo_h2{
		width: 80%;
		position: absolute;
		top: 8%;
		left: 12%;
	}
	.product_half{
		width: 60%;
		position: absolute;
		top: 20%;
		left: 20%;
	}
	

	/*［共通］左エリア*/
	.left_image2{
		float: left;
		width: 25%;
		position:absolute;
		top:30%;
		left:10%;
		transform: translate(-50%, -50%);
	}
	.product_image_l2{ 
		width: 90%;
	}
	.product_image_s2{ 
		width: 90%;
	}

	/*［共通］右エリア*/
	.right_detail2{
		float: right;
		width: 55%;
		margin: 25% 20px 0 0;
		position:absolute;
		top:30%;
		right:-25%;
		transform: translate(-50%, -50%);
	}
	.spec2{
		width: 100%;
		text-align: left;
		font-size: 1rem;
		line-height: 15px;
		margin-top: 15px;
		border-collapse: separate;
		border-spacing: 0 10px; 
	}
	.spec2 th{
		display: block;
		width: 100%;
		background-color: #7cb3ba;
		padding: 0 10px;
		text-align: center;
	}
	.spec2 td{
		display: block;
		width: 100%;
		background-color: #e6e6e6;
		padding: 0 10px;
		text-align: center;
	}
	#sj48{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#sj48w{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#sj36{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#sjm2{ 
		display: block;
		width: 100%;
		height: 50px;
	}
	#j6{ 
		display: block;
		width: 100%;
		height: 80px;
	}

	#j10{ 
		display: block;
		width: 100%;
		height: 80px;
	}
	#rakuraku{ 
		display: block;
		width: 100%;
		height: 80px;
	}

}


/* 製品詳細エリア▲　*/

/* 使用例エリア　*/
.use_text{ margin: 50px 0;}
.use_image{ 
	margin-bottom: 150px; 
	width: 90%;
}

/* アピール　*/

/* 1280px〜：大型PC
------------------------------ */
.appeal_wapper{ 
	background: #e6e6e6;
	padding: 150px 0;
}
.appeal_item{
	width: 90%;
	margin-bottom: 80px;
}



/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) { 
	.appeal_wapper{ 
		background: #e6e6e6;
		padding: 50px 0;
	}
	.appeal_item{
		width: 90%;
		margin-bottom: 30px;
	}

}

/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	.appeal_wapper{ 
		background: #e6e6e6;
		padding: 20px 0;
	}
	.appeal_item{
		width: 95%;
		margin-bottom: 30px;
	}


}

/* 取り扱い注意　*/

/* 1280px〜：大型PC
------------------------------ */
#caution h1{
	display: inline-block;
	width: 300px;
	margin: 150px 0 50px;
	padding: 10px 0;
	font-size: 2rem;
	border-top: 1px solid;
	border-bottom: 1px solid;
}
.width960px{
	width: 960px;
	margin: 0 auto;
	text-align: left;
	font-size: 1.6rem;
	line-height: 25px;
	padding-bottom: 150px;
}
.width960px h2{
	margin-top: 50px;
	margin-bottom: 10px;
	font-size: 1.8rem;
	background-color:rgba(249,215,215,1.00);
	padding: 10px;
}
.ban:before{
	font-family: "Font Awesome 5 Free";
  	content: '\f05e';
  	font-weight: 900;
	font-size: 3rem;
	color: #C90003;
	vertical-align:middle;
}
.exclamation-circle:before{
	font-family: "Font Awesome 5 Free";
  	content: '\f06a';
  	font-weight: 900;
	font-size: 3rem;
	color: #C90003;
	vertical-align:middle;
}
.text:before{ 
	content: '・';
	font-size: 2rem;
}
.text{
	padding-left: 2rem;
	text-indent: -2rem;
}

/* 960px〜1279px：
------------------------------ */
@media (min-width:600px) and (max-width:1279px){
	#caution h1{
		display: inline-block;
		width: 300px;
		margin: 150px 0 50px;
		padding: 10px 0;
		font-size: 2rem;
		border-top: 1px solid;
		border-bottom: 1px solid;
	}
	.width960px{
		width: 80%;
		margin: 0 auto;
		text-align: left;
		font-size: 1.6rem;
		line-height: 25px;
		padding-bottom: 150px;
	}
	.width960px h2{
		margin-top: 50px;
		margin-bottom: 10px;
		font-size: 1.8rem;
		background-color:rgba(249,215,215,1.00);
		padding: 10px;
	}
	.ban:before{
		font-family: "Font Awesome 5 Free";
		content: '\f05e';
		font-weight: 900;
		font-size: 3rem;
		color: #C90003;
		vertical-align:middle;
	}
	.exclamation-circle:before{
		font-family: "Font Awesome 5 Free";
		content: '\f06a';
		font-weight: 900;
		font-size: 3rem;
		color: #C90003;
		vertical-align:middle;
	}
	.text:before{ 
		content: '・';
		font-size: 2rem;
	}
	.text{
		padding-left: 2rem;
		text-indent: -2rem;
	}

}


/* 480px〜599px：SP横
------------------------------ */
@media (min-width:480px) and (max-width:599px) { 
	#caution h1{
		display: inline-block;
		width: 200px;
		margin: 150px 0 50px;
		padding: 10px 0;
		font-size: 1.5rem;
		border-top: 1px solid;
		border-bottom: 1px solid;
	}
	.width960px{
		width: 80%;
		margin: 0 auto;
		text-align: left;
		font-size: 1.4rem;
		line-height: 20px;
		padding-bottom: 150px;
	}
	.width960px h2{
		margin-top: 50px;
		margin-bottom: 10px;
		font-size: 1.5rem;
		background-color:rgba(249,215,215,1.00);
		padding: 10px;
	}
	.ban:before{
		font-family: "Font Awesome 5 Free";
		content: '\f05e';
		font-weight: 900;
		font-size: 2.5rem;
		color: #C90003;
		vertical-align:middle;
	}
	.exclamation-circle:before{
		font-family: "Font Awesome 5 Free";
		content: '\f06a';
		font-weight: 900;
		font-size: 3rem;
		color: #C90003;
		vertical-align:middle;
	}
	.text:before{ 
		content: '・';
		font-size: 2rem;
	}
	.text{
		padding-left: 2rem;
		text-indent: -2rem;
	}

}

/* 〜479px：SP縦
------------------------------ */
@media (max-width:479px) { 
	#caution h1{
		display: inline-block;
		width: 200px;
		margin: 80px 0 50px;
		padding: 10px 0;
		font-size: 1.5rem;
		border-top: 1px solid;
		border-bottom: 1px solid;
	}
	.width960px{
		width: 90%;
		margin: 0 auto;
		text-align: left;
		font-size: 1.3rem;
		line-height: 20px;
		padding-bottom: 150px;
	}
	.width960px h2{
		margin-top: 50px;
		margin-bottom: 10px;
		font-size: 1.4rem;
		background-color:rgba(249,215,215,1.00);
		padding: 10px;
	}
	.ban:before{
		font-family: "Font Awesome 5 Free";
		content: '\f05e';
		font-weight: 900;
		font-size: 2.5rem;
		color: #C90003;
		vertical-align:middle;
	}
	.exclamation-circle:before{
		font-family: "Font Awesome 5 Free";
		content: '\f06a';
		font-weight: 900;
		font-size: 3rem;
		color: #C90003;
		vertical-align:middle;
	}
	.text:before{ 
		content: '・';
		font-size: 2rem;
	}
	.text{
		padding-left: 2rem;
		text-indent: -2rem;
	}

}




/*---- フッター ------*/
@media( min-width:1130px ){
	footer{ background-color: #161464; }
	footer:after{
		content: '';
		display: block;
		clear: both;
	}
	.footer_left{
		width: 30%;
		float: left;
	}

	.footer_left h1{ font-size: 2rem; }
	.footer_logo{
		float: left;
		margin: 150px 0 0 150px;
		color: #fff;
	}
	.address_area{
		color: #fff;
		font-style: normal;
		margin-left: 150px ;
		padding-top: 50px;
		text-align: left;
		clear: both;
	}
	.address_area:after{
		content: '';
		display: block;
		clear: both;
	}
	.co_name{
		font-size: 1.4rem;
		margin-bottom: 10px;
		font-weight: 500;
	}
	.address{
		line-height: 20px;
	}
	.web{ color: #FFF;}
	.web:hover{ color: #686868}

	.footer_right{
		float: right;
		width: 60%;
		margin: 150px 30px 30px 0; 
	}
	.footer_nav{
		list-style: none;
		text-align: center;
	}
	.footer_nav li{ 
		display: inline;
		margin-left: 10px;
		padding-left: 10px;
		font-size: 1.3rem;
		border-left: solid 1px #fff;
	}
	.footer_nav li:last-child{
		border-right: solid 1px #fff;
		padding: 0 8px;
	}
	.footer_nav a { color: #fff; }
	.footer_nav a:hover { color: #bebebe; }

	.footer_yellow { color: #ffd900 !important; }
	.footer_yellow:hover { color: #bebebe !important; }


	/*----▼ コピーライト ▼-------*/
	.copyright{ 
		background-color: #161464; 
		padding: 50px 0 100px 150px ;
		text-align: left;
		color: #fff;

	}
	small{ font-size: 1rem; }
}


/*1130px以下フッター無し*/
@media( min-width:600px ) and ( max-width:1129px ){
	.footer_nav{ display: none; }
	footer{ background-color: #161464; }
	footer:after{
		content: '';
		display: block;
		clear: both;
	}
	.footer_left{
		width: 80%;
		float: none;
		margin: 0 auto;
		padding: 100px 0 50px;
	}
	.footer_left:after{
		content: '';
		display: block;
		clear: both;
	}

	.footer_left h1{ 
		text-align: left;
		font-size: 2rem;
		margin: 0;
	}
	.footer_logo{
		float: none;
		margin: 0;
		color: #fff;
	}
	.address_area{
		margin-left: 0;
		color: #fff;
		font-style: normal;
		padding-top: 50px;
		text-align: left;
		clear: both;
	}
	.address_area:after{
		content: '';
		display: block;
		clear: both;
		margin: 0;
	}
	.co_name{
		font-size: 1.4rem;
		margin-bottom: 10px;
		font-weight: bold;
	}
	.address{
		line-height: 20px;
	}
	.web{ color: #FFF;}
	.web:hover{ color: #686868}

	.footer_right{
		float: none;
		margin: 0; 
	}
	.footer_nav{
		list-style: none;
		text-align: center;
	}
	
	/*----▼ コピーライト ▼-------*/
	.copyright_area{ 
		width: 80%;
		margin: 0 auto;
	}
	.copyright{ 
		margin: 0;
		background-color: #161464; 
		padding: 0 0 50px;
		text-align: left;
		color: #fff;

	}
	small{ font-size: 1rem; }
}


@media( max-width:599px ){
	.footer_nav{ display: none; }
	footer{ background-color: #161464; }
	footer:after{
		content: '';
		display: block;
		clear: both;
	}
	.footer_left{
		width: 80%;
		float: none;
		margin: 0 auto;
		padding: 50px 0 50px;
	}
	.footer_left:after{
		content: '';
		display: block;
		clear: both;
	}

	.footer_left h1{ 
		font-size: 1.5rem;
		margin: 0;
		text-align: left;
	}
	.footer_logo{
		float: none;
		margin: 0;
		color: #fff;
	}
	.address_area{
		color: #fff;
		font-style: normal;
		padding-top: 30px;
		text-align: left;
		clear: both;
	}
	.address_area:after{
		content: '';
		display: block;
		clear: both;
		margin: 0;
	}
	.co_name{
		font-size: 1.2rem;
		margin-bottom: 10px;
		font-weight: bold;
	}
	.address{
		line-height: 20px;
		font-size: 1.2rem;
	}
	.web{ 
		color: #FFF;
		font-size: 1.2rem;
	}
	.web:hover{ color: #686868}

	.footer_right{
		float: none;
		margin: 0; 
	}
	.footer_nav{
		list-style: none;
		text-align: center;
	}
	
	/*----▼ コピーライト ▼-------*/
	.copyright_area{ 
		width: 80%;
		margin: 0 auto;
	}
	.copyright{ 
		margin: 0;
		background-color: #161464; 
		padding: 0 0 30px;
		text-align: left;
		color: #fff;

	}
	small{ font-size: 10px; }
}