@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

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

	Goope Style / STUDIO Forest
	breakpoint : 480px / 768px / 1024px / 

	2025.12.01

	Based on Geometric: ver.1.0.0

	Powered by Goope GMO pepabo
	Arranged by ShiShiDesign

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

/* =====================================================
	CSS Variables
 ===================================================== */
:root {
	/* Colors */
	--primary-color: #22bb77;
	--secondary-color: #f8a8a8;
	--accent-color: #24bf7a;
	--bg-pattern: #def4ea;
	--text-primary: #000000;
	--text-secondary: #607d8b;
	--border-color: #cfd8dc;
	--white: #ffffff;
	--gray: #a5a4a4;
	--light-gray: #f5f5f5;
	--alpha: 249, 167, 167;

	/* Typography */
	--font-primary: 'Zen Kaku Gothic New', sans-serif;
	--font-secondary: 'Zen Maru Gothic', sans-serif;
	--font-num: "Manrope", sans-serif;
	--font-size-base: 1rem;
	--line-height-base: 1.8;

	/* Spacing */
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 40px;
	--spacing-xxl: 64px;

	/* Layout */
	--container-width: 1300px;
	--header-height: 80px;
	--top-spacing: 50px;
	--top-spacing-pc: 170px;

	/* Animation */
	--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	
}
@media (min-width: 480px) {
:root {
	--spacing-xs: 10px;
	--spacing-sm: 20px;
	--spacing-md: 30px;
	--spacing-lg: 40px;
	--spacing-xl: 50px;
	--spacing-xxl: 80px;
	}
}
@media (min-width: 768px) {
:root {
	--spacing-xs: 12px;
	--spacing-sm: 24px;
	--spacing-md: 36px;
	--spacing-lg: 48px;
	--spacing-xl: 60px;
	--spacing-xxl: 96px;
	}
}
/* MARGIN-TOP */
.mt00 { margin-top:0px!important; }
.mt06 { margin-top:6px!important; }
.mt12 { margin-top:12px!important; }
.mt24 { margin-top:24px!important; }
.mt36 { margin-top:36px!important; }
.mt48 { margin-top:48px!important; }
.mt60 { margin-top:60px!important; }

/* MARGIN-BOTTOM */
.mb00 { margin-bottom:0!important; }
.mb06 { margin-bottom:6px!important; }
.mb10 { margin-bottom:10px!important; }
.mb12 { margin-bottom:12px!important; }
.mb15 { margin-bottom:15px!important; }
.mb24 { margin-bottom:24px!important; }
.mb36 { margin-bottom:36px!important; }


/* =====================================================
	Reset & Base Styles
===================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-padding-top: var(--top-spacing);
	scroll-behavior: smooth;
	font-size: var(--font-size-base);
/*	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
*/}
body {
	font-family: var(--font-primary);
	font-weight: 400;
	line-height: var(--line-height-base);
	color: var(--text-primary);
	background-color: var(--white);
	overflow-x: hidden;
	overflow-y: scroll;
}
main {
	margin-bottom: 60px;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
.goog-te-gadget img {
	display: inline;
}
a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-base);
}
a:hover {
	color: var(--accent-color);
	opacity: 0.8;
}
ul, ol {
	list-style: none;
}
button {
	font-family: var(--font-primary);
	font-size: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	transition: var(--transition-base);
}
@media (min-width: 768px) {
	html {
		scroll-padding-top: var(--top-spacing-pc);
	}
}
/* =====================================================
	Utility Classes
 ===================================================== */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--spacing-sm);
}
@media (min-width: 768px) {
	.container {
		padding: 0 2vw;
	}
}
	
/* =====================================================
	To Top Button
 ===================================================== */
.totop {
	position: fixed;
	bottom: var(--spacing-lg);
	right: var(--spacing-xs);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition-base);
}
.totop.show {
	opacity: 1;
	visibility: visible;
}
.totop:hover {
	transform: scale(1.05);
}
.totop .geometric-btn {
	width: 56px;
	height: 56px;
	background: var(--secondary-color);
	border-radius: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: var(--transition-base);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.totop .geometric-btn svg {
	position: relative;
	z-index: 1;
	color: #fff;
	transition: var(--transition-base);
}

/* =====================================================
	Header
 ===================================================== */
.site-header {
	background: var(--white);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
	position: relative;
	width: 100%;
	z-index: 100;
}
.header-inner {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-sm) 2vw;
	max-width: var(--container-width);
	margin: 0 auto;
}
.header-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5em;
}
.site-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	text-align: center;
	position: relative;
}
.site-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

/* Logo & Site Description */
.site-logo {
	width: 208px;
	/*height: 51px;*/
}
.site-logo a {
	display: block;
	width: 208px;
}
.site-logo img {
	width: 100%;
	height: auto;
}
.site-description {
	line-height: 1.3;
	color: var(--gray);
}
.site-description span {
	display: flex;
	flex-direction: column;
}
.site-phone {
	color: var(--gray);
	font-size: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	line-height: 1.1;
}
.site-phone span {
	white-space: nowrap;
}

.shop-tel {
	font-family: var(--font-num);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--primary-color);
	letter-spacing: 0.01em;
}

@media (min-width: 480px) {
	.site-name {
		flex-direction: column;
		gap: 1em;
	}
}
@media (min-width: 768px) {
	.site-name {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.site-info {
		flex-direction: row;
		justify-content: flex-end;
		white-space: nowrap;
	}
	.site-description {
		text-align: left;
	}
	footer .site-description {
		font-size: 90%;
	}
}
@media (min-width: 1024px) {
	.header-wrap {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
	}
	.site-name {
		text-align: left;
	}
}

/* Main Navigation */
.main-nav {
	width: 100%;
	border-top: none;
	padding: 0 var(--spacing-sm);
	position: relative;
	background: #fff;
	transition: box-shadow 0.3s ease;
}
.nav-list {
	display: none;
}

@media (min-width: 768px) {
	.main-nav {
		z-index: 100;
	}
	.main-nav.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}
	body#free .main-nav.is-fixed {
		position: relative;
		
	}
	.header-inner.is-hidden {
		display: none;
	}
	.nav-list {
		display: flex;
		justify-content: center;
		gap: 0 var(--spacing-sm);
		padding: var(--spacing-xs) 0;
		flex-wrap: wrap;
		align-items: center;
	}
}
@media (min-width: 1024px) {
	.nav-list {
		gap: 0 var(--spacing-md);
	}
}

.nav-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nav-link {
	display: flex;
	align-items: center;
	/*gap: 6px;*/
	padding: 10px 0 8px;
	font-weight: 500;
	letter-spacing: 0.03em;
	position: relative;
	white-space: nowrap;
}
ul.nav-list li.active a,
body#top ul.nav-list li.navi_top a {
	background: url("https://cdn.goope.jp/220315/251019161415-68f48fc70c771.png") no-repeat top center;
	background-size: 42px auto;
}

/* Sub Navigation */
.sub_navi {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0 0 30px 0;
}
body#info .sub_navi {
	display: none;
}
.sub_navi li {
	display: grid;
}
.sub_navi a {
	display: grid;
	align-items: center;
	text-align: center;
	font-weight: 500;
	color: var(--secondary-color);
	background-color: rgba(var(--alpha), 0.30);
	border-radius: 4px;
	line-height: 1.3;
	padding: 0.75em 0.5em 0.75em;
	text-decoration: none;
}
.sub_navi a.active {
	color: var(--white);
	background-color: rgba(var(--alpha), 0.90);
}
.sub_navi a:hover {
	font-weight: 700;
	background-color: rgba(var(--alpha), 0.20);
}
.sub_navi a.active:hover {
	background-color: rgba(var(--alpha), 0.90);
}
.nav-footer .sub_navi {
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 1vw;
}
body#info .nav-footer .sub_navi {
	display: grid;
}
.nav-footer .sub_navi a {
	font-family: var(--font-num);
	color: var(--white);
	background-color: #ccc;
}
.nav-footer .sub_navi a:hover {
	background-color: #ddd;
}
.nav-footer .sub_navi a.active {
	background-color: #bbb;
}

