@charset 'UTF-8';

/* ページ遷移アニメーション */
@view-transition {
  navigation: auto;
}

@keyframes page-transition-fade-out {
  from {
    opacity: 1;
    filter: blur(0);
  }

  to {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes page-transition-fade-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

::view-transition-new(root),
::view-transition-old(root) {
  mix-blend-mode: normal;
}

::view-transition-group(root) {
  animation-duration: var(--transition-duration);
  animation-timing-function: linear;
}

::view-transition-new(root) {
  animation-name: page-transition-fade-in;
}

::view-transition-old(root) {
  animation-name: page-transition-fade-out;
}

.is-archive-navigation img {
  view-transition-name: none !important;
}

/* ローディング */
.is-contents-invisible :is(header, main, footer) {
  opacity: 0;
}

.is-fv .g-loading {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.g-loading__inner {
  --tile-size: 200px;
  position: fixed;
  inset: 0 auto auto 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile-size));
  grid-auto-rows: var(--tile-size);
  width: max-content;
  height: max-content;
  transform: translate(calc(var(--tile-size) * -0.5), calc(var(--tile-size) * -0.5));
  pointer-events: none;
  background-color: var(--clr-bg);

  @media (max-width: 1023px) {
    --tile-size: 150px;
  }

  @media (max-width: 767px) {
    --tile-size: 100px;
  }
}

.g-loading__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 5;
  width: 200px;
  aspect-ratio: 3/1.1;
  mask: url(../img/site-logo2.svg) center/contain no-repeat;
  background-color: var(--clr-txt);
}

.g-loading__tile {
  width: var(--tile-size);
  aspect-ratio: 1;
  background-color: var(--clr-bg);
}

.g-loading {
  display: none;
}

/* ページ内リンクのスクロールアニメーション化 */
*,
*::before,
*::after,
dialog,
[popover] {
  scroll-behavior: smooth;
  scroll-margin-top: var(--header-height);
}

/* 「視差効果を減らす」設定の反映 */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after,
  dialog,
  [popover] {
    scroll-behavior: auto;
  }
}

