@charset "utf-8";

/* ---------------------------------
  _01 スタイルリセット
------------------------------------*/

html { font-size: 62.5%;}
body {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	color: #222;
	background-color: #fff;
	background-image: url("../images/bg.jpg");
	background-position: center top;
	font-family: "ryo-gothic-plusn", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
    color: #222;}
p {
	margin: 0;
	padding: 0;
	line-height: 1.4;}
img {
	border: 0;
	display: block;}

a { text-decoration: inherit; /* 必要に応じて「none」に */}
a:link { color: #222;}
a:visited { color: inherit;}
a:hover { color: red;}

ul {
	margin: 0;
	padding: 0;
	list-style: none;}
ol {
	margin: 0;
	padding: 0;}
li {
	margin: 0;
	padding: 0;}
dl, dt, dd {
	margin: 0;
	padding: 0;}
form {
	margin: 0;
	padding: 0;}

hr { display: none;}


/* ---------------------------------

Noto Sans CJK JP Light

    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 300;
    font-style: normal;

Ryo Display PlusN B

    font-family: "ryo-display-plusn", serif;
    font-weight: 700;
    font-style: normal;

Ryo Gothic PlusN R

    font-family: "ryo-gothic-plusn", sans-serif;
    font-weight: 400;
    font-style: normal;

Didot LT Pro Bold

    font-family: "linotype-didot", serif;
    font-weight: 700;
    font-style: normal;

------------------------------------*/


/* ---------------------------------
  _02 共通クラス
------------------------------------*/

.supplement { /* 補助的に入れる見出しを表示しないようにするクラス */
	position: absolute;
	left: -10000em;}

.indent {
	margin-left: 1.25em;
	display: block;
	text-indent: -1.25em;
}

@media screen and (min-width: 641px){

.hide_pc { display: none !important;}
p.guide {
	margin-bottom: 1em;
	text-align: center;}

section { padding: 3em 0;}
    
/* section#christmas { padding: 3em 0 14em;} */ 
section#boshinnenkai { padding: 3em 0 9em;}

header .container,
section .container,
footer .container {
    margin: 0 auto;
	position: relative;
    width: 1100px;
    height: auto;
	}

}

@media screen and (max-width: 640px){

.hide_sp { display: none !important;}

header .container { padding: 2.0rem;}
section .container { padding: 5.0rem 2.0rem 0 2.0rem;}

}

/* ---------------------------------
  _02 ヘッダー＆ナビゲーション
------------------------------------*/

header {
	background-color: #fff;}

header .site_name .en {
	margin-bottom: 10px;
	display: block;
	height: 32px;
	text-align: center;
    font-family: "linotype-didot", serif;
	font-size: 4.2rem;
    font-style: normal;
    font-weight: 700;}
header .site_name .ja {
	padding-top: 0.5em;
	border-top: solid 1px #434343;
	display: block;
	width: 418px;
	text-align: center;
	letter-spacing: -0.01em;
    font-family: "ryo-display-plusn", serif;
	font-size: 1.6rem;
    font-weight: 700;
    font-style: normal;
	}
header .contact {
	padding: 15px 0 10px 0;
	border: solid 1px #434343;
	width: 230px;
	border-radius: 5px;
	box-sizing: border-box;
	}
header .contact a {
	color: #434343;
	}
header .contact .tel {
	margin-bottom: 0.25em;
	display: block;
	text-align: center;
	letter-spacing: 0;
    font-family: "linotype-didot", serif;
	font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
	}
header .contact .guide {
	display: block;
	text-align: center;
	letter-spacing: 0.3em;
    font-family: "ryo-gothic-plusn", sans-serif;
    font-style: normal;
	font-size: 1.3rem;
    font-weight: 400;
	}

header dl {
	display: flex;
	flex-wrap: wrap;
	width: 360px;
	align-items: flex-start;
	font-family: "ryo-display-plusn", serif;
    font-weight: 500;
    font-style: normal;}
header dl dt {
	margin-right: 1em;
	padding: 0.25em 0;
	border: solid 1px #434343;
	border-radius: 5px;
	text-align: center;
	width: 60px;
	font-size: 0.85em;}
header dl dd {
	line-height: 1.2;
	font-size: 0.9em;}
header dl dd span { font-size: 0.9em;}

@media screen and (min-width: 641px){

header {
	padding-top: 20px;
	height: 90px;}
header .container {
	display: flex;
	justify-content: space-between;}
	
}

@media screen and (max-width: 640px){

header .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

header h1 { width: 100%;}

header .site_name { margin-bottom: 0.5em;}
header .site_name .en {
	font-size: 2.7rem;
	line-height: 4.2rem;
	letter-spacing: -0.01em;
}
header .site_name .ja {
	width: 100%;
	font-size: 1.1rem;
	letter-spacing: -0.05em;
}
header .contact {
	margin-bottom: 1em;
	width: 100%;}
header dl {
	font-size: 0.75em;
	width: 85%}
header dl dd:nth-of-type(1){ margin-right: 0.5em;}

}

/* ---------------------------------
  _02 メインビュー
------------------------------------*/

#cover {
	position: relative;
	overflow: hidden;
	background-color: #e5e5e5;}
#cover .catch {
	position: absolute;
	top: 0;
	background-color: rgba(255,255,255,0.8);
	box-sizing: border-box;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	}
#cover .catch p {
    font-family: "ryo-display-plusn", serif;
    font-weight: 700;
    font-style: normal;
}

@media screen and (min-width: 641px){

#cover {
	padding: 0;
	width: 100%;
	height: 600px;}
#cover img {
	margin: 0 auto;
	display: block;}
