@charset "utf-8";
@media screen and (max-width: 750px) {
body{
	min-width: 100%;
}
/*====================================================================
  wrap
====================================================================*/
.pc_view, .sp_none {
	display: none;
}
.sp_view {
	display: block;
}
.wrap{
	width: 100%;
	min-width: 1px;
	margin: 0 auto;
	padding: 0 10.6vw;
}
/*====================================================================
 midashi
====================================================================*/
.midashi_en{
	font-size: 11vw;
	margin-bottom: 2vw;
	letter-spacing: 0vw;
}
.midashi_jp{
	font-size: 4.2vw;
	margin-top: 2.6vw;
}
/*============================
         button
============================*/
.btn_normal,
.btn_has_icon{
	width: 70.6vw;
	height: 16vw;
	font-size: 5.3vw;
	padding: 5.5vw 0;
}
.btn_normal::before,
.btn_has_icon::before{
	width: 70.6vw;
	height: 16vw;
	top: 0;
	left: -100%;
}
.btn_has_icon{
	text-indent: 10vw;
}
.btn_normal span::before{
	width: 4.2vw;
	right: 5.3vw;
}
.btn_normal span::after{
	height: 4.2vw;
	right: 7.2vw;
	margin-top: -2.1vw;
}
.btn_has_icon .ic_insta{
	width: 9vw;
	height: 9vw;
	left: 4vw;
	margin-top: -4.5vw;
}
.btn_has_icon .ic_mail{
	width: 9vw;
	height: auto;
	left: 4vw;
	margin-top: -4.2vw;
}
.btn_border{
	font-size: 4.2vw;
	width: 100%;
	height: 13.3vw;
	padding: 4.5vw 0;
}

/*============================
         header
============================*/
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 21.3vw;
	background: #fff;
	opacity: 1!important;
	min-width: 1px;
}
header.header_fadein {
	animation: none;
	opacity: 1;
	left: 0;
}
header.header_fadeout {
	animation: none;
	opacity: 1;
	left: 0;
}
header .header_contact_box,
header .sns_box{
	display: none;
}
header .logo{
	display: inline-block;
	padding: 4.6vw 0 3.6vw 5vw;
	font-size: 2.9vw;
}
header .logo a{
	color: #552126;
	transition: all .3s ease;
}
header .logo a:hover{
	color: #896062;
}
header .logo a svg{
	width: 32.2vw;
	height: auto;
	fill: #552126;
	margin-bottom: 2.6vw;
}
header .logo a:hover svg {
	fill: #896062;
}
header nav{
	position: fixed;
	background: #3F1A18;
	display: block;
	top: 0;
	margin-top: 0;
	right: -100%;
    opacity: 0;
    z-index: -1;
	width: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	transition: right 0s linear 0.3s, opacity 0.3s linear 0.05s;
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

header nav.active{
    opacity: 1;
    z-index: 1000;
	right: 0;
	transition: right 0s linear 0s, opacity 0.3s linear;
}

header nav .nav_wrap{
	padding: 28vw 0;
    min-height: 180vw;
	height: 100%;
	z-index: -1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
header nav ul {
    display: block;
	position: absolute;
    margin: 0 auto 0;
    padding: 0;
    width: 56vw;
    height: 124vw;
    top: 50%;
    margin-top: -62vw;
    left: 50%;
    margin-left: -28vw;
	z-index: -1;
}
header nav ul li{
	display: block;
	float: none;
	margin: 0 auto 6.3vw;
}
header nav ul li a{
	font-size: 7.6vw;
}
header nav ul li a span{
	font-size: 4.2vw;
    margin-top: 1.6vw;
}
header nav .menu_sns {
    display: inline-block;
    position: absolute;
    right: 10.6vw;
    bottom: 12vw;
	z-index: -1;
}
header nav .menu_sns a {
	display: inline-block;
	margin: 0 1.4vw;
}
header nav .menu_sns a svg{
	display: block;
	fill: #896062;
	transition: all .3s ease;
	width: 9vw;
	height: auto;
}
header nav .menu_sns a:hover svg{
	fill: #E6D2D7;
}
header #btn_nav_wrapper{
	display: block;
    top: 0;
    right: 0;
    width: 21.3vw;
    height: 21.3vw;
    padding-top: 0;
    background: #3F1A18;
}
header #btn_nav_wrapper.active{
	background: none;
}
header #btn_nav_wrapper .btn_nav{
	transform: translateY(2.1vw);
    width: 11.3vw;
    top: 50%;
    margin-top: -2vw;
    left: 50%;
    margin-left: -5.5vw;
}
header #btn_nav_wrapper .btn_nav::after,
header #btn_nav_wrapper .btn_nav::before {
	width: 11.3vw;
}
header #btn_nav_wrapper .btn_nav::before {
	bottom: 2.4vw;
}
header #btn_nav_wrapper .btn_nav::after {
	top: 2.4vw;
}
#sp_contactbox{
	display: block;
	width: 100%;
	height: 21.3vw;
	background: #3F1A18;
	position: fixed;
	z-index: 990;
	bottom: 0;
	left: -100%;
	opacity: 0;
	border-top: 1px solid #704046;
}

