@charset "UTF-8";

/* =========================================================
  common.css（全体共通）
  - 色 / タイポ / 共通UI（ボタン・フォーム・カード等）
========================================================= */

/* =========================
  Design Tokens
========================= */
:root {
  /* --- Font Family --- */
  --font-base: "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", "Meiryo";
  --font-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo";

  /* --- Font weight --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Color === */
  /* --- Background --- */
  --color-bg-white: #FFFFFF; /* 基本背景 */
  --color-bg-gray: #F4F7FB; /* 薄グレー背景 */
  --color-transparent: transparent;
  --color-inherit: inherit;

  /* --- Text --- */
  --color-black: #333333; /* 通常テキスト */
  --color-white: #FFFFFF; /* 白テキスト */

  /* --- Border --- */
  --color-border-100: #E1E9F1; /* デフォルト */
  --color-border-200: #DBDBDB;
  --color-border-300: #CCCDD1;
  --color-border-400: #E7E7E7;

  /* --- Primary --- */
  --color-primary: #1565C0; /* デフォルト */
  --color-primary-100: #E8EDFA;
  --color-primary-200: #689DD9;
  --color-primary-300: #7FAEE3;
  --color-primary-400: #EFF8FF;

  /* --- muted --- */
  --color-muted: #6C757D; /* デフォルト */
  --color-muted-100: #afb0b6;

  /* --- Semantic --- */
  --color-link: #1A73E8; /* リンク */
  --color-success: #28A745; /* 成功 / 完了 */
  --color-warning: #AD8413; /* 注意 / 警告 */
  --color-danger: #E36773; /* エラー */
  --color-danger-bg: #FFE4E7; /* エラー */

  /* --- hover --- */
  --color-primary-hover: #1358A7; /* 主要色：hover */
  --color-primary-100-hover: #DBEBF9; /* 主要色：hover */
  --color-hover-gray: #EBEFF4; /* 薄グレー背景：hover */

  /* --- UI Parts --- */
  --color-scrollbar-track: #F4F7FB; /* スクロールバー背景 */
  --color-scrollbar-thumb: #A6AAAE; /* スクロールバーつまみ */
  --color-scrollbar-thumb-hover: #6A757E; /* スクロールバーつまみ */

  /* Form */
  --color-form-text: #333333; /* 入力テキスト */
  --color-form-placeholder: #B0B0B0; /* プレースホルダー */
  --color-form-border: #D6DEE5; /* 枠線 */
  --color-form-bg: #ffffff; /* 入力背景 */
  --color-form-border-focus: #47A0F5; /* フォーカス枠 */

  /* --- Checkbox --- */
  --color-checkbox-border: #6C757D; /* 枠線 */
  --color-checkbox-bg-unchecked: #B0B0B0; /* 未選択 */
  --color-checkbox-bg-checked: var(--color-primary); /* 選択時 */

  /* --- Radio-btn --- */
  --accent-color-100: #37A277;

  /* --- btn --- */
  --btn-100-bg: #D9D9D9;
  --btn-100-text: #c3c3c3;
  --btn-100-border: #D9D9D9;

  /* --- overlay --- */
  --overlay-50: rgba(0, 0, 0, .5);
  --overlay-75: rgba(0, 0, 0, .75);

  /* --- shadow --- */
  --shadow-color: 0, 0, 0;
  --shadow-5: rgba(var(--shadow-color), .05);
  --shadow-10: rgba(var(--shadow-color), .10);
  --shadow-15: rgba(var(--shadow-color), .15);
  --shadow-20: rgba(var(--shadow-color), .20);
  --shadow-25: rgba(var(--shadow-color), .25);
  --shadow-30: rgba(var(--shadow-color), .30);

  /* --- size (Width / Height) --- */
  --sz-full: 100%;
  --sz-dvw-100: 100dvw;
  --sz-dvh-100: 100dvh;

  --sz-2:  0.2rem;
  --sz-4:  0.4rem;
  --sz-5:  0.5rem;
  --sz-6:  0.6rem;
  --sz-8:  0.8rem;
  --sz-9:  0.9rem;
  --sz-10: 1.0rem;
  --sz-11: 1.1rem;
  --sz-12: 1.2rem;
  --sz-13: 1.3rem;
  --sz-14: 1.4rem;
  --sz-15: 1.5rem;
  --sz-16: 1.6rem;
  --sz-18: 1.8rem;
  --sz-20: 2.0rem;
  --sz-24: 2.4rem;
  --sz-28: 2.8rem;
  --sz-30: 3.0rem;
  --sz-32: 3.2rem;
  --sz-40: 4.0rem;
  --sz-44: 4.4rem;
  --sz-48: 4.8rem;
  --sz-64: 6.4rem;
  --sz-72: 7.2rem;
  --sz-80: 8.0rem;
  --sz-88: 8.8rem;
  --sz-96: 9.6rem;
  --sz-104: 10.4rem;
  --sz-112: 11.2rem;
  --sz-120: 12.0rem;
  --sz-128: 12.8rem;
  --sz-136: 13.6rem;
  --sz-160: 16.0rem;
  --sz-200: 20.0rem;


  /* --- space --- */
  --space-0: 0;
  --space-2: 0.2rem;
  --space-4: 0.4rem;
  --space-5: 0.5rem;
  --space-6: 0.6rem;
  --space-8: 0.8rem;
  --space-10: 1.0rem;
  --space-12: 1.2rem;
  --space-14: 1.4rem;
  --space-16: 1.6rem;
  --space-18: 1.8rem;
  --space-20: 2.0rem;
  --space-24: 2.4rem;
  --space-28: 2.8rem;
  --space-32: 3.2rem;
  --space-36: 3.6rem;
  --space-40: 4.0rem;
  --space-48: 4.8rem;
  --space-64: 6.4rem;

  /* --- Radius / Shadow --- */
  --radius-4: 0.4rem;
  --radius-5: 0.5rem;
  --radius-6: 0.6rem;
  --radius-8: 0.8rem;
  --radius-10: 1.0rem;
  --radius-12: 1.2rem;
  --radius-14: 1.4rem;
  --radius-16: 1.6rem;
  --radius-18: 1.8rem;
  --radius-20: 2.0rem;

  /* --- Font size scale --- */
  --fs-8:  0.8rem;
  --fs-9:  0.9rem;
  --fs-10: 1.0rem;
  --fs-11: 1.1rem;
  --fs-12: 1.2rem;
  --fs-13: 1.3rem;
  --fs-14: 1.4rem; /* デフォルト */
  --fs-15: 1.5rem;
  --fs-16: 1.6rem;
  --fs-18: 1.8rem;
  --fs-20: 2.0rem;
  --fs-24: 2.4rem;
  --fs-28: 2.8rem;
  --fs-32: 3.2rem;

  /* --- Typography --- */
  --lh-base: 1.6;

  /* --- header height --- */
  --header-height: 6.4rem;

  /* --- sidebar width --- */
  --sidebar-width: 20rem;

}

