/* 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: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    font-size: clamp(14px,1.6vw,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;
    pointer-events: auto;
}

/* ---typography (clamp対応)---　*/

h1, h2, h3, h4, h5, h6 {
  font-family: "M PLUS Rounded 1c", 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.03em, 0.1vw, 0.08em);
}
h2 {
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: clamp(0.03em, 0.1vw, 0.08em);
}
h3 {
  font-size: clamp(18px, 2.5vw, 28px);
}
h4 {
  font-size: clamp(16px, 2vw, 24px);
}

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;
}

/* ---ユーティリティー----*/
container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-left: 15px;
  margin-right: 15px;
}