@charset "UTF-8";

/* ==========================================================================
   共通footer（スマホ基準: 393pxデザイン想定）
   ========================================================================== */
.site-footer {
  background-color: var(--clr-bg-sec);
  color: var(--clr-text-100);
  padding-top: calc(40 / 393 * 100vw);
  padding-bottom: calc(40 / 393 * 100vw);
}

.footer-inner {
  width: 100%;
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
  padding-right: calc(24 / 393 * 100vw);
  padding-left: calc(24 / 393 * 100vw);
}

/* フッターロゴ */
.footer-logo {
  margin-bottom: calc(40 / 393 * 100vw);
  display: block;
  width: calc(120 / 393 * 100vw);
  margin-right: auto;
  margin-left: auto;
}
.footer-logo img {
  width: 100%;
  display: block;
}

/* サイトマップ型ナビゲーション（スマホ時：マルチカラムで隙間なしの2カラム化） */
.footer-nav {
  display: block;                     /* GridやFlexではなくblockにする */
  columns: 2;                         /* 強制的に2カラム（2列）にする */
  column-gap: calc(40 / 393 * 100vw); /* 左右の列の間の余白 */
}

/* スマホ時：各グループが途中で次の列に分裂するのを防ぎ、下の余白を作る */
.footer-nav-group {
  break-inside: avoid;                /* グループの途中で列が泣き別れするのを防ぐ */
  margin-bottom: calc(32 / 393 * 100vw); /* 縦のグループ間の余白 */
}

.footer-nav::after, /* 既存の調整用 */
.footer-nav-group:nth-child(3) {
  break-before: column;
}

/* フッター見出しのデザイン（スマホ: 12px相当） */
.footer-nav-title {
  font-family: var(--font-note);
  font-size: calc(12 / 393 * 100vw);
  font-weight: 600;
  color: var(--clr-text-100); 
  margin-bottom: calc(10 / 393 * 100vw);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 親階層リストのレイアウト（スマホ: 10px相当） */
.footer-nav-list li {
  margin-bottom: calc(1 / 393 * 100vw);
  line-height: 1.5;
  position: relative;                 /* 👈 基準をaタグではなく、li（外枠）に変更して被りを防ぐ */
  padding-left: calc(14 / 393 * 100vw); /* 👈 liの左側に横棒用の余白をしっかり確保 */
}

/* テーマが li や li::before に勝手につける「└─」などの古い装飾を特権レベルで完全リセット */
.footer-nav-list li::before,
.footer-nav-list > li::before,
.footer-nav-child-list li::before {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* 親階層のaタグ：内側の余白（padding）を完全に0にして、テキストの左端を完全に左揃えにする */
.footer-nav-list > li > a {
  display: inline-block;
  position: relative;
  padding-left: 0 !important;         /* 👈 テキストの左揃えをキープ（被りません） */
}

/* 親階層の横棒：liの左端（余白の中）にピンポイントで描画するため文字と絶対に重ならない */
.footer-nav-list > li > a::before {
  content: "" !important;
  position: absolute;
  left: calc(-14 / 393 * 100vw);      /* 👈 確保した左余白の分だけ外側（左）に飛び出させる */
  top: 0.75em;                        /* 2行になっても必ず1行目の中央に固定 */
  transform: translateY(-50%);
  width: calc(8 / 393 * 100vw);
  height: 0 !important;
  background: transparent !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--clr-text-60) !important;
}

.footer-nav-list li a {
  font-family: var(--font-note);
  font-size: calc(10 / 393 * 100vw);
  font-weight: 400;
  color: var(--clr-main);
}

/* 子階層（ネスト）のリスト全体のスタイル定義（テーマ独自のズレを強制排除） */
.footer-nav-list ul,
.footer-nav-group ul ul,
.footer-nav-child-list {
  margin-top: calc(8 / 393 * 100vw) !important;
  margin-bottom: calc(4 / 393 * 100vw) !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 【理想のインデント】子階層のli：親階層の並びから「1文字分（1em）」だけ確実に右に下げる */
.footer-nav-child-list li {
  position: relative;
  padding-left: calc(14 / 393 * 100vw) !important; /* 👈 親の横棒幅 ＋ 1文字分のインデント */
}

/* 子階層のaタグ：親と同様にテキスト自体のpaddingは0にして被りを防止 */
.footer-nav-child-list li a {
  display: inline-block !important;
  position: relative !important;
  padding-left: 0 !important;         /* 👈 テキスト単体の余白は0にして左端を固定 */
}

/* 子階層の横棒：1文字分下がった余白の中にピンポイントで描画 */
.footer-nav-child-list li a::before {
  content: "" !important;
  position: absolute !important;
  left: calc(-14 / 393 * 100vw) !important; /* 👈 テキストの左側の余白にきれいに収める */
  top: 0.75em !important;               /* 1行目の中央に固定 */
  transform: translateY(-50%) !important;
  width: calc(8 / 393 * 100vw) !important;
  height: 0 !important;
  background: transparent !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--clr-text-60) !important;
}

/* SNSアイコン */
.footer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(35 / 393 * 100vw);
  margin-top: calc(20 / 393 * 100vw);
  margin-bottom: calc(40 / 393 * 100vw);
}
.footer-sns .sns-link {
  display: block;
  width: calc(40 / 393 * 100vw) ;
  transition: all 0.5s ease;
}
.footer-sns .sns-link:hover {
  opacity: 0.7;
}
.footer-sns .sns-link img {
    width: 100%;
}

