@charset "utf-8";

body{
	width:100%;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 200;
	font-style: normal;
}
h1,h2,h3,h4,h5,h6,p{
	font-size: 0.8em;
	font-weight: 200;
	line-height: 1.8em;
	letter-spacing: 0.2rem;
}
h2{	width:80%; margin:20px auto 30px auto;	font-size: 14px;}
.Bold{	font-size: 16px;	margin:10px auto;	font-weight: 500;}
a{	color: initial;	text-decoration: none;}
a:hover{	opacity: 0.5}
.pc{	display: none;}
main{margin-top:0;}

@media screen and (min-width:750px){
	body{min-width: 900px;}
	.sp{	display: none;}
	.pc{	display: block;}
	h1,h2,h3,h4,h5,h6{	font-size: 1em; line-height: 2em;}
	.Bold{	font-size: 24px;	font-weight: 400;}
}
/* ------------------------------
	HEADER
------------------------------ */
.logo{	width:30%;	text-align:center;	margin:0 auto;}
.logo img{	width:90%; max-width:142px;	padding:10% 0 10% 0;}
#imageRotator{	height:65vw;}
#imageRotator img {
	width:100%;
	object-fit: cover;
	height:65vw;
  position: absolute;
	z-index: 10;
}

@media screen and (min-width:750px){
	.logo img{	width:90%; max-width:142px;	padding:20px 0 20px 0;}
	#imageRotator{	height:48vw;}
	#imageRotator img {
		width:100%;
		object-fit: cover;
		height:48vw;
	  position: absolute;
		z-index: 10;
	}
	.slider_img{ position: relative;}
 	.layer{
		width:100%;
		z-index: 15;
		position: absolute;
		bottom:38%;
		right:0;
		left:0;
		margin: auto;
		max-width: 880px;
	}
}


/* ------------------------------
	NAV
------------------------------ */
nav{	display: none; }