@media (max-width: 499px) {
  :root {
    /* --- header height --- */
    --header-height: calc(48 / 400 * 100vw);
  }
}

/* =========================
  Base
========================= */

html {
  box-sizing: border-box;
  font-size: 62.5%;
  @media (max-width: 499px) {
    scroll-padding-top: var(--header-height);
  }
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-base), sans-serif;
  font-weight: 400; /* デフォルト */
  line-height: var(--lh-base);
  color: var(--color-black);
  background-color: var(--color-bg-gray);
  letter-spacing: 0;
}

/* Chrome <button> クリック時のフォーカスリング対策 */
button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
/* Chrome <button> クリック時のフォーカスリング対策 */

.jp-regular {
  font-family: var(--font-jp), sans-serif;
  font-weight: var(--fw-regular);
}

.jp-bold {
  font-family: var(--font-jp), sans-serif;
  font-weight: var(--fw-bold);
}

.en-regular {
  font-family: var(--font-en), sans-serif;
  font-weight: var(--fw-regular);
}

.en-bold {
  font-family: var(--font-en), sans-serif;
  font-weight: var(--fw-bold);
}

.num-regular {
  font-family: var(--font-en), sans-serif;
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
}

.num-bold {
  font-family: var(--font-en), sans-serif;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}




@media (width <= 499px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (width <= 320px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (500px <= width <= 767px) {
  .hidden-md {
    display: none !important;
  }
}

@media (768px <= width <= 1023px) {
  .hidden-lg {
    display: none !important;
  }
}

@media (1024px <= width <= 1439px) {
  .hidden-xl {
    display: none !important;
  }
}

@media (1440px <= width) {
  .hidden-xxl {
    display: none !important;
  }
}

/* button */

/* primary */
.button-primary {
  font-size: var(--fs-16);
  background-color: var(--color-primary);
  border: 0;
  color: var(--color-white);
  padding: 0 0 0 var(--space-5);
  border-radius: var(--radius-5);
  cursor: pointer;
  transition: background-color 0.4s ease-in-out;
  min-width: var(-sz-128);
  min-height: var(--sz-40);

  &:hover,
  &:focus {
    background-color: var(--color-primary-hover);
  }

  @media (max-width: 499px) {
    font-size: var(--fs-15);
    width: var(--sz-full);
    min-height: var(--sz-48);
  }
}

/* default */
.button-default {
  font-size: var(--fs-14);
  background-color: var(--color-transparent);
  border: 1px solid var(--color-primary-300);
  color: var(--color-primary-300);
  padding: var(--space-6) var(--space-20) var(--space-6) var(--space-24);
  border-radius: var(--radius-5);
  cursor: pointer;
  transition:
    background-color 0.4s ease-in-out,
    color 0.4s ease-in-out,
    border-color 0.4s ease-in-out;

  &:hover,
  &:focus {
    background-color: var(--color-primary-300);
    color: var(--color-white);
  }

  &.with-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
  }

  .icon {
    color: var(--color-inherit);
    display: flex;
    width: var(--sz-8);
    aspect-ratio: 1;
  }

  @media (max-width: 499px) {
    width: var(--sz-full);
    min-height: var(--sz-48);
    padding: var(--space-6) var(--space-24);
  }
}

.button-text {
  font-size: var(--fs-10);
  color: var(--color-link);
  border: 0;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.4s ease-in-out;
  padding: var(--space-5) 0 var(--space-5) var(--space-40);
}

/* 文字間 */
.is-2-char-plain {
  letter-spacing: 0.3em;
  text-indent: 0.3em; 
}
.is-2-char-with-icon {
  letter-spacing: 0.35em;
  text-indent: 0.09em; 
}

/*footer*/

.page-footer {
  color: var(--color-muted);
  width: 100%;
  text-align: center;
  font-size: var(--fs-10);
  z-index: 1;
  padding-bottom: var(--space-24);
  @media (max-width: 499px) {
    font-size: var(--fs-9);
    padding-bottom: calc(16 / 400 * 100vw);
  }
  @media (max-width: 299px) {
    font-size: calc(12 / 400 * 100vw);
  }
  .copyright {
    display: block;
    font-size: inherit;
  }

}


/*header*/

.scroll-header {
  background-color: var(--color-bg-gray);
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  position: fixed;
  top: 0;
  left: calc((14 / 400 * 100vw));
  z-index: 9999;
  display: none;
  @media (max-width: 499px) {
    display: block;
  }

  &.is-scroll-up {
    transform: translateY(0);
  }

}

.page-header {

  @media (max-width: 499px) {
    width: 100vw;
    width: var(--sz-dvw-100);
    margin-inline: calc((14 / 400 * 100vw) * -1);
  }

  .wrapper-header {
    text-align: center;
    display: grid;
    align-items: center;
    width: 100%;
    height: var(--header-height);
    grid-template-columns: 1fr;
    padding: 1rem 0;
    @media (max-width: 499px) {
      grid-template-columns: calc(64 / 400 * 100vw) 1fr max-content;
      padding: 0;
    }
  }


  .header-logo {
    display: block;
    width: 100%;
    margin-inline: auto var(--space-24);
    max-width: 15.3rem;
    @media (max-width: 499px) {
      margin-inline: auto;
      grid-column: 2 / 3;
      height: 100%;

      .figure-logo {
        width: calc(120 / 400 * 100vw);
      }

      a {
        display: grid;
        align-items: center;
        height: 100%;
        padding-inline: var(--space-16);
      }
    }
  }


  .header-user {
    display: none;
    @media (max-width: 499px) {
      display: block;
      width: calc(64 / 400 * 100vw);
      height: calc(48 / 400 * 100vw);;
      grid-column: 3 / -1;
    }

    .button-user {
      width: 100%;
      height: 100%;
    }

    .image-user {
      display: block;
      width: 2.8rem;
      margin-left: var(--sz-24);
    }
  }

}

.button-user {
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  color: inherit;

  .image-user {
    width: var(--sz-48);
    aspect-ratio: 1;
    border-radius: 50%;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
  }

  .name-user {
    font-size: var(--fs-12);
  }
}


.button-menu {
  width: var(--sz-64);
  aspect-ratio: 1;
  position: relative;

  @media (max-width: 499px) {
    height: var(--sz-48);
    aspect-ratio: auto;
  }

  span {
    --space-left: calc(2.3rem);
    position: absolute;
    inset: 0;
    margin: auto auto auto 0;
    display: block;
    width: 1.7rem;
    height: .2rem;
    background-color: var(--color-muted);
    border-radius: 100vw;
    transform: translateX(var(--space-left));

    &:first-child {
      transform: translateY(-.8rem) translateX(var(--space-left));
      width: 2rem;
    }

    &:last-child {
      transform: translateY(.8rem) translateX(var(--space-left));
      width: var(--sz-12);
    }
  }

  &:hover, &:focus {
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      background-color: var(--color-hover-gray);
      width: var(--space-40);
      aspect-ratio: 1;
      z-index: -1;
      border-radius: 50%;
    }
  }

  @media (max-width: 499px) {

    &.is-active {

      span {
        --space-left: 0;
        position: absolute;
        inset: 0;
        margin: auto auto;
        display: block;
        width: 1.7rem;
        height: .2rem;
        background-color: var(--color-muted);
        border-radius: 100vw;
        transform: translateX(var(--space-left)) rotate(-45deg);

        &:first-child {
          transform: rotate(45deg);
        }

        &:last-child {
          display: none;
        }
      }

    }
  }

}


