@charset "UTF-8";

/* ===============================
	共通スタイル
=============================== */

:root {
	/* カラー変数の設定 */
	--primary-color: #AD8447;
	--secondary-color: #3A464F;
	--text-base-color: #46413C;
	--bg-color-grey: #eee;
	--bg-color-white: #fff;

	/* フォント設定 */
	--font-family-jp: "dnp-shuei-gothic-gin-std", sans-serif;
	--font-family-en: "Akshar", sans-serif;
	--font-size-base: 1.6rem;
}

article {
	font-family: var(--font-family-jp);
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-base);
	font-optical-sizing: auto;
	color: var(--text-base-color);
	line-height: 1.8;
}

.overflow-hidden {
	overflow: hidden;
}

article .base-width {
	max-inline-size: 1080px;
}

.photo-of img {
	object-fit: cover;
}

.photo-of .fit-top {
	object-position: top;
}

.image-container {
	max-inline-size: 100%;
	min-inline-size: 60px;
}

.padding-bottom-100 {
	padding-bottom: 120px;
}

/* 注釈 */
.annotation {
	font-size: 1.2rem;
	line-height: 22px;
}

.annotation span {
	color: #53B8E2;
}

.annotation span::after {
	content: "\00a0";
	/* ノーブレークスペースを挿入 */
}

/* リスト（・） */
ul.nakaguro {
	padding-left: 1.5em;
	/* margin-top: 1rem; */
}

ul.nakaguro li {
	text-indent: -1.5em;
}

ul.nakaguro li:before {
	content: "・";
	margin-right: 0.5em;
}

ul.nakaguro li:not(:last-of-type) {
	margin-bottom: 0.3em;
}

/* ボタン */
.button-container {
	margin-bottom: 10rem;
}

.large-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--secondary-color);
	inline-size: 550px;
	block-size: 100px;
	box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.15);
	color: var(--bg-color-white);
	font-size: 2rem;
	font-weight: 500;
	transition: .3s;
	margin-inline: auto;
}

.large-button:hover {
	background-color: #496274;
	text-decoration: none;
}

/* 別タブアイコン */
#event .newtab-icon::after {
	content: '';
	background-image: url('images/newtab.svg');
	background-size: contain;
	background-repeat: no-repeat;
	inline-size: 20px;
	block-size: 20px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
}


.reserve-list .newtab-icon::after {
	content: '';
	background-image: url('images/newtab.svg');
	background-size: contain;
	background-repeat: no-repeat;
	inline-size: 20px;
	block-size: 20px;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
}

/* 下アローアイコン */
.arrow-icon::after {
	content: '';
	position: absolute;
	inline-size: 10px;
	block-size: 10px;
	border-top: 2px solid white;
	border-right: 2px solid white;
	top: 45%;
	right: 6%;
	transform: translateX(-50%) rotate(135deg);
}

/* --------- フローティングリンク --------- */

.cafe-reserve a {
	position: fixed;
	z-index: 150;
	font-weight: 600;
	color: var(--bg-color-white);
	background-color: var(--secondary-color);
	transition: .3s;
}

.cafe-reserve a:hover {
	background-color: #496274;
	text-decoration: none;
}

/* .cafe-reserve a::after {
	display: inline-block;
	content: '';
	background-image: url('images/newtab.svg');
	background-size: contain;
	background-repeat: no-repeat;
	inline-size: 12px;
	block-size: 12px;
	margin-top: 0.5rem;
} */

/* --------- メインビジュアル --------- */

/* MV固定 */
.main-visual {
	position: relative;
	max-inline-size: 1400px;
	margin-inline: auto;
	margin-block-end: 10rem;
}

/* MVの背景画像 */
.mv-img {
	position: absolute;
	top: 0;
	right: 0;
	inline-size: 65%;

	block-size: 100%;
}

.mv-title {
	position: relative;
	block-size: 100%;
	inline-size: 45%;
	top: clamp(10px, 2vw,30px);
	left: 0;
	z-index: 1;

	display:flex;
  flex-flow: column;
  justify-content:space-between;
	background: rgba(243, 242, 242, 0.97);
}

.mv-detail {
	padding-block: clamp(.5em, 2vw, 1.8em);
	width: 85%;
	max-width: 520px;
	margin-inline: auto;
	text-align: center;
}

.logo-pop {
	width: fit-content;
	padding-block: clamp(.5em, 1.5vw, 1em);
	padding-inline: 2em;
	margin-inline: auto;
	background: #fff;
	border-top: 5px solid #AD8447;
	font-weight: 600;
}

