@charset "UTF-8";
/* -=-=-=-=-=-=-=-=-=-=- メディアクエリに応じたhtml要素の表示制御 -=-=-=-=-=-=-=-=-=-=- */
/* スマートフォン (縦表示時) より狭い場合に非表示 */
@media screen and (max-width: 480px) {
  .invisible_max_width_480px {
    display: none;
  }
}
/* スマートフォン (縦表示時) より狭い場合に表示 */
@media screen and (min-width: 481px) {
  .visible_min_width_481px {
    display: none;
  }
}
/* -=-=-=-=-=-=-=-=-=-=- カラーモード（モードに応じて個別に設定） -=-=-=-=-=-=-=-=-=-=- */
body {
  transition: color 300ms, background-color 300ms;
  /* カラーチェンジをゆっくりにする */
}

/* -=-=-=-=-=- カラーモード：未設定、ライト -=-=-=-=-=- */
body,
body.colorMode_light {
  /* 下地カラー */
  --color-body-background: #dfdfdf;
  --color-body-text: #000;
  /* input */
  --color-input-background: #ddd;
  --color-input-text: #000;
  --color-input-border: solid 1px #000;
  /* textarea */
  --color-textarea-background: #ddd;
  --color-textarea-text: #000;
  --color-textarea-border: solid 1px #000;
  /* select */
  --color-select-background: #ddd;
  --color-select-text: #000;
  --color-select-border: solid 1px #000;
  /* option */
  --color-option-background: #ddd;
  --color-option-text: #000;
  /* checkbox要素のアクセントカラー */
  --color-checkbox-accent: #fff;
  /* select（の直前のlabel）要素のbefore（▼） */
  --color-select-label-before-background: #000;
  --color-select-label-before-text: #000;
  /* button */
  --color-button-background: rgba(220, 220, 220, 0.9);
  --color-button-text: #000;
  --color-button-border: solid 1px #000;
  /* 入力必須項目（のラベル）を示すマーク */
  --color-required-after-text: #f55;
  /* ラッパー */
  --color-wrapper-background: #eee;
  --color-wrapper-text: #000;
}

/* -=-=-=-=-=- カラーモード：ダーク -=-=-=-=-=- */
body.colorMode_dark {
  /* 下地カラー */
  --color-body-background: #000;
  --color-body-text: #ccc;
  /* input */
  --color-input-background: #333;
  --color-input-text: #ccc;
  --color-input-border: solid 1px #ccc;
  /* textarea */
  --color-textarea-background: #333;
  --color-textarea-text: #ccc;
  --color-textarea-border: solid 1px #ccc;
  /* select */
  --color-select-background: #333;
  --color-select-text: #ccc;
  --color-select-border: solid 1px #ccc;
  /* option */
  --color-option-background: #333;
  --color-option-text: #ccc;
  /* checkbox要素のアクセントカラー */
  --color-checkbox-accent: #ccc;
  /* select（の直前のlabel）要素のbefore（▼） */
  --color-select-label-before-background: #ccc;
  --color-select-label-before-text: #ccc;
  /* button */
  --color-button-background: #333;
  --color-button-text: #ccc;
  --color-button-border: solid 1px #555;
  /* 入力必須項目（のラベル）を示すマーク */
  --color-required-after-text: #f55;
  /* ラッパー */
  --color-wrapper-background: #222;
  --color-wrapper-text: #ccc;
}