/* hamburger menu */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  cursor: pointer;
  @media (max-width: 499px) {
    position: absolute;
    transition: transform 0.4s ease-in-out;
    &.is-fixed {
      position: fixed;
      top: -6rem;
      transform: translateY(-100%);
    }

    &.is-scroll-up {
      top: 0;
      transform: translateY(0);
    }
  }
}



/*sidebar*/
.page-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  height: var(--sz-dvh-100);

  @media (max-width: 499px) {

    .sidebar-bg {
    position: fixed;
    inset: 0;
    background-color: var(--overlay-50);
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;

      &.is-active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }
    }
  }


  .wrapper-sidebar {
    background-color: var(--color-bg-gray);
    max-width: var(--sidebar-width);
    max-height: 100%;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
    overflow-x: clip;
    padding-top: var(--header-height);

    @media (max-width: 1024px) {
      box-shadow: 1px 0 5px 0 var(--shadow-20);
    }

    @media (max-width: 499px) {
      box-shadow: none;
    }

    &.is-hidden {
      @media (max-width: 499px) {
        left: -100%;
      }
    }

    &.is-minimum {
      --sidebar-width: var(--sz-64);

      @media (max-width: 1024px) {
        box-shadow: none;
      }

      .sidebar-user {
        width: 100%;
        padding-inline: 0;

        .button-user {
          width: auto;
          margin-inline: auto;
        }

        .name-user {
          display: none;
        }
      }

      .nav-list {
        gap: var(--space-12);
      }

      .item-menu-toggle,
      .item-menu-link {
        margin-inline: auto;
        padding: 0;
        aspect-ratio: 1;
        background-color: var(--bg-menu);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        .arrow {
          display: none;
        }

        .icon {
          width: var(--space-32);
          aspect-ratio: 1;
        }

        .item-menu-text {
          display: none;
        }

        a {
        }
      }


    }

  }

  .nav-list {
    display: grid;
    height: max-content;
  }

  .sidebar-user {
    margin-top: 1em;
    display: flex;
    align-items: center;
    min-width: max-content;
    gap: var(--space-12);
    padding-inline: var(--space-24);
  }


  .nav-menu {
    margin-top: 1em;
    width: 100%;
    height: 100%;

    details {
      &[open] {
        > summary {
          .arrow {
            transform: rotate(90deg);
          }
        }
      }

      + p {
        padding-left: var(--space-24);
      }
    }

    .item-menu-toggle,
    .item-menu-link {
      display: flex;
      align-items: center;
      gap: var(--space-8);
      background-color: var(--bg-menu);
      border-top-right-radius: 100vw;
      border-bottom-right-radius: 100vw;
      height: var(--sz-40);

      @media (max-width: 499px) {
        height: var(--sz-48);
      }

      &.is-active {
        color: var(--color-primary);
        --bg-menu: var(--color-primary-100);
      }

      &:hover, &:focus {
        --bg-menu: var(--color-hover-gray);
      }
    }

    .item-menu-child-toggle,
    .item-menu-child-link {
      display: flex;
      align-items: center;
      background-color: var(--bg-menu);
      border-top-right-radius: var(--sz-dvw-100);
      border-bottom-right-radius: var(--sz-dvw-100);
      height: var(--sz-40);
      padding-left: var(--space-24);

      @media (max-width: 499px) {
        height: var(--space-48);
      }

      &.is-active {
        color: var(--color-primary);
        --bg-menu: var(--color-primary-100);
      }

      &:hover, &:focus {
        --bg-menu: var(--color-hover-gray);
      }

      + .item-menu-child-link {
        padding-left: var(--space-40);
      }
    }

    a {
      display: flex;
      align-items: center;
      color: inherit;
      gap: var(--space-8);
    }

    .arrow {
      width: var(--sz-24);
      text-align: center;
    }

    .icon {
      display: inline-grid;
      place-items: center;
    }

    .item-menu-text {
      font-size: var(--fs-12);
    }

  }

  .nav-scroll {
    width: var(--sz-full);
    /* 高さ計算：100dvh -（ハンバーガー高さ + ユーザー名高さ + マージン + マージン）*/
    height: calc(100dvh - (4.8rem + 6.4rem + 1.2rem + 1rem));
    padding-block: var(--sz-20);
    overflow-y: auto;
    overflow-x: clip;

    &::-webkit-scrollbar {
      background-color: transparent;
      width: var(--sz-5);
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--color-scrollbar-thumb);
      border-radius: var(--sz-dvw-100);
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: var( --color-scrollbar-thumb-hover);
    }

    &::-webkit-scrollbar-button {
      display: none;
      color: transparent;
      background: transparent;
    }
  }

}

