@charset "UTF-8";

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

:root {

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

	--container-width: 1440px;/*サイトの最大幅*/
  --container-width-narrow: 1200px;/*サイトの最大幅（狭め）*/

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

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

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

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

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

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

  /* CTA */
  --color-cta-bg: var(--color-main);
  --color-cta-text: var(--color-text-inverse);
  --color-cta-button-bg: var(--color-accent);
  --color-cta-button-text: var(--color-text-inverse);
  --color-cta-button-hover-bg: var(--color-accent-hover);

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

  /* 書体指定 */
  --font-family-base: "Nunito", "Noto Sans JP", sans-serif;

  /* 文字サイズ */
	--font-size-size-base:   clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);

  --font-size-size-xs: clamp(0.7rem, 0.65rem + 0.15vw, 0.8rem);
  --font-size-s:  clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  
	--font-size-l:     clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
	--font-size-xl:     clamp(1.5rem, 1.3rem + 1.5vw, 2.2rem);
	--font-size-xxl:    clamp(1.8rem, 1.5rem + 2vw, 2.8rem);

  /* 文字の太さ */
  --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;
}

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

strong,
.en {
  font-family: "Nunito", 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-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;
  }
}