/*==============================================
normalize
==============================================*/
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{
	font-family: 'Noto Sans Japanese', sans-serif;

	margin:0;
	background: #231815;
	width: 100%;
	height: 100%;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
img{border:0}
fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}
legend{padding:0;border:0; text-align:center;}

fieldset{min-width:0;padding:0;margin:0;border:0}
legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }

*::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }

/*==============================================
Common Styles
==============================================*/

html{ height: 100%; }
p{ font-size: 14px; line-height: 1.85; color:#fff; font-weight:300; text-align:left; }
a, a:hover, a:focus, a:active, a.active { outline: 0; }
a{ color:#fff; text-decoration:none;}
a:hover, a:focus, a:active, a.active { color: #ff6868; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight:400; margin: 0; }
ul, li{ list-style-type: none; margin: 0; padding: 0;}
h2{ font-size: 30px; xtext-align: center; padding-bottom: 0px; color: #fff;}
h3{ color: #ff6868; font-size: 32px; text-transform: uppercase; }

section{
	margin: 0 auto 0;
	padding: 5vh 0;
	min-height: 110vh;
	position:relative;
	background: #231815;
}

.container { max-width: 900px; margin:auto; }
section p{ font-size: .94rem; line-height: 36px; padding-bottom: 24px; }

.table-box{ display:table; table-layout:fixed; width:100%;}
.table-box li{ display:table-cell; padding:10px 20px;}
.lead-text{font-weight:400; line-height:1.6; padding:5px; margin:auto; border:solid 1px #fff; text-align:left;}
.lead-text b{ text-align:center; display:block;}

.wrap {
	overflow: hidden;
	background: #231815;
}
/*==============================================
Header Block
==============================================*/

.navbar-brand { padding:10px; display: block;width:300px; height:300px !important; margin:auto; position:absolute; top:30px; left:0; right:0;}
.navbar-brand img{ width:100%;}
#home h2.lead{ position:absolute; margin:auto; top:350px; left:0; right:0;}

/* Menu
* --------------------------------------- */

html, body { height: 100%}

.menu { width: 50px; height: 50px; position:fixed; z-index:1000; top:10px; right:30px;}
.menu .btn {
color:#fff;
text-align:center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
xborder:solid 1px #fff;
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 0.5s, z-index 0.3s, -webkit-transform 0.5s;
transition: opacity 0.5s, z-index 0.3s, -webkit-transform 0.5s;
transition: opacity 0.5s, z-index 0.3s, transform 0.5s;
transition: opacity 0.5s, z-index 0.3s, transform 0.5s, -webkit-transform 0.5s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
/*.menu .btn.trigger:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}*/
.menu .btn.trigger:hover .line { background-color: rgba(255, 255, 255, 1);}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after { background-color: rgba(255, 255, 255, 1);}
.menu .btn.trigger .line {
display:block;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
width: 80%;
height: 4px;
background: #fff;
border-radius: 0;
-webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background: #fff;
border-radius: 0;
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s;
transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.menu .btn.trigger .line:before {
top: -12px;
-webkit-transform-origin: 20% 30%;
transform-origin: 20% 30%;
}
.menu .btn.trigger .line:after {
top: 12px;
-webkit-transform-origin: 4% 15%;
transform-origin: 4% 15%;
}
.menu .rotater {
position: absolute;
top: 70px;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu .btn-icon{
font-family:'Oswald', sans-serif;
font-size: 14px;
line-height:1;
padding-top:20px;
background-color: rgba(0, 0, 0, 0.75);
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
.menu a{ display:block; height:100%;}
.menu .btn-icon.facebook{ padding:10px;}
.facebook svg { display: block; fill: #fff; margin:auto; height:100%;}
.menu.active .btn-icon { opacity: 1;　z-index: 50;}
.menu .btn-icon.facebook:hover svg{fill:#000;}
.menu .btn-icon:hover{ background-color:rgba(255,255,255,1);}
.menu .btn-icon:hover a{ color:#000;}
.menu.active .trigger .line { height: 0px;}
.menu.active .trigger .line:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 125%;
top: -15px;
}
.menu.active .trigger .line:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 125%;
}

.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateX(-80px) ;
transform: translateX(-80px) ;
}

.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateX(-160px) ;
transform: translateX(-160px) ;
padding-top:13px;
}

.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(80px) translateX(-160px);
transform: translateY(80px) translateX(-160px);
}

.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(80px) translateX(-80px);
transform: translateY(80px) translateX(-80px);
}

.menu.active .rotater:nth-child(5) .btn-icon {
-webkit-transform: translateY(80px);
transform: translateY(80px);
}

.menu.active .rotater:nth-child(6) .btn-icon {
-webkit-transform: translateY(160px) translateX(-160px);
transform: translateY(160px) translateX(-160px);
}

.menu.active .rotater:nth-child(7) .btn-icon {
-webkit-transform: translateY(160px) translateX(-80px);
transform: translateY(160px) translateX(-80px);
}

.menu.active .rotater:nth-child(8) .btn-icon {
-webkit-transform: translateY(160px);
transform: translateY(160px);
}

#pp-nav{display:none;}

/*==============================================
About Us
==============================================*/

/*section{ padding: 0 0 ; text-align: center; }*/

fieldset{ padding: 15px 60px; text-align: center; margin-top:50px; }
fieldset legend{ text-align: center; font-size: 2.75em; color: #fff; font-family: 'Lobster'; border: none; }
.reason{ font-size:18px; font-style:italic; margin-bottom:15px; padding:0;}
.lead{ font-size: 26px; text-align: center; padding-bottom: 17px; color: #f7f7f7; font-weight:500; line-height:1.6; text-shadow: 0 6px 8.896px #000/*,0 -2px 0.5px #fff*/;}
.lead span{ font-size: 29px; font-weight:700;}
.lead span.small{ font-size: 27px;}


.link{ display:inline-block; padding:10px; color:#fff; xborder:solid 2px #fff; position:relative; z-index:100; overflow:hidden;}
.link:after, .link:before{content:""; display:block; position:absolute;}
.link:hover{border-color:#000; color:#fff;}
.link:after{width:100%; height:45px; background:rgba(255,255,255,0); top:0; left:0; z-index:-10; transition-delay:0.2s;}
.link:hover:after{top:0; background:rgba(0,0,0,1);}

/*==============================================
access
==============================================*/

#map_canvas{
    width: 55%;
    height: 58vh;
    position: absolute !important;
    top: 33vh;
    z-index: 2;
    right: 5%;
}


.address{ margin:20px 0; color:#fff;}
.address a{ color:#fff; }
.address a:hover{ color:#ff6868; }
.name{ text-align:center; font-weight:700; }
/*==============================================
Footer Part
==============================================*/

footer { padding:0}
.footer-content{ max-width: 320px; margin: 0 auto; }
.copyright {
	margin-bottom: 0;
	line-height: 20px;
	text-align: left;
	font-size: .7rem !important;
	padding: 3em 0 0 !important;
}

/*==============================================
instagram feed
==============================================*/

#instafeed{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}

#instafeed li{
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1;
-webkit-flex-basis:calc(100%/5);
-ms-flex-preferred-size:calc(100%/5);
flex-basis:calc(100%/5);
line-height:0;
-webkit-transition:opacity .2s ease-in-out;
transition:opacity .2s ease-in-out;
border:.5vw solid transparent
}
#instafeed li:hover{opacity:.8}
#instafeed li img{ width:100%;}

@media screen and (min-width:1450px){#instafeed li{-webkit-flex-basis:calc(100%/6);
-ms-flex-preferred-size:calc(100%/6);
flex-basis:calc(100%/6)}
}
@media screen and (max-width:1140px){#instafeed li{-webkit-flex-basis:calc(100%/4);
-ms-flex-preferred-size:calc(100%/4);
flex-basis:calc(100%/4)}
}
@media screen and (max-width:768px){#instafeed li{-webkit-flex-basis:calc(100%/3);
-ms-flex-preferred-size:calc(100%/3);
flex-basis:calc(100%/3)}
}


/*==============================================
Responsive Part
==============================================*/
@media all and (min-width: 641px) {
.sp {display: none;}
}

@media all and (max-width: 640px) {
.sp {display: inline;}

.navbar-brand { -webkit-transform:scale(0.6); transform:scale(0.6); top:-50px;}
header h2.lead{top:220px;}
.lead{ font-size: 15px; line-height:1.3;}
#coffee .lead, #goods .lead{ line-height:1.6;}
.lead span{ font-size:20px;}
.lead span.small{font-size:15px;}
.table-box li{ display:block; padding:5px 20px;}
.lead-text{width:100%;}
.menu { top:10px; right:10px;}

.container { margin:0; padding:0; }
fieldset { padding: 10px; margin-top:0;}
fieldset legend { font-size: 2.0em; padding:0 30px;}
h1,h2{ font-size:20px; }
.reason{ font-size:16px; margin-bottom:10px;}
section p { font-size: 0.8rem; line-height: 24px; padding-bottom: 24px; }
#map_canvas{ height:250px; }

.address{ font-size:0.85rem;}
}



/*==============================================
renewal_style
==============================================*/

.global_header {
	position: fixed;
	top: 0;
	z-index: 100;

	width: 100%;
	height: 70px;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	background: #231815;
	}
.global_header h1{
	width: 50px;
	height: 50px;
	margin: 10px 0 10px 36px;
	}
.global_header h1 img,
.global_header ul li img{
	width: 100%;
	height: auto;
	}

.global_header ul {
	width: calc( 100% - 86px);
	position: relative;
	}
.global_header ul li{
	position: absolute;

	top: 20px;
	right: 166px;
	
	width: 185px;
	height: 30px;
	}


.fit-img {
	position: relative;
	z-index: 1;
	height: 100vh;
	width: 100%;
	object-fit: cover;
	}
.title-img {
	transform: scale(0.5);
	transform-origin: left top;
	}
.title-img-r {
	transform: scale(0.5);
	transform-origin: right top;
	}
.inline-icon {
	transform: scale(0.5);
	transform-origin: left top;
	margin: -38px 0;	
	}

.contents {
	z-index: 2;
	font-family: 'Noto Serif JP', serif;

	position: absolute;
	top: 40vh;
	left: 6%;
	text-align: left;
	}
.contents.c-02 {
	top: 48vh;
	left: 7%;
	}
.c-04 {top: 50vh;}

.contents h2{
	height: 100px;
	margin: 0 0 10px;
	}
.contents h3{
	color: #fff;
	font-family: 'Noto Serif JP', serif;
	font-size: 18px;
	letter-spacing: .9em;

	padding: 0 0 10px;
	margin: 0;
	}
.contents p{
	font-family: 'Noto Serif JP', serif;
	font-size: 16px;
	line-height: 1.6em;
	letter-spacing: 1px;

	padding: 1em 0 0;
	margin: 0;
	}

.sub-contents {
	font-family: 'Noto Serif JP', serif;
	text-align: right;

	z-index: 2;
	position: absolute;
	top: 26vh;
	right: 6%;
	}
.sub-contents h3{
	height: 75px;
	margin: 0 0 10px;
	padding: 0 13px 0;
	}
.sub-contents p{
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0;
	text-align: right;

	padding: 0 0 2em;
	margin: 0;
	}

.fadeINN {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
	}
@keyframes fadeIn {
    0% {opacity: 0; transform: translateY(20px);}
    100% {opacity: 1; transform: translateY(0px);}
	}
@-webkit-keyframes fadeIn {
    0% {opacity: 0; transform: translateY(20px);}
    100% {opacity: 1; transform: translateY(0px);}
	}

.c-07 iframe {
	margin: 20px 60px 0;
	width: 660px !important;
	}

/*==============================================
Responsive Part
==============================================*/
@media all and (max-width: 640px) {

.pc {display: none !important;}


section {
	padding: 0;
	min-height: 106vh;
	}

.global_header h1 {
	margin: 10px 0 10px 16px;
	}
.global_header ul li {
    position: absolute;
    top: 24px;
    right: 76px;
    width: 105px;
    height: 30px;
}

.contents {
    z-index: 2;
    font-family: 'Noto Serif JP', serif;
    position: absolute;
    top: 40vh;
    left: 3%;
    text-align: center;
    width: 94%;
    text-shadow: 1px 1px #000;
}
.contents p{
	font-family: 'Noto Serif JP', serif;
	font-size: .8rem;
	line-height: 1.6em;
	letter-spacing: 1px;

	padding: 1em 0 0;
	margin: 0;
	text-align: center;
	}

.sub-contents {
    left: 3%;
    text-align: center;
    width: 94%;
    text-shadow: 1px 1px #000;
	}
.sub-contents p {
	text-align: center;
	}

.c-01 { top: 46vh;}
.contents.c-02 {top: 7vh;}
.c-03 {top: 27vh;}

.c-04 {top: 8vh;}
.c-04 h3{
	margin: -3vw 0 0;
	}
.c-04 .title-img {
	width: 36% !important;
	}
.c-04-01 {
	xtop: 30vh;
	xposition: absolute;
	width: 100%;
	display: block;
	text-align: center;
	margin: -4vw 0 0 !important;
	}


.c-05 {top: 16vh;}
.c-07 {top: 11vh;}
.c-08 {top: 11vh;}

.c-07 .title-img{
	width: 80%;	
	}
.c-07 iframe {
	margin: 20px auto 0;
	width: 90% !important;
	}


.inline-icon {
transform: none;
transform-origin: center top;
margin: 10px auto;
width: 50%;
display: block;
}

.contents h2 {
    xheight: 60px;
    height: auto;
}
.contents h3 {
	text-align: center;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 10px 0 10px;
	line-height: 1.6em;
}


.sub-contents h3 {
	height: auto;
	margin: 0 auto 10px;
	padding: 0 13px 0;
}

.title-img {
    transform: none;
    transform-origin: center top;
    xwidth: 80%;
    width: 50%;
}
.title-img-r {
    transform: none;
    transform-origin: center top;
    width: 30%;
}


#map_canvas {
    width: 86%;
	height: 35vh;
	position: absolute !important;
	top: 61vh;
    z-index: 2;
    right: 7%;
}





}