/* -=-=-=-=-=- カラーモード：アイボリー -=-=-=-=-=- */
body.colorMode_ivory {
  /* 下地カラー */
  --color-body-background: #dec7be;
  --color-body-text: #3d2f2b;
  /* input */
  --color-input-background: rgba(243, 221, 201, 0.9);
  --color-input-text: #3d2f2b;
  --color-input-border: solid 1px #3d2f2b;
  /* textarea */
  --color-textarea-background: rgba(243, 221, 201, 0.9);
  --color-textarea-text: #3d2f2b;
  --color-textarea-border: solid 1px #3d2f2b;
  /* select */
  --color-select-background: rgba(243, 221, 201, 0.9);
  --color-select-text: #3d2f2b;
  --color-select-border: solid 1px #3d2f2b;
  /* option */
  --color-option-background: rgba(243, 221, 201, 0.9);
  --color-option-text: #3d2f2b;
  /* checkbox要素のアクセントカラー */
  --color-checkbox-accent: rgba(243, 221, 201, 0.9);
  /* select（の直前のlabel）要素のbefore（▼） */
  --color-select-label-before-background: #3d2f2b;
  --color-select-label-before-text: #3d2f2b;
  /* button */
  --color-button-background: #f3ddc9;
  --color-button-text: #3d2f2b;
  --color-button-border: solid 1px #e9baaa;
  /* 入力必須項目（のラベル）を示すマーク */
  --color-required-after-text: #f55;
  /* ラッパー */
  --color-wrapper-background: #e8cfc0;
  --color-wrapper-text: #3d2f2b;
}

/* -=-=-=-=-=- カラーモード：ブルー -=-=-=-=-=- */
body.colorMode_blue {
  /* 下地カラー */
  --color-body-background: #a8daf0;
  --color-body-text: #0f2833;
  /* input */
  --color-input-background: rgba(192, 225, 240, 0.9);
  --color-input-text: #0f2833;
  --color-input-border: solid 1px #0f2833;
  /* textarea */
  --color-textarea-background: rgba(192, 225, 240, 0.9);
  --color-textarea-text: #0f2833;
  --color-textarea-border: solid 1px #0f2833;
  /* select */
  --color-select-background: rgba(192, 225, 240, 0.9);
  --color-select-text: #0f2833;
  --color-select-border: solid 1px #0f2833;
  /* option */
  --color-option-background: rgba(192, 225, 240, 0.9);
  --color-option-text: #0f2833;
  /* checkbox要素のアクセントカラー */
  --color-checkbox-accent: #0f2833;
  /* select（の直前のlabel）要素のbefore（▼） */
  --color-select-label-before-background: #368db3;
  --color-select-label-before-text: #0f2833;
  /* button */
  --color-button-background: #d8e9f0;
  --color-button-text: #0f2833;
  --color-button-border: solid 1px #78ccf0;
  /* 入力必須項目（のラベル）を示すマーク */
  --color-required-after-text: #f55;
  /* ラッパー */
  --color-wrapper-background: #c0e1f0;
  --color-wrapper-text: #0f2833;
}

/* -=-=-=-=-=- 各要素へカラーを設定（ここは基本いじらない） -=-=-=-=-=- */
/* 下地カラー */
body {
  background-color: var(--color-body-background);
  color: var(--color-body-text);
}

/* input */
input {
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: var(--color-input-border);
}

/* textarea */
textarea {
  background-color: var(--color-textarea-background);
  color: var(--color-textarea-text);
  border: var(--color-textarea-border);
}

/* select */
select {
  background-color: var(--color-select-background);
  color: var(--color-select-text);
  border: var(--color-select-border);
}

/* option */
option {
  background-color: var(--color-option-background);
  color: var(--color-option-text);
}

/* checkbox要素のアクセントカラー */
input[type=checkbox] {
  accent-color: var(--color-checkbox-accent);
}

/* select（の直前のlabel）要素のbefore（▼） */
label:has(+ select)::before {
  background-color: var(--color-select-label-before-background);
  color: var(--color-select-label-before-text);
}

/* button */
button {
  background-color: var(--color-button-background);
  color: var(--color-button-text);
  border: var(--color-button-border);
}

/* ラッパー */
.wrapper {
  background-color: var(--color-wrapper-background);
  color: var(--color-wrapper-text);
}

/* -=-=-=-=-=-=-=-=-=-=- オプション -=-=-=-=-=-=-=-=-=-=- */
*, *::before, *::after {
  /* スクロールバーを非表示にする */
  -ms-overflow-style: none;
  /* IE */
  scrollbar-width: none;
  /* Firefox */
  /* 画像・テキストを選択不可にする */
  user-select: none;
  /* width値, height値にcontent, padding, borderを含ませる */
  box-sizing: border-box;
  /* 文字列を自動で折り返す */
  word-break: break-all;
  /* スクロールをスムーズにする */
  scroll-behavior: smooth;
  /* テキストアラインはinheritが便利 */
  text-align: inherit;
}

