@charset "utf-8";
/* CSS Document */

/* 汎用設定CSS 設定された値を変更しないこと */

/* 角丸のスタイル設定 */
.radius100R {border-radius: 100vh;}
.radius03R {border-radius: .3em;}
.radius05R {border-radius: .5em;}
.radius07R {border-radius: .7em;}
.radius1R {border-radius: 1em;}
.radius2R {border-radius: 2em;}

/* ボーダーの設定 */
.Border_none {border: none;}
.Border1 {border: 1px solid #ccc;}
.Border2 {border: 2px solid #ccc;}

/* divやpなどの要素と同様にワイドが自動動作 */
.WidthStretch {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

/* マル（円）をつくるスタイル（高さの指定不要） */
.radiusCircle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

/* 背景色を透過させる */
.Transparent {background-color: transparent;}

/* （リンク）リストのスタイルを削除 */
.ListStyleNone {list-style: none;}

/* ＜button＞タグをボタンにする基本スタイル */
button.Btn {
  font-size: 1em;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  padding: .5em 1.2em;
  border: none;
  background: #000;
  @media (hover: hover) {
    &:hover {
      opacity: .6;
      cursor: pointer;
    }
  }
  /* "＞"アイコンが入ったとき */
  &.iconArrow {
    padding-inline: 1.2em 2.2em;
    &::after {right: 1em; border-width: 2px;}
  }

}
/* リンクテキストをボタンにするスタイル（通常のリンクテキスト用に） */
dl.List-item > dd.linkButton {display: flex;} /* リスト化したddをボタンにするために */
.linkButton {
  /* ワイドをコンテンツサイズに。ボタンが続いた時に改行されるように */
  /* display: flex;  */
  width: fit-content;
  list-style: none;
  padding: 0;

  > a {
    font-size: 1em;
    line-height: 1.1;
    border: 1px solid currentColor;
    text-decoration: none;
    background-color: transparent;
    display: block;
    padding: .75em;
    padding-bottom: .85em;
    @media (hover: hover) {
      &:hover {
        opacity: .6;
        cursor: pointer;
      }
    }
    &.iconArrow { /* "＞"アイコンが入ったとき */
      padding-inline: 1.2em 2.6em;
    }
  }
}
/* リンクボタンに入れる"＞"アイコンのスタイル（リンクテキスト以外の場合はカスタム必須） */
.iconArrow {
  position: relative;
  &::after {
    content: "";
    opacity: .75; /* "＞"アイコンを少し薄く */
    width: .6em;
    height: .6em;
    border: 1px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translateY(-45%) rotate(45deg);
  }
  /* "＞"アイコンを下に向ける */
  &.Down {
    &::after {transform: translateY(-80%) rotate(135deg);}
  }
}
/* ページトップに戻るボタン（JSでウインドウ右下に出現する）※JSは必須 */
nav.scroll-up {
  font-size: 1em;
  visibility: hidden;
  transform: translateY(120%);
  transition: all 0.25s ease-in;
  position: fixed;
  bottom: 2vw;
  right: 1vw;
  z-index: 999;
  &.is-show {
    visibility: visible;
    transform: translateY(0);
  }
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    padding: .3em;
    color: #fff;
    border: 2px solid currentColor;
    background-color: #111;
    opacity: .75;
    &:hover {cursor: pointer; opacity: .6;}
    /* 矢印の縦ケイ */
    .arrow-up {
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
      position: relative;
      width: 0.15em;
      height: 1em;
      background: currentColor;
    }
    /* 矢印の三角部分 */
    .arrow-up::before {
      content: '';
      width: 0.75em;
      height: 0.75em;
      border: 0.2em solid currentColor;
      border-left: 0;
      border-bottom: 0;
      transform: rotate(-45deg);
      transform-origin: top right;
      position: absolute;
      top: -0.05em;
      right: 50%;
      box-sizing: border-box;
    }
  }
}

/*********** dlタグを使ってテーブル表示するスタイル  ***********/
dl.dl_table {
  container: dl-table / inline-size;
  --dt-size: 12vw;
  --dt-min-size: 6em;
  --dt-width: clamp(var(--dt-min-size), var(--dt-size), 30%);
  --box-padding: 1.4vh;

  > div {
    margin: 0;
    background-color: #fff;
    padding: var(--box-padding);
    position: relative;
    border: 1px solid #ccc;
    border-bottom: none;
    > dt {
      width: var(--dt-width);
      display: block;
      align-content: center;
      position: absolute;
      inset: 0;
      padding: .5em;
      margin: 0;
      text-align: center;
      background-color: var(--Brand-Color-5);
      border-right: 1px solid #ccc;
    }
    > dd {
      margin-left: var(--dt-width);
      padding: 0 1.2% 0 1.2%;
    }
  }
  > div:last-child {border-bottom: 1px solid #ddd;}
}
@container dl-table (width <= 460px) {
  dl.dl_table > div {
    margin-top: 1em;
    padding: 0 0 .5em;
    border: none;
    &:last-child {border: none;}
    > dt {
      position: static;
      text-align: left;
      padding: .25em .3em .25em .5em;
      width: 100%;
      border: none;
    }
    > dd {
      padding: 0;
      margin: .5em 0 .5em .5em;
    }
  }
}

/********************* ＜table＞タグへのカスタム設定 *********************/

/* テーブル（表組み）の追加設定 */
table.add {
  --Table-BG-color: #fff; /* 背景色 */
  --Table-border-color: #ccc; /* ボーダーの色 */
  --Table-th-BGcolor: #efefef; /* 見出しセルの背景色 */
  --Table-th-Textcolor: currentColor; /* 見出しセルのテキスト色 */
  --Table-th-TextSize: .8em; /* 見出しセルのテキストサイズ */
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  background-color: var(--Table-BG-color);
  th {
    font-size: var(--Table-th-TextSize);
    background-color: var(--Table-th-BGcolor);
  }
  td {text-align: center;}
  td,th {border-color: var(--Table-border-color);}
}
table.Grid {
  --th-col-MinWidth: 5em; /* 行の見出しの最小幅 */
  --th-col-MaxWidth: 15%; /* 行の見出しの最大幅 */
  --data-column: 4; /* データセルの列数 */
  --Table-sp-th-TextSize: .75; /* SPサイズの見出しセルのテキストサイズ（単位はem 入力は無し・変更不可） */
  --Table-sp2-width: 95cqw; /* SPサイズのテーブルの表示される幅（-5cqwはスクロールバーの分） */
  --Table-sp2-MinWidth: 130cqw; /* SPサイズの表組みの全幅 */
  > tbody > tr {
    display: grid;
    grid-template-columns: max(var(--th-col-MinWidth), var(--th-col-MaxWidth)) repeat(var(--data-column), 1fr);
    > th, > td {margin: -1px; align-content: center; background-color: var(--Table-BG-color);}
    > th {
      background-color: var(--Table-th-BGcolor);
      order: 0;
    }
  }
}

/* テーブル（表組み）の親要素をコンテナに指定 */
:has( table.Grid ) {container: addGridContainer / inline-size;}

@container addGridContainer (width <= 500px) {
  /* 縦横軸を入れ替えない表組みのSPスタイルその1 */
  table.Grid.sp {
    tbody {
      > tr:first-of-type > th:first-of-type {display: none;}
      > tr {
        grid-template-columns: repeat(var(--data-column), 1fr);
        th:first-of-type {
          grid-column: 1 / span var(--data-column);
          text-align: left;
          font-size: calc(var(--Table-sp-th-TextSize) * 1em);
          padding-block: .1em;
        }
      }
    }
  }
  /* 縦横軸を入れ替えない表組みのSPスタイルその2 */
  table.Grid.sp2 {
    width: var(--Table-sp2-width);
    border: none;
    > tbody {
      position: relative;
      display: grid;
      width: var(--Table-sp2-width);
      border: 1px solid var(--Table-border-color);
      overflow-x: scroll;
      overflow-y: hidden;
      > tr {
        min-width: var(--Table-sp2-MinWidth);
        > th:first-of-type {
          position: sticky;
          top: 0;
          left: 0;
        }
      }
    }
  }
}
/* 縦横軸を入れ替える表組みのスタイル */
table.add.Grid.Transpose {
  --data-rows: 4; /* 表示した時のデータセルの行数 */
  --data-column: 5; /* 表示した時のデータセルの列数 */
  tbody {
    display: grid;
    gap: 0;
    grid-template-columns: max(var(--th-col-MinWidth), var(--th-col-MaxWidth)) repeat(var(--data-column), 1fr);
    > tr {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: .8fr repeat(var(--data-rows), 1fr);
    }
  }
}
/* 列の順序を逆にする表組みのスタイル */
table.add.Grid.Transpose.col-sort {
  > tbody {
    /* とりあえず、10列まで指定しておく */
    > tr:nth-of-type(1) {order: -99;} /* 一番左に見出しtrを表示するため */
    > tr:nth-of-type(2) {order: var(--data-column);}
    > tr:nth-of-type(3) {order: calc(var(--data-column) - 1);}
    > tr:nth-of-type(4) {order: calc(var(--data-column) - 2);}
    > tr:nth-of-type(5) {order: calc(var(--data-column) - 3);}
    > tr:nth-of-type(6) {order: calc(var(--data-column) - 4);}
    > tr:nth-of-type(7) {order: calc(var(--data-column) - 5);}
    > tr:nth-of-type(8) {order: calc(var(--data-column) - 6);}
    > tr:nth-of-type(9) {order: calc(var(--data-column) - 7);}
    > tr:nth-of-type(10) {order: calc(var(--data-column) - 8);}
    > tr:nth-of-type(11) {order: calc(var(--data-column) - 9);}
  }
}
/* 行の順序を逆にする表組みのスタイル */
table.add.Grid.Transpose.row-sort {
  > tbody > tr {
    /* とりあえず、10行まで指定しておく */
    th:first-of-type {order: -99;}
    th:nth-of-type(2), td:nth-of-type(1) {order: var(--data-rows);}
    th:nth-of-type(3), td:nth-of-type(2) {order: calc(var(--data-rows) - 1);}
    th:nth-of-type(4), td:nth-of-type(3) {order: calc(var(--data-rows) - 2);}
    th:nth-of-type(5), td:nth-of-type(4) {order: calc(var(--data-rows) - 3);}
    th:nth-of-type(6), td:nth-of-type(5) {order: calc(var(--data-rows) - 4);}
    th:nth-of-type(7), td:nth-of-type(6) {order: calc(var(--data-rows) - 5);}
    th:nth-of-type(8), td:nth-of-type(7) {order: calc(var(--data-rows) - 6);}
    th:nth-of-type(9), td:nth-of-type(8) {order: calc(var(--data-rows) - 7);}
    th:nth-of-type(10), td:nth-of-type(9) {order: calc(var(--data-rows) - 8);}
  }
}
@container addGridContainer (width <= 500px) {

  /* 縦横軸を入れ替える表組みのSPスタイルその1 */
  table.add.Grid.Transpose.sp {
    --Table-sp-th-TextSize:.65; /* SPサイズの行見出しの文字サイズ（単位はem 入力は無し・変更不可） */
    --Table-sp-th-Height: 2; /* SPサイズの行見出しの高さ（単位はem 無し・変更不可） */
    --Table-sp-width: 100cqw; /* SPサイズのテーブルの全幅 */
    tbody {
      position: relative;
      grid-template-columns: repeat(var(--data-column), 1fr);
      > tr {
        grid-row: 1;
        grid-template-columns: 1fr;
        grid-template-rows: 1.6em repeat(var(--data-rows), 1fr);
        th:first-of-type {
          grid-column: auto;
          text-align: center;
          font-size: var(--Table-th-TextSize);
          padding-block: .1em;
        }
        > td {
          min-height: 3.4em;
          padding-top: calc((var(--Table-sp-th-Height) * var(--Table-sp-th-TextSize)) * 1em);
        }
      }
      > tr:first-of-type {
        grid-column: 1 / calc(var(--data-column) + 1);
        z-index: 9;
        > th {opacity: .7;}
        > th:not(:first-of-type) {
          height: calc(var(--Table-sp-th-Height) * 1em);
          text-align: left;
          font-size: calc(var(--Table-sp-th-TextSize) * 1em);
          padding: .1em 0 .1em .5em;
        }
        > th:first-of-type {display: unset; background: transparent;}
      }
      /* とりあえず、10列まで指定しておく */
      > tr:nth-of-type(2) {grid-column: 1;}
      > tr:nth-of-type(3) {grid-column: 2;}
      > tr:nth-of-type(4) {grid-column: 3;}
      > tr:nth-of-type(5) {grid-column: 4;}
      > tr:nth-of-type(6) {grid-column: 5;}
      > tr:nth-of-type(7) {grid-column: 6;}
      > tr:nth-of-type(8) {grid-column: 7;}
      > tr:nth-of-type(9) {grid-column: 8;}
      > tr:nth-of-type(10) {grid-column: 9;}
      > tr:nth-of-type(11) {grid-column: 10;}
    }
  }
  /* 縦横軸を入れ替える表組みのSPスタイルその2 */
  table.add.Grid.Transpose.sp2 {
    --Table-sp2-width: 100cqw; /* SPサイズのテーブルの全幅 */
    width: var(--Table-sp2-width);
    border: none;
    > tbody {
      position: relative;
      width: var(--Table-sp2-width);
      overflow-x: scroll;
      overflow-y: hidden;
      > tr:first-of-type {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 9;
      }
      > tr {min-width: auto;}
      > tr > td {
        min-width: calc((var(--Table-sp2-MinWidth) - max(var(--th-col-MinWidth), var(--th-col-MaxWidth))) / var(--data-column));
        padding-inline: 1em;
      }
    }
  }
  /* 列の順序を逆にする表組みのSPスタイル（その1のみ） */
  table.add.Grid.Transpose.sp.col-sort {
    tbody {
      /* とりあえず、10列まで指定しておく */
      > tr:nth-of-type(2) {grid-column: var(--data-column);}
      > tr:nth-of-type(3) {grid-column: calc(var(--data-column) - 1);}
      > tr:nth-of-type(4) {grid-column: calc(var(--data-column) - 2);}
      > tr:nth-of-type(5) {grid-column: calc(var(--data-column) - 3);}
      > tr:nth-of-type(6) {grid-column: calc(var(--data-column) - 4);}
      > tr:nth-of-type(7) {grid-column: calc(var(--data-column) - 5);}
      > tr:nth-of-type(8) {grid-column: calc(var(--data-column) - 6);}
      > tr:nth-of-type(9) {grid-column: calc(var(--data-column) - 7);}
      > tr:nth-of-type(10) {grid-column: calc(var(--data-column) - 8);}
      > tr:nth-of-type(11) {grid-column: calc(var(--data-column) - 9);}
    }
  }
}



/* ブロック要素をリサイズできるようにする */
.ResizeWrap {
  resize: both;
  overflow: hidden;
  position: relative;
  &::after {
    content: "";
    width: 1em;
    aspect-ratio: 1;
    clip-path: polygon(0 100%,100% 0,100% 100%);
    background: linear-gradient(45deg,#FA6900,#C02942);
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

/* 要素を三角形に　HTML: <div class="triangle"></div> */
.triangle {
  width: 150px;
  aspect-ratio: 1;
  clip-path: polygon(0 100%,100% 0,100% 100%);
  background: linear-gradient(45deg,#FA6900,#C02942);
}

/* 要素を強制的にセンターにする */
.Position-center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.Mrgin-auto {
  margin-left: auto;
  margin-right: auto;
}