:root { --color-text-black: #1f1f20ff; }
a { text-decoration: none; cursor: pointer; }
header { padding: 0px 2.73705vw; background-color: rgb(249, 249, 249); height: 56px; align-items: center; display: flex; justify-content: space-between; }
header * { white-space: nowrap; }
.header__logo { align-items: center; display: flex; font-family: "BIZ UDPGothic", "Hiragino Sans", "Meiryo", sans-serif; }
.header__logo * { opacity: 0.7; }
.header__logo :hover { opacity: 1; }
.header__burger { width: 28px; height: 28px; margin-right: 32px; cursor: pointer; }
.logo { height: 20px; width: 73px; }
.header__nav { display: flex; }
.header__nav > * { opacity: 0.6; }
.header__nav > :hover { opacity: 100; }
.header__nav__item { display: flex; align-items: center; margin-left: 16px; }
.header__nav__item img { width: 28px; height: 28px; }
.header__nav__item span { margin-left: 5px; font-size: 14px; line-height: 1; letter-spacing: 0px; font-feature-settings: "palt"; font-kerning: none; }
.subHeader { display: flex; justify-content: center; padding: 0px 2.73705vw; width: 100%; background-color: rgb(0, 118, 209); color: rgb(255, 255, 255); }
.subHeader * { white-space: nowrap; line-height: 8px; }
.subHeader__item { color: rgb(255, 255, 255); width: max-content; padding: 10px 14px; font-size: 1.4rem; font-weight: bold; display: flex; align-items: center; text-align: center; background-color: rgba(0, 0, 0, 0); }
.subHeader__item:hover { background-color: rgba(0, 0, 0, 0.15); }
.subHeader__logo { display: flex; align-items: center; padding: 10px 14px; background-color: rgba(0, 0, 0, 0); }
.subHeader__logo span { color: rgb(255, 255, 255); font-size: 1.4rem; font-weight: bold; margin-left: 6px; }
.subHeader__logo img { height: 12px; }
.underHeader { display: flex; padding: 11px 2.73705vw; width: 100%; align-items: center; }
.underHeader * { white-space: nowrap; }
.underHeader h3 { color: rgb(51, 51, 51); font-size: 14px; font-weight: bold; margin-right: 16px; }
.underHeader__links { margin-right: 16px; display: flex; max-width: 80vw; overflow: auto; }
.underHeader__links--link { color: rgb(102, 102, 102); width: min-content; display: block; border: 1px solid rgb(204, 204, 204); border-radius: 3px; font-size: 1.3rem; padding: 0px 8px; line-height: 1.53846; white-space: nowrap; margin-right: 12px; }
.underHeader__links--link:hover { color: rgb(51, 51, 51); }
#pupa { color: rgb(4, 94, 140); display: none; }
#pupa:hover { text-decoration: underline; }
#em { color: rgb(102, 102, 102); margin-left: 16px; }
#mainContent { max-width: 640px; margin: 0px 0px 30px 16.6vw; }
article { padding: 0px 10px; }
article h1 { margin-bottom: 8px; font-size: 3.2rem; font-weight: bold; line-height: 1.4; letter-spacing: 0px; }
#author { display: flex; align-items: center; gap: 14px; color: rgb(102, 102, 102); padding-bottom: 24px; }
#author a { font-size: 14px; padding: 1px 8px; color: rgb(34, 34, 34); }
article img { margin: 24px 0px 16px; width: 100%; }
article p { margin-bottom: 32px; font-size: 1.6rem; line-height: 1.875; }
article h2 { display: inline-block; width: 100%; margin-bottom: 16px; color: rgb(51, 51, 51); font-size: 2.3rem; font-weight: bold; line-height: 1.2; }
footer { background-color: rgb(248, 248, 248); }
footer * { white-space: nowrap; }
.footer__top { display: flex; padding: 32px 218px; }
.footer__top a { display: flex; color: rgb(51, 51, 51); }
.footer__top h2 { font-weight: bold; }
.footer__top--container { display: flex; flex-direction: column; gap: 18px; font-size: 13px; width: 50%; padding-left: 22px; }
.footer__top--container > * { width: 90%; }
.footer__top--item { display: flex; gap: 32px; font-weight: bold; }
.footer__top--list { display: flex; flex-direction: column; gap: 0px; }
.footer__top--list ul { display: flex; gap: 14px; flex-wrap: wrap; }
.footer__top--list p { font-weight: bold; margin-bottom: 8px; }
.footer__top--list span { margin-bottom: 8px; }
.footer__middle { display: flex; background-color: rgb(244, 244, 244); padding: 24px 240px 40px; gap: 44px; }
.footer__middle--item { width: 25%; display: flex; flex-direction: column; }
.footer__middle--item h2 { color: rgb(102, 102, 102); font-size: 1.1rem; font-weight: bold; }
.footer__middle--item a { color: rgb(51, 51, 51); font-size: 13px; }
.footer__middle--item a:hover { text-decoration: underline; }
.footer__middle--item p { margin-top: 10px; color: rgb(102, 102, 102); font-size: 1.1rem; }
.footer__middle--item ul { }
.footer__middle--item ul li { margin-top: 10px; }
.footer__bottom { background: rgb(242, 242, 243); padding: 40px 240px; }
.footer__bottom img { width: 60px; height: 16px; opacity: 0.7; }
.footer__bottom img:hover { opacity: 1; }
.footer__bottom--container { margin-top: 20px; border-top: 1px solid rgb(210, 210, 211); display: flex; gap: 37px; padding: 13px 0px; }
.footer__bottom--item { width: max-content; display: flex; flex-direction: column; }
.footer__bottom--item * { font-size: 12px; font-weight: 700; color: rgb(49, 49, 50); margin-top: 6px; font-feature-settings: "palt"; font-kerning: none; letter-spacing: 0px; font-family: "BIZ UDPGothic", "Hiragino Sans", "Meiryo", sans-serif; }
.tab { text-indent: 6px; }
#copyright { display: block; font-size: 12px; color: rgb(49, 49, 50); letter-spacing: 0px; font-weight: 500; margin-top: 60px; }
.head { margin-top: 0px; }
.nogap { gap: 14px; }
.mediaL { display: flex; }
.mediaM { display: none; }
.mediaS { display: none; height: 60px; justify-content: space-between; width: 100%; }
.mediaS { }
.subHeader__rightSection { display: flex; }
.subHeader__rightSection * { padding: 0px 2px; line-height: 1.5; }
.subHeader__leftSection { display: flex; gap: 18px; }
.subHeader__leftSection * { padding: 0px; }
#dropHeader { font-size: 11px; padding-left: 8px; }
@media (max-width: 914px) {
  #mainContent { margin: 0px 12px 30px; }
  .footer__top { padding: 32px 12px; }
  .footer__middle { padding: 40px 12px; gap: 20px; }
  .footer__bottom { padding: 40px 12px; }
  .footer__bottom--container { gap: 12px; }
  #copyright { display: inline-block; width: 90vw; overflow-wrap: break-word; word-break: break-word; white-space: normal; }
  article img { margin: 0px; }
}
@media screen and (max-width: 380px) {
  header { min-width: 312px; }
  .subHeader { min-width: 312px; }
  .mediaS * { padding: 4px; }
  .subHeader__logo { padding-left: 0px; padding-right: 0px; }
}
@media screen and (max-width: 744px) {
  .mediaS { display: flex; }
  .header__nav { display: none; }
  .mediaM { display: none; }
  .mediaL { display: none; }
  .subHeader { justify-content: space-between; }
  .subHeader__logo { padding-left: 0px; padding-right: 0px; }
  .header__nav img { height: 20px; }
  .header__nav__item { flex-direction: column; margin-left: 4px; }
  .header__nav__item span { font-size: 10px; padding: 0px; }
  #alarm, #stats { display: none; }
  header { height: 44px; }
  .header__logo { height: 18px; }
  .header__logo img { margin-right: 4px; }
  .underHeader { display: none; }
  .footer__middle, .footer__top { display: none; }
  .footer__bottom { padding-left: 12px; }
  .footer__bottom--container { flex-direction: column; gap: 24px; }
  #copyright { margin-top: 40px; }
  #mainContent { margin: 0px 0px 30px; }
  #mainContent h1, p, span, h2 { padding-left: 12px; padding-right: 12px; }
}
@media screen and (min-width: 745px) and (max-width: 1168px) {
  .subHeader__item { padding-left: 12px; padding-right: 12px; }
  .mediaS { display: none; }
  .mediaM { display: flex; }
  .mediaL { display: none; }
  .subHeader { justify-content: flex-start; }
  .header__nav img { height: 20px; }
  .header__nav__item { flex-direction: column; }
  .header__nav__item span { font-size: 10px; }
  header { height: 44px; }
  .header__logo { padding-left: 14px; }
  .underHeader h3 { padding-left: 14px; }
}
@media screen and (min-width: 1169px) {
  .subHeader__item { padding-left: 14px; padding-right: 14px; }
  .mediaS { display: none; }
  .mediaM { display: none; }
  .mediaL { display: flex; }
  #pupa { display: block; }
}
.progress__info { font-size: 1.125rem !important; font-weight: 600; }
.top__list { margin-bottom: 40px; padding-top: 12px; font-size: 18px; }
@media screen and (max-width: 991px) {
  .top__list { font-size: 12px; }
}
@media screen and (max-width: 767px) {
  .top__list { margin-bottom: 35px; }
}
.top__list .item { display: flex; justify-content: flex-start; align-items: center; margin-top: 20px; }
.top__list .item .place { display: flex; justify-content: flex-start; align-items: center; flex-shrink: 0; width: 210px; }
@media screen and (max-width: 991px) {
  .top__list .item .place { width: 150px; }
}
.top__list .item .place__num { width: 36px; font-weight: 500; }
@media screen and (max-width: 991px) {
  .top__list .item .place__num { width: 26px; font-size: 14px; }
}
.top__list .item .place__avatar { width: 40px; margin-left: 7px; }
.top__list .item .place__avatar img { display: block; }
.top__list .item .place__name { margin-left: 20px; font-size: 1.125rem; font-weight: 600; }
@media screen and (max-width: 991px) {
  .top__list .item .place__name { margin-left: 30px; }
}
.top__list .item .progress { flex-grow: 1; margin-left: 20px; }
@media screen and (max-width: 991px) {
  .top__list .item .progress { margin-left: 10px; }
}
.progress { display: flex; justify-content: flex-start; align-items: center; background-color: rgb(255, 255, 255); border: medium; box-shadow: none; }
.progress__bar { display: block; height: 25px; width: 0px; margin-right: 20px; background-color: green; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 40px 40px; border-radius: 3px; animation: 2s linear infinite progress-bar-stripes; transition: 800ms ease-out; }
.progress__info { font-size: 18px; }
@media screen and (max-width: 991px) {
  .progress__info { font-size: 8px; }
  .top__list .item { flex-direction: column; }
  .top__list .item .place { width: 100% !important; }
  .progress { width: 100%; margin: 10px 0px; }
}
@media screen and (max-width: 430px) {
  .progress__info { font-size: 1rem !important; }
}
@keyframes progress-bar-stripes {
  0% { background-position: 40px 0px; }
  100% { background-position: 0px 0px; }
}
@keyframes progress-bar-stripes {
  0% { background-position: 40px 0px; }
  100% { background-position: 0px 0px; }
}
#calculator { text-align: center; padding: 10px; background-color: rgb(255, 255, 255); animation: 0.5s ease-in-out fadeIn; width: 100%; }
#slider-container { position: relative; margin-bottom: 2px; height: 110px; }
#slider { width: 100%; opacity: 0; animation: 0.5s ease-in-out 0.5s forwards fadeIn; appearance: none; height: 20px !important; background: rgb(92, 185, 92); border-radius: 10px; outline: none; padding: 0px; position: relative; z-index: 2; }
#slider::-webkit-slider-thumb { appearance: none; width: 25px; height: 25px; background: rgb(255, 255, 255); border-radius: 50%; cursor: pointer; border: 2px solid rgb(52, 152, 219); margin-top: 0px !important; z-index: 3; }
#current-value { width: 40%; margin: -5px auto 10px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; border-left: 2px solid rgb(92, 185, 92); border-right: 2px solid rgb(92, 185, 92); border-bottom: 2px solid rgb(92, 185, 92); }
.slider-labels { width: 100% !important; display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; position: relative; z-index: 1; }
.slider-labels span { position: relative; padding: 0px; }
.slider-labels span::before { content: ""; position: absolute; width: 1px; height: 10px; background: rgb(0, 0, 0); top: 8px; left: 50%; transform: translateX(-50%); margin-top: 10px; }
.result { font-size: 15px; line-height: 1.5; margin-bottom: 1px; opacity: 0; animation: 0.5s ease-in-out 1s forwards fadeIn; }
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#calculator { text-align: center; background-color: rgb(255, 255, 255); animation: 0.5s ease-in-out fadeIn; margin: 0px auto; }
.top__list .item .place__avatar img { display: block; min-width: 50px !important; border-radius: 50%; height: 50px; object-fit: cover; margin: 0px; }
.top__list .item .place { width: 240px; }
:root { --header-padding: 0; }
a, article, blockquote, body, cite, div, em, footer, h1, h2, h3, header, html, img, li, p, section, span, time, ul, video { margin: 0px; padding: 0px; border: 0px; font: inherit; vertical-align: baseline; background: transparent; }
article, footer, header, section { display: block; }
html { font-size: 62.5%; overflow-y: scroll; box-sizing: border-box; }
*, ::after, ::before { box-sizing: border-box; }
header, .subHeader, .underHeader { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Hiragino Sans", "YuGothic", "Arial", sans-serif; }
body { width: 100%; height: auto; color: rgb(51, 51, 51); font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; line-height: 1; letter-spacing: 0px; font-feature-settings: "kern" 0; font-kerning: none; }
::selection { background: rgba(0, 135, 210, 0.8); color: rgb(255, 255, 255); }
::selection { background: rgba(0, 135, 210, 0.8); color: rgb(255, 255, 255); }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
blockquote { quotes: none; }
blockquote::after, blockquote::before { content: none; }
img { font-size: 0px; line-height: 0; vertical-align: top; }
input { font-family: inherit; font-size: inherit; font-weight: inherit; appearance: none; }
input::selection { background: rgba(0, 135, 210, 0.2); color: rgb(51, 51, 51); }
input::selection { background: rgba(0, 135, 210, 0.2); color: rgb(51, 51, 51); }
a:link { text-decoration: none; }
a:link, a:visited { }
a:active, a:hover { }
a:focus { outline: rgba(4, 94, 140, 0.75) solid 2px; outline-offset: -2px; }
#srf-comments a { border-bottom: medium; }
.srf-comments-comment { border-top: 1px solid rgb(175, 175, 175); margin: 0px 16px; padding: 0px; position: relative; }
@media (min-width: 720px) {
  .srf-comments-comment { margin: 0px; padding: 0px 24px; }
}
.srf-comments-comment:first-child:not(.srf-comments-comment--reply) { border-top: 0px; }
.srf-comments-comment__user { color: rgb(255, 51, 52); display: flex; font-size: 16px; font-variation-settings: "wght" 400; font-weight: 600; letter-spacing: 0.4px; margin: 20px 0px 2px; }
@media (min-width: 720px) {
  .srf-comments-comment__user { margin-top: 24px; }
}
.srf-comments-comment__time { color: var(--t-comment-time); display: block; font-size: 12px; font-variation-settings: "wght" 400; font-weight: 400; letter-spacing: 0.4px; line-height: 1.25; padding-bottom: 15px; }
.srf-comments-comment__content { color: var(--t-comment-content); font-size: 18px; font-variation-settings: "wght" 300; font-weight: 300; letter-spacing: 0.4px; padding-bottom: 15px; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .srf-comments-comment__content { font-size: 20px; letter-spacing: 0.2px; }
}
.srf-comments-comment__replies-wrapper { margin-bottom: 12px; margin-left: 10px; }
@media (min-width: 720px) {
  .srf-comments-comment__replies-wrapper { margin-left: 64px; }
}
.show-more-bar { --t-show-more-bar-border: #ebebe5; }
@media (prefers-color-scheme: dark) {
  .show-more-bar { --t-show-more-bar-border: #383732; }
}
.show-more-bar { display: flex; }
.show-more-bar--with-borders { border-color: var(--t-show-more-bar-border); border-width: 1px 0px; }
.show-more-bar__child { flex: 0 0 auto; margin-right: 8px; margin-top: 0px; width: auto; }
.show-more-bar__child:last-child { margin-left: auto; margin-right: 0px; }
@media (max-width: 719px) {
  .show-more-bar__child.show-more-bar__child { width: auto; }
}
.show-more-bar__child--grow { flex-grow: 1; border-radius: 15px; }
.srf-comments-comments { max-width: 100%; }
@media (min-width: 720px) {
  .srf-comments-comments { margin-left: auto; margin-right: auto; }
}
.srf-comments-footer { align-items: center; display: flex; justify-content: center; margin-top: 12px; }
@media (min-width: 720px) {
  .srf-comments-footer { margin-top: 24px; }
}
.srf-comments-show-more-bar-container { flex-grow: 1; margin-top: 16px; }
.srf-comments-content-wrapper { max-height: 0px; overflow-y: hidden; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1); }
.srf-comments-content-wrapper--expanded { max-height: 100000px; transition: max-height 0.3s ease-in-out; }
body::before { content: "mobile"; display: none; }
@media (min-width: 720px) and (max-width: 1023px) {
  body::before { content: "tablet"; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body::before { content: "desktop"; }
}
@media (min-width: 1280px) {
  body::before { content: "desktop-wide"; }
}
:root { --t-text-list: #005ab4; }
@media (prefers-color-scheme: dark) {
  :root { --t-text-list: #ff6669; }
}
:root { --t-a-underline: #005ab4; --t-a-underline-hover: #8d0614; --t-a-underline-active: #6a0b0c; }
@media (prefers-color-scheme: dark) {
  :root { --t-a-underline: #ff6669; --t-a-underline-hover: #ff9193; --t-a-underline-active: #ffbbbc; }
}
:root { --t-button-label: #22211d; --t-button-label-bg: #ebebe5; --t-button-label-hover: #dadad2; }
@media (prefers-color-scheme: dark) {
  :root { --t-button-label: #f5f5f2; --t-button-label-bg: #4e4d47; --t-button-label-hover: #5e5d56; }
}
:root { --t-caret-icon-red-mask: #005ab4; }
@media (prefers-color-scheme: dark) {
  :root { --t-caret-icon-red-mask: #ff6669; }
}
#srf-comments:target { scroll-margin-top: 100px; }
.button { background: none; border-width: 1px medium; border-style: solid none; border-color: rgb(120, 120, 120) currentcolor; border-image: none; margin: 0px; padding: 5px 0px; color: red; text-decoration: underline; cursor: pointer; text-align: center; border-radius: 0px; }
.my-link { color: red; text-decoration: underline !important; }
body { margin: 0px; font-family: "Open Sans", sans-serif; background-color: transparent; }
input { transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out; }
input:focus { border-color: rgb(223, 225, 233); background-color: rgb(234, 241, 243); box-shadow: none; outline: 0px; }
header { padding: 0px 2.73705vw; background-color: rgb(249, 249, 249); height: 56px; align-items: center; display: flex; justify-content: space-between; }
html { scroll-behavior: smooth; }
#form { scroll-margin-top: 100px; }