@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Open+Sans:300,300i,400,400i');

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }

/*	RESET CSS
================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body {line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a { text-decoration:none;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}

/*	BASE
================================================== */
html{
	font-size:10px;
	}

body{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:1.3rem;
	color:#444;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	background:#F7F7F7;
	}

button, input, select, textarea{
	font-family:inherit; font-size:100%;
	}

a {
	color:#4C3E38;
	text-decoration:underline;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
	word-break: break-all;
	}

a:hover {
	opacity:0.7;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
	}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

img{
	vertical-align:top;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height:auto;
	}

body *{
	overflow:hidden;
	}

@media screen and (min-width: 769px) {

	.sp { display:none; }
	a.tel{ text-decoration:inherit; color:inherit; cursor:default; }
	a.tel:hover{ opacity:1; }

}

@media screen and (max-width: 768px) {

	.pc { display:none; }
	.sp { display:block; }
	img { width:100%; height:auto; }

}

@media screen and (max-width: 320px) {

	html{
	font-size:9px;
	}

}

/*	SLIDER
================================================== */
.bx-wrapper{
	box-shadow: none !important;
	border: 0 !important;
	left: 0 !important;
	margin:0 auto !important;
	background:transparent !important;
	overflow: visible !important;
	}

.bx-wrapper img{
	width:100%;
	height:auto;
	}

/*	COMMON
================================================== */

html:before,html:after,body:before,body:after{
	content:"";
	background:#5E514C;
	position:fixed;
	display:block;
	z-index:5;
	}
html:before{
	height:1px; left:7px; right:7px; top:7px;
	}
html:after{
	width:1px; top:7px; right:7px; bottom:7px;
	}
body:before{
	height:1px; right:7px; bottom:7px; left:7px;
	}
body:after{
	width:1px; top:7px; bottom:7px; left:7px;
	}

header{
	width:90%;
	max-width:1080px;
	margin:0 auto;
	}

footer{
	margin:0 auto;
	}

main{
	margin:0 auto;
	}

main section{
	margin:0 auto 100px;
	}

main section article{
	width:90%;
	max-width:1160px;
	margin:0 auto;
	}

main section h2{
	margin-bottom:40px;
	text-align:center;
	line-height:1.5;
	font-size:1.4rem;
	letter-spacing:0.25em;
	color:#999;
	}

main section h2 span{
	display:block;
	margin-bottom:10px;
	font-family: 'Open Sans', sans-serif;
	font-size:2.3rem;
	font-weight:400;
	letter-spacing:0.25em;
	color:#4C3E38;
	}
	/* LR line */
	main section h2 span {
	display: flex;
	align-items: center;
	}
	main section h2 span:before,
	main section h2 span:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #4C3E38;
	display: block;
	}
	main section h2 span:before {
	margin-right: 1.5em;
	}
	main section h2 span:after {
	margin-left: 1.5em;
	}
	/* END LR line */

main section p{
	line-height:2;
	}

figure img{
	width:100%;
	height:auto;
	}

.btn{
	margin:0 auto !important;
	padding:0.5em 0 !important;
	text-align:center !important;
	line-height:1 !important;
	}

.btn a{
	display:inline-block;
	height:36px;
	line-height:36px;
	padding:0 3em 0 2.5em;
	text-align:center;
	text-decoration:none;
	font-size:1.3rem;
	font-weight:bold;
	letter-spacing:0.1em;
	color:#fff;
	background:#4C3E38 url(../img/btn.svg) no-repeat 90% center;
	background-size:7px auto;
	}

.btn.boxlink a:before{
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	outline: none;
	z-index: 2;
	}

.btn.boxlink a:hover:before{
	opacity:0.2;
	background:#fff;
	}

.center{ text-align:center !important; }
.left{ text-align:left !important; }
.right{ text-align:right !important; }
.flex { display:flex; }

@media screen and (max-width: 768px) {

	html:before{
	height:1px; left:5px; right:5px; top:5px;
	}
	html:after{
	width:1px; top:5px; right:5px; bottom:5px;
	}
	body:before{
	height:1px; right:5px; bottom:5px; left:5px;
	}
	body:after{
	width:1px; top:5px; bottom:5px; left:5px;
	}

	main section{
	margin-bottom:60px;
	}

	main section article{
	width:85%;
	}

	main section h2 span{
	font-size:1.9rem;
	letter-spacing:0.2em;
	}
	/* LR line */
	main section h2 span:before {
	margin-right: 1em;
	}
	main section h2 span:after {
	margin-left: 1em;
	}
	/* END LR line */

}

/*	HEADER
================================================== */