@media (min-width: 768px) {
	.sub_navi {
		grid-template-columns: repeat(2, 1fr);
	}
	.sub_navi a {
		padding: var(--spacing-xs);
		font-size: 16px;
	}
	.nav-footer .sub_navi {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 1024px) {
	.sub_navi {
		grid-template-columns: repeat(4, 1fr);
	}
	.nav-footer .sub_navi {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Mobile Menu Toggle */
.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	position: fixed;
	top: var(--spacing-xs);
	right: var(--spacing-xs);
	z-index: 9999;
	background: var(--secondary-color);
	border-radius: 100vw;
	cursor: pointer;
	transition: var(--transition-base);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.menu-toggle:hover {
	transform: scale(1.05);
}
.menu-toggle:active {
	transform: scale(0.95);
}
.menu-icon {
	width: 24px;
	height: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.menu-icon span {
	display: block;
	height: 2px;
	background: #fff;
	transition: var(--transition-base);
	transform-origin: center;
	position: absolute;
	width: 100%;
	left: 0;
}
.menu-icon span:nth-child(1) {
	top: 0;
}
.menu-icon span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}
.menu-icon span:nth-child(3) {
	bottom: 0;
}

/* メニューが開いた時の×ボタンアニメーション */
.menu-open .menu-toggle {
	border-color: var(--accent-color);
}
.menu-open .menu-toggle .menu-icon span {
	background: var(--white);
}
.menu-open .menu-icon span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
.menu-open .menu-icon span:nth-child(2) {
	opacity: 0;
	transform: translateY(-50%) scaleX(0);
}
.menu-open .menu-icon span:nth-child(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}

/* Mobile Navigation */
.mobile-nav {
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	max-width: 400px;
	height: 100vh;
	background: #fff;
	box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
	transition: var(--transition-base);
	z-index: 1001;
	overflow-y: auto;
	padding-top: 30px;
}
.menu-open .mobile-nav {
	right: 0;
}
.mobile-nav-inner {
	padding: var(--spacing-lg) var(--spacing-md);
}
.mobile-nav-item {
	border-bottom: 1px solid var(--border-color);
}
.mobile-nav-link {
	display: block;
	padding: var(--spacing-sm) 0;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: var(--transition-base);
	z-index: 998; /* メニューボタンより下に */
}
.menu-open .mobile-overlay {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 768px) {
	.menu-toggle {
		display: none;
	}
}


/* =====================================================
	Button
 ===================================================== */
.btn-area {
	text-align: center;
	margin-top: 0.75em;
}
.is-right {
	text-align: right;
}

div + .button-area{
	margin-top: 1em;
}
.btn-round,
.btn-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: 0.9em 2.25em 0.9em 1.25em;
	border-width: 0px;
	border-radius: 100vh;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	background-color: var(--secondary-color);
	transition: all 0.3s;
	overflow: hidden;
	z-index: 2;
}
.btn:after,
.btn-round:after,
.btn-submit:after {
	position: absolute;
	content: "";
	top: 50%;
	transform: translateY(-50%);
	right: 18px;
	transition: all 0.15s;
	background-image: url("data:image/svg+xml,%3csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m1 1 5 5-5 5' stroke='white' stroke-width='2'/%3e%3c/svg%3e");
	background-size: 100%;
	width: 8px;
	height: 12px;
}
.btn:hover,
.btn-round:hover,
.btn-submit:hover {
	opacity: 0.90;
	animation: blink 0.5s ease 0s both;
	background-color: var(--secondary-color);
	box-shadow: 0 3px 9px rgba(0,0,0,0.1);
}
.btn:hover:after,
.btn-round:hover:after,
.btn-submit:hover:after {
	margin-right: -4px;
}
.section-footer {
	text-align: center;
	margin-top: var(--spacing-xl);
}

/* =====================================================
	Sections, Title
 ===================================================== */
.section {
	padding: var(--spacing-xxl) 0 0;
	margin-top: var(--spacing-md);
	position: relative;
}
.section-title,
.category-title,
.article-title,
.album-title,
.wysiwyg h2 {
	position: relative;
	margin-bottom: var(--spacing-sm);
	font-size: 1.5rem;
	font-family: var(--font-secondary);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: var(--secondary-color);
}
.wysiwyg h2 {
	margin-top: var(--spacing-xxl);
}
/*body#free .free-content h2 {
	margin-top: 150px;
}*/
.section-title:after,
.category-title:after,
.article-title:after,
.album-title:after,
.wysiwyg h2:after {
	content: "";
	position: absolute;
	left: -8px;
	top: -36px;
	background-image: url( 'data:image/svg+xml;utf-8,<svg fill="%232FB173" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 36"><g><path d="M15.9,20.8c2,3.6,5.1,5.7,9,6.7c1.3,0.3,2.7,0.5,4,0.6c2.6,0.1,5.3-0.1,7.9-0.4c3-0.3,6-0.7,9-0.6	c3.1,0.1,6,0.8,8.8,2.4c0.2,0.1,0.5,0.3,0.7,0.3c0.1,0,0.4-0.1,0.5-0.2c0.1-0.1,0.1-0.3,0.1-0.4c-0.1-0.3-0.3-0.5-0.5-0.7 c-0.8-0.6-1.5-1.2-2.4-1.7c-3.4-2.1-7.1-3.5-11-4.2c-2.8-0.5-5.6-0.8-8.4-1.1c-4.2-0.5-8.4-1.1-12.6-1.6c-0.5-0.1-1-0.2-1.4-0.3 c-0.2-0.1-0.4-0.2-0.6-0.4c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.1,0.1-0.2,0.2-0.2c0.2,0,0.4,0,0.7,0c4.9,0.7,9.8,1.3,14.7,2 c2.5,0.3,5,0.7,7.5,1.1c3.9,0.7,7.5,2.1,10.8,4.1c1.3,0.8,2.5,1.7,3.5,2.8c0.2,0.2,0.5,0.5,0.7,0.8c0.3,0.3,0.4,0.7,0.3,1.2 c-0.1,0.4,0,0.7,0.4,1c1.1,0.7,1.7,1.7,2.3,2.8c0.1,0.2,0.2,0.3,0.3,0.5c0.2,0.2,0.4,0.3,0.6,0.1c0.1-0.1,0.3-0.3,0.2-0.5 c-0.1-0.3-0.2-0.7-0.3-1c-1.1-2.6-2.7-5-4.6-7.1c-3.3-3.5-7.2-5.9-11.6-7.6c-3-1.1-6.1-1.8-9.2-2.2c-3.3-0.5-6.6-0.5-9.9-0.5 c-2.1,0-4.1,0.1-6.2,0.2c-0.3,0-3.7,0.4-4.5,1.2c0.9,0.7,0.7,0.9,0.7,1.1c0,0.2-0.3,0.3-0.6,0.3C15,19.4,15.8,20.7,15.9,20.8z"/><path d="M1,7.5c0-2.2,0.6-4,1.6-5.6c0.1-0.2,0.3-0.4,0.5-0.6C3.3,1,3.6,0.9,3.9,1.1c0.3,0.2,0.4,0.5,0.3,0.8 C4.1,2.1,4,2.4,3.8,2.7c-0.6,1-1,2-1.2,3.1C2,9.3,3.1,12.1,5.8,14.3c0.9,0.8,2,1.3,3.1,1.6c1.2,0.4,2.4,0.7,3.6,1 c0.3,0.1,0.6,0.1,0.9,0.3c0.3,0.1,0.4,0.5,0.3,0.8c-0.1,0.3-0.3,0.5-0.7,0.5c-0.1,0-0.3,0-0.4-0.1C11,18.2,9.5,17.8,8,17.2 c-2-0.8-3.8-2-5.1-3.8C1.6,11.6,0.9,9.6,1,7.5z"/></g></svg>' );
	background-repeat: no-repeat;
	width: 62px;
	height: 36px;
	background-size: contain;
}

@media (min-width: 768px) {
	.section {
		margin-top: 0;
	}
	.section.info-section {
		margin-top: var(--spacing-xxl);
	}
	.section-title,
	.category-title,
	.article-title {
		font-size: 1.8rem;
	}
}

/* ---------------------------------
	slide section
--------------------------------- */
.hero-section {
	position: relative;
	overflow: hidden;
	height: 50vh;
	min-height: 400px;
}
.hero-slider {
	width: 100%;
	height: 100%;
	position: relative;
}
.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.slide.active {
	opacity: 1;
}
.slide-image {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	padding: var(--spacing-lg);
}
.slide-caption {
	display: inline-block;
}
.slide-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
	color: var(--white);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.05em;
}

/* ---------------------------------
	welcome section
--------------------------------- */
.welcome-content {
	margin: 0 auto;
}
.welcome-text p {
	margin-bottom: 0.75em;
}

@media (min-width: 768px) {
	.welcome-text {
		font-size: 110%;
	}
}

/* ---------------------------------
	lesson section
--------------------------------- */
ul.lesson-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-xl);
}
li.lesson-box {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1em;
}
li.lesson-box .lesson-img {
	position: relative;
	flex: 0 0 auto;
}
li.lesson-box .lesson-img:after {
	content: "";
	position: absolute;
	left: -10px;
	bottom: -25px;
	background-image: url("https://cdn.goope.jp/220315/251019160631-68f48df7a3079.png");
	background-repeat: no-repeat;
	width: 62px;
	height: 76px;
	background-size: contain;
}
li.lesson-box figure {
	width: 55vw;
	height: auto;
	overflow: hidden;
	border-radius: 10vw 100vw 100vw 10vw;
}
li.lesson-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
li.lesson-box h3 {
	color: var(--secondary-color);
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.3;
	margin-bottom: 0.5em;
}

