@charset "UTF-8";

/* 変数 */
:root {
	/* 色 */
	--primary: #4499ff;
	--darkgray: #222222;
	--midgray: #414141;
	--gray: #888888;
	--white: #ffffff;

	/* 左右の余白 */
	--side: 6vw;
}

/* サイズの基準： 1rem = 100px */
:root {
	font-size: 100px;
}

@media (min-width: 768px) {
	:root {
		font-size: 7.32vw;
	}
}

/* テキストの基本設定 */
body {
	color: var( --darkgray );
	font-size: 0.16rem;
	font-family: sans-serif;
	line-height: 1.8;
}

/* リセット / ノーマライズ / サニタイズ */
body, h1, h2, h3, h4, h5, h6, p, ul, figure {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	opacity: 0.8;
}

.sr-only {
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ヒーロー */
.hero {
 	background-image: url(img/title2.jpg);
	background-position: center;
	background-size: cover;
	background-color: var(--darkgray);
	display: flex;
	justify-content: center;
	align-items: center;
}

html, body, .hero {
	height: 65%;
}

body {
	overflow-y: scroll;
}

@media (min-width: 768px) {
	.hero {
		justify-content: flex-end;
	}

	.hero h1 {
		width: 100%;
		text-align: left;
	}
}

/* ヒーロー： 矢印 */
.hero {
	position: relative;
}


}

@media (min-width: 768px) {
	.hero::after {
		width: 0.31rem;
		padding: 0.35rem 0.31rem 0.16rem;
	}
}


/* ヘッダー */
.header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 55px;
	box-sizing: border-box;
	padding-left: var(--side);
	padding-right: var(--side);
	background:rgba(0,0,0,0.5);
}

/* ヘッダー： サイト名 */
.site img {
	width: 2.50rem;
}

@media (min-width: 768px) {
	.site img {
		width: 3.00rem;
	}
}

/* ナビゲーションボタン */
.nav-button {
	box-sizing: content-box;
	padding: 0;
	outline: none;
	border: none;
	background: none;
	width: 29px;
	height: 20px;
	overflow: visible; /* IE対応 */
	cursor: pointer;
	color: var(--white);
}

.nav-button::before,
.nav-button::after {
	content: '';
	display: block;
	height: 1px;
	background-color: currentColor;
	transform: translateY(10px);
	transition: 0.3s ease-in-out;
}

.nav-button::before {
	transform: translateY(-10px);
	box-shadow: 0 10px currentColor;
}

@media (max-width: 767px) {
	/* ナビゲーションボタン（閉じるボタン） */
	.open .nav-button {
		z-index: 1000;
	}
	.open .nav-button::before {
		transform: rotate(-45deg);
		box-shadow: none;
	}
	.open .nav-button::after {
		transform: rotate(45deg);
		box-shadow: none;
	}

	/* ナビゲーションメニュー: （開いた状態） */
	html.open, .open body {
		height: 100%;
		overflow: hidden;
	}

	.open .header {
		position: relative;
		margin-bottom: -100px;
	}

	.open .nav {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.8);
		color: var(--white);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.open .nav ul {
		margin-bottom: 10vh;
		list-style: none;
	}

	.open .nav li:not(:last-child) {
		margin-bottom: 20px;
	}
}

/* ナビゲーションメニュー（閉じた状態） */
.nav {
	width: 0;
	height: 0;
	position: absolute;
	left: 100%;
	overflow: hidden;
	color: transparent;
	transition: 0.5s ease-in-out;
}

/* ナビゲーションメニュー（PC）*/
@media (min-width: 768px) {
	.nav-button {
		display: none;
	}

	.nav {
		position: relative;
		left: auto;
		width: auto;
		height: auto;
	}

	.nav ul {
		display: flex;
		list-style: none;
		color: var(--white);
	}

	.nav ul li:not(:first-child) {
		margin-left: 0.55rem;
	}
}


/* ---------- コンテンツ  ----------  */

