@charset "UTF-8";
/**===============================================================
   [layouts] public-layout
==================================================================
   @description
       公開側レイアウト (v2.layouts.default) の大枠。
       ヘッダー / フッター / SP固定ナビ / ページ枠。

       余白の方針: Space Token は px 固定だが Rider のユーティリティは
       rem 基準で伸縮する。1px 以内で一致するものは Rider を使い、
       合わないものだけここで px 指定する。
         16px≒px-5 / 20px≒p-6 / 36px≒p-11 / 40px≒p-12 / 48px≒p-15
=================================================================*/

/* ------------------------------------------------------------------
 * ヘッダー (v2.layouts.navbar)
 * Figma: PC Menu — 高さ60px / padding 6px 16px / 下線 1px #E4E6EF
 * ------------------------------------------------------------------ */
.navbar.fixed-top {
  min-height: var(--app-header-bar-height);
}

/* SPでメニュー展開時もロゴ行の高さを60pxに保つ */
.navbar.fixed-top .navbar-brand {
  display: flex;
  align-items: center;
  min-height: var(--app-header-bar-height);
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* リンク（ベルマークエリアも共通）
---------------------------------------------------------------- */
.app-link-news {
  color: var(--bs-secondary);
}
.app-link-news:hover {
  text-decoration: underline;
}

/* 下層ページ 共通
---------------------------------------------------------------- */
.page-subpage-container {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

/* ------------------------------------------------------------------
 * サイドバー内の follow me (v2.layouts.followme)
 * ------------------------------------------------------------------ */
#sidebar a .app-followme-icon-instagram,
#sidebar a .app-followme-icon-youtube {
  color: var(--bs-primary);
}

#sidebar a:hover .app-followme-icon-instagram,
#sidebar a:hover .app-followme-icon-youtube {
  color: var(--bs-primary-active);
}

/* ------------------------------------------------------------------
 * フッター (v2.layouts.footer)
 * Figma: footer PC — padding 60px 0 36px / ロゴ〜リンク列・リンク列〜©は54px
 * ------------------------------------------------------------------ */
#footer {
  padding-top: 60px;
  padding-bottom: 36px;
}

/* 重なり順の整理。
   「TOPへ」ボタン(#backtotop)は position:fixed / z-index:1500 のため
   フッターや follow me の上に乗ってしまう。フッターを前面に出して隠す。
   ただし単にフッターを 1500 超にすると、DOM順が
   floatnav → backtotop → footer のため固定ナビまで覆い、
   さらに navbar(fixed-top, z-index:101) より上に出てヘッダーも覆ってしまう。
   そこで backtotop を下げ、navbar より下の範囲で
   backtotop < footer < floatnav の順に明示する。
   backtotop の z-index は定義元（v2/layouts/footer.blade.php のstyle）で 1 にしている。
   同ファイルのインラインstyleは外部CSSより後に読まれるため、ここで上書きできない。 */
#footer {
  position: relative;
  z-index: 2;
}

#floatnav {
  z-index: 3;
}

/* Figma DS「Footer > FooterLink」
   - アイコンとテキストの間は視覚バランス調整のため例外的に 2px
   - Mobile はタップ領域確保のため min-height 44px（PCは指定なし） */
#footer li a {
  display: inline-flex;
  align-items: center;
}

#footer li a > i {
  padding-right: 2px;
}

/* フッター内のアイコンは常に白（リンク色や text-muted に負けないよう !important）。
   旧 followme.blade.php の <style> から移設 */
#footer a i {
  color: #fff !important;
}

/* ------------------------------------------------------------------
 * フッター内の follow me (v2.layouts.followme の variant=footer)
 * Figma: 要素幅は PC/SP とも 250px。
 * パーシャル既定（お知らせサイドバー向け）は bg-light のカードだが、
 * フッターではコーラル背景に白バルーン画像を直置きする見た目にする。
 * 旧 followme.blade.php の <style> から移設・整理 */
.followme-footer .app-followme-card {
  background-color: transparent;
  border: none;
  box-shadow: none;
  /* followme.png はキャンバス500x282に対し不透明部分が458x251(幅91.6%)なので、
     250pxで表示すると見える白バルーンは約229pxになる */
  max-width: 250px;
  min-width: 250px;
  margin: 0 auto 100px auto;
}

/* サイズはマークアップ側の fs-4x(52px, !important) に任せる（旧50pxと視覚上同等） */
.followme-footer .app-followme-card i {
  padding: 0 1rem;
}

@media (max-width: 991.98px) {
  #footer li a {
    min-height: 44px;
  }

  /* SP固定ナビに最終行(©)が隠れないよう、その高さ分を下余白に上乗せする */
  #footer {
    padding-bottom: calc(36px + var(--app-floatnav-height));
  }

  /* common.css を読まないV2では #floatnav が余白を持たず窮屈になるため補う */
  #floatnav a {
    padding-top: var(--app-space-8);
    padding-bottom: var(--app-space-8);
  }
}

/* ------------------------------------------------------------------
 * ページ枠
 * Figma: コンテンツ枠 padding 36px 0 48px（固定ヘッダー分は別途オフセット）
 * ------------------------------------------------------------------ */
.v2-page {
  padding-top: calc(var(--app-header-height) + var(--app-space-36));
  padding-bottom: var(--app-space-48);
}