/* _base.css */

/*
  ルートのフォントサイズを基準にremを設定
  デフォルトのブラウザフォントサイズが16pxの場合、
  html { font-size: 62.5%; } で 1rem = 10px となる。
  これにより、1.6rem = 16px など、rem値をpx値に変換しやすくなる。
*/
html {
  font-size: 62.5%; /* 1rem = 10px となるように設定 */
  box-sizing: border-box; /* _reset.css にも記述していますが、念のためここにも */
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}


/*
  ========================================
  CSS カスタムプロパティ (変数) の定義
  ========================================
*/
:root {
  --primary-color: #295A95; /* 主要なアクションボタン、リンクなど */
  --primary-dark-color: #002554; /* プライマリーカラーのホバー状態など */
  --secondary-color: #CFC1A3; /* 二次的なボタン、テキストなど */
  --accent-color: #28a745; /* 強調したい要素など */

  --text-color: #222; /* 主要なテキストの色 */
  --light-text-color: #666; /* 明るい背景上のテキストの色 */
  --white-text-color: #fff; /* ダークな背景上のテキストの色 */

  --background-color: #ffffff; /* ページの主要な背景色 */
  --light-background-color: #F6F7F7; /* フッターなど、明るい背景色 */
  --dark-background-color: #8E8F91; /* ヘッダーなど、ダークな背景色 */

  --border-color: #ccc; /* フォームの枠線など */
}


/* 基本的なタイポグラフィ */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: 1.6rem; /* 16px */
  color: var(--text-color); /* CSS変数を使用 */
  background-color: var(--background-color); /* CSS変数を使用 */
  line-height: 1.5; /* remは継承しないのでここにも指定 */
  font-family: sans-serif; /* _reset.css に記述していますが、念のためここにも */
}

h2 { font-size: clamp(2.3rem, 3.125vw, 3.6rem); /* 32px */ margin-top: 3.2rem; margin-bottom: 2.1rem; /* 21px */ }
h3 { font-size: clamp(1.7rem, 2.34vw, 2.4rem); /* 28px */ margin-top: 3.2rem; margin-bottom: 1.8rem; /* 18px */ }
h4 { font-size: 2.4rem; /* 24px */ margin-top: 4rem; margin-bottom: 1.5rem; /* 15px */ }
h5 { font-size: 2.0rem; /* 20px */ margin-top: 4rem; margin-bottom: 1.2rem; /* 12px */ }
h6 { font-size: 1.6rem; /* 16px */ margin-top: 4rem; margin-bottom: 0.9rem; /* 9px */ }

main > section > h2:first-child {
    margin-top: 0;
} 

small {
  font-size: 1.1rem; 
  color: var(--white-text-color); 
}

p {
  margin-top: 0;
  margin-bottom: 1.6rem; /* 16px */
}

/* 画像 */
img {
  width: 100%;
  height: auto;
}

/* コンテナ */
.container {
  max-width: 100%; /* 1100px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.6rem; /* 16px （remの基底に合わせて変更） */
  padding-right: 1.6rem; /* 16px */
}

/* フォーム要素のスタイル */
form {
    max-width: 800px;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  padding: 0.8rem; /* 8px */
  border: 0.1rem solid #ccc; /* 1px */
  border-radius: 0.4rem; /* 4px */
  width: 100%;
  margin-bottom: 1.6rem; /* 16px */
}

button, 
.button {
    display: flex;
    max-width: 53.3rem;
    padding: 1.7rem 2.4rem;
    background-color: #90874B;
    color: var(--white-text-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: min(4.266vw, 2.4rem);
    align-items: center;
    justify-content: center;
    transition: .3s ease-in-out;
}

button:hover,
.button:hover {
  background-color: var(--primary-color); /* CSS変数を使用 */
}
.button:hover a {
  text-decoration: none;
}

[class^='btn-']:hover, [class^='btn-']:active, [class^='btn-']:focus {
    background-color: #00A1B9;
    text-decoration: none;
}