:root {
  --notice-text-2xs: 0.625rem; /* 10px */
  --notice-text-xs: 0.75rem; /* 12px */
  --notice-text-sm: 0.875rem; /* 14px */
  --notice-text-base: 1rem; /* 1rem (16px) */
  --notice-text-lg: 1.125rem; /* 1.125rem (18px) */
  --notice-text-xl: 1.25rem; /* 20px */
  --notice-text-2xl: 1.5rem; /* 24px  */
  --notice-text-3xl: 1.75rem; /* 28px */
  --notice-text-4xl: 1.875rem; /* 30px */
  --notice-text-5xl: 2rem; /* 32px body */
  --notice-text-6xl: 2.25rem; /* 36px  h2, h3 */
  --notice-text-7xl: 2.5rem; /* 40px h1 */
  --notice-text-8xl: 2.75rem; /* 44px */
  --notice-text-9xl: 3rem; /* 48px */
  --notice-text-10xl: 3.25rem; /* 52px */

  --notice-space-1: 0.25rem; /* 4px */
  --notice-space-2: 0.5rem; /* 8px */
  --notice-space-3: 0.75rem; /* 12px */
  --notice-space-4: 1rem; /* 16px */
  --notice-space-5: 1.25rem; /* 20px */
  --notice-space-6: 1.5rem; /* 24px */
  --notice-space-7: 1.75rem; /* 28px */
  --notice-space-8: 2rem; /* 32px */
  --notice-space-9: 2.25rem; /* 36px */
  --notice-space-10: 2.5rem; /* 40px */
  --notice-space-11: 2.75rem; /* 44px */
  --notice-space-12: 3rem; /* 48px */
  --notice-space-13: 3.25rem; /* 52px */
  --notice-space-14: 3.5rem; /* 56px */
  --notice-space-15: 3.75rem; /* 60px */
  --notice-space-16: 4rem; /* 64px */
  --notice-space-17: 4.25rem; /* 68px */
  --notice-space-18: 4.5rem; /* 72px */
  --notice-space-19: 4.75rem; /* 76px */
  --notice-space-20: 5rem; /* 80px */

  --notice-black-a1: rgb(0, 0, 0 / 0.1);
  --notice-black-a2: rgb(0 0 0 / 0.2);
  --notice-black-a3: rgb(0 0 0 / 0.3);
  --notice-black-a4: rgb(0 0 0 / 0.4);
  --notice-black-a5: rgb(0 0 0 / 0.5);
  --notice-black-a6: rgb(0 0 0 / 0.6);
  --notice-black-a65: rgb(0 0 0 / 0.65);
  --notice-black-a7: rgb(0 0 0 / 0.7);
  --notice-black-a8: rgb(0 0 0 / 0.8);
  --notice-black-a9: rgb(0 0 0 / 0.9);
  --notice-black-a10: rgb(0 0 0 / 1);

  --notice-white-a0: rgb(255 255 255 / 0);
  --notice-white-a1: rgb(255 255 255 / 0.1);
  --notice-white-a2: rgb(255 255 255 / 0.2);
  --notice-white-a3: rgb(255 255 255 / 0.3);
  --notice-white-a4: rgb(255 255 255 / 0.3);
  --notice-white-a5: rgb(255 255 255 / 0.5);
  --notice-white-a6: rgb(255 255 255 / 0.5);
  --notice-white-a65: rgb(255 255 255 / 0.65);
  --notice-white-a7: rgb(255 255 255 / 0.7);
  --notice-white-a8: rgb(255 255 255 / 0.7);
  --notice-white-a85: rgb(255 255 255 / 0.85);
  --notice-white-a9: rgb(255 255 255 / 0.9);
  --notice-white-a10: rgb(255 255 255 / 1);

  --notice-blue-a75: rgba(40, 195, 255, 0.75);
  --notice-blue-a10: rgba(40, 195, 255, 1);

  --notice-blue2-a10: rgba(95, 220, 240, 1);
  --notice-color-transparent: transparent;

  --notice-color-white: var(--notice-white-a10);
  --notice-color-primary: var(--notice-blue-a10);
  --notice-color-secondary: #5fdcf0;
  --notice-color-header: rgba(95, 220, 240, 0.15);
  --notice-color-text: #62628e;
  --notice-color-muted: rgba(98, 98, 142, 0.55);
  --notice-color-background: var(--notice-white-a85);
  --notice-table-border: 4px solid rgba(231, 231, 238, 1);

  --notice-rounded-sm: 0.5rem;
  --notice-rounded-md: 1rem;
  --notice-rounded-lg: 1.5rem;

  --notice-font-family: "HiraKakuProN-W6", "Noto Sans CJK JP BOLD", sans-serif;

  --notice-listitem-marker-color: rgb(98 98 142/ 1);
  --notice-listitem-marker-background-color: transparent;
  --notice-listitem-marker-font-family: var(--notice-font-family);
  --notice-listitem-marker-font-size: var(--notice-text-2xl);
}

