/* hp_footer.css — Bubble を写した部品（.bb の中）の土台＋ hp_footer ＋ SP_footer_navi
 *
 * 作り方（research/convert/build.sh で組み立てる。この先頭部分は手書き、その下は生成）:
 *   1. Bubble の汎用の配置規則（本番の CSS から .cma を含まない規則を抜いたもの。2026-10-05・570design.jp/app）を
 *      .bb の中だけに効くようにして写した。Bubble の新レスポンシブは要素ごとに display / flex の向きを
 *      クラス（bubble-r-container flex row / column / relative）で決めるので、写したページはこのクラスをそのまま使う
 *   2. 要素ごとの見た目は research/tools/bubble2tpl.py が本番の描画済み DOM（クラス規則＋style 属性）から起こす
 *      （基準 = 1240 幅、狭い幅は @media で差だけ）
 * ad・price・ux・app はこのファイルを読み、footer ブロックで _hp_footer.html と _sp_footer_navi.html を使う。
 */
.bb {
  /* Bubble の色の変数（本番の html に定義。値は base.css の実測と同じ） */
  --color_primary_default: rgba(0, 100, 154, 1);
  --color_primary_default_rgb: 0, 100, 154;
  --color_primary_contrast_default: rgb(26, 138, 198);
  --color_surface_default: rgba(230, 239, 244, 1);
  --color_background_default: rgba(255, 255, 255, 1);
  --color_alert_default: rgba(242, 130, 0, 1);
  --font_default: "Noto Sans JP";
  position: relative; box-sizing: border-box;
}
/* .bb 自身（ページの根・フッターの根）: Bubble の Page / CustomElement は flex の縦並び。要素ごとの規則（.bb.u-…）が勝つよう低く */
:where(.bb) { display: flex; flex-flow: column; align-content: stretch; }
.bb *, .bb *::before, .bb *::after { box-sizing: border-box; }
.bb :where(.bubble-element) { position: relative; box-sizing: border-box; }
.bb :where(div.bubble-element, a.bubble-element) { overflow: hidden; }
.bb :where(.bubble-element.CustomElement, .bubble-element.FloatingGroup, .bubble-element.Group,
  .bubble-element.Popup, .bubble-element.group-item), .bb:where(.bubble-element) { overflow: visible; }
.bb :where(.bubble-element.Image) { display: flex; flex-direction: row; align-items: stretch; }
.bb :where(.bubble-element.Text) { overflow-wrap: break-word; }
.bb :where(.bubble-element.ionic-IonicIcon) { padding: 0; text-align: center; background: none; border: none; cursor: inherit; }
.bb :where(.bubble-r-container) { overflow: hidden; }
.bb :where(.bubble-r-container.relative, .bubble-r-container.flex) > :where(.bubble-element) { position: relative; }
.bb :where(.bubble-r-container.relative) { display: grid; grid-template: "stack" 100% / 100%; }
.bb :where(.bubble-r-container.relative) > :where(.bubble-element) { grid-area: stack; }
.bb :where(.bubble-r-container.flex) { display: flex; align-content: stretch; }
.bb :where(.bubble-r-container.flex.row) { flex-flow: wrap; }
.bb :where(.bubble-r-container.flex.column) { flex-flow: column; }

.bb :where(.bubble-rg) { display: grid; justify-items: stretch; }
.bb :where(.bubble-rg) > :where(.bubble-element.group-item) { position: relative; }
.bb :where(.bubble-r-vertical-center) { display: flex; flex-direction: column; justify-content: center; }
.bb .clickable-element, .bb [data-popup], .bb [data-popup-close], .bb [data-tab] { cursor: pointer; }
.bb a { color: inherit; text-decoration: none; }
.bb img { display: block; }

/* hp_footer の「メールで問い合わせる」: 本番はボタン（Group ボタン）にカーソルが乗ると文言が変わる（条件つき書式） */
.bb .hf-mail-hover { display: none; }
.bb .hf-TaUaF:hover .hf-mail { display: none; }
.bb .hf-TaUaF:hover .hf-mail-hover { display: inline; }

