@charset "UTF-8";
/* ==========================================================================
   01-tokens.css (v2 - reference design準拠)
   navy + cream + 多色グラデの組み合わせ。
   参考デザインの「クリーンな地方移住メディア」感に合わせて再設計。
   ========================================================================== */

:root {
	/* --- Brand Navy / Blue --------------------------------------------- */
	--mishima-color-navy:        #1B2940;
	--mishima-color-navy-deep:   #14213D;
	--mishima-color-blue:        #2A4960;
	--mishima-color-blue-mid:    #5C7A92;
	--mishima-color-blue-pale:   #E8EEF3;

	/* --- Neutral ------------------------------------------------------- */
	--mishima-color-cream:       #FAF7F1;
	--mishima-color-bg:          #FFFFFF;
	--mishima-color-bg-alt:      #F5F1EB;
	--mishima-color-border:      #E5E0D5;
	--mishima-color-border-thin: #F0EBE0;

	/* --- Text ---------------------------------------------------------- */
	--mishima-color-text:        #1B2333;
	--mishima-color-text-sub:    #5A6478;
	--mishima-color-text-mute:   #8A93A4;
	--mishima-color-text-invert: #FFFFFF;

	/* --- Category Gradient Cards (slug別) ------------------------------ */
	--mishima-grad-kurashi: linear-gradient(135deg, #5C7A92 0%, #2A4960 100%);
	--mishima-grad-shigoto: linear-gradient(135deg, #2A4960 0%, #1B2940 100%);
	--mishima-grad-gourmet: linear-gradient(135deg, #B16A3A 0%, #6B3A1F 100%);
	--mishima-grad-sumai:   linear-gradient(135deg, #4A6B7A 0%, #2A4555 100%);
	--mishima-grad-event:   linear-gradient(135deg, #C58D55 0%, #8B5A2B 100%);
	--mishima-grad-news:    linear-gradient(135deg, #6B7B8C 0%, #3A4A5C 100%);

	/* --- CTA / Button -------------------------------------------------- */
	--mishima-grad-cta:     linear-gradient(135deg, #2A4960 0%, #1B2940 100%);
	--mishima-grad-cta-rev: linear-gradient(135deg, #1B2940 0%, #2A4960 100%);

	/* --- Palette tokens (新スペック準拠) -------------------------------- */
	--pal-ink:          #1A2A3A;   /* タイトル等の本文色（青ベースのほぼ黒） */
	--pal-ink-2:        #4D6172;   /* リード文・サブ色（青みのあるミディアムグレー） */
	--pal-ink-3:        #7A8A9B;   /* EN 補助ラベル等の薄めグレー */
	--pal-accent:       #2566A1;   /* hover時の濃いブルー（icon塗潰し背景）*/
	--pal-accent-2:     #1F5A8F;   /* ハイライト「37分」「icon stroke」のディープブルー */
	--pal-accent-soft:  #E8F0F5;   /* icon背景の淡いアクセント面 */
	--pal-surface:      #FAF7F2;   /* chip / カード背景のオフホワイト */
	--pal-line:         #E5DFD5;   /* chip境界線 */

	/* --- Typography ---------------------------------------------------- */
	--mishima-font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "Meiryo", sans-serif;
	--mishima-font-en: "Plus Jakarta Sans", "Inter", "Zen Kaku Gothic New", sans-serif;

	--mishima-fz-2xs:  0.6875rem;
	--mishima-fz-xs:   0.75rem;
	--mishima-fz-s:    0.875rem;
	--mishima-fz-base: 1rem;
	--mishima-fz-m:    1.125rem;
	--mishima-fz-l:    1.375rem;
	--mishima-fz-xl:   1.75rem;
	--mishima-fz-2xl:  2.25rem;
	--mishima-fz-3xl:  3rem;
	--mishima-fz-hero: clamp(2rem, 5vw, 3.5rem);
	--mishima-fz-stat: clamp(3rem, 8vw, 5.5rem);

	--mishima-lh-tight: 1.25;
	--mishima-lh-base:  1.7;
	--mishima-lh-loose: 1.9;
	--mishima-ls-base:  0.02em;
	--mishima-ls-wide:  0.12em;

	/* --- Spacing ------------------------------------------------------- */
	--mishima-space-2xs: 0.25rem;
	--mishima-space-xs:  0.5rem;
	--mishima-space-s:   1rem;
	--mishima-space-m:   2rem;
	--mishima-space-l:   4rem;
	--mishima-space-xl:  6rem;
	--mishima-space-2xl: 8rem;

	/* --- Radius -------------------------------------------------------- */
	--mishima-radius-s:    6px;
	--mishima-radius-m:    12px;
	--mishima-radius-l:    20px;
	--mishima-radius-xl:   28px;
	--mishima-radius-pill: 999px;

	/* --- Shadow -------------------------------------------------------- */
	--mishima-shadow-s: 0 2px 8px   rgba(27, 41, 64, 0.06);
	--mishima-shadow-m: 0 6px 20px  rgba(27, 41, 64, 0.10);
	--mishima-shadow-l: 0 12px 40px rgba(27, 41, 64, 0.15);

	/* --- Layout -------------------------------------------------------- */
	--mishima-container-max:     1280px;
	--mishima-container-narrow:  980px;
	--mishima-gutter:            clamp(1rem, 4vw, 2rem);
	--mishima-section-py:        clamp(4rem, 8vw, 7rem);

	/* --- Motion -------------------------------------------------------- */
	--mishima-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--mishima-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--mishima-dur-fast: 160ms;
	--mishima-dur-base: 280ms;
	--mishima-dur-slow: 480ms;
}

/* SWELL親テーマ変数の上書き（メイン色を新blueに） */
:root {
	--color_main:      var(--mishima-color-blue);
	--color_main_thin: var(--mishima-color-blue-pale);
	--color_main_dark: var(--mishima-color-navy);
	--color_link:      var(--mishima-color-blue);
	--color_text:      var(--mishima-color-text);
}

body {
	font-family: var(--mishima-font-jp);
	color: var(--mishima-color-text);
	background: var(--mishima-color-bg);
	line-height: var(--mishima-lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--mishima-color-blue); }

::selection {
	background: var(--mishima-color-blue-pale);
	color: var(--mishima-color-navy);
}

/* utility */
.u-font-en   { font-family: var(--mishima-font-en); letter-spacing: var(--mishima-ls-wide); }
.u-font-jp   { font-family: var(--mishima-font-jp); }
.u-uppercase { text-transform: uppercase; }