@media (min-width: 768px) {
	ul.lesson-list {
		grid-template-columns: repeat(2, 1fr);
	}
	li.lesson-box figure {
		width: 100%;
	}
	li.lesson-box h3 {
		font-size: 1.5rem;
	}
}
@media (min-width: 1024px) {
	ul.lesson-list {
		gap: 10vw 5vw;
	}
	li.lesson-box {
		flex-direction: row;
	}
	li.lesson-box .lesson-img {
		flex: 0 0 40%;
		height: auto;
	}
	li.lesson-box figure {
		width: 100%;
		height: 105%;
	}

	li.lesson-box img {
		border-radius: 1.5vw 10vw 10vw 1.5vw;
	}
	li.lesson-box .lesson-img:after {
		left: inherit;
		right: -15px;
		top: -10px;
	}
}

/* ---------------------------------
	info section
--------------------------------- */
.info-wrap {
	display: flex;
	flex-direction: column;
}
.info-list-item {
	display: flex;
	align-items: center;
	gap: 1em;
	border-bottom: 1px solid var(--border-color);
	transition: var(--transition-base);
}
.info-list-item:first-child {
	border-top: 1px solid var(--border-color);
}
.info-list-link:hover {
	opacity: 0.7;
	background: var(--light-gray);
}
.info-list-link {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--spacing-xs);
}
.info-list-date {
	font-family: var(--font-num);
	letter-spacing: 0.05em;
	color: var(--gray);
	white-space: nowrap;
	flex-shrink: 0;
}
.info-list-title {
	font-weight: 500;
	line-height: 1.6;
	flex: 1;
	margin: 0;
}
.info-list-link:hover .info-list-title {
	color: var(--accent-color);
}

@media (min-width: 768px) {
	.top-info-list {
		width: 100%;
	}
	.info-list-link {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-sm);
		text-decoration: none;
		color: var(--text-primary);
	}
}
@media (min-width: 1024px) {
	.info-wrap {
		flex-direction: row;
		justify-content: flex-start;
		gap: 20px;
	}
	.info-wrap header {
		flex: 0 0 20%;
	}
}

