@charset "utf-8";
/* CSS Document */

@media screen and (max-width:736px) {
	html, body {
		/* 1.レイアウト・配置 */
		/* 2.サイズ */
		width: 100%;
		min-width: 0;
		height: 100%;
		/* 7.装飾・その他 */
		-webkit-text-size-adjust : 100%;
	}

	img {
		/* 2.サイズ */
		max-width: 100% !important;
		height: auto;
	}

	.is-sp {
		/* 1.レイアウト・配置 */
		display: inherit;
	}
	
	.is-pc {
		/* 1.レイアウト・配置 */
		display: none;
	}
	
	a[href^="tel:"] {
		/* 1.レイアウト・配置 */
		pointer-events: auto;
	}
	
	input[type="submit"] {
		/* 7.装飾・その他 */
		appearance: none;
		-webkit-appearance: none;
	}

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

SP header

------------------------------*/
	header {
		/* 1.レイアウト・配置 */
		display: flex;
		position: relative;
		z-index: 100;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		/* 2.サイズ */
		width: 100%;
		height: 100px;
	}
	
	/* ロゴ：左側に配置 */
	header h1 {
		/* 1.レイアウト・配置 */
		position: static;
		z-index: 102;
		order: 1;
		/* 3.余白 */
		margin: 0;
		/* 2.サイズ */
		width: 140px;
	}
	
	header h1 img {
		/* 1.レイアウト・配置 */
		display: block;
		object-fit: cover;
		/* 2.サイズ */
		width: 100%;
		height: 100px;
	}
	
	/* ハンバーガーボタン / 閉じるボタン（右側） */
	.header__hamburger {
		/* 1.レイアウト・配置 */
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 102;
		order: 2;
		/* 3.余白 */
		padding: 0;
		/* 2.サイズ */
		width: 70px;
		height: 70px;
		/* 5.色・背景 */
		background-color: #ffe380;
		/* 6.枠線 */
		border: none;
		/* 7.装飾・その他 */
		cursor: pointer;
	}
	
	/* ハンバーガーの三本線（中央基準で配置） */
	.header__hamburger span {
		/* 1.レイアウト・配置 */
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 2.サイズ */
		width: 40px;
		height: 3px;
		/* 5.色・背景 */
		background-color: #333;
		/* 7.装飾・その他 */
		transition: transform 0.3s, opacity 0.3s, margin-top 0.3s;
	}
	
	/* 三本線の上下の間隔調整（中央からのズレ幅） */
	.header__hamburger span:nth-child(1) {
		/* 3.余白 */
		margin-top: -12px; /* 上の線 */
	}
	
	.header__hamburger span:nth-child(2) {
		/* 3.余白 */
		margin-top: 0px;   /* 中央の線 */
	}
	
	.header__hamburger span:nth-child(3) {
		/* 3.余白 */
		margin-top: 12px;  /* 下の線 */
	}
	
	/* メニュー展開時（綺麗な「×」に変形） */
	.header.is-active .header__hamburger span:nth-child(1) {
		/* 1.レイアウト・配置 */
		transform: translate(-50%, -50%) rotate(45deg);
		/* 3.余白 */
		margin-top: 0;
	}
	
	.header.is-active .header__hamburger span:nth-child(2) {
		/* 7.装飾・その他 */
		opacity: 0;
	}
	
	.header.is-active .header__hamburger span:nth-child(3) {
		/* 1.レイアウト・配置 */
		transform: translate(-50%, -50%) rotate(-45deg);
		/* 3.余白 */
		margin-top: 0;
	}
	
	/* ナビゲーション全体（ドロワーメニュー） */
	.header__inner {
		/* 1.レイアウト・配置 */
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 101;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transform: translateX(-100%);
		/* 2.サイズ */
		width: 100%;
		height: 100vh;
		/* 5.色・背景 */
		background-color: rgba(51, 51, 51, 0.95);
		/* 7.装飾・その他 */
		transition: transform 0.3s ease-in-out;
	}
	
	/* メニューが開いたとき */
	.header.is-active .header__inner {
		/* 1.レイアウト・配置 */
		transform: translateX(0);
	}
	
	/* ナビゲーションリスト */
	.header__nav-list {
		/* 1.レイアウト・配置 */
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* 3.余白 */
		margin: 0 auto;
		/* 2.サイズ */
		width: 85%;
	}
	
	/* 各メニュー項目（区切り線を下部に配置） */
	.header__nav-item {
		/* 1.レイアウト・配置 */
		text-align: left;
		/* 2.サイズ */
		width: 100%;
		/* 6.枠線 */
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	
	/* リンクのスタイル */
	.header__nav-item a {
		/* 1.レイアウト・配置 */
		display: block;
		/* 2.サイズ */
		width: 100%;
		/* 3.余白 */
		padding: 1.8rem 0;
		/* 4.文字 */
		font-size: 1.6rem;
		font-weight: 500;
		color: #fff;
	}
	
	/* CONTACTボタンのスマホ用調整 */
	.header__nav-item--contact a {
		/* 1.レイアウト・配置 */
		display: block;
		/* 2.サイズ */
		width: 100%;
		height: auto;
		/* 4.文字 */
		color: #fff;
		/* 5.色・背景 */
		background-color: transparent;
	}
		
/*-----------------------------

common

------------------------------*/
	/* h2 セクションタイトル部分 */
	.section-title {
		/* 1.レイアウト・配置 */
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		/* 3.余白 */
		gap: 0.2rem;
		margin-bottom: 2rem;
		/* 4.文字 */
		text-align: center;
	}

	.section-title__en {
		/* 2.サイズ */
		width: 100%;
		/* 4.文字 */
		font-size: 1.8rem;
		font-weight: bold;
		letter-spacing: 0.05em;
	}

	.section-title__ja {
		/* 2.サイズ */
		width: 100%;
		/* 4.文字 */
		font-size: 1.3rem;
		font-weight: normal;
	}
	
	.contents h2.section-title {
		/* 3.余白 */
		margin-bottom: 2rem;
	}
	
	/* p テキストフォント 共通 */
	.text {
		/* 4.文字 */
		font-size: 1.3rem;
		line-height: 2.2;
	}

	/* MOREリンク */
	.more {
		/* 4.文字 */
		font-size: 1.4rem;
	}


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

SP TOP / メイン画像セクション

------------------------------*/
	/* メインビジュアル全体のレイアウト */
	.main-visual {
		/* 1.レイアウト・配置 */
		display: flex;
		position: relative;
		/* 3.余白 */
		margin: -10rem 0 5rem;
		/* 2.サイズ */
		width: 100%;
		height: 100vh;
	}

	/* 左側：背景色エリア（全体の約2割：flex: 2） */
	.main-visual__bg-color {
		/* 1.レイアウト・配置 */
		flex: 2;
	}

	/* 右側：MV画像エリア（全体の約8割：flex: 8） */
	.main-visual__image {
		/* 1.レイアウト・配置 */
		flex: 10.222;
	}

	.main-visual__image img {
		/* 1.レイアウト・配置 */
		object-fit: cover;
		object-position: 80% center;
		/* 2.サイズ */
		width: 100%;
		height: 100%;
	}

	/* === ここから追加・変更するテキストのスタイル === */
	.main-visual__content {
		/* 1.レイアウト・配置 */
		position: absolute;
		top: 90%;
		left: 4%;
		z-index: 2;
		transform: translateY(-90%);
		/* 2.サイズ */
		max-width: 60rem;
	}

	.main-visual__title {
		/* 3.余白 */
		margin-bottom: 1rem;
		/* 4.文字 */
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.8;
	}

	.main-visual__subtext {
		/* 4.文字 */
		font-size: 1.4rem;
	}
	
/*-----------------------------

TOP / concept

------------------------------*/
	.concept {
		/* 1.レイアウト・配置 */
		position: static;
		box-sizing: border-box;
		/* 3.余白 */
		margin-bottom: 4rem;
		padding: 0 2rem;
		/* 2.サイズ */
		width: 100%;
	}

	.concept .inner {
		/* 1.レイアウト・配置 */
		display: flex;
		position: static;
		flex-direction: column;
		/* 2.サイズ */
		min-height: auto;
	}

	/* コンテンツの階層をフラット化 */
	.concept__content {
		/* 1.レイアウト・配置 */
		display: contents;
	}

	/* 1. セクションタイトル */
	.concept .section-title {
		/* 1.レイアウト・配置 */
		position: static;
		order: 1;
		transform: none;
		/* 3.余白 */
		margin-bottom: 2rem;
		/* 4.文字 */
		text-align: center;
	}

	/* 2. キャッチコピー */
	.concept__title {
		/* 1.レイアウト・配置 */
		position: static;
		order: 2;
		transform: none;
		box-sizing: border-box;
		/* 3.余白 */
		margin: 0 0 2rem;
		padding: 2.261rem 1.5rem;
		/* 2.サイズ */
		width: 100%;
		/* 4.文字 */
		font-size: 1.6rem;
		line-height: 1.4;
		text-align: center;
	}

	/* 3. 画像 */
	.concept__image {
		/* 1.レイアウト・配置 */
		position: static;
		order: 3;
		/* 3.余白 */
		margin: 0 0 2.5rem;
		/* 2.サイズ */
		width: 100%;
		height: auto;
		/* 7.装飾・その他 */
		overflow: hidden;
	}

	.concept__image img {
		/* 1.レイアウト・配置 */
		display: block;
		object-fit: cover;
		/* 2.サイズ */
		width: 100%;
		height: auto;
	}

	/* 4. サブタイトル・本文・MOREをまとめる */
	.concept__body {
		/* 1.レイアウト・配置 */
		order: 4;
		/* 2.サイズ */
		width: 100%;
	}

	/* サブタイトル */
	.concept__subtitle {
		/* 1.レイアウト・配置 */
		position: relative;
		/* 3.余白 */
		margin-bottom: 2rem;
		padding-left: 2rem;
		/* 4.文字 */
		font-size: 1.5rem;
	}

	.concept__subtitle::before {
		/* 1.レイアウト・配置 */
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		content: "";
		/* 2.サイズ */
		width: 6px;
		height: 3.5rem;
	}

	/* 本文 */
	.concept__text {
		/* 3.余白 */
		margin-bottom: 3rem;
		/* 4.文字 */
		line-height: 1.8;
	}

	/* MORE */
	.concept .more {
		/* 1.レイアウト・配置 */
		display: block;
		/* 4.文字 */
		text-align: center;
	}

	/* btnリンク */
	.btn {
		/* 3.余白 */
		margin: 0 auto;
		/* 2.サイズ */
		width: 80%;
	}

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

SP TOP / menu

------------------------------*/
	.menu {
		/* 3.余白 */
		padding: 0 2rem;
	}

	.menu:before {
		/* 1.レイアウト・配置 */
		display: block;
		position: absolute;
		top: -4px;
		right: 0;
		left: 0;
		content: "";
		/* 2.サイズ */
		height: 18px;
		/* 5.色・背景 */
		background: #fff;
	}
	
	/* メニューカード全体の並び */
	.menu__list {
		/* 1.レイアウト・配置 */
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		/* 3.余白 */
		gap: 0;
		margin-top: 2.55rem;
	}

	/* 画像エリア */
	.menu__image {
		/* 1.レイアウト・配置 */
		position: relative;
		/* 2.サイズ */
		width: 100%;
		height: 26.5rem;
		/* 7.装飾・その他 */
		overflow: hidden;
	}

	.menu__image img {
		/* 1.レイアウト・配置 */
		object-fit: cover;
		/* 2.サイズ */
		width: 100%;
		height: 100%;
	}

	/* 画像上の時間帯ラベル（隙間をなくしてピタッと配置） */
	.menu__time {
		/* 3.余白 */
		padding: 1.454rem 0.8rem;
		/* 4.文字 */
		font-size: 1.2rem;
	}

	/* 下部のテキストエリア */
	.menu__content {
		/* 1.レイアウト・配置 */
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		/* 3.余白 */
		margin: -5.5rem auto 0;
		padding: 3rem 0 5rem;
		/* 2.サイズ */
		width: 100%;
	}

	.menu__title {
		/* 3.余白 */
		margin: 0 auto 1.5rem;
		padding: 1.275rem 0;
		/* 2.サイズ */
		width: 21rem;
		/* 4.文字 */
		font-size: 1.6rem;
	}

	.menu__text {
		/* 3.余白 */
		margin-bottom: 2rem;
	}

	.menu__more {
		/* 1.レイアウト・配置 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu__more span {
		/* 1.レイアウト・配置 */
		position: relative;
		display: inline-block;
		/* 4.文字 */
		line-height: 1;
	}

	.menu__more span::before,
	.menu__more span::after {
		/* 1.レイアウト・配置 */
		position: absolute;
		top: 50%;
		content: "";
		/* 2.サイズ */
		width: 2rem;
		height: 1px;
		/* 5.色・背景 */
		background-color: #707070;
	}

	/* 左側の斜め線 */
	.menu__more span::before {
		/* 1.レイアウト・配置 */
		right: 100%;
		transform: translateY(-50%) rotate(-45deg);
		/* 3.余白 */
		margin-right: 2rem;
	}

	.menu__more span::after {
		/* 1.レイアウト・配置 */
		left: 100%;
		transform: translateY(-50%) rotate(-45deg);
		/* 3.余白 */
		margin-left: 2rem;
	}

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

SP TOP / img

------------------------------*/
	.menu-item {
		/* 1.レイアウト・配置 */
		position: relative;
		display: inline-block;
		/* 3.余白 */
		margin-bottom: 5rem;
	}

	.menu-item img {
		/* 1.レイアウト・配置 */
		display: block;
		object-fit: cover;
		/* 2.サイズ */
		width: 100%;
		height: 26.5rem;
	}

	/* 縦書きテキスト共通のスタイル */
	.vertical-text {
		/* 1.レイアウト・配置 */
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		writing-mode: vertical-rl;
		text-orientation: upright;
		white-space: nowrap;
		/* 4.文字 */
		font-size: 1.4rem;
		letter-spacing: 0.4em;
	}

	/* 左右の縦書きテキストの位置を入れ替える */
	.vertical-text--left {
		/* 1.レイアウト・配置 */
		right: 30rem;
		left: auto;
	}

	.vertical-text--right {
		/* 1.レイアウト・配置 */
		right: auto;
		left: 30rem;
	}

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

SP TOP / information

------------------------------*/
	.information {
		/* 3.余白 */
		margin-bottom: 5rem;
		padding: 0 2rem;
	}

	/* リスト全体のグリッド設定（ご指定のコード） */
	ul.information__list {
		/* 1.レイアウト・配置 */
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		/* 3.余白 */
		margin: 1rem 0 4rem;
		padding: 0;
		list-style: none;
		gap: 2rem 0;
	}

	/* 各カード（リストアイテム内のリンク）をFlexboxで左右に並べる */
	.information__item {
		/* 1.レイアウト・配置 */
		position: relative;
		display: flex;
		align-items: center;
		/* 3.余白 */
		gap: 2rem;
		/* 4.文字 */
		color: inherit;
		text-decoration: none;
	}

	/* 画像エリアのサイズ固定（必要に応じて調整） */
	.information__img {
		/* 1.レイアウト・配置 */
		flex-shrink: 0;
		/* 2.サイズ */
		width: 40%;
	}

	.information__img img {
		/* 1.レイアウト・配置 */
		display: block;
		object-fit: cover;
		/* 2.サイズ */
		width: 100%;
		height: 14rem;
	}

	/* 日付 */
	.information__date {
		/* 3.余白 */
		margin-bottom: 0.5rem;
		/* 4.文字 */
		font-size: 1.2rem;
	}

	/* お知らせの本文テキスト */
	.information__text {
		/* 4.文字 */
		font-size: 1.3rem;
	}
	
/*-----------------------------

TOP / gallery

------------------------------*/
	/* 各画像アイテムのサイズ設定 */
	.gallery__item {
		/* 1.レイアウト・配置 */
		flex-shrink: 0;
		/* 2.サイズ */
		width: 30rem;
	}

	.gallery__item img {
		/* 1.レイアウト・配置 */
		display: block;
		object-fit: cover;
		/* 2.サイズ */
		width: 100%;
		height: 14rem;
	}

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

TOP / access

------------------------------*/
	footer {
		/* 3.余白 */
		padding-bottom: 6rem;
	}
	
	.access {
		/* 3.余白 */
		padding: 3.5rem 2rem;
	}

	/* アクセスセクションの内側コンテナ */
	.access .inner {
		/* 1.レイアウト・配置 */
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* 3.余白 */
		gap: 2.5rem;
	}

	/* 左側のロゴエリア */
	.access__logo {
		/* 1.レイアウト・配置 */
		flex-shrink: 0;
		/* 3.余白 */
		margin: 0 auto;
		/* 2.サイズ */
		width: 180px;
		height: 180px;
	}

	.access__logo img {
		/* 2.サイズ */
		max-width: 100%;
		height: auto;
	}

	/* 右側のコンテンツエリア */
	.access__content {
		/* 1.レイアウト・配置 */
		flex-grow: 1;
	}
	
	.access__content .section-title {
		/* 3.余白 */
		margin: 0 0 1rem;
	}
	
	/* タイトル (ACCESS アクセス) */
	.access__subtitle {
		/* 3.余白 */
		margin-left: 0;
		/* 4.文字 */
		font-size: 1.4rem;
		font-weight: normal;
	}

	/* ショップ名・住所・TEL */
	.access__shop-info {
		/* 3.余白 */
		margin-bottom: 2rem;
		/* 4.文字 */
		font-size: 1.6rem;
		line-height: 2;
		text-align: center;
	}
	
	.access__shop-info .shop-name {
		/* 1.レイアウト・配置 */
		display: block;
		/* 2.サイズ */
		width: 100%;
	}
	
	.access__shop-info .divider {
		/* 1.レイアウト・配置 */
		display: none;
	}

	.access__shop-info .tel {
		/* 1.レイアウト・配置 */
		display: block;
		/* 3.余白 */
		margin-left: 1.5rem;
		/* 2.サイズ */
		width: 100%;
	}

	/* 営業時間グリッド */
	.access__hours {
		/* 1.レイアウト・配置 */
		display: flex;
		flex-wrap: wrap;
		/* 3.余白 */
		margin-bottom: 2.5rem;
		/* 2.サイズ */
		width: 100%;
		/* 6.枠線 */
		border-top: 1px solid #777;
		border-bottom: 1px solid #777;
	}

	.hour-item {
		/* 1.レイアウト・配置 */
		position: relative;
		flex: 0 0 50%;
		box-sizing: border-box;
		/* 3.余白 */
		padding: 2rem 1rem;
		/* 4.文字 */
		text-align: center;
	}

	.hour-item::before,
	.hour-item::after {
		/* 1.レイアウト・配置 */
		display: none !important;
	}

	/* 1番目（左上）専用：右と下に線を引く */
	.hour-item:nth-child(1) {
		/* 6.枠線 */
		border-right: 1px solid #777;
		border-bottom: 1px solid #777;
	}

	/* 2番目（右上）専用：下だけに線を引く */
	.hour-item:nth-child(2) {
		/* 6.枠線 */
		border-bottom: 1px solid #777;
	}

	/* 3番目（左下）専用：右だけに線を引く */
	.hour-item:nth-child(3) {
		/* 6.枠線 */
		border-right: 1px solid #777;
	}

	/* 4番目（右下）専用：線は不要 */
	.hour-item:nth-child(4) {
	}

	.hour-item .time {
		/* 1.レイアウト・配置 */
		display: block;
		/* 3.余白 */
		margin-bottom: 0.4rem;
		/* 4.文字 */
		font-size: 1.5rem;
	}

	.hour-item .meal {
		/* 1.レイアウト・配置 */
		display: block;
		/* 4.文字 */
		font-size: 1.6rem;
	}
	/* 詳細説明テキスト */
	.access__description {
	}

	/* ACCESS MAPボタンエリア */
	.access__btn {
		/* 1.レイアウト・配置 */
		position: relative;
		z-index: 2;
	}

	.access__btn,
	.access__map {
		/* 3.余白 */
		margin-top: 3rem;
	}
	.access__map iframe{
		/* 1.レイアウト・配置 */
		vertical-align: bottom;
		/* 2.サイズ */
		width: 100%;
		height: 260px;
	}

	ul.footer__nav-list {
		/* 1.レイアウト・配置 */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* 3.余白 */
		padding: 2rem 2rem 0;
	}

	ul.footer__nav-list li {
		/* 1.レイアウト・配置 */
		display: block;
		/* 2.サイズ */
		width: 100%;
	}
	
	ul.footer__nav-list li a {
		/* 1.レイアウト・配置 */
		display: block;
		/* 3.余白 */
		padding: 1.48rem 0;
		/* 4.文字 */
		font-size: 1.6rem;
		/* 6.枠線 */
		border-top: 1px solid #333;
	}

	p.copyright {
		/* 2.サイズ */
		height: 40px;
		/* 4.文字 */
		font-size: 1.4rem;
		line-height: 40px;
	}	
	
	.sp-tel__btn {
		/* 1.レイアウト・配置 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 103;
		/* 2.サイズ */
		width: 100%;
	}
	
	.sp-tel__btn p {
		/* 4.文字 */
		font-size: 1.2rem;
	}
	
	/* 「TEL:」の部分 */
	.sp-tel__btn span:nth-child(1) {
		/* 3.余白 */
		margin-right: 0.5rem;
		/* 4.文字 */
		font-size: 1.3rem;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
	
	/* 電話番号の数字の部分 */
	.sp-tel__btn span:nth-child(2) {
		/* 4.文字 */
		font-size: 2rem;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
	
	.sp-tel__btn a {
		/* 1.レイアウト・配置 */
		display: block;
		/* 3.余白 */
		padding: 0.925rem 1rem;
		/* 4.文字 */
		color: #333;
		/* 5.色・背景 */
		background-color: #ffe380;
	}
}