*::-webkit-scrollbar {
  /* スクロールバーを非表示にする */
  display: none;
  /* Google Chrome, Safari, Edge */
}

/* 画像・テキストの選択・ドラッグ禁止 */
body {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

/* -=-=-=-=-=-=-=-=-=-=- フォントファミリー -=-=-=-=-=-=-=-=-=-=- */
/* Kiwi_Maru */
@font-face {
  font-family: "Kiwi_Maru";
  font-style: normal;
  font-weight: 400;
  src: url("../font/Kiwi_Maru/KiwiMaru400.woff2") format("woff2"), url("../font/Kiwi_Maru/KiwiMaru400.woff") format("woff");
  font-display: swap;
}
/* Ubuntu */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("../font/Ubuntu/Ubuntu400.woff2") format("woff2"), url("../font/Ubuntu/Ubuntu400.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu_italic";
  font-style: italic;
  font-weight: 400;
  src: url("../font/Ubuntu/Ubuntu400Italic.woff2") format("woff2"), url("../font/Ubuntu/Ubuntu400Italic.woff") format("woff");
  font-display: swap;
}
*, *::before, *::after {
  font-family: "Kiwi_Maru", "Ubuntu", "serif", "sans-serif";
  /* font-family: "Ubuntu"; */
  /* font-family: "Ubuntu_italic"; */
}

/* -=-=-=-=-=-=-=-=-=-=- フォントサイズ -=-=-=-=-=-=-=-=-=-=- */
* {
  font-size: 1.7rem;
}

/* デフォルト（PC） */
html {
  /* font-size: 62.5%; */
  /* 10px (when browser 100% font-size is 16px) */
  font-size: 10px;
}

/* タブレット (縦表示時) を想定 */
@media screen and (max-width: 1024px) {
  html {
    /* font-size: 56.25%; */
    font-size: 9px;
  }
}
/* スマートフォン (横表示時) を想定 */
@media screen and (max-width: 896px) {
  html {
    /* font-size: 50%; */
    font-size: 8px;
  }
}
/* スマートフォン (縦表示時) を想定 */
@media screen and (max-width: 480px) {
  html {
    /* font-size: 43.75%; */
    font-size: 7px;
  }
}
h1 {
  font-size: 5.8rem;
}

h2 {
  font-size: 3.2rem;
}

h3 {
  font-size: 2.6rem;
}

h4 {
  font-size: 2.2rem;
}

h5 {
  font-size: 2rem;
}

h6 {
  font-size: 1.8rem;
}

/* -=-=-=-=-=-=-=-=-=-=- ユーザーフォーム -=-=-=-=-=-=-=-=-=-=- */
.inputForm_container {
  padding: 0 0 10px;
}

input:not([type=checkbox]), textarea, select {
  width: 100%;
}

input[type=checkbox] {
  transform: scale(1.5);
  margin: 0 5px 3px;
}

select {
  cursor: pointer;
}

/* select要素は疑似セレクタが設定できないので設定可能なlabel要素に設定 */
label:has(+ select) {
  position: relative;
  display: block;
  width: 100%;
}

label:has(+ select)::before {
  position: absolute;
  content: "";
  /* 図形の位置 */
  top: 26px;
  right: 8px;
  /* 図形の大きさ、形 */
  height: calc(tan(60deg) * 10px / 2);
  width: 10px;
  /* 三角形の向き */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 入力必須項目（のラベル）を示すマーク */
.required::after {
  content: " *";
  vertical-align: middle;
}

/* メニューアイテムボタン（アコーディオン開閉ボタン）以外のボタン要素 */
button:not([id^=menuItemButton]) {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  margin: 10px 0;
  border-radius: 5px;
  text-align: center;
}

/* -=-=-=-=-=-=-=-=-=-=- 目次サイドメニュー -=-=-=-=-=-=-=-=-=-=- */
/* サイドメニュー表示制御 */
/* スマートフォン (横表示時) 以下で非表示 */
@media screen and (max-width: 896px) {
  aside {
    display: none;
  }
}
aside {
  overflow-y: scroll;
  position: sticky;
  top: 0;
  height: 100vh;
  width: 400px;
  background-color: #fff;
}

#tocContainerTarget {
  /* #tocContainerTarget以下は、js/toc.jsで生成されるタグ要素 */
  /* .activeMenuPaginatorCSSクラスは、js/paginator.jsで付与されるプロパティ */
}
#tocContainerTarget #tocContainer {
  padding: 2rem 2rem;
}
#tocContainerTarget #tocContainer li {
  /* 行間 */
  margin: 3px 0;
}
#tocContainerTarget #tocContainer li ul {
  /* table of contentsをアウトラインに沿ってインデントさせる */
  padding-left: 1em;
}
#tocContainerTarget #tocContainer a {
  display: block;
  padding: 8px;
  /* font-size: 1.7rem; */
}
#tocContainerTarget #tocContainer a.activeMenuPaginator {
  background-color: rgba(150, 150, 150, 0.5);
  border-radius: 1px;
}