/* ::-webkit-scrollbar */

.scrollbar-y {
  overflow-y: auto;

  &::-webkit-scrollbar {
    background-color: transparent;
    width: var(--sz-5);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
    border-radius: var(--sz-dvw-100);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var( --color-scrollbar-thumb-hover);
  }

  &::-webkit-scrollbar-button {
    display: none;
    color: transparent;
    background: transparent;
  }
}


/* 現在地（is-active）は hover/focus で見た目を変えない */
.page-sidebar .nav-menu a.is-active:hover,
.page-sidebar .nav-menu a.is-active:focus,
.page-sidebar .nav-menu summary.is-active:hover,
.page-sidebar .nav-menu summary.is-active:focus,
.page-sidebar .nav-menu .is-active.item-menu-toggle:hover,
.page-sidebar .nav-menu .is-active.item-menu-toggle:focus,
.page-sidebar .nav-menu .is-active.item-menu-link:hover,
.page-sidebar .nav-menu .is-active.item-menu-link:focus,
.page-sidebar .nav-menu .is-active.item-menu-child-toggle:hover,
.page-sidebar .nav-menu .is-active.item-menu-child-toggle:focus,
.page-sidebar .nav-menu .is-active.item-menu-child-link:hover,
.page-sidebar .nav-menu .is-active.item-menu-child-link:focus {
  --bg-menu: var(--color-primary-100);
  color: var(--color-primary);
}




