/* @override 
	https://frofro-cafe.steam-design.biz/css/common.css
	https://fro-cafe.com/css/common.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap');

@charset "UTF-8";
/* CSS Document */
/* ========== pc / sp ========== */

.pc {
	
}

.sp {
	display: none;
}


/* ========== font / color ========== */
html {
	font-size: 62.5%;
	font-family: "Noto Sans JP", system-ui, sans-serif;
	font-weight: 300;
}


body {
	width: 100%;
	height: 100%;
    line-height: 1.4;
	color: #111;
}

body {
	width: 100%;
	height: 100%;
    line-height: 1.4;
	color: #111;
}

* {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
 
a,
a:visited {
    color: inherit;
	text-decoration: none;
}

/* ========== text ========== */

.naka-guro {
	display: inline-block;
	margin: 0 -0.2em 0 -0.2em;
}

sup {
	font-size: 0.6em;
	position: relative;
	vertical-align: text-top;
}

.align_center {
	text-align: center;
}

.align_left{
	text-align: left;
}

.align_right {
	text-align: right;
}

.clear_both {
	clear: both;
}

p[class^='label_'] {
	clear: both;
	display: inline-block;
	background-color: #555;
	color: #fff;
	line-height: 1;
	font: 1.6rem "DINNextLTPro-Regular", "Roboto",sans-serif;
	text-transform: uppercase;
	min-width: 164px;
	text-align: center;
	padding: 1em 1em 0.7em 1em;
}

p.label_bk {
	background-color: #050505;
}


#sec_access h3,
#sec_info h3 {
	font-size: 4.8rem;
	line-height: 1;
	font-family: "DINNextLTPro-UltraLight", "Roboto", sans-serif;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
}

strong {
	font-weight: 500;
}
.red {
	color: red;
}


/* ========== float / clear ========== */

.float_right {
	float: right;
}

.float_left {
	float: right;
}




/* ========== base box ========== */
#wrapper {
	position: relative;
	z-index: 0;
}

#wrapper::before,
#wrapper::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 14px;
	background-color: #050505;
}

#wrapper::after {
	left: 50%;
	background-color: #11c5ec;
}


#contents_main {
	min-width: 1024px;
	box-sizing: border-box;
}

#overlay {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: rgba(0,0,0,0.85);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	display: none;
}





/* ========== buttons ========== */


p.btn_box_more {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
}

p.btn_box_more a {
	display: inline-block;
	border: 3px solid #050505;
	padding: 1.3em 1.7em 1.2em 1.7em;
	transition: 0.3s;
}

p.btn_box_more a:hover {
	background-color: #11c4eb;
}


/* pagetop */
p#btn_pagetop {
	z-index: 2000;
	width: 100%;
	font-family: "DINNextLTPro-Regular", "Roboto", sans-serif;
	font-size: 1.2rem;
}

p#btn_pagetop a.disable {
	opacity: 0;
}


p#btn_pagetop a {
	position: fixed;
	right: 0px;
	bottom: 0px;
	display: block;
	width: 80px;
	height: 80px;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.2);
	padding-top: 33px;
	transition: 0.3s;
	
}

p#btn_pagetop a:hover {
	background-color: rgba(0,0,0,0.8);
}

/* ========== utility vertical ========== */

#box_utlity {
	background-color: transparent;
	width: 52px;
	z-index: 1000;
	position: fixed;
	top: 0px;
	padding-top: 18px;
	left: 0;
	box-sizing: border-box;
	height: calc(100% - 114px);
	/*border-right: 1px solid #ddd;*//* 幅目安用 */
	transition: 0.5s;
}

#box_utlity.scroll {
	top: 0;
	height: calc(100% - 66px);
}


#box_utlity ul {
	width: 32px;
	margin: 0 auto 0 auto;
}

#box_utlity ul li {
	text-align: center;
	margin: 0 auto 8px auto;
}

#box_utlity ul li a {
	display: block;
	overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  transition: 0.3s;
}

#box_utlity ul li.tw a,
#box_utlity ul li.insta a,
#box_utlity ul li.mail a {
width: 32px;
height: 32px;
background-image: url(/assets_common/icon_sns_contact.svg);
background-repeat: no-repeat;
background-size: 360% auto ;
background-position: 2px 2px;
opacity: 0.3;

}


