/**
 * Hanaya Kanbei - レスポンシブスタイル
 *
 * Breakpoints:
 *   Mobile:  ~ 767px
 *   Tablet:  768px ~ 1023px
 *   PC:      1024px ~
 */

/* ==========================================================================
   Tablet (768px ~ 1023px)
   ========================================================================== */
@media screen and (max-width: 1023px) {
	.header-inner {
		flex-wrap: wrap;
	}

	/* Service Grid 3列 → 2列 */
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Shop Info 2列 → 1列 */
	.shopinfo-grid {
		grid-template-columns: 1fr;
	}

	/* Camera Grid 3列 → 2列 */
	.camera-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Camera Single 横並び → 縦並び */
	.camera-single-layout {
		flex-direction: column;
	}

	.camera-single-info {
		width: 100%;
	}

	/* Sitemap 2列 → 1列 */
	.sitemap-content {
		grid-template-columns: 1fr;
	}

	/* Develop / Photobook 2列 → 1列 */
	.develop-services,
	.photobook-types {
		grid-template-columns: 1fr;
	}

	/* Table horizontal scroll */
	.price-table,
	.schedule-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Footer 3カラム → 維持（タブレットでも3列） */
	.footer-main {
		gap: 25px;
	}
}

/* ==========================================================================
   Mobile (~ 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
	html {
		font-size: 15px;
	}

	/* Header */
	.header-inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}

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

	.site-logo-img {
		height: 32px;
	}

	.site-phone a {
		font-size: 0.95rem;
	}

	/* ハンバーガーメニュー表示 */
	.menu-toggle {
		display: flex;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		background-color: var(--color-white);
		border-top: 1px solid var(--color-border);
	}

	.main-navigation.toggled ul {
		display: flex;
	}

	.main-navigation a {
		padding: 12px 20px;
		border-bottom: 1px solid var(--color-border);
	}

	/* Content */
	.site-main {
		padding: 20px 0;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.35rem; }
	h3 { font-size: 1.2rem; }

	/* Hero */
	.hero-section {
		padding: 50px 0;
	}

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

	/* Service Grid 2列 → 1列 */
	.service-grid {
		grid-template-columns: 1fr;
	}

	/* Camera Grid 2列 → 1列 */
	.camera-grid {
		grid-template-columns: 1fr;
	}

	/* Camera Filter */
	.camera-filter-group {
		flex-direction: column;
		align-items: flex-start;
	}

	/* News */
	.news-item,
	.news-archive-item {
		flex-direction: column;
		gap: 5px;
	}

	/* Contact */
	.contact-phone-number {
		font-size: 1.5rem;
	}

	/* About Banner */
	.about-banner {
		padding: 30px 20px;
	}

	/* Post Card */
	.post-card {
		flex-direction: column;
	}

	.post-card-thumbnail {
		width: 100%;
	}

	.post-card-thumbnail img {
		height: 200px;
	}

	/* 404 */
	.error-title {
		font-size: 4rem;
	}

	/* Footer - 3カラム → 1カラム */
	.site-footer {
		padding: 30px 0 15px;
	}

	.footer-main {
		grid-template-columns: 1fr;
		gap: 25px;
		padding-bottom: 25px;
	}

	.footer-brand {
		text-align: center;
	}

	.footer-logo-area {
		text-align: center;
	}

	.footer-logo-img {
		height: 34px;
	}

	.footer-nav-col {
		gap: 14px;
	}

	.footer-bottom-nav ul {
		gap: 4px 0;
	}

	.footer-bottom-nav li:not(:last-child)::after {
		margin: 0 0.3em;
	}

	.footer-bottom-nav a {
		font-size: 0.7rem;
	}

	/* Back to top */
	.back-to-top {
		bottom: 15px;
		right: 15px;
		width: 38px;
		height: 38px;
	}

	/* Gallery - 2列に */
	.collection-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-gallery {
		grid-template-columns: 1fr;
	}

	.essay-list {
		grid-template-columns: 1fr;
	}

	.service-card-img {
		height: 140px;
	}

	/* Entry content heading adjustments */
	.entry-content h2 {
		font-size: 1.25rem;
		margin-top: 2rem;
	}

	.entry-content h3 {
		font-size: 1.05rem;
		margin-top: 1.5rem;
	}

	.entry-content section {
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
	}

	/* Entry header */
	.entry-header {
		margin-bottom: 1.5rem;
		padding-bottom: 1rem;
	}

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

	/* Table th width */
	.company-info-table th,
	.legal-table th,
	.access-info-table th {
		width: 100px;
		font-size: 0.85rem;
	}

	/* Lead text */
	.lead-text,
	.lead {
		font-size: 1rem;
	}

	/* Page gallery → 1列 */
	.page-gallery {
		grid-template-columns: 1fr;
	}

	.page-gallery img {
		height: 200px;
	}

	/* Founder photos grid → 2列 */
	.founder-photos-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.founder-photo-item img {
		height: 160px;
	}

	/* Hero（モバイル）：背景写真でも文字が読めるよう余白とサイズを調整 */
	.hero-section {
		padding: 70px 0;
	}

	.hero-lead {
		font-size: 1.1rem;
	}

	.hero-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-cta .btn {
		width: 100%;
	}

	/* 店舗写真バナーはモバイルで縦に潰れすぎないよう比率を変える */
	.store-photo-banner img {
		aspect-ratio: 3 / 2;
	}
}

/* ==========================================================================
   ハンバーガーメニュー：開いたとき×印に変形（aria-expanded を利用）
   ========================================================================== */
.menu-toggle-bar {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}