@charset "UTF-8";

#main_content > .page_name{ background-image: url(../reform/image/title_bg.jpg); }
#main_content > .page_name > .overlay{ background-image: url(../reform/image/title_overlay.png); }


/*親ページのcss*/
/*-------------------------------------------*/
#main_content > .content.root > .head.default > span{ background-image: url(../reform/image/root/h01.png); width: 451px; height: 61px; }
#main_content > .content.root > .navi_wrap{ width: 940px; overflow: hidden; }
#main_content > .content.root > .navi_wrap > li{ width: 430px; height: 210px; background-position: 0 bottom; background-repeat: no-repeat; float: left; margin: 35px 40px 0 0; }
#main_content > .content.root > .navi_wrap > li > a{ display: block; width: 100%; height: 100%; background-position: 0 0; background-repeat: no-repeat; transition: opacity 0.25s linear; }
#main_content > .content.root > .navi_wrap > li > a:hover{ opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; }
/*-------------------------------------------*/


/*子ページのcss*/
/*-------------------------------------------*/
#main_content > .content p{ font-size: 14px; }
#main_content > .content.child > .construction_point{ overflow: hidden; margin-top: 20px; }
#main_content > .content.child > .construction_point > *{ font-size: 14px; line-height: 22px; }
#main_content > .content.child > .construction_point > .frame{ float: left; width: 80px; text-align: center; background-color: #837069; color: #ffffff; }
#main_content > .content.child > .construction_point > .txt{ padding-left: 90px; }
#main_content > .content.child > .article.exp{ border-top: 1px solid #bfbfbf; position: relative; margin-top: 50px; padding-top: 35px; }
#main_content > .content.child > .article.process{ border: 1px dashed #cbc5be; position: relative; margin-top: 50px; padding-top: 10px; }
#main_content > .content.child > .article.exp > .head{ font-size: 18px; line-height: 22px; color: #5e4936; font-weight: bold; background-color: #ffffff; position: absolute; top: -11px; padding-right: 10px; }
#main_content > .content.child > .article.process > .head{ background: url(../reform/image/child/h01.png) 0 0 no-repeat; width: 214px; height: 48px; position: absolute; left: 8px; top: -26px; }
#main_content > .content.child > .article > .panel{ padding: 9px 0 24px 24px; position: relative; }
#main_content > .content.child > .article.exp > .panel{ background-color: #f3f2f0; }
#main_content > .content.child > .article > .panel.item_center{ padding-right: 24px; text-align: center; }
#main_content > .content.child > .article > .panel.before > .icon{ position: absolute; left: -10px; top: -12px; }
#main_content > .content.child > .article > .panel.after > .icon{ position: absolute; left: -10px; top: -18px; }
#main_content > .content.child > .article > .panel > .item{ display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
#main_content > .content.child > .article > .panel.grid-2-1 > .item{ width: 416px; margin-right: 20px; margin-top: 15px; }
#main_content > .content.child > .article > .panel.grid-3-1 > .item{ width: 274px; margin-right: 15px; margin-top: 15px; }
#main_content > .content.child > .article > .panel.grid-4-1 > .item{ width: 202px; margin-right: 14px; margin-top: 15px; }
#main_content > .content.child > .article > .panel.item_center > .item{ margin-right: 0; text-align: left; }
#main_content > .content.child > .article > .panel.before > .item > .photo{ padding: 2px; background-color: #867b68; }
#main_content > .content.child > .article > .panel.after > .item > .photo{ padding: 2px; background-color: #802a00; }
#main_content > .content.child > .article.process > .panel > .item > .photo{ padding: 2px; background-color: #867b68; }
#main_content > .content.child > .article > .panel > .item > .comment{ margin-top: 7px; }
#main_content > .content.child > .article.process > .panel > .caption{ padding-right: 24px; }
#main_content > .content.child > .article > .separator{ padding: 15px 0; }
#main_content > .content.child > .goto_list_btn{ display: block; width: 290px; margin: 40px auto 0; font-size: 14px; line-height: 20px; font-weight: bold; color: #ffffff; padding: 17px 0; text-decoration: none; text-align: center; position: relative;
	background: #604620;
	background-image: -moz-linear-gradient(top, #604620 0%, #3c2a1e 100%);
	background-image: -webkit-linear-gradient(top, #604620 0%,#3c2a1e 100%);
	background-image: linear-gradient(to bottom, #604620 0%,#3c2a1e 100%);
}
#main_content > .content.child > .goto_list_btn::after{ position: absolute; left: 1px; right: 1px; top: 1px; width: auto; height: 1px; content: ''; background-color: #ffffff; opacity: 0.3; }
#main_content > .content.child > .goto_list_btn::before{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: #ffffff; opacity: 0; transition: opacity 0.25s linear; }
#main_content > .content.child > .goto_list_btn:hover{ background: #3c2a1e\9; }
#main_content > .content.child > .goto_list_btn:not(:target):hover{ background: #604620\9; background-image: linear-gradient(to bottom, #604620 0%,#3c2a1e 100%)\9; }
#main_content > .content.child > .goto_list_btn:hover::before{ opacity: 0.2; }
/*-------------------------------------------*/








/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (max-width: 480px){ /*480px以下のcss*/


	#main_content > .content > .head.default > span{ background-image: none!important; width: auto!important; height: auto!important; }

	/*親ページのcss*/
	/*-------------------------------------------*/
	#main_content > .content.root > .navi_wrap{ width: 100%; }
	#main_content > .content.root > .navi_wrap > li{ width: 100%; height: 0; padding-top: 48.84%; float: none; margin: 15px 0 0; background-size: 100% auto; position: relative; }
	#main_content > .content.root > .navi_wrap > li > a{ position: absolute; left: 0; top: 0; background-size: 100% auto; }
	/*-------------------------------------------*/


	/*子ページのcss*/
	/*-------------------------------------------*/
	#main_content > .content.child{ padding-bottom: 40px; }
	#main_content > .content.child > .construction_point{ margin-top: 15px; }
	#main_content > .content.child > .construction_point > .frame{ float: none; width: 100%; }
	#main_content > .content.child > .construction_point > .txt{ padding-left: 0; margin-top: 7px; }
	#main_content > .content.child > .article.exp{ margin-top: 25px; padding-top: 0; }
	#main_content > .content.child > .article.process{ margin-top: 80px; padding-top: 0; }
	#main_content > .content.child > .article.exp > .head{ position: static; margin: 20px 0 25px; }
	#main_content > .content.child > .article.process > .head{ background: none; width: 100%; height: auto; position: absolute; left: 0; top: auto; bottom: 100%; text-indent: 0; white-space: normal; text-align: center; background-color: #dedbc3; font-size: 16px; line-height: 20px; padding: 9px 0; margin-bottom: 15px; color: #5e4936; }
	#main_content > .content.child > .article > .panel{ padding: 9px 10px 24px 10px; position: relative; text-align: center; }
	#main_content > .content.child > .article > .panel.item_center{ padding-right: 10px; }
	#main_content > .content.child > .article > .panel.grid-2-1 > .item{ width: auto; margin: 15px 5px 0; max-width: 416px; }
	#main_content > .content.child > .article > .panel.grid-3-1 > .item{ width: auto; margin: 15px 5px 0; max-width: 274px; }
	#main_content > .content.child > .article > .panel.grid-4-1 > .item{ width: auto; margin: 15px 5px 0; max-width: 202px; }
	#main_content > .content.child > .article > .panel > .item > .comment{ text-align: left; }
	#main_content > .content.child > .article.process > .panel > .caption{ padding-right: 0; }
	/*-------------------------------------------*/

}