@charset "UTF-8";

/* =====================================================
   ナトカリバランス行動チェック
   - Figmaカンプ準拠（KGCO_PENCIL-665）
   - モバイルファースト / PC max-width 480px / 背景全幅リピート
   - DOM契約は維持（displaySwitch.js + natokari.js）
===================================================== */

@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap");

/* -----------------------------
   デザイントークン（Figma抽出）
----------------------------- */
:root {
	--content-max: 480px;

	/* カラー */
	--color-bg-base:     #f5efdf;            /* ベージュ紙背景の代替（実際は bg_paper.png 使用） */
	--color-text:        #546857;            /* 本文オリーブ緑 */
	--color-text-brown:  #835f3f;            /* ブラウン（タイトル "あなたの" "行動チェック"） */
	--color-green-brand: #29a13b;            /* ブランド緑 */
	--color-green-deep:  #009333;            /* 深緑（"ナトカリバランス" 引用） */
	--color-orange-nat:  #ea5532;            /* ナト強調（塩分／オレンジ赤） */
	--color-red-cta:     #e61112;            /* CTA / 戻るのテキスト */
	--color-nat-bar:     #fbd5cf;            /* ナトパートバー背景（薄サーモン） */
	--color-kal-bar:     #dcecbe;            /* カリパートバー背景（薄緑） */
	--color-note:        #546857;            /* 注釈 */

	/* タイポ */
	--font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Hiragino Sans", "YuGothic", sans-serif;

	/* レイアウト */
	--bar-height: 5px;                       /* 上部虹バー（実機表示） */

	/* 虹色 8段（フォールバック用、PNGが優先） */
	--rainbow: linear-gradient(to right,
		#7a3fb8 0%, #7a3fb8 12.5%,
		#3f73c4 12.5%, #3f73c4 25%,
		#4aa7c4 25%, #4aa7c4 37.5%,
		#7ac74f 37.5%, #7ac74f 50%,
		#f7d84b 50%, #f7d84b 62.5%,
		#f39c2f 62.5%, #f39c2f 75%,
		#d7384a 75%, #d7384a 87.5%,
		#c73f90 87.5%, #c73f90 100%
	);
}


/* -----------------------------
   リセット
----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

button {
	font-family: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	line-height: inherit;
	-webkit-appearance: none;
	appearance: none;

	&::-moz-focus-inner { border: 0; padding: 0; }
}


/* -----------------------------
   ベース：背景は body 全幅にリピート
   ※ 共通CSS（/common/css/parts_brand.css）が
     `@media (min-width:641px) { body { min-width: 1280px; } }` を当てるため、
     当ページでは無効化（モバイルファースト + max-width 480px のレイアウトを優先）
----------------------------- */
body {
	font-family: var(--font-family);
	color: var(--color-text);
	background-color: #f3ecd8;
	background-image: url("../img/bg_paper.png");
	background-repeat: repeat;
	background-size: 750px auto;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	font-weight: 500;
	min-width: 0;
}


/* -----------------------------
   displaySwitch.js 基盤
----------------------------- */
.js-display_switch--display {
	display: none;
	opacity: 0;
	height: 0;
}

/* 遷移中のクリック抑止 */
body.is-transitioning .c-btn,
body.is-transitioning .c-btn-back {
	pointer-events: none;
}


/* -----------------------------
   全画面共通の上部虹バー（PNG）
----------------------------- */
.p-natokari__bar {
	width: 100%;
	height: var(--bar-height);
	background-image: url("../img/bar_rainbow.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
}


/* -----------------------------
   全体レイアウト
----------------------------- */
.p-natokari {
	min-height: calc(100vh - var(--bar-height));
	display: flex;
	flex-direction: column;
}
.p-natokari__inner {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0;
	background-image: url("../img/bg_paper.png");
	background-repeat: repeat;
	background-size: 480px auto;
	/* スティッキーフッタ：コンテンツ高さが画面より低い時に footer を底に張り付かせるため
	   inner / load_after を縦flex化して footer に margin-top:auto を効かせる */
	flex: 1;
	display: flex;
	flex-direction: column;
}
#js-display_switch__load_after {
	flex: 1;
	display: flex;
	flex-direction: column;
}


