@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : layout.css
 Author     : 
 Style Info : 共通css設定
=================================================================== */

/* 共通　*/

/* スマホ表示切り替え */
.pc{ display:inline;}
.smp{ display:none;}

h2{ font-size:36px; font-weight:bold; line-height:1.3em; text-align:center; color:#7b4c00; margin-bottom:60px;}
h3{ padding:15px 0 3px 3px; border-bottom:#977E6E 1px solid; color:#7F7F7F; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:24px; margin-bottom:15px; font-weight:600;}
.h2_text{ text-align:center;}

span.small {font-size: 70%;}

.col_2 img,.col_3 img,.col_4 img,.col_5 img{ width:100%;}

/* ボックス横並び */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 100%;
	}
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}

.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}
.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}
.col_5 > div > div{
	position: relative;
	overflow: hidden
}
@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}
@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 33.33333%;
	}
}

/* ボタン */
.btn {
  position: relative;
  width:100%;
  display: inline-block;
  margin:15px 0;
  padding: 0.3em 1.5em;
  text-decoration: none;
  text-align:center;
  color: #FFF;
  background: #e53451;/*色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn2 {
  position: relative;
  width:100%;
  display: inline-block;
  margin:0 0 15px;
  padding: 0.3em 1.5em;
  text-decoration: none;
  text-align:center;
  color: #FFF;
  background: #25A27C;/*色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}


a.btn,a.btn2{ color:#fff; font-weight:bold;}

.more{ border:#7b4c00 3px solid; border-radius:30px; font-size:24px; font-weight:400; color:#7b4c00 !important; padding:12px 90px;}
.more a{ color:#7b4c00 !important;}

#gFooter .kameiten{ margin:15px auto;}
#gFooter .kameiten img{ margin-right:8px;}

/*上部イメージ*/
.promise .head_img{ width:100%; height:160px; background:url(../img/promise/head_img.png); background-size:cover;}
.salon .head_img{ width:100%; height:160px; background:url(../img/salon/head_img.png); background-size:cover;}
.teiki .head_img{ width:100%; height:160px; background:url(../img/teiki/head_img.png); background-size:cover;}
.mono .head_img{ width:100%; height:160px; background:url(../img/mono/head_img.png); background-size:cover;}
.item .head_img{ width:100%; height:160px; background:url(../img/item/head_img.png); background-size:cover;}
.company .head_img{ width:100%; height:160px; background:url(../img/company/head_img.png); background-size:cover;}


.head_btn{ width:200px; float:right;}
.head_btn div{ padding:0;}

#top .recommend{ background-image:url(../img/com/back_dairiseki.png); background-size:cover; border-bottom: 1px solid #f0dfac;}
.recommend .col_2 img,.recommend .col_3 img {box-shadow: 0px 0px 6px 3px #ede2cc;}
#top .item_list{ background:#fff9e7; text-align:center; background-image:url(../img/top/list_back.jpg); background-size:cover; background-repeat:no-repeat;}
#top .item_list figure{ margin:0 0 15px; box-shadow:0px 0px 6px 3px #ede2cc;}
#top span.item_cat{ background:#a7801e; color:#fff; padding:3px 15px; border-radius:15px;}
#top .item_list figcaption{ margin:8px 0 0; color:#7b4c00; font-weight:bold;}

#top .info{ background:#ffefbf;}
#top .textbox{ background:#fff; padding:20px;}
#top h4{ font-family:'ヒラギノ角ゴ Pro W5'; color:#977e6e; font-weight:bold; font-size:22px; margin:15px 0;}


#sub h3 { width:80%; margin: 30px auto 15px; border-bottom: none; color: #977E6E; font-size: 20px; font-weight: bold; font-family:"Sawarabi Mincho";}
#sub section p {width: 80%; margin: 0 auto;}



/* トップ */
#top .topnav .inner{ 
	background:#ECECEC;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	}
#top .topnav .inner h3{ background-image:url(../img/com/h3back.png); background-repeat:repeat-x; 
	text-align:center; font-weight:bold; color:#fff; font-size:18px;
	height:32px;
    -webkit-border-top-left-radius: 10px;  
    -webkit-border-top-right-radius: 10px; 
	-moz-border-radius-topleft: 10px;  
    -moz-border-radius-topright: 10px; 
	}
#top .topnav .inner p{     font-size: 13px;
    margin-top: 8px;
    line-height: 1.35em;
    padding-right: 6px;
}

#top .list_ttl{padding-top: 60px; margin-bottom: 60px; display: block;}

#top .newsBox{background: #FFF9E7; padding: 10px 3%; /*border-top: solid 2px #E53451; border-bottom: solid 2px #E53451;*/ margin-top: -5px;}
#top .newsBox div{border:  solid 2px #E53451; padding: 20px;}
#top .newsTtl{font-size: 24px; color: #E53451; margin-bottom: 20px; line-height: 1.4;}


body#sub{ background-image:url(../img/com/back_pat.png);}
#sub #container{box-shadow: 0px 6px 3px #ede2cc;}
#sub h2{margin-top: 40px;}
#sub .boxtext p{ width:100%;}
#sub .boxtext h3{color:#a7801e; font-size:32px; margin:30px 0 15px;}
#sub .boxtext h4{color:#977E6E; font-size:22px; margin:30px 0;}
.c_g{ text-align:center !important; color:#6F7579; font-size:32px; font-weight:normal !important; line-height:1.3em; margin:50px auto !important;}
#sub #container{ background:#fff;}


/*　約束　*/
.promise .cont1, .promise .cont2{padding-bottom: 60px;}

/*　モノづくり哲学　*/
.mono .cont1{padding-bottom: 60px;}
.mono .cont1 .col_2{margin-bottom: 80px;}

/*アイテム*/
sup{font-size: 10px; vertical-align:super; }
.item .new{background: #25A27C; color: #fff; font-size: 16px; padding: 2px 5px; margin-right: 10px;}
.sup_txt{font-size: 12px;}
.item .item_img{ width:300px; height:300px; box-shadow: 0px 0px 6px 3px #ede2cc;}
.item .item_text{ width:880px;}
.item .item_btn{ width:200px;}
.item .item_name {
    width: 600px !important;
    padding: 0 10px 10px 20px !important;
	font-size:24px;
}
.item .item_price{ font-size:16px;}
.item a.btn {
    margin: 0 0 15px;
}
p.item_point {
    padding: 15px;
    background: #fff9e7;
width: 90% !important;
    margin: 0 0 15px 20px !important;}
	
p.details {
    width: 90% !important;
    font-size: 14px;
}

#sub.item h3 {
    font-size: 32px;
    padding: 0 !important;
    margin: 60px 0 90px;
    text-align: center;
    width: 100% !important;}

.item_teiki{margin: 60px 0; background: #fcf2f2; padding: 40px 0 20px; border: solid 2px #ecaaa9;}
#sub .item_teiki h3{line-height: 60px; margin: 0 0 20px; display: inline-block;}
.item_teiki img{height: 60px; width: auto; margin-left: 20px; }
.item_teiki a.btn{width: 50%; min-width: 255px; display: block; margin: 20px auto;}

#sub section p.attention{width: 90%; font-size: 14px; margin: 0 30px 20px; color: red;}

/*　定期お届け便　*/
.teiki h4{width: 80%; margin: 0 auto; font-weight: bold; color: #6F7579;}
.teiki .cont2 div p, .teiki .cont3 p{padding: 10px 0 30px;}
.teiki .cont3{padding-bottom: 40px;}
.teiki .cont2 h4{background: #e53451; padding: 15px; color: #fff; font-size: 22px;}
.teiki .cont4>div{width: 80%; margin: 0 auto;}

/*　サロン　*/
#sub .textbox{ background:#FBF9F8; padding:30px;}
#sub .textbox p{ width:100%;}
#sub .textbox h4{ color:#977E6E; font-family:"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important; font-weight:bold;}

/*　プライバシーポリシー　*/
#top .guide p{margin-left: 30px; margin-right: 30px;}

/* 会社概要 */
table{ margin:0 auto;}
th,td{ padding:15px;}
.tbl1 th{ background:#E3F0FB; width:20%; border:#9D9D9D solid 1px; border-left:0; text-align:center;}
.tbl1 td{ background:#fff; border:#9D9D9D solid 1px; border-left:0; border-right:0;}

.tbl2 th{ background:#DFF2FC; width:20%; border:#9D9D9D solid 1px; border-left:0; text-align:center;}
.tbl2 td{ background:#fff; border:#9D9D9D solid 1px; border-left:0; border-right:0;}

#gaiyo .cont_1 .inner_l{ width:680px; height:auto; float:left; font-size:15px;}
#gaiyo .cont_1 .inner_l { margin-right:15px;}
#gaiyo .cont_2 .inner_r{ width:200px; height:auto; float:right; text-align:right;}
#gaiyo .sidenav{ width:340px; height:649px; border:#0089CC 1px solid;
    -webkit-border-radius: 10px;  
	-moz-border-radius: 10px;  
}
#gaiyo .sidenav img{ margin:6px 0;}
#gaiyo .gaiyo_list{ width:590px;padding: 0 10px 0 0 !important;}

#gyomu .cont_1 .inner_l{ width:auto; height:auto; float:left; font-size:15px;}
#gyomu .cont_1 .inner_r{ width:auto; height:auto; float:right; text-align:right;}
#gyomu .photo_txt{ width:560px; padding: 15px 15px 15px 0;}
#gyomu .photo1,#gyomu .photo2,#gyomu .photo3,#gyomu .photo4,#gyomu .photo5{ width:370px;padding: 10px 0 10px 10px;}
#gyomu .photo6{ width: 250px; padding: 10px 0 10px 10px;}
#gyomu .photo6_txt{ width:680px; padding: 10px 10px 10px 0;}
#gyomu .photo1 img,#gyomu .photo2 img,#gyomu .photo3 img,#gyomu .photo4 img,#gyomu .photo5 img,#gyomu .photo6 img{ width:100%;}

#privacy h3{ background:#F0F0F0; font-weight:bold; background-image:url(../img/com/dot.png); background-repeat:no-repeat; background-position: 10px 50%; text-indent:30px;
padding:3px;
 display: -webkit-flex;
 display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	-webkit-justify-content: left; 
	justify-content: left; 
}

#syokai .col_2 > div img{ width:100%;}
#syokai .imgpad_l{ padding:10px 10px 10px 0;}
#syokai .imgpad_r{ padding:10px 0 10px 10px;}
#syokai .kamei_map{ text-align:center;}
#syokai .kamei_map img{ margin-left:-3px;}

.offer{ background:#e1c061; width:80%; margin:30px auto 60px; padding:30px;}
.offer .inner{ background:#fff;}
.offer_img{ width:40% !important; text-align:center;}
.offer_price{ width:60% !important;}
.offer_price table{ margin:0;}
.offer_item_name{ text-align:center; font-size:32px; color:#7b4c00; font-weight:bold; margin:0 auto 30px;}
.pr{ text-align:center; color:#7b4c00; margin:15px auto 30px;;}
.price_tbl th{ font-size:36px;}
span.price_nomal { background: #7b4c00; padding: 8px; color: #fff; margin: 0 15px 0; font-size:16px !important;}
span.price_teiki { background: #027ac7; padding: 8px; color: #fff; margin: 0 15px 0; font-size:16px !important;}

@media screen and (max-width: 768px) {
	#top .newsTxt{text-align: left;}
}

@media screen and (max-width:480px) { 
/*　画面サイズが480pxまではここを読み込む　*/
	
	/* スマホ表示切り替え */
	.pc{ display:none;}
	.smp{ display:inline;}
	
	img{ width:100%;}
	table{ width:95%; margin:0 auto;}
	section{ padding:0;}
	
  
	.imgfix{ width:100%;}
	.img90{width: 90%; margin: 0 auto;}

	
	#container,#wrapper,#container_w,#gFooter{ width:100%; min-width:100%; max-width:100%; padding:0;}
		

	#container,#wrapper,#container_w,#gFooter{ width:100%; min-width:100%; max-width:100%; padding:0;}
	#top .slider{margin-top: 15%;}	
	#top .cont_2 .inner_l,#top .cont_2 .inner_r { width:100%;}
	#top #container{margin-top: 0; padding-bottom: 10px;}
	#top .list_ttl{padding-top: 30px; margin-bottom: 20px;}
	#top .recommend{padding-top: 20px;}
	#top .r_ttl{margin: 20px auto; max-width: 350px;}
	#top .recommend .col_3, #top .info .col_3{margin-bottom: 0;}
	#top span.item_cat{font-size: 14px;}
	#top .recommend figcaption{font-size: 14px;}
	#top .mr_btn{margin: 30px auto 20px;}
	#top .more{font-size: 18px; padding: 7px 18%; }
	#top .item_list .r_ttl img{max-width: 250px;}
	#top .info{padding-top: 40px;}
	#top .info .smp.list_ttl{margin-bottom: 20px !important;}
	#top .info .smp.r_ttl{display: block;}
	#top .info .r_ttl img{max-width: 250px;}
	#top .info h4{font-size: 18px; margin: 0 0 10px;}
	#top .topnav .inner figure {width: 100%; float: none; margin: 0;}
	#top .topnav .inner img{ width:auto;}
	#top .topnav .inner p {font-size: 16px; margin-top: 8px; line-height: 1.5em; padding-right: 0; padding: 0 10px;}

	#top h2 {
		background-image: none;
		background-repeat: no-repeat;
		height: auto;
		text-indent: 0;
		font-weight: 800;
		font-size: 20px;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		/* text-align: center; */
		background-color: #0089cc;
		color: #fff;
		margin-top:-30px;
	}
	#top .newsTtl{font-size: 20px;}
	

	#gaiyo .cont_1 .nav img{ width:auto; margin-top:15px;}
	#gaiyo .cont_1 .inner_l{ width:100%; text-align:left; margin-bottom:15px;}
	#gaiyo .cont_1 .inner_r{ width:100%;}
	#gaiyo .cont_1 .inner_r img{ width:100%;}
	#gaiyo .cont_1 .inner_l img{ margin-left:0 !important;}
	#gaiyo .sidenav{ width:100%; height:auto;}
	#gaiyo .sidenav img{ width:auto !important;}
	#gaiyo .sidenav .logo{ width:100% !important;}
	#gaiyo .gaiyo_list { width:100%;}

	#gyomu .cont_1 .inner_l{ width:100%; text-align:center; margin-bottom:15px;}
	#gyomu .cont_1 .inner_r{ width:100%;}
	#gyomu .cont_1 .inner_l img{ width:50%;}
	#gyomu .photo_txt {width: 100%; padding: 0px; margin:15px 0;}	
	#gyomu .photo_txt img{width: 100%; margin-top:0 !important; margin:15px 0;}	
	#gyomu .photo6 {width: 100%;}
	#gyomu .photo6_txt {width: auto; padding:0;}	
#gyomu .photo1, #gyomu .photo2, #gyomu .photo3, #gyomu .photo4, #gyomu .photo5 {
    width: auto;
    padding: 0;
}
	#gyomu .col_2 > div { padding:0;}

	#syokai .imgpad_l{ padding: 0;}
	#syokai .imgpad_r{ padding: 0;}
	#syokai .imgpad_r img{ margin-top:15px;}
	
	#sub.item h3{font-size: 20px; margin: 40px 0 20px;}
	.item .item_img{ width:80%; height: auto; margin:0 auto 20px;}
	.item .item_text{ width:98%;}
	.item .item_btn{ width:60%; margin:0 auto;}
	.item .item_name {width: 98% !important; padding: 0 10px 10px 20px !important; font-size:20px; text-align:center; line-height: 1.4;}
	#sub .item_teiki {padding: 0 3% 20px; margin: 40px 0 0;}
	.item_teiki img{margin-left: 0;}
	
	#sub section{padding: 15px 3%;}
	#sub h2{font-size: 20px; margin: 20px 0;}
	.h2_text{text-align: left;}
	#sub .boxtext h3{font-size: 20px; margin: 0;}
	#sub .boxtext h4{font-size: 18px; margin: 15px 3%;}
	#sub section p{width: 94%; }


	/*　約束　*/
	#sub.promise .c_g{width: 94%; margin: 15px auto !important;}
	
	/*　サロン　*/
	#sub.salon h3{font-size: 18px; width: 94%;}
	.salon .cont3{margin: 15px 0;}
	#sub.salon .textbox{padding: 10px 0;}
	#sub.salon .textbox h4{text-align: center;}
	#sub.salon .textbox p{font-size: 14px;}
	
	/*　モノづくり哲学　*/
	.mono .col_2{margin-bottom: 40px;}
	
	/*　定期お届け便　*/
	#sub.teiki h3{font-size: 18px;}
	.teiki h4{width: 94%;}
	.teiki .cont2 div p, .teiki .cont3 p{padding-left: 0;}
	.teiki .cont3{padding-bottom: 40px;}

	
	/* 会社概要 */
	.company .cont1 .h2_text:last-of-type{text-align: right;}
	.company .cont3 .col_2+p{padding-bottom: 10px;}
	
	/*　プライバシーポリシー　*/
	#sub.privacy h3{font-size: 18px; width: 94%;}

	#gaiyo .cont_1 .nav img{ width:auto; margin-top:15px;}
	#gaiyo .cont_1 .inner_l{ width:100%; text-align:left; margin-bottom:15px;}
	#gaiyo .cont_1 .inner_r{ width:100%;}
	#gaiyo .cont_1 .inner_r img{ width:100%;}
	#gaiyo .cont_1 .inner_l img{ margin-left:0 !important;}
	#gaiyo .sidenav{ width:100%; height:auto;}
	#gaiyo .sidenav img{ width:auto !important;}
	#gaiyo .sidenav .logo{ width:100% !important;}
	#gaiyo .gaiyo_list { width:100%;}

	#gyomu .cont_1 .inner_l{ width:100%; text-align:center; margin-bottom:15px;}
	#gyomu .cont_1 .inner_r{ width:100%;}
	#gyomu .cont_1 .inner_l img{ width:50%;}
	#gyomu .photo_txt {width: 100%; padding: 0px; margin:15px 0;}	
	#gyomu .photo_txt img{width: 100%; margin-top:0 !important; margin:15px 0;}	
	#gyomu .photo6 {width: 100%;}
	#gyomu .photo6_txt {width: auto; padding:0;}	
	#gyomu .photo1, #gyomu .photo2, #gyomu .photo3, #gyomu .photo4, #gyomu .photo5 {
		width: auto;
		padding: 0;
	}
	#gyomu .col_2 > div { padding:0;}

	#syokai .imgpad_l{ padding: 0;}
	#syokai .imgpad_r{ padding: 0;}
	#syokai .imgpad_r img{ margin-top:15px;}
	

	
	/*モーダルウインドウ*/
	.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	margin-left:-15px;
	}
	.modal h3{border-bottom: double 5px rgba(24,128,186,1.00); color: rgba(24,128,186,1.00); font-size:1.2em; font-weight:bold; margin:15px 0; }
	.modal__bg{
		background: rgba(0,0,0,0.8);
		height: 100vh;
		position: absolute;
		width: 100%;
	}
	.modal__content{
		background: #fff;
		left: 50%;
		padding: 15px;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 80%;
		text-align:center;
	}  
	a.js-modal-close {
    background: #222;
    padding: 5px;
    color: #fff;
}


	#gFooter .gFooterInner {width: 100%;}
	.cr{font-size: 13px; font-weight: bold;}
}