#cover .catch {
	margin-left: 250px;
	padding-top: 30px;
	padding-right: 50px;
	left: 50%;
	width: 300px;
	height: 540px;
	box-shadow: 0 0 5px #666;}
#cover .catch p {
	line-height: 1.8;
	font-size: 3.4rem;}
#cover .catch p span { font-size: 2.7rem;}

}

@media screen and (max-width: 640px){

#cover {
	width: 100vw;
	height: auto;}
#cover img {
	width: 100%;}
#cover .catch {
	padding: 1em;
	right: 2rem;
	}
#cover .catch p { 
	line-height: 1.6;
	font-size: 0.8em;}

}

/* ---------------------------------
  _02 フッター
------------------------------------*/

#introduction {
	padding-top: 0;
	color: #434343;}
#introduction h2 {
	margin-bottom: 3.0rem;}
#introduction h2 .en {
	margin-bottom: 1.0rem;
	display: block;
    font-family: "linotype-didot", serif;
	font-size: 4.2rem;
    font-style: normal;
    font-weight: 700;}
#introduction h2 .ja {
    font-family: "ryo-display-plusn", serif;
	font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;}
#introduction p { margin-bottom: 1em;}

#introduction .announce {
	margin-bottom: 3em;
	padding: 1.5em 2em;
	border: solid 5px #999;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0.5em;}
#introduction .announce h2 {
	margin-bottom: 0.5em;
	text-align: center;}
#introduction .announce p {
	margin-bottom: 0;
	line-height: 1.6;}


@media screen and (min-width: 641px){

#introduction .introduction-box:first-of-type {
	margin-bottom: 50px;
	padding-top: 70px;
	background-image: url("../images/brunch-bg.png");
	background-position: center top;
}

#introduction .introduction-box .box-image {
	padding-top: 30px;
	display: flex;
}

}

@media screen and (max-width: 640px){

#introduction h2 .ja { line-height: 1.4;}

#introduction .introduction-box:first-of-type { margin-bottom: 50px;}
#introduction .introduction-box .box-image img { width: 100%;}

}

#gallery {
	overflow: hidden !important;
}
@media screen and (max-width: 640px){

#gallery { margin: 30px 0;}

#gallery div.box-photo { width: 50vw !important;}
#gallery div.box-photo img { width: 100%;}

}

#announce .container {
	padding: 1em 0 1.5em 0;
	border: solid 1px #999;
	background-color: #fff;
	text-align: center;
	line-height: 1.4;
	font-size: 1.1em;
	border-radius: 0.5em;
	box-sizing: border-box;}
#announce .container h2 {
	margin-bottom: 0.25em;
	letter-spacing: 0.1em;
    font-family: "ryo-display-plusn", serif;
	font-weight: 700;
}

@media screen and (max-width: 640px){

#announce .container {
	margin: 0 2rem 3rem 2rem;
    padding: 2rem 2rem;}
#announce .container p { text-align: left;}

}

#christmas h2 { color: #00552e;}
#boshinnenkai h2 { color: #900;}
#lunchprefix h2 { color: #f6ae54;}
#lunchprefix .menulink a { background-color: #f6ae54;}
#limitedlunch h2 { color: #FF9326;}
#joshikai h2 { color: #FE6B91;}
#afterparty h2 { color: #d2691e;}
#student h2 { color: #2e8b57;}

#brunch h2 { color: #845a12;}
#brunch .menulink a { background-color: #845a12;}

#lunch h2 { color: #587026;}
#lunch .menulink a { background-color: #587026;}

#dinner h2 { color: #005f5d;}
#dinner .menulink a { background-color: #005f5d;}

#dessert h2 { color: #e95388;}
#dessert .menulink a { background-color: #e95388;}

#drink h2 { color: #5a1b52;}
#drink .menulink a { background-color: #5a1b52;}

#takeout h2 { color: #0F429C;}
#takeout .menulink a { background-color: #0F429C;}

.menu-box .text-box h2 { margin-bottom: 2.4rem;}
.menu-box .text-box h2 .en {
	margin-bottom: 0.8rem;
	display: block;
    font-family: "linotype-didot", serif;
	font-size: 4.0rem;
    font-style: normal;
    font-weight: 700;}
.menu-box .text-box h2 .ja {
	line-height: 1.4;
    font-family: "ryo-display-plusn", serif;
	font-size: 2.2rem;
    font-style: normal;
    font-weight: 700;}