#header{
	position:relative;
	height:100px;
	margin:0 auto;
	text-align:center;
	}

#header h1{
	position:absolute;
	top:60px;
	left:0;
	text-align:left;
	font-size:1.1rem;
	letter-spacing:0.14em;
	color:#4C3E38;
	}

#header .logo{
	padding:32px 0 0;
	text-align:center;
	}

#header .logo img{
	width:96px;
	}

#header nav{
	position:absolute;
	top:50px;
	right:0;
	}

#header nav ul{
	}

#header nav ul li{
	float:left;
	margin:0 0 0 15px;
	}

#header nav ul li a{
	display:block;
	font-family: 'Open Sans', sans-serif;
	font-size:1.1rem;
	letter-spacing:0.15em;
	text-decoration:none;
	}

#header nav ul li:nth-of-type(1) a{
	border-bottom:1px solid #4C3E38;
	padding:8px 0 3px;
	margin:0 5px 0 0;
	}

#header nav ul li a img{
	width:30px;
	}

@media screen and (max-width: 768px) {

	#header{
	width:86%;
	height:65px;
	}

	#header h1{
	display:none;
	}

	#header .logo{
	width:22%;
	max-width: 80px;
	padding:20px 0 0;
	text-align:left;
	}

	#header .logo img{
	width:100%;
	}

	#header nav{
	top:25px;
	}

	#header nav ul li{
	margin:0 0 0 10px;
	}

	#header nav ul li:nth-of-type(1) a{
	padding:5px 0 3px;
	font-size:1rem;
	}

	#header nav ul li a img{
	width:24px;
	}

}

/*	FOOTER
================================================== */

#footer {
	padding:60px 0 20px;
	text-align:center;
	background:#4C3E38;
	color:#fff;
	}

#footer a{
	color:#fff;
	}

#footer .logo{
	margin:0 auto 20px;
	}

#footer .logo img{
	width:118px;
	}

#footer p{
	margin:0 0 20px;
	font-size:1.2rem;
	letter-spacing:0.15em;
	line-height:2;
	}

#footer p:last-child{
	margin:0 auto;
	font-size:1.0rem;
	letter-spacing:0.3em;
	color:#B7B2B0;
	}

#footer nav ul{
	margin:0 0 20px;
	text-align:center;
	}

#footer nav ul li{
	display:inline-block;
	margin:0 10px;
	}

#footer nav ul li a{
	display:block;
	}

#footer nav ul li a img{
	width:36px;
	}

@media screen and (max-width: 768px) {

	#footer .logo{
	width:28%;
	max-width:110px;
	}

	#footer .logo img{
	width:100%;
	}

	#footer p:last-child{
	letter-spacing:0.15em;
	}

}

/*	MARCATO
================================================== */

#concept article{
	text-align:center;
	padding-bottom:90px;
	border-bottom:4px double #4C3E38;
	}

#concept figure:nth-of-type(1){
	max-width:1080px;
	margin:0 auto 80px;
	}

#concept h2{
	display:inline-block;
	padding:0 1.8em 0 2em;
	margin:0 auto 1.5em;
	font-size:2.1rem;
	letter-spacing:0.15em;
	background:
	url(../img/dquote.svg) no-repeat left top,
	url(../img/dquote_end.svg) no-repeat right top;
	background-size:17px auto;
	color:#222;
	line-height:1.5;
	}

#concept h2 span{
	display:block;
	margin:2em auto 0;
	font-size:1.4rem;
	font-family: 'Open Sans', sans-serif;
	font-style:italic;
	letter-spacing:0.15em;
	color:#A69E9C;
	}

#concept h2 span:before,
#concept h2 span:after{
	display:none;
	}

#concept h2 span.pc{
	display: inline;
	margin: 0;
	font-size: inherit;
	font-family: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	color: inherit;
	}

#concept p{
	line-height:2.2;
	letter-spacing:0.2em;
	color:#222;
	}

@media screen and (max-width: 767px) {

#concept article{
	padding-bottom:50px
	}

#concept figure:nth-of-type(1){
	width:100%;
	height:0;
	padding-bottom:100%;
	margin-bottom:50px;
	background:url(../../marcato/img/mainphoto-s.jpg) no-repeat;
	background-size:100% auto;
	}

#concept figure:nth-of-type(1) img{
	display:none;
	}

#concept h2{
	padding:0 1.5em 0 1.8em;
	font-size:1.8rem;
	}

#concept h2 span{
	font-size:1.2rem;
	}

#concept h2 span.pc{
	display: block;
	font-size: 0;
	}

