@charset "UTF-8";

.has-login-notice {
  overflow: hidden;
  scrollbar-gutter: stable;
}


.notice {
  --notice-width: 700px;
  --notice-radius: 10px;
  --notice-pad-x: 1.0rem;
  --notice-pad-y: 0.75rem;

  --notice-bg: #ffffff;
  --notice-fg: #1c1f23;
  --notice-muted: #5b6470;
  --notice-line: #dfe3e8;
  --notice-subtle-bg: #f7f9fb;

  --notice-accent: #0A7882;
  --notice-accent-hover: #3b939b;
  --notice-accent-fg: #ffffff;

  --notice-backdrop: rgb(15 20 28 / 0.5);
  --notice-shadow: 0 1.5rem 3rem rgb(15 20 28 / 0.22);

  /* ---- レイアウト ---- */
  width: min(var(--notice-width), 80vw);
  max-height: 80dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--notice-radius);
  overflow: hidden;

  color: var(--notice-fg);
  background: var(--notice-bg);
  box-shadow: var(--notice-shadow);

  font-family: inherit;
  line-height: 1.75;
}

/* dialog はデフォルト display:none。開いている間だけ縦フレックスにする */
.notice[open] {
  display: flex;
  flex-direction: column;
}

.notice::backdrop {
  background: var(--notice-backdrop);
}

/* dialog 自身にフォーカスが当たったときの二重リングを抑制 */
.notice:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   3. 開閉アニメーション（未対応ブラウザでは単に即時表示される）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .notice {
    opacity: 0;
    translate: 0 0.75rem;
    transition:
      opacity 0.18s ease,
      translate 0.18s ease,
      overlay 0.18s allow-discrete,
      display 0.18s allow-discrete;
  }

  .notice[open] {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .notice[open] {
      opacity: 0;
      translate: 0 0.75rem;
    }
  }

  .notice::backdrop {
    opacity: 0;
    transition:
      opacity 0.18s ease,
      overlay 0.18s allow-discrete,
      display 0.18s allow-discrete;
  }

  .notice[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .notice[open]::backdrop {
      opacity: 0;
    }
  }
}

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.notice__header {
  flex: 0 0 auto;
  padding: var(--notice-pad-y) var(--notice-pad-x);
  border-bottom: 1px solid var(--notice-line);
  background-color: var(--notice-accent);
  background: #ffffff !important;
}

.notice__title {
  margin: 0;
  line-height: 1.5;
  color: #1a1a1a !important;
  font-size: 1.6rem;
}

.notice__title:focus {
  outline: none; /* 初期フォーカス先だが、視覚的なリングは出さない */
}


/* --------------------------------------------------------------------------
   5. 本文（ここだけがスクロールする）
   上下のスクロールシャドウで「まだ続きがある」ことを伝える
   -------------------------------------------------------------------------- */
.notice__body {
  flex: 1 1 auto;
  min-height: 0; /* flex 子要素でスクロールさせるために必須 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--notice-pad-y) var(--notice-pad-x);
  font-size: 1.6rem;

  background:
    linear-gradient(var(--notice-bg) 30%, rgb(255 255 255 / 0)) top / 100% 1.5rem no-repeat local,
    linear-gradient(rgb(255 255 255 / 0), var(--notice-bg) 70%) bottom / 100% 1.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(15 20 28 / 0.16), rgb(15 20 28 / 0)) top / 100% 0.5rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(15 20 28 / 0.16), rgb(15 20 28 / 0)) bottom / 100% 0.5rem no-repeat scroll;
  background-color: var(--notice-bg);
}

.notice__body > :first-child { margin-top: 0; }
.notice__body > :last-child  { margin-bottom: 0; }

.notice__body p,
.notice__body ul,
.notice__body ol {
  margin: 0 0 1em;
}

.notice__body ul,
.notice__body ol {
  padding-left: 1.25em;
}

.notice__body a {
  color: var(--notice-accent);
}

.notice__body .buttons {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 767px) {
  .notice__body .buttons {
    flex-direction: column;
    align-items: center;
  }
}

.notice__body .btn01 .btn_inner {
  border-radius: 9999px;
  min-width: 250px;
  min-height: 2.4em;
  padding: 5px 30px;
}


/* --------------------------------------------------------------------------
   6. フッター（固定・常に見える位置）
   閉じる手段がここにしかないため、絶対にビューポート外へ出さない
   -------------------------------------------------------------------------- */
.notice__footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: var(--notice-pad-y) var(--notice-pad-x);
  border-top: 1px solid var(--notice-line);
  background: var(--notice-subtle-bg);
}

/* 「n日表示しない」チェックボックス */
.notice__suppress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* タップ領域の確保 */
  margin: 0;
  color: var(--notice-muted);
  font-size: 1.4rem;
  line-height: 1.5;
  cursor: pointer;
}

.notice__suppress input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--notice-accent);
  cursor: pointer;
}

/* 閉じるボタン */
.notice__close {
  flex: 0 0 auto;
  min-width: 8rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--notice-accent-fg);
  background: var(--notice-accent);
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.notice__close:hover {
  background: var(--notice-accent-hover);
}

/* キーボード操作時のフォーカスリング */
.notice__close:focus-visible,
.notice__suppress input[type="checkbox"]:focus-visible,
.notice__body a:focus-visible {
  outline: 2px solid var(--notice-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. 狭い画面
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .notice {
    --notice-pad-x: 1.125rem;
    --notice-pad-y: 1rem;
    width: calc(100vw - 1.5rem);
    max-height: 85dvh;
  }

  .notice__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .notice__close {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. <dialog> 非対応ブラウザ向けフォールバック
   showModal() が使えない場合に JS が .notice--fallback を付与する
   -------------------------------------------------------------------------- */
.notice--fallback[open] {
  position: fixed;
  z-index: 10000;
  inset: 0;
  margin: auto;
  opacity: 1;
  translate: none;
}

.notice-fallback-backdrop {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: var(--notice-backdrop, rgb(15 20 28 / 0.55));
}

/* 画像を包むコンテナのスタイル */
.notice__image-container {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;       /* 画像が大きすぎて間伸びするのを防ぐ最大幅（お好みで調整） */
  margin: 25px auto !important;      /* 上下に程よい余白を作り、左右中央に配置 */
  padding: 0 10px !important;        /* スマホ表示時、左右に少しだけ余白を残す */
  box-sizing: border-box !important;
}

/* 画像本体のスタイル */
.notice__image-container img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;


  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(15, 20, 28, 0.08) !important;

  background-color: #fafafa !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* （オプション）マウスを載せたときに、リンク画像であれば少し浮き上がらせる視覚効果 */
.notice__image-container img:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 20, 28, 0.12) !important;
}

/* --------------------------------------------------------------------------
   9. 印刷時は出さない
   -------------------------------------------------------------------------- */
@media print {
  .notice,
  .notice-fallback-backdrop {
    display: none !important;
  }
}

.notice .editer a[target="_blank"]:after,
.notice .buttons a[target="_blank"]:after {
  content: '';
  display: inline-block;

  width: 16px;
  height: 16px;

  background: url(../img/ico_blank.png) no-repeat left top;
  background-size: 100% auto;

  margin-left: 8px;

  /* 縦方向の位置調整（文字の並びに対して綺麗に中央揃えにします） */
  vertical-align: middle;
  transform: translateY(-1px);
}

.notice .buttons .btn01 a[target="_blank"]:after {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}
.notice .buttons .btn01 a[target="_blank"] {
  padding-right: 35px;
}

.notice .editer strong,
.notice .editer b {
  font-weight: bold !important;
}