/* # base.css */
/* ## Variables: Sizes */
:root {
  /* Fonts  */
  --font-size-base: 1rem;  /* 16px */

  /* Golden Ratio Typography: https://grtcalculator.com/ */
  /* Font size 16px, Noto Sans, Width 600px */
  /* mobile では xxxlargeとxxlargeとxlarge のサイズを同じにする */
  --font-size-xxxlarge: 1.625rem;  /* 26px */
  --font-size-xxlarge:  1.625rem;  /* 26px */
  --font-size-xlarge:   1.625rem;  /* 26px */
  --font-size-large:    1.250rem;  /* 20px */
  --font-size-medium:   1.000rem;  /* 16px */
  --font-size-small:    0.813rem;  /* 13px */

  --line-height-xxxlarge: 3.313rem;  /* 53px */
  --line-height-xxlarge:  3.313rem;  /* 53px */
  --line-height-xlarge:   2.625rem;  /* 42px */
  --line-height-large:    2.063rem;  /* 33px */
  --line-height-medium:   1.750rem;  /* 28px */
  --line-height-small:    1.438rem;  /* 23px */

  /* Borders */
  --border-radius-large: calc(var(--font-size-base) / 1.25);
  --border-radius-medium: calc(var(--border-radius-large) / 2);
  --border-radius-small: calc(var(--border-radius-medium) / 2);
}
/* PC */
@media screen and (768px <= width) {
  :root {
    --font-size-xxxlarge: 2.625rem;  /* 42px */
    --font-size-xxlarge:  2.063rem;  /* 33px */
    --font-size-xlarge:   1.625rem;  /* 26px */
    --font-size-large:    1.250rem;  /* 20px */
    --font-size-medium:   1.000rem;  /* 16px */
    --font-size-small:    0.813rem;  /* 13px */

    --line-height-xxxlarge: 4.125rem;  /* 66px */
    --line-height-xxlarge:  3.313rem;  /* 53px */
    --line-height-xlarge:   2.625rem;  /* 42px */
    --line-height-large:    2.063rem;  /* 33px */
    --line-height-medium:   1.750rem;  /* 28px */
    --line-height-small:    1.438rem;  /* 23px */
  }
}