/* コンテナ */
.container {
	padding: 0.68rem var(--side);
}

@media (min-width: 768px) {
	.container.menu, 
	.container.news {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

/* コンテナ： タイトルとサブタイトル */
.container h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.26rem;
	letter-spacing: 0.179em;
	line-height: 1;
}

.container.hours h2 {
	letter-spacing: 0;
}

.container.info h2 img {
	width: 2.44rem; 
}

.container.menu h2 + p,
.container.news h2 + p,
.container.hours h2 + p {
	font-size: 0.13rem;
}

.container.info h2 + p {
	color: var(--midgray);
	font-weight: bold;
	letter-spacing: 0.516em;
}

.container.menu h2::after,
.container.news h2::after,
.container.hours h2::after {
	content: '';
	display: block;
	width: 0.56rem;
	height: 4px;
	margin-top: 0.17rem;
	margin-bottom: 0.1rem;
	background-color: var(--primary);
}

.container.hours h2::after {
	width: 0.28rem;
	margin-left: auto;
	margin-right: auto;
}


@media (min-width: 768px) {
	.container h2 {
		font-size: 0.22rem;
	}

	.container.hours h2 {
		font-size: 0.18rem;
	}
	
	.container.menu h2 + p,
	.container.news h2 + p,
	.container.hours h2 + p {
		font-size: 0.2rem;
	}

	.container.menu h2::after,
	.container.news h2::after {
		width: 0.85rem;
		margin-top: 0.2rem;
		margin-bottom: 0.2rem;
	}
}


/* Food & Drink */

/* Food & Drink: 基本 */
.item {
	margin-top: 0.64rem;
}

.item h3 {
	margin-bottom: 0.19rem;
	color: var(--midgray);
	font-size: 0.16rem;
	line-height: 1;
	display: flex;
	justify-content: flex-start;
	align-items: right;
}

.item h3::before {
	content: url(img/ikari.svg);
	display: block;
	width: 0.4rem;
	margin-right: 0.1rem;
}

.item p {
	margin-bottom: 0.16rem;
	font-size: 0.14rem;
}


/* Food & Drink: テキストの横幅と配置 */
.item .text {
	width: 76vw;
}

.item.plate .text {
	margin-left: auto;
}

.item.plate h3 {
	flex-direction: row-reverse;
}

.item.plate h3::before {
	margin-left: 0.1rem;
	margin-right: 0;
}

/* Food & Drink: テキストの横幅と配置 */
.item .text {
	width: 76vw;
}

.item.hokusin .text {
	margin-left: auto;
}

.item.hokusin h3 {
	flex-direction: row-reverse;
}

.item.hokusin h3::before {
	margin-left: 0.1rem;
	margin-right: 0;
}




/* Food & Drink: 画像の横幅と配置 */
.item .photo {
	margin: 0 calc( var(--side) * -0 );
	display: flex;
	align-items: flex-end;
}

.item.cafe .fig1 {
	flex: 1 1 auto;
	margin-right: -0.47rem;
	margin-bottom: 0.38rem;
}
.item.cafe .fig2 {
	flex: 0 0 43vw;
}
.item.cafe .fig2 img {
	height: 1.56rem;
}

.item.plate .fig1 {
	flex: 0 0 85.6vw;
}

.item.hokusin .fig1 {
	flex: 0 0 85.6vw;
}







.item.sweet .fig1 {
	flex: 1 1 auto;
	margin-right: -0.26rem;
	margin-bottom: 0.38rem;
}
.item.sweet .fig2 {
	flex: 0 0 56.2vw;
}
.item.sweet img {
	height: 2rem;
}

.item img {
	width: 100%;
	max-height: 2rem;
	object-fit: cover;
}

/* Food & Drink: PC版のレイアウト */
@media (min-width: 768px) {
	/* 基本 */
	.item {
		margin-top: 1rem;
	}

	.item h3 {
		margin-bottom: 0.22rem;
		font-size: 0.25rem;
	}
	
	.item h3::before {
		width: 0.48rem;
	}

	.item p {
		font-size: 0.16rem;
	}

	/* テキストと画像の配置 */
	.item {
		display: flex;
	}

	.item .text {
		flex: 0 0 3.12rem;
		margin-right: 0.49rem;
	}

	.item .photo {
		flex: 1 1 auto;
		margin: 0;
	}

	.item img {
		max-height: none;
	}

	/* テキストと画像の配置:  */
	.item.cafe {
		margin-left: calc( var(--side) * 2 );
		margin-right: calc( var(--side) * -1 );
	}

	.item.cafe .fig1 {
		margin-right: -0.88rem;
		margin-bottom: 1.11rem;
	}
	.item.cafe .fig2 {
		flex: 0 0 auto;
		width: calc( var(--side) * 3 + 0.88rem);
	}
	.item.cafe .fig1 img {
		height: 3.3rem;
	}
	.item.cafe .fig2 img {
		height: 3rem;
	}

	.item.cafe .text {
		align-self: flex-end;
	}
	.item.cafe p {
		margin-bottom: 0.73rem;
	}

	.item.cafe h3 {
		margin-left: -0.58rem;
	}

	/* テキストと画像の配置: プレート */
	.item.plate {
		flex-direction: row-reverse;
		margin-left: calc( var(--side) * -1 );
		margin-right: calc( var(--side) * 1 );
	}

	.item.plate .text {
		margin-right: 0;
		margin-left: 0.49rem;
	}

	.item.plate .photo {
		display: block;
	}

	.item.plate .fig1 img {
		height: 3.95rem;
	}
	
	.item.plate h3 {
		margin-right: -0.58rem;
	}

	
	/* テキストと画像の配置: 北辰寮 */
	.item.hokusin {
		flex-direction: row-reverse;
		margin-left: calc( var(--side) * -1 );
		margin-right: calc( var(--side) * 1 );
	}
	
	.item.hokusin .text {
		margin-right: 0;
		margin-left: 0.49rem;
	}
	
	.item.hokusin .photo {
		display: block;
	}
	
	.item.hokusin .fig1 img {
		height: 3.95rem;
	}
	
	.item.hokusin h3 {
		margin-right: -0.58rem;
	}	
	
	

	
	/* テキストと画像の配置: */
	.item.sweet {
		margin-left: calc( var(--side) * 2 );
		margin-right: calc( var(--side) * -1 );
	}

	.item.sweet .fig1 {
		margin: 0;
	}
	.item.sweet .fig2 {
		flex: 0 0 4.69rem;
	}
	.item.sweet img {
		height: 3.04rem;
	}

	.item.sweet h3 {
		margin-left: -0.58rem;
	}
	
}


/* Food & Drink: イラスト */
.item .text {
	position: relative;
	z-index: 2;
}

.item .photo {
	position: relative;
}

.item.cafe .photo::after {
	content: url(img/tai.svg);
	display: block;
	width: 28vw;
	position: absolute;
	top: -12vw;
	right: 12vw;
	opacity: 0.8;
}

@media (min-width: 768px) {
	.item.cafe .photo::after {
		width: 2rem;
		top: auto;
		right: auto;
		bottom: 0.12rem;
		left: -0.85rem;
	}
}

.item.plate .photo::after {
	content: url(img/maguro.svg);
	display: block;
	width: 30vw;
	position: absolute;
	top: -14vw;
	left: 1.3vw;
	opacity: 0.8;
}

@media (min-width: 768px) {
	.item.plate .photo::after {
		width: 2rem;
		top: 1.21rem;
		right: -1.48rem;
		left: auto;
	}
}


.item.hokusin .photo::after {
	content: url(img/hokusin.svg);
	display: block;
	width: 30vw;
	position: absolute;
	top: -14vw;
	left: 1.3vw;
	opacity: 0.8;
}

@media (min-width: 768px) {
	.item.hokusin .photo::after {
		width: 2rem;
		top: 1.21rem;
		right: -1.48rem;
		left: auto;
	}
}


.item.sweet .photo::after {
	content: url(img/hatahata.svg);
	display: block;
	width: 32vw;
	position: absolute;
	top: -12vw;
	right: 9vw;
	opacity: 0.8;
}

@media (min-width: 768px) {
	.item.sweet .photo::after {
		width: 2.27rem;
		top: 1.11rem;
		right: auto;
		left: -1.68rem;
	}
}

/* Food & Drink: タイトル */
@media (min-width: 768px) {
	.menu-inner {
		position: relative;
	}
	.menu-title {
		position: absolute;
		top: 0.13rem;
		left: 0;
	}
	.menu-inner .item.cafe {
		margin-top: 0;
	}
}

/* What's New */
.news {
	background-image: url(img/edge.png), url(img/texture.jpg);
	background-repeat: repeat-x, repeat;
}

.news dl {
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	font-size: 0.14rem;
}

.news dt {
	margin-bottom: 0.03rem;
	font-weight: bold;
	color: var(--gray);
}

.news dd {
	margin-left: 0;
}

.news dd:not(:last-child) {
	margin-bottom: 0.35rem;
}

.news .more {
	font-weight: bold;
	color: var(--primary);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 0.16rem;
	border-top: solid 0.12rem currentColor;
	text-align: right;
}

.news .more::after {
	content: url(img/arrow.svg);
	display: block;
	margin-left: 0.11rem;
	width: 0.18rem;
	transform: rotate(-90deg);
}

@media (min-width: 768px) {
	.news dl,
	.news .more {
		margin-left: calc( var(--side) * 2 );
		margin-right: calc( var(--side) * 2 );
	}

	.news dl {
		font-size: 0.16rem;
		display: flex; 
		flex-wrap: wrap;
	}

	.news dt {
		flex: 0.08 0.08 1.57rem;
	}

	.news dd {
		flex: 0.08 0.08 auto;
		width: calc(100% - 1.57rem);
	}

	.news dd:not(:last-child) {
		margin-bottom: 0.08rem;
	}
}



/* HOURS */
.hours {
	background-image: url(img/kaiyou.jpg);
	background-position: center;
	background-size: cover;
	color: var(--white);
	text-align: center;
	position: relative;
}

.hours::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
}