/* -=-=-=-=-=-=-=-=-=-=- 複数ページに共通するスタイル -=-=-=-=-=-=-=-=-=-=- */
body {
  /* このページのテキストは原則、左寄せ */
  text-align: left;
  background-color: #eee;
}

.wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

strong {
  color: #f55;
}

main {
  background-color: #fff;
  /* width: calc(100% - 400px); */
  width: 100%;
  padding-bottom: 3rem;
  /* padding: 0 3rem; */
  /* ※ 不採用 ∵ 左右の余白は個別で設定した方が、後々柔軟なレイアウトに対応できるから */
  /* 横幅いっぱいいっぱいのグローバル画像を後に追加したい場合など */
  /* イメージ要素は余白0とする */
  /* 余白が必要な場合は原則p要素で囲うようにする */
  /* 余白のリセット */
}
main h1 {
  padding-top: 5rem;
  margin: 0 3rem 5rem;
  line-height: 1em;
}
main h2 {
  margin: 4rem 3rem;
  padding: 1.5rem;
  line-height: 1.2em;
  background-color: #dcdcdc;
  border-left: solid 1rem #888;
}
main h3 {
  margin: 3rem 3rem;
  padding: 1rem 1.5rem;
  border-left: solid 5px #888;
}
main p {
  margin: 2rem 4rem;
  /* font-size: 1.7rem; */
  line-height: 1.5em;
}
main img, main video {
  display: inline-block;
  width: 100%;
}
main img.maximum, main video.maximum {
  padding: 0;
}
main p > img, main p > video, main div > img, main div > video, main picture > img, main picture > video, main figure > img, main figure > video {
  /* 縦に大きすぎるイメージは見づらいので上限を設定 */
  max-height: 50vh;
  object-fit: contain;
  /* aspect-ratio: 1 / 1; */
}
main p > img.maxHeight_none, main p > video.maxHeight_none, main div > img.maxHeight_none, main div > video.maxHeight_none, main picture > img.maxHeight_none, main picture > video.maxHeight_none, main figure > img.maxHeight_none, main figure > video.maxHeight_none {
  /* 上限設定を解除 */
  max-height: none;
}
main ul {
  margin: 0 3rem;
  padding-left: 3.5rem;
}
main li {
  list-style: disc;
  /* font-size: 1.7rem; */
  line-height: 1.5em;
}
main table {
  width: calc(100% - 2 * 3rem);
  margin: 0 auto 4.5rem;
  border-collapse: collapse;
}
main tbody {
  border: solid 1px #555;
}
main th, main td {
  border: dashed 1px #555;
  vertical-align: middle;
  padding: 0.8rem 1.2rem;
  /* テーブルセル内のコンテンツの余白を0にする */
}
main th *, main td * {
  margin: 0;
  /* ol, ulは行頭記号スペースとしてpaddingが必要 */
}
main th *:not(ol):not(ul), main td *:not(ol):not(ul) {
  padding: 0;
}
main th {
  word-break: keep-all;
  font-weight: 500;
  text-align: center;
  background-color: #dcdcdc;
}
main td {
  word-break: break-all;
  text-align: left;
  background-color: #fff;
}
main a[download], main a.btn {
  display: block;
  background-color: #333;
  color: #fff;
  text-align: center;
  margin: 0 4rem;
  padding: 2rem;
  border-radius: 100vh;
}
main small {
  display: block;
  text-align: center;
}
main .container_flexContents p, main .container_flexContents div, main .container_flexContents figure, main .container_flexContents img, main .container_flexContents video {
  padding: 0;
  margin: 0;
}

