/* =============================================
   Pallet Buzen - 共通スタイル（全ページ・PC基準）
   ============================================= */

/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chela+One&family=Jost:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* Color Variables */
:root {
	--c-base: #f3f0ea;
	--c-wood: #4a3b32;
	--c-matcha: #7a8c53;
	--c-indigo: #2e4b71;
	--c-mustard: #d6ae36;
	--c-madder: #b34235;
	--c-text: #333333;
	--c-black: #382710;
	--c-white: #ffffff;

	/* アクセントカラー（カラフル） */
	--c-accent-1: #E4ABCC;
	--c-accent-2: #F5E04B;
	--c-accent-3: #83ACCA;
	--c-accent-4: #AFD9BD;
	--c-accent-5: #DE687D;
}

/* Typography Variables */
:root {
	/* フォントファミリー（ゴシック体統一） */
	--f-sans: 'Zen Kaku Gothic New', sans-serif;
	--f-serif: 'Zen Kaku Gothic New', sans-serif;
	--f-display: 'Chela One', cursive;

	/* フォントサイズ */
	--fs-2xs: 0.625rem;
	/* 10px */
	--fs-xs: 0.75rem;
	/*  12px */
	--fs-sm: 0.875rem;
	/*  14px */
	--fs-base: 1rem;
	/*  16px */
	--fs-md: 1.125rem;
	/*  18px */
	--fs-lg: 1.25rem;
	/*  20px */
	--fs-xl: 1.5rem;
	/*  24px */
	--fs-2xl: 1.875rem;
	/*  30px */
	--fs-3xl: 2.25rem;
	/*  36px */

	/* 行間 */
	--lh-tight: 1.5;
	--lh-normal: 1.75;
	--lh-loose: 2;

	/* 字間 */
	--ls-tight: 0.02em;
	--ls-normal: 0.05em;
	--ls-wide: 0.1em;
	--ls-wider: 0.15em;

	/* 余白（8の倍数） */
	--sp-xs: 8px;
	--sp-sm: 16px;
	--sp-md: 24px;
	--sp-lg: 32px;
	--sp-xl: 48px;
	--sp-2xl: 64px;
	--sp-3xl: 96px;
}

/* Typography Base */
body {
	font-family: var(--f-sans);
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: var(--lh-loose);
	letter-spacing: var(--ls-normal);
	color: var(--c-text);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	padding-bottom: env(safe-area-inset-bottom);
	opacity: 1;
	transition: opacity 0.3s ease;
}

body.is-page-leaving {
	opacity: 0;
}

/* アンカーリンクの固定ヘッダー被り対策 */
html {
	scroll-behavior: auto;
	scroll-padding-top: 80px;
	overflow-x: hidden;
}

/* 画像レスポンシブ対応 */
img {
	max-width: 100%;
	height: auto;
}

/* タッチターゲット最低サイズ確保（ボタン・メニューリンク） */
.c-btn,
button {
	min-height: 44px;
}

h1 {
	font-family: var(--f-serif);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wider);
	color: var(--c-wood);
}

h2 {
	font-family: var(--f-serif);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-wide);
	color: var(--c-wood);
}

h3 {
	font-family: var(--f-serif);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	color: var(--c-wood);
}

h4 {
	font-family: var(--f-sans);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	color: var(--c-text);
}

h5 {
	font-family: var(--f-sans);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-normal);
	color: var(--c-text);
}

/* Section（各セクション共通） */
section {
	padding: 56px 0;
}

/* Section Header（各セクションの見出しブロック） */
.p-section-header {
	text-align: center;
	margin-bottom: 32px;
}

/* Section Label（各セクションの英字ラベル） */
.p-section-label {
	font-family: var(--f-display);
	font-size: 5rem;
	line-height: 1;
	margin: 0;
}

.p-section-label .c-color-1 {
	color: var(--c-accent-1);
}

.p-section-label .c-color-2 {
	color: var(--c-accent-2);
}

.p-section-label .c-color-3 {
	color: var(--c-accent-3);
}

.p-section-label .c-color-4 {
	color: var(--c-accent-4);
}

.p-section-label .c-color-5 {
	color: var(--c-accent-5);
}

.p-section-subtitle {
	font-family: var(--f-sans);
	font-size: var(--fs-lg);
}

.p-section-heading {
	font-family: var(--f-sans);
	font-size: var(--fs-2xl);
}

/* Utility */

/* 画面幅いっぱいのセクション */
.u-full-width {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* 横幅制限付きのインナーコンテナ（1200px） */
.u-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-sm);
	padding-right: var(--sp-sm);
}

.font-noto-serif {
	font-family: var(--f-serif);
}

.font-noto-sans {
	font-family: var(--f-sans);
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* -----------------------------------------------
   c-wave（波線デコレーション）
   Usage: [pallet_wave] / [pallet_wave flip="true"]
----------------------------------------------- */
.c-wave {
	line-height: 0;
	width: 100%;
}

.c-wave img {
	width: 100%;
	display: block;
}

/* -----------------------------------------------
   c-btn（ボタンコンポーネント）
   Figma: node 68-6183
   共通: 250px幅, 8px padding, 8px border-radius
         Zen Kaku Gothic New Medium 16px, var(--c-black)
----------------------------------------------- */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 250px;
	padding: var(--sp-xs) var(--sp-sm);
	border-radius: 8px;
	font-family: var(--f-sans);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-black);
	letter-spacing: 0.05em;
	line-height: 1.8;
	text-decoration: none;
	transition: background-color 0.4s ease;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s;
}