.hours > * {
	position: relative;
	z-index: 2;
}

.hours dl {
	display: flex;
	flex-wrap: wrap;
	width: 2.16rem;
	margin: 0.23rem auto 0;
	text-align: left;
}

.hours dt {
	flex: 0 0 4em;
}

.hours dd {
	flex: 0 0 auto;
	width: calc( 100% - 4em );
	margin-left: 0;
	white-space: nowrap;
	overflow: visible;
}



/* カフェ情報 */
.info {
	background-color: var(--primary);
	text-align: center;
}

.info .text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.info .address {
	text-align: left;
	margin-top: 0.5rem;
}

.info .sns {
	display: flex;
	list-style: none;
	margin-top: 0.5rem;
}
.info .sns li:not(:first-child) {
	margin-left: 0.25rem;
}
.info .sns img {
	width: 0.35rem;
	opacity: 0.8;
}

.info .map {
	margin-top: 0.5rem;
}
.info .map iframe {
	width: 100%;
	height: 3.82rem;
}

@media (min-width: 768px) {

	.info {
		display: flex;
	}
	
	.info .text {
		flex: 0 0 auto;
		width: calc( (var(--side) * 2 ) + 3.12rem );
		margin-right: 0.49rem;
		margin-top: 0.28rem;
		margin-bottom: 0.28rem;
		align-items: flex-start;
	}
	
	.info .map {
		flex: 1 1 auto;
		margin-top: 0;
	}

	.info .map iframe {
		height: 100%;
	}

	.info h2 + p {
		margin-left: 0.06rem;
	}

}

/* フッター */
.footer {
	height: 89px;
	background-color: var(--darkgray);
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
}