@charset "utf-8";
/*====================================================================
 clearfix
====================================================================*/
.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 visibility: hidden;
}
.clearfix {
 	min-height: 1px;
	overflow: visible;
}
* html .clearfix {
 height: 1px;
 overflow: hidden;
}
.wrap{
	position: relative;
    width: 1200px;
    margin: 0 auto;
    overflow: visible;
    box-sizing: border-box;
    z-index: 1;
}
.pc_view {
	display: block;
}
.sp_view {
	display: none;
}
html.fixed, body.fixed {
    overflow: hidden;
    width: 100%;
}
/*============================
         midashi
============================*/
.midashi_en{
	font-size: 46px;
	color: #896062;
}
.midashi_jp{
	font-size: 14px;
	color: #3F1A18;
	margin-top: 10px;
}
/*============================
         button
============================*/
.btn_normal,
.btn_has_icon{
	display: block;
	overflow: hidden;
	width: 270px;
	height: 50px;
	font-size: 18px;
	padding: 17px 0;
	text-align: center;
	color: #552126;
	border-bottom: 1px solid #552126;
	transition:all .5s ease;
}
.btn_normal::before,
.btn_has_icon::before{
	content:"";
	width: 270px;
	height: 50px;
	top: 0;
	left: -100%;
	background: #552126;
	position:absolute;
	transition:all .5s ease;
	z-index: -1;
}
.btn_normal.white::before,
.btn_has_icon.white::before{
	background: #fff;
}
.btn_normal:hover,
.btn_has_icon:hover{
	color: #E6D2D7;
}
.btn_normal.white:hover,
.btn_has_icon.white:hover{
	color: #3F1A18;
}
.btn_normal:hover::before,
.btn_has_icon:hover::before{
	left: 0;
}
.btn_normal.white,
.btn_has_icon.white{
	color: #fff;
	border-bottom: 1px solid #fff;
}
.btn_has_icon{
	text-indent: 26px;
}
.btn_normal span{
	display: block;
}
.btn_normal span::before,
.btn_normal span::after{
	content:"";
	position: absolute;
	background: #552126;
	transition: all .5s ease;	
	width: 10px;
	height: 1px;
	right: 16px;
	top: 50%;
}
.btn_normal span::before,
.btn_normal span::after{
	content:"";
	position: absolute;
	background: #552126;
	transition: all .5s ease;	
	z-index: 2;
}
.btn_normal span::before{
	width: 11px;
	height: 1px;
	right: 16px;
	top: 50%;
}
.btn_normal span::after{
	width: 1px;
	height: 11px;
	right: 21px;
	top: 50%;
	margin-top: -5px;
}
.btn_has_icon .ic_insta{
	display: block;
	position: absolute;
	left: 18px;
	top: 50%;
	margin-top: -14px;
	transition:all .5s ease;
	fill: #3F1A18;
}
.btn_has_icon .ic_mail{
	display: block;
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -14px;
	transition: all .5s ease;
	fill: #3F1A18;
}
.btn_has_icon:hover .ic_mail{
	fill: #fff;
}
.btn_has_icon.white .ic_insta{
	fill: #fff;
}
.btn_normal:hover span::before,
.btn_normal:hover span::after{
	background: #fff;
}
.btn_has_icon.white:hover .ic_insta{
	fill: #3F1A18;
}