.logo-pop span {
	color: #AD8447;	
}

.logo-title img {
	width: 85%;
}

.open-text {
	padding-block: .7em;
	margin-block: clamp(1em, 2vw, 1.8em);
	border-top: 1px solid var(--text-base-color);
	border-bottom: 1px solid var(--text-base-color);
}

.open-text p {
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 600;
	text-align: center;
	line-height: 1;
}

.open-text span {
	display: inline-block;
	font-family: var(--font-family-en);
	font-size: clamp(3rem, 4vw, 4rem);
	font-weight: 500;
	padding-left: 0.5rem;
	color: var(--primary-color);
	vertical-align: middle;
	line-height: 0;
}

/* 商品 */
.mv-product-img {
	width: 80%;
	margin-inline: auto;
}



/* 日付 */
.mv-date {
	padding-block: clamp(1em, 2vw, 1.6em);
	padding-inline: 10%;
	inline-size: 100%;
	background-color: var(--primary-color);
	text-align: center;
	color: #fff;
}

.mv-date img {
	max-inline-size: 480px;
}

.mv-date p {
	margin-block-start: 1em;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
}


/* --------- イントロ --------- */

.intro {
	padding-bottom: 10rem;
}

.intro p {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2.6;
}

/* --------- ページナビ --------- */

#pageNavi {
	position: absolute;
	left: 0;
	bottom: 0;
	inline-size: 100%;
	font-size: 1.5rem;
	block-size: 7rem;
}

#pageNavi:not(.fixed) .list-page-navi {
	display: flex;
	max-inline-size: 900px;
	margin: 0 auto;
}

#pageNavi:not(.fixed) .list-page-navi>li {
	display: flex;
	block-size: 7rem;
	flex: 1 0;
	border-left: 1px solid var(--primary-color);
	border-right: 1px solid var(--primary-color);
}

#pageNavi:not(.fixed) .list-page-navi>li:first-child {
	border-right: none;
}

#pageNavi:not(.fixed) .list-page-navi>li:last-child {
	border-left: none;
}

#pageNavi:not(.fixed) a {
	position: relative;
	display: block;
	text-align: center;
	padding-top: 30px;
	inline-size: 100%;
	block-size: 100%;
	font-weight: 600;
	color: var(--text-base-color);
}

#pageNavi:not(.fixed) .list-page-navi a::before {
	content: "";
	display: block;
	inline-size: 26px;
	block-size: 26px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
}

#pageNavi:not(.fixed) .list-page-navi a::after {
	content: '';
	position: absolute;
	inline-size: 8px;
	block-size: 8px;
	border-top: 2px solid var(--primary-color);
	border-right: 2px solid var(--primary-color);
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) rotate(135deg);
	transition: top 0.3s ease;
}

#pageNavi:not(.fixed) .list-page-navi li a {
	transition: .3s;
	text-decoration: none;
}

#pageNavi:not(.fixed) .list-page-navi li a:hover {
	color: var(--primary-color);
}

#pageNavi:not(.fixed) .list-page-navi li a:hover::after {
	bottom: -4px;
}

.list-page-navi a.active {
	color: var(--primary-color);
	font-weight: 500;
}

.link-about::before {
	background-image: url('images/about.svg');
}

.link-event::before {
	background-image: url('images/event.svg');
}

.link-schedule::before {
	background-image: url('images/schedule.svg');
}

.list-page-navi {
	display: flex;
	justify-content: center;
	align-items: center;
	block-size: 100%;
	max-inline-size: 900px;
	margin-inline: auto;
}

.list-page-navi>li {
	flex: 1 0;
	block-size: 6rem;
	border-left: 1px solid var(--primary-color);
	border-right: 1px solid var(--primary-color);
}

.list-page-navi>li:first-child {
	border-right: none;
}

.list-page-navi>li:last-child {
	border-left: none;
}

.page-navi-fix-wrap {
	position: relative;
	block-size: 7rem;
}

.list-page-navi li a {
	transition: .3s;
	text-decoration: none;
}

.list-page-navi li a:hover {
	color: var(--primary-color);
}

#pageNavi.fixed {
	position: fixed;
	top: -6rem;
	transform: translateY(-100%);
	left: 0;
	z-index: 10;
	inline-size: 100%;
	block-size: 6rem;
	background-color: var(--bg-color-white);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#pageNavi.hide {
	opacity: 0;
	top: 0;
	transition: transform 0.4s ease 0s, opacity 0.4s ease 0s;
}