/* コピーライト（スマホ: 10px相当に可変） */
.footer-copyright {
  font-family: var(--font-note);
  font-size: calc(10 / 393 * 100vw);
  text-align: center;
  color: var(--clr-text-80);
  line-height: 1.5;
}


/* ==========================================================================
   PCスタイル（768px以上 〜 1000pxデザイン想定で最大値ストップ）
   ========================================================================== */
@media screen and (min-width: 768px) {

  .site-footer {
    padding-top: min(calc(80 / 1000 * 100vw), 80px);
    padding-bottom: min(calc(60 / 1000 * 100vw), 60px);
  }

  .footer-inner {
    padding-right: min(calc(40 / 1000 * 100vw), 40px);
    padding-left: min(calc(40 / 1000 * 100vw), 40px);
  }

  /* ロゴサイズ */
  .footer-logo {
    margin-bottom: min(calc(80 / 1000 * 100vw), 80px);
    width: min(calc(220 / 1000 * 100vw), 220px);
  }
  .footer-logo img {
   width: 100%;
  }

  /* PC時：Flexboxで左右の端から端まで美しく広げる */
  .footer-nav {
    display: flex;                  /* 横並びのFlexboxに戻す */
    columns: auto;                  /* スマホ用の列数を解除 */
    justify-content: space-between;
    align-items: flex-start;
    gap: min(calc(16 / 1000 * 100vw), 16px);
    margin-top: min(calc(50 / 1000 * 100vw), 50px);
    margin-bottom: min(calc(40 / 1000 * 100vw), 40px);
    max-width: none;                /* スマホ用の幅制限を解除 */
  }
  
  /* PC時はスマホ用の余白とカラム分裂防止をリセット */
  .footer-nav-group {
    flex: 0 1 auto;
    max-width: min(calc(180 / 1000 * 100vw), 180px);
    margin-bottom: 0;
    break-inside: auto;
  }

  /* PC見出しサイズ（最大14pxストップ） */
  .footer-nav-title {
    font-size: min(calc(14 / 1000 * 100vw), 14px);
    margin-bottom: min(calc(15 / 1000 * 100vw), 16px);
  }

  /* PCリンクサイズ（最大12pxストップ） */
  .footer-nav-list li a {
    font-size: min(calc(12 / 1000 * 100vw), 12px);
  }

  /* PC用の親階層の横棒スペース確保 */
  .footer-nav-list li {
    margin-bottom: min(calc(10 / 1000 * 100vw), 10px);
    padding-left: min(calc(14 / 1000 * 100vw), 14px);
  }
  
  .footer-nav-list > li > a {
    padding-left: 0 !important;
  }

  /* 親階層のPC横棒：飛び出させて中央揃え */
  .footer-nav-list > li > a::before {
    top: 0.75em; 
    left: calc(-10 / 1300 * 100vw);
    width: min(calc(8 / 1300 * 100vw), 8px);
    height: 0 !important;
  }

  /* PC側でもテーマのネスト用デフォルト余白を安全にリセット */
  .footer-nav-list ul,
  .footer-nav-group ul ul,
  .footer-nav-child-list {
    margin-top: min(calc(12 / 1300 * 100vw), 12px) !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* PC側の子階層インデント調整（スマホと仕様を完全統合） */
  .footer-nav-child-list li {
    padding-left: calc(min(calc(14 / 1000 * 100vw), 14px) ) !important;
  }

  .footer-nav-child-list li a {
    padding-left: 0 !important;
  }
  
  /* 子階層のPC横棒：テキストの左側の空きスペースに綺麗に描画 */
  .footer-nav-child-list li a::before {
    top: 0.75em !important;
    left: calc(-10 / 1000 * 100vw) !important;
    transform: translateY(-50%) !important;
    width: min(calc(8 / 1300 * 100vw), 8px) !important;
    height: 0 !important;
    border-bottom: 1px solid var(--clr-text-60) !important;
  }

  /* SNSアイコン */
  .footer-sns {
    margin-top: min(calc(50 / 1000 * 100vw), 50px);
    margin-bottom: min(calc(60 / 1000 * 100vw), 60px);
    gap: min(calc(65 / 1000 * 100vw), 65px);
  }
  .footer-sns .sns-link {
    width: min(calc(50 / 1000 * 100vw), 50px) !important;
  }
  
  /* コピーライト */
  .footer-copyright {
    font-size: min(calc(14 / 1000 * 100vw), 14px);
  }
}

/* ==========================================================================
   Logo Text Component (フッター用のロゴ上テキスト)
   ========================================================================== */
.footer-logo .c-logo-wrapper {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.footer-logo .c-logo-text {
  display: block;
  width: 100%;
  font-family: var(--font-title);
  color: var(--clr-main);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.3em;
  
  /* スマホ基準のサイズとロゴとの隙間 */
  font-size: calc(10 / 393 * 100vw);
  margin-bottom: calc(4 / 393 * 100vw);
}

/* PCスタイル（768px以上） */
@media screen and (min-width: 768px) {
  .footer-logo .c-logo-text {
    /* PC基準のサイズとロゴとの隙間 */
    font-size: min(calc(16 / 1000 * 100vw), 16px);
    margin-bottom: min(calc(12 / 1000 * 100vw), 12px);
  }
}

/* ==========================================================================
   サーバーキャッシュ・プラグイン強制上書き対策
   ========================================================================== */
#force-sub-line-ultimate,
style[id*="force-sub-line"] {
  display: none !important;
}