.btn_border{
	display: block;
	font-size: 16px;
	width: 300px;
	height: 50px;
	margin: 0 auto;
	padding: 17px 0;
	text-align: center;
	border: 1px solid #552126;
	transition: all .5s ease;	
}
.btn_border:hover{
	color: #fff;
	background: #552126;
}
/*============================
         header
============================*/
#sp_contactbox{
	display: none;
}
header{
	width: 100%;
	height: 80px;
	background: #3F1A18;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	min-width: 1280px;
}
header .header_contact_box{
	background: #fff;
	width: 320px;
	height: 80px;
	padding: 16px 0 14px;
    text-align: center;
}
header .sns_box{
	right: 339px;
}
header .logo{
	display: inline-block;
	padding: 25px 0 21px 40px;
}
header .logo a{
	display: inline-block;
	
}
header .logo a svg{
	display: block;
	width: 128px;
	height: 32px;
	fill: #fff;
	transition: all .3s ease;
}
header .logo a:hover svg {
	fill: #896062;
}
header nav{
	position: absolute;
	display: inline-block;
	background: #3F1A18;
	text-align: center;
	top: 50%;
	margin-top: -17.5px;
	right: 430px;
}
header nav ul {
	display: inline-block;
	margin: 0 auto;
}
header nav ul li{
	display: inline-block;
	float: left;
	margin: 0 12px;
}
header nav ul li a{
	font-size: 20px;
	display: block;
	color: #896062!important;
	transition: all .3s ease;
	letter-spacing: 0;
}
header nav ul li a:hover{
	color: #E6D2D7!important;
}
header nav ul li a span{
	font-size: 12px;
	color: #E6D2D7;
	display: block;
    margin-top: 5px;
}
/*common*/
.header_contact_box{
	display: inline-block;
	position: absolute;
	top: 0;
	z-index: 2;
	right: 0;
	letter-spacing: 0;
}
.header_contact_box.main{
	right: 48px;
	top: 50%; 
	margin-top: -26px;
}
.header_contact_box a{
	display: block;
	color: #552126;
	transition: all .3s ease;
}
.header_contact_box a:hover{
	color: #896062;
}
.header_contact_box a:hover .tel svg{
	fill: #896062;
}
.header_contact_box a:hover .time span{
	background: #896062;
}
.header_contact_box p:first-child{
	margin-bottom: 8px;
}
.header_contact_box .ttl{
	display: inline-block;
	width: 88px;
	height: 24px;
	border-top: 1px solid #E6D2D7;
	border-bottom: 1px solid #E6D2D7;
	font-size: 12px;
	margin-right: 6px;
	padding: 6px 0;
}
.header_contact_box .tel{
	display: inline-block;
	font-size: 27px;
	padding-left: 20px;
	vertical-align: -4px;
	font-weight: bold;
}
.header_contact_box .tel svg{
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -12px;
	width: 17px;
	height: auto;
	display: block;
	fill: #552126;
	transition: all .3s ease;
}
.header_contact_box .time span{
	display: inline-block;
	width: 50px;
	height: 16px;
	font-size: 12px;
	color: #EEE5E1;
	background: #552126;
	padding: 2px 0;
	vertical-align: 1px;
	margin-right: 3px;
	transition: all .3s ease;
}
.header_contact_box .time span:last-child{
	margin-left: 7px;
}
.header_contact_box .time{
	font-size: 16px;
}
.sns_box{
	position: absolute;
	top: 50%;
	margin-top: -12px;
	display: inline-block;
}
.sns_box.main{
	left: 40px;
}
.sns_box a{
	display: inline-block;
    margin: 0 5px;
}
.sns_box a svg{
	fill: #896062;
	display: block;
	transition: all .3s ease;
}
.sns_box a:hover svg{
	fill: #E6D2D7;
}
.sns_box.main a svg{
	fill: #552126;
}
.sns_box.main a:hover svg{
	fill: #896062;
}

header #btn_nav_wrapper{
	display: none;
	position: absolute;
    top: 40px;
    right: 40px;
	margin: auto;
	width: 80px;
	height: 24px;
	cursor: pointer;
	box-sizing: border-box;
	padding-top: 16px;
	z-index: 1001;
	transition: all .3s ease;
}
header #btn_nav_wrapper .btn_nav{
    position: relative;
    transform: translateY(5px);
    background: #fff;
    width: 80px;
    height: 1px;
    top: 50%;
    margin-top: -12px;
    left: 0;
}
header #btn_nav_wrapper.active .btn_nav{
    background: rgba(0,0,0,0);
	transition: background 0 linear;
}