#pageNavi.show {
	opacity: 1;
	top: 0;
	transform: translateY(0);
}

.page-navi-scroll a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 0;
	inline-size: 100%;
	block-size: 100%;
	font-weight: 600;
	color: var(--text-base-color);
}

.page-navi-scroll a::before {
	content: "";
	display: block;
	inline-size: 26px;
	block-size: 26px;
	background-size: contain;
	background-repeat: no-repeat;
	position: static;
	margin-right: 10px;
}

.page-navi-scroll .link-about::before {
	background-image: url('images/about.svg');
	/* アイコン画像のパス */
}

.page-navi-scroll .link-event::before {
	background-image: url('images/event.svg');
	/* アイコン画像のパス */
}

.page-navi-scroll .link-schedule::before {
	background-image: url('images/schedule.svg');
	/* アイコン画像のパス */
}

/* --------- セクション01（ヘルシオカフェについて） --------- */

#about {
	margin-top: 10rem;
	padding-bottom: 15rem;
}

#about,
#schedule {
	background: var(--bg-color-grey);
	/* overflow: hidden; */
}

.intro-text {
	text-align: center;
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 2.2;
	margin-bottom: 80px;
}

.section-title-outer {
	display: flex;
	justify-content: center;
	padding-top: 30px;
	padding-bottom: 80px;
}

.section-title {
	position: relative;
	display: flex;
	align-items: center;
	/* 縦方向の中央揃え */
	justify-content: center;
	/* 左右の端に寄せる */
	background-color: var(--primary-color);
	color: var(--bg-color-white);
	inline-size: 350px;
	block-size: 80px;
}

.section-title::before,
.section-title::after {
	content: '';
	position: absolute;
	inline-size: 3px;
	block-size: 30px;
	background-color: var(--primary-color);
}

.section-title::before {
	top: -30px;
	left: 40px;
}

.section-title::after {
	top: -30px;
	right: 40px;
}

.sub-title {
	text-align: center;
	font-family: var(--font-family-en);
	font-size: 7rem;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 80px;
}

.sub-title span {
	display: block;
	font-family: var(--font-family-jp);
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
}

.title-lines {
	position: relative;
	display: flex;
	align-items: center;
	/* 縦方向の中央揃え */
	justify-content: center;
	/* 左右の端に寄せる */
	gap: 1em;
	inline-size: 100%;
	margin: 0 auto 40px;
	padding: 1.7em;
	border-width: 3px 0;
	border-style: solid;
	border-color: var(--text-base-color);
}

.title-lines::before,
.title-lines::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	background-color: var(--text-base-color);
}

.title-lines::before {
	top: 4px;
	block-size: 1px;
}

.title-lines::after {
	bottom: 4px;
	block-size: 1px;
}

.reserve {
	display: flex;
	align-items: center;
	/* 縦方向の中央揃え */
	justify-content: center;
	/* 左右の端に寄せる */
	background-color: var(--primary-color);
	font-size: 1.8rem;
	font-weight: 500;
	color: var(--bg-color-white);
	padding: 0.1em 0.7em;
	border-radius: 2px;
	white-space: nowrap;
}

.title-lines h3 {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
}

/* ---------  カフェメニュー --------- */

.menu-container {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 4vw;
	margin-bottom: 4vw;
}


.cafe-menu {
	display: flex;
	flex-direction: column;
	/* 子要素を縦に並べる */
	gap: 2vw;
	inline-size: 65vw;
	block-size: 100%;
}


.cafe-menu.left {
	margin: 0 -14vw 0 -15vw;
	padding: 4vw 8vw 5vw 15vw;
	background-color: #FBFBFB;
}

.cafe-menu.right {
	margin: 5vw -15vw 0 10vw;
	padding: 4vw 15vw 8vw 8vw;
	background-color: rgba(224, 224, 226, 0.6);
}

.menu-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px dashed var(--primary-color);
	padding-bottom: 20px;
}

.product {
	inline-size: 26%;
}

.menu-name {
	inline-size: 68%;
	font-family: var(--font-family-en);
	font-size: clamp(1.8rem, 4vw, 5rem);
	font-weight: 500;
	line-height: clamp(2.6rem, 5vw, 6rem);
}

.menu-name span {
	display: block;
	font-family: var(--font-family-jp);
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	line-height: 1.4;
}

