/* =============================================
   Pallet Buzen - レスポンシブスタイル
   対象: 1024px 以下（SP・タブレット共通）
         767px 以下（SP 専用）
         374px 以下（小型SP）
   ============================================= */

/* -----------------------------------------------
   SP専用: 各セクション細部調整（〜767px）
----------------------------------------------- */
@media (max-width: 767px) {
	.p-fv__copy {
		padding-left: clamp(12px, 2vw, 32px);
	}

	.p-news__bg {
		border-radius: 48px 48px 0 0;
	}

	.p-contact__phone-row {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.p-contact__phone-card {
		padding: 16px;
	}

	.p-contact {
		background-image: url('../images/1_footer.jpg');
	}
}

/* -----------------------------------------------
   SP・タブレット: 共通レイアウト上書き（〜1024px）
   ※ SPヘッダー表示切替・各セクション折り返し等
----------------------------------------------- */
@media (max-width: 1024px) {
	.p-about-lottie {
		width: 113vw !important;
		height: min(37vw, 330px) !important;
	}

	.p-contact__phone-row {
		gap: 0;
	}

	.p-contact__phone-row {
		flex-direction: column;
		align-items: center;
	}

	.p-contact__phone-num {
		font-size: 2rem;
	}

	/* カスタムSPヘッダー・メニューを表示 */
	.p-sp-header,
	.p-sp-menu {
		display: block !important;
	}

	.p-about-content__row {
		flex-direction: column;
	}

	.p-about-content__img-col {
		width: 100% !important;
	}

	.p-about__bottom {
		padding: 0 !important;
	}

	/* FV大ロゴを非表示（SP/タブレットではSPヘッダーのロゴを使用） */
	.p-fv__logo-heading {
		display: none !important;
	}

	.p-activity-base__row {
		display: flex;
		gap: var(--sp-2xl);
		align-items: flex-start;
		flex-direction: column-reverse;
	}

	.p-activity-base__main-slider {
		width: 100%;
	}

	.p-activity-base__main-slider .splide__slide {
		height: 0;
		padding-top: 75%;
		/* 4:3 ratio */
		position: relative;
	}

	.p-activity-base__main-slider .splide__slide .p-activity-base__img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.p-activity-base__thumb-slider {
		width: 100%;
	}

	.p-activity-base__media {
		width: 100%;
	}

	/* -----------------------------------------------
	   p-sp-header（固定ピル型ヘッダー）
	----------------------------------------------- */
	.p-sp-header {
		position: fixed;
		top: calc(var(--sp-md) + env(safe-area-inset-top));
		left: var(--sp-sm);
		right: var(--sp-sm);
		z-index: 100;
	}

	.p-sp-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--sp-xs) var(--sp-sm);
		background: var(--c-white);
		border-radius: 120px;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	}

	.p-sp-header__logo-link {
		display: block;
		line-height: 0;
		width: 60%;
	}

	.p-sp-header__logo {
		height: 32px;
		width: auto;
		display: block;
		object-fit: contain;
	}

	.p-sp-header__hamburger {
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		color: var(--c-black);
		flex-shrink: 0;
	}

	/* -----------------------------------------------
	   p-sp-menu（スライドインドロワー）
	----------------------------------------------- */
	.p-sp-menu {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 200;
		pointer-events: none;
	}

	.p-sp-menu.is-open {
		pointer-events: auto;
	}

	/* オーバーレイ（黒半透明・全体に敷く） */
	.p-sp-menu__overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.p-sp-menu.is-open .p-sp-menu__overlay {
		opacity: 1;
	}

	/* パネル（右80%） */
	.p-sp-menu__panel {
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 100%;
		background: var(--c-white);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		border-radius: 16px 0 0 16px;
	}

	.p-sp-menu.is-open .p-sp-menu__panel {
		transform: translateX(0);
	}

	.p-sp-menu__inner {
		padding: var(--sp-lg) var(--sp-sm);
	}

	.p-sp-menu__logo {
		text-align: center;
		margin-bottom: var(--sp-lg);
	}

	.p-sp-menu__logo-img {
		width: 200px;
		height: auto;
	}

	.p-sp-menu__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--sp-lg);
	}

	/* 各メニュー項目リンク */
	.p-sp-menu__link {
		display: flex;
		align-items: center;
		gap: var(--sp-sm);
		width: 100%;
		text-decoration: none;
	}

	/* アコーディオントリガー */
	.p-sp-menu__accordion-trigger {
		display: flex;
		align-items: center;
		gap: var(--sp-sm);
		width: 100%;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		text-align: left;
	}

	/* アイコン円 */
	.p-sp-menu__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		flex-shrink: 0;
		color: var(--c-white);
	}

	.p-sp-menu__icon--calendar {
		background-color: var(--c-accent-3);
	}

	.p-sp-menu__icon--heart {
		background-color: var(--c-accent-1);
	}

	.p-sp-menu__icon--store {
		background-color: var(--c-accent-4);
	}

	.p-sp-menu__icon--news {
		background-color: var(--c-accent-2);
		color: var(--c-black);
	}

	.p-sp-menu__icon--access {
		background-color: var(--c-accent-5);
	}

	.p-sp-menu__icon--mail,
	.p-sp-menu__icon--contact {
		background-color: #91664C;
	}

	/* メニューテキスト */
	.p-sp-menu__text {
		flex: 1;
		font-family: var(--f-sans);
		font-size: var(--fs-xl);
		font-weight: 700;
		color: var(--c-black);
		letter-spacing: var(--ls-normal);
		line-height: 1.6;
	}

	.p-sp-menu__arrow {
		font-size: var(--fs-xl);
		color: var(--c-black);
	}

	/* アコーディオン＋アイコン */
	.p-sp-menu__accordion-icon {
		font-size: var(--fs-xl);
		color: var(--c-black);
		width: 20px;
		text-align: center;
		transition: transform 0.25s ease;
		flex-shrink: 0;
	}

	.p-sp-menu__item--accordion.is-open .p-sp-menu__accordion-icon {
		transform: rotate(45deg);
	}

	/* アコーディオン本体 */
	.p-sp-menu__accordion-body {
		overflow: hidden;
		max-height: 0;
		margin-top: 0;
		transition: max-height 0.35s ease, margin-top 0.35s ease;
	}

	.p-sp-menu__item--accordion.is-open .p-sp-menu__accordion-body {
		max-height: 600px;
		margin-top: var(--sp-sm);
	}

	/* サブリスト */
	.p-sp-menu__sub-list {
		list-style: none;
		margin: 0;
		padding: var(--sp-sm);
		background: #f5f3ef;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
	}

	.p-sp-menu__sub-item {
		padding: var(--sp-sm) 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	.p-sp-menu__sub-item:last-child {
		border-bottom: none;
	}

	.p-sp-menu__sub-header {
		display: flex;
		align-items: flex-start;
		gap: var(--sp-xs);
	}

	a.p-sp-menu__sub-header--link {
		text-decoration: none;
		color: inherit;
	}

	.p-sp-menu__sub-bullet {
		color: var(--c-black);
		flex-shrink: 0;
		margin-top: 2px;
	}

	.p-sp-menu__sub-label {
		display: block;
		font-size: var(--fs-xs);
		font-weight: 700;
		color: var(--c-black);
		letter-spacing: var(--ls-wide);
	}

	.p-sp-menu__sub-title {
		display: block;
		font-size: var(--fs-md);
		font-weight: 700;
		color: var(--c-black);
	}

	.p-sp-menu__sub-links {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: var(--sp-sm);
		padding-left: var(--sp-md);
	}

	.p-sp-menu__sub-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: var(--fs-sm);
		font-weight: 500;
		color: var(--c-black);
		text-decoration: none;
	}

	/* 準備中アイテム */
	.p-sp-menu__sub-item--disabled {
		opacity: 0.35;
		pointer-events: none;
	}

	/* -----------------------------------------------
	   p-fv（ファーストビュー・SP/タブレット）
	----------------------------------------------- */

	/* セクション全体：正方形に */
	.p-fv {
		height: auto;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.p-fv__deco-left {
		width: 150px;
		left: -30px;
		top: -40px;
	}

	.p-fv__deco-right {
		width: 150px;
		right: -40px;
		bottom: -30px;
	}

	.p-fv__wc {
		width: 80px;
		height: 80px;
		transform: scale(0.65);
		transform-origin: top left;
	}

	.p-fv__wc--rb {
		transform-origin: bottom right;
	}

	.p-fv__wc--lt {
		top: -30px;
		left: -30px;
	}

	.p-fv__wc--rb {
		bottom: -30px;
		right: -30px;
	}

	.p-fv__wc-drop {
		filter: blur(20px) !important;
	}

	/* レイアウト：フル幅・相対配置に切り替え */
	.p-fv__layout {
		position: absolute;
		inset: 0;
		display: block;
		height: 100%;
	}

	/* コピー：写真下部にオーバーレイ */
	.p-fv__copy {
		position: absolute;
		bottom: 16px;
		left: 16px;
		right: 0;
		width: auto;
		padding: 0;
	}

	.p-fv__copy-inner {
		padding-bottom: 0;
	}

	.p-fv__copy-img {
		width: 70%;
		max-width: 660px;
	}

}


