/* ASTRA お知らせスライダー: 画面最上部・全幅・フラット（トップページのみ。見た目のみ） */

/*
 * 画面の最上部（ヘッダーの上）に固定する（スクロールしても同じ位置に留まる）。
 * ヘッダーはバーの高さ（42px）ぶん下げる（下の .custom-header）。
 */
.astra-announcement {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
  z-index: 6 !important;
  box-sizing: border-box;
}

/* 横幅の制限（.page-width の max-width:1200px と余白、.announcement-bar の固定幅）を外す */
.astra-announcement .utility-bar__grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 40px !important;
  box-sizing: border-box;
}

.astra-announcement .announcement-bar {
  width: 100% !important;
  max-width: none !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}

.astra-announcement .announcement-bar-slider {
  width: 100% !important;
  max-width: none !important;
  height: 40px !important;
  margin: 0 !important;
}

.astra-announcement .slider-button {
  height: 40px !important;
  min-height: 0 !important;
}

/* 文言は縦横とも中央 */
.astra-announcement .announcement-bar__announcement {
  align-items: center !important;
  justify-content: center !important;
}

.astra-announcement .announcement-bar__message {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/*
 * ヘッダーをバーの下へ。ヘッダーは透明な固定要素なので、下げても下の
 * コンテンツは押し出さない（ロゴ・アイコンの位置だけが 42px 下がる）。
 */
.custom-header {
  top: 42px;
}

/* スマホ: 長文が2行でも収まるよう文字を小さくする */
@media (max-width: 749px) {
  .astra-announcement .announcement-bar {
    padding: 0 !important;
  }

  .astra-announcement .announcement-bar-slider {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .astra-announcement .slider-button {
    width: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    margin: 0 !important;
  }

  .astra-announcement .announcement-bar__message {
    padding: 0 2px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/*
 * メインビジュアルの端末動画をバーとヘッダーの下へ逃がす（SP 構図＝1023px 以下）。
 *
 * テーマの SP 構図（themes/astra/assets/section-hero-image.css）は端末を
 * 画面の上端から置く（XD どおり）。画面上部にバーを足したため、端末の
 * 上端がバーの下に潜っていた。
 *
 * 端末の絵を「バー＋ヘッダーの下端 + 8px」から「見出しの上端 − 8px」の間に収める。
 *
 *   - 動画の全フレームを測ると、絵は箱の高さの 20.4%〜80.3%（幅 59.9%）に
 *     収まる（1080×1350 の 276〜1084px）。
 *   - 見出しの上端は CSS では取れないので見積もる。文字の塊はテーマが
 *     下から max(136u, 136px) の位置に積み、高さは実測で 234〜253px
 *     （375〜430 幅）/ 約 243u（タブレット）。max(250px, 250u) と置く。
 *
 * 高さはテーマの値を上限に、空きに収まるまで縮める。上端はテーマの値を
 * 下限に、絵の上端がヘッダーの下に来るまで下げる。背の高い画面では元から
 * 収まっているので、テーマの配置のまま変わらない。
 */
@media (max-width: 1023px) {
  .hero-image-device {
    --astra-bar-bottom: 170px; /* バー 42px + ヘッダーのロゴ・ナビの段 128px */
    --astra-device-top-base: calc(13 * var(--hero-u));
    --astra-device-height-base: calc(488 * var(--hero-u));
    --astra-art-min: calc(var(--astra-bar-bottom) + 8px);
    --astra-art-max: calc(100svh - max(calc(136 * var(--hero-u)), 136px) - max(250px, calc(250 * var(--hero-u))) - 8px);
    --astra-device-height: min(
      var(--astra-device-height-base),
      calc((var(--astra-art-max) - var(--astra-art-min)) / 0.599)
    );
    top: max(
      var(--astra-device-top-base),
      calc(var(--astra-art-min) - 0.204 * var(--astra-device-height))
    );
    height: var(--astra-device-height);
  }

  /* テーマの背の低い画面向けの段階に合わせる。 */
  @media (max-height: 720px) {
    .hero-image-device {
      --astra-device-top-base: 0px;
      --astra-device-height-base: calc(400 * var(--hero-u));
    }
  }

  @media (max-height: 600px) {
    .hero-image-device {
      --astra-device-height-base: calc(320 * var(--hero-u));
    }
  }
}

@media (max-width: 749px) {
  .hero-image-device {
    --astra-bar-bottom: 110px; /* バー 42px + ヘッダーのロゴ・アイコンの段 68px */
  }
}