/* -----------------------------
   共通：固定注釈
----------------------------- */
.p-natokari__note {
	font-size: 12px;
	color: var(--color-note);
	line-height: 1.6;
	margin: 16px 0;
	text-align: center;
	font-weight: 500;
	letter-spacing: 0.02em;
}


/* -----------------------------
   共通：パートバー（ナト/カリ）
   アイコン＋ラベルを中央寄せでひと塊に表示
----------------------------- */
.p-natokari__partbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	margin: 0 0 24px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-align: center;
}
.p-natokari__partbar_icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}
.p-natokari__partbar_label {
	flex: 0 0 auto;
}

.p-natokari__partbar--nat {
	background: var(--color-nat-bar);
	color: var(--color-orange-nat);
}
.p-natokari__partbar--kal {
	background: var(--color-kal-bar);
	color: var(--color-green-brand);
}


/* -----------------------------
   共通：フッタ（白背景は画面幅100%、コンテンツは max-width 480px センタリング）
   `.p-natokari` の flex column 内で `.p-natokari__inner` の flex:1 が
   残りスペースを吸収するため、コンテンツが短い時はフッタが底に張り付く
----------------------------- */
.p-natokari__footer {
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.p-natokari__footer_inner {
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.p-natokari__footer_logo {
	width: 88px;
	height: auto;
	flex-shrink: 0;
}
.p-natokari__footer_copy {
	font-size: 9px;
	color: #888;
	line-height: 1.4;
}


/* =====================================================
   スタート画面
===================================================== */
.p-natokari__panel--start {
	padding: 0 0 32px;
	text-align: center;
	position: relative;
}

.p-natokari__start {
	position: relative;
}

/* FVヘッダ画像（野菜・果物のイラスト）
   bg画像は 750×562（2x）。aspect-ratio で要素を画像と同比に固定し、
   padding-top を 24%（=Figmaの 90/375）にすることで「あなたの」が
   FV上端から 32% の位置に来る（Figma node 7:65 準拠）。 */
.p-natokari__start_title {
	margin: 0;
	padding: 24% 16px 0;
	line-height: 1.3;
	color: var(--color-text-brown);
	background-image: url("../img/fv_header.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
	aspect-ratio: 750 / 562;
	position: relative;
	text-align: center;
}
.p-natokari__start_title_sub,
.p-natokari__start_title_sub2 {
	display: block;
	font-size: 32px;
	font-weight: 700;
	color: var(--color-text-brown);
	letter-spacing: 0.03em;
	line-height: 0.875;
	position: relative;
	z-index: 2;
}
.p-natokari__start_title_main {
	display: block;
	font-size: 52px;
	font-weight: 700;
	color: var(--color-green-brand);
	margin: 9px 0 12px;
	letter-spacing: 0.04em;
	line-height: 1;
	position: relative;
	z-index: 2;
}

.p-natokari__start_lead {
	font-size: 15px;
	margin: 24px 16px 20px;
	line-height: 2;
	font-weight: 700;
	color: var(--color-text);

	& .is-nat { color: var(--color-orange-nat); }
	& .is-kal { color: var(--color-green-brand); }
	& .is-emphasis { color: var(--color-green-deep); }
}

/* TOP中央：減/増のビジュアル（塩分↓減 / 野菜↑増）
   Figma node 7:68 を 2x PNG で書き出した1枚画像（start_balance.png）を使用 */
.p-natokari__start_balance {
	margin: 8px 0 28px;
	padding: 0 16px;
	text-align: center;
}
.p-natokari__start_balance_img {
	display: inline-block;
	width: 100%;
	max-width: 216px;
	height: auto;
}


.p-natokari__start_cta {
	margin: 8px 0 28px;
}


/* =====================================================
   ボタン共通
===================================================== */
.c-btn {
	display: inline-block;
	text-align: center;
	font-family: var(--font-family);
	font-weight: 700;
	border-radius: 999px;
	background: #fff;
	color: var(--color-red-cta);
	transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
	cursor: pointer;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

/* スタートボタン：虹ボーダー＋赤テキスト */
.c-btn--start {
	width: 280px;
	max-width: 90%;
	padding: 16px 32px 16px 16px;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-red-cta);
	background:
		linear-gradient(#fff, #fff) padding-box,
		var(--rainbow) border-box;
	border: 4px solid transparent;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
	position: relative;

	&::after {
		content: "›";
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--color-red-cta);
		font-size: 22px;
		font-weight: 700;
	}

	&:active,
	&.is-pressed {
		transform: translateY(2px);
		box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	}
}

/* 選択ボタン（はい / いいえ） */
.c-btn--choice {
	width: 280px;
	max-width: 90%;
	padding: 16px;
	font-size: 18px;
	font-weight: 700;
	display: block;
	margin: 0 auto 12px;
	color: var(--color-red-cta);
	background: #fff;
	border: 4px solid var(--color-red-cta);
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);

	&:hover { background: #fff5f5; }

	&:active,
	&.is-pressed {
		transform: translateY(2px);
		box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
	}
}

/* 戻るボタン：虹ボーダーピル */
.c-btn-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 88px;
	height: 36px;
	padding: 0 14px;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-red-cta);
	background:
		linear-gradient(#fff, #fff) padding-box,
		var(--rainbow) border-box;
	border: 3px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;

	/* HTMLで "<" 文字を使ってるので、左に "戻る" を追加表示 */
	&::after {
		content: "戻る";
		font-weight: 700;
	}

	&:active {
		transform: translateY(2px);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	}
}


/* =====================================================
   設問画面（Q1〜Q10 共通テンプレート）
===================================================== */
.p-natokari__panel--question {
	padding: 0;
}

/* ヘッダ：左にブランド名、右に「あと N問」 */
.p-natokari__qheader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px 12px;
	background: #fff;
	min-height: 48px;
}
/* qheader 左側ラベル: ナト/カリ共通で「ナトカリバランス 行動チェック」を表示 */
.p-natokari__qheader_title {
	margin: 0;
	font-size: 11px;
	color: var(--color-text-brown);
	font-weight: 700;
	line-height: 1.1;

	& .p-natokari__qheader_brand {
		display: inline;
		font-size: 19px;
		color: var(--color-green-brand);
		margin-right: 4px;
		letter-spacing: 0.02em;
	}
}

.p-natokari__qheader_remain {
	margin: 0;
	font-size: 13px;
	color: var(--color-text);
	font-weight: 700;
	display: flex;
	align-items: baseline;
	gap: 2px;

	& .js-natokari_remain {
		font-size: 23px;
		font-weight: 700;
		color: var(--color-text);
		padding: 0 2px;
		line-height: 1;
	}
}

/* 設問のbody */
.p-natokari__qbody {
	padding: 12px 20px 24px;
	text-align: center;
}

/* 設問テキスト */
.p-natokari__qtext {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--color-text);
}