#concept p{
	letter-spacing:0em;
	}

}

/*	MARCATO - theme
================================================== */

#theme{
	margin-bottom:120px;
	}

#theme article{
	margin-bottom:0;
	overflow:hidden;
	}

#theme article figure{
	width:50%;
	}

#theme article:nth-of-type(odd) figure{
	float:left;
	margin-right:6%;
	}

#theme article:nth-of-type(even) figure{
	float:right;
	margin-left:6%;
	}

#theme article h3{
	margin:75px 0 30px;
	padding:15px 0 20px 20px;
	border-bottom:1px solid #B7B2B0;
	text-align:center;
	line-height:1.5;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	font-style:italic;
	font-size:2.8rem;
	letter-spacing:0.15em;
	color:#4C3E38;
	}

#theme article:nth-of-type(1) h3{
	background:url(../../marcato/img/theme-no1.svg) left top no-repeat;
	background-size:80px auto;
	}

#theme article:nth-of-type(2) h3{
	background:url(../../marcato/img/theme-no2.svg) left top no-repeat;
	background-size:80px auto;
	}

#theme article:nth-of-type(3) h3{
	background:url(../../marcato/img/theme-no3.svg) left top no-repeat;
	background-size:80px auto;
	}

#theme article:nth-of-type(odd) h3,
#theme article:nth-of-type(odd) p{
	margin-right:4%;
	}

#theme article:nth-of-type(even) h3,
#theme article:nth-of-type(even) p{
	margin-left:4%;
	}

#theme article p{
	text-align:center;
	}

@media screen and (max-width: 1024px) {

	#theme article h3{
	margin-top:40px;
	}

	#theme article:nth-of-type(odd) h3,
	#theme article:nth-of-type(odd) p,
	#theme article:nth-of-type(even) h3,
	#theme article:nth-of-type(even) p{
	margin-left:0;
	margin-right:0;
	}

	#theme article p{
	text-align:left;
	}

	#theme article p br{
	display:none;
	}

}

@media screen and (max-width: 768px) {

	#theme{
	margin-bottom:100px;
	}

	#theme article figure{
	width:100%;
	}

	#theme article:nth-of-type(odd) figure,
	#theme article:nth-of-type(even) figure{
	float:none;
	margin:0;
	}

	#theme article h3{
	margin:30px 5% !important;
	padding:10px 0 20px 35px;
	font-size:2.2rem;
	}

	#theme article:nth-of-type(1) h3,
	#theme article:nth-of-type(2) h3,
	#theme article:nth-of-type(3) h3{
	background-size:60px auto;
	background-position:-10px top;
	}

	#theme article p{
	margin:0 5% !important;
	text-align:left;
	}

	#theme article p br{
	display:none;
	}

	#theme article + article{
	margin-top:60px;
	}

}

/*	MARCATO - products
================================================== */

#products{
	
	}

#products h2{
	margin-bottom: 60px;
	}

#products ul li{
	position:relative;
	padding:0 0 56px;
	}

#products ul li div{
	width:80%;
	max-width:200px;
	margin:0 auto;
	}

#products ul li figure:nth-of-type(1){
	width:95%;
	margin:0 auto 40px;
	border-radius:50%;
	}

#products ul li h3{
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	font-size:1.6rem;
	letter-spacing:0.15em;
	margin-bottom:20px;
	color:#4C3E38;
	}

#products ul li p{
	font-size:1.2rem;
	line-height:1.8;
	color:#777;
	margin-bottom:1em;
	}

#products ul li .color{
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	font-style:italic;
	font-size:1.1rem;
	letter-spacing:0.15em;
	color:#4C3E38;
	}

#products ul li .color span{
	font-style:normal;
	font-size:1rem;
	}

#products ul li .color .gray{ color:#bbb; }
#products ul li .color .pink{ color:#F3A8BB; }
#products ul li .color .black{ color:#444; }
#products ul li .color .natural{ color:#D7BEA0; }

#products ul li .btn{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	}

#products ul li .btn a{
	width:80%;
	max-width:200px;
	}

.bx-wrapper .bx-controls-direction a{
	width:18px;
	height:36px;
	}

.bx-wrapper .bx-prev,
.bx-wrapper .bx-prev:hover{
	left: 0;
	background: url(../img/controls-prev.svg) center center no-repeat;
	background-size:18px auto;
	}

.bx-wrapper .bx-next,
.bx-wrapper .bx-next:hover{
	right: 0;
	background: url(../img/controls-next.svg) center center no-repeat;
	background-size:18px auto;
	}