/* ---------------------------------
	footer section (animation)
--------------------------------- */
.animation-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	margin-top: var(--spacing-xxl);
}
ul.animation {
	display: flex;
	gap: 15px;
	flex-wrap: nowrap;
	width: max-content;
	animation: scroll-left 30s linear infinite;
	animation-delay: 0.1s;/* ← これがSafari対策に効くことあり */
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}
ul.animation li {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
ul.animation li figure {
	width: 270px;
	height: 180px;
}
ul.animation li:nth-child(even) figure {
	width: 200px;
	height: 300px;
}
ul.animation li img {
	width: 100%;
	height: auto;
	border-radius: 15px;
}
@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* =====================================================
	Page Header
 ===================================================== */
.page-header {
	background: var(--bg-pattern);
	padding: var(--spacing-xl) 0;
	margin-bottom: var(--spacing-xl);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.page-title {
	color: var(--primary-color);
	font-family: var(--font-secondary);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	position: relative;
}
.title-text {
	position: relative;
}
.title-text:after {
	content: "";
	position: absolute;
	left: -40px;
	top: -25px;
	background-image: url(https://cdn.goope.jp/220315/251019160631-68f48df7a3079.png);
	background-repeat: no-repeat;
	width: 62px;
	height: 76px;
	background-size: contain;
}


/* =====================================================
	About Page
 ===================================================== */
.about-details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxl);
}
.about-info {
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	padding: var(--spacing-sm);
}
.about-info .table_detail {
	width: 100%;
	border-collapse: collapse;
}
.about-info .table_detail tr {
	border-bottom: 1px solid var(--border-color);	
}
.about-info .table_detail th,
.about-info .table_detail td {
	padding: var(--spacing-xs) var(--spacing-xs);
	text-align: left;
	vertical-align: top;
}
.about-info .table_detail th {
	font-weight: 700;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: relative;
}
.about-info .table_detail td {
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.6;
}
.about-info .table_detail tr:last-child th,
.about-info .table_detail tr:last-child td {
	border-bottom: none;
}
.about-map {
	margin-bottom: 0;
}
.about-map .map-container {
	overflow: hidden;
	height: 50vh;
}
.about-map .map-container iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

@media (max-width: 768px) {
	.about-info .table_detail th,
	.about-info .table_detail td {
		display: block;
	}
	.about-info .table_detail th {
		padding: var(--spacing-xs) var(--spacing-xs) 0;
	}
}

/* =====================================================
	 Contact Page
===================================================== */
.contact-section {
	position: relative;
}
.contact-form {
	max-width: 800px;
	margin: 0 auto;
}
.form-content {
	position: relative;
}
.contact_area {
	margin-bottom: var(--spacing-lg);
	position: relative;
}
.contact_area:last-child {
	margin-bottom: 0;
}
.contact_area > label {
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.75em;
	color: var(--text-primary);
	position: relative;
	padding-left: 24px;
}
.contact_area > label:before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	background-image: url( 'data:image/svg+xml;utf-8,<svg fill="%2324bf7a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24"><path d="M18.39365,7.41742c-0.82328,0.06644-1.68241,0.34386-2.45642,0.62369 c-0.43892,0.15868-0.87566,0.33838-1.3049,0.53357c0.46437-0.68457,0.91823-1.37648,1.3529-2.08199 c1.1444-0.76535,2.33133-2.46539,2.62341-3.00684c0.40492-0.75063,0.76122-1.91425,0.80537-2.4134s-0.1392-0.96192-0.64576-0.887 s-1.35344,0.85744-1.80416,1.57502c-0.27919,0.44449-1.10456,1.87765-1.29784,2.42066 c-0.06713,0.18862-0.29452,0.90196-0.34953,1.58084c-0.02697,0.33289-0.88397,1.31987-1.27504,1.90606 c0.04154-0.58775-0.03462-2.29993-0.39984-3.09235c-0.20155-0.43749-0.55958-0.90597-1.10223-0.75084 c-0.3764,0.10765-0.63427,0.39908-0.76085,0.76031c-0.27895,0.79659-0.02678,1.64877,0.1654,2.43387 c0.19841,0.81055,0.40877,1.58908,0.76615,2.56476c-0.63979,0.88737-1.29553,1.76311-1.97055,2.6247 c-0.0316-0.40074-0.0756-0.80073-0.1295-1.19731c-0.11936-0.87824-0.25208-1.75969-0.94596-2.38764 C9.4109,8.39415,9.04213,8.38417,8.78846,8.62356c-0.54067,0.51023-0.58561,1.28691-0.54847,1.98363 c0.06499,1.21917,0.30664,2.40097,1.07601,3.38161c-0.21541,0.32279-2.57528,3.02549-2.79878,3.25422 c0.14786-0.51731,0.4012-1.25259,0.41798-1.73113c0.03629-1.03411-0.2624-2.30696-1.36697-2.66227 c-0.21508-0.06917-0.44286,0.01338-0.60259,0.15929c-0.95549,0.87301-1.11538,2.10806-0.88186,3.32421 c0.14461,0.75363,0.5657,2.05845,0.82325,2.6743c-0.15945,0.15945-4.04208,3.62751-4.47608,3.96762 c-0.50176,0.39321-0.02494,1.22054,0.50019,0.85561c0.80282-0.55791,3.55894-3.13529,4.31014-3.86979 c0.16803,0.00327,1.87207,0.0117,2.39004-0.03148c1.11379-0.09283,2.95452-0.20328,3.89996-0.78611 c0.33678-0.20761,0.58477-0.54072,0.75426-0.89472c0.18658-0.38964,0.02124-0.75455-0.37005-0.90975 c-1.55702-0.61726-3.1297-0.15573-4.59948,0.49237c0.63087-0.68122,2.24202-2.5807,2.44228-2.82436 c0.67721,0.18544,1.36023,0.36083,2.05634,0.45737c1.37254,0.19035,3.07295-0.23415,3.93456-1.38254 c0.3673-0.48985-0.30267-1.00411-0.6945-1.19557c-0.6027-0.29449-1.34447-0.28819-1.98444-0.13232 c-0.64175,0.1563-1.27386,0.3669-1.91597,0.5304c0.71161-0.89728,1.40212-1.81028,2.07812-2.73386 c0.0214-0.02923,0.42746,0.12861,1.22818,0.07339c0.80072-0.05522,1.92998-0.40093,3.00311-0.68331 c0.60497-0.15919,1.21772-0.32678,1.70455-0.74708c0.27964-0.24139,0.4805-0.58944,0.47166-0.96781 C19.62583,7.62834,18.89139,7.37735,18.39365,7.41742z M12.76021,14.27805c-0.01973,0.0006-0.03961,0.00272-0.05935,0.00461 C12.73065,14.26974,12.86862,14.27457,12.76021,14.27805z"/></svg>' );
	background-repeat: no-repeat;
	width: 20px;
	height: 24px;
	background-size: contain;
}	
.contact_area label .requier {
	display: inline-block;
	background:#f44336;
	color: white;
	font-size: 1.0rem;
	font-weight: 500;
	line-height: 1.0;
	padding: 0.3em 0.4em;
	border-radius: 6px;
	margin-left: 0.8rem;
	vertical-align: top;
}
.contact_area .requier:before {
	content: "必須";
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select,
.contact_name,
.contact_email,
.contact_tel,
.contact_body,
.frm_text {
	width: 100%;
	padding: var(--spacing-xs);
	border: 2px solid var(--border-color);
	color: var(--text-primary);
	font-family: 'Noto Sans Japanese';
	font-size: 16px;
	transition: var(--transition-base);
	position: relative;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.contact_name:focus,
.contact_email:focus,
.contact_tel:focus,
.contact_body:focus,
.frm_text:focus {
	outline: none;
	border-color: var(--accent-color);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	background: var(--bg-pattern);
}
.contact-form textarea,
.contact_body {
	min-height: 200px;
	resize: vertical;
}
.contact_area .checkbox,
.contact_area .radio {
	display: block;
	margin-bottom: 0.9em;
	position: relative;
}
.contact_area .checkbox input[type="checkbox"],
.contact_area .radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.contact_area .checkbox label,
.contact_area .radio label {
	cursor: pointer;
	position: relative;
	padding-left: 38px;
	margin-right: 4px;
	display: inline-block;
	vertical-align: middle;
	line-height: 1.2;
	word-break: break-all;	
	transition: var(--transition-base);
}
.contact_area .checkbox label::before {
	content: '';
	position: absolute;
	left: 0;
	top: -3px;
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: -0.2em;	
	border: 2px solid var(--border-color);
	transition: var(--transition-base);	
}
.contact_area .checkbox label::after {
	content: '';
	position: absolute;
	left: 10px;
	top: 3px;
	display: inline-block;
	visibility: hidden;
	width: 4px;
	height: 9px;
	border-right: 3px solid #0bc7a0;
	border-bottom: 3px solid #0bc7a0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.contact_area .radio input:checked + label::after,
.contact_area .checkbox input:checked + label::after {
	visibility: visible;
}
.contact_area .radio label::before {
	content: '';
	position: absolute;
	left: 0;
	top: -3px;
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: -0.2em;	
	background-color: var(--white);
	border: 2px solid var(--border-color);
	transition: var(--transition-base);
	border-radius: 100%;
}
.contact_area .radio label::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 4px;
	display: inline-block;
	visibility: hidden;
	width: 14px;
	height: 14px;
	background-color: #0bc7a0;
	border-radius: 100%;
	transition: var(--transition-base);	
}
.contact_area .checkbox input[type="checkbox"]:checked + label::before {
	border-color: var(--accent-color);
	background: var(--bg-pattern);
}
.contact_area .radio input[type="radio"]:checked + label::before {
	border-color: var(--accent-color);
	background: var(--bg-pattern);
}
.contact_area .radio input[type="radio"]:checked + label::after {
}
.contact_area .checkbox:hover label,
.contact_area .radio:hover label {
	color: var(--accent-color);
}
.contact_area .checkbox:hover label::before,
.contact_area .radio:hover label::before {
	border-color: var(--accent-color);
	transform: scale(1.1);
}
.contact_area .radio:hover label::before {
	transform: transform: scale(1.1);
}

/*select box arrow*/
.contact_area select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-xs) center;
}

/* reCAPTCHA Styling */
.g-recaptcha {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	display: flex;
	justify-content: center;
}

/* Contact Message - Form submission feedback */
.contact-message {
	position: relative;
	max-width: 800px;
	margin: var(--spacing-md) auto;
	padding: 0;
	animation: messageSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Success Message Styling */
.contact-message .success_message {
	position: relative;
	padding: var(--spacing-md) var(--spacing-sm);
	border: 2px solid var(--primary-color);
	border-radius: 1vw;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--primary-color);
}
.contact-message .success_message::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #4CAF50, transparent);
	opacity: 0.1;
	z-index: -1;
}

