@charset "UTF-8";
/*
 * デザイントークン
 *
 * 色の3つは Figma のローカル変数（緑区メイングリーン / 緑区グリーン /
 * 緑区ディープグリーン）をそのまま写したもの。Figma 側が変わったらここだけ直す。
 * それ以外の値は Figma の実測から起こした。
 */

:root {
	/* --- Figma variables ---------------------------------------- */
	--midori-green: #2db479;        /* 緑区メイングリーン */
	--midori-green-light: #67b37e;  /* 緑区グリーン（フッター背景など） */
	--midori-green-deep: #0e682e;   /* 緑区ディープグリーン */

	/*
	 * --- Figma で使われている色のうち、変数になっていないもの -------
	 * ローカル変数は上の3色だけなので、実測した固定値をここに集約する。
	 */
	--midori-green-text: #2f7b3b;  /* 英字見出し・タブの文字 */
	--midori-bg-soft: #caeeab;     /* 帯の地色（bg_pickup ほか） */
	--midori-yellow: #fbe349;      /* 黄色いボタン */
	--midori-yellow-green: #e2e76e; /* 選択中のタブ */
	--midori-band-light: #f7f8ef;  /* グラデーションの明るい側 */
	--midori-bg-pale: #f0fcff;     /* 検索パネルのカード（Figma の「bgカラー」変数） */
	--thumb-bg: #e5f5ea;           /* 記事サムネイルの余白（現行・Figma の image 42 の左右の淡い緑） */

	/* --- 文字の大きさ ---------------------------------------------
	 * 画面幅で滑らかに変える。**375px で最小・1440px で最大**になるよう
	 * 傾きを決めてある（clamp の真ん中が vw の一次式）。
	 * 段（メディアクエリ）で切り替えると、境目で文字だけカクッと変わって
	 * 中間の幅がどこかちぐはぐになるため、こちらに寄せている。
	 *
	 * 新しく文字サイズが要るときも、生の px を書かずにここへ足す。
	 * ------------------------------------------------------------- */
	--fs-cat-en: clamp(17px, 4.038vw + 1.86px, 60px);       /* カテゴリカードの英字 */
	--fs-lead: clamp(17px, 0.6vw + 13.5px, 25px);        /* 「緑区をもっと知ろう」（Figma 2055:189 25px） */
	--fs-sec-en: clamp(13px, 1.127vw + 8.77px, 25px);       /* 見出しの英字 */
	--fs-news-label: clamp(13px, 0.657vw + 10.54px, 20px);  /* お知らせの日付 */
	--fs-news-title: clamp(15px, 0.469vw + 11px, 20px);   /* Figma 2026:273 20px */
	--fs-news-text: clamp(14px, 0.375vw + 10.8px, 18px);  /* モデルコースのカードの所要時間・説明（Figma 2026:214 18px）ほか */
	--fs-news-body: clamp(14px, 0.5vw + 10.4px, 20px);    /* お知らせの本文（Figma 2026:276 20px） */
	--fs-btn-lg: clamp(15px, 1.408vw + 9.72px, 30px);       /* 大きいボタン */
	--fs-btn-sm: clamp(14px, 0.376vw + 12.59px, 18px);      /* 枠線ボタン */
	--fs-footer: clamp(14px, 0.47vw + 11.24px, 18px);   /* 2026-09-30 PPTX p3「2段階下げて。せめて MENU と同程度」→ メニューパネルと同じ（以前は 25px） */
	--fs-copyright: clamp(14px, 0.376vw + 12.59px, 18px);
	--fs-menu: clamp(13px, 0.47vw + 11.24px, 18px);         /* メニューパネル（SP はドロワー幅に収める） */
	--fs-card-title: clamp(14px, 0.188vw + 13.3px, 16px);   /* カードのタイトル */
	--fs-card-date: clamp(13px, 0.094vw + 12.65px, 14px);
	--fs-tab: clamp(14px, 0.939vw + 10.48px, 24px);         /* ランキングのタブ */
	--fs-mv-cta: clamp(16px, 1.127vw + 11.77px, 28px);

	/* --- 下層ページ ------------------------------------------------ */
	--fs-hero-en: clamp(28px, 3.005vw + 16.73px, 60px);      /* ページヘッダーの英字 */
	--fs-hero-ja: clamp(16px, 0.845vw + 12.83px, 25px);      /* 同 日本語（緑の版） */
	--fs-hero-ja-lg: clamp(24px, 1.502vw + 18.37px, 40px);   /* 同 日本語（黄色の版は日本語が主役） */
	--fs-sec-title: clamp(20px, 0.939vw + 16.48px, 30px);    /* 「各地区紹介」など文字の見出し */
	--fs-breadcrumb: clamp(12px, 0.25vw + 11.2px, 16px);  /* Figma 16px */
	--fs-filter-label: clamp(15px, 0.469vw + 13.24px, 20px); /* 「タグで絞り込む」 */
	--fs-chip: clamp(12px, 0.282vw + 10.94px, 15px);         /* 絞り込みのチップ */
	--fs-tile-label: clamp(14px, 0.376vw + 12.59px, 18px);
	--fs-district-ja: clamp(20px, 0.939vw + 16.48px, 30px);
	--fs-district-en: clamp(12px, 0.282vw + 10.94px, 15px);
	--fs-body: clamp(15px, 0.188vw + 14.3px, 17px);          /* 本文 */
	--fs-intro-title: clamp(18px, 0.563vw + 15.89px, 24px);  /* 白い枠のカードの見出し */
	--fs-entry-title: clamp(22px, 1.315vw + 17.07px, 36px);  /* 記事タイトル */
	--fs-entry-h2: clamp(18px, 0.751vw + 15.18px, 26px);
	--fs-entry-h3: clamp(16px, 0.469vw + 14.24px, 21px);
	--fs-person-name: clamp(16px, 0.376vw + 14.59px, 20px);

	/* --- 派生色 --------------------------------------------------- */
	--color-text: #4b4b4b;
	--color-text-invert: #fff;
	--color-bg: #fff;
	--color-border: #d9d9d9;

	/* --- レイアウト ------------------------------------------------ */
	/* Figma のアートボードは 1920px、コンテンツ帯は 1300px */
	--layout-max: 1920px;
	--content-max: 1300px;
	--header-height: 100px;

	/* 本文の左右に最低限空ける量 */
	--gutter: 20px;

	/*
	 * ログイン中に出る WordPress の管理バーの高さ。公開サイトでは 0。
	 * 画面の高さを使う計算（ドロワーの高さなど）でこれを引かないと、
	 * ログイン中だけ下がはみ出す。
	 * WP は 783px 以上で 32px、782px 以下で 46px にする。
	 */
	--admin-bar: 0px;

	/*
	 * 本文の幅。画面が狭いときは左右に --gutter だけ残して縮む。
	 * 中央寄せは使う側で margin-inline: auto する。
	 */
	--content-width: min(100% - var(--gutter) * 2, var(--content-max));

	/* --- 余白の段階 ------------------------------------------------
	 * Figma の実測値は 19 / 23 / 33 / 46 / 59 / 71 / 78 / 89… と
	 * 中途半端に散らばっていたので、4px 刻みのこの段階に寄せてある。
	 * 新しく余白を足すときも、この中から選ぶこと。
	 * ここに無い値が要ると思ったら、たいていは既存のどれかで足りる。
	 * -------------------------------------------------------------- */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-sm: 16px;
	--space-md: 20px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 40px;
	--space-3xl: 48px;
	--space-4xl: 56px;
	--space-5xl: 60px;
	--space-6xl: 72px;
	--space-7xl: 80px;
	--space-8xl: 88px;
	--space-9xl: 140px;
	--space-10xl: 160px;

	/* --- タイポグラフィ -------------------------------------------- */
	--font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", Meiryo, sans-serif;

	/* --- その他 --------------------------------------------------- */
	--radius-card: 10px;
	--shadow-card: 0 2px 8px rgb(0 0 0 / 12%);

	/*
	 * 動きのカーブはサイト全体でこれ1つ。
	 * 速く動き出してゆっくり止まるので、同じ距離でも柔らかく見える。
	 * 跳ね返しが要る場所（ランキングのタブ）だけ motion.css で個別に指定する。
	 */
	--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

	/* 以前の名前。中身は --ease-soft と同じ */
	--ease-out: var(--ease-soft);
}

.admin-bar {
	--admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--admin-bar: 46px;
	}
}