@charset "utf-8";
@keyframes contactLink{0%{background-position:100% 0;}50%{background-position:0% 0;}100%{background-position:-100% 0;}}
*,*:before,*:after{box-sizing:border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,main{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}address{font-style:normal;}ul,ol,li{list-style:none;}

/*base*/
html,body{width:100%;height:100%;}
html{font-size:62.5%;}
body{
	width:100%;
	background-color:#240000;
	font-family:"Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
	font-style:normal;
	line-height:2.0;
	color:#f1e7ce;
	text-align:center;
	overflow:hidden;
}
body.loadEnd{overflow-y:auto;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{
	background-color:transparent;
	border-left:0;
}
::-webkit-scrollbar-thumb{
	border-radius:4px;
	box-shadow:inset 0;
}
*[display="none"]{display:none!important;}
a{
	color:#f1e7ce;
	text-decoration:none;
	transition:all 0.8s;
}
a[data-not]:hover{color:#f1e7ce;}
a:not([data-not]):hover{opacity:0.4;}
a img,button img,a svg,button svg{
	pointer-events:none;
	transition:all 0.8s;
}
a:not([data-not]):hover img,
a:not([data-not]):hover svg,
button:hover img,
button:hover svg{opacity:0.7;}
a svg > *,
button svg > *{transition:all 0.8s;}
a svg > *,
button svg > *{fill:#f1e7ce;}
button{
	padding:0;
	outline:none;
	border:none;
	background-color:transparent;
}
img,svg{
	display:block;
	width:100%;
	height:auto;
	line-height:1.0;
	vertical-align:top;
}
*.hideEl{display:none!important;}
#loading,
#mainFV,
#mainFV .swiper,
#mainFV .swiper-slide{
	width:100%;
	height:100vh;
}
#mainFV{background-color:#240000;}
#mainFV .swiper-slide:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#loading{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	background-color:#f1e7ce;
	z-index:1000001;
	transition:background-color 1.6s ease-in-out 0.2s;
}
#loading svg{
	display:block;
	position:absolute;
	opacity:0;
	line-height:1.0;
	vertical-align:top;
	transition:opacity 0.8s ease-in-out 0.4s;
}
#loading svg > *{
	fill:#240000;
	transition:fill 0.8s ease-in-out 0.4s;
}
.loadEnd #loading{background-color:transparent;}
.loadFirst #loading svg{opacity:1;}
.loadEnd #loading svg > *{fill:#f1e7ce;}
footer{
	position:relative;
	width:100%;
	background-color:#240000;
	z-index:1;
}
footer .ftLogo svg{
	display:block;
	margin:0 auto;
}
footer .ftLogo svg > *{fill:#f1e7ce;}
footer #copyrights{
	display:block;
	line-height:1.0;
	font-size:1.0rem;
	vertical-align:top;
	text-align:center;
}
main{
	width:100%;
	position:relative;
}
main > *{
	width:100%;
	position:relative;
	margin:0 auto;
	z-index:1;
}
section[data-bg="red"]{background-color:#240000;}
#shopBox .shopSet,
#shopBox .shopSet .shopLogo{
	opacity:0;
	transition:opacity 0.8s;
}
#shopBox .shopSet.show,
#shopBox .shopSet.show .shopLogo{opacity:1;}
#shopBox .shopSet{cursor:pointer;}
#shopBox .shopSet figure{
	position:relative;
	width:100%;
	overflow:hidden;
}
#shopBox .shopSet figcaption{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transform-origin:center top;
	transform:translateY(620px);
	transition:transform 0.4s;
}
#shopBox .shopSet:hover figcaption{transform:translateY(0px);}
#shopBox .shopSet figcaption:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	transition:all 0.4s;
	opacity:0;
}
#shopBox #marutaya figcaption:before{background-color:rgba(4,1,4,0.5);}
#shopBox #coffee figcaption:before{background-color:rgba(3,0,0,0.5);}
#shopBox .shopSet:hover figcaption:before{opacity:1;}
#shopBox .shopSet .snsList{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	transition:all 0.4s;
	opacity:0;
	z-index:1;
}
#shopBox .shopSet:hover figcaption .snsList{opacity:1;}
#shopBox .shopSet .snsList li{display:inline-block;}
#shopBox .shopSet .snsList li a{display:block;}
#shopBox #marutaya .snsList li.offical a{border:1px solid #fff;}
#shopBox #coffee .snsList li.offical a{border:1px solid #f1e7ce;}
#shopBox #marutaya .snsList li svg > *{fill:#fff;}
#shopBox .shopSet .shopLogo{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
}
#shopBox .shopSet .shopLogo:before{
	content:"";
	display:block;
	width:100%;
	height:0;
	padding-top:67.09677%;
}
#shopBox .shopSet .shopLogo p{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#shopBox #marutaya{background-color:#000;}
#shopBox #marutaya .shopLogo img{
	width:31.29%;
	margin-top:-6.5%;
}
#shopBox #coffee{
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:contain;
	background:url("../img/shop-cooffee-bg.jpg");
}
#shopBox #coffee .shopLogo img{width:28.387%;}
#betweenBox{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	width:100%;
	overflow:hidden;
	z-index:1;
}
#betweenBox .txtBox{display:block;}
#btwBg{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	transition:opacity 0.4s;
	z-index:-1;
}
#btwBg.hide{opacity:0;}
#btwBg picture,
#btwBg img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center top;
}
.secTtl{text-align:center;}
.secTtl img{
	width:auto;
	display:block;
	margin:0 auto;
	vertical-align:top;
}
#companyBox .companyList > *{
	display:block;
	position:relative;
	text-align:left;
}
#companyBox .companyList dt span{
	display:flex;
	justify-content:space-between;
}
#companyBox .companyList dt span i{
	display:block;
	font-style:normal;
}
/*#companyBox .companyList dd a[target="_blank"]:after,
#contactBox a[target="_blank"]:after{
	content:"";
	display:inline-block;
	width:14px;
	height:14px;
	margin-left:6px;
	background:url("../img/blank-icon.svg") no-repeat center top / contain;
}*/
#contactBox .contactLink{
	display:table;
	margin:0 auto;
	opacity:0;
	transition:opacity 0.4s;
}
#contactBox.show .contactLink{opacity:1;}
#contactBox .contactLink a{
	display:block;
	position:relative;
	border:1px solid #f1e7ce;
	background-color:#f1e7ce;
}
#contactBox .contactLink a:before{
	content:"";
	display:block;
	position:absolute;
	left:17.1%;
	top:48.351648%;
	width:8.551%;
	height:39.56%;
	background-image:linear-gradient(90deg, #f1e7ce,#f1e7ce 50%,#240000 50%,#240000);
	background-size:200%, 100%;
	animation-name:contactLink;
	animation-duration:1.4s;
	animation-timing-function:cubic-bezier(0.83, 0, 0.17, 1);
	animation-iteration-count:infinite;
	z-index:0;
}
#contactBox .contactLink a:hover,
#contactBox .contactLink a:hover svg{opacity:1;}
#contactBox .contactLink a .contactBnr{
	position:relative;
	z-index:2;
}
#contactBox .contactLink a .contactBnr use{fill:#f1e7ce;}
#contactBox .contactLink a:hover .contactBnr use{fill:#240000;}
#contactBox .contactLink .contactArrowBg{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
#contactBox .contactLink .contactArrowBg use{fill:#240000;}
#contactBox .contactLink a:hover .contactArrowBg use{fill:#f1e7ce;}
#contactBox .contactLink a .animeArrow{
	display:block;
	position:absolute;
	width:7.6%;
	top:0;
	left:17.57719%;
	margin-top:12.114%;
	animation:1.5s ease-out infinite alternate forwards running contactLink;
}
@media screen and (min-resolution:2dppx){
	#shopBox #coffee{background:url("../img/shop-cooffee-bg@2x.jpg");}
}
@media screen and (max-width:1079.98px){
	body{font-size:1.5rem;}
	*[data-type="pc"]{display:none!important;}
	#loading svg{
		width:56.977vw;
		max-width:320px;
	}
	.secTtl img{height:30px;}
	#shopBox{padding:56px 0 148px;}
	#betweenBox{min-height:450px;}
	#betweenBox .txtBox{width:92%;}
	#betweenBox .btwTtl{
		margin-bottom:56px;
		font-size:2.3rem;
		line-height:1.6;
	}
	#betweenBox .txtBox p{line-height:2.1;}
	#betweenBox .txtBox p+p{margin-top:21px;}
	#companyBox,
	#contactBox{
		padding-right:4%;
		padding-left:4%;
	}
	#contactBox{padding-bottom:150px;}
	#contactBox .secTtl{margin-bottom:44px;}
	#contactBox .contactLink{
		width:250px;
		margin-top:20px;
	}
	#contactBox .contactLink+p{margin-top:20px;}
	footer{padding:18px 0;}
	footer .ftLogo svg{width:95px;}
	footer #copyrights{margin-top:30px;}
}
@media screen and (max-width:767.98px){
	#mainFV .swiper[data-slider="pcType"]{display:none!important;}
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv-sp01.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv-sp02.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv-sp03.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv-sp04.jpg");}
	#mainFV .swiper-slide[data-int="5"]:before{background-image:url("../img/mv-sp05.jpg");}
	#shopBox .shopSet{
		width:78vw;
		margin:0 auto;
	}
	#shopBox .shopSet .shopLogo{transition-delay:0.4s;}
	#shopBox .shopSet+.shopSet{margin-top:56px;}
	#shopBox .shopSet .snsList{position:relative;}
	#shopBox .shopSet .snsList li.offical{
		width:64%;
		margin:0 18%;
	}
	#shopBox .shopSet .snsList li:not(.offical){margin:32px 10px 0;}
	#shopBox .shopSet .snsList li:not(.offical){width:9.6774%;}
	#shopBox .shopSet .snsList li.snsTw{width:10.645152%;}
	#shopBox .shopSet .snsList li:not(.offical) svg{
		width:100%;
		height:auto;
	}
	#betweenBox{padding:75px 0;}
	#companyBox{padding-top:75px;}
	#companyBox .secTtl{margin-bottom:50px;}
	#companyBox .companyList{
		width:78vw;
		margin:0 auto;
	}
	#companyBox .companyList > *{line-height:1.6;}
	#companyBox .companyList dt{margin-bottom:10px;}
	#companyBox .companyList dt span,
	#companyBox .companyList dt span:after{width:76px;}
	#companyBox .companyList dd{
		margin-bottom:14px;
		padding-bottom:14px;
		border-bottom:1px solid #8b7467;
	}
	#companyBox .companyList dd:last-of-type{margin-bottom:0;}
	#contactBox{padding-top:125px;}
}
@media screen and (max-width:767.98px) and (min-resolution:2dppx){
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv-sp01@2x.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv-sp02@2x.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv-sp03@2x.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv-sp04@2x.jpg");}
}
@media screen and (min-width:768px) and (max-width:1079.98px){
	*[data-type="pc"]{display:block!important;}
	*[data-type="sp"]{display:none!important;}
	#shopBox .shopSet{
		width:620px;
		margin-left:auto;
		margin-right:auto;
	}
	#shopBox .shopSet+.shopSet{margin-top:56px;}
	#shopBox .shopSet .snsList{width:100%;}
	#shopBox .shopSet .snsList li.offical{
		width:53.387%;
		margin:0 23.3065%;
	}
	#shopBox .shopSet .snsList li:not(.offical){margin:65px 21px 0;}
	#shopBox .shopSet .snsList li:not(.offical) svg{
		width:auto;
		height:50px;
	}
	#betweenBox{padding:150px 0;}
	#companyBox{padding-top:196px;}
	#companyBox .secTtl{margin-bottom:70px;}
	#companyBox .companyList{
		width:700px;
		margin:0 auto;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		overflow:hidden;
	}
	#companyBox .companyList > *{line-height:1.0;}
	#companyBox .companyList dt{
		width:248px;
		position:relative;
		padding-left:8px;
	}
	#companyBox .companyList dt:before{
		content:"";
		display:block;
		width:796px;
		height:1px;
		position:absolute;
		bottom:0;
		left:0;
		background-color:#8b7467;
	}
	#companyBox .companyList dt span,
	#companyBox .companyList dt span:after{width:85px;}
	#companyBox .companyList dd{width:calc(100% - 248px);}
	#companyBox .companyList dt,
	#companyBox .companyList dd{
		margin-bottom:27px;
		padding-bottom:28px;
	}
	#companyBox .companyList dd{letter-spacing:0.18rem;}
	#companyBox .companyList dt:last-of-type,
	#companyBox .companyList dd:last-of-type{margin-bottom:0;}
	#contactBox{padding-top:187px;}
}
@media screen and (min-width:768px) and (max-width:1079.98px) and (orientation:portrait){
	#mainFV .swiper[data-slider="pcType"]{display:none!important;}
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv-sp01.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv-sp02.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv-sp03.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv-sp04.jpg");}
}
@media screen and (min-width:768px) and (max-width:1079.98px) and (orientation:landscape){
	#mainFV .swiper[data-slider="spType"]{display:none!important;}
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv01.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv02.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv03.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv04.jpg");}
	#mainFV .swiper-slide[data-int="5"]:before{background-image:url("../img/mv05.jpg");}
}
@media screen and (min-width:768px) and (max-width:1079.98px) and (orientation:portrait) and (min-resolution:2dppx){
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv-sp01@2x.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv-sp02@2x.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv-sp03@2x.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv-sp04@2x.jpg");}
}
@media screen and (min-width:768px) and (max-width:1079.98px) and (orientation:landscape) and (min-resolution:2dppx){
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv01@2x.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv02@2x.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv03@2x.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv04@2x.jpg");}
	#mainFV .swiper-slide[data-int="5"]:before{background-image:url("../img/mv05@2x.jpg");}
}
@media screen and (min-width:1080px){
	body{font-size:1.6rem;}
	*[data-type="sp"]{display:none!important;}
	#loading svg{width:460px;}
	.secTtl img{height:32px;}
	#mainFV .swiper[data-slider="spType"]{display:none!important;}
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv01.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv02.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv03.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv04.jpg");}
	#mainFV .swiper-slide[data-int="5"]:before{background-image:url("../img/mv05.jpg");}
	#shopBox{
		display:flex;
		justify-content:space-between;
		padding:112px 0 296px;
	}
	#shopBox .shopSet{width:48.4375%;}
	#shopBox #coffee{transition-delay:0.4s;}
	#shopBox #marutaya .shopLogo{transition-delay:0.8s;}
	#shopBox #coffee .shopLogo{transition-delay:1.2s;}
	#shopBox .shopSet .snsList{width:100%;}
	#shopBox .shopSet .snsList li.offical{
		width:53.387%;
		margin:0 23.3065%;
	}
	#shopBox .shopSet .snsList li:not(.offical){margin:65px 21px 0;}
	#shopBox .shopSet .snsList li:not(.offical) svg{
		width:auto;
		height:50px;
	}
	#betweenBox{height:900px;}
	#betweenBox .txtBox{width:796px;}
	#betweenBox .btwTtl{
		margin-bottom:112px;
		font-size:2.7rem;
		line-height:1.0;
	}
	#betweenBox .txtBox p{line-height:2.375;}
	#betweenBox .txtBox p+p{margin-top:19px;}
	#companyBox{padding-top:318px;}
	#companyBox,
	#contactBox{
		padding-right:calc(50% - 398px);
		padding-left:calc(50% - 398px);
	}
	#companyBox .secTtl{margin-bottom:98px;}
	#companyBox .companyList{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	#companyBox .companyList > *{line-height:1.0;}
	#companyBox .companyList dt{
		width:248px;
		position:relative;
		padding-left:8px;
	}
	#companyBox .companyList dt:before{
		content:"";
		display:block;
		width:796px;
		height:1px;
		position:absolute;
		bottom:0;
		left:0;
		background-color:#8b7467;
	}
	#companyBox .companyList dt span,
	#companyBox .companyList dt span:after{width:85px;}
	#companyBox .companyList dd{width:calc(100% - 248px);}
	#companyBox .companyList dt,
	#companyBox .companyList dd{
		margin-bottom:27px;
		padding-bottom:28px;
	}
	#companyBox .companyList dd{letter-spacing:0.18rem;}
	#companyBox .companyList dt:last-of-type,
	#companyBox .companyList dd:last-of-type{margin-bottom:0;}
	#contactBox{
		padding-top:250px;
		padding-bottom:328px;
	}
	#contactBox .secTtl{margin-bottom:88px;}
	#contactBox .contactLink{
		width:421px;
		margin-top:40px;
	}
	#contactBox .contactLink+p{margin-top:40px;}
	footer{padding:35px 0;}
	footer .ftLogo svg{width:190px;}
	footer #copyrights{margin-top:60px;}
}
@media screen and (min-width:1080px) and (min-resolution:2dppx){
	#mainFV .swiper-slide[data-int="1"]:before{background-image:url("../img/mv01@2x.jpg");}
	#mainFV .swiper-slide[data-int="2"]:before{background-image:url("../img/mv02@2x.jpg");}
	#mainFV .swiper-slide[data-int="3"]:before{background-image:url("../img/mv03@2x.jpg");}
	#mainFV .swiper-slide[data-int="4"]:before{background-image:url("../img/mv04@2x.jpg");}
	#mainFV .swiper-slide[data-int="5"]:before{background-image:url("../img/mv05@2x.jpg");}
}
@media screen and (min-width:1080px) and (max-width:1283.98px){
	#shopBox{
		padding-left:calc(50% - 540px);
		padding-right:calc(50% - 540px);
	}
}
@media screen and (min-width:1284px){
	#shopBox{
		padding-left:calc(50% - 640px);
		padding-right:calc(50% - 640px);
	}
}