/* Error Message Styling */
.contact-message .error_message {
	position: relative;
	padding: var(--spacing-sm);
	border: 2px solid #f44336;
	border-radius: 1vw;
	text-align: left;
	color: #f44336;
	font-weight: 500;
}

.contact_form_message {
	margin: 0 0 var(--spacing-md) 0!important;
}
.contact-message .error_message::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #f44336, transparent);
	opacity: 0.05;
	z-index: -1;
}

/* Error list styling */
.contact-message .error_message br {
	display: block;
	content: '';
	margin-bottom: var(--spacing-xs);
}

/* Animations */
@keyframes messageSlideIn {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}
.form-actions {
	text-align: center;
	margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
	.form-content {
		padding: var(--spacing-sm);
		border: 2px solid var(--border-color);
		border-radius: 1vw;
	}
	.form-content::before {
		content: '';
		position: absolute;
		top: -2px;
		left: -2px;
		right: -2px;
		bottom: -2px;
background: linear-gradient(45deg, var(--accent-color), transparent);
		opacity: 0;
		transition: var(--transition-base);
		z-index: -1;
}
	.form-content:hover::before {
		opacity: 0.1;
	}
}

/* =====================================================
	Info Page
 ===================================================== */
.info-article {
	padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-xl);
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.article-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--spacing-sm);
}
.article-date {
	font-family: var(--font-num);
	letter-spacing: 0.05em;
	color: var(--gray);
	margin-bottom: var(--spacing-md);
}
.article-image {
	width: 100%;
	overflow: hidden;
}
.article-image img[src=""] {
	display: none;
}
.article-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin-bottom: var(--spacing-md);
	border-radius: 12px;
}

@media (min-width: 768px) {
	.info-article {
		padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
	}
	.article-header {
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	.article-image {
		max-width: 50%;
		margin: 0 0 0 var(--spacing-xs);
	}
	.article-image img {
	}
}

/* =====================================================
	Photo Page
 ===================================================== */
.photo-index {
	margin: var(--spacing-xxl) auto;
}
.album {
	margin-bottom: var(--spacing-xxl);
	padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	position: relative;
}
.album-title a {
	text-decoration: none;
	transition: var(--transition-base);
}
.album-thumbs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}
.thumb {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	box-shadow: 5px 5px 0px 0 rgba(0, 0, 0, 0.1);
}
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-base);
}
.thumb:hover img {
	transform: scale(1.05);
}
.photo-list-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}
.photo-article {
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: var(--transition-base);
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}
.photo-image {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: var(--spacing-md);
}
.photo-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 800px;
	object-fit: contain;
	object-position: center;
	display: inline-block;
}
.photo-content {
	padding: 0 var(--spacing-sm) var(--spacing-md);
}
.photo-item-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
}
.photo-text {
	color: var(--text-secondary);
}

@media (min-width: 768px) {
	.album-thumbs {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
}

/* =====================================================
	Photo Page add
 ===================================================== */
.p-photo-album__image {
	position: relative;
}
.p-photo-album__image::after {
	content: '';
	display: block;
	padding-top: 100%;
}
.p-photo-album__image:hover {
	pointer: cursor;
	transition: 0.2s;
}
.p-photo-album__image-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.p-photo-album__image-inner a {
	display: block;
	width: 100%;
	height: 100%;
	outline: 0;
}

#cboxContent {
	margin: 40px;
	border: 0;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
#cboxLoadedContent {
	background-color: #fff;
}
#cboxClose {
	background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2210px%22%20height%3D%2210px%22%20viewBox%3D%220%200%2010%2010%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%20%3Ctitle%3Ecross%3C%2Ftitle%3E%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%3Cdefs%3E%3C%2Fdefs%3E%20%3Cg%20id%3D%22top%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill-rule%3D%22evenodd%22%3E%20%3Cg%20id%3D%22sp%2Fdrawer%22%20transform%3D%22translate(-30.000000%2C%20-48.000000)%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%3E%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(30.000000%2C%2047.000000)%22%3E%20%3Cpolygon%20id%3D%22cross%22%20points%3D%2210%202.02604317%208.97396484%201%205.00003906%204.97385917%201.02613281%201%200%202.02604317%203.97402344%206.00009766%200%209.97395683%201.02603516%2011%205.00003906%207.02592598%208.97396484%2011%2010%209.97415214%206.02609375%206.00009766%22%3E%3C%2Fpolygon%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	background-size: 20px;
	background-position: 0 0;
	top: -30px;
	outline: 0;
}
#cboxClose:hover {
	background-position: 0 0;
}
#cboxPrevious {
	background-size: 40px;
	width: 40px;
	height: 40px;
	background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20fill%3D%22%23444%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1203%20544q0%2013-10%2023l-393%20393%20393%20393q10%2010%2010%2023t-10%2023l-50%2050q-10%2010-23%2010t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10%2023-10t23%2010l50%2050q10%2010%2010%2023z%22%2F%3E%3C%2Fsvg%3E');
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	outline: 0;
}
#cboxPrevious:hover {
	background-position: 0 0;
}
#cboxNext {
	background-position: 0 0;
	background-size: 40px;
	width: 40px;
	height: 40px;
	background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20fill%3D%22%23444%22%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1171%20960q0%2013-10%2023l-466%20466q-10%2010-23%2010t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10%2023-10t23%2010l466%20466q10%2010%2010%2023z%22%2F%3E%3C%2Fsvg%3E');
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	outline: 0;
}
#cboxNext:hover {
	background-position: 0 0;
}

/* =====================================================
	Menu Page
 ===================================================== */
.menu-categories {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}
.menu-category {
	padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: var(--transition-base);
	position: relative;
	overflow: hidden;
}
.menu-items {
	display: grid;
	gap: var(--spacing-sm);
}
.menu-item {
	display: grid;
	grid-template-columns: 1fr;
	/*gap: var(--spacing-md);*/
	position: relative;
}
.menu-image {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0 auto var(--spacing-md);
	max-width: 500px;
	overflow: hidden;
	border-radius: 10vw 100vw 100vw 10vw;
}
.menu-image:has(img[src=""]),
.menu-image:has(img:not([src])) {
	display: none;
}
.menu-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.menu-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.menu-name {
	color: var(--secondary-color);
	font-family: var(--font-secondary);
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.5;
	padding: var(--spacing-xs) var(--spacing-xs);
	border-top: 1px solid var(--secondary-color);
	border-bottom: 1px solid var(--secondary-color);
	margin-bottom: var(--spacing-xs);
}
.menu-name .recommend {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.menu-name .recommend img {
	width: auto;
	height: 20px;
	vertical-align: middle;
}
.menu-name a {
	color: inherit;
}
.menu-name a:hover {
	cursor: default;
	opacity: 1;
}
.menu-price {
	display: flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0 var(--spacing-xs);
	margin-bottom: var(--spacing-xs);
	font-weight: 700;
}
.price-value {
	font-size: 1.5rem;
}
.price-unit {
	font-size: 90%;
}
.price-suffix {
	font-size: 14px;
}

@media (min-width: 768px) {
	.menu-categories {
		gap: var(--spacing-sm);
	}
	/* menu-category が2つ以上ある場合のみ 2列に */
	.menu-categories:has(.menu-category:nth-child(2)) {
		grid-template-columns: repeat(2, 1fr);
	}
	.menu-image {
		/*margin: 0;*/
	}
}

/* =====================================================
	Calendar Page  ※今回使用せず
 ===================================================== */
.calendar-wrapper {
	max-width: 900px;
	margin: 0 auto;
}
.calendar-nav {
	margin-bottom: var(--spacing-lg);
	text-align: center;
}
.calendar-nav a {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	font-weight: 500;
}
.calendar-container {
	overflow-x: auto;
	border: 1px solid var(--border-color);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
}
.calendar-container table {
	width: 100%;
	border-collapse: collapse;
}
.calendar-container th,
.calendar-container td {
	padding: var(--spacing-md);
	text-align: center;
	border: 1px solid var(--border-color);
}
.calendar-container th {
	background: var(--bg-pattern);
	font-weight: 700;
}
.calendar-container td {
	height: 80px;
	vertical-align: top;
	position: relative;
}
.calendar-container td.today {
	background: var(--accent-color);
	color: var(--white);
}
.calendar-container td.has-event {
	font-weight: 700;
}
.calendar-container td.has-event::after {
	content: '';
	position: absolute;
	bottom: var(--spacing-xs);
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: var(--accent-color);
	border-radius: 50%;
}
.schedule-section {
	margin-top: var(--spacing-xl);
}
.schedule-list {
	display: grid;
	gap: var(--spacing-md);
}
.schedule-item {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	border: 1px solid var(--border-color);
	transition: var(--transition-base);
}
.schedule-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.schedule-date {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--accent-color);
}
.schedule-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}
.schedule-category {
	display: inline-block;
	padding: 2px var(--spacing-sm);
	background: var(--accent-color);
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	align-self: flex-start;
}
.schedule-name {
	font-size: 16px;
	font-weight: 700;
}
.schedule-time {
	font-size: 14px;
	color: var(--text-secondary);
}
.schedule-detail {
	border: 1px solid var(--border-color);
	padding: var(--spacing-lg);
}
.detail-header {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}
.detail-category {
	padding: var(--spacing-xs) var(--spacing-md);
	background: var(--accent-color);
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
}
.detail-date {
	color: var(--text-secondary);
}
.detail-title {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: var(--spacing-md);
}
.detail-image {
	margin-bottom: var(--spacing-md);
}
.detail-content {
	line-height: 2;
}

