/* ==================================
  base.css - 基本文字・レイアウト設定（reset.css前提）
================================== */

:root {
  /* ===基本カラー === */
  --color-base: #ffffff;    /* ===背景の基本（白） === */
  --color-text:#000000;     /* ===文字の基本（黒） === */
  --color-border:#000000;   /* ===ボーダー（必要ならtextと分ける） === */
  --color-gray:#efefef;     /* ===サブ背景や区切りに使うグレー === */

  /* ===アクセントカラー === */
  --color-accent:#00c3f4;     /* ===ポイントに使う水色系アクセント === */

  /* ===グラデーション（サイドバーfixボタン専用） === */
  --gradient: linear-gradient (
    110deg, 
    rgba(247, 93, 139, 1), 
    rgba(254, 220, 64, 1)
  ); 
}

html {
  box-sizing: border-box;
  --webkit-text-size-adjust: 100%;  /* ===iOS自動文字拡大防止 === */
}

*, *::before, *::after {
  box-sizing: inherit;

}

body {
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(14px, 1.5vw, 18px); /*基本文字サイズ */
  letter-spacing: 0.05em;
}

html,body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

/* ===リンクの基本設定 === */
a {
  color: inherit; /* ===親要素の色を継承 === */
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ===画像・メディア === */
img,video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==================================
  Typography（clamp対応）
================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

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

h1 {
    font-size: clamp(28px,4vw,48px);
    letter-spacing: clamp(0.05em,0.1vw,0.1em);
}

h2 {
    font-size: clamp(22px,3vw,36px);
    letter-spacing: clamp(0.05em,0.1vw,0.1em);
}

h3 {
    font-size: clamp(18px,2.5vw,24px);
}

h3 {
    font-size: clamp(16px,2vw,18px);
}

p, li {
    font-size: clamp(14px,1.6vw,18px);
    line-height: 1.8;
}

small {
    font-size: clamp(12px,1.2vw,14px);
    letter-spacing: 0.02em;
}

strong {
    font-weight: 700;
}

/* ーーー　フォーム要素　ーーー　*/
button,input,select,textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

/* ==================================
  Utility
================================== */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-left: 15px;
    margin-right: 15px;
}