/* ## Variables: Colors */
:root {
  /* 配色 */
  --color-primary: #1e87e3;
  --color-secondary: #d8edfc;
  --color-tartiary: #273440;
  --color-background: #faf6ed;
  --color-accent: #f5a525;
  --color-cmn-black: #333333;
  --color-cmn-white: #fffdf9;
  --color-sem-ok-text: #007200;
  --color-sem-ok-border: #007200;
  --color-sem-ok-area: #ccffcc;
  --color-sem-ng-text: #c00000;
  --color-sem-ng-border: #c00000;
  --color-sem-ng-area: #ffe8e8;
  /* ベースの色 */
  --color-bg: var(--color-cmn-white);
  --color-bg-contents: var(--color-background);
  --color-bg-header: var(--color-background);
  --color-bg-footer: var(--color-background);
  --opacity-bg-header: 0.5;
  --opacity-bg-footer: 0.5;
  --filter-bg-header: blur(6px);
  --filter-bg-footer: blur(11px);
  /* --filter-bg-footer: brightness(1.1); */
  --color-bg-table: var(--color-cmn-white);
  --color-bg-fields: var(--color-cmn-white);
  --color-bg-code: var(--color-secondary);
  /* テキストの色 */
  --color-text: var(--color-cmn-black);
  --color-text-link: var(--color-primary);
  --color-text-link-hover: var(--color-tartiary);
  --color-text-link-visited: var(--color-primary);
  --color-text-header: var(--color-cmn-black);
  --color-text-in-page-nav: var(--color-cmn-black);
  --color-text-footer: var(--color-cmn-white);
  --color-text-em: #4d4d4d;
  --color-text-button-primary: var(--color-cmn-white);
  --color-text-button-secondary: var(--color-primary);
  --color-text-button-tartiary: var(--color-cmn-white);
}
@media (prefers-color-scheme: dark) {
  :root {
  /* 配色 */
    --color-primary: #efb46a;
    --color-secondary: #a36519;
    --color-tartiary: #f4d6b2;
    --color-background: #273542;
    --color-accent: #24b5fa;
    --color-cmn-black: #25303b;
    --color-cmn-white: #fffdf9;
    --color-sem-ok-text: #7abf7a;
    --color-sem-ok-border: #7abf7a;
    --color-sem-ok-area: #044d04;
    --color-sem-ng-text: #fdafaf;
    --color-sem-ng-border: #fdafaf;
    --color-sem-ng-area: #591919;
    /* ベースの色 */
    --color-bg: var(--color-cmn-black);
    /* --color-bg-contents: var(--color-cmn-black); */
    --opacity-bg-header: 0.3;
    --opacity-bg-footer: 0.3;
    --filter-bg-header: blur(2px);
    --filter-bg-footer: blur(11px);
    --color-bg-table: var(--color-cmn-black);
    --color-bg-fields: var(--color-cmn-black);
    --color-bg-code: var(--color-secondary);
    /* テキストの色 */
    --color-text: var(--color-cmn-white);
    /* --color-text-link: var(--color-secondary); */
    /* --color-text-link-visited: var(--color-tartiary); */
    --color-text-header: var(--color-cmn-white);
    --color-text-in-page-nav: var(--color-cmn-white);
    --color-text-footer: var(--color-cmn-white);
    --color-text-em: #dedede;
    --color-text-button-primary: var(--color-cmn-black);
    --color-text-button-secondary: var(--color-primary);
    --color-text-button-tartiary: var(--color-secondary);
  }
}

/* ## Variables: Image Urls */
:root {
  --header-img: url(/images/img_bg_header_footer_light.jpg);
  --footer-img: url(/images/img_bg_header_footer_light.jpg);
  --svg-calendar: url('/images/icon-calendar-cursor-light.svg');
}
@media (prefers-color-scheme: dark) {
  :root {
    --header-img: url(/images/img_bg_header_footer_dark.jpg);
    --footer-img: url(/images/img_bg_header_footer_dark.jpg);
    --svg-calendar: url('/images/icon-calendar-cursor-dark.svg');
  }
}

/* ## Variables: Spaces */
:root {
  /* Golden Ratio Typography: https://grtcalculator.com/ */
  /* Font size 16px, Noto Sans, Width 600px */
  /* mobile では xxxlargeとxxlargeとxlarge のサイズを同じにする */
  --space-xxxlarge: 1.063rem;  /* 17px */
  --space-xxlarge:  1.063rem;  /* 17px */
  --space-xlarge:   1.063rem;  /* 17px */
  --space-large:    0.688rem;  /* 11px */
  --space-medium:   0.438rem;  /* 7px */
  --space-small:    0.250rem;  /* 4px */

  --letters-in-row: 30;
}
/* PC */
@media screen and (768px <= width) {
  :root {
    --space-xxxlarge: 2.813rem;  /* 45px */
    --space-xxlarge:  1.750rem;  /* 28px */
    --space-xlarge:   1.063rem;  /* 17px */
    --space-large:    0.688rem;  /* 11px */
    --space-medium:   0.438rem;  /* 7px */
    --space-small:    0.250rem;  /* 4px */
    --letters-in-row: 40;
  }
  
}