#box_utlity ul li.insta a {
background-position: 2px -33px;
}


#box_utlity ul li.mail a {
background-size: 340% auto ;
	height: 24px;
background-position: 3px -64px;
}

#box_utlity ul li:nth-of-type(1) {
	margin-bottom: 12px;
}

#box_utlity ul li:nth-of-type(1) a {
	text-indent: 0;
	overflow: visible;
}


#box_utlity ul li a:hover {
	opacity: 0.8;
}



#box_utlity div.inner.rotate {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	position: relative;
	width: 480px;
	height: 25px;
	padding-top: 12px;
	top: 480px;
	
	transform-origin: top left;
	transform: rotate(-90deg);
}


#box_utlity div.inner.rotate p {
		line-height: 1.1;
		margin: 0;
		padding: 0 0 0 0;
}


#box_utlity div.site_name {
	position: relative;
	margin-left: 8px;
}

#box_utlity p.site_name {
		position: relative;
		font-size: 1rem;
		color: #999;
		font-family: "DINNextLTPro-Regular", "Roboto", sans-serif;
}

#box_utlity div.inner.rotate p.open_time {
		margin-right: 10px;
		margin-bottom: 0;
		font-family: "DINNextLTPro-Medium", "Roboto", sans-serif;
		text-transform: uppercase;
		font-size: 2rem;
		vertical-align: middle;
		padding-top: 0;
		padding-right: 0px;
}

#box_utlity p.open_time strong {
	font-size: 2.4rem;
}


/* ========== global width ========== */


#box_header,
nav#gnav,
#box_bt_sns,
#box_footer {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.w10p {
	width: 10%;
}

.w20p {
	width: 20%;
}

.w30p {
	width: 30%;
}

.w40p {
	width: 40%;
}

.w50p {
	width: 50%;
}

.w60p {
	width: 60%;
}

.w70p {
	width: 70%;
}

.w80p {
	width: 80%;
}

.w90p {
	width: 90%;
}



/* ========== header ========== */

#box_header {

	padding-top: 50px;
	padding-bottom: 26px;
}


h1,
h1 a {
	width: 168px;
	height: 168px;
	display: block;
}

h1 a {
	overflow: hidden;
	transition: 0.3s;
}

h1 a:hover {
	transform: scale(1.1,1.1 );
}


h1 a img {
	/*max-width: initial;*/
	max-width: 405%;
	height: 160px;
	position: relative;
	left: 4px;
	top: 3px;
}



/* ========== /header ========== */



/* ========== gnav ========== */

nav#gnav {
	
	padding-top: 70px;
	overflow: hidden;
}


nav#gnav ul {
	display: flex;
	justify-content: flex-end;
}

nav#gnav ul li {
	margin-right: 36px;
	font-size: 2rem;
	line-height: 1;
	font-family: "DINNextLTPro-Regular", "Roboto", sans-serif;
}



nav#gnav ul li a {
	display: block;
	transition: 0.3s;
}

nav#gnav ul li a:hover {
	color: #3ac3ff;
}



body.home nav#gnav ul li:first-child a {
	pointer-events: none;
	color: #ccc;
}

body.home nav#gnav ul li:nth-of-type(2) a {
	color: red !important;
}



/* 4-1*/
body.home nav#gnav ul li:first-child {
	display: none;
}

/* ========== /gnav ========== */



/* ============ Access ============= */



#sec_access {
	margin-top: 125px;
}




#sec_access>.inner {
	background-color: #050505;
	color: #fff;
	display: flex;
	margin-top: 24px;
}

#sec_access>.inner>div {
	width: 50%;
	box-sizing: border-box;
}

#sec_access div#gmap {
	background-color: #333;
	height: 624px;
}


#sec_access>.inner>div#box_address {
	padding: 48px;
	padding-bottom: 0;
	padding-top: 28px;
}


#box_address dd.art_map {
	margin-top: 34px;
}

#box_address dd.art_map a {
	display: block;
}


#box_address dt{
	font-size: 1.4rem;
	color: #3ac3ff;
	text-transform: uppercase;
	font-family: "DINNextLTPro-Light", "Roboto", sans-serif;
}

#box_address dd {
	margin-top: 0.5em;
}

#box_address dd p{
	font-size: 1.5rem;
	line-height: 1.7;
}


