/*
Theme Name: LEPUS
Theme URI: https://example.com/
Author: LEPUS
Author URI: https://example.com/
Description: 香川県丸亀市の肌管理専門エステサロン「LEPUS」公式サイト用オリジナルテーマ。スマートフォン表示・地域SEO・表示速度・構造化データ・予約導線を重視して設計しています。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lepus
*/

/* ==========================================================================
   0. リセット・基本設定
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Helvetica Neue", Arial, sans-serif;
	color: var(--lepus-dark, #20241f);
	background: #fff;
	line-height: 1.8;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lepus-primary, #8f6b57); text-decoration: none; }
a:hover { text-decoration: underline; }

/* キーボード操作時のフォーカス表示を明確化（マウス操作時は表示しない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--lepus-primary, #8f6b57);
	outline-offset: 2px;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, dl, dd, p, figure { margin: 0; }
button { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }
iframe { border: 0; width: 100%; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: fixed;
	top: -100px;
	left: 0;
	background: var(--lepus-dark, #20241f);
	color: #fff;
	padding: 12px 20px;
	z-index: 10000;
	transition: top .2s ease;
}
.skip-link:focus {
	top: 0;
	width: auto;
	height: auto;
	clip: auto;
}

.container {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* スクロール／読み込み時にふわっとスライドインする演出 */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--hero { transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
	.reveal { transition: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   1. 共通パーツ（ボタン・見出し・カード等）
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 28px;
	border-radius: 2px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: opacity .2s ease, transform .1s ease;
	min-height: 48px;
	line-height: 1.4;
}
.btn:hover { opacity: .85; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--lepus-primary, #8f6b57); color: #fff; }
.btn--outline { background: #fff; color: var(--lepus-dark, #20241f); border: 1px solid var(--lepus-primary, #8f6b57); }
.btn--ec { border-color: var(--lepus-accent, #6d7266); color: var(--lepus-accent, #6d7266); }
.site-header__instagram {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 4px;
	font-weight: 700; font-size: 14px; color: var(--lepus-dark, #20241f);
}
.site-header__instagram:hover { text-decoration: none; opacity: .75; }

.section { padding: 56px 0; }
.section:nth-of-type(even) { background: #faf7f5; }
.section__title,
.page-title,
.hero__title,
.entry__title,
.card__title {
	font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", serif;
}
.section__title {
	font-size: clamp(22px, 5vw, 30px);
	text-align: center;
	margin-bottom: 12px;
	letter-spacing: .04em;
}
.section__lead { text-align: center; max-width: 640px; margin: 0 auto 32px; color: #6b6560; }
.section__more { text-align: center; margin-top: 32px; }

.page-title { font-size: clamp(24px, 6vw, 32px); margin: 24px 0 12px; }
.page-lead { color: #6b6560; margin-bottom: 24px; }
.page-content { padding: 8px 0 64px; }
.page-cta { margin: 40px 0; text-align: center; }
.page-back { text-align: center; margin-bottom: 40px; }

.breadcrumb { padding: 14px 0; font-size: 13px; color: #918b86; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb__item:not(:last-child)::after { content: "/"; margin-left: 6px; color: #c9c2bc; }
.breadcrumb__item a { color: #918b86; }

.card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.card-grid--staff { grid-template-columns: repeat(2, 1fr); }
.card {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(58, 53, 50, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(58, 53, 50, .12); }
.card__link { color: inherit; display: block; }
.card__link:hover { text-decoration: none; }
.card__link:focus-visible { outline: 2px solid var(--lepus-primary, #8f6b57); outline-offset: -3px; }
.card__thumb { position: relative; aspect-ratio: 4 / 3; background: #f1ede9; overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__thumb--round { aspect-ratio: 1 / 1; border-radius: 50%; width: 96px; height: 96px; margin: 20px auto 0; }
.card__thumb--round img { border-radius: 50%; }
.card__thumb-placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: repeating-linear-gradient(45deg, #f1ede9, #f1ede9 10px, #e9e3dd 10px, #e9e3dd 20px);
	color: #a89f97; font-size: 12px; letter-spacing: .1em;
}
.card__badge {
	position: absolute; top: 10px; left: 10px;
	padding: 4px 10px; border-radius: 2px; font-size: 12px; font-weight: 700; color: #fff;
}
.card__badge--popular { background: var(--lepus-primary, #8f6b57); }
.card__badge--new { background: var(--lepus-accent, #6d7266); }
.card__body { padding: 16px; text-align: left; }
.card--staff .card__body { text-align: center; }
.card__title { font-size: 17px; margin-bottom: 6px; }
.card__price { font-weight: 700; color: var(--lepus-primary, #8f6b57); margin-bottom: 2px; }
.card__duration, .card__role, .card__meta { font-size: 13px; color: #8a8480; }
.card__excerpt { font-size: 13px; color: #6b6560; margin-top: 8px; }

.info-list__row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid #eee6e0; }
.info-list__row dt { font-size: 13px; color: #8a8480; }
.info-list__row dd { margin: 0; }

.hours-table th, .hours-table td { padding: 4px 8px 4px 0; text-align: left; font-size: 14px; }
.hours-table__closed { color: #b95a5a; }
.hours-table__note { font-size: 13px; color: #8a8480; margin-top: 8px; }

.reservation-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.reservation-buttons--header { display: none; }
.reservation-buttons--fixed { flex-wrap: nowrap; gap: 0; }
.reservation-buttons--fixed .btn { flex: 1; border-radius: 0; min-height: 56px; }

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: #fff;
	border-bottom: 1px solid #eee6e0;
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px;
	padding: 10px 20px;
	position: relative;
}
.site-branding { flex-shrink: 0; }
.site-branding__logo img { max-height: 48px; width: auto; }
.site-branding__text { font-size: 18px; font-weight: 700; white-space: nowrap; }
.site-branding__text a { color: var(--lepus-dark, #20241f); }
.site-branding__catch { display: none; }

.menu-toggle {
	width: 44px; height: 44px;
	background: transparent; border: 0; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	z-index: 600;
}
.menu-toggle__bar { width: 24px; height: 2px; background: var(--lepus-dark, #20241f); transition: transform .2s ease, opacity .2s 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); }

.primary-navigation {
	position: fixed; inset: 0 0 0 30%;
	background: #fff;
	padding: 90px 24px 24px;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .25s ease, visibility .25s ease;
	overflow-y: auto;
	z-index: 550;
}
.primary-navigation.is-open { transform: translateX(0); visibility: visible; box-shadow: -8px 0 24px rgba(0,0,0,.15); }
.primary-navigation__list { display: flex; flex-direction: column; gap: 4px; }
.primary-navigation__list a {
	display: block; padding: 14px 4px; color: var(--lepus-dark, #20241f);
	font-weight: 700; border-bottom: 1px solid #f1ede9; white-space: nowrap;
}
.primary-navigation__cta { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.primary-navigation__cta .btn { width: 100%; white-space: nowrap; }

/* ==========================================================================
   3. ヒーロー・トップページセクション
   ========================================================================== */
.hero { position: relative; color: #fff; }
.hero__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #ddd; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(58,53,50,.15) 0%, rgba(58,53,50,.65) 100%);
}
.hero__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: flex-start; justify-content: center; text-align: center;
	background: linear-gradient(135deg, var(--lepus-primary, #8f6b57), var(--lepus-accent, #6d7266));
	color: #fff; font-size: 14px; padding: 32px 20px;
}
.hero__content {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0 20px 32px;
	z-index: 2;
}
.hero__catch { font-size: 14px; letter-spacing: .08em; margin-bottom: 8px; opacity: .95; }
.hero__title { font-size: clamp(26px, 8vw, 40px); margin-bottom: 12px; letter-spacing: .03em; }
.hero__lead { font-size: 14px; margin-bottom: 20px; max-width: 480px; }
.hero .reservation-buttons { justify-content: flex-start; }

.concerns__list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.concerns__item {
	background: #fff; border-radius: 4px; position: relative;
	box-shadow: 0 2px 8px rgba(58,53,50,.06);
	transition: box-shadow .2s ease, transform .2s ease;
}
.concerns__item:hover { box-shadow: 0 4px 14px rgba(58,53,50,.12); transform: translateY(-1px); }
.concerns__item a {
	display: block; padding: 14px 40px 14px 44px; position: relative; min-height: 44px;
	color: var(--lepus-dark, #20241f); font-weight: 700;
}
.concerns__item a:hover { text-decoration: none; }
.concerns__item a::before {
	content: "✓"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--lepus-primary, #8f6b57); font-weight: 700;
}
.concerns__item a::after {
	content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	color: #c9c2bc; font-size: 20px;
}
.concerns__item--consult a { color: var(--lepus-primary, #8f6b57); }
.concerns__item--consult a::before { content: "💬"; }
.concerns__note { text-align: center; margin-top: 24px; color: #6b6560; }

.about__text { max-width: 720px; margin: 0 auto; text-align: center; }
.about__list {
	max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 12px;
}
.about__item {
	background: #fff; border-radius: 4px; padding: 16px 18px 16px 44px; position: relative;
	box-shadow: 0 2px 8px rgba(58,53,50,.06);
}
.about__item::before {
	content: "✓"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--lepus-accent, #6d7266); font-weight: 700;
}
@media (min-width: 700px) {
	.about__list { grid-template-columns: repeat(2, 1fr); }
}

.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border-radius: 4px; padding: 4px 20px; box-shadow: 0 2px 8px rgba(58,53,50,.06); }
.faq-item__question { padding: 16px 30px 16px 8px; cursor: pointer; font-weight: 700; position: relative; list-style: none; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
	content: "+"; position: absolute; right: 4px; top: 14px; font-size: 22px; color: var(--lepus-primary, #8f6b57);
}
.faq-item[open] .faq-item__question::after { content: "−"; }
.faq-item__answer { padding: 0 8px 18px; color: #4a4541; }

.menu-category { margin-bottom: 40px; }
.menu-category__title {
	font-size: 20px; margin-bottom: 16px; padding-bottom: 8px;
	border-bottom: 2px solid var(--lepus-primary, #8f6b57);
}

.access-preview__inner { display: flex; flex-direction: column; gap: 24px; }
.access-preview__map iframe { width: 100%; height: 280px; border-radius: 4px; }
.map-placeholder {
	width: 100%; height: 220px; border-radius: 4px;
	background: #f1ede9; color: #a89f97;
	display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 13px;
}

/* ==========================================================================
   4. 個別ページ（スタッフ・症例・お問い合わせ 等）
   ========================================================================== */
.entry__title { font-size: clamp(22px, 6vw, 30px); margin-bottom: 16px; }
.entry__meta { color: #918b86; font-size: 13px; margin-bottom: 20px; }
.entry__thumbnail { margin-bottom: 24px; border-radius: 4px; overflow: hidden; }
.entry__content { line-height: 1.9; }
.entry__content p { margin-bottom: 1.4em; }

.staff-detail { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.staff-detail__photo { width: 100%; max-width: 260px; margin: 0 auto; border-radius: 4px; overflow: hidden; aspect-ratio: 1/1; }
.staff-detail__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-detail__role { color: var(--lepus-primary, #8f6b57); font-weight: 700; margin-bottom: 14px; }
.staff-detail__comment { margin: 16px 0; font-style: italic; color: #4a4541; }

.menu-detail__price { font-size: 26px; font-weight: 700; color: var(--lepus-primary, #8f6b57); margin: 8px 0 4px; }
.menu-detail__duration { color: #8a8480; margin-bottom: 20px; }
.menu-detail__note { margin-top: 24px; padding: 16px; background: #faf7f5; border-radius: 4px; font-size: 14px; }
.menu-detail__concerns { margin-top: 12px; }
.menu-detail__section { margin: 28px 0; }
.menu-detail__section h2 { font-size: 18px; margin-bottom: 10px; }
.menu-detail__section--notice { background: #faf7f5; border-radius: 4px; padding: 20px; }
.menu-detail__flow { list-style: none; padding: 0; counter-reset: none; display: flex; flex-direction: column; gap: 10px; }
.menu-detail__flow li { display: flex; align-items: center; gap: 12px; }
.menu-detail__flow-num {
	flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
	background: var(--lepus-primary, #8f6b57); color: #fff; font-size: 13px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}

.case-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.case-before-after__label { text-align: center; font-weight: 700; margin-bottom: 8px; color: var(--lepus-primary, #8f6b57); }
.case-before-after img, .case-before-after .card__thumb-placeholder { border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }
.case-result { margin: 24px 0; padding: 20px; background: #faf7f5; border-radius: 4px; }
.case-result h2 { font-size: 17px; margin-bottom: 10px; }
.case-caution { font-size: 13px; color: #8a8480; margin-top: 24px; }

.contact-section { margin: 32px 0; }
.contact-section h2 { font-size: 19px; margin-bottom: 12px; }
.form-notice { padding: 16px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; }
.form-notice--success { background: #eef3ea; color: #4c6b3d; }
.form-notice--error { background: #f8e9e9; color: #a13d3d; }

.contact-form { max-width: 560px; }
.contact-form__row { margin-bottom: 18px; }
.contact-form__row label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.contact-form__row .is-required { color: #fff; background: #b95a5a; font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid #ddd4cc; border-radius: 4px; font-size: 15px; font-family: inherit;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--lepus-primary, #8f6b57); outline-offset: 1px; }
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__submit { margin-top: 8px; }
.contact-form__submit .btn { width: 100%; border: 0; cursor: pointer; }

.search-form { display: flex; gap: 8px; margin: 24px 0; }
.search-form__input { flex: 1; padding: 12px 14px; border: 1px solid #ddd4cc; border-radius: 4px; font-size: 15px; }
.page-404 { text-align: center; padding: 60px 0; }
.page-404 .search-form { justify-content: center; max-width: 400px; margin: 24px auto; }

/* ==========================================================================
   5. フッター・固定CTA
   ========================================================================== */
.site-footer { background: #20241f; color: #efe9e4; padding: 48px 0 24px; margin-bottom: 64px; }
.site-footer a { color: #efe9e4; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
.site-footer__heading { font-weight: 700; margin-bottom: 12px; color: #fff; }
.site-footer__shop-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.site-footer__address { font-size: 14px; margin-bottom: 8px; color: #cfc6be; }
.site-footer__tel a { font-size: 18px; font-weight: 700; }
.site-footer__nav-list li, .site-footer__sns-list li { margin-bottom: 8px; font-size: 14px; }
.site-footer .hours-table th, .site-footer .hours-table td { color: #cfc6be; font-size: 13px; }
.site-footer .hours-table__note { color: #a89f97; }
.footer-widget { margin-bottom: 20px; font-size: 13px; color: #cfc6be; }
.site-footer__copyright { text-align: center; font-size: 12px; color: #a89f97; padding-top: 20px; border-top: 1px solid #4d4740; }
.site-footer__ec-banner { background: var(--lepus-accent, #6d7266); text-align: center; padding: 16px; }
.site-footer__ec-banner a { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em; }

.fixed-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
	box-shadow: 0 -4px 16px rgba(0,0,0,.12);
	display: flex; flex-wrap: nowrap;
}
.fixed-cta .btn {
	flex: 1; border-radius: 0; min-height: 56px;
	background: #fff; color: var(--lepus-dark, #20241f); border-right: 1px solid #eee6e0;
}
.fixed-cta .btn:first-child { background: var(--lepus-primary, #8f6b57); color: #fff; }
.fixed-cta .btn:last-child { border-right: 0; }

/* ==========================================================================
   6. タブレット・PC向けレイアウト（モバイルファーストの拡張）
   ========================================================================== */
@media (min-width: 600px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
	.card-grid--staff { grid-template-columns: repeat(3, 1fr); }
	.hero__media { aspect-ratio: 16 / 9; }
	.access-preview__inner { flex-direction: row; }
	.access-preview__info, .access-preview__map { flex: 1; }
}

@media (min-width: 900px) {
	.container { padding: 0 32px; }

	.site-branding { display: flex; flex-direction: column; }
	.site-branding__catch { display: block; font-size: 12px; color: #8a8480; margin-top: 2px; }

	.menu-toggle { display: none; }
	.primary-navigation {
		position: static; transform: none; background: none; padding: 0;
		visibility: visible;
		display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; gap: 24px; overflow: visible;
	}
	.primary-navigation__list { flex-direction: row; flex-wrap: wrap; row-gap: 8px; gap: 20px; }
	.primary-navigation__list a { padding: 8px 0; border-bottom: 0; }
	.primary-navigation__cta { margin-top: 0; flex-direction: row; flex-wrap: wrap; }
	.primary-navigation__cta .btn { width: auto; white-space: nowrap; }
	.reservation-buttons--header { display: flex; }

	.card-grid { grid-template-columns: repeat(3, 1fr); }
	.card-grid--menu { grid-template-columns: repeat(3, 1fr); }
	.card-grid--staff { grid-template-columns: repeat(4, 1fr); }

	.hero__content { padding: 0 0 64px; }
	.hero .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
	.hero__content { left: 50%; transform: translateX(-50%); width: 100%; max-width: 1100px; padding: 0 32px 64px; }
	.hero__lead { font-size: 16px; }

	.staff-detail { flex-direction: row; align-items: flex-start; gap: 32px; }
	.staff-detail__photo { flex-shrink: 0; }

	.fixed-cta { display: none; }

	.site-footer { margin-bottom: 0; }
	.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
	.card-grid--menu { grid-template-columns: repeat(4, 1fr); }
}

/* body要素にフッター固定CTA分の余白を確保（スマートフォン時のみ） */
@media (max-width: 899px) {
	body { padding-bottom: 56px; }
}

/* ==========================================================================
   店内・内装紹介ギャラリー（大小に変化をつけたレイアウト）
   ========================================================================== */
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 32px 0 24px;
}
.gallery__item { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--large { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gallery__points { max-width: 640px; margin: 0 auto; text-align: center; }
.gallery__points li { display: inline-block; margin: 4px 14px; font-size: 14px; color: #6b6560; }
@media (min-width: 700px) {
	.gallery__grid { grid-template-columns: repeat(3, 1fr); }
	.gallery__item--large { grid-column: span 2; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   全国向けオンラインショップ導線
   ========================================================================== */
.ec-showcase { background: var(--lepus-dark, #20241f); color: #f2efe9; }
.ec-showcase .section__title { color: #f2efe9; }
.ec-showcase .section__lead { color: #cfc9bd; }
.ec-showcase__paths { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 32px 0; }
.ec-showcase__path {
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 4px;
	padding: 24px; text-align: center;
}
.ec-showcase__path-title { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; margin-bottom: 10px; }
.ec-showcase__path-text { font-size: 14px; color: #cfc9bd; margin-bottom: 18px; line-height: 1.8; }
.ec-showcase .btn--primary { background: var(--lepus-primary, #8f6b57); }
.ec-showcase .btn--outline { background: transparent; border-color: rgba(255,255,255,.5); color: #f2efe9; }
.ec-showcase__concerns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; }
.ec-showcase__concerns a {
	font-size: 13px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; color: #f2efe9;
}
.ec-showcase__concerns a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
@media (min-width: 700px) {
	.ec-showcase__paths { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   取扱ブランド一覧
   ========================================================================== */
.brands__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.brands__item { border: 1px solid #eee6e0; border-radius: 4px; padding: 20px; text-align: center; }
.brands__item-name { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", serif; font-size: 16px; letter-spacing: .06em; margin-bottom: 8px; }
.brands__item-text { font-size: 13px; color: #6b6560; line-height: 1.7; }
@media (min-width: 700px) {
	.brands__grid { grid-template-columns: repeat(4, 1fr); }
}