/* ## normalize (uaplus.css version 0.3.0) */
@layer {*,*::after,*::before {box-sizing: border-box;}:focus-visible {outline-offset: 3px;}html {-webkit-text-size-adjust: none;text-size-adjust: none;}html {line-height: 1.5;}html {scrollbar-gutter: stable;}h1 {font-size: 2em;margin-block: 0.67em;}abbr[title] {cursor: help;text-decoration-line: underline;text-decoration-style: dotted;}@media (forced-colors: active) {mark {color: HighlightText;background-color: Highlight;}}audio,iframe,img,svg,video {max-block-size: 100%;max-inline-size: 100%;}fieldset {min-inline-size: 0;}label:has(+ :where(input:not([type="radio"], [type="checkbox"]), select, textarea)) {display: block;}textarea:not([rows]) {min-block-size: 6em;}button,input,select,textarea {font-family: inherit;font-size: inherit;}[type="search"] {-webkit-appearance: textfield; appearance: textfield;}@supports (-webkit-touch-callout: none) {[type="search"] {border: 1px solid -apple-system-secondary-label;background-color: canvas;}}input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {direction: ltr;}table {border-collapse: collapse;border: 1px solid;}th,td {border: 1px solid;padding: 0.25em 0.5em;vertical-align: top;}dialog::backdrop {background: oklch(0% 0 0 / 0.3);}dialog,[popover],dialog::backdrop {opacity: 0;transition:opacity 150ms ease-out,display 150ms allow-discrete,overlay 150ms allow-discrete;}dialog[open],:popover-open,dialog[open]::backdrop {opacity: 1;}@starting-style {dialog[open],:popover-open,dialog[open]::backdrop {opacity: 0;}}[hidden]:not([hidden="until-found"]) {display: none !important;}img {display: block;}summary {cursor: default;}iframe {border: none;}@supports(position-area: end) {[popover] {margin: 0;position-area: end span-end;position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;}}}

@layer reset, base, components, utilities;

/* ## reset */
@layer reset {
  body {
    margin: 0;
    padding: 0;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .25em;
    padding: 0;
  }
  
  figure {
    margin: 0;
  }
  figure, picture {
    display: inline-block;
    vertical-align: bottom;  /* 不要な余白を消す */
  }
  
  ul, ol {
    margin: 0;
    padding: 0 0 0 calc(var(--space-large) + var(--space-small));
  }
  
  ul.style-none {
    list-style: none;
    padding: 0;
  }
  
  input, select, textarea, button {
    max-width: 100%;
  }
  
  /* debug */
  
  * {
    /* outline: 1px solid red; */
  }
}