.list-menu {
	margin-right: 0;
	margin-left: auto;
	max-inline-size: 320px;
	inline-size: 100%;
	font-size: 1.5rem;
	text-align: right;
}

.list-menu ul {
	text-align: left;
}

.list-menu li {
	background-color: var(--bg-color-grey);
	border-left: 5px solid var(--primary-color);
	padding-left: 20px;
	margin-bottom: 10px;
}

.list-menu ul:nth-of-type(n+2) {
	margin-top: 3rem;
}

.menu-price {
	display: inline-block;
	/* テキストの長さに合わせて幅を調整 */
	border-bottom: 1px solid var(--text-base-color);
}

/* ---------  リベイク --------- */

.menu-rebake {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 40px;
}

.menu-rebake > div {
	width: calc(50% - 20px);
}

.list-genzairyou {
	font-size: 1.2rem;
}

.menu-rebake + .list-genzairyou {
	margin-top: 2em;
	margin-bottom: 120px;
}

p.c-plate {
	margin: 3rem 0 1rem;
}

.menu-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.menu-box .list-menu {
	margin-right: auto;
	margin-left: 0;
	margin-top: 2rem;
}

.menu-box .list-menu li {
	background-color: var(--bg-color-white);
}

/* ---------  メニュー監修 --------- */

.bgcolor-vw {
	background-color: var(--bg-color-white);
	border: 1px solid #CFCFCF;
	margin-bottom: 120px;
}

.consultant {
	display: flex;
	justify-content: space-between;
	/* 左右の端に要素を寄せる */
	align-items: center;
	/* 縦方向の中央揃え（オプション） */
	padding: 3rem 4rem;
}

.consultant-detail {
	display: flex;
	flex-direction: column;
	/* 子要素を縦に並べる */
	align-items: flex-start;
	/* 子要素を左揃えにする */
	inline-size: 65%;
}

.consultant-role {
	font-size: 1.4rem;
}

.consultant-name {
	font-size: 2.2rem;
	margin-bottom: 10px;

}

.consultant-title {
	font-size: 1.4rem;
	color: #63717C;
	margin-bottom: 24px;
}

.consultant .image-container {
	block-size: 280px;
	inline-size: 30%;
}

.consultant .image-container img {
	block-size: 100%;
}

/* ---------  イベント概要 --------- */

.event-intro {
	display: flex;
	align-items: flex-start;
	/* 子要素を左揃えにする */
	justify-content: center;
	/* 左右の端に寄せる */
	gap: 80px;
	margin-bottom: 40px;
}

.event-text {
	display: flex;
	flex-direction: column;
	/* 子要素を縦に並べる */
	align-items: flex-start;
	/* 子要素を左揃えにする */
	max-inline-size: 60%;
	gap: 30px;

}

.event-schedule {
	display: flex;
	flex-direction: column;
	/* 子要素を縦に並べる */
	align-items: center;
	/* 縦方向の中央揃え */
	margin-bottom: 50px;
	gap: 10px;
}



.table-title {
	font-size: 1.8rem;
}

.schedule-table {
	inline-size: 100%;
	display: flex;
	flex-wrap: wrap;
}

.schedule-table li {
	inline-size: 20%;
	text-align: center;
}

.schedule-table li:not(:last-of-type) {
	border-right: 2px solid var(--bg-color-grey);
}

.schedule-table li .date {
	font-family: var(--font-family-en);
	font-size: var(--font-size-base);
	font-weight: 500;
	background-color: #D4DBDF;
	border-bottom: 2px solid var(--bg-color-grey);
	padding: 1rem;
}

