@charset "utf-8";

/* ============================================================
   Variables
   ============================================================ */
:root {
	--color-primary: #fb9425;
	--color-primary-dark: #d47a15;
	--color-accent: #dd5355;
	--color-accent-light: #fb6a6a;
	--color-yellow: #f5d36e;
	--color-bg: #f5f5f5;
	--color-white: #fff;
	--color-text: #333;
	--color-text-light: #666;
	--color-border: #e0e0e0;
	--font-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--font-mincho: "Hina Mincho", serif;
}

/* ============================================================
   Base
   ============================================================ */
html {
	font-size: 62.5%;
}

body {
	font-family: var(--font-base);
	font-size: 1.4rem;
	color: var(--color-text);
	line-height: 1.6;
	background: var(--color-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

a:hover {
	opacity: 0.7;
}

/* Font utility */
.font-mincho {
	font-family: var(--font-mincho);
}

/* ============================================================
   Layout
   ============================================================ */
.inner {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ============================================================
   Utility Bar (PC)
   ============================================================ */
.utility-bar {
	background: var(--color-white);
	border-top: 3px solid var(--color-primary);
	border-bottom: 1px solid var(--color-border);
	font-size: 1.2rem;
	color: var(--color-text-light);
}

.utility-bar__inner {
	margin: 0 auto;
	padding: 10px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.utility-bar__catchphrase {
	font-size: 1.2rem;
	font-weight: normal;
}

.utility-bar__links {
	display: flex;
	gap: 24px;
}

.utility-bar__links a {
	font-size: 1.2rem;
	color: var(--color-text-light);
}

.utility-bar__links a:hover {
	color: var(--color-primary);
	opacity: 1;
}

/* ============================================================
   Header
   ============================================================ */
.header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	position: relative;
	z-index: 100;
}

.header__inner {
	padding: 30px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.header__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header__logo img {
	height: 40px;
	width: auto;
}

.header__logo--small img {
	height: 28px;
}

.header__hours {
	font-size: 1.2rem;
	color: var(--color-text-light);
}

.header__mypage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 1rem;
	color: var(--color-text-light);
}

.header__mypage img {
	width: 32px;
	height: 32px;
}

.header__mypage:hover {
	color: var(--color-primary);
	opacity: 1;
}

/* ============================================================
   Hamburger (Mobile)
   ============================================================ */
.hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	width: 36px;
	height: 36px;
	position: relative;
	z-index: 200;
}

.hamburger__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-primary);
	position: absolute;
	left: 6px;
	transition: transform 0.3s, opacity 0.3s;
}

.hamburger__bar:nth-child(1) { top: 9px; }
.hamburger__bar:nth-child(2) { top: 17px; }
.hamburger__bar:nth-child(3) { top: 25px; }

.hamburger.is-active .hamburger__bar:nth-child(1) {
	top: 17px;
	transform: rotate(45deg);
}

.hamburger.is-active .hamburger__bar:nth-child(2) {
	opacity: 0;
}

.hamburger.is-active .hamburger__bar:nth-child(3) {
	top: 17px;
	transform: rotate(-45deg);
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
	background: var(--color-white);
	position: relative;
	z-index: 50;
}

.breadcrumb__inner {
	display: flex;
	align-items: stretch;
}

.breadcrumb__list {
	display: flex;
	list-style: none;
}

.breadcrumb__item {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px 19px 10px 30px;
	background: #f0ebe2;
	font-size: 1.4rem;
	white-space: nowrap;
}

.breadcrumb__item:first-child {
	padding-left: 40px;
}

/* Arrow border */
.breadcrumb__item::before {
	content: '';
	position: absolute;
	top: 0;
	right: -16px;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 16px solid #d6d0c5;
	z-index: 2;
}

/* Arrow fill */
.breadcrumb__item::after {
	content: '';
	position: absolute;
	top: 0;
	right: -14px;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 14px solid #f0ebe2;
	z-index: 3;
}

.breadcrumb__item a:hover {
	color: var(--color-primary);
	opacity: 1;
}

/* Yellow end area */
.breadcrumb__end {
	flex: 1;
	background: var(--color-yellow);
	position: relative;
	min-width: 40px;
}

.breadcrumb__end::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 16px solid #d6d0c5;
	z-index: 2;
}

.breadcrumb__end::after {
	content: '';
	position: absolute;
	top: 0;
	left: 2px;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 14px solid #f0ebe2;
	z-index: 3;
}

/* ============================================================
   Mobile Nav Overlay
   ============================================================ */
.mobile-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 90;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.mobile-nav-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ============================================================
   Mobile Navigation
   ============================================================ */
.mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--color-white);
	z-index: 150;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateY(-100%);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mobile-nav.is-open {
	transform: translateY(0);
}

.mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-nav__close {
	background: none;
	border: none;
	cursor: pointer;
	width: 32px;
	height: 32px;
	position: relative;
}

.mobile-nav__close::before,
.mobile-nav__close::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 2px;
	background: var(--color-primary);
	top: 50%;
	left: 50%;
}

.mobile-nav__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-nav__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-nav__body {
	padding: 0 0 40px;
}

.mobile-nav__section {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 20px 8px;
	font-size: 1.4rem;
	font-weight: bold;
}

.mobile-nav__icon {
	width: 20px;
	height: 20px;
	fill: var(--color-primary);
}

.mobile-nav__icon[src] {
	filter: invert(58%) sepia(89%) saturate(1095%) hue-rotate(360deg) brightness(101%) contrast(97%);
}

.mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	font-size: 1.4rem;
}

.mobile-nav__link::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	transform: rotate(-45deg);
}

.mobile-nav__contact {
	margin: 16px 20px;
	padding: 20px;
	background: #fafafa;
	border-radius: 8px;
	text-align: center;
}

.mobile-nav__contact-name {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 4px;
}

.mobile-nav__contact-hours {
	font-size: 1.2rem;
	color: var(--color-text-light);
	margin-bottom: 12px;
}

.mobile-nav__contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	background: var(--color-primary);
	border: none;
	border-radius: 6px;
	color: var(--color-white);
	font-size: 1.4rem;
	font-weight: bold;
	cursor: pointer;
}

.mobile-nav__contact-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ============================================================
   Footer
   ============================================================ */
.footer__top {
	background: var(--color-primary);
	padding: 50px 40px;
}

.footer__top-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	gap: 60px;
}

.footer__about,
.footer__support {
	flex: 1;
}

.footer__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 2.2rem;
	font-weight: bold;
	color: var(--color-white);
	margin-bottom: 20px;
}

.footer__title img {
	width: 36px;
	height: auto;
}

.footer__text {
	font-size: 1.3rem;
	color: var(--color-white);
	line-height: 1.8;
}

.footer__contact-box {
	background: var(--color-white);
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 16px;
	text-align: center;
}

.footer__contact-box p {
	font-size: 1.4rem;
	margin-bottom: 12px;
}

.footer__hours {
	font-size: 1.3rem;
	color: var(--color-white);
}

/* Area links */
.footer__area {
	background: var(--color-white);
	padding: 40px;
}

.footer__area-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 16px;
	border-left: 4px solid var(--color-border);
}

.footer__area-title {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 16px;
}