/*page layout*/

.page-wrapper {
  margin-left: var(--sz-200);
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: var(--sz-dvh-100);

  @media (max-width: 1024px) {
    margin-left: var(--sz-64);
  }

  @media (max-width: 768px) {
  }

  @media (max-width: 499px) {
    margin-left: 0;
    padding-inline: clamp(var(--space-12), calc(16 / 400 * 100vw), var(--space-16));
  }

  &.is-sidebar-min {
    @media (min-width: 1024px) {
      margin-left: var(--space-64);
    }
  }

}

.page-main {
  flex: 1;
  padding-block: var(--space-24) var(--space-48);
  padding-inline: var(--space-48);

  @media (max-width: 1024px) {
    padding-inline: var(--space-32);
  }

  @media (max-width: 768px) {
    padding-inline: var(--space-24);
  }

  @media (max-width: 499px) {
    padding-inline: 0;
  }

  .wrapper-section {
    max-width: 105.6rem;
    margin-inline: auto;
  }
}


.section-card {
  background-color: var(--color-white);
  border-radius: var(--space-8);
  border: 1px solid var(--color-border);
  padding: var(--space-32) var(--space-48);
  @media (max-width: 768px) {
    padding: var(--space-24) var(--space-32);
  }
  @media (max-width: 499px) {
    padding: var(--space-24);
  }

  &.padding-inline-32 {
    padding-inline: var(--space-32);

    @media (max-width: 768px) {
      padding-inline: var(--space-24);
    }

    @media (max-width: 499px) {
      padding-inline: clamp(var(--space-12), calc(16 / 400 * 100vw), var(--space-16));
    }
  }
}


