/**
 * CSS File: base.css
 * 2026-07-08 | Final checked
 */

/* ==========================================================================
   1. Root Variables & Reset
   ========================================================================== */
:root {
  --z_minus_1-back: -1;
  --z_0-base: 0;
  --z_1-up: 1;
  --z_10-content: 10;
  --z_20-content: 20;
  --z_30-content: 30;
  --z_50-ui: 50;
  --z_100-overlay: 100;
  --z_150-footer: 150;
  --z_200-header: 200;
  --z_900-modal: 900;
  --z_910-modal: 910;
  --z_920-modal: 920;
  --z_980-banner: 980;
  --z_990-tool: 990;
  --z_1000-loading: 1000;
  --z_9999-system: 9999;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. Base Components (Smartphone Vertical)
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

h1 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3;
}

h2 {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.4;
}

/* ==========================================================================
   3. Animations
   ========================================================================== */
[data-animation="fadeInUp"] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

[data-animation="fadeInUp"].is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   4. Media Queries
   ========================================================================== */

/* スマホ横向き */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* 必要に応じて、横画面時の微調整スタイルをここに記述 */
}

/* タブレット・PC */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .container {
    padding: 0 40px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}

/* 大型モニター */
@media screen and (min-width: 1024px) and (min-height: 501px) {
  .container {
    padding: 0 60px;
  }

  h1 {
    font-size: 2.5rem;
  }
}

/* ==========================================================
   外部リンクアイコン（テキストの矢印＋四角の枠）
   ========================================================== */

/* 1. 矢印を表示する大元の設定（中身は空文字にしてCSS側で制御） */
.c-icon-external::before {
  content: "↗"; /* 最初の綺麗な斜め矢印をそのまま使います */
  font-size: 0.7rem; /* 四角の枠の中に綺麗に収まるサイズ */
  color: currentColor; /* 文字色に連動 */
  margin-left: 6px; /* SERVICE等の文字とのスキマ */

  /* インラインブロックにして四角い枠線をつけます */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 13px; /* 四角い枠の横幅 */
  height: 13px; /* 四角い枠の縦幅 */
  border: 1px solid currentColor; /* 四角い枠線（文字と同じ色） */
  border-radius: 2px; /* ほんの少しだけ角を丸く */

  vertical-align: middle; /* 文字の高さ中央に揃える */
  line-height: 1;

  /* 矢印の位置が枠内で少し下にズレる場合の微調整 */
  padding-bottom: 1px;
  box-sizing: border-box;
}