.c-btn:hover {
	color: var(--c-black);
}

.c-btn--positive:hover {
	background-color: #f0d832;
}

.c-btn--outline:hover {
	background-color: #f5f0e8;
}

.c-btn--negative:hover {
	background-color: #cacaca;
}

.c-btn--positive::after,
.c-btn--outline::after {
	transition: transform 0.2s ease;
}

.c-btn--positive:hover::after,
.c-btn--outline:hover::after {
	transform: translateX(4px);
}

.c-btn--negative::before {
	transition: transform 0.2s ease;
}

.c-btn--negative:hover::before {
	transform: translateX(-4px);
}

/* ポジティブ：黄色塗り・右矢印 */
.c-btn--positive {
	background-color: #F5E04B;
}

/* ── キラーンエフェクト（黄色ボタン共通） ── */
.c-shine-btn {
	position: relative;
	overflow: hidden;
}

.c-shine-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		105deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0) 35%,
		rgba(255,255,255,0.7) 50%,
		rgba(255,255,255,0) 65%,
		rgba(255,255,255,0) 100%
	);
	animation: btn-shine 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes btn-shine {
	0%   { left: -100%; }
	20%  { left: 150%; }
	100% { left: 150%; }
}

.c-btn--positive::after {
	content: '›';
	font-size: 1.4em;
	line-height: 1;
}

/* アウトライン：白地・ダークブラウン枠・右矢印 */
.c-btn--outline {
	background-color: var(--c-white);
	border: 2px solid var(--c-black);
}

.c-btn--outline::after {
	content: '›';
	font-size: 1.4em;
	line-height: 1;
}

/* アウトライン黄：白地・黄色枠（内側）・右矢印 */
.c-btn--outline-yellow {
	background-color: var(--c-white);
	border: none;
	box-shadow: inset 0 0 0 2px var(--c-mustard);
}

.c-btn--outline-yellow::after {
	content: '›';
	font-size: 1.4em;
	line-height: 1;
}

.c-btn--outline-yellow:hover {
	background-color: #fdf8e1;
}

.c-btn--outline-yellow::after {
	transition: transform 0.2s ease;
}

.c-btn--outline-yellow:hover::after {
	transform: translateX(4px);
}

/* ネガティブ：グレー塗り・左矢印（戻る） */
.c-btn--negative {
	background-color: #E1E1E1;
}

.c-btn--negative::before {
	content: '‹';
	font-size: 1.4em;
	line-height: 1;
}

/* 作戦会議中：グレー塗り・テキストのみ */
.c-btn--pending {
	background-color: #E1E1E1;
	color: var(--c-black);
	cursor: pointer;
}

.c-btn--pending:hover {
	background-color: #cacaca;
}

/* -----------------------------------------------
   パンくずリスト（全ページ非表示）
----------------------------------------------- */
#breadcrumb {
	display: none !important;
}

/* -----------------------------------------------
   p-footer（フッター）
   Figma: node 144-6188
----------------------------------------------- */
.p-footer {
	background-color: var(--c-wood);
	padding: var(--sp-lg) 0;
}

.p-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.p-footer__logo {
	width: 280px;
	height: auto;
	display: block;
	margin-bottom: 8px;
}

.p-footer__address {
	color: var(--c-white);
	font-size: var(--fs-sm);
	font-family: var(--f-sans);
	letter-spacing: var(--ls-normal);
	margin: 0;
}

.p-footer__right {
	text-align: right;
	color: var(--c-white);
	font-size: var(--fs-sm);
	font-family: var(--f-sans);
	letter-spacing: var(--ls-normal);
}

.p-footer__right p {
	margin: 0;
	line-height: var(--lh-tight);
}

/* -----------------------------------------------
   グローバル（全幅共通）
----------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	word-break: break-all;
	overflow-wrap: break-word;
}

/* ============================================
   Tablet（〜1024px）
   ============================================ */
@media (max-width: 1024px) {
	:root {
		--fs-3xl: 2rem;
		--fs-2xl: 1.625rem;
		--fs-xl: 1.375rem;
		--fs-lg: 1.125rem;
		--sp-3xl: 72px;
		--sp-2xl: 48px;
		--sp-xl: 40px;
	}

	section {
		padding: 48px 0;
	}

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

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

	.u-container {
		padding-left: var(--sp-md);
		padding-right: var(--sp-md);
	}
}


/* ============================================
   Smartphone（〜767px）
   ============================================ */
@media (max-width: 767px) {
	:root {
		--fs-3xl: 1.75rem;
		--fs-2xl: 1.5rem;
		--fs-xl: 1.25rem;
		--fs-lg: 1.125rem;
		--fs-md: 1rem;
		--lh-loose: 1.9;
		--lh-normal: 1.75;
		--lh-tight: 1.45;
		--sp-3xl: 56px;
		--sp-2xl: 48px;
		--sp-xl: 32px;
		--sp-lg: 24px;
	}

	body {
		letter-spacing: 0.03em;
	}

	section {
		padding: 40px 0;
	}

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

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

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

	.p-section-heading {
		font-size: var(--fs-xl);
	}

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

	.c-btn {
		width: 100%;
		max-width: 320px;
		padding: var(--sp-xs) var(--sp-sm);
		font-size: var(--fs-base);
	}

	.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;
	}
}


/* ============================================
   小型スマホ（〜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;
	}
}

/* =============================================
   共通：テキストページ見出し
   ============================================= */

.c-text-page-heading {
	margin-top: var(--sp-lg);
}

.cf-turnstile {
    display: none !important;
}