#box_address dd p {
	margin-top: 0.2em;
}

#box_address dd p.notice,
#box_address dd p small,
#box_address dt:nth-of-type(3)+dd>p {
	font-size: 1.2rem;
}

#box_address dt:nth-of-type(3)+dd>p {
	margin-top: 1em;
	line-height: 2.2;
}

#box_address dt:nth-of-type(3)+dd>p span.blue {
	color: #9be1fe;
}

#box_address dd p small {
	position: relative;
	top: -0.05em;
	margin-left: 0.7em;
}

#box_address dd p.tel strong,
#box_address dd p.hour strong{
	font-size: 2.4rem;
	font-family: "DINNextLTPro-Regular", "Roboto", sans-serif;
}

#box_address dt:nth-of-type(2),
#box_address dt:nth-of-type(3) {
	margin-top: 52px;
	position: relative;
}

#box_address dt:nth-of-type(2)::before,
#box_address dt:nth-of-type(3)::before {
	content: "";
	display: block;
	height: 1px;
	width: 70px;
	position: absolute;
	top: -30px;
	background-color: #777;
}


/* ============ /Access ============= */




/* ========== SNS / footer ========== */

#box_bt_sns,
#box_footer {

}

#box_footer footer {
	padding-top: 84px;
	padding-bottom: 124px;
}

#box_bt_sns {
	margin-top: 84px;
	border-top: 5px solid #050505;
	border-bottom: 5px solid #050505;
	padding: 36px 0 36px 0;
	text-align: center;
}


#box_bt_sns p:first-child {
	font-size: 1.8rem;
	font-weight: 500;
}

#box_bt_sns ul {
	padding: 22px 0 15px 0;
	display: flex;
	justify-content: center;
	
}

#box_bt_sns ul li a {
	display: block;
	width: 48px;
	height: 48px;
	overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  
  background-image: url(/assets_common/icon_sns_contact.svg);
  background-repeat: no-repeat;
  background-size: auto 298%;
  
  background-position: 1px 1px;
  
}

#box_bt_sns ul li.insta a {
margin-left: 20px;
  background-position: 1px -55px;
}

#box_bt_sns ul li.tw a:hover {
  background-position: -69px 1px;
}

#box_bt_sns ul li.insta a:hover {
  background-position: -69px -55px;
}



#box_bt_sns p.accounts_name {
	font-size: 2.4rem;
	font-family: "DINNextLTPro-Medium", "Roboto", sans-serif;
	
}



#box_footer {
	text-align: center;
}

#box_footer ul.logos {
	display: flex;
	justify-content: center;
}

#box_footer ul.logos li {
	text-align: center;
}

#box_footer ul.logos li a {
	display: block;
	height: 135px;
	width: 135px;
	overflow: hidden;
}

#box_footer ul.logos li a img {
	height: 135px;
	width: auto;
}


#box_footer ul.logos li.cafe {
	margin-right: 24px;
}


#box_footer ul.logos li.cafe a {
	position: relative;
}

#box_footer ul.logos li.cafe a img {
	/*max-width: initial;*/
	max-width: 410%;
	height: 130px;
	position: relative;
	left: 3px;
	top: 3px;
}



#box_footer p.name,
#box_footer p.copyright {
	font-family: "DINNextLTPro-Light", "Roboto", sans-serif;
}


#box_footer p.name strong {
	font-family: "DINNextLTPro-Medium", "Roboto", sans-serif;
}


#box_footer p.name {
	margin-top: 50px;
	font-size: 3.2rem;
	line-height: 1;
}

#box_footer p.copyright {
	font-size: 1.1rem;
	margin-top: 20px;
}

/* ========== /SNS / footer ========== */


/* ========== base box ========== */

/* ========== /base box ========== */


/* ========== covid-19 ========== */

#box_covid-19_notice {
	width: 100%;
	padding-bottom: 1.7em;
}

#box_covid-19_notice a {
	text-decoration: underline;
}

#box_covid-19_notice>.inner {
	background-color: #f00000;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 1em;
	padding: 0.3em 1.5em 1.7em 1.5em;
}

  #box_covid-19_notice p {
  	font-size: 1.4rem;
  	line-height: 1.5;
  	text-align: center;
  	margin-top: 1em;
  }
  
  #box_covid-19_notice>.inner p {
  	color: #fff;
  	font-weight: 500;
  	line-height: 1.4;
  }



