/* ============================================================
   base.css — デザイントークン(:root)・リセット・共通要素(html/body/タイポ/skip-link)
   ※ タブレット/流体/1440超えなどの横断調整は overrides.css（最後に読込）にある
   ============================================================ */

@charset "UTF-8";
/* ============================================================
   Kotake Denki — design tokens (docs/design-tokens.md が正)
   ============================================================ */
:root {
--header-h: 100px;
/* Color */
--color-yellow: #FFF000;
--color-yellow-dusty: #EEE306;
--color-navy: #1A2B51;
--color-gray-900: #444444;
--color-gray-600: #808080;
--color-gray-400: #D9D9D9;
--color-gray-200: #F0F0F0;
--color-font-white: #FFFFFF;
--color-font-black: #1A1B1A;
--color-bg-gray: #F8F8F9;
--color-bg-white: #FEFEFE;
--color-bg-navy-right: #485574;
--color-bg-gray-100: #F9F9F9;

/* Font */
--font-ja: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
--font-en: 'Figtree', sans-serif;

/* Layout (docs/design-tokens.md 確定値) */
--container-base: 1280px;   /* PC 左右80px */
--container-narrow: 1160px; /* PC 左右140px */
--container-sp: 343px;      /* SP 左右16px */

/* Motion (docs/spec/hover-animation.html 確定値) */
--ease-slide: cubic-bezier(.4, 0, .2, 1);
--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- reset (最小限) ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[hidden] { display: none !important; }

/* display指定持ち要素でもhidden属性を有効に */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

}

/* アンカー着地位置に少し余白 */
[id] { scroll-margin-top: 24px; }

/* スキップリンク（フォーカス時のみ表示） */
.skip-link {
position: absolute;
left: 8px;
top: -48px;
z-index: 300;
padding: 10px 16px;
border-radius: 6px;
background: var(--color-navy);
color: #fff;
font-size: 14px;
transition: top 0.2s ease;
}

.skip-link:focus-visible { top: 8px; outline: 2px solid var(--color-yellow-dusty); outline-offset: 2px; }

body {
margin: 0;
font-family: var(--font-ja);
font-size: 16px;
line-height: 1.6;
color: var(--color-font-black);
background: var(--color-bg-white);
-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p, figure { margin: 0; }

/* ---- hover はポインタ環境のみ ---- */

@media (max-width: 767px) {
	:root { --header-h: 60px; }

}

/* タブレット中間幅: 2列化とラベル文字の追従縮小（リキッド） */

.sp-br { display: none; }

/* SPのみ有効な改行 */

@media (max-width: 767px) {
	.sp-br { display: inline; }

}

/* PCではカード群(1160)より左右60pxずつ広い1280幅いっぱい（Figma 515:24651） */

/* ---- ABOUT SP ---- */