/* ------ reset.css ------ */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0
}

ul[role='list'],
ol[role='list'] {
  list-style: none
}

body {
  line-height: 1.5
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1
}

h1,
h2,
h3,
h4 {
  text-wrap: balance
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor
}

img,
picture {
  max-width: 100%;
  display: block;
  touch-action: pan-x pan-y;
  user-select: none;
}

input,
button,
textarea,
select {
  font: inherit
}

textarea:not([rows]) {
  min-height: 10em
}

:target {
  scroll-margin-block: 5ex
}
/* ------ reset.css ------ */

html {
  font-size: 7.2px; /* 16px * 0.45 */
  scroll-behavior: smooth;
  /* OSのダークテーマに引きずられてスクロールバー等がダーク化するのを防ぐためライト固定 */
  color-scheme: light;
}

body {
  font-family: var(--notice-font-family);
  background-color: var(--notice-color-background);
  color: var(--notice-color-text);
}

main {
  width: 100%;
  font-size: var(--notice-text-2xl);
  font-weight: bold;
  line-height: 1.25;
  border: 0;
  display: block;
  position: relative;
  outline: 0;
}


/* text */
.notice__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--notice-space-4);
}

.notice__category {
  font-size: var(--notice-text-3xl);
  line-height: 1.5;
  width: 216px;
  height: 40px;
  font-weight: bold;
  background: #ffbb54;
  text-align: center;
  border-radius: var(--notice-rounded-lg);
}

.notice__time {
  color: var(--notice-color-muted);
  font-size: var(--notice-text-5xl);
  font-weight: bold;
  line-height: 1.5;
}

.notice__ltr {
  text-align: left;
}
.notice__rtl {
  text-align: right;
}

.notice__paragraph {
  margin: 0;
  position: relative;
}