/* 2020-06-02 */

/* reserve btn */

p#btn_reserve {
	height: 0;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 1500;
}

p#btn_reserve a {
	height: 80px;
	width: auto;
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	background-color: #fff;
	transition:0.5s;
}

p#btn_reserve a.scroll {
	right: 80px;
}

p#btn_reserve a img {
	width: auto;
	height: 100%;
	transition: 0.3s;
}

p#btn_reserve a:hover {
	opacity: 1;
}

p#btn_reserve a:hover img {
	opacity: 0.7;
}

p#btn_reserve a.scroll {
	
}



/* layer - common */


/* layer - reservation */

#overlay {
	cursor: pointer;
}

div#layer_reservation {
	position: fixed;
	z-index: 5000;
	width: 800px;
	left: 50%;
	margin-left: -400px;
	top: 0%;
	transform: translateY(-52%);
	display: none;
}

div#layer_reservation.view {
	top: 50%;
	transition: 0.4s;
	transform: translateY(-52%);
}


div#layer_reservation::after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: #89daf9;
	transform: rotate(0deg);
}

div#layer_reservation.view::after {
	transition: 1s;
	transform: rotate(-3deg);
}

div#layer_reservation>section {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: #fff;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
}

div#layer_reservation div.box_column {
	margin-top: 28px;
	overflow: auto;
}

div#layer_reservation div.box_column>.inner p {
	font-size: 1.5rem;
	line-height: 2;
	margin-top: 1em;
}


div#layer_reservation div.box_column>.inner p.notice {
	color: #f00;
	line-height: 1.8;
	font-weight: 400;
}

div#layer_reservation div.box_column>.inner p.notice a {
	text-decoration: underline;
}


div#layer_reservation section>.inner {

	padding: 36px 48px 60px 48px;
}

div#layer_reservation h2 {
	text-align: center;
	font-size: 3.6rem;
}

div#layer_reservation h2 small {
	display: block;
	font-size: 1.6rem;
	font-weight: 500;
}

div[id^='layer_'] p#btn_close_layer {
	position: absolute;
	text-transform: uppercase;
	font-size: 1.5rem;
	font-family: "DINNextLTPro-Light", "Roboto",sans-serif;
	right: 0;
}

div[id^='layer_'] p#btn_close_layer a {
	color: #fff;
	display: inline-block;
	position: relative;
	padding: 25px 46px 0 0;
}

div[id^='layer_'] p#btn_close_layer a:before,
div[id^='layer_'] p#btn_close_layer a:after {
	content: "";
	display: block;
	position: absolute;
	top: 12px;
	right: 22px;
	width: 1px;
	height: 40px;
	background-color: #fff;
}

div[id^='layer_'] p#btn_close_layer a:before {
	transform: rotate(-45deg);
}

div[id^='layer_'] p#btn_close_layer a:after {
	transform: rotate(45deg);
}


div#layer_reservation ul.btns {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

div#layer_reservation ul.btns li {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

div#layer_reservation ul.btns li:nth-of-type(1) {
	/*margin-right: 28px;*/
}

div#layer_reservation ul.btns li a {
	display: block;
	background-color: #ffb80e;
	padding: 1.2em 1.3em 1.35em 1.3em;
	border-radius: 3px;
	border: 1px solid #222;
	transition: 0.3s;
	min-width: 250px;
}

div#layer_reservation ul.btns li a:hover {
	background-color: #222;
	color: #ffb80e;
} 


div#layer_reservation ul.btns li:nth-of-type(1) a {
	background-color: #fff;
}

div#layer_reservation ul.btns li:nth-of-type(1) a:hover {
	background-color: #f1ece0;
	color: #020202;
}



/**/
/**/
/**/
/**/
/**/
/**/

/* ====================================== */
/* ========== responsive =========== */
/* ====================================== */

/**/





/* ===== 1024px（pc）以内 ===== */
	@media (max-width: 1024px) {

/* mq start */

div#box_header .inner {
	padding-right: 1.5vw;
}


h1,
h1 a {
	width: 154px;
	height: 154px;
}

h1 a img {
	/*max-width: initial;*/
	max-width: 405%;
	height: 160px;
	position: relative;
	left: 2px;
	top: -3px;
}



