@charset "utf-8";

/* .noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ysabeau-sc {
  font-family: "Ysabeau SC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
} */

:root {
  --main-color-01: #c2c0ce;
  --base-color-01: #f0f0eb;
  --base-color-02: #353535;
  --accent-color-01: #53606c;
  --accent-color-02: #baddd8;
  --accent-color-03: #42a0c3;
  --noto-serif-jp-font: "Noto Serif JP", serif;
  --zen-kaku-gothic-new-light-font: "Zen Kaku Gothic New", sans-serif;
  --zen-kaku-gothic-new-regular-font: "Zen Kaku Gothic New", sans-serif;
  --ysabeau-sc-font: "Ysabeau SC", sans-serif;
  --inter-font: "Inter", sans-serif;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  /* figmaのletter-spacing 5%; */
  letter-spacing: 0.05em;
  color: var(--base-color-02);
}

h1 {
  font-family: "Ysabeau SC", sans-serif;
  font-optical-sizing: auto;
  font-size: 60px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--base-color-02);
}

h2 {
  font-family: "Ysabeau SC", sans-serif;
  font-optical-sizing: auto;
  font-size: 40px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03em;
  color: var(--base-color-02);
}

h4 a {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--base-color-01);
}

/* 以下モーダル用の設定--------------------------------------- */

/* ===== モーダル完成版 ===== */

/* 背景スクロール止める */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* モーダル本体 */
.img-modal {
  position: fixed;
  inset: 0;
  background: rgba(83, 96, 108, 0.8);
  display: none;
  z-index: 9999;
  overflow: auto;
  /* 以下2つフェードイン設定とのこと。よくわからない */
  opacity: 0;
  transition: opacity 0.3s;
}

.img-modal.active {
  display: block;
  /* 以下1行フェードイン設定とのこと。よくわからない */
  opacity: 1;
}

/* 画像（スクロール対応） */
.img-modal__content {
  display: block;
  max-width: 1200px;
  width: auto;
  height: auto;
  margin: 80px auto;
  /* 以下1行「画像にちょい影」 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}