.notice__h1 {
  font-size: var(--notice-text-7xl);
  color: var(--notice-color-text);
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
}
.notice__h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--notice-space-2) var(--notice-space-2) var(--notice-space-2)
    var(--notice-space-8);
  gap: var(--notice-space-2);

  width: 100%;
  min-height: var(--notice-space-18);

  background: var(--notice-blue-a75);
  border-radius: var(--notice-rounded-md);

  font-size: var(--notice-text-6xl);
  font-weight: bold;
  color: var(--notice-color-white);

  margin-bottom: var(--notice-space-10);
}
.notice__h3 {
  font-size: var(--notice-text-4xl);
  font-weight: bold;
  border-bottom: solid 2px var(--notice-color-white);
  padding-bottom: var(--notice-space-5);
  margin-bottom: var(--notice-space-6);
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4MCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyODAgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjUxMzM4MSA3LjE2MDYzQzMuNzc5NzUgNS40NzY3IDUuNDc0MSAzLjc3OTc1IDcuMTYwNjQgMC41MTMzNzlDNy41MTQ2IC0wLjE3MTEyNiA4LjQ4OCAtMC4xNzExMjYgOC44MzkzNyAwLjUxMzM3OUMxMC41MjMzIDMuNzc5NzUgMTIuMjIwMyA1LjQ3NDEgMTUuNDg2NiA3LjE2MDYzQzE2LjE3MTEgNy41MTQ2IDE2LjE3MTEgOC40ODggMTUuNDg2NiA4LjgzOTM3QzEyLjIyMDMgMTAuNTIzMyAxMC41MjU5IDEyLjIyMDMgOC44MzkzNyAxNS40ODY2QzguNDg1NCAxNi4xNzExIDcuNTEyIDE2LjE3MTEgNy4xNjA2MyAxNS40ODY2QzUuNDc2NyAxMi4yMjAzIDMuNzc5NzUgMTAuNTI1OSAwLjUxMzM4MSA4LjgzOTM2Qy0wLjE3MTEyNSA4LjQ4NTQgLTAuMTcxMTI1IDcuNTExOTkgMC41MTMzODEgNy4xNjA2M1oiIGZpbGw9IiM2MjYyOEUiIGZpbGwtb3BhY2l0eT0iMC4xNSIvPgo8Y2lyY2xlIGN4PSIyNyIgY3k9IjgiIHI9IjMiIGZpbGw9IiM2MjYyOEUiIGZpbGwtb3BhY2l0eT0iMC4xNSIvPgo8cmVjdCB4PSIzOCIgeT0iNi41IiB3aWR0aD0iMTIwNCIgaGVpZ2h0PSIzIiByeD0iMSIgZmlsbD0iIzYyNjI4RSIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+CjxjaXJjbGUgY3g9IjEyNTMiIGN5PSI4IiByPSIzIiBmaWxsPSIjNjI2MjhFIiBmaWxsLW9wYWNpdHk9IjAuMTUiLz4KPHBhdGggZD0iTTEyNjQuNTEgNy4xNjA2M0MxMjY3Ljc4IDUuNDc2NyAxMjY5LjQ3IDMuNzc5NzUgMTI3MS4xNiAwLjUxMzM3OUMxMjcxLjUxIC0wLjE3MTEyNiAxMjcyLjQ5IC0wLjE3MTEyNiAxMjcyLjg0IDAuNTEzMzc5QzEyNzQuNTIgMy43Nzk3NSAxMjc2LjIyIDUuNDc0MSAxMjc5LjQ5IDcuMTYwNjNDMTI4MC4xNyA3LjUxNDYgMTI4MC4xNyA4LjQ4OCAxMjc5LjQ5IDguODM5MzdDMTI3Ni4yMiAxMC41MjMzIDEyNzQuNTMgMTIuMjIwMyAxMjcyLjg0IDE1LjQ4NjZDMTI3Mi40OSAxNi4xNzExIDEyNzEuNTEgMTYuMTcxMSAxMjcxLjE2IDE1LjQ4NjZDMTI2OS40OCAxMi4yMjAzIDEyNjcuNzggMTAuNTI1OSAxMjY0LjUxIDguODM5MzZDMTI2My44MyA4LjQ4NTQgMTI2My44MyA3LjUxMTk5IDEyNjQuNTEgNy4xNjA2M1oiIGZpbGw9IiM2MjYyOEUiIGZpbGwtb3BhY2l0eT0iMC4xNSIvPgo8L3N2Zz4K)
    no-repeat center bottom;
  background-size: contain;
}
.notice__indent {
  --lexical-indent-base-value: 40px;
}
.notice__textBold {
  color: var(--notice-color-primary);
}

.notice__textHighlight {
  background: rgba(255, 212, 0, 0.14);
  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
}
.notice__textItalic {
  font-style: italic;
}
.notice__textUnderline {
  text-decoration: underline;
}

.notice__textStrikethrough {
  text-decoration: line-through;
}

.notice__textUnderlineStrikethrough {
  text-decoration: underline line-through;
}

.notice__textSubscript {
  font-size: 0.8em;
  vertical-align: sub !important;
}
.notice__textSuperscript {
  font-size: 0.8em;
  vertical-align: super;
}

.notice__textLowercase {
  text-transform: lowercase;
}
.notice__textUppercase {
  text-transform: uppercase;
}
.notice__textCapitalize {
  text-transform: capitalize;
}

.notice__link {
  color: var(--notice-color-secondary);
  display: inline-block;
  text-decoration: none;
  border-bottom: solid 1px var(--notice-color-secondary);
}
.notice__link:hover {
  text-decoration: none;
  border-bottom: solid 1px var(--notice-white-a0);
  cursor: pointer;
}

