@charset "UTF-8";
/* CSS変数カスタムプロパティ */
:root {
  --header-height: 86px; /* PCでのヘッダーの高さ */
  --base-font-size: 1.6rem; /* デフォルト（トップページ用） */
  --sub-font-size: 1.8rem; /* 下層ページ */
}
@media screen and (max-width: 1280px) {
  :root {
    --header-height: 76px;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --sub-font-size: 1.6rem;
  }
}
@media screen and (max-width: 960px) {
  :root {
    --header-height: 60px;
  }
}
@media screen and (max-width: 430px) {
  :root {
    --base-font-size: 1.4rem;
  }
  :root {
    --sub-font-size: 1.4rem;
  }
}

/* 色の変数 */
:root {
  /* 背景系 */
  --bg-main: #32b041;
  --bg-accent: #ffc600;
  --bg-base: #fcf9ef;
  --bg-light: #fff;
  --bg-vivid: #e60000;
  --bg-deep: #0061e5;
  --bg-dark: #000;

  /* テキスト系 */
  --tx-primary: #000;
  --tx-light: #fff;
  --tx-main: #32b041;
  --tx-accent: #ffc600;
  --tx-vivid: #e60000;
  --tx-deep: #0061e5;

  /* フォント */
  --font-number:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo",
    sans-serif;
}

/* 全体的な設定 */
html {
  height: 100%;
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
  font-size: 62.5%; /* 16px × 0.625 = 10px */
  /* visibility: hidden; */
}
/* html.wf-active {
    visibility: visible;
  } */
body {
  min-height: 100dvh;
  background-color: var(--bg-base);
}
body.subpage {
  font-size: var(--sub-font-size);
}
body,
input,
select,
textarea {
  font-family:
    "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo",
    sans-serif;
  font-weight: 400;
  font-size: var(--base-font-size);
  line-height: 1.8;
  letter-spacing: 2px;
  color: var(--tx-primary);
  background-color: var(--bg-base);
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;
}
.font-number {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo",
    sans-serif;
  font-weight: 900;
}
/* モバイルメニュー開閉時の背面スクロール防止 */
/* body.is-fixed {
  overflow: hidden;
  height: 100%;
} */
/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}
/* リンク */
a {
  text-decoration: none;
}
/* 画像 */
img {
  width: 100%;
  height: auto;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 問い合わせフォームで非表示にするclass */
.wpcf7-spinner {
  display: none !important;
}

/*---------------------*/
/* アニメーション */
/* 下からスライドイン */
.slideInBottom {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s,
    transform 1s;
}
.slideInBottom.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* テキストアンダーライン */
.t-li {
  background-image: linear-gradient(#32b041, #32b041);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 0 3px;
  transition: background-size 0.3s;
  padding-bottom: 5px;
}
.t-li:hover {
  background-position: bottom center;
  background-size: 100% 3px;
}
@media screen and (max-width: 767px) {
  .t-li:hover {
    background-position: initial;
    background-size: 0 0;
  }
}

/* 画像をぼかして徐々に表示 */
.fadeBlurIn {
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 1.5s ease-out,
    filter 1.5s ease-out;
  will-change: opacity, filter;
}
.fadeBlurIn.is-show {
  opacity: 1;
  filter: blur(0);
}

/* ホバーするとやや上にアップして影 */
.hoverup {
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.hoverup:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ホバーするとやや上にアップ */
.hoverup-no {
  transition: transform 0.3s;
}
.hoverup-no:hover {
  transform: translateY(-3px);
}

/* ホバーすると画像拡大 */
.hoverzoom .img-box {
  overflow: hidden;
}
.hoverzoom .img-box img {
  transition: transform 0.5s ease;
}
.hoverzoom:hover .img-box img {
  transform: scale(1.05);
}