/* Q.N リボン：画像（assets/img/qN_num.png 492×194 = WD 2x の 2x）で表示
   WD=750px が既に Retina なので CSS 1x は ファイル幅÷4 = 123px */
.p-natokari__qnum {
	display: block;
	width: 100%;
	max-width: 123px;
	height: auto;
	margin: 0 auto 16px;
}


/* 設問画像（assets/img/q1_img.png〜q10_img.png 1076×464 = WD 2x の 2x）
   白背景・角丸は画像側に焼き込み済みのためCSS指定なし。
   max-width は ファイル幅÷4 = 269px (CSS 1x) */
.p-natokari__qimg {
	margin: 0 0 24px;
	text-align: center;

	& img {
		display: inline-block;
		width: 100%;
		max-width: 269px;
		height: auto;
	}
}

.p-natokari__qchoices {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16px;
}

.p-natokari__qback {
	margin: 16px 0 0;
	text-align: center;
}


/* =====================================================
   結果画面
===================================================== */
.p-natokari__panel--result {
	padding: 0 0 32px;
	background-color: var(--color-bg-base);
	/* 結果ページ上部はサイドベジタブル装飾（bg_result.png 750×1205 in 2x）を重ね、
	   下層は紙テクスチャを全面リピート */
	background-image: url("../img/bg_result.png"), url("../img/bg_paper.png");
	background-repeat: no-repeat, repeat;
	background-position: top center, top center;
	background-size: 100% auto, 480px auto;
	position: relative;
}