.btn_sp_mail a{
	display: block;
	width: 21.3vw;
	height: 21.3vw;
	position: absolute;
	left: 0;
	top: 0;
	border-right: 1px solid #704046;
	font-size: 3.2vw;
	color: #E6D2D7;
	text-align: center;
	padding: 4vw 0;
}
.btn_sp_mail a svg{
	width: 8.5vw;
	height: auto;
	fill: #E6D2D7;
	display: block;
	margin: 0 auto 0.2vw;
}
.header_contact_box{
	display: block;
	position: absolute;
	width: 78.6vw;
	height: 21.3vw;
}
.header_contact_box a{
	display: block;
	color: #E6D2D7;
	transition: all .3s ease;
    text-align: center;
	padding: 4vw 0;
}
.header_contact_box a:hover{
	color: #E6D2D7;
}
.header_contact_box a:hover .tel svg{
	fill: #704046;
}
.header_contact_box a:hover .time span{
	background: #704046;
}
.header_contact_box p:first-child{
	margin-bottom: 2vw;
}
.header_contact_box .ttl{
	width: 20vw;
	height: 5.3vw;
	font-size: 3.2vw;
	margin-right: 2vw;
	padding: 1vw 0;
	border-top: 1px solid #704046;
    border-bottom: 1px solid #704046;
}
.header_contact_box .tel{
	font-size: 6.8vw;
	padding-left: 6vw;
	vertical-align: -1.4vw;
}
.header_contact_box .tel svg{
	width: 4.4vw;
	height: auto;
	left: 0;
	top: 50%;
	margin-top: -3vw;
	fill: #704046;
}
.header_contact_box .time span{
	width: 12.8vw;
	height: 4.2vw;
	font-size: 3.3vw;
	color: #E6D2D7;
	background: #704046;
	padding: 0.6vw 0;
	vertical-align: 0.1vw;
	margin-right: 2vw;
}
.header_contact_box .time span:last-child{
	margin-left: 2vw;
}
.header_contact_box .time{
	font-size: 3.7vw;
}
/*============================
         contact
============================*/
#contact a{
	height: 36vw;
}
#contact a:hover{
	background: #e6e1dc;
}
#contact .box:first-child a{
	border-right: none;
	border-bottom: 1px solid #3f1a18;
}
#contact .tel,
#contact .timebox{
	float: none;
}
#contact .clearfix{
	display: block;
	width: auto;
	margin: 0 auto;
}
#contact .telbox{
	padding: 9.6vw 0;
	text-align: center;
}
#contact .tel{
    padding: 0;
    margin-right: 0;
	margin-bottom: 3vw;
}
#contact .tel svg{
	width: 5.6vw;
	height: auto;
}
#contact .tel span{
	font-size: 9.6vw;
	margin-left: 1.6vw;
}
#contact .timebox{
	text-align: center;
}
#contact .timebox p span{
	display: inline-block;
	font-size: 3.7vw;
	width: 17vw;
	height: 5.3vw;
	padding: 1vw 0;
	text-align: center;
	margin-right: 1.3vw;
	vertical-align: 0.3vw;
}
#contact .timebox p span:last-child{
	margin-left: 1.3vw;
}
#contact .timebox p{
	font-size: 4.5vw;
	margin-bottom: 0;
	display: inline-block;
}
#contact .mailbox{
    font-size: 4.8vw;
    padding: 15.6vw 0;	
	text-indent: 10.6vw;
}
#contact .mailbox svg{
	width: 9vw;
    height: auto;
    margin-left: -29vw;
    top: 50%;
    margin-top: -3vw;
    text-indent: 0;
}
/*============================
         footer
============================*/
footer{
	height: auto;
	padding: 0 10.6vw;
	margin-bottom: 21.3vw;
}
footer .footer_left{
	display: block;
	padding: 17.3vw 0 12vw;
	float: none;
}
footer .footer_left .logo{
	font-size: 3.4vw;
	margin-bottom: 2.6vw;
}
footer .footer_left .logo svg{
	width: 41.3vw;
	height: auto;
	margin-bottom: 5.8vw;
}
footer .footer_left .kome{
	font-size: 2.6vw;
	margin-bottom: 8vw;
}
footer .footer_left .address{
	font-size: 2.9vw;
	margin-bottom: 4vw;
}
footer .footer_left .copyright{
	font-size: 3.2vw;
}
footer .footer_right{
	padding: 10.6vw 0 0;
	display: block;
	float: none;
}
footer .footer_right ul li{
	float: left;
	margin-right: 0;
}
footer .footer_right ul li:last-child{
	margin-right: 0;
}
footer .footer_right .menu_large li a{
	padding-left: 4.1vw;
}
footer .footer_right .menu_large{
	font-size: 4.2vw;
	padding: 0 0 3.3vw;
	margin-bottom: 6vw;
}
footer .footer_right .menu_large li{
	width: 50%;
	padding: 4.6vw 0;
}
footer .footer_right .menu_large li:nth-child(even){
	padding-left: 3vw;
}
footer .footer_right .menu_small{
	font-size: 4.2vw;
	float: none;
}
footer .footer_right .menu_small li{
	float: left;
	display: inline-block;
	margin-right: 10.6vw;
}
footer .footer_right .menu_small{
	padding: 0 2.6vw;
}
/*====================================================================
  layout box
====================================================================*/
.box_wrap.sp_reverse{
   display: -webkit-flex;
   display: flex;
	-webkit-flex-direction: column-reverse;
   flex-direction: column-reverse;	
}
.box.sp1unit { width: 8.33%; }
.box.sp2unit { width: 16.66%; }
.box.sp3unit { width: 25%; }
.box.sp4unit { width: 33.32%; }
.box.sp5unit { width: 41.65%; }
.box.sp6unit { width: 50%; }
.box.sp7unit { width: 58.33%; }
.box.sp8unit { width: 66.66%; }
.box.sp9unit { width: 74.99%; }
.box.sp10unit { width: 83.32%; }
.box.sp11unit { width: 91.65%; }
.box.sp12unit { width: 100%; }
	