/* ============================================
   SP・タブレット: ボタン共通（〜1024px）
   ============================================ */
@media (max-width: 1024px) {

	.c-btn {
		max-width: 500px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

}

/* ============================================
   SP・タブレット: セクション見出しアイコン共通（〜1024px）
   ============================================ */
@media (max-width: 1024px) {

	.p-services__header-icon,
	.p-news__header-icon,
	.p-access__icon,
	.p-schedule__heading-row .p-side-nav__icon,
	.p-contact__icon {
		width: 30px;
		height: 30px;
	}

	/* 交通アクセス：水車ロッティを縮小 */
	.p-access__deco-lottie {
		width: 64px;
		height: 64px;
		bottom: -20px;
		right: -6px;
	}

}

/* ============================================
   SP・タブレット: 事業内容（〜1024px）
   ============================================ */
@media (max-width: 1024px) {
	.p-access__row {
		gap: 0px;
		align-items: flex-start;
		flex-direction: column;
	}

	.p-contact__text {
		text-align: start;
	}

	.p-access__label {
		width: auto;
	}

	/* 各サービス行を縦積みに */
	.p-services__row {
		flex-direction: column;
		min-height: auto !important;
		gap: 0 !important;
	}

	/* 画像カラム：常に上 */
	.p-services__img-col,
	.p-services__row--reverse .p-services__img-col {
		flex: none;
		height: clamp(220px, 56vw, 420px);
		order: -1;
	}

	/* img を高さに揃えてトリミング */
	.p-services__img-col img {
		height: clamp(220px, 56vw, 420px);
		width: 100%;
		object-fit: cover;
	}

	/* 通常行：左側に角丸＋マージン */
	.p-services__img-col {
		width: calc(100% - 16px);
		border-radius: 24px 0 0 24px;
		margin-left: 16px;
		margin-right: 0;
	}

	/* reverse行：右側に角丸＋マージン */
	.p-services__row--reverse .p-services__img-col {
		width: calc(100% - 16px);
		border-radius: 0 24px 24px 0;
		margin-right: 16px;
		margin-left: 0;
	}

	/* テキストカラム：フル幅・常に下 */
	.p-services__text-col,
	.p-services__row--reverse .p-services__text-col {
		flex: none;
		width: 100%;
		padding: 48px var(--sp-xl);
		justify-content: flex-start;
		order: 1;
	}

	.p-services__content,
	.p-services__content--2,
	.p-services__content--3,
	.p-services__content--4 {
		max-width: 100%;
	}

	/* ボタンラップを横幅いっぱいに */
	.p-services__btn-wrap {
		width: 100% !important;
		max-width: none !important;
	}

}

/* ============================================
   SP・タブレット: 交通アクセス見出し（〜1024px）
   ============================================ */
@media (max-width: 1024px) {
	.p-about__illust img {
		width: 120% !important;
		margin-bottom: 32px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	/* ヘッダーを折り返しに変更 */
	.p-access__header {
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
		gap: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	/* 見出しを上段全幅に */
	.p-access__heading-wrap {
		order: 1;
		width: 100%;
		flex-basis: 100%;
		text-align: center;
		padding-bottom: var(--sp-sm);
	}

	/* 下段左：山＋水車 */
	.p-access__deco-wrap {
		order: 2;
		width: clamp(100px, 28vw, 180px);
		flex-shrink: 0;
	}

	/* 下段右：古民家（プラグインがpictureで囲む場合も対応） */
	.p-access__header>.p-access__deco-right,
	.p-access__header>picture {
		order: 3;
		width: clamp(100px, 28vw, 180px);
		flex-shrink: 0;
		align-self: flex-end;
		margin-bottom: -2px;
	}

	.p-access__header>picture>.p-access__deco-right {
		width: 100%;
		height: auto;
		display: block;
	}

	.p-contact__phone-title {
		text-align: center;
	}

}

/* ============================================
   SP 共通ユーティリティ（〜767px）
   ============================================ */
@media (max-width: 767px) {
	.p-about__illust img {
		margin-bottom: 0;
	}

	/*
	 * ── フォントサイズ SP 上書き ────────────────────────
	 *  変数名    PC(base)       TB(768-1024)   SP(〜767)
	 *  fs-3xl   2.25rem 36px → 2rem    32px → 1.75rem 28px
	 *  fs-2xl   1.875rem 30px → 1.625rem 26px → 1.5rem  24px
	 *  fs-xl    1.5rem  24px → 1.375rem 22px → 1.25rem 20px
	 *  fs-lg    1.25rem 20px → 1.125rem 18px → 1.125rem 18px
	 *  fs-md    1.125rem 18px →  (変更なし)  → 1rem    16px
	 * ── スペーシング SP 上書き ──────────────────────────
	 *  変数名    PC(base)  TB(768-1024)  SP(〜767)
	 *  sp-3xl   96px    → 72px       → 56px
	 *  sp-2xl   64px    → 48px       → 48px
	 *  sp-xl    48px    → 40px       → 32px
	 *  sp-lg    32px    →  (変更なし) → 24px
	 * ──────────────────────────────────────────────────── */
	:root {
		--fs-3xl: 1.75rem;
		/* SP: 28px  (PC: 36px / TB: 32px) */
		--fs-2xl: 1.5rem;
		/* SP: 24px  (PC: 30px / TB: 26px) */
		--fs-xl: 1.25rem;
		/* SP: 20px  (PC: 24px / TB: 22px) */
		--fs-lg: 1.125rem;
		/* SP: 18px  (PC: 20px / TB: 18px) */
		--fs-md: 1rem;
		/* SP: 16px  (PC: 18px) */
		--lh-loose: 1.9;
		--lh-normal: 1.75;
		--lh-tight: 1.45;
		--sp-3xl: 56px;
		/* SP: 56px  (PC: 96px / TB: 72px) */
		--sp-2xl: 48px;
		/* SP: 48px  (PC: 64px / TB: 48px) */
		--sp-xl: 32px;
		/* SP: 32px  (PC: 48px / TB: 40px) */
		--sp-lg: 24px;
		/* SP: 24px  (PC: 32px) */
	}

	body {
		letter-spacing: 0.03em;
	}

	section {
		padding: 40px 0;
	}

	.p-fv {
		padding: 40px 0 0;
	}

	.p-section-header {
		margin-bottom: var(--sp-lg);
	}

	.p-section-label {
		font-size: 3.25rem;
		line-height: 1;
	}

	.p-section-subtitle {
		font-size: var(--fs-base);
	}

	.p-section-heading {
		font-size: 1.4rem;
	}

	.u-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.p-services__balloon {
		top: 0 !important;
	}

	.c-btn {
		width: 100%;
		max-width: 500px !important;
		padding: 16px var(--sp-sm);
		font-size: var(--fs-base);
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.p-footer {
		padding: var(--sp-xl) 0;
	}

	.p-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-lg);
	}

	.p-footer__logo {
		width: 200px;
	}

	.p-footer__right {
		text-align: left;
	}


}


/* ============================================
   小型SP 共通ユーティリティ（〜374px）
   ============================================ */
@media (max-width: 374px) {

	:root {
		--fs-3xl: 1.5rem;
		--fs-2xl: 1.25rem;
	}

	.p-section-label {
		font-size: 2.25rem;
	}

	.u-container {
		padding-left: 16px;
		padding-right: 16px;
	}

}