@charset "UTF-8";

/* =========================================================
   base.css — デザイントークンのみ
   色・余白・フォント・z-index 等。コンポーネント固有の
   スタイルは component.css / layout.css 等に書く。
   サイトごとの上書きは子テーマ style.css の :root → docs/CUSTOMIZATION.md
========================================================= */

/* ========================================
   Root Variables
========================================= */

:root {

  /* =========================
     Container Size
  ========================= */

	--container-width: 1440px;/*サイトの最大幅*/
  --container-width-narrow: 1200px;/*サイトの最大幅（狭め）*/
  --container-width-prose: 52rem;/*記事本文（約832px）*/

	--header-height: 90px;/*ヘッダーの高さ*/
	--header-height-compact: 64px;/*スクロール時のヘッダー高さ*/
  --breadcrumbs-height: 2rem;/*パンくずリストの高さ*/

  --front-hero-height: 40vh;/*トップページヒーローエリアの高さ*/

  /* =========================
     Color
  ========================= */

  /* Background */
  --color-bg-base: #ffffff;/*背景色*/

  /* Brand */
  --color-main: #1d1c52;/*基本色*/
  --color-main-soft: #eef1ff;/*基本色を薄くしたもの（地色用）*/
  --color-sub: #162da1;/*補助色*/
 
  /* Accent */
  --color-accent: #e83ed6;/*強調色*/
  --color-accent-hover: #c936b8;/*強調色（ホバー）*/

  /* Text */
  --color-text: #1b1b1b;/*文字色*/
  --color-text-inverse: #ffffff;/*反転文字色*/

  /*border*/
  --color-border: rgba(11, 30, 138, 0.14);

  /* Button（塗りボタン共通） */
  --color-button-bg: var(--color-sub);
  --color-button-text: var(--color-text-inverse);
  --color-button-hover-bg: var(--color-sub);
  --color-button-hover-text: var(--color-accent);

  /* 互換用（旧 CTA 変数） */
  --color-cta-bg: var(--color-sub);
  --color-cta-text: var(--color-text-inverse);
  --color-cta-button-bg: var(--color-button-bg);
  --color-cta-button-text: var(--color-button-text);
  --color-cta-button-hover-bg: var(--color-button-hover-bg);

  /* Front news filter */
  --color-front-news-filter-bg: rgba(255, 255, 255, 0.72);
  --color-front-news-filter-border: rgba(11, 30, 138, 0.2);
  --color-front-news-filter-text: var(--color-main);
  --color-front-news-filter-text-hover: var(--color-accent);
  --color-front-news-filter-border-hover: rgba(232, 62, 214, 0.35);
  --color-front-news-filter-active-bg: var(--color-main);
  --color-front-news-filter-active-border: var(--color-main);
  --color-front-news-filter-active-text: var(--color-text-inverse);

  /* Footer */
  --color-footer-bg: var(--color-main);
  --color-footer-surface: #0a1048;
  --color-footer-text: var(--color-text-inverse);
  --color-footer-text-muted: rgba(255, 255, 255, 0.78);
  --color-footer-border: rgba(238, 241, 255, 0.22);
  --color-footer-link: var(--color-footer-text);
  --color-footer-link-hover: var(--color-accent);
  --color-footer-heading: var(--color-footer-text);
  --color-footer-button-shadow-hover: rgba(0, 0, 0, 0.22);

  /* Sidebar (footer-menu structure, lighter surface) */
  --color-sidebar-surface: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(238, 241, 255, 0.92) 100%
  );
  --color-sidebar-border: rgba(11, 30, 138, 0.1);
  --color-sidebar-heading: var(--color-main);
  --color-sidebar-link: rgba(29, 28, 82, 0.78);
  --color-sidebar-link-hover: var(--color-sub);
  --color-sidebar-divider: rgba(11, 30, 138, 0.08);
  --color-sidebar-current: var(--color-sub);
  --color-sidebar-select-bg: rgba(255, 255, 255, 0.9);
  --color-sidebar-select-border: rgba(11, 30, 138, 0.16);
  --color-sidebar-select-text: var(--color-main);
  --color-sidebar-select-label: rgba(29, 28, 82, 0.62);
  --color-sidebar-select-border-hover: rgba(22, 45, 161, 0.28);
  --color-sidebar-select-border-focus: rgba(232, 62, 214, 0.42);
  --color-sidebar-select-icon: var(--color-sub);

  /* =========================
     Font
  ========================= */

  /* 書体指定
     - 欧文: Nunito
     - 和文: M PLUS Rounded 1c（Nunito に近い丸ゴシック）
  */
  --font-family-base: "Nunito", "M PLUS Rounded 1c", sans-serif;
  --font-family-display: "Nunito", "M PLUS Rounded 1c", sans-serif;

  /* 文字サイズ（rem / fluid）
     base 16px 基準・major third 系スケール
  */
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --font-size-s:    clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --font-size-l:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --font-size-xl:   clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
  --font-size-xxl:  clamp(1.75rem, 1.45rem + 1.25vw, 2.25rem);

  /* 文字の太さ */
  --font-weight-base: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

  /* 行間 */
  --line-height-base: 1.6;/*基本の行間*/
  --line-height-tight: 1.3;/*行間狭め*/
  --line-height-relaxed: 1.8;/*行間広め*/

  /* =========================
     Othes
  ========================= */

  /* space */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 40px;
  --space-xl: 64px;

  /* radius */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-pill: 9999px;

  /* shadow */
  --shadow-s: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-m: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* transition */
  --transition-base: 0.3s ease;

  /* =========================
     z-index
  ========================= */

  --z-index-header: 100;
  --z-index-header-dropdown: calc(var(--z-index-header) + 10);
	--z-index-goto-top: 200;
	--z-index-drawer-overlay: 800;
	--z-index-drawer: 900;
	--z-index-drawer-toggle: calc(var(--z-index-drawer) + 10);
	--z-index-modal: 1000;

}

/* ========================================
   Base
======================================== */

html {
  font-size: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-base);
  -webkit-font-smoothing: antialiased;
}

strong,
.en {
  font-family: "Nunito", "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--breadcrumbs-height) + var(--space-s));
}

/* ========================================
   Link
======================================== */

a {
  color: var(--color-main);
  text-decoration: none;
  transition: var(--transition-base);
  cursor: pointer !important;
}

a:hover {
  color: var(--color-accent);
}

/* ========================================
   Text
======================================== */

p {
  font-size: var(--font-size-base);
  margin-bottom: 1rem;
}

/* ========================================
   Heading
======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  /* font-weight: var(--font-weight-bold); */
  line-height: 1.4;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5,
h6 {
  font-size: 1rem;
}

/* ========================================
   List
======================================== */
ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/* ========================================
   Image
======================================== */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ========================================
   Table
======================================== */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: var(--space-s);
  border: 1px solid var(--color-main-soft);
  text-align: left;
}

/* ========================================
   Form
======================================== */
input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 767px) {
  html {
    font-size: 100%;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}