/* ========== global width ========== */


#box_header,
nav#gnav {
	max-width: 1024px;
	margin: 0;
	box-sizing: border-box;
}

#box_bt_sns,
#box_footer {
	width: 88%;
}





section#open_date_2020>.inner {
	transform: scale(0.7, 0.7) translateY(22px);
	left: 0px;
}


#sec_access {
	margin-top: 75px;
}

#box_bt_sns {
	margin-top: 75px;
}



/* mq end */

}



/* ===== 768px（sp）以内 ===== */

@media (max-width: 768px) {
	
	/* mq start */
	
	.pc {
	display: none;
	}
	
	.sp {
		display: inline;
	}
	
#sec_access h3,
#sec_info h3 {
	font-size: 3.6rem;
}



/* box scroll */
.box_scroll_h {
	overflow-x: scroll;
}




	
/* ========== utility vertical ========== */

#box_utlity {
	display: none;
}



/* ========== global width ========== */


#box_header,
nav#gnav,
#box_bt_sns,
#box_footer {
	max-width: initial;
	margin: 0;
}


/* ========== header ========== */

#box_header {
width: 100vw;
	padding-top: 20px;
	padding-bottom: 26px;
}

h1,
h1 a {
	width: 98px;
	height: 98px;
	display: block;
	position: relative;
}

h1 a {
	overflow: hidden;
}


h1 a img {
	top: -31px;
	left: 2px;
}



/* =============== open date ============= */

section#open_date_2020 {
	display: none;
}



/* ========== gnav ========== */

nav#gnav {
	width: 100%;
	box-sizing: border-box;
	overflow: scroll;
	padding-top: 48px;
}

nav#gnav ul {
	width: 140vw;
	justify-content: flex-start;
	padding-left: 5vw;
}




#box_bt_sns,
#box_footer {
	margin-top: 75px;
	margin-left: auto;
	margin-right: auto;
}


#box_footer {
	margin-top: 0px;
}

#box_footer footer {
	padding-top: 54px;
	padding-bottom: 84px;
}

  #box_covid-19_notice p {
  	line-height: 1.3;
  }


#box_footer ul.logos li a {
	height: 105px;
	width: 105px;
}

#box_footer ul.logos li a img {
	height: 105px;
	width: auto;
}

#box_footer ul.logos li.cafe {
	margin-right: 18px;
}


#box_footer ul.logos li.cafe a img {
	position: relative;
	top: -10px;
}


#box_footer p.name {
	margin-top: 35px;
	font-size: 2.2rem;
	line-height: 1.5;
}



p#btn_pagetop a {
	width: 60px;
	height: 60px;
	padding-top: 11px;
}


/*予約ボタン*/

p#btn_reserve {
	
}

p#btn_reserve a {
	
}


/* table */

table.restruct td,
table.restruct th {
	display: block;
	width: 100%;
}


/* layer - reservation */

#overlay {
	cursor: pointer;
}

div#layer_reservation {
	width: 85vw;
	left: 50%;
	margin-left: -42.5vw;
}


div#layer_reservation section>.inner {
	padding: 16px 18px 24px 18px;
}

div#layer_reservation div.box_column {
	margin-top: 20px;
}

div#layer_reservation div.box_column>.inner {
	overflow: auto;
	height: 120px;
}

div#layer_reservation div.box_column>.inner p {
	font-size: 1.5rem;
	line-height: 1.5;
}

div#layer_reservation div.box_column>.inner p:first-child {
	margin-top: 0;
}


div#layer_reservation div.box_column>p.notice {
	font-size: 1.3rem;
	line-height: 1.6;
}




div#layer_reservation h2 {
	font-size: 2.8rem;
}

div#layer_reservation h2 small {
	font-size: 1.4rem;
}





div#layer_reservation ul.btns {
	margin-top: 24px;
}

div#layer_reservation ul.btns li {
	font-size: 1.5rem;
}

div#layer_reservation ul.btns li:nth-of-type(1) {
	margin-right: 14px;
}








	/* mq end */
	
	}
	

/* ===== 320px（sp-5S）以内 ===== */

@media (max-width: 320px) {
/* mq start */




/* mq end */
}

/**/
/**/
/**/
/**/
/**/