.footer__area-group {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.footer__area-trigger {
	font-size: 1.4rem;
	font-weight: bold;
	min-width: 100px;
	background: none;
	border: none;
	padding: 0;
	cursor: default;
	text-align: left;
}

.footer__area-trigger::after {
	display: none;
}

.footer__area-content {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.footer__area-content a {
	font-size: 1.4rem;
}

.footer__area-content a:hover {
	color: var(--color-primary);
	opacity: 1;
}

/* Footer nav */
.footer__nav {
	background: #4a4a4a;
	padding: 20px 40px;
}

.footer__nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer__links {
	display: flex;
	flex-wrap: wrap;
}

.footer__links a {
	font-size: 1.3rem;
	color: var(--color-white);
	padding: 0 16px;
	border-left: 1px solid var(--color-white);
}

.footer__links a:last-child {
	border-right: 1px solid var(--color-white);
}

.footer__social {
	display: flex;
	gap: 8px;
}

.footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
}

.footer__social-link--fb { background: #1877f2; }
.footer__social-link--tw { background: #1da1f2; }

.footer__social-link svg {
	width: 20px;
	height: 20px;
	fill: var(--color-white);
}

/* Copyright */
.footer__copyright {
	background: var(--color-bg);
	padding: 16px 40px;
	text-align: center;
	font-size: 1.2rem;
	color: #999;
}

/* ============================================================
   Page Top Button
   ============================================================ */
.page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 80;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.page-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.page-top__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #666;
	border-radius: 4px;
}

.page-top__link:hover {
	background: #555;
	opacity: 1;
}

.page-top__link::before {
	content: '';
	width: 12px;
	height: 12px;
	border-top: 3px solid var(--color-white);
	border-right: 3px solid var(--color-white);
	transform: rotate(-45deg) translateY(3px);
}

/* ============================================================
   Button
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}

.btn--orange {
	background: var(--color-primary);
	border: 2px solid var(--color-primary);
	color: var(--color-white);
}

.btn--orange:hover {
	background: var(--color-white);
	color: var(--color-primary);
	opacity: 1;
}

.btn--red {
	background: var(--color-accent);
	border: 2px solid var(--color-accent);
	color: var(--color-white);
}

.btn--red:hover {
	background: var(--color-white);
	color: var(--color-accent);
	opacity: 1;
}

.btn--icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ============================================================
   Utility Classes
   ============================================================ */
.pc-only { display: block; }
.sp-only { display: none; }

/* ============================================================
   Responsive (Mobile)
   ============================================================ */
@media screen and (max-width: 768px) {
	.inner {
		padding: 0 15px;
	}

	/* Utility bar: hide on mobile */
	.utility-bar {
		display: none;
	}

	/* Header */
	.header__inner {
		padding: 12px 16px;
	}

	.header__hours {
		display: none;
	}

	.header__logo img {
		height: 28px;
	}

	.header__mypage span {
		display: none;
	}

	.header__mypage img {
		width: 28px;
		height: 28px;
	}

	/* Hamburger */
	.hamburger {
		display: block;
	}

	/* Breadcrumb */
	.breadcrumb__item {
		padding: 8px 15px 8px 20px;
		font-size: 1.2rem;
	}

	.breadcrumb__item:first-child {
		padding-left: 15px;
	}

	.breadcrumb__item::before {
		right: -12px;
		border-top-width: 18px;
		border-bottom-width: 18px;
		border-left-width: 12px;
	}

	.breadcrumb__item::after {
		right: -10px;
		border-top-width: 18px;
		border-bottom-width: 18px;
		border-left-width: 10px;
	}

	.breadcrumb__end::before {
		border-top-width: 18px;
		border-bottom-width: 18px;
		border-left-width: 12px;
	}

	.breadcrumb__end::after {
		border-top-width: 18px;
		border-bottom-width: 18px;
		border-left-width: 10px;
	}

	/* Mobile nav */
	.mobile-nav-overlay {
		display: block;
	}

	.mobile-nav {
		display: block;
	}

	/* Footer */
	.footer__top {
		padding: 30px 20px;
	}

	.footer__top-inner {
		flex-direction: column;
		gap: 30px;
	}

	.footer__title {
		font-size: 1.8rem;
	}

	.footer__area {
		padding: 0;
	}

	.footer__area-inner {
		padding-left: 0;
		border-left: none;
	}

	.footer__area-title {
		padding: 14px 20px;
		margin-bottom: 0;
		background: var(--color-yellow);
		color: var(--color-white);
	}

	.footer__area-group {
		display: block;
		margin-bottom: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.footer__area-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 20px;
		font-size: 1.5rem;
		cursor: pointer;
		min-width: auto;
	}

	.footer__area-trigger::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		border-right: 2px solid #999;
		border-bottom: 2px solid #999;
		transform: rotate(45deg);
		transition: transform 0.3s;
	}

	.footer__area-trigger.is-open::after {
		transform: rotate(-135deg);
	}

	.footer__area-content {
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 0 0 10px;
	}

	.footer__area-content.is-open {
		display: flex;
	}

	.footer__area-content a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px;
		border-bottom: 1px solid var(--color-border);
	}

	.footer__area-content a:last-child {
		border-bottom: none;
	}

	.footer__area-content a::after {
		content: '';
		width: 8px;
		height: 8px;
		border-right: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		transform: rotate(-45deg);
	}

	.footer__hours {
		font-size: 1.1rem;
	}

	.footer__nav {
		padding: 0;
	}

	.footer__nav-inner {
		flex-direction: column;
	}

	.footer__links {
		flex-direction: column;
		width: 100%;
	}

	.footer__links a {
		display: block;
		padding: 14px 20px;
		font-size: 1.4rem;
		border-left: none;
		border-bottom: 1px solid #5a5a5a;
	}

	.footer__links a:last-child {
		border-right: none;
	}

	.footer__social {
		padding: 30px 20px;
		justify-content: center;
		gap: 16px;
	}

	.footer__social-link {
		width: 48px;
		height: 48px;
		border-radius: 6px;
	}

	.footer__social-link svg {
		width: 28px;
		height: 28px;
	}

	.footer__copyright {
		padding: 12px 20px;
	}

	.page-top {
		bottom: 16px;
		right: 16px;
	}

	.page-top__link {
		width: 40px;
		height: 40px;
	}

	/* Utility */
	.pc-only { display: none; }
	.sp-only { display: block; }
}