@charset "UTF-8";

/* ============================================
   デザイントークン
   色・余白・書体をここに集約し、各CSSはこの値だけを見る。
   ネイビーはロゴ画像からの実測値。
   ============================================ */
:root {
  /* 色 */
  --color-base: #1c1c1c;
  --color-bg: #e3e3e3;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #cfcfcf;
  --color-gray-light: #ebebeb;
  --color-gray-dark: #494949;
  --color-gray-deepest: #242424;
  --color-navy: #131f4c;
  --color-navy-light: #223464;
  /* 押してもらう場所の色。ロゴと同じ紺にして、無彩色のサイトに馴染ませる。
     暗い背景の上では沈むため、そこでは白ボタン（--color-cta-on-dark）へ切り替える */
  --color-cta: #131f4c;
  --color-cta-hover: #223464;
  --color-cta-on-dark: #ffffff;
  --color-cta-on-dark-hover: #e3e3e3;
  --color-mark-black: #1f1f1f;

  /* ブレークポイント（メディアクエリでは使えないが、JSから参照する） */
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1440px;
  --bp-xl: 1680px;

  /* z-index */
  --z-back: 0;
  --z-middle: 10;
  --z-front: 100;
  --z-navi: 400;
  --z-header: 500;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-transition: 2500;

  /* 行間 */
  --leading-tight: 1;
  --leading-snug: 1.15;
  --leading-normal: 1.35;
  --leading-relaxed: 1.5;
  --leading-base: 1.6;
  --leading-loose: 1.75;

  /* 字間 */
  --tracking-tight: 0.02em;
  --tracking-base: 0.04em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.32em;

  /* イージング（GSAPと同じカーブをCSSでも使う） */
  --ease-power2-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-power3-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-power4-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);

  /* 書体 */
  --font-family-en: 'Bebas Neue', sans-serif;
  --font-family-sub: 'Montserrat', sans-serif;
  --font-family-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;

  /* FVの高さ。top.js が --initial-vh を設定するまでのフォールバック */
  --initial-vh: 1vh;

  --border-radius: 1.6rem;
  --border-radius-full: 9999px;
}

/* ============================================
   リセット
   1rem = 10px にして、px指定をそのまま rem へ読み替えられるようにする
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

html {
  font-size: 62.5%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-base);
  font-family: var(--font-family-jp);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: var(--leading-base);
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

img, picture, video, svg {
  max-width: 100%;
  display: block;
}

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

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ============================================
   モーション低減の希望を尊重する
   OS側で動きを減らす設定をしている人には、動きを止めて見せる。
   Lenisの無効化は scroll.js 側で行う。
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   日本語の改行の整え方
   そのままだと、最後の行に「す。」だけが取り残されたり、
   単語の途中で折り返されたりする。とくに画面の狭いスマホで目立つ。

   auto-phrase … 文節の切れ目で折り返す（対応していない環境では無視される）
   pretty ……… 最後の行が極端に短くならないように配る
   balance …… 短い見出しの行の長さをそろえる
   ============================================ */
body {
  word-break: auto-phrase;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
.c-ttl-ja,
.p-fixed-hero-title,
.p-fixed-hero-lead,
.p-service-card-title,
.p-contact-cta-title,
.p-contact-cta-lead {
  text-wrap: balance;
}