/* list */
.notice__ol1 {
  margin-top: var(--notice-space-6);
  margin-bottom: var(--notice-space-6);
  padding-left: var(--notice-space-6);
  list-style-position: outside;
}
.notice__ol2 {
  margin-top: var(--notice-space-6);
  margin-bottom: var(--notice-space-6);
  padding-left: var(--notice-space-6);
  list-style-type: upper-alpha;
  list-style-position: outside;
}
.notice__ol3 {
  margin-top: var(--notice-space-6);
  margin-bottom: var(--notice-space-6);
  padding-left: var(--notice-space-6);
  list-style-type: lower-alpha;
  list-style-position: outside;
}
.notice__ol4 {
  margin-top: var(--notice-space-6);
  margin-bottom: var(--notice-space-6);
  padding-left: var(--notice-space-6);
  list-style-type: upper-roman;
  list-style-position: outside;
}
.notice__ol5 {
  margin-top: var(--notice-space-6);
  margin-bottom: var(--notice-space-6);
  padding-left: var(--notice-space-6);
  list-style-type: lower-roman;
  list-style-position: outside;
}
.notice__ul {
  margin-top: var(--notice-space-6);
  margin-bottom: var(--notice-space-6);
  padding-left: var(--notice-space-6);
  list-style-position: outside;
}
.notice__listItem {
  margin: var(--notice-space-2) var(--notice-space-6);
}
.notice__listItem::marker {
  color: var(--notice-listitem-marker-color);
  background-color: var(--notice-listitem-marker-background-color);
  font-family: var(--notice-listitem-marker-font-family);
  font-size: var(--notice-listitem-marker-font-size);
}

.notice__nestedListItem {
  list-style-type: none;
}
.notice__nestedListItem:before,
.notice__nestedListItem:after {
  display: none;
}


/* Table */

.notice__tableScrollableWrapper {
  overflow-x: auto;
  margin: 0px 25px 30px 0px;
}
.notice__tableScrollableWrapper > .notice__table {
  /* Remove the table's vertical margin and put it on the wrapper */
  margin-top: 0;
  margin-bottom: 0;
}
.notice__tableAlignmentCenter {
  margin-left: auto;
  margin-right: auto;
}
.notice__tableAlignmentRight {
  margin-left: auto;
}

.notice__table {
  border-collapse: collapse;
  border-spacing: 0;
  overflow-y: scroll;
  overflow-x: scroll;
  table-layout: fixed;
  max-width: 100%;
  box-sizing: border-box;
  border-collapse: separate;
  margin-top: var(--notice-space-4);
  margin-bottom: var(--notice-space-4);

  & > thead > tr:first-of-type > .notice__tableCell:first-child,
  & > tbody > tr:first-of-type > .notice__tableCell:first-child,
  & > tr:first-of-type > .notice__tableCell:first-child {
    border-top-left-radius: var(--notice-rounded-lg);
  }

  & > thead > tr:first-of-type > .notice__tableCell,
  & > tbody > tr:first-of-type > .notice__tableCell,
  & > tr:first-of-type > .notice__tableCell {
    border-top: var(--notice-table-border);
  }

  & > thead > tr > .notice__tableCell,
  & > tbody > tr > .notice__tableCell,
  & > tr > .notice__tableCell {
    border-left: var(--notice-table-border);
  }

  & > thead > tr > .notice__tableCell,
  & > tbody > tr > .notice__tableCell,
  & > tr > .notice__tableCell {
    border-bottom: var(--notice-table-border);
  }

  & > thead > tr > .notice__tableCell:last-child,
  & > tbody > tr > .notice__tableCell:last-child,
  & > tr > .notice__tableCell:last-child {
    border-right: var(--notice-table-border);
  }

  & > thead > tr:first-of-type > .notice__tableCell:last-child,
  & > tbody > tr:first-of-type > .notice__tableCell:last-child,
  & > tr:first-of-type > .notice__tableCell:last-child {
    border-top-right-radius: var(--notice-rounded-lg);
  }

  & > thead > tr:last-of-type > .notice__tableCell:first-child,
  & > tbody > tr:last-of-type > .notice__tableCell:first-child,
  & > tr:last-of-type > .notice__tableCell:first-child {
    border-bottom-left-radius: var(--notice-rounded-lg);
  }

  & > thead > tr:last-of-type > .notice__tableCell:last-child,
  & > tbody > tr:last-of-type > .notice__tableCell:last-child,
  & > tr:last-of-type > .notice__tableCell:last-child {
    border-bottom-right-radius: var(--notice-rounded-lg);
  }
}