/* ## base */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  /* ユーザーの設定（OSの設定）に合わせてモーションを減らす */
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      /* transition-duration: 0.01ms !important; */
      /* animation-duration: 0.01ms !important; */
      animation-iteration-count: 0 !important;
    }
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family:
      "Helvetica Neue", /* "Hiragino Kaku Gothic ProN", */ "Hiragino Sans",
      "Noto Sans JP", Arial, sans-serif;
    /* from ICS Media */
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
  }

  header {
    color: var(--color-text-header);
    background: var(--header-img) transparent no-repeat center 50% / cover;

    width: 100%;

    .inner {
      backdrop-filter: var(--filter-bg-header);

      align-items: flex-start;
      display: flex;
      justify-content: space-between;

      margin: 0 auto;
      max-width: calc(var(--font-size-base) * var(--letters-in-row) + var(--space-xxxlarge) * 2);
      padding: var(--space-xlarge) var(--space-medium);
    }
    .updated {
      background-color: var(--color-bg-code);
      display: inline-block;
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
      padding: 0 var(--space-small);

      position: absolute;
      top: 0;
      right: 0;
    }
  }

  nav.in-pgage {
    /* background-color: var(--color-bg-header); */

    .inner {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      max-width: calc(var(--font-size-base) * var(--letters-in-row) + var(--space-xxxlarge) * 2);
      padding: var(--space-medium) var(--space-large);

      ul {
        display: flex;
        gap: var(--space-large);
        list-style: none;
        padding: 0;
        margin: 0;
      }

      ul a {
        color: var(--color-text-in-page-nav);

        &::after {
          content: "⬇️";
          font-size: calc(var(--font-size-small) / 1.2);
          padding-inline-start: var(--space-small);
        }
      }
    }

  }

  footer {
    background: var(--footer-img) transparent no-repeat center 90% / cover;
    color: var(--color-text-footer);

    .inner {
      backdrop-filter: var(--filter-bg-footer);
      text-align: center;
    
      margin: 0 auto;
      max-width: calc(var(--font-size-base) * var(--letters-in-row) + var(--space-xlarge));
      padding: var(--space-medium) var(--space-xlarge);
    }
  }

  main{
    min-height: calc(100dvh - 311px);  /* 100dvh - (header + nav + footer) */
    max-width: calc(var(--font-size-base) * var(--letters-in-row) + var(--space-xxxlarge) * 2 + var(--space-medium) * 2);
    /* コンテンツの幅 = フォントの大きさ*一行の文字数 + 余白パディング*2 + 余白マージン*2 */
    margin: 0 auto;
    /* padding-block-end: var(--space-xxxlarge); */
  }

  section {
    background-color: var(--color-bg-contents);
    /* border: 1px solid var(--color-text); */
    border-radius: var(--border-radius-large);
    margin-block-end: var(--space-large);
    margin-inline: var(--space-medium);
    padding: var(--space-large) var(--space-xxxlarge);

    &:first-child {
      margin-block-start: -1px;
      border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    }
  }

  p {
    text-wrap: pretty;
    &:nth-of-type(1) {
      margin-block-start: 0;
    }
  }

  a {
    color: var(--color-text-link);
    text-decoration: underline;

    &::after {
      content: "🔗";
    }

    &:visited {
      color: var(--color-text-link-visited);
    }
    &:active {
      color: var(--color-text-link-visited);
    }
    &:focus {
      color: var(--color-text-link-hover);
    }
    &:hover {
      color: var(--color-text-link-hover);
    }

    &[href^="#"]::after {
      content: "⬇️";
    }
  }

  strong, em {
    color: var(--color-text-em);
  }

  mark {
    background-color: var(--color-accent);
    /* display: inline-block; */
    /* margin: 0 calc(1em / 4); */
    padding: 0;
    font-weight: 550;
  }

  figcaption {
    font-size: var(--font-size-small);
    text-align: center;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid var(--color-text);
    border-left: 1px solid var(--color-text);
    border-right: none;
    border-bottom: none;
    border-radius: var(--border-radius-medium);

    caption {
      font-size: var(--font-size-small);
      text-align: left;
  
      line-height: var(--line-height-small);
    }

    th,
    td {
      border-top: none;
      border-left: none;
      border-right: 1px solid var(--color-text);
      border-bottom: 1px solid var(--color-text);
    }

    th {
      background-color: var(--color-secondary);
    }

    td {
      background-color: var(--color-bg-table);
    }

    tr:nth-of-type(1) {
      & :where(th:first-child, td:first-child) {
        border-radius: var(--border-radius-medium) 0 0 0;
      }
      & :where(th:last-child, td:last-child) {
        border-radius: 0 var(--border-radius-medium) 0 0;
      }
    }
    tr:last-child {
      & :where(th:first-child, td:first-child) {
        border-radius: 0 0 0 var(--border-radius-medium);
      }
      & :where(th:last-child, td:last-child) {
        border-radius: 0 0 var(--border-radius-medium) 0;
      }
    }
  }

  li {
    margin-block: var(--space-small);
  }

  hr {
    border: none;
    margin: var(--space-xlarge) auto;

    &.xxlarge {
      margin: var(--space-xxlarge) auto;
    }

    &.xxxlarge {
      margin: var(--space-xxxlarge) auto;
    }
  }

  fieldset {
    border: 1px solid var(--color-text);
    border-radius: var(--border-radius-medium);
    margin: 0;
    padding: 0 var(--space-xxlarge) var(--space-xlarge);
  }
  :where(
    input:not([type="button"]
    [type="submit"]
    [type="image"]
    [type="reset"]),
    select,
    textarea
  ) {
    background-color: var(--color-bg-fields);
    color: var(--color-text);

    border: 1px solid var(--color-text);
    border-radius: var(--border-radius-medium);
    padding: var(--space-small) var(--space-small) var(--space-medium);
  }
  :where(
    [type="month"],
    [type="date"],
    [type="datetime-local"]
  ) {
    &::-webkit-calendar-picker-indicator {
      background-image: var(--svg-calendar); /* SVGデータ */
      background-size: contain;
      opacity: 0.8;
    }
  }
  :where(
    [type="button"],
    [type="submit"],
    [type="image"],
    [type="reset"]
  ) {
    background-color: var(--color-bg-fields);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);

    border-radius: var(--border-radius-medium);
    padding: var(--space-small) var(--space-medium);
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }
  }
}