.menu-box .text-box h2 .ja2 {
	margin-bottom: 0.8rem;
	display: block;
	line-height: 1.4;
    font-family: "ryo-display-plusn", serif;
	font-size: 3.2rem;
    font-style: normal;
    font-weight: 700;}
.menu-box .text-box p { margin-bottom: 1em;}
.menu-box .text-box .menulink a {
	margin: 0 0.5em;
	width: 200px;
	height: 3em;
	line-height: 3em;
	display: block;
	color: #fff;
    font-family: "ryo-display-plusn", serif;
	font-size: 1.1em;
    font-style: normal;
	text-align: center;
	border-radius: 5px;}

#christmas li {
    margin-bottom: 1em;
    line-height: 1.4;
}


@media screen and (min-width: 641px){

.menu-box .text-box {
	padding: 40px 30px;
	width: 525px;
	height: 540px;
	background-color: rgba(255,255,255,0.9);
	box-shadow: 0 0 10px #999;
	box-sizing: border-box;}
	
.menu-box .text-box .menulink {
	display: flex;
	justify-content: center;
}

.menu-box:nth-of-type(2n-1) img {}
.menu-box:nth-of-type(2n-1) .text-box {
	position: absolute;
	right: 0;
	top: -40px;
	}

.menu-box:nth-of-type(2n) img { margin-left: 380px;}
.menu-box:nth-of-type(2n) .text-box {
	position: absolute;
	left: 0;
	top: -40px;
	}
    
#christmas.menu-box .text-box {
	/* height: 760px; */
}
    
#boshinnenkai.menu-box .text-box {
	height: 680px;
}
}

@media screen and (max-width: 640px){

.menu-box .container {
	padding: 0;
	}
.menu-box img {
	width: 100%;
}
.menu-box .text-box {
	margin: -2rem 2rem 3rem 2rem;
	padding: 3rem 2rem;
	position: relative;
	background-color: rgba(255,255,255,0.9);
	box-shadow: 0 0 10px #999;
	box-sizing: border-box;}
.menu-box .text-box .menulink a {
	margin: 0 auto;}
.menu-box .text-box .menulink a:first-of-type { margin-bottom: 0.5em;}

}

/* こども食堂 */

#kids .container {
	padding: 25px;
	border: solid 1px #434343;
	background-color: rgba(255,255,255,0.5);
	border-radius: 5px;
	box-sizing: border-box;}

#kids h2 { margin-bottom: 2.4rem;}
#kids h2 .en {
	margin-bottom: 0.8rem;
	display: block;
    font-family: "linotype-didot", serif;
	font-size: 4.0rem;
    font-style: normal;
    font-weight: 700;}
#kids h2 .ja {
	line-height: 1.4;
    font-family: "ryo-display-plusn", serif;
	font-size: 2.2rem;
    font-style: normal;
    font-weight: 700;}
#kids p { margin-bottom: 1em;}

#kids .kids-about {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;}
#kids .kids-about img { margin-right: 1em;}

@media screen and (min-width: 641px){

#kids .container {
	display: flex;
	justify-content: space-between;}
#kids .container .text-box:nth-of-type(1) { width: 340px;}
#kids .container .text-box:nth-of-type(2) { width: 680px;}

}

@media screen and (max-width: 640px){

#kids .container { margin: 0 2rem 3rem 2rem;}

}

/* ---------------------------------
  _02 フッター
------------------------------------*/
footer {
	color: #fff;
	background-image: url("../images/footer-bg.jpg");
	background-position: center top;
	}
footer #map-canvas {
	margin-bottom: 2em;}
footer #map-canvas iframe {
	width: 100%;
	height: 300px;}
footer .name {
	margin-bottom: 0.25em;
	text-align: center;
    font-family: "linotype-didot", serif;
    font-style: normal;
    font-weight: 700;
	}
footer .address {
	margin-bottom: 0.5em;
	text-align: center;
    font-family: "ryo-display-plusn", serif;
    font-style: normal;
    font-weight: 700;
	}
footer .contact {
	margin-bottom: 2em;}
footer .contact a {
	margin: 0 auto;
	padding: 1.0rem 1.5rem;
	border: solid 1px #fff;
	display: block;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	}
footer .contact .guide {
    font-family: "ryo-gothic-plusn", sans-serif;
    font-style: normal;
	font-size: 1.3rem;
    font-weight: 400;}
footer .contact .tel {
	letter-spacing: 0.05em;
    font-family: "linotype-didot", serif;
	font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;}
footer .copyright {
	text-align: center;}

@media screen and (min-width: 641px){

footer .container {
	margin: 0 auto;
	padding: 50px 0;
	width: 1100px;}
footer .name { font-size: 3.0rem;}
footer .contact a { width: 400px;}

}

@media screen and (max-width: 640px){

footer .container {
	padding: 2rem;}
footer .name { font-size: 3.0rem;}
footer .contact a { width: 70vw;}
footer .contact .guide { margin-bottom: 1em; display: block;}

}


/* ---------------------------------
  _ clearfix
------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
/* End hide from IE-mac */