@media screen and (max-width: 767px) {

	#products ul li div{
	width:100%;
	max-width:100%;
	margin:0 auto;
	}

	#products ul li .btn a{
	width:100%;
	max-width:100%;
	}

	#products ul li figure:nth-of-type(1){
	width:80%;
	}

	#products .bx-wrapper{
	padding:0 15% !important;
	}

	.bx-wrapper .bx-controls-direction a{
	margin-top: 0;
	}

	.bx-wrapper .bx-pager{
	position:relative;
	bottom:0;
	}
	
	.bx-wrapper .bx-pager.bx-default-pager a{
	width: 22px;
	height: 22px;
	margin: 0 0;
	border-radius:50%;
	border:7px solid #F7F7F7;
	background:#ccc;
	}

	.bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#4C3E38;
	}

}

/*	MARCATO - company
================================================== */

#company{
	max-width:100%;
	padding:180px 0;
	background:#4C3E38;
	}

#company article figure{
	width:50%;
	float:left;
	text-align:center;
	}

#company article figure img{
	width:50%;
	max-width:140px;
	margin:0 auto;
	}

#company article h2{
	margin-right:5%;
	margin-bottom: 30px;
	color:#ccc;
	}

#company article h2 span{
	color:#fff;
	}

#company article p{
	margin-right:5%;
	text-align:center;
	line-height:2.3;
	color:#fff;
	}

	#company article h2 span:before,
	#company article h2 span:after {
	background: #fff;
	}

@media screen and (max-width: 768px) {

	#company{
	padding:60px 0;
	}

	#company article figure{
	width:80%;
	float:none;
	margin:0 auto 50px;
	}

	#company article figure img{
	width:40%;
	}

	#company article h2{
	margin: 0 5% 30px !important;
	margin-bottom: 
	}

	#company article p{
	margin: 0 5% !important;
	text-align:left;
	}

	#company article p br{
	display:none;
	}

}

/*	MARCATO - mailform
================================================== */

#mailform{
	
	}

#mailform p{
	margin-bottom: 40px;
	text-align:center;
	letter-spacing:0.2em;
	color:#222;
	}

@media screen and (max-width: 768px) {

#mailform p{
	letter-spacing:0.1em;
	}

}

/*	form.css - CUSTOMIZE
================================================== */

#mailformpro,
table#mfp_confirm_table{
	width:80%;
	max-width:680px;
	margin:0 auto;
	}

#mailformpro dl dt{
	font-size:1.2rem !important;
	letter-spacing:0.2em;
	color:#777;
	}

#mailformpro dl dt span{
	display:block;
	margin-bottom:0.6em;
	font-family: 'Open Sans', sans-serif;
	font-size:1.4rem;
	letter-spacing:0.2em;
	color:#4C3E38;
	}

.mfp_buttons{
	margin-top:0 !important;
	}

.mfp_buttons button[type="submit"],
.mfp_buttons button#mfp_button_send,
.mfp_buttons button[type="reset"],
.mfp_buttons button#mfp_button_cancel {
	width:270px !important;
	height:3.6em !important;
	line-height:3.4em !important;
	background:#4C3E38 !important;
	color:#fff !important;
	font-size:1.4rem !important;
	letter-spacing:0.1em;
	border-radius:3px;
	}

.mfp_buttons button[type="reset"],
.mfp_buttons button#mfp_button_cancel {
	background: #aaa !important;
	color: #fff !important;
	margin-left:20px;
	}

input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="file"],
textarea,
form .guideline dl{
	border:1px solid #A69E9C !important;
	}

div.mfp_err{
	color:#D8823A !important;
	/* color:red */
	}

.problem{
	background:#F8E8D7 !important;
	/* background:#FFDDCC */
	}

.must{
	padding-left:1em !important;
	}

.must:before{
	content:"*";
	float:left;
	width:1em;
	margin-left:-1em;
	font-family: 'Open Sans', sans-serif;
	color:#D8823A;
	}

@media screen and (max-width: 768px) {

	#mailformpro,
	table#mfp_confirm_table{
	width:90%;
	}

	#mailformpro dl dt{
	margin: 0 0 1em !important;
	}

	#mailformpro dl dd{
	margin: 0 0 1.5em !important;
	}

	#mailformpro dl dt span{
	display:inline;
	font-size:1.2rem;
	}

}

/*	CONTACT
================================================== */

#contact main{
	margin-top:50px;
	}




#company{
	margin-bottom: 0;
	}

#footer{
	padding: 60px 0;
	background: #F7F7F7;
	color:#4C3E38;
}
#footer a {
    color: inherit;
}
#footer p:last-child{
    color: inherit;
}