/* ## components */
@layer components {
  .logo {
    border-radius: var(--border-radius-medium);
    background-color: var(--color-primary);
    padding: var(--space-small) var(--space-large);

    .logo__text {
      color: var(--color-bg);
      font-weight: 800;
      text-decoration: none;
    }
    .logo__text::after {
      content: "";
    }
  }
  .big-logo {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-large);
    display: inline-block;
    max-width: calc(var(--font-size-base) * var(--letters-in-row) + var(--space-xxxlarge) * 2);
    padding: 0 var(--space-xxlarge) var(--space-medium);
    
    .big-logo__text {
      color: var(--color-bg);
      font-size: calc(var(--font-size-xxxlarge) * 2);
      line-height: calc(var(--line-height-xxxlarge) * 2);
      margin: 0;
    }
    .light-on {
      text-shadow: var(--space-small) 0 .3em var(--color-secondary);
    }
  }
  /* インラインコード（code） */
  /* コードブロック（pre） */
  code, pre {
    font-weight: 400;
    /* font-family: "Courier New", Courier, monospace; */
    line-height: var(--line-height-small);
  }
  code {
    background-color: var(--color-bg-code);
    font-size: var(--font-size-small);
    display: inline;
    padding: calc(var(--font-size-small) / 3) calc(var(--font-size-small) / 2);
    vertical-align: baseline;
  }
  :has(>pre) {
    border: 3px solid var(--color-bg-code);
    border-radius: var(--border-radius-medium);
  }
  pre{
    background-color: var(--color-bg-fields);
    font-size: var(--font-size-medium);
    margin: 0;
    padding: 0;
    display: block;
    padding: var(--space-large);
    min-width: fit-content;
  }
  /* コードブロック（pre、PC） */
  @media screen and (768px <= width) {
    pre{
      width: 100%;
    }
  }
  /* 強調 */
  .is_important {
    font-weight: 800;
  }
  .is_ok {
    color: var(--color-sem-ok-text);
  }
  mark.is_ok {
    background-color: var(--color-sem-ok-area);
    /* border: 1px dashed var(--color-sem-ok-border); */
    text-decoration: none;
  }
  .is_ng {
    color: var(--color-sem-ng-text);
  }
  mark.is_ng {
    background-color: var(--color-sem-ng-area);
    /* border: 1px dashed var(--color-sem-ng-border); */
    text-decoration: none;
  }
  /* クリッピングマスク */
  .clip--circle {
    /* 初期値 */
    clip-path: circle(80px at 50% 50%);
    /* HTMLのstyleに記載したCSS変数を参照 */
    clip-path: circle(80px at var(--clip-x) var(--clip-y));
  }
  /* フォームフィールド */
  input[type=range] + .range_display {
    padding: var(--space-small) var(--space-small) var(--space-medium) var(--space-large);
  }

  input:user-valid {
    outline-color: var(--color-sem-ok-border);
  }

  input:user-invalid {
    outline-color: var(--color-sem-ng-border);
  }

  :where(
    [type="button"],
    [type="submit"],
    [type="image"],
    [type="reset"]
  ) {
    &.button--primary {
      background-color: var(--color-primary);
      border-color: var(--color-text-button-primary);
      color: var(--color-text-button-primary);
    }
    &.button--secondary {
      background-color: var(--color-secondary);
      border-color: var(--color-text-button-secondary);
      color: var(--color-text-button-secondary);
    }
    &.button--tartiary {
      background-color: var(--color-tartiary);
      border-color: var(--color-text-button-tartiary);
      color: var(--color-text-button-tartiary);
    }
    &.button--danger {
      background-color: var(--color-sem-ng-border);
      border-color: var(--color-sem-ng-area);
      color: var(--color-sem-ng-area);
    }
  }

  input + .validation-message {
    display: none;
    background-color: var(--color-sem-ng-area);
    color: var(--color-sem-ng-text);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    padding: var(--space-small);
  }
  input:user-invalid + .validation-message {
    display: block;

    /* &::before {
      content: "⚠️";
    } */
  }
}