/* -=-=-=-=-=- イメージ要素用のフレックスコンテナ -=-=-=-=-=- */
.container_flexContents {
  margin: 0 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.container_flexContents .basis_50 {
  /* ※ flex-basisだと、何故かChromeで指定した幅に収まらない */
  /* Firefoxではflex-basisでも理想通りの動きをする */
  /* --> flex-basisの代わりにwidthを用いる */
  /* flex-basis: 50%; */
  width: 50%;
  padding: 2rem;
  /* コンテンツの最小幅を設定 ※コンテンツが小さくなりすぎることを防止 */
  min-width: 250px;
}
.container_flexContents .basis_33 {
  /* flex-basis: 33%; */
  width: 33%;
  padding: 1.5rem;
  min-width: 150px;
}
.container_flexContents .basis_25 {
  /* flex-basis: 25%; */
  width: 25%;
  padding: 1rem;
  min-width: 50px;
}
.container_flexContents .basis_20 {
  /* flex-basis: 20%; */
  width: 20%;
  padding: 0.5rem;
  min-width: 10px;
}

/* -=-=-=-=-=- タブボックス -=-=-=-=-=- */
.tabBody {
  margin: 0 3rem;
  display: flex;
  flex-wrap: wrap;
  /* タブボックスコンテナ */
}
.tabBody input {
  display: none;
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.1 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.2 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.3 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.4 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.5 */
}
.tabBody input.input1:checked ~ .label1 {
  cursor: default;
}
.tabBody input.input1:checked ~ .tabBoxContainer > .tabBox1 {
  /* チェック時はブロックとして表示する */
  display: block;
  background-color: #ff8484;
}
.tabBody input.input2:checked ~ .label2 {
  cursor: default;
}
.tabBody input.input2:checked ~ .tabBoxContainer > .tabBox2 {
  /* チェック時はブロックとして表示する */
  display: block;
  background-color: #ffc080;
}
.tabBody input.input3:checked ~ .label3 {
  cursor: default;
}
.tabBody input.input3:checked ~ .tabBoxContainer > .tabBox3 {
  /* チェック時はブロックとして表示する */
  display: block;
  background-color: #83ffc1;
}
.tabBody input.input4:checked ~ .label4 {
  cursor: default;
}
.tabBody input.input4:checked ~ .tabBoxContainer > .tabBox4 {
  /* チェック時はブロックとして表示する */
  display: block;
  background-color: #5badff;
}
.tabBody input.input5:checked ~ .label5 {
  cursor: default;
}
.tabBody input.input5:checked ~ .tabBoxContainer > .tabBox5 {
  /* チェック時はブロックとして表示する */
  display: block;
  background-color: #8484ff;
}
.tabBody label {
  display: inline-block;
  flex-basis: 20%;
  padding: 1.5rem 0;
  text-align: center;
  transition: background-color 0.5 ease, color 0.5 ease;
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.1 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.2 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.3 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.4 */
  /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
  /*  タブ No.5 */
}
.tabBody label:hover {
  cursor: pointer;
}
.tabBody label.label1 {
  background-color: #ff8484;
}
.tabBody label.label2 {
  background-color: #ffc080;
}
.tabBody label.label3 {
  background-color: #83ffc1;
}
.tabBody label.label4 {
  background-color: #5badff;
}
.tabBody label.label5 {
  background-color: #8484ff;
}
.tabBody .tabBoxContainer {
  width: 100%;
  /* tabBox */
}
.tabBody .tabBoxContainer > div {
  /* 非チェック時は隠しておく */
  display: none;
  padding: 3rem 0;
}