@charset "UTF-8";
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #231815;
}

.text_serif {
  font-family: "Noto Serif JP", serif;
}

/*---------------------------
basic setting
---------------------------*/
@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}
/*ボックスサイジング ボーダーボックス*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.text {
  color: #231815;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.justify_text {
  text-align: justify;
  text-justify: inter-ideograph;
}
@media all and (-ms-high-contrast: none) {
  .justify_text {
    font-feature-settings: normal;
  }
}

body {
  color: #231815;
  background: #fff;
}

a,
a:link,
a:visited {
  color: #231815;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
  transition: all 0.8s;
}

#backToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: #111;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
@media (max-width: 768px) {
  #backToTop {
    right: 3vw;
    bottom: 3vw;
    width: 10vw;
    height: 10vw;
  }
}
#backToTop {
  /* ▼ 矢印は画像で表示 */
}
#backToTop .arrow {
  width: 30px;
  height: 30px;
  background-image: url("../img/arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 768px) {
  #backToTop .arrow {
    width: 7vw;
    height: 7vw;
  }
}
#backToTop:hover {
  background: #222;
}

/* ▼ スクロール後に表示 */
#backToTop.show {
  opacity: 1;
  visibility: visible;
}

/*---------------------------
sec
---------------------------*/
.sec {
  width: 95%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sec {
    width: 95%;
  }
}

/*---------------------------
ヘッダー

  カンプのヘッダーは「白＋淡いピンクのACTパターン＋下端に赤いライン」で、
  中央に赤いACTロゴが乗る構成（赤帯ではない）。
  その帯そのものが bg_header.png（1000x103・アルファ付き）なので、
  aspect-ratio で原寸比を保ったまま敷いている。
  ロゴは 101x63 で、ヘッダー幅の 10.1% に相当する。
  → 画面幅が変わるとヘッダー高さも比例して縮むため、ロゴも%で追従させる
---------------------------*/
header {
  /*
    ▼ 固定ヘッダーにしない
      ナビゲーションを持たないため追従させる必要がなく、
      通常フローに置くことで #page（背景レイヤー）がヘッダー直下から
      自然に始まる。JS側の余白補正も不要になる。
  */
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /*
    帯の高さ。bg_header.png の原寸は 1000x103 だが、
    ロゴ上下の余白を稼ぐため縦に伸ばしている（指示による調整）。
    background-size: 100% 100% で引き伸ばすため、
    ACTパターンと下端の赤ラインもわずかに縦に伸びる（15%程度なので視認不可）。
    調整はこの分母の数値のみでよい。
  */
  aspect-ratio: 1000/118;
  background: url("../img/bg_header.png") center top no-repeat;
  background-size: 100% 100%;
  z-index: 999;
}

header .header__inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .site-logo {
  margin: 0;
  line-height: 0;
  /*
    ロゴ幅。ヘッダー高さも同じ比率で縮むので固定pxにはしない。
    カンプ原寸は 101/1000 = 10.1% だが、視認性のため拡大している。
    ロゴは 101x63（縦横比 1:0.624）なので、
    ヘッダー高103pxに収めるには最大でも約16%（=160px幅・100px高）。
    調整はこの1箇所の数値だけでよい。

    ▼ img 側ではなく h1 側に幅を持たせる理由
      img に % を指定すると、包含ブロックである h1 の幅が
      「中身（=そのimg）の幅」で決まるため循環し、
      ブラウザは画像の原寸を基準にしてしまう（14%が14pxになる）。
      h1 は .header__inner（幅が確定）の子なので、こちらに置けば正しく解決する。
  */
  width: 12%;
  min-width: 78px;
}
header .site-logo a,
header .site-logo a img {
  display: block;
}
header .site-logo a img {
  width: 100%;
  height: auto;
}

/*
  ▼ SP：ロゴがヘッダーからはみ出す問題への対応
    min-width: 78px が効くと、375px幅では
    ヘッダー高 44.25px（=375×118/1000）に対して
    ロゴ高が 48.7px（78px幅×63/101）になり収まらない。
    SPでは min-width を外し、帯自体も縦に伸ばして上下の余白を確保する。
      375px幅の場合： 帯 48.75px ／ ロゴ 35.6×22.2px ／ 上下余白 各13.3px
*/
@media (max-width: 768px) {
  header {
    aspect-ratio: 1000/130;
  }
  header .site-logo {
    width: 10.5%;
    min-width: 0;
  }
}

/*---------------------------
フッター（コピーライトの赤帯）
  ※グループロゴは白いコンテンツ列に乗せるため lp-body.php 側に置いている
---------------------------*/
footer.site-footer {
  /*
    ▼ bg02（白い列）より前面に出す
      main 側の .lower-bg を帯の高さぶん下へ伸ばして
      帯の背面に潜り込ませているため、ここで前面に出さないと
      白い列が帯を覆ってしまう。
  */
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  background: none;
  padding: 0;
}
footer.site-footer .site-footer__copyright {
  margin: 0;
  /*
    高さは #page の --footer-band-h（61px・カンプ実測）で確定させる。
    padding で高さを作ると文字サイズの変更で高さが動き、
    bg02 の延長量とズレて帯の下に白が覗くため。
  */
  height: var(--footer-band-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  /* カンプ実測の赤（カードと同色） */
  background: #FE0000;
  color: #fff;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  footer.site-footer .site-footer__copyright {
    font-size: 2.6vw;
  }
}

/*404ページ*/
.error404 h2 {
  margin-top: 100px;
  font-size: 2rem;
  text-align: center;
}
.error404 .text {
  margin-top: 100px;
  text-align: center;
}
.error404 .btn {
  margin-bottom: 150px;
}