/* フォント読み込み */
@font-face {
  font-family: 'Noto Sans JP';
  src: url(../fonts/notosansjp-variable.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'inter';
  src: url(../fonts/inter-variable.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'inter';
  src: url(../fonts/inter-italic-variable.woff2) format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url(../fonts/jetbrainsmono-variable.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url(../fonts/jetbrainsmono-italic-variable.woff2) format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BIZ UDPGothic';
  src: url(../fonts/bizudpgothic-regular.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'BIZ UDPGothic';
  src: url(../fonts/bizudpgothic-bold.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 共通設定 */
  interpolate-size: allow-keywords;
  color-scheme: light dark;
  --header-height: calc(60px + 32px);

  /* CSS内でprefers-color-schemeによる判定を行うとチラつきの原因になる */
  /* JSでダークかライトのどちらかに断定させて、それにCSSを従わせる */

  /* ライトモード時の設定値 */
  --light-clr-bg: #fcfcfb;
  --light-clr-txt: #2f3133;
  --light-clr-txt-muted: #325d5d;
  --light-clr-main: #3c9c96;
  --light-clr-main-pale: #8acbc5;
  --light-clr-main-deep: #17635f;
  --light-clr-sub: #5db7af;
  --light-clr-sub-pale: #a6dcd6;
  --light-clr-sub-deep: #28756f;
  --light-clr-accent: #f4c95d;
  --light-clr-accent-pale: #ffe29a;
  --light-clr-accent-deep: #b57b00;
  --light-clr-alert: #c83c4a;
  --light-clr-alert-bg: #fbedef;
  --light-clr-alert-border: #e3a1a8;
  --light-clr-outline: #a6d4f2;
  --light-clr-selection-bg: #ccd5e0aa;
  --light-border: none;
  --light-border-muted: 1px solid #e0ebeb;
  --light-border-strong: 1px solid #699B9B;
  --light-radius: 16px;
  --light-shadow: 1px 1px 4px #1d8a8a33;
  --light-font-family: 'inter', 'Noto Sans JP', sans-serif;
  --light-transition-duration: 0.4s;

  /* ダークモード時の設定値 */
  --dark-clr-bg: #111518;
  --dark-clr-txt: #edf7f7;
  --dark-clr-txt-muted: #7ea9a9;
  --dark-clr-main: #48d8d8;
  --dark-clr-main-pale: #5fe5e5;
  --dark-clr-main-deep: #1a8f92;
  --dark-clr-sub: #89fff5;
  --dark-clr-sub-pale: #a4fff7;
  --dark-clr-sub-deep: #3ba8a3;
  --dark-clr-accent: #ffd166;
  --dark-clr-accent-pale: #ffdc88;
  --dark-clr-accent-deep: #c18a22;
  --dark-clr-alert: #ff6675;
  --dark-clr-alert-bg: #351E23;
  --dark-clr-alert-border: #8f3c48;
  --dark-clr-outline: hsl(206, 66%, 68%);
  --dark-clr-selection-bg: #8cc5ff44;
  --dark-border: 1px solid #27c4c433;
  --dark-border-muted: 1px solid #1b2828;
  --dark-border-strong: 1px solid #456868;
  --dark-radius: 4px;
  --dark-shadow: none;
  --dark-font-family: 'JetBrains Mono', 'BIZ UDPGothic', sans-serif;
  --dark-transition-duration: 0.25s;
}

.show-dark,
.show-light,
.u-show-dark,
.u-show-light {
  transition: visibility 0.75s, opacity 0.75s;
}

/* ライトモードの設定 */
:root[data-theme="light"] {
  --clr-bg: var(--light-clr-bg);
  --clr-txt: var(--light-clr-txt);
  --clr-txt-muted: var(--light-clr-txt-muted);
  --clr-main: var(--light-clr-main);
  --clr-main-hover: var(--light-clr-main-pale);
  --clr-on-main: var(--light-clr-bg);
  --clr-main-txt: var(--light-clr-main-deep);
  --clr-sub: var(--light-clr-sub);
  --clr-sub-hover: var(--light-clr-sub-pale);
  --clr-on-sub: var(--light-clr-txt);
  --clr-sub-txt: var(--light-clr-sub-deep);
  --clr-accent: var(--light-clr-accent);
  --clr-accent-hover: var(--light-clr-accent-pale);
  --clr-on-accent: var(--light-clr-txt);
  --clr-black: var(--light-clr-txt);
  --clr-white: var(--light-clr-bg);
  --clr-outline: var(--light-clr-outline);
  --clr-selection-bg: var(--light-clr-selection-bg);
  --clr-alert: var(--light-clr-alert);
  --clr-alert-bg: var(--light-clr-alert-bg);
  --clr-alert-border: var(--light-clr-alert-border);
  --border: var(--light-border);
  --border-muted: var(--light-border-muted);
  --border-strong: var(--light-border-strong);
  --radius: var(--light-radius);
  --shadow: var(--light-shadow);
  --font-family: var(--light-font-family);
  --transition-duration: var(--light-transition-duration);

  .show-light {
    visibility: visible;
    opacity: 1;
  }

  .show-dark {
    visibility: hidden;
    opacity: 0;
  }

  .u-show-light {
    display: inherit;
    visibility: visible;
    opacity: 1;
  }

  .u-show-dark {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}

/* ダークモードの設定 */
:root[data-theme="dark"] {
  --clr-bg: var(--dark-clr-bg);
  --clr-txt: var(--dark-clr-txt);
  --clr-txt-muted: var(--dark-clr-txt-muted);
  --clr-main: var(--dark-clr-main);
  --clr-main-hover: var(--dark-clr-main-deep);
  --clr-main-txt: var(--dark-clr-main-deep);
  --clr-on-main: var(--dark-clr-bg);
  --clr-sub: var(--dark-clr-sub);
  --clr-sub-hover: var(--dark-clr-sub-deep);
  --clr-on-sub: var(--dark-clr-bg);
  --clr-sub-txt: var(--dark-clr-sub-pale);
  --clr-accent: var(--dark-clr-accent);
  --clr-accent-hover: var(--dark-clr-accent-deep);
  --clr-on-accent: var(--dark-clr-bg);
  --clr-black: var(--dark-clr-bg);
  --clr-white: var(--dark-clr-txt);
  --clr-outline: var(--dark-clr-outline);
  --clr-selection-bg: var(--dark-clr-selection-bg);
  --clr-alert: var(--dark-clr-alert);
  --clr-alert-bg: var(--dark-clr-alert-bg);
  --clr-alert-border: var(--dark-clr-alert-border);
  --border: var(--dark-border);
  --border-muted: var(--dark-border-muted);
  --border-strong: var(--dark-border-strong);
  --radius: var(--dark-radius);
  --shadow: var(--dark-shadow);
  --font-family: var(--dark-font-family);
  --transition-duration: var(--dark-transition-duration);

  .show-light {
    visibility: hidden;
    opacity: 0;
  }

  .show-dark {
    visibility: visible;
    opacity: 1;
  }

  .u-show-light {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  .u-show-dark {
    display: inherit;
    visibility: visible;
    opacity: 1;
  }

  .u-dark-bg-translucent {
    background-color: rgb(from var(--clr-bg) r g b / 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

:root,
dialog,
[popover] {
  color: var(--clr-txt);
  font-family: var(--font-family);

  background-color: var(--clr-bg);
  transition-property: background-color, color;
  transition-duration: 0.75s;
}

body {
  padding-top: var(--header-height);
}

*::selection {
  background-color: var(--clr-selection-bg);
}

:focus-visible {
  outline: solid var(--clr-outline);
}


a {
  color: var(--clr-txt);
  text-decoration: revert;
}

p,
a,
ul,
th,
td {
  line-height: 1.75;
}

.c-button,
.u-plain,
.u-plain-links a {
  text-decoration: none;
  list-style: revert;
}

.c-heading-xl {
  font-size: 32px;
  font-weight: 700;
}

.c-heading-lg {
  font-size: 24px;
  font-weight: 700;
}

.c-heading-md {
  font-size: 20px;
  font-weight: 700;
}

.c-button {
  display: block;
  padding: 20px 16px;
  border-radius: var(--radius);
}

.c-button--primary {
  background-color: var(--clr-main);
  color: var(--clr-on-main);
  transition-property: color, background-color;
  transition-duration: var(--transition-duration);
}

.c-button--secondary {
  border: var(--border);
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);
  color: var(--clr-txt);
  transition-property: color, background-color;
  transition-duration: var(--transition-duration);
}

.c-button--accent {
  background-color: var(--clr-accent);
  color: var(--clr-on-accent);
  font-weight: 700;
  transition-property: color, background-color;
  transition-duration: var(--transition-duration);
}

.c-button--tertiary {
  color: var(--clr-main);
  text-decoration: solid underline currentColor;
  transition-property: color, background-color, opacity;
  transition-duration: var(--transition-duration);
}

@media(any-hover:hover) {
  .c-button--primary:hover {
    background-color: var(--clr-main-hover);
  }

  .c-button--secondary:hover {
    background-color: var(--clr-sub-hover);
  }

  .c-button--accent:hover {
    background-color: var(--clr-accent-hover);
  }


  .c-button--tertiary:hover {
    background-color: var(--clr-sub);
    opacity: 0.65;
  }
}

.c-intro {
  margin-top: 24px;
  line-height: 2.25;
}

.c-bread-crumbs {
  width: 100%;
  overflow: scroll;
  scrollbar-width: none;
  padding: 8px 16px;
}

.c-bread-crumbs__inner,
.c-bread-crumbs__inner * {
  color: var(--clr-txt-muted);
  white-space: nowrap;
}

.u-hover-colored,
.u-hover-colored-links :where(a, button),
.u-hover-colored-target {
  transition: color var(--transition-duration);
}

.u-hover-translucent,
.u-hover-translucent-links :where(a, button),
.u-hover-translucent-target {
  transition: opacity var(--transition-duration);
}

@media(any-hover:hover) {

  .u-hover-colored:hover,
  .u-hover-colored-links :where(a, button):hover,
  .u-hover-colored-parent:hover .u-hover-colored-target {
    color: var(--clr-main);
  }

  .u-hover-translucent:hover,
  .u-hover-translucent-links :where(a, button):hover,
  .u-hover-translucent-parent:hover .u-hover-translucent-target {
    opacity: 0.75;
  }
}

.u-external-link[target=_blank]::after {
  content: '';
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.5ch;
  mask: url(../img/icon-external.svg) center/contain no-repeat;
  background-color: currentColor;
  vertical-align: text-bottom;
}

.u-annotation {
  color: var(--clr-txt-muted);
  font-size: 14px;
}

.u-alert {
  color: var(--clr-alert);
  font-size: 14px;
}

.u-show-mobile {
  display: none;

  @media(max-width:767.49px) {
    display: unset;
  }
}

.u-hide-mobile {
  display: unset;

  @media(max-width: 767.49px) {
    display: none;
  }
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.l-section-gap {
  margin-top: 144px;
}

.l-section-gap-sm {
  margin-top: 64px;
}

.l-container {
  max-width: calc(1024px + 128px);
  margin-inline: auto;
  padding-inline: 64px;

  @media(max-width: 767.49px) {
    padding-inline: 20px;
  }
}

@property --bg-gradient-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.g-header {
  --bg-gradient-opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: var(--header-height);
  padding: 16px;
  pointer-events: none;
  transition: --bg-gradient-opacity var(--transition-duration), backdrop-filter var(--transition-duration);
  background: rgb(from var(--clr-bg) r g b / var(--bg-gradient-opacity));
}

.g-header.is-scrolled {
  --bg-gradient-opacity: 0.8;
  backdrop-filter: blur(4px);
}

.g-header__inner {
  display: grid;
  gap: 16px;
  grid-template-areas: "logo . motion-control mode-changer nav-toggle";
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  height: 100%;

  @media(max-width: 374.49px) {
    grid-template-areas: "logo motion-control mode-changer nav-toggle";
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0;
  }
}

.g-header__logo {
  grid-area: logo;
  width: min(35vw, 160px);
  height: 100%;
  pointer-events: auto;
}

.g-header__logo-img {
  display: block;
  width: 100%;
  height: 100%;
  mask: url(../img/site-logo2.svg) center/contain no-repeat;
  background-color: var(--clr-txt);
}

.g-motion-control {
  position: relative;
  grid-area: motion-control;
  pointer-events: auto;
}

.g-motion-control-button {
  width: 48px;
  height: 48px;
  padding: 8px;
}

.g-motion-control-button span {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: var(--clr-txt);
}

.g-motion-control-button[data-motion=play] span {
  -webkit-mask-image: url(../img/play.svg);
  mask-image: url(../img/play.svg);
}

.g-motion-control-button[data-motion=pause] span {
  -webkit-mask-image: url(../img/pause.svg);
  mask-image: url(../img/pause.svg);
}

.g-motion-control-button[data-motion=disabled] span {
  -webkit-mask-image: url(../img/play_disabled.svg);
  mask-image: url(../img/play_disabled.svg);
  cursor: not-allowed;
}

.g-theme-changer {
  position: relative;
  grid-area: mode-changer;
  pointer-events: auto;
}

.g-theme-changer__button {
  anchor-name: --anchor-themechanger;
  width: 48px;
  height: 48px;
  padding: 8px;
}

.g-theme-changer__item-button {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

.g-theme-changer__item + * {
  margin-top: 16px;
}

.g-theme-changer__button span,
.g-theme-changer__item-button span {
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: var(--clr-txt);
}

.g-theme-changer__button span {
  display: block;
  width: 100%;
  height: 100%;
}

.g-theme-changer__menu {
  position: fixed;
  position-anchor: --anchor-themechanger;
  top: calc(anchor(bottom) + 6px);
  left: anchor(left);
  padding: 8px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateY(-8px);
  opacity: 0;
  filter: blur(4px);
  transition-property: opacity, filter, transform, display, overlay;
  transition-duration: var(--transition-duration);
}

.g-theme-changer__menu:popover-open {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

@starting-style {
  .g-theme-changer__menu:popover-open {
    transform: translateY(-8px);
    opacity: 0;
    filter: blur(4px);
  }
}

.g-theme-changer__item-button span {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.g-theme-changer__button[data-value=light] span,
.g-theme-changer__item-button[data-value=light] span {
  -webkit-mask-image: url(../img/icon-light.svg);
  mask-image: url(../img/icon-light.svg);
}

.g-theme-changer__button[data-value=dark] span,
.g-theme-changer__item-button[data-value=dark] span {
  -webkit-mask-image: url(../img/icon-dark.svg);
  mask-image: url(../img/icon-dark.svg);
}

.g-theme-changer__button[data-value=system] span,
.g-theme-changer__item-button[data-value=system] span {
  -webkit-mask-image: url(../img/icon-light-auto.svg);
  mask-image: url(../img/icon-light-auto.svg);
}

@media(prefers-color-scheme:dark) {

  .g-theme-changer__button[data-value=system] span,
  .g-theme-changer__item-button[data-value=system] span {
    -webkit-mask-image: url(../img/icon-dark-auto.svg);
    mask-image: url(../img/icon-dark-auto.svg);
  }
}

.g-nav-toggle {
  grid-area: nav-toggle;
  width: 50px;
  height: 50px;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);
  pointer-events: auto;
}

.g-nav-toggle__button {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

.g-nav-toggle__button span {
  position: relative;
  width: 28px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--clr-txt);
}

.g-nav-toggle__button span::before,
.g-nav-toggle__button span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 9999px;
  background-color: var(--clr-txt);
  transition-property: width, transform, translate;
  transition-duration: var(--transition-duration);
  transform-origin: center right;
}

.g-nav-toggle__button span::before {
  transform: translateX(-50%) translateY(calc(-50% - 12px));
}

.g-nav-toggle__button span::after {
  transform: translateX(-50%) translateY(calc(-50% + 12px));
}

.g-nav-toggle__button[aria-expanded=true] span::before {
  transform: translateX(-50%) translateY(calc(-50% - 12px)) rotate(45deg) translateX(14px) translateY(3px);
  width: 16px;
}

.g-nav-toggle__button[aria-expanded=true] span::after {
  transform: translateX(-50%) translateY(calc(-50% + 12px)) rotate(-45deg) translateX(14px) translateY(-3px);
  width: 16px;
}

.g-global-drawer {
  position: absolute;
  top: var(--header-height);
  right: 0;
  width: 375px;
  height: calc(100vh - var(--header-height));
  height: calc(100lvh - var(--header-height));
  border: var(--border);
  border-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--shadow);
  background-color: var(--clr-bg);
  transition: translate var(--transition-duration);
  pointer-events: auto;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;

  @media(max-width: 562.49px) {
    width: 100%;
  }
}

.g-global-drawer[aria-hidden=true] {
  translate: 100% 0;
}

.g-global-drawer[aria-hidden=false] {
  translate: 0 0;
}

.g-global-drawer__inner {
  padding: 32px;
}

.g-global-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}



.g-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-top: 144px;
  padding-bottom: 32px;
}

.g-footer__logo {
  width: min(50vw, 160px);
  height: 60px;
}

.g-footer__logo-img {
  display: block;
  width: 100%;
  height: 100%;
  mask: url(../img/site-logo2.svg) center/contain no-repeat;
  background-color: var(--clr-txt);
}

.g-footer__copyright-wrap {
  margin-top: 48px;
}

.grecaptcha-badge {
  display: none;
}

.c-entry-body {

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 64px;
    line-height: 1.25;
  }

  :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
    margin-top: 32px;
  }

  h2 {
    font-size: 24px;
    font-weight: 600;
  }

  h3 {
    font-size: 20px;
    font-weight: 600;
  }

  h4 {
    font-size: 18px;
    font-weight: 600;
  }

  h5 {
    font-size: 16px;
    font-weight: 600;
  }

  p {
    margin-top: 24px;
    line-height: 1.75;
  }

  ul {
    list-style: revert;
    list-style-position: inside;
    margin-top: 32px;
  }

  li {
    margin-top: 12px;
    line-height: 1.75;
  }
}