.notice__tableFullSize {
  width: 100%;
}

.notice__tableCell {
  min-width: 75px;
  vertical-align: top;
  text-align: start;
  padding: var(--notice-space-6);
  position: relative;
  outline: none;
  overflow: auto;
  font-size: var(--notice-text-xl);
}
/*
  A firefox workaround to allow scrolling of overflowing table cell
  ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1904159
*/
.notice__tableCell > * {
  overflow: inherit;
}

.notice__tableCellHeader {
  background-color: var(--notice-color-header) !important;
  text-align: start;
}


.notice__tableScrollableWrapper.notice__tableFrozenRow {
  /* position:sticky needs overflow:clip or visible
     https://github.com/w3c/csswg-drafts/issues/865#issuecomment-350585274 */
  overflow-x: clip;
}
.notice__tableFrozenRow tr:nth-of-type(1) > td {
  overflow: clip;
  background-color: var(--notice-white-a10);
  position: sticky;
  z-index: 2;
  top: 88px;
}
.notice__tableFrozenRow tr:nth-of-type(1) > th {
  overflow: clip;
  background-color: var(--notice-table-frozen-header);
  position: sticky;
  z-index: 2;
  top: 88px;
}
.notice__tableFrozenRow tr:nth-of-type(1) > th:after,
.notice__tableFrozenRow tr:nth-of-type(1) > td:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: var(--notice-table-border);
}
.notice__tableFrozenColumn tr > td:first-child {
  background-color: var(--notice-white-a10);
  position: sticky;
  z-index: 2;
  left: 0;
}
.notice__tableFrozenColumn tr > th:first-child {
  background-color: var(--notice-table-frozen-header);
  position: sticky;
  z-index: 2;
  left: 0;
}
.notice__tableFrozenColumn tr > :first-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  border-right: var(--notice-table-border);
}


/* embed */
.notice-cimage-wrapper {
  position: relative;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* 正方形向けプリセット: 1:1画像を70%幅の16:9画像と同じ高さで表示する(70% × 9/16 = 39.375%) */
.notice-cimage-wrapper--square {
  max-width: 39.375%;
}

.notice__embedBlock {
  user-select: none;
}
.notice__embedBlockFocus {
  outline: 2px solid rgb(60, 132, 244);
}

.notice__layoutContainer {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.notice__layoutItem {
  padding: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

hr {
  border: none;
  border-top: solid 2px var(--notice-black-a15);
  margin: 1rem 0;
}

/* ------ PC(Standalone/Vuplex) 向け上書き ------
 * モバイルWebView(iOS/Android)とPCのVuplex(Chromium)では実効解像度・背景・スクロールバー描画が異なるため、
 * common.js が UA を見て付与した html.platform-desktop クラスをセレクタにして PC のみへ適用する。
 * メディアクエリ(pointer/hover)だと iPad + 外部キーボード等で誤発火するため UA ベースに変更している */
html.platform-desktop {
  /* モバイル向けに 7.2px = 16px * 0.45 を入れていたが、PCでは小さすぎるため標準値に戻す */
  font-size: 16px;
}

html.platform-desktop body {
  /* Vuplexの透過背景が下地に重なるとグレーに見えるため、PCでは完全不透明な白に固定 */
  background-color: var(--notice-white-a10);
}

/* Chromiumのデスクトップ標準スクロールバー(上下ボタン付き)をWebKit疑似要素で抑止しつつ、
 * スクロールバー本体は表示したままにする */
html.platform-desktop ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html.platform-desktop ::-webkit-scrollbar-track {
  background: rgba(98, 98, 142, 0.08);
}
html.platform-desktop ::-webkit-scrollbar-thumb {
  background: rgba(98, 98, 142, 0.4);
  border-radius: 6px;
}
html.platform-desktop ::-webkit-scrollbar-thumb:hover {
  background: rgba(98, 98, 142, 0.6);
}
html.platform-desktop ::-webkit-scrollbar-button {
  display: none;
}