/*title-main-heading*/

.title-main-heading {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-checkbox-bg-unchecked);
  @media (max-width: 499px) {
    font-size: var(--fs-24);
    padding: var(--space-12) var(--space-6) var(--space-10);
  }
}

.page-main-heading {
  max-width: 105.6rem;
  margin-inline: auto;
}

.title-page-section {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  padding: var(--space-20) var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-checkbox-bg-unchecked);

  &.is-left-border {
    background-color: transparent;
    margin-left: var(--space-18);
    border-bottom:0;
    position: relative;
    display: flex;
    align-items: center;
    padding-block-start: var(--space-12);
    padding-inline: var(--space-12);
    @media (max-width: 499px) {
      margin-left: var(--space-8);
    }
    &::before {
      content: "";
      position: absolute;
      left: 0;
      background-color: var(--color-primary);
      width: var(--space-4);
      height: var(--space-20);
    }
  }
}

/* h2 にボタンがある場合かこむ */
.title-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-right: var(--space-20);
  .title-page-section {
    flex: 1;
  }
  [class^="button-"] {
    flex-shrink: 0;
    @media (max-width: 499px) {
      font-size: 0;
      gap:0;
      padding: 0;
      max-width:  var(--space-24);
      min-height: var(--space-24);
      .icon {
        width: var(--space-10);
        svg  {
          width: 100%;
        }
      }
    }
  }
}


/*breadcrumb*/

.breadcrumb {
  @media (max-width: 499px) {
    display: none;
  }
}

.list-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-inline: var(--space-16);
  font-size: var(--fs-12);
  color: var(--color-muted);

  li {
    + li {
      &::before {
        content: ">";
        margin-inline: var(--space-4) var(--space-12);
      }
    }
  }

  a {
    color: inherit;
    padding-block: var(--space-4);
  }
}



/* edit & delete icon */
.button-icon {
  background-color: var(--color-transparent);
  border:0;
  padding: 0;
  aspect-ratio: 1;
  position: relative;
  color: var(--color-muted-100);
  cursor: pointer;
  z-index: 0;
  transition: color 0.4s ease-in-out;
  .text {
    transition:
      top 0.3s ease-in-out,
      opacity 0.75s ease-in-out;
    position: absolute;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-8);
    opacity: 0;
    z-index: -1;
  }
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sz-30);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-bg-gray);
  }

  &:hover, &:focus {
    .text {
      opacity: 1;
      top: -0.88em;
    }
  }

  &.button-edit {
  &:hover, &:focus {
      color: var(--color-primary-200);
      .icon {
          background-color: var(--color-primary-400);
      }
    }
  }

  &.button-trash {
  &:hover, &:focus {
      color: var(--color-danger);
      .icon {
           background-color: var(--color-danger-bg);
      }
    }
  }

  .is-2-char {
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
}







/*orientation-lock*/

.orientation-lock {
  width: var(--sz-dvw-100);
  height: var(--sz-dvh-100);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  visibility: hidden;
  opacity: 0;

  &.is-active {
    visibility: visible;
    opacity: 1;
  }

  .wrapper-orientation-lock {
    width: var(--sz-full);
    height: var(--sz-full);
    background-color: var(--overlay-75);
    color: var(--color-white);
    display: grid;
    place-content: center;
  }

  .figure-icon {
    text-align: center;

    figcaption {
      font-size: var(--fs-16);
    }
  }
}


/* サブページ の main 内 section 共通 */

.page-section {
  margin-top: var(--space-8);
}