.schedule-table li .title {
	block-size: 110px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 2.2rem;
	background-color: var(--bg-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2rem;
}

/* ---------  その他企画 --------- */

.collaboration-menu {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 3rem;
	border: 1px solid #9DA0A2;
	padding: 1.5rem 1rem;
}

.collaboration-menu .detail {
	inline-size: 76%;
}

.collaboration-menu .collabo-title {
	margin-bottom: 0.5rem;
}

.collaboration-menu .collabo-title:nth-of-type(2) {
	margin-top: 1rem;
}

.tasting-logo {
	inline-size: 14%;
	padding: 2rem 3rem;
	background-color: #fff;
}

.tasting-logo li:not(:last-of-type) {
	margin-bottom: 2.5rem;
}

/* --------- セクション02（イベント詳細） --------- */

.event-datail {
	display: flex;
	flex-direction: column;
	/* 子要素を縦に並べる */
	align-items: flex-start;
	/* 子要素を左揃えにする */
	gap: 30px;
	margin-bottom: 100px;
}

h3.event-datail-title {
	display: block;
	inline-size: 100%;
	background: var(--bg-color-grey);
	border-left: 10px solid var(--primary-color);
	padding: 18px 30px;
	font-family: var(--font-family-jp);
	font-size: 2rem;
	font-weight: 500;
	line-height: 4rem;
}

.event-datail-title span {
	display: inline-block;
	vertical-align: middle;
	font-family: var(--font-family-en);
	font-weight: 500;
	margin-right: 1rem;
}

.event-datail-title span {
	font-size: 4rem;
	margin-right: 6px;
}

.event-datail-title span.week {
	font-size: 3rem;
	margin-left: 1rem;
}

.event-flex {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	inline-size: 100%;
	/* gap: 40px; */
}

.event-datail .image-container {
	inline-size: 45%;
	block-size: 300px;
}

.event-flex-column {
	display: flex;
	flex-direction: column;
	/* 子要素を縦に並べる */
	align-items: flex-start;
	/* 子要素を左揃えにする */
	inline-size: 50%;
	min-inline-size: 360px;
	gap: 40px;
}

.details-table {
	inline-size: 100%;
	border-collapse: collapse;
}

.details-table th,
.details-table td {
	border-top: 1px solid #9DA0A2;
}

.details-table th {
	position: relative;
	text-align: center;
	inline-size: 32%;
	padding: 8px 0;
}

/* thとtdの区切り線 */
.details-table th::after {
	content: '';
	position: absolute;
	top: 16%;
	bottom: 16%;
	left: 100%;
	inline-size: 1px;
	background-color: #9DA0A2;
}

.details-table td {
	text-align: left;
	padding-left: 20px;
}

/* 最終行に下ボーダー設定 */
.details-table tr:last-child th,
.details-table tr:last-child td {
	border-bottom: 1px solid #9DA0A2;
}

/* 申し込むボタン */
.small-button-wrap {
	inline-size: 100%;
}

.small-button {
	position: relative;
	display: flex;
	align-items: center;
	/* 縦方向の中央揃え */
	justify-content: center;
	/* 左右の端に寄せる */
	background: var(--secondary-color);
	inline-size: 100%;
	block-size: 70px;
	box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.15);
	color: var(--bg-color-white);
	font-size: 2rem;
	font-weight: 500;
	transition: background-color 0.2s ease;
	/* ホバー時の色変化をスムーズに */
}

.small-button:hover {
	background-color: #496274;
	/* ホバー時の背景色 */
	color: var(--bg-color-white);
	text-decoration: none;
	/* 下線も表示しない */
}

.tasting-menu {
	inline-size: 100%;
}

.tasting-intro {
	margin-bottom: 40px;
}

.tasting-menu .annotation {
	padding-top: 40px;
}

.tasting-menu-title {
	display: inline-block;
	color: var(--bg-color-white);
	background-color: var(--primary-color);
	padding: 5px 20px;
}

.tasting-menu-text {
	display: flex;
	align-items: center;
	/* 縦方向の中央揃え */
	justify-content: space-between;
	/* 左右の端に寄せる */
	padding: 10px 20px;
	font-size: 1.4rem;
	border: 1px solid var(--primary-color);
}

.event-datail + .caption {
	margin-bottom: 100px;
}

/* --------- セクション03（開催日時・アクセス） --------- */

.date-table {
	inline-size: 100%;
	border-collapse: collapse;
	/* セル間の隙間をなくす */
	background: var(--bg-color-white);
	margin-bottom: 80px;
}

.date-table th,
.date-table td {
	padding: 12px 30px;
	border-bottom: 6px solid var(--bg-color-grey);
}

.date-table th {
	font-size: 600;
	text-align: center;
	color: var(--primary-color);
}

/* 動画で確認ボタン */

.route-button {
	margin-block: 1em;
}

.route-button a {
	display: inline-block;
	border-radius: 5px;
	font-size: 1.4rem;
	color: var(--bg-color-white);
	background: var(--secondary-color);
	padding: 10px 20px;
	line-height: 4rem;
	transition: background-color 0.2s ease;
	/* ホバー時の色変化をスムーズに */
}

.route-button a:hover {
	background-color: #496274;
	/* ホバー時の背景色 */
	color: var(--bg-color-white);
	text-decoration: none;
	/* 下線も表示しない */
}

/* --------- google map --------- */

