@charset "utf-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  text-decoration: none;
  text-underline-offset: 4px;
  color: inherit;
  background: transparent;
  background-repeat: no-repeat;
  &:* {
    text-decoration: inherit;
    color: inherit;
  }
}

html {
  --bdr1: 1px solid #bfbfbf;
  --grad1: linear-gradient(90deg, #cdfff4, #c6fffd, #bff5ff, #b9e7ff, #b3e7ff);
  --liBdr1: 1px solid #2687bf80;
  --len1: clamp(48px, calc((100dvw * 16 + 6144px) / 288), 64px);
  /*※ (100dvw * 16 - 6144) / 288
      ⇔{100dvw * a + b, a = 16/288, b = 6144/288}
      ⇔{100dvw * a + b, 48 = 480 * a + b, 64 = 768 * a + b} */
  --undlin: underline color(from currentColor srgb r g b / .3);
  line-height: 1;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: 'palt';
  letter-spacing: .1em;
  line-break: strict;
  word-break: break-word;
  color: #404040;
}
body, #srchDlg[open] {
  display: flex;
  flex-direction: column;
}
body {
  min-height: 100dvh;
  overflow-x: hidden;
  background: url('assets/pg-bg-pt.svg') top;
}
main, .pgHdr > div, .pgFtr > ul, #srchDlg {
  width: min(768px, 100%);
  margin-inline: auto;
}
main, .pgHdr > div, .pgFtr > ul {
  padding: 0 var(--len1);
}
header, .pgFtr {
  text-align: center;
}
main {
  flex-grow: 1;
}
h2, footer {
  margin-top: 80px;
}
h2, .qaFtrBdr {
  display: flex;
  &::before, &::after {
    content: '';
    display: block;
    flex-grow: 1;
    height: 15px;
    background-repeat: space;
  }
}
h2 {
  align-items: center;
  height: 35px;
  marign-inline: 8px;
  margin-bottom: 32px;
  counter-reset: numdSect;
  @media (width > 400px) {
    &::before {
      background-image: url('assets/hdg-bef-bg-pt.svg');
    }
    &::after {
      background-position: right;
      background-image: url('assets/hdg-aft-bg-pt.svg');
    }
  }
}
main > :first-child > :first-child{
  margin-top: 48px;
}
h3, h4 {
  line-height: 1.5;
}
h3, dt, .fullTxt a, strong {
  font-weight: 500;
}
h4, b {
  font-weight: 700;
}
h3 {
  font-size: 20px;
  color: #336380;
}
h4 {
  margin: 22px 0 4px;
  font-size: 16px;
  color: #3d7799;
}

p, dt, dd {
  line-height: 2;
}
p, dd {
  text-align: justify;
  white-space: pre-line;
}
@counter-style circled-decimal {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳
           ㉑ ㉒ ㉓ ㉔ ㉕ ㉖ ㉗ ㉘ ㉙ ㉚ ㉛ ㉜ ㉝ ㉞ ㉟
           ㊱ ㊲ ㊳ ㊴ ㊵ ㊶ ㊷ ㊸ ㊹ ㊺ ㊻ ㊼ ㊽ ㊾ ㊿;
  suffix: ' ';
}
ol ol {
  list-style: circled-decimal;
}
.numdSect{
  /* position: relative;
  padding-left: 1.5em; */
  &::before {
    content: counter(numdSect, circled-decimal) ' ';
    counter-increment: numdSect;
    /* display: block;
    position: absolute;
    left: 0;
    top: 0; */
  }
}
ul {
  list-style: none;
}
:is(dt, .timeLbl, .lbl)::after {
  content: '：';
  font-feature-settings: normal;
}
summary {
  list-style: none;
}