/* ---------------------------------------------------------------- 生成（hp_footer） */
.bb.hf-TaVl { overflow: visible; justify-content: flex-start; border-radius: 0px; align-self: flex-start; min-width: 0px; order: 25; min-height: 280px; height: max-content; flex-grow: 0; flex-shrink: 0; width: calc(100% + 0px); margin: 0px; z-index: 17; background-color: var(--color_background_default); }
.bb .hf-TaTv { border-radius: 0px; align-self: center; min-width: 100px; max-width: 100px; order: 2; height: max-content; flex-grow: 0; flex-shrink: 0; width: 100px; margin: 50px 0px 0px; z-index: 25; }
.bb .hf-TaTs { white-space: pre-wrap; overflow: visible; font-family: "Noto Sans JP"; font-size: 20px; font-weight: 500; color: var(--color_primary_default); text-align: center; line-height: 2; border-radius: 0px; align-self: center; min-width: 0px; order: 3; min-height: 0px; height: max-content; flex-grow: 0; flex-shrink: 0; width: calc(100% - 40px); margin: 20px; z-index: 25; }
.bb .hf-TaTy { overflow: visible; justify-content: center; gap: 0px 80px; border-radius: 0px; align-self: center; min-width: 0px; order: 6; min-height: 0px; height: max-content; flex-grow: 0; flex-shrink: 0; width: auto; margin: 0px; z-index: 25; }
.bb .hf-TaUaF { overflow: visible; border-radius: 15px; align-self: flex-start; min-width: 350px; order: 2; min-height: 80px; width: max-content; flex-grow: 0; height: max-content; margin: 0px; z-index: 22; background-color: var(--color_primary_default); }
@media (max-width: 499.98px) { .bb .hf-TaUaF { padding: 20px 30px; } }
.bb .hf-TaUaG { overflow: visible; justify-content: flex-start; border-radius: 0px; place-self: center; min-width: 0px; min-height: 0px; width: max-content; height: max-content; margin: 0px; z-index: 19; }
.bb .hf-TaUaI { border-radius: 0px; align-self: center; min-width: 26px; max-width: 26px; order: 1; width: 26px; flex-grow: 1; height: max-content; margin: 0px; z-index: 18; }
.bb .hf-TaUaH { white-space: pre-wrap; overflow: visible; font-family: "Noto Sans JP"; font-size: 18px; font-weight: 500; color: var(--color_background_default); letter-spacing: 3px; line-height: 1.4; border-radius: 0px; align-self: flex-start; min-width: 0px; order: 2; min-height: 0px; width: max-content; flex-grow: 0; height: max-content; margin: 0px 0px 0px 8px; z-index: 17; }
.bb .hf-TaUaK { white-space: pre-wrap; overflow: visible; font-family: "Noto Sans JP"; font-size: 10px; font-weight: 500; color: rgb(164, 193, 215); text-align: center; line-height: 2; border-radius: 0px; align-self: center; min-width: 0px; order: 7; min-height: 0px; height: max-content; flex-grow: 0; flex-shrink: 0; width: calc(100% - 40px); margin: 60px 20px 30px; z-index: 25; }
@media (max-width: 499.98px) { .bb .hf-TaUaK { max-width: unset; max-height: unset; margin-bottom: 80px; } }

/* ---------------------------------------------------------------- SP_footer_navi（手書き）
 * 本番: 定義（_reusables.md SP_footer_navi）と 390 幅の実測（2026-10-05）。
 *   固定の帯 = 画面の下・高さ 40（上の線 1px surface ＋ 中 39）・白地。幅 500 以上は出ない（%iv=false）
 *   項目 = 均等（flex-grow 1・幅 0）・12px/1.4・字間 3px・rgb(161,161,161)・上下中央。390 幅で 130.3 / 129.3 / 130.3
 *   広告制作は右に、WEBアプリは左に 1px の線（surface）。今のページは地 primary・字 白・その側の線なし
 */
.spnav { display: none; }
@media (max-width: 499.98px) {
  .bb.spnav {
    display: flex; flex-flow: row nowrap; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1503;
    min-height: 40px; background: #fff; border-top: 1px solid var(--color_surface_default);
  }
  /* .bb a { color: inherit } より強くする（.spnav-i だけだと負けて字が黒になっていた。2026-10-06） */
  .bb .spnav-i {
    display: flex; flex-direction: column; justify-content: center; align-self: stretch;
    flex: 1 1 0; width: 0; min-width: 0; margin: 0;
    font-family: "Noto Sans JP"; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 3px;
    color: rgb(161, 161, 161); text-align: center; white-space: pre-wrap; cursor: pointer;
  }
  .spnav-ad { order: 1; border-right: 1px solid var(--color_surface_default); }
  .spnav-ux { order: 2; }
  .spnav-app { order: 3; border-left: 1px solid var(--color_surface_default); }
  .bb .spnav-i.is-on { background: var(--color_primary_default); color: var(--color_background_default); }
  .spnav-ad.is-on { border-right: none; }
  .spnav-app.is-on { border-left: none; }
}