.map-container {
	/* inline-size: min(100%, 1500px); */
	inline-size: 100%;
	block-size: 600px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	filter: grayscale(100%);
	/* グレースケールに */
}

iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}


/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

	br.sp {
		display: none;
		/* 画面サイズでbrを無効にする */
	}

	/* --------- フローティングリンク --------- */

	.cafe-reserve a {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 200px;
		right: 0;
		inline-size: auto;
		block-size: 80px;
		padding: 2.5rem 0;
		writing-mode: vertical-rl;
		letter-spacing: 0.15rem;
		box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.4);
	}


	/* --------- セクション03（開催日時・アクセス） --------- */

	.date-table th {
		inline-size: 17%;
		border-right: 6px solid var(--bg-color-grey);
	}

}

/* ====================================
	大きいPC style
===================================== */
@media screen and (min-width: 1500px) {

	/* --------- セクション01（ヘルシオカフェについて） --------- */

	.cafe-menu.left {
		padding: 4vw 8vw 5vw 12vw;
	}

	.cafe-menu.right {
		padding: 4vw 12vw 8vw 8vw;
	}

}

/* ====================================
		幅1200px以上PC style
===================================== */
@media screen and (width >=1200px) {




}

/* ====================================
	TAB style
===================================== */
@media screen and (min-width:768px) and (max-width: 1023px) {

	/* --------- セクション01（ヘルシオカフェについて） --------- */

	.event-intro {
		gap: 40px;
	}

	.event-text {
		max-inline-size: 55%;
	}

	.mv-date p {
		font-size: 1.4rem;
	}
	

}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	#pageTop {
		display: none;
	}

	article {
		font-size: 1.4rem;
		line-height: 1.7;
	}

	br.pc {
		display: none;
		/* 画面サイズでbrを無効にする */
	}

	/* --------- フローティングリンク --------- */

	.cafe-reserve a {
		bottom: 3vw;
		right: 3vw;
		inline-size: auto;
		block-size: auto;
		padding: 1rem 2rem;
		text-align: center;
		line-height: 1.4;
		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
	}

	.cafe-reserve a::after {
		inline-size: 10px;
		block-size: 10px;
		margin-top: 0;
		margin-left: 0.5rem;
	}

	/* ---------  メインビジュアル --------- */

	.main-visual {
		position: relative;
		margin-bottom: 10vw;
		block-size: auto;
	}

	.mv-img {
		position: relative;
		inline-size: 100%;
	}

	.mv-title {
		display: block;
		position: static;
		left: auto;
		top: auto;
		width: 100%;
	}

	.logo-title img {
		width: 100%;
	}

	.mv-detail {
		background: rgba(243, 242, 242, 0.90);
		padding-block: 2rem;
		width: 80%;
		max-width: 420px;
	}

	.open-text {
		padding-inline: 4em;
	}

	.open-text p {
		font-size: clamp(2rem, 6vw, 6rem);
	}

	.open-text span {
		font-size: clamp(3rem, 7vw, 7rem);
	}

	.mv-date {
		padding: 4vw 5%;
	}

	.mv-date img {
		max-inline-size: 420px;
		inline-size: 80%;
	}

	.mv-date p {
		font-size: 1.4rem;
	}
	

	/* --------- イントロ --------- */

	.intro {
		padding-bottom: 10vw;
	}

	.intro p {
		text-align: left;
		font-size: 1.4rem;
		line-height: 2;
	}

	/* --------- ページナビ --------- */

	#pageNavi .base-width {
	}

	#pageNavi:not(.fixed) .base-width {
		display: block;
	}

	#pageNavi {
		/* font-size: calc(100vw /33); */
		font-size: 1.2rem;
		line-height: 1.4;
	}

	#pageNavi a::before {
		display: none;
		inline-size: 20px;
		block-size: 20px;
	}

	.page-navi-scroll {
		font-size: 1.2rem;
		line-height: 1.4;
		text-align: center;
	}

	.page-navi-scroll a::before {
		position: static;
		inline-size: 20px;
		block-size: 20px;
		margin-right: 8px;
		transform: none;
	}

	.list-page-navi>li:first-child,
	.list-page-navi>li:last-child {
		border-right: none;
		border-left: none;
	}

	/* --------- セクション01（ヘルシオカフェについて） --------- */
	#about {
		padding-bottom: 5rem;
	}
	
	.intro-text {
		font-size: 1.5rem;
		font-weight: 600;
		line-height: 2;
		margin-bottom: 10vw;
	}

	.section-title-outer {
		padding-top: 20px;
		padding-bottom: 50px;
	}

	.section-title {
		inline-size: 215px;
		block-size: 52px;
	}

	.section-title h2 {
		font-size: 1.4rem;
	}

	.section-title::before {
		top: -20px;
		left: 40px;
	}

	.section-title::after {
		top: -20px;
		right: 40px;
	}

	.sub-title {
		font-size: 4.8rem;
		line-height: 3.6rem;
		margin-bottom: 6vw;
	}

	.sub-title span {
		font-size: 1.4rem;
	}

	.title-lines {
		flex-direction: column;
		gap: 0.8em;
		inline-size: 100%;
		margin: 0 auto 6vw;
		padding: 1.4em;
	}

	.reserve {
		font-size: 1.2rem;
	}

	.title-lines h3 {
		font-size: 1.5rem;
		text-align: center;
	}

	/* ---------  カフェメニュー --------- */

	.menu-container {
		display: flex;
		flex-direction: column;
		/* 子要素を縦に並べる */
		align-items: center;
		/* 縦方向の中央揃え */
		justify-content: center;
		/* 子要素を中央に寄せる */
		margin-top: 12vw;
		margin-bottom: 12vw;
	}

	.cafe-menu {
		display: flex;
		flex-direction: column;
		/* 子要素を縦に並べる */
		gap: 4vw;
		inline-size: 100vw;
		block-size: 100%;
	}

	.cafe-menu.left {
		inline-size: 105%;
		margin: 0 0 -25vw -5vw;
		padding: 12vw 14vw 35vw 10vw;

		background-color: #FBFBFB;
	}

	.cafe-menu.right {
		inline-size: 105%;
		margin: 0 -5vw 0 0;
		padding: 12vw 10vw 15vw 14vw;
		background-color: rgba(224, 224, 226, 0.6);
	}

	.menu-title {
		border-bottom: 1px solid var(--primary-color);
		padding-bottom: 20px;
		gap: 20px;
	}

	.menu-name {
		font-size: clamp(3rem, 7vw, 8rem);
		line-height: clamp(3.3rem, 8vw, 9rem);
	}

	.menu-name span {
		font-size: clamp(1.3rem, 3vw, 3.2rem);
	}

	.list-menu {
		inline-size: 85%;
		font-size: 1.3rem;
	}

	/* ---------  こちらボタン --------- */

	.button-container {
		margin-bottom: 5rem;
	}

	.large-button {
		inline-size: 85%;
		max-inline-size: 300px;
		block-size: auto;
		padding: 15px 0;
		font-size: 1.4rem;
		line-height: 1.5;
	}

	#event .newtab-icon::after {
		inline-size: 15px;
		block-size: 15px;
		right: 25px;
	}
	
	.reserve-list .newtab-icon::after {
		inline-size: 15px;
		block-size: 15px;
		right: 25px;
	}

	.arrow-icon::after {
		inline-size: 8px;
		block-size: 8px;
		top: 40%;
	}

	/* ---------  リベイク --------- */

	.menu-rebake {
		flex-direction: column;
		/* 子要素を縦に並べる */
		gap: 4vw;
	}

	.menu-box {
		display: contents;
	}

	.menu-rebake .image-container {
		order: 3;
		inline-size: 100%;
	}

	.menu-rebake + .list-genzairyou {
		margin-bottom: 16vw;
	}

	.menu-box p {
		order: 1;
	}

	p.c-plate {
		order: 4;
		margin: 0;
		margin-left: auto;
	}

	.menu-box .list-menu {
		order: 5;
		inline-size: 75%;
		margin-right: 0;
		margin-left: auto;
		margin-top: 0;
	}

	.annotation {
		order: 2;
	}

	/* ---------  メニュー監修 --------- */

	.bgcolor-vw {
		margin-bottom: 16vw;
		margin: 0 5% 14vw 5%;
	}

	.consultant {
		flex-direction: column;
		/* 子要素を縦に並べる */
		padding: 10vw 4vw;
		gap: 4vw;
	}

	.consultant .image-container {
		inline-size: 100%;
	}

	.consultant-detail {
		inline-size: 100%;
	}

	.consultant-role {
		font-size: 1.2rem;
	}

	.consultant-name {
		font-size: 2rem;
	}

	.consultant-title {
		font-size: 1.2rem;
	}

	.consultant .image-container,
	.consultant .image-container img {
		block-size: 55vw;
	}

	.event-intro {
		flex-direction: column-reverse;
		/* 下から縦方向に並べる */
		gap: 4vw;
	}

	/* .event-intro .image-container {
		inline-size: 100%;
	} */

	.event-text {
		max-inline-size: 100%;
		gap: 4vw;

	}

	.event-schedule {
		display: flex;
		flex-direction: column;
		/* 子要素を縦に並べる */
		align-items: center;
		/* 縦方向の中央揃え */
		font-weight: 600;
		margin-bottom: 60px;
		gap: 20px;
	}


	.table-title {
		font-size: 1.4rem;
	}

	.schedule-table li {
		inline-size: 100%;
		text-align: center;
	}

	.schedule-table li:not(:last-of-type) {
		border-right: none;
		border-bottom: 2px solid var(--bg-color-grey);
	}

	.schedule-table li .date {
		border-bottom: 2px solid var(--bg-color-grey);
		padding: 1rem;
	}

	.schedule-table li .title {
		block-size: auto;
		font-size: 1.3rem;
		line-height: 2.2rem;
		padding: 2rem;
	}

	/* ---------  その他企画 --------- */

	.collaboration-menu {
		display: block;
		margin-bottom: 3rem;
		padding: 2rem;
	}

	.collaboration-menu .detail {
		inline-size: 100%;
	}

	.collaboration-menu .collabo-title {
		margin-bottom: 0.5rem;
	}

	.collaboration-menu .collabo-title:nth-of-type(2) {
		margin-top: 1rem;
	}

	.tasting-logo {
		inline-size: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		padding: 1rem 1rem;
		margin-top: 1rem;
	}

	.tasting-logo li {
		inline-size: 28%;
	}

	.tasting-logo li:not(:last-of-type) {
		margin-bottom: 0;
	}

	/* --------- セクション02（イベント詳細） --------- */

	.event-datail {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
		margin-bottom: 12vw;
	}

	.event-datail p {
		order: 3;
	}

	h3.event-datail-title {
		border-left: 8px solid var(--primary-color);
		padding: 1.5rem;
		font-size: 1.4rem;
		line-height: 2rem;
	}

	.event-datail-title span.date {
		display: block;
		font-family: var(--font-family-en);
		font-size: 2.6rem;
		margin-right: 6px;
		margin-bottom: 0.5rem;
	}

	.event-datail-title span.week {
		display: inline-block;
		font-size: 1.8rem;
		margin-right: 14px;
	}

	.event-datail .image-container {
		block-size: 55vw;
	}

	.event-flex {
		display: contents;
	}

	.event-flex-column {
		display: contents;
	}

	.event-flex .image-container {
		inline-size: 100%;
		min-block-size: initial;

		order: 2;
	}

	.details-table {
		order: 5;
		font-size: 1.3rem;
	}

	.details-table th {
		padding: 10px 10px;
	}

	.details-table td {
		padding: 1rem;
	}

	/* 申し込むボタン */
	.small-button-wrap {
		order: 6;
	}

	.small-button {
		block-size: 50px;
		font-size: 1.4rem;
	}

	.small-button::after {
		inline-size: 15px;
		block-size: 15px;
	}

	.tasting-menu {
		order: 4;
	}

	.tasting-menu-text {
		display: block;
		font-size: 1.3rem;
		flex-direction: column;
	}

	.event-datail .annotation {
		order: 7;
	}

	.padding-bottom-100 {
		padding-bottom: 16vw;
	}

	.event-datail + .caption {
		margin-bottom: 12vw;
	}

	/* --------- セクション03（開催日時・アクセス） --------- */

	/* 表を縦一列に */
	.date-table,
	.date-table tr,
	.date-table th,
	.date-table td {
		display: block;
		/* すべてをブロック要素に変換 */
		inline-size: 100%;
		/* 各セルの幅を100%に */
		box-sizing: border-box;
	}

	.date-table th,
	.date-table td {
		padding: 10px 20px;
	}

	.schedule-table th,
	.schedule-table td {
		text-align: center;
		border: 2px solid var(--bg-color-grey);
	}

	.schedule-table th {
		font-family: var(--font-family-en);
		font-size: var(--font-size-base);
		font-weight: 500;
		background-color: #D4DBDF;
		padding: 10px;
	}

	/* 動画で確認ボタン */
	.route-button {
		border-radius: 4px;
		font-size: 1.3rem;
	}

	/* --------- google map --------- */

	.map-container {
		block-size: 80vw;
	}


}