/* サイト共通フッターのスタイル（スマホは下段のみ表示） */
/* ================================
   /v2/css/footer.css
   目的：サイト共通フッターのスタイル
   背景 #545454・テキスト白
================================ */

/* ================================
   変数フォールバック
================================ */
:root {
  /* フッター背景色（共通グレー） */
  --footer-bg: var(
    --hero-gray,
    #545454
  );

  /* フッターテキスト基準色（白） */
  --footer-text: #ffffff;

  /* フッターのボーダー用（少し薄い白） */
  --footer-border: rgba(
    255,
    255,
    255,
    0.25
  );
}


/* ================================
   フッター全体
================================ */
.siteFooter {
  /* 位置系 */
  margin-top: 0;
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);

  /* ボックス系 */
  padding-top: 3rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;

  /* タイポ系 */
  font-size: var(
    --hero-text-sm
  );
  line-height: 1.8;

  /* 色・装飾系 */
  color: var(
    --footer-text
  );
  background-color: var(
    --footer-bg
  );
}

.siteFooter__inner {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  /* ボックス系 */
  max-width: 1120px;
}


/* ================================
   サイトマップ：上段4カラム
================================ */
.siteFooter__nav {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 2rem;
  margin-left: 0;

  /* ボックス系 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  row-gap: 1.5rem;
}

.siteFooter__group {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 大見出し：＞HEROとは 等（Eテキスト相当） */
.siteFooter__group-title {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  border-width: 0;
  border-style: none;
  background-color: transparent;

  /* タイポ系 */
  font-size: var(
    --hero-text-lg
  );
  font-weight: 700;
  text-align: left;

  /* 色・装飾系 */
  color: var(
    --footer-text
  );
  cursor: default;
}

.siteFooter__group-title-mark {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0.15rem;
  margin-bottom: 0;
  margin-left: 0;
}

.siteFooter__group-title-text {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 大見出しリンク（ABOUT / ACTIVITIES など） */
.siteFooter__group-title-link {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  /* タイポ系 */
  font: inherit;

  /* 色・装飾系 */
  color: inherit;
  text-decoration: none;
}

.siteFooter__group-title-link:hover {
  /* 色・装飾系 */
  text-decoration: underline;
}

/* 小見出しリスト（Fテキスト相当） */
.siteFooter__list {
  /* 位置系 */
  margin-top: 0.4rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  list-style: none;
}

.siteFooter__item {
  /* 位置系 */
  margin-top: 0.1rem;
  margin-right: 0;
  margin-bottom: 0.1rem;
  margin-left: 0;
}

.siteFooter__link {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0.05rem;
  padding-left: 0;

  /* タイポ系 */
  font-size: var(
    --hero-text-sm
  );
  font-weight: 400;

  /* 色・装飾系 */
  color: var(
    --footer-text
  );
  text-decoration: none;
}

.siteFooter__link:hover {
  /* 色・装飾系 */
  text-decoration: underline;
}

.siteFooter__item-mark {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.siteFooter__item-text {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}


/* ================================
   中段：個人/法人・FAQ
================================ */
.siteFooter__nav-secondary {
  /* 位置系 */
  margin-top: 1.5rem;
  margin-right: 0;
  margin-bottom: 2rem;
  margin-left: 0;

  /* ボックス系 */
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(
    --footer-border
  );

  padding-top: 1.5rem;
}

/* 中段リンク（個人・法人・FAQ・お問合せ） */
.siteFooter__nav-secondary-row {
  /* 位置系 */
  margin-top: 0.5rem;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;

  /* ボックス系：SP 基本は 2カラム */
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}

.siteFooter__secondary-link {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* タイポ系 */
  font-size: var(
    --hero-text-sm
  );
  font-weight: 500;

  /* 色・装飾系 */
  color: var(
    --footer-text
  );
  text-decoration: none;
}

.siteFooter__secondary-link:hover {
  /* 色・装飾系 */
  text-decoration: underline;
}


/* ================================
   下段：団体情報・SNS・問い合わせ
================================ */
.siteFooter__bottom {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  padding-top: 1.5rem;

  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(
    --footer-border
  );
}

/* 団体情報ブロック（Gテキスト・中央寄せ） */
.siteFooter__info {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* タイポ系 */
  text-align: center;
}

.siteFooter__org,
.siteFooter__mail,
.siteFooter__copyright {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.3rem;
  margin-left: 0;

  /* タイポ系 */
  font-size: var(
    --hero-text-xs
  );
  line-height: 1.7;
}

.siteFooter__mail-link {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* 色・装飾系 */
  color: var(
    --footer-text
  );
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: var(
    --footer-border
  );
}

.siteFooter__mail-link:hover {
  /* 色・装飾系 */
  text-decoration: none;
  border-bottom-color: #ffffff;
}

.siteFooter__action {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.siteFooter__sns {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.25rem;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.siteFooter__sns-link {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.siteFooter__sns-icon {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 48px;
  height: 48px;
}


/* ================================
   レイアウト調整：PC
================================ */
@media (min-width: 768px) {

  .siteFooter__nav {
    /* ボックス系 */
    grid-template-columns: repeat(
      4,
      minmax(0, 1fr)
    );
  }

  .siteFooter__nav-secondary-row {
    /* ボックス系：PC では4カラムで横一列 */
    grid-template-columns: repeat(
      4,
      minmax(0, 1fr)
    );
    column-gap: 2rem;
    row-gap: 0;
  }

  .siteFooter__secondary-link {
    /* タイポ系：Dテキストサイズ */
    font-size: var(
      --hero-text-md
    );
    font-weight: 700;
  }

  .siteFooter__bottom {
    /* ボックス系 */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.2rem;
    padding-right: 3rem;
    padding-bottom: 0;
    padding-left: 3rem;
  }

  .siteFooter__action {
    /* ボックス系 */
    align-items: center;
  }

  .siteFooter__sns {
    /* ボックス系 */
    justify-content: center;
    gap: 1.5rem;
  }

  .siteFooter__sns-icon {
    /* ボックス系 */
    width: 48px;
    height: 48px;
  }
}


/* ================================
   レイアウト調整：スマホ
   （上段・中段を非表示／下段だけ表示）
================================ */
@media (max-width: 767.98px) {

  .siteFooter {
    /* ボックス系：少しコンパクトに */
    padding-top: 1.5rem;
    padding-right: 1.25rem;
    padding-bottom: 1.3rem;
    padding-left: 1.25rem;
  }

  /* 上段サイトマップを非表示 */
  .siteFooter__nav {
    /* ボックス系 */
    display: none;
  }

  /* 中段ナビを非表示＋ボーダー無効化 */
  .siteFooter__nav-secondary {
    /* ボックス系 */
    display: none;
    border-top-width: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }

  /* 下段の区切り線も消す → アイコン直上の線をなくす */
  .siteFooter__bottom {
    /* ボックス系 */
    border-top-width: 0;
    padding-top: 1rem;
    gap: 1rem;
  }

  /* 下段：まずアイコン、その下にテキスト */
  .siteFooter__action {
    /* ボックス系 */
    order: 1;
    align-items: center;
  }

  .siteFooter__info {
    /* ボックス系 */
    order: 2;
    text-align: center;
  }

  .siteFooter__sns {
    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.25rem;
    margin-left: 0;

    /* ボックス系 */
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .siteFooter__sns-icon {
    /* ボックス系：SP 用に少し小さく */
    width: 42px;
    height: 42px;
  }
}

/* ================================
   共通：ページトップボタン
   画面右下固定の「TOP」ボタン
================================ */

/* ボタン本体（丸いボタン＋矢印＋テキスト） */
.c-page-top {
  /* 位置系：画面右下に固定 */
  position: fixed;
  right: 1rem;
  bottom: 1.2rem;
  z-index: 40;          /* ハンバーガーメニューよりは低め想定 */

  /* ボックス系 */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding-top: 0.4rem;
  padding-right: 0.3rem;
  padding-bottom: 0.4rem;
  padding-left: 0.3rem;
  border-width: 0;
  border-style: none;
  border-radius: 9999px;
  box-shadow: 0 4px 12px
    rgba(0, 0, 0, 0.16);

  /* タイポ系 */
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;

  /* 色・装飾系 */
  color: var(--hero-black);
  background-color: #ffffff;
  cursor: pointer;
}

/* 矢印アイコン（上向き三角） */
.c-page-top__icon {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.1rem;
  margin-left: 0;

  /* ボックス系：borderで三角を作る */
  width: 0;
  height: 0;
  border-top-width: 0;
  border-top-style: solid;
  border-top-color: transparent;
  border-right-width: 6px;
  border-right-style: solid;
  border-right-color: transparent;
  border-bottom-width: 8px;
  border-bottom-style: solid;
  border-bottom-color: var(
    --hero-orange
  ); /* 共通オレンジ */
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: transparent;
}

/* 「TOP」テキスト */
.c-page-top__text {
  /* 位置系 */
  margin-top: 0.1rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* タイポ系 */
  font-size: 0.7rem;
  font-weight: 700;
}

/* ホバー時（PC用：少しだけ強調） */
.c-page-top:hover {
  /* 色・装飾系 */
  box-shadow: 0 6px 16px
    rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* ----------------------------
   スマホ用レイアウト調整
   下部固定メニューの少し上に配置
---------------------------- */
@media (max-width: 767.98px) {

  .c-page-top {
    /* 位置系：下部固定バーの上にくるように少し上げる */
    right: 1rem;
    bottom: 120px;  /* 下部固定バー＋余白ぶん */
  }
}

/* ----------------------------
   PC用レイアウト調整
   コンテンツ幅（1120px）の右端あたりにそろえる
---------------------------- */
@media (min-width: 1120px) {

  .c-page-top {
    /* 位置系：
       画面センター基準で1120pxの右端＋余白1rem */
    right: calc(
      50vw - 560px + 1rem
    );
  }
}




/* メニュー開いているときは TOPボタンを非表示にする */
body.is-menu-open .c-page-top {
  opacity: 0;
  pointer-events: none; /* タップ無効化 */
  transition: opacity 0.25s ease;
}