a[target=_blank]::after {
  content: url('assets/extLinkIcon.svg');
  margin-left: .25em;
}
footer :not(small) > a, :is(.fullTxt, .tagsUl) a {
  text-decoration: var(--undlin);
}
:is(a, button, summary):hover {
  opacity: .75;
  cursor: pointer;
}
summary::before, .mkdAnc::after {
  content: '▶';
  display: inline-block;
  scale: .75;
  opacity: 0.8;
}
summary::before {
  margin-right: .25em;
}
details[open] > summary::before {
  content: '▼';
}
.mkdAnc::after {
  margin-left: .25em;
}
i {
  font-style: italic;
}
s {
  text-decoration: line-through;
}
small {
  font-size: 12px;
  color: #bfbfbf;
}
time, .timeLbl {
  font-size: 12px;
  color: #999;
}
strong {
  background: #ffac5933;
}

img {
  max-width: 100%;
  height: auto;
}

:not(input) {
  user-select: none;
}

.pgHdr {
  background: var(--grad1);
  & > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  a {
    margin-right: 16px;
  }
}

.pgFtr {
  color: #8f8f8f;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
  }
  small {
    display: block;
    margin-top: 64px;
    line-height: 64px;
    color: #afafaf;
    background: #f7f7f7;
  }
}

.srchForm {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
  padding-inline: 8px;
}
.srchTxtinp, .srchSbmbtn {
  appearance: none;
}
.srchTxtinp, .srchSbmbtn > img {
  height: 32px;
}
.srchTxtinp {
  flex: 1;
  line-height: 2;
  padding: 0 .5em 0 .6em;
  border: var(--bdr1);
  letter-spacing: 0;
  background: #fff;
}
.srchSbmbtn > img {
  object-fit: none;
  object-position: center;
  color: #fff;
  background: #707070;
}
#srchDlg {
  display: none;
  &[open] {
    place-content: center;
    position: fixed;
    height: 100dvh;
  }
  &::backdrop {
    background: #ffffffef;
  }
}
#srchDlg-closeBtn {
  position: fixed;
  top: var(--len1);
  right: var(--len1);
  font-size: 3rem;
}

.allCatsUl {
  & > li {
    &:first-child {
      border-top: var(--liBdr1);
    }
    & > details > summary {
      line-height: 2.5;
      font-weight: 500;
      color: #336380;
    }
  }
  li {
    border-bottom: var(--liBdr1);
    & > details &:last-child {
      border-bottom: none;
    }
    ul {
      margin-left: 20px;
    }
  }
  summary, a, button {
    padding-left: 8px;
  }
  details[open] > summary {
    border-bottom: var(--liBdr1);
  }
  a {
    display: block;
  }
}

.tagsUl, .catsUl {
  display: flex;
  flex-wrap: wrap;
  li {
    display: inline-block;
    flex: none;
  }
}
.tagsUl {
  :is(a, button)::before {
    content: '# ';
  }
}

.noArtcsHdg {
  text-align: center;
}

.qasUl {
  li {
    display: flex;
    gap: 16px;
    margin: 0 8px 40px 8px;
    &::before {
      content: '';
      display: block;
      flex: none;
      width: 4px;
      border-radius: 2px;
      background: #6bcee099;
    }
  }
  h3 {
    margin-top: 4px;
    line-height: 28px;
    font-size: 18px;
    color: #335e66;
  }
}

.pgNavUl {
  display: flex;
  justify-content: space-evenly;
  margin-top: 80px;
  li {
    line-height: 18px;
    color: #8f8f8f;
  }
  .disabled {
    opacity: .4;
  }
  span {
    font-size: 16px;
  }
}

.fullTxt {
  h3 {
    margin: 35px 0 3px;
  }
  div, li {
    line-height: 2;
  }
  a {
    color: #7080cc;
  }
  & > :is(div, p, ol, ul) {
    & + & {
      margin-top: 1em;
    }
  }
  ol, ul {
    padding-left: 2em;
  }
  ul {
    list-style: disc;
  }
  dl {
    padding-left: 1em;
  }
  li, li > p, :not(h2) img {
    margin-block: .5em;
  }
  dt {
    margin-top: .5em;
  }
  dd {
    padding-left: 1em;
  }
  img {
    display: inline-block;
  }
}