@media screen and (min-width:750px){
	nav{	display: block; background: #ffffff;}
	nav ul{
		display: flex;
		justify-content: center;
		align-items: center;
		padding:20px 0;
	}
	nav ul li{	padding:0 30px;}
	nav ul li a{	font-size: 18px;	font-weight: 700;	line-height: 1em;	color: #123652;}
	nav ul li a span{	font-size: 10px;	font-weight: normal;}
	nav ul li .My_big{	font-size: 28px;	color:#b5b5b6;}
	.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
	}
}
/* ------------------------------
	CONTENTS
------------------------------ */
.contents{
	text-align: center;
	padding:30px 0 0 0;
	color: #0c304b;
	background: #ffffff;
}
.contents table{
	width:85%;
	max-width: 350px;
	margin:0 auto 20px auto;
	font-size: 16px;
}
.contents table th,.contents table td{	padding:10px 0;	color: #0c304b;}
.contents table th{	text-align: left;}
.contents table td span{	font-size: 12px;}
.contents img{	width:100%;}
@media screen and (min-width:750px){
	.contents{
		text-align: left;
	}
	.contents table{
		width:100%;
		max-width: 430px;
		font-size: 18px;
		margin:0 0 20px 0;
	}

}

/* ---------	INTRO ---------- */
.intro{	background: #123652;	padding:30px 0 50px 0;}
h1{
	width:100%;
	color:#ffffff;
	font-size: 20px;
	margin:20px auto 30px auto;
}
.intro img{	width:90%;	max-width: 560px;}
.intro p{	color:#ffffff;}

@media screen and (min-width:750px){
	.intro{	padding:80px 0 100px 0; text-align: center;}
	.intro p{	font-size: 16px; line-height: 3em;}

}

/* ---------	MENU ---------- */
.menu p{	padding: 0 15px 80px 15px;}
.menu p span{	font-weight: bold;}
.menu a{	border:#0c304b solid 1px;	padding: 20px 55px; color: #0c304b;}
.menu img{	margin-top:50px;}

@media screen and (min-width:750px){
	.menu{	padding-top:80px;  overflow: hidden;}
	.menu .inner{ width:90%; max-width:900px; position:relative; margin:0 auto;}
	.menu_text{	width:50%; max-width: 450px; }
	.menu h2{	margin:0 auto 30px auto;}
	.menu img{	width: 597px;	margin-top: 0;position: absolute; top:0; left:480px;}
	.menu p{	padding: 0 0 40px 0;	margin-right: 100px;}
	.menu p.btn{	margin:70px 0 100px;}
	.menu p.btn a{	padding: 30px 95px; }
}

/* ---------	ORDER ---------- */
.order{ background: #eeefef;}
.order img{	margin-top:20px;}
.commitment .box{	width:90%; margin:20px auto 80px auto;}
.commitment .box h3{
	font-size: 18px;
	font-weight: bold;
	position: relative;
	margin-bottom:30px;
	letter-spacing: normal;
}
.commitment .box h3::after {
	position: absolute;
	bottom: -3px;
	left: 0;
	right:0;
	margin: auto;
	z-index: 2;
	content: '';
	width: 40px;
	height: 1px;
	background-color: #0c304b;
}
.order_table{	position: relative;	margin-bottom:50px;}
.order_table img{	width:80%; max-width:290px;}
.order_table p a{
	position: absolute;
	top:50%;
	left:0;
	right:0;
	z-index: 2;
	font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
	font-size: 14px;
	color: #0c304b;
}
.order img.store_img{	margin:50px auto 0 auto;}
.order .coffee_beans{
	width:50%;
	min-width:250px;
}
@media screen and (min-width:750px){
	.order .inner{
		width:90%;
		max-width: 900px;
		margin: 0 auto;
		position: relative;
	}
	.order .inner p.Bold{	margin:100px 0 50px 0;}
	.order .coffee_beans{
		position: absolute;
		top:130px;
		right:0;
		width:50%;
		max-width: 610px;
	}
	.commitment {
		width:800px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-around;
		margin-top:130px;
	}
	.commitment .box{	width:auto; margin:20px 40px 80px 40px;}
	.commitment .box h3 {
		margin-bottom:0;
		text-align: right;
		font-size: 30px;
	}
	.commitment .box h3::after {
		display: none;
	}
	.commitment .box p.Bold{	margin:0 0 0 15px; line-height: 1.2em}
	.commitment .box .text{
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		border-top: 2px solid #0c304b;
		padding-top: 20px;
	}
	.order_table{	text-align: center;}
	.consultation{	text-align: center; font-size: 20px; line-height: 2em; margin: 50px auto;}

}

/* ---------	ACCESS ---------- */
.access{
	text-align: center;	color: #0c304b; padding-top:30px;
}
.access .address{
	width:210px;
	text-align: left;
	margin:30px auto;
}
.access .email{
	margin:50px auto;
}
.access .map iframe{
	width:100%;
	height:100vw;
}
.facebook iframe{
	margin:50px auto;
}


.facebook {
   min-height: 630px
}

.facebook::after {
   content: " ";
   display: block;
   clear: both;
}

.facebook .fb-page{
	margin:50px auto;
}

@media screen and (min-width:750px){
.access .allbox{
	width:90%;
	max-width: 900px;
	margin:0 auto 40px auto;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	text-align: left;
}
.access .contact_info{
	width: 300px;
	position: relative;
	margin-bottom:50px;
}
.access .email{
	margin:0;
	position: absolute;
	bottom:0;
	right:0;
}

.access .address{
	margin:50px 0 0 0;
}
.access .address p{
	line-height: 2.5em;
	margin-right:0;
}
.access .map {
	margin-bottom: 80px;
}
.access .map iframe{
	width:100%;
	height:500px;
}

}
/* ------------------------------
	FOOTER
------------------------------ */
footer{	text-align: center; background: #123652; padding: 50px 0 10px 0;}

p.copyright{ color:#ffffff; font-size: 8px; margin-top:30px;}

@media screen and (min-width:750px){
	footer{	padding: 80px 0 10px 0;}

}