/* =====================================================
	Coupon Page ※今回使用せず
 ===================================================== */
.coupon-list {
	display: grid;
	gap: var(--spacing-xl);
}
.coupon-card {
	background: var(--light-gray);
	border: 2px dashed var(--border-color);
	position: relative;
	overflow: hidden;
}
.coupon-card::before,
.coupon-card::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	background: var(--white);
	border-radius: 50%;
}
.coupon-card::before {
	top: 50%;
	left: -20px;
	transform: translateY(-50%);
}
.coupon-card::after {
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
}
.coupon-header {
	padding: var(--spacing-lg);
	background: var(--accent-color);
	color: var(--white);
	position: relative;
}
.coupon-title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.05em;
}
@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.coupon-image {
	width: 100%;
	height: 300px;
	overflow: hidden;
	background: var(--bg-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.coupon-image:empty,
.coupon-image:not(:has(img)) {
	display: none;
}
.coupon-image a {
	display: block;
	width: 100%;
	height: 100%;
}
.coupon-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}
.coupon-content {
	padding: var(--spacing-lg);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}
.coupon-qr {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.coupon-qr img {
	width: 120px;
	height: 120px;
}
.coupon-info {
	display: grid;
	gap: var(--spacing-sm);
}
.info-label {
	font-weight: 700;
	color: var(--text-secondary);
	font-size: 14px;
}
.info-value {
	margin-bottom: var(--spacing-md);
}
.coupon-actions {
	grid-column: 1 / -1;
	text-align: center;
	padding-top: var(--spacing-md);
	border-top: 1px dashed var(--border-color);
}
.btn-print {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-lg);
	border: 1px solid var(--primary-color);
	font-weight: 500;
}
.btn-print:hover {
	background: var(--primary-color);
	color: var(--white);
}

@media (min-width: 768px) {
	.coupon-content {
		grid-template-columns: 150px 1fr;
	}
}

/* =====================================================
	Free Page
 ===================================================== */
.free-content {
	margin: 0 auto;
}

/* =====================================================
	 Event Reservation (イベント予約) ※今回使用せず
===================================================== */
/* Base container */
.p-event-reservation {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
}

/* === Fieldset Components === */
.p-fieldset {
	margin-top: 0;
	margin-bottom: var(--spacing-lg);
	border-radius: 8px;
	overflow: hidden;
}
.p-fieldset:not(:first-child) {
	margin-top: var(--spacing-lg);
}
.p-fieldset--bgcolor {
	border: 1px solid var(--border-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.p-event-reservation .p-fieldset__title {
	font-size: 20px;
	font-weight: 700;
	padding: var(--spacing-md);
	background: linear-gradient(135deg, var(--bg-pattern) 0%, var(--bg-secondary) 100%);
	border-bottom: 2px solid var(--accent-color);
	margin: 0;
	position: relative;
}
.p-fieldset__body {
	padding: 0;
}
.p-fieldset--bgcolor .p-fieldset__body {
	padding: var(--spacing-lg);
}

/* === Service List (一覧ページ) === */
.p-result-stats {
	margin: 0 0 var(--spacing-md);
	padding: 0;
	text-align: right;
	color: var(--text-secondary);
	font-size: 14px;
}
.p-event-reservation .p-service-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.p-event-reservation .p-service-list__item {
	border-radius: 8px;
	overflow: hidden;
	transition: var(--transition-base);
	border: 1px solid var(--border-color);
	margin-bottom: var(--spacing-md);
	list-style: none !important;
}
.p-service-list__item:last-child {
	margin-bottom: 0;
}
.p-service-list__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.p-service-list__item > a {
	display: flex;
	padding: var(--spacing-md);
	align-items: center;
	text-decoration: none!important;
	color: inherit;
}
.p-service-list__thumbnail {
	border-radius: 4px;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.p-event-reservation .p-service-text__title {
	color: var(--text-primary);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 var(--spacing-sm) 0 !important;
	padding: 0;
}
.p-event-reservation .p-service-text__price {
	color: var(--accent-color);
	font-weight: 700;
	margin: 0 !important;
	padding: 0;
}

/* === Service Detail (詳細ページ) === */
.p-event-reservation .p-service-detail__title {
	color: var(--text-primary);
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 var(--spacing-md) 0 !important;
	padding-left: var(--spacing-md);
	position: relative;
	line-height: 1.3;
}
.p-event-reservation .p-service-detail__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 100%;
	background: var(--accent-color);
}
.p-event-reservation .p-service-detail__price {
	color: var(--accent-color);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 var(--spacing-md) 0 !important;
	padding: 0;
}
.p-event-reservation .p-service-detail__thumbnail {
	margin: var(--spacing-lg) 0;
}
.p-event-reservation .p-service-detail__thumbnail img {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.p-event-reservation .p-service-detail__explanation {
	margin: var(--spacing-lg) 0 0 0 !important;
	padding: 0;
	color: var(--text-primary);
	font-size: 16px;
	line-height: 1.6;
}

/* === Reservation List (予約日時リスト) === */
.p-event-reservation .p-reservation-list {
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.p-event-reservation .p-reservation-list__none {
	padding: var(--spacing-xl) 0;
	text-align: center;
}
.p-event-reservation .p-reservation-list__none p {
	margin: 0 !important;
	color: var(--text-secondary);
	font-size: 16px;
}
.p-event-reservation .p-reservation-list__item {
	border-radius: 8px;
	padding: var(--spacing-md);
	margin: var(--spacing-md) !important;
	border: 1px solid var(--border-color);
	transition: var(--transition-base);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.p-event-reservation .p-reservation-list__item:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.p-event-reservation .p-reservation-list__date-wrap {
	flex: 1;
}
.p-event-reservation .p-reservation-list__date {
	color: var(--text-primary);
	font-weight: 700;
	font-size: 18px;
	margin: 0 !important;
	padding: 0;
	display: inline-block;
	margin-right: var(--spacing-sm) !important;
}
.p-event-reservation .p-reservation-list__time {
	color: var(--text-secondary);
	font-size: 14px;
	margin: 0 !important;
	padding: 0;
	display: inline-block;
}
.p-event-reservation .p-reservation-list__time--pick-date {
	font-size: 18px;
	font-weight: 700;
}
.p-event-reservation .p-reservation-list__note {
	margin: var(--spacing-xs) 0 0 0 !important;
	padding: 0;
	font-size: 12px;
	line-height: 1;
}
.p-event-reservation .p-reservation-list__stock {
	color: var(--accent-color);
	font-weight: 500;
	padding-right: var(--spacing-sm);
}
.p-event-reservation .p-reservation-list__reception {
	color: var(--text-secondary);
}
.p-event-reservation .p-reservation-list__link {
	flex-shrink: 0;
	min-width: 100px;
	margin-left: var(--spacing-md);
}

/* === Buttons === */
.p-link-button {
	border-radius: 4px;
	font-weight: 500;
	letter-spacing: 0.05em;
	transition: var(--transition-base);
	position: relative;
	overflow: hidden;
	text-decoration: none !important;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	padding: var(--spacing-sm) var(--spacing-sm);
	font-size: 16px;
	min-width: 160px;
}
.p-link-button--primary {
	border: 2px solid var(--accent-color);
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: 0.05em;
	position: relative;
	overflow: hidden;
	transition: var(--transition-base);
	box-shadow: none;
	text-transform: none;
}
.p-link-button--primary::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: var(--accent-color);
	transform: translate(-50%, -50%);
	transition: var(--transition-base);
	z-index: -1;
}
.p-link-button--primary:hover::before {
	width: 100%;
	height: 100%;
}
.p-link-button--primary:hover {
	color: var(--white);
	transform: none;
	box-shadow: none;
	opacity: 1;
}
.p-link-button--primary,
.p-link-button--primary * {
	position: relative;
	z-index: 1;
}
.p-link-button--disabled {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	cursor: not-allowed;
	opacity: 0.6;
}
.p-link-button--more {
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	font-weight: 700;
	letter-spacing: 0.05em;
	position: relative;
	overflow: hidden;
	transition: var(--transition-base);
}
.p-link-button--more::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: var(--primary-color);
	transform: translate(-50%, -50%);
	transition: var(--transition-base);
	z-index: -1;
}
.p-link-button--more:hover::before {
	width: 100%;
	height: 100%;
}
.p-link-button--more:hover {
	color: var(--white);
}
.p-link-button--more,
.p-link-button--more * {
	position: relative;
	z-index: 1;
}

/* === Form Fields (フォーム) === */
.p-form-field {
	margin-bottom: var(--spacing-md);
}
.p-form-field:last-child {
	margin-bottom: 0;
}
.p-form-field label {
	color: var(--text-primary);
	font-weight: 500;
	margin-bottom: var(--spacing-sm);
	display: block;
	box-sizing: border-box;
	max-width: 500px;
	width: 100%;
}
.p-form-field input,
.p-form-field textarea {
	border: 2px solid var(--border-color);
	border-radius: 4px;
	padding: var(--spacing-sm) var(--spacing-md);
	transition: var(--transition-base);
	font-size: 14px;
	box-sizing: border-box;
	display: block;
	max-width: 500px;
	width: 100%;
}
.p-form-field textarea {
	min-height: 200px;
	resize: vertical;
}
.p-form-field input:focus,
.p-form-field textarea:focus {
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(83, 146, 194, 0.1);
}
.p-form-field__required-label::after {
	content: "必須";
	display: inline-block;
	vertical-align: 0.1em;
	font-size: 10px;
	background-color: var(--accent-color);
	color: var(--white);
	border-radius: 2px;
	padding: 0.4em;
	letter-spacing: 0.1em;
	line-height: 1;
	font-weight: 500;
	margin-left: var(--spacing-sm);
}

/* === Confirm List (確認リスト) === */
.p-confirm-list__item {
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--border-color);
}
.p-confirm-list__item:last-child {
	border-bottom: none;
}
.p-confirm-list__item dt {
	color: var(--text-secondary);
	font-size: 14px;
	margin-bottom: var(--spacing-xs);
}
.p-confirm-list__item dd {
	color: var(--text-primary);
	font-size: 16px;
	font-weight: 500;
}

/* === Notification (通知) === */
.p-notification {
	border-radius: 8px;
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}
.p-notification--warning {
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
	border: 2px solid #ff9800;
	color: #e65100;
}
.p-notification strong {
	font-size: 18px;
	margin-bottom: var(--spacing-sm);
}

/* === Calendar & Filtering === */
.p-event-reservation__calendar {
	padding: var(--spacing-md);
	background: var(--bg-pattern);
	border-radius: 8px;
	margin: 0 0 var(--spacing-lg) 0;
}
.p-event-reservation__list {
	margin: var(--spacing-md) 0 0 0 !important;
}
.p-event-reservation__cancel-filter {
	display: inline-block;
	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	color: var(--accent-color);
	font-size: 12px;
	font-weight: normal;
	margin: 0 0 0 var(--spacing-md);
	transition: var(--transition-base);
	cursor: pointer;
}
.p-event-reservation__cancel-filter:hover {
	background: var(--accent-color);
	color: var(--white);
}

/* === Link Unit (リンクユニット) === */
.p-link-unit {
	padding: var(--spacing-lg);
}
.p-link-unit > * + * {
	margin-top: var(--spacing-md);
}
.p-link-text {
	display: inline-block;
	color: var(--accent-color);
	text-decoration: none;
	font-weight: 500;
	transition: var(--transition-base);
	margin-left: var(--spacing-sm);
}
.p-link-text:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

/* ==============================================
	 スタッフ紹介
============================================== */
#custom_staff {
	margin: var(--spacing-xxl) auto;
}
.staff_wrap {
	float: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	padding: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: var(--transition-base);
	position: relative;
	overflow: hidden;
	}
.staff--image {
	float: none;
	flex-shrink: 0;
	text-align: center;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 4px solid var(--accent-light);
	transition: var(--transition-base);
	position: relative;
	margin: 0 auto;
}
.staff--image::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(var(--accent-color), transparent, var(--accent-color));
	z-index: -1;
	animation: spin 3s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}

.staff__text {
	width: 100%;
	float: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}
.staff__text--name {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
	line-height: 1.3;
}
.staff__text--job {
	text-align: center;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--accent-color);
	margin: 0;
}
.staff__text--description {
	color: var(--text-primary);
}
.staff__text__social {
	display: flex;
	justify-content: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-top: auto;
}
#custom_staff .staff__text__social_icon {
	display: flex;
	align-items: center;
	gap: 0.5em;
	background: var(--background-light);
	border-radius: 20px;
	text-decoration: none;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition-base);
	border: 2px solid transparent;
}
.staff__text__social_icon img {
	width: 25px;
	height: 25px;
	/*filter: grayscale(1);*/
	transition: var(--transition-base);
}
.staff_wrap:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.staff__text__social_icon img[alt="twitter"] {
	content: url("https://cdn.goope.jp/220315/251129174003-692ab1634ae5d.png");
}
/* img が twitter のときだけ、後ろの span の内容を非表示に */
.staff__text__social_icon img[alt="twitter"] + .staff__text__social_text {
	display: none;
}