/*== layout box - padding ==*/
.box.pad10, .box.pad20, .box.pad30, .box.pad40, .box.pad50, .box.pad60, .box.pad70, .box.pad80, .box.pad100, .box_wrap.fill10, .box_wrap.fill20, .box_wrap.fill30, .box_wrap.fill40, .box_wrap.fill50, .box_wrap.fill60, .box_wrap.fill70, .box_wrap.fill80, .box_wrap.fill100{
	margin: 0;
	padding: 0;
 }
.box_wrap.fill4 {
	margin-left: -1.2vw;
	margin-right: -1.2vw;
}
.box.pad4 { padding: 0 1.2vw; }
	
	
/*============================
         products
============================*/
#products{
	padding: 24.6vw 0 33.8vw;
}
#products .midashi_box{
	margin-bottom: 10.6vw;
}
#products .products_box,
#products .products_box:last-child{
    width: 76vw;
    height: 89vw;
    margin: 0 auto 5.3vw -0.2vw;
    padding: 8.5vw 9.6vw 5.3vw 8vw;
    float: none;
}
#products .products_box:last-child{
	margin-bottom: 0;
}
#products .products_box::after{
	width: 100%;
	height: 97vw;
	bottom: -6vw;
}
#products .clearfix{
	width: 100%;
	padding-right: 1vw;
	padding-left: 1vw;
}
#products .products_box h3{
	font-size: 5.8vw;
	margin-bottom: 4.6vw;
}
#products .products_box p{
	line-height: 1.7;
	font-size: 4.2vw;
}
#products .products_box img{
	width: 41.3vw;
	height: auto;
	margin: 0 auto 6.3vw;
}
#products .textbox{
	width: 70.6vw;
	font-size: 4.2vw;
	line-height: 2;
	margin: 12vw auto 10.6vw;
	padding: 10vw;
    text-align: justify;
    text-justify: inter-ideograph;
}
#products .textbox::before{
	width: 2.6vw;
	height: 2.6vw;
}
#products .textbox::after{
	width: 14.1vw;
	height:14.1vw;
	background: url("../images/top/products_after_02.png") no-repeat center;
	background-size: 14.1vw;
}
#products .btn_has_icon{
	margin: 0 auto;
}
/*============================
         works
============================*/
#works{
	padding: 27.7vw 0 14.9vw;
	background: #3f1a18;
}
#works .box_wrap{
	width: 78.6vw;
}
#works .midashi_box {
	text-align: center;
	margin-bottom: 8vw;
}
#works .midashi_jp{
	line-height: 1.3;
	margin-top: 2.6vw;
}
#works .btn_has_icon{
	margin: 4.5vw auto 0;
}
#works #feed a{
	margin-bottom: 2.4vw;
	width: 100%;
	height: auto;
}
#works #feed a img{
	display: block;
}	
	
}