/* ## utilities */
@layer utilities {
  /* 幅の広い要素を狭い場所に収める */
  .horizontal-scroll {
    overflow: auto;
    max-height: 12rem;
    max-width: 100%;
    padding-block-end: var(--space-medium);
    padding-inline-end: var(--space-medium);  /* スクロールバーのスペースを確保 */

    &:has(>pre) {
      padding-block-end: 0 !important;
      padding-inline-end: 0 !important;
    }

    th {
      white-space: nowrap;
    }
  }
  /* ボタンの大きさ調整 */
  .button--large {
    font-size: var(--font-size-large);
    padding: var(--space-large) var(--space-xlarge);
  }
  .button--xlarge {
    font-size: var(--font-size-xlarge);
    padding: var(--space-xlarge) var(--space-xxlarge);
  }
  /* テキストの大きさ調整 */
  .font-size--small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }
  .font-size--medium {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
  }
  .font-size--large {
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
  }
  .font-size--xlarge {
    font-size: var(--font-size-xlarge);
    line-height: var(--line-height-xlarge);
  }
  .font-size--xxlarge {
    font-size: var(--font-size-xxlarge);
    line-height: var(--line-height-xxlarge);
  }
  .font-size--xxxlarge {
    font-size: var(--font-size-xxxlarge);
    line-height: var(--line-height-xxxlarge);
  }
  /* テキストの寄せ */
  .align--left {
    text-align: left;
  }
  .align--right {
    text-align: right;
  }
  .align--center {
    text-align: center;
  }
  /* 要素の幅の調整 */
  .elm-width--small {
    width: calc(var(--space-small) * 10);
  }
  .elm-width--medium {
    width: calc(var(--space-medium) * 10);
  }
  .elm-width--large {
    width: calc(var(--space-large) * 10);
  }
  .elm-width--xlarge {
    width: calc(var(--space-xlarge) * 10);
  }
  .elm-width--xxlarge {
    width: calc(var(--space-xxlarge) * 10);
  }
  .elm-width--xxxlarge {
    width: calc(var(--space-xxxlarge) * 10);
  }
  /* 要素の配置 */
  .float--i-start {
    float: inline-start;
    margin: 0 var(--space-large) 0 var(--space-small);
  }
  .float--i-end {
    float: inline-end;
    margin: 0 var(--space-small) 0 var(--space-large);
  }
  .flex {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-medium);
    justify-content: flex-start;

    &.gap-large {
      gap: var(--space-large);
    }
  }
  .margin-b-start--small {
    margin-block-start: var(--space-small);
  }
  .margin-b-start--medium {
    margin-block-start: var(--space-medium);
  }
  .margin-b-start--large {
    margin-block-start: var(--space-large);
  }
  .margin-b-start--xlarge {
    margin-block-start: var(--space-xlarge);
  }
  .margin-b-start--xxlarge {
    margin-block-start: var(--space-xxlarge);
  }
  .margin-b-start--xxxlarge {
    margin-block-start: var(--space-xxxlarge);
  }
}