/* “img[alt=twitter] を含む a” に文字を追加 */
.staff__text__social_icon:has(img[alt="twitter"])::after {
	content: "YouTube";
	font-size: inherit;
	color: inherit;
}

@media (min-width: 768px) {
	.staff_wrap {
		flex-direction: row;
	}
	.staff__text--name,
	.staff__text--job {
		text-align: left;
	}
	.staff__text__social {
		justify-content: flex-start;
	}
}

/* =====================================================
	Pagination
 ===================================================== */
body#menu .pagination {
	display: none;
}
.pagination {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: var(--spacing-md) auto;
}
.pagination a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--secondary-color);
	font-family: var(--font-num);
	font-size: 18px;
	letter-spacing: 0;
	width: 25px;
	height: 25px;
	line-height: 25;
	margin: 0;
	text-decoration: none;
}
.pagination a.chk {
	background-color: rgba(var(--alpha), 0.90);
	border-radius: 100vw;
	color: #fff;
}
.pagination a:hover {
	background: rgba(var(--alpha),0.30);
	border-radius: 100vw;
}
.pagination a.chk:hover {
	background: rgba(var(--alpha),0.80);	
}

@media only screen and (min-width: 769px) {
	.pagination {
		justify-content: center;
		gap: 2vw;
	}
}