.p-natokari__result {
	padding: 24px 20px 0;
	position: relative;
}

.p-natokari__result_lead {
	text-align: center;
	font-size: 16px;
	line-height: 1.9;
	margin: 0 0 18px;
	color: var(--color-text);
	font-weight: 700;

	& .is-nat { color: var(--color-orange-nat); }
	& .is-kal { color: var(--color-green-brand); }
	& .is-emphasis { color: var(--color-green-deep); }
}

/* アンバーオレンジの丸バッジ：1枚画像で表示
   Figma node 10:258 内 frame 7:242（792×792 = WD 2x の 2x → CSS 1x は ファイル幅÷4 = 198px） */
.p-natokari__result_badge {
	margin: 16px 0 24px;
	text-align: center;
}
.p-natokari__result_badge_img {
	display: inline-block;
	width: 100%;
	max-width: 198px;
	height: auto;
}

.p-natokari__result_cta {
	margin: 28px 0 16px;
	text-align: center;
}

.p-natokari__rblock {
	margin: 0 0 24px;
}

/* 結果ブロック内のパートバー：パネル全幅・色帯（角丸なし） */
.p-natokari__rblock .p-natokari__partbar {
	margin: 0 -20px 16px;
	border-radius: 0;
	padding: 12px 20px;
	font-size: 16px;
	justify-content: center;
}

.p-natokari__rbody {
	background: #fff;
	border-radius: 10px;
	padding: 18px 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.p-natokari__rheading {
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
	margin: 0 0 14px;
	color: var(--color-text);
}

.p-natokari__rtext {
	font-size: 16px;
	line-height: 1.9;
	text-align: left;
	margin: 0 0 14px;
	color: var(--color-text);
	font-weight: 500;
}

.p-natokari__rimg {
	margin: 0 0 12px;
	display: flex;
	justify-content: center;

	& img {
		width: 100%;
		height: auto;
		margin: 0 auto;
		border: none;
	}
}

.p-natokari__rnote {
	font-size: 12px;
	color: var(--color-note);
	line-height: 1.7;
	margin: 0;
	font-weight: 500;
}

.p-natokari__rblock--nat .p-natokari__rheading {
	color: var(--color-orange-nat);
}
.p-natokari__rblock--kal .p-natokari__rheading {
	color: var(--color-green-brand);
}


/* =====================================================
   PCサイズ調整：max-width 480px のセンタリング演出
===================================================== */
@media (min-width: 481px) {
	body {
		background-attachment: fixed;
	}

	/* コンテナ幅 480px 時、Figma設計 375px 比 1.28倍でテキストもスケール */
	.p-natokari__start_title_sub,
	.p-natokari__start_title_sub2 { font-size: 41px; }
	.p-natokari__start_title_main {
		font-size: 67px;
		margin: 12px 0 15px;
	}
}


/* =====================================================
   小型SP（〜360px）補正
===================================================== */
@media (max-width: 360px) {
	.p-natokari__start_title_main { font-size: 44px; }
	.p-natokari__start_title_sub  { font-size: 26px; }
	.p-natokari__start_title_sub2 { font-size: 28px; }
	.c-btn--start { width: 240px; font-size: 14px; }
	.c-btn--choice { width: 240px; font-size: 16px; }
	.p-natokari__qtext { font-size: 16px; }
}