header #btn_nav_wrapper .btn_nav::after,
header #btn_nav_wrapper .btn_nav::before {
	width: 80px;
	height: 1px;
}
header #btn_nav_wrapper .btn_nav::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 10px;
	background: #fff;
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header #btn_nav_wrapper .btn_nav::after {
	content: "";
	position: absolute;
	right: 0;
	top: 10px;
	background: #fff;
	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header #btn_nav_wrapper.active .btn_nav:after {
	top: 0;
	transform: rotate(25deg);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header #btn_nav_wrapper.active .btn_nav:before {
	bottom: 0;
	transform: rotate(-25deg);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/*============================
         contact
============================*/
#contact{
	border-top: 1px solid #3F1A18;
	letter-spacing: 0;
}
#contact a{
	display: block;
	height: 150px;
	transition: all .3s ease;
}
#contact a:hover{
	background: #e6e1dc;
}
#contact .box:first-child a{
	border-right: 1px solid #3f1a18;
}
#contact .tel,
#contact .timebox{
	float: left;
}
#contact .clearfix{
	display: inline-block;
	margin: 0 auto;
}
#contact .telbox{
	padding: 50px 0;
	text-align: center;
}
#contact .tel{
	text-align: center;
    padding: 9px 0;
	margin-right: 20px;
}
#contact .tel svg{
	display: inline-block;
	fill: #552126;
}
#contact .tel span{
	font-weight: bold;
	display: inline-block;
	font-size: 36px;
	margin-left: 3px;
	letter-spacing: 0;
}
#contact .timebox p span{
	display: inline-block;
	font-size: 14px;
	width: 65px;
	height: 20px;
	color: #eee5e1;
	padding: 3px 0;
	background: #552126;
	text-align: center;
	margin-right: 6px;
	vertical-align: 2px;
}
#contact .timebox p{
	font-size: 17px;
	margin-bottom: 10px;
	text-align: left;
}
#contact .mailbox{
	font-size: 18px;
	padding: 70px 0 62px;
	text-align: center;
	text-indent: 15px;
}
#contact .mailbox svg{
	fill: #3f1a18;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -134px;
	top: 50%;
	margin-top: -8px;
}
/*============================
         footer
============================*/
footer{
	background: #3f1a18;
	color: #e6d2d7;
	height: 250px;
	overflow: hidden!important;
}
footer .footer_left{
	display: inline-block;
	padding: 57px 0 52px 68px;
	float: left;
}
footer .footer_left .logo{
	display: block;
	color: #e6d2d7;
	font-size: 16px;
	margin-bottom: 12px;
}
footer .footer_left .logo svg{
	fill: #E6D2D7;
	display: block;
	margin-bottom: 16px;
}
footer .footer_left .kome{
	line-height: 1.4;
	font-size: 10px;
	margin-bottom: 8px;
}
footer .footer_left .address{
	color: #e6d2d7;
	font-size: 12px;
	margin-bottom: 10px;
}
footer .footer_left .copyright{
	color: #896062;
	font-size: 12px;
}
footer .footer_right{
	padding: 136px 60px 55px 0;
	display: inline-block;
	float: right;
}
footer .footer_right ul li{
	float: left;
	margin-right: 20px;
}
footer .footer_right ul li:last-child{
	margin-right: 0;
}
footer .footer_right ul li a{
	color: #E6D2D7;
	transition: all .3s ease;
}
footer .footer_right .menu_large li a{
	padding-left: 16px;
}
footer .footer_right ul li a:hover{
	color: #896062;
}
footer .footer_right .menu_large li a::before{
	content:">";
	position: absolute;
	left: 0;
}
footer .footer_right .menu_large{
	font-size: 16px;
	padding-bottom: 15px;
	margin-bottom: 13px;
	border-bottom: 1px solid #5F3039;
}
footer .footer_right .menu_small{
	font-size: 14px;
	float: right;
}
/*====================================================================
  layout box
====================================================================*/
.box {
	position: relative;
	box-sizing: border-box;
	float: left;
	margin: 0;
	padding: 0;
}
.box_wrap{
	overflow: hidden;
	box-sizing: border-box;
}
/* layout box - unit */
.box.pc1unit { width: 8.33%; }
.box.pc2unit { width: 16.66%; }
.box.pc2_5unit { width: 20%; }
.box.pc3unit { width: 25%; }
.box.pc3_5unit { width: 29.16%; }
.box.pc4unit { width: 33.32%; }
.box.pc5unit { width: 41.65%; }
.box.pc5_5unit { width: 45.82%; }
.box.pc6unit { width: 50%; }
.box.pc6_5unit { width: 54.16%; }
.box.pc7unit { width: 58.33%; }
.box.pc8unit { width: 66.66%; }
.box.pc9unit { width: 74.99%; }
.box.pc10unit { width: 83.32%; }
.box.pc11unit { width: 91.65%; }
.box.pc12unit { width: 100%; }

/* layout box - padding */
.box.pad4 { padding: 0 2px; }
.box.pad10 { padding: 0 5px; }
.box.pad16 { padding: 0 8px; }
.box.pad20 { padding: 0 10px; }
.box.pad30 { padding: 0 15px; }
.box.pad40 { padding: 0 20px; }
.box.pad50 { padding: 0 25px; }
.box.pad60 { padding: 0 30px; }
.box.pad70 { padding: 0 35px; }
.box.pad80 { padding: 0 40px; }
.box.pad100 { padding: 0 50px; }

/* layout box_wrap - fill */
.box_wrap.fill4 {
	margin-left: -2px;
	margin-right: -2px;
}
.box_wrap.fill10 {
	margin-left: -5px;
	margin-right: -5px;
}
.box_wrap.fill16 {
	margin-left: -8px;
	margin-right: -8px;
}
.box_wrap.fill20 {
	margin-left: -10px;
	margin-right: -10px;
}
.box_wrap.fill30 {
	margin-left: -15px;
	margin-right: -15px;
}
.box_wrap.fill40 {
	margin-left: -20px;
	margin-right: -20px;
}
.box_wrap.fill50 {
	margin-left: -25px;
	margin-right: -25px;
}
.box_wrap.fill60 {
	margin-left: -30px;
	margin-right: -30px;
}
.box_wrap.fill70 {
	margin-left: -35px;
	margin-right: -35px;
}
.box_wrap.fill80 {
	margin-left: -40px;
	margin-right: -40px;
}
.box_wrap.fill100 {
	margin-left: -50px;
	margin-right: -50px;
}

/*============================
         products
============================*/
#products{
	padding: 95px 0 118px;
	background: #3F1A18;
}
#products .midashi_box{
	text-align: center;
	margin-bottom: 55px;
}
#products .midashi_box .midashi_jp{
	color: #E6D2D7;
}
#products .clearfix{
	width: 860px;
	margin: 0 auto;
    padding-left: 20px;
}
#products .products_box{
	float: left;
	margin-right: 6px;
	width: 204px;
	height: 250px;
	padding: 10px 28px 30px 12px;
}
#products .products_box::after{
	position: absolute;
	content:"";
	width: 214px;
    height: 268px;
	background: url("../images/top/products_after_01.png") no-repeat center;
	background-size: 100% auto;
	right: 0;
	bottom: 0;
	z-index: -1;
}
#products .products_box:last-child{
	margin-right: 0;
}
#products .products_box h3{
	font-size: 18px;
	text-align: center;
	margin-bottom: 10px;
}
#products .products_box p{
	line-height: 1.5;
	font-size: 12px;
	text-align: justify;
    text-justify: inter-ideograph;
}
#products .products_box img{
	display: block;
	margin: 0 auto 25px;
}
#products .textbox{
	width: 830px;
	text-align: center;
	font-size: 20px;
	line-height: 1.5;
	color: #E6D2D7;
	border: 1px solid #896062;
	margin: 48px auto 58px;
	padding: 20px;
	z-index: 1;
}
#products .textbox::before,
#products .textbox::after{
	content:"";
	position: absolute;
}
#products .textbox::before{
	width: 10px;
	height: 10px;
	background: #3F1A18;
	left: -1px;
	bottom: 0;
	z-index: 2;
}
#products .textbox::after{
	width: 40px;
	height: 40px;
	background: url("../images/top/products_after_02.png") no-repeat center;
	background-size: 40px;
	right: -1px;
	bottom: -1px;
}
#products .btn_has_icon{
	margin: 0 auto;
}

/*============================
        works
============================*/
#works{
	padding: 180px 0 80px;
	background: #3f1a18;
}
#works .box_wrap{
	width: 1000px;
	margin: 0 auto;
}
#works .midashi_box {
	text-align: center;
	margin-bottom: 40px;
}
#works .midashi_box .midashi_jp{
	color: #E6D2D7;
	margin-top: 15px;
}
#works .btn_has_icon{
	margin: 46px auto 0;
}
#works #feed a{
	display: block;
	overflow: hidden;
	margin-bottom: 4px;
	width: 196.8px;
	height: 196.8px;
} 
#works #feed a img{
	width: 100%;
	height: auto;
}