/* =====================================================
	Footer
 ===================================================== */
.site-footer {
	background: var(--light-gray);
	color: var(--text-primary);
	position: relative;
	overflow: hidden;
}
.footer-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--spacing-md) 0;
	gap: 4vw;
}
.footer-main {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	justify-content: center;
}
.footer-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding-bottom: 2em;
	border-bottom: 1px solid var(--border-color);
}
footer .site-logo {
	text-align: center;
	margin: 0 auto 0.5em;
}
footer .btn-area {
	margin: 1.5em auto;
}
.footer-access {
	margin-bottom: 2em;
}
.footer-title {
	font-size: 1.1rem;
	font-weight: 700;
}
.footer-sns {
	margin-top: 1em;
	display: flex;
	gap: 1em;
}
.footer-map {
	position: relative;
	width: 100%;
	height: 300px;
	padding-top: 40%;
	margin-bottom: 1vw;
}
.footer-map iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* --- Footer ボトム --- */
.footer-bottom {
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-xs) 0;
}
.footer-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	font-size: 90%;
	color: var(--gray);
}

.introduction-banner {
	max-width: var(--container-width);
	margin: var(--spacing-lg) auto 0;
	padding: 0 var(--spacing-md);
	text-align: center;
}

@media (min-width: 768px) {
	.footer-main {
		flex-direction: row;
		justify-content: flex-start;
	}
	.footer-info {
		border-bottom: none;
	}
}
@media (min-width: 1024px) {
	.footer-inner {
		flex-direction: row;
		justify-content: space-between;
	}
	.footer-map {
		max-width: 35%;
		height: auto;
		padding-top: 0;
		margin-bottom: 0;
	}
}

/* =====================================================
	Animations
 ===================================================== */
.section,
.section-subpage,
.menu-item,
.coupon-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.section.in-view,
.section-subpage.in-view,
.menu-item.in-view,
.coupon-item.in-view {
	opacity: 1;
	transform: translateY(0);
}

/* =====================================================
	Diary Page
 ===================================================== */
.p-diary {
	margin: 0 auto;
}
.p-diary__unit {
	padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-xl);
	position: relative;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.p-diary__date {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: var(--gray);
	font-family: var(--font-num);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
}
.p-diary__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 var(--spacing-sm) 0;
	padding: 0 var(--spacing-lg);
	position: relative;
}
.p-diary__title a {
	text-decoration: none!important;
	color: var(--secibdart-color)!important;
	position: relative;
	transition: var(--transition-base);
}
.p-diary__category {
	padding: 0 var(--spacing-xs);
	margin-bottom: var(--spacing-md);
}
.p-diary__category a {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 1.00em;
	background: var(--accent-color);
	color: var(--white)!important;
	text-decoration: none;
	font-size: 85%;
	font-weight: 600;
	border-radius: 100vw;
	letter-spacing: 0.05em;
	text-decoration: none!important;
	transition: var(--transition-base);
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* 空のリンクを非表示（:hasが効かないブラウザ用のフォールバック） */
.p-diary__category a[href=""],
.p-diary__category a:empty {
	display: none;
}
.p-diary__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: var(--spacing-md) 0!important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: var(--transition-base);
}
.p-diary__body img:hover {
	transform: scale(1.01);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* iOS拡大防止 */
.contact-form input,
.contact-form textarea,
.contact-form select {
	font-size: 16px;
}

/* =====================================================
	Navi Parts & Social Widgets
 ===================================================== */
#navi_parts {
	padding: var(--spacing-md) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-sm);
}
.navi_parts_detail {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.navi_parts_detail img {
	max-width: 200px;
	height: auto;
	transition: var(--transition-base);
}
.navi_parts_detail a:hover img {
	opacity: 0.8;
	transform: translateY(-2px);
}

/* Social Widgets */
#social_widgets {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
	padding: var(--spacing-md) 0;
}
.social_widget {
	display: inline-block;
}

/* Twitter widget styling */
#widget_twitter_follow {
	min-width: 150px;
}

/* Facebook widget styling */
.social_widget_facebook_likebox {
	width: 100%;
	max-width: 340px;
	padding: 0 var(--spacing-sm);
}
.social_widget_facebook_likebox iframe {
	max-width: 100%;
	display: block;
}

@media (min-width: 768px) {
	#navi_parts {
		padding: var(--spacing-lg) 0;
	}
	#social_widgets {
		flex-direction: row;
		gap: var(--spacing-lg);
	}
	.social_widget_facebook_likebox {
		width: auto;
		padding: 0;
	}
}
@media (min-width: 1024px) {
	#navi_parts {
	padding: var(--spacing-xl) 0;
	}

	#social_widgets {
	gap: var(--spacing-xl);
	}

	.navi_parts_detail img {
	max-width: 220px;
	}
}

/* -----------------------------------
	wysiwyg
----------------------------------- */
.wysiwyg {
	position: relative;
}
.wysiwyg p {
	line-height: 1.6;
	padding: 0 var(--spacing-xs);
	margin-bottom: 0.75em;	
}
.wysiwyg h3 {
	color: var(--secondary-color);
	font-family: var(--font-secondary);
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.5;
	padding: var(--spacing-xs) var(--spacing-xs);
	border-top: 1px solid var(--secondary-color);
	border-bottom: 1px solid var(--secondary-color);
	margin: var(--spacing-sm) 0 var(--spacing-xs);
}
.wysiwyg h3.p-fieldset__title {
	border-top: none;
}
.wysiwyg h4,
.staff__text--description h4 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	padding: 0.5em var(--spacing-xs);
	margin: var(--spacing-sm) 0 var(--spacing-xs);
	background: var(--light-gray);
	border-radius: 6px;
}
.wysiwyg h5 {
	font-size: 1.1rem;
}
.wysiwyg h6 {
	font-size: 1.05rem;
}
.menu-description h4:first-child {
	margin-top: 0;
}
.wysiwyg a {
	color: #339933;
	text-decoration: underline;
}
.wysiwyg a:hover {
	text-decoration: none;
}
.wysiwyg img {
	margin: var(--spacing-xs) 0;
}
/* Lists */
.wysiwyg ul,
.wysiwyg ol {
	margin: 1em 0;
	padding-left: 2em;
}
.wysiwyg ul {
	list-style-type: disc;
}
.wysiwyg ol {
	list-style-type: decimal;
}
.wysiwyg li {
	margin: 0.5em 0;
	line-height: 1.6;
}

/* Nested lists */
.wysiwyg ul ul,
.wysiwyg ol ul {
	list-style-type: circle;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.wysiwyg table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--spacing-sm) 0;
}
.wysiwyg th,
.wysiwyg td {
	padding: var(--spacing-xs);
	border: 1px solid var(--border-color);
}

.wysiwyg th {
	background: var(--bg-pattern);
	font-weight: 700;
}