/* ======================================
=========================================
    ***  Original style for LP    ***    
=========================================
====================================== */
@charset "UTF-8";
/* ===================================
  変数bar宣言
=================================== */
:root {
  /* メディアクエリ：セットアップ */
  --res-sp: 599;
  --res-tab: 1024;
  /* 使用カラー：セットアップ */
  --color-text: #333;
  --color-toyo: #2B4AB9;
  --color-dark: #2F2F3C;
  --color-light: #8fa3ef;
  --color-bd: #595959;
  --color-f8: #f8f8f8;
  --color-ddd: #ddd;
  /* margin.padding */
  --space-rem: 0rem;
  --space-1rem: 1rem;
  --space-2rem: 2rem;
  --space-3rem: 3rem;
  --space-4rem: 4rem;
  --space-5rem: 5rem;
}
/* ===================================
  ベースタグ設定
=================================== */
html {
  font-size: 62.5%; /* ベースフォントサイズを10pxに統一＠rem計算に置き換えが楽 */
  /* 230130: フォント変更に伴うサイズ調整 */
  /* font-size: 55.0%;*/
}
body {
  color: var(--color-text);
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  /* font-family: "メイリオ", "Meiryo UI", "Meiryo", san-serif; */
  font-size: 1.6rem;
  font-weight: 400;
  height: 100%;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; /* スマホ閲覧時の文字サイズ自動調整機能をcssで指定した通りとする */
  -webkit-text-size-adjust: 100%; /* ↑ Safari向けのベンダープレフィックス */
}
a, a:hover, a:active, a:visited {
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.5s ease-out;
}
a:hover {
  opacity: .7;
}
hr {
  height: 1px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom-width: 1px;
  border-bottom-color: var(--color-bd);
  border-bottom-style: solid;
  margin: .5rem 0;
}
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
table {
  /* border-left: 1px solid var(--color-bd); */
  border-top: 1px solid var(--color-bd);
  border-collapse: collapse;
  width: 100%;
}
table tr {}
table th, table td,
table.dataTable thead th, table.dataTable thead td {
  border-right: 1px solid var(--color-bd);
  border-bottom: 1px solid var(--color-bd);
  font-size: 1.1rem;
  line-height: 1.5rem;
  padding: 0.5rem;
  word-break: keep-all;
}
table th {
  background: var(--color-toyo);
}
table td {
}
table details a, table details a:hover,
table details a:active, table details a:visited,
.primary-btn {
  background: var(--color-text);
  color: var(--color-f8);
  padding: 0.5rem 1rem;
  text-align: center;
  word-break: keep-all;
  display: block;
}
.primary-btn:hover,
.primary-btn:active {
  background: var(--color-text);
  color: var(--color-f8);
}
.primary-btn:visited {
  background: var(--color-text);
  color: var(--color-f8);
}
table details a, table details a:hover,
table details a:active, table details a:visited,
table details button, table details button:hover {
  margin-top: 1rem;
  font-size: 1.2rem;
}
/* datatables スタイル打ち消し */
table.dataTable.no-footer {
  border-bottom: none !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 0.5rem 1rem !important;
}
#dataTable_previous:before {
  content: "\02190";
  padding-right: 0.5rem;
}
#dataTable_next {
  padding-right: 0;
}
#dataTable_next:after {
  content: "\02192";
  padding-left: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border: none !important;
  border-radius: 0 !important;
  background: var(--color-ddd) !important;
}
#dataTable_length, #dataTable_filter, #dataTable_info, #dataTable_paginate {
  font-size: 1.3rem;
}
#dataTable_length, #dataTable_filter {
  text-align: left;
}
#dataTable_info {
  text-align: right;
}
table.dataTable thead th, table.dataTable thead td {
  border-bottom: 1px solid var(--color-text) !important;
}
/* input button 追加用スタイル -1 */
button[type="button"].primary {
  background: var(--color-toyo);
  color: var(--color-f8);
  text-align: center;
}
button[type="button"].primary:hover {
  background: var(--color-toyo);
  color: var(--color-f8);
  opacity:.7;
}
/* input button 追加用スタイル -2 */
button[type="button"].secondary {
  background: var(--color-text);
  color: var(--color-f8);
  display: block;
  text-align: center;
}
button[type="button"].secondary:hover {
  background: var(--color-text);
  color: var(--color-f8);
  opacity:.7;
}
/* input checkbox スタイル */
/** 全てのinputに適用されてしまうため、擬似class 追加 */
input[type="checkbox"]:not(.form-check-input) {
  border: none;
  height: 1rem;
  width: 1rem !important;
  padding: 1rem;
  position: relative;
  transition: all .5s ease-out;
}
input[type="checkbox"]:not(.form-check-input):before,input[type="checkbox"]:not(.form-check-input):after {
  content: "";
  background: var(--color-text);
  position: absolute;
  width: 2px;
}
input[type="checkbox"]:not(.form-check-input):checked:before {
  height: 6px;
  transform: rotate(-45deg);
  top: 10px;
  left: 6px;
}
input[type="checkbox"]:not(.form-check-input):checked:after {
  height: 12px;
  transform: rotate(45deg);
  top: 5px;
  right: 7px;
}
input[type="checkbox"]:not(.form-check-input):hover {
  cursor: pointer;
}
table details a:hover,
.primary-btn:hover {
  color: var(--color-f8);
}
details summary {
  display: block;
  list-style: none;
  position: relative;
}
details summary::-webkit-details-marker {
  display:none;
}
details summary:hover {
  cursor: pointer;
}
details[open] summary {
  padding-bottom: 1rem;
}
small {
  font-size: 84%;
}
pre {
  background: var(--color-eee);
  margin-bottom: 4rem;
  overflow: auto;
  padding: 2rem;
}
em {
  font-style: normal;
}

/* input */
*:focus {
  outline: none;
}
input:-webkit-autofill {
  box-shadow: 0 0 0px 999px #fff inset;
}
input:-webkit-autofill {
  transition: background-color 10000s ease-in-out 0s;
}
input, button, textarea, select {
  background: var(--color-ddd);
  border: none;
  color: var(--color-text);
  padding: 0.5rem 1rem;
  transition: background-color .5s ease-out;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
}
button:hover {
  background: var(--color-ddd);
  color: var(--color-text);
  cursor: pointer;
}
input:focus, select:focus, textarea:focus {
  background: var(--color-f8);
  transition: outline .5s ease-out;
}
button, input[type="file"] {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="file"] {
  border-radius: 0;
  opacity: 1;
  padding-left: 0;
  padding-right: 0;
}
/** 全てのボタンに適用されてしまうため、擬似class 追加 */
/*button[type="button"]:not(.btn) { */
button[type="button"]:not(.btn, .dropdown-toggle, .dropdown-item) {
  background: var(--color-toyo);
  color: var(--color-f8);
}
/* button[type="button"]:hover { */
button[type="button"]:not(.btn, .dropdown-toggle, .dropdown-item):hover {
  background: var(--color-toyo);
  color: var(--color-f8);
  opacity:.7;
}
button[type="submit"]:not(.btn, .dropdown-toggle, .dropdown-item) {
  background: var(--color-toyo);
  color: var(--color-f8);
  /* outline: 1px solid var(--color-toyo); */
}
button[type="submit"]:not(.btn, .dropdown-toggle, .dropdown-item):hover {
  background: var(--color-f8);
  color: var(--color-toyo);
  outline: 1px solid var(--color-toyo);
  outline-offset: -1px;
  opacity:.7;
}
input[type="file"]:focus, input[type="file"]:active {
  outline: none;
  opacity: .7;
}
input[disabled] {
  background: var(--color-ddd);
  outline: 1px solid var(--color-ddd);
}
input::placeholder {
  font-size: 1.3rem;
}
/* iOS デフォルト設定を初期化 */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}
/* ドロップダウン */
main details summary {
  font-weight: 600;
  font-size: 1.8rem;
  padding-left: 2rem;
}
main details summary::after {
  content: "\ff0b";
  position: absolute;
  left: 0;
  transition: all 0.5s ease-out;
}
main details[open] summary::after {
  transform: rotate(45deg);
}
main details[open] .open-box {   /* クリックしたら表示される要素 */
  overflow: auto;
  animation: ani 1s;  /* アニメーションの指定 */
  padding: 1rem 0 0 0;
}
@keyframes ani {
  0% {
    opacity: 0;   /* 最初は見えない状態 */
    transform: translateY(-20px); /* 20px上にずらしておく */
  }
  100% {
    opacity: 1; /* 1秒後に見えるように */
    transform: none;  /* 20pxずらしたものを取り除く */
  }
}

/* ===================================
  画像・比率調整
=================================== */
img {
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

/* chrome opera のみ：画像縮小時のレンダリングをシャープに。※Safariだとかえって見辛くなるため必要なブラウザ指定 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0), screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ===================================
  カラー
=================================== */
/* 背景 */
.bg-blk {background: var(--color-text)}
.bg-wht {background: var(--color-f8);}
.bg-gray {background: var(--color-text);}
.bg-lgy {background: var(--color-ddd);}
.bg-ivory {background: var(--color-eee);}
.bg-f8 {background: var(--color-f8);}
/* テキスト */
.fc-blk {color: var(--color-text);}
.fc-wht {color: var(--color-f8);}
.fc-gray {color: var(--color-text);}
.fc-lgy {color: var(--color-ddd);}
.fc-ivory {color: var(--color-eee);}
.fc-f8 {color: var(--color-f8);}
.fc-hi-contrast {filter: invert(100%) grayscale(100%) contrast(100);}

/* ===================================
  ボーダー
=================================== */
.bd_b_dot_ivory {
  border-bottom: 1px dotted #d4d4d4;
}
.bd_top_no {
  border-top: none;
}
.bd_bottom_no {
  border-bottom: none;
}
.bd_left_no {
  border-left: none;
}
.bd_right_no {
  border-right: none;
}

/* ===================================
  文字：寄せ/ウエイト/サイズ
=================================== */
/* 文字寄せ */
.ta_c {
  text-align: center;
}
.ta_l {
  text-align: left;
}
.ta_r {
  text-align: right;
}
/* ウエイト */
.fw-b {
  font-weight: 600;
}
.fw-sb {
  font-weight: 500;
}
.fw-m {
  font-weight: 400;
}
.fw-r {
  font-weight: 300;
}
.fw-l {
  font-weight: 200;
}
/* サイズ */
.fs-10 {
  font-size: 1rem;
}
.fs-12 {
  font-size: 1.2rem;
}
.fs-14 {
  font-size: 1.4rem;
}
.fs-16 {
  font-size: 1.6rem; /* ベースサイズ */
}
.fs-18 {
  font-size: 1.8rem;
}
.fs-20 {
  font-size: 2rem;
}
.fs-22 {
  font-size: 2.2rem;
}
.fs-24 {
  font-size: 2.4rem;
}
.fs-26 {
  font-size: 2.6rem;
}
.fs-28 {
  font-size: 2.8rem;
}
.fs-30 {
  font-size: 3rem;
}
.fs-32 {
  font-size: 3.2rem;
}
.fs-34 {
  font-size: 3.4rem;
}
.fs-36 {
  font-size: 3.6rem;
}
.fs-38 {
  font-size: 3.8rem;
}
.fs-40 {
  font-size: 4rem;
}
/* インデント */
.ti-1 {
  text-indent: -1em;
  padding-left: 1em;
}
.ti-2 {
  text-indent: -2em;
  padding-left: 2em;
}
.ti-3 {
  text-indent: -3em;
  padding-left: 3em;
}
.ti-4 {
  text-indent: -4em;
  padding-left: 4em;
}
.ti-5 {
  text-indent: -5em;
  padding-left: 5em;
}

/* ===================================
  余白
=================================== */
/* margin */
.mar_a {margin: auto !important;}
.mar_0a {margin: 0 auto !important;}
.mar_0_Xrem {margin: 0 var(--space-rem) !important;}
.mar_025_Xrem {margin: .25rem var(--space-rem) !important;}
.mar_05_Xrem {margin: .5rem var(--space-rem) !important;}
.mar_1_Xrem {margin: 1rem var(--space-rem) !important;}
.mar_2_Xrem {margin: 2rem var(--space-rem) !important;}
.mar_3_Xrem {margin: 3rem var(--space-rem) !important;}
.mar_4_Xrem {margin: 4rem var(--space-rem) !important;}
.mar_X_0rem {margin: var(--space-rem) 0 !important;}
.mar_X_025rem {margin: var(--space-rem) .25rem !important;}
.mar_X_05rem {margin: var(--space-rem) .5rem !important;}
.mar_X_1rem {margin: var(--space-rem) 1rem !important;}
.mar_X_2rem {margin: var(--space-rem) 2rem !important;}
.mar_X_3rem {margin: var(--space-rem) 3rem !important;}
.mar_X_4rem {margin: var(--space-rem) 4rem !important;}
.mar_t_025rem {margin-top: .25rem !important;}
.mar_t_05rem {margin-top: .5rem !important;}
.mar_t_1rem {margin-top: var(--space-1rem) !important;}
.mar_t_2rem {margin-top: var(--space-2rem) !important;}
.mar_t_3rem {margin-top: var(--space-3rem) !important;}
.mar_t_4rem {margin-top: var(--space-4rem) !important;}
.mar_r_025rem {margin-right: .25rem !important;}
.mar_r_05rem {margin-right: .5rem !important;}
.mar_r_1rem {margin-right: var(--space-1rem) !important;}
.mar_r_2rem {margin-right: var(--space-2rem) !important;}
.mar_r_3rem {margin-right: var(--space-3rem) !important;}
.mar_r_4rem {margin-right: var(--space-4rem) !important;}
.mar_b_025rem {margin-bottom: .25rem !important;}
.mar_b_05rem {margin-bottom: .5rem !important;}
.mar_b_1rem {margin-bottom: var(--space-1rem) !important;}
.mar_b_2rem {margin-bottom: var(--space-2rem) !important;}
.mar_b_3rem {margin-bottom: var(--space-3rem) !important;}
.mar_b_4rem {margin-bottom: var(--space-4rem) !important;}
.mar_l_1rem {margin-left: var(--space-1rem) !important;}
.mar_l_2rem {margin-left: var(--space-2rem) !important;}
.mar_l_3rem {margin-left: var(--space-3rem) !important;}
.mar_l_4rem {margin-left: var(--space-4rem) !important;}
.mar_l_025rem {margin-left: .25rem !important;}
.mar_l_05rem {margin-left: .5rem !important;}
/* padding */
.pad_0 {padding: 0 !important;}
.pad_025_Xrem {padding: .25rem var(--space-rem) !important;}
.pad_05_Xrem {padding: .5rem var(--space-rem) !important;}
.pad_1_Xrem {padding: 1rem var(--space-rem) !important;}
.pad_2_Xrem {padding: 2rem var(--space-rem) !important;}
.pad_3_Xrem {padding: 3rem var(--space-rem) !important;}
.pad_4_Xrem {padding: 4rem var(--space-rem) !important;}
.pad_X_025rem {padding: var(--space-rem).25rem  !important;}
.pad_X_05rem {padding: var(--space-rem) .5rem !important;}
.pad_X_1rem {padding: var(--space-rem) 1rem !important;}
.pad_X_2rem {padding: var(--space-rem) 2rem !important;}
.pad_X_3rem {padding: var(--space-rem) 3rem !important;}
.pad_X_4rem {padding: var(--space-rem) 4rem !important;}
.pad_t_025rem {padding-top: .25rem !important;}
.pad_t_05rem {padding-top: .5rem !important;}
.pad_t_1rem {padding-top: var(--space-1rem) !important;}
.pad_t_2rem {padding-top: var(--space-2rem) !important;}
.pad_t_3rem {padding-top: var(--space-3rem) !important;}
.pad_t_4rem {padding-top: var(--space-4rem) !important;}
.pad_r_025rem {padding-right: .25rem !important;}
.pad_r_05rem {padding-right: .5rem !important;}
.pad_r_1rem {padding-right: var(--space-1rem) !important;}
.pad_r_2rem {padding-right: var(--space-2rem) !important;}
.pad_r_3rem {padding-right: var(--space-3rem) !important;}
.pad_r_4rem {padding-right: var(--space-4rem) !important;}
.pad_b_025rem {padding-bottom: .25rem !important;}
.pad_b_05rem {padding-bottom: .5rem !important;}
.pad_b_1rem {padding-bottom: var(--space-1rem) !important;}
.pad_b_2rem {padding-bottom: var(--space-2rem) !important;}
.pad_b_3rem {padding-bottom: var(--space-3rem) !important;}
.pad_b_4rem {padding-bottom: var(--space-4rem) !important;}
.pad_l_025rem {padding-left: .25rem !important;}
.pad_l_05rem {padding-left: .5rem !important;}
.pad_l_1rem {padding-left: var(--space-1rem) !important;}
.pad_l_2rem {padding-left: var(--space-2rem) !important;}
.pad_l_3rem {padding-left: var(--space-3rem) !important;}
.pad_l_4rem {padding-left: var(--space-4rem) !important;}

/* ===================================
  幅・高さ
=================================== */
/* width */
.w100 {width:100%;}
.w90 {width:90%;}
.w80 {width:80%;}
.w70 {width:70%;}
.w60 {width:60%;}
.w50 {width:50%;}
.w40 {width:40%;}
.w30 {width:30%;}
.w20 {width:20%;}
.w10 {width:10%;}
.w0 {width:0%;}
/* height */
.h100 {height:100%;}
.h90 {height:90%;}
.h80 {height:80%;}
.h70 {height:70%;}
.h60 {height:60%;}
.h50 {height:50%;}
.h40 {height:40%;}
.h30 {height:30%;}
.h20 {height:20%;}
.h10 {height:10%;}
.h0 {height:0%;}

/* ===================================
  Display Box
=================================== */
.flex_box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: baseline;
}
/* 主軸向き */
.fd_cm {
  flex-direction: column !important;
}
.fd_cr {
  flex-direction: column-reverse !important;
}
.fd_rw {
  flex-direction: row !important;
}
.fd_rr {
  flex-direction: row-reverse !important;
}
/* 交差軸揃え（縦揃え） */
.ai_c {
  align-items: center;
}
.ai_sh {
  align-items: stretch;
}
.ai_st {
  align-items: start;
}
.ai_end{
  align-items: end;
}
/* 主軸揃え（中央揃え） */
.jc_c {
  justify-content: center;
}
.jc_sb {
  justify-content: space-between;
}
.jc_sa {
  justify-content: space-around;
}
.jc_se {
  justify-content: space-evenly;
}
.jc_st {
  justify-content: start;
}
.jc_end {
  justify-content: end;
}
.jc_fs {
  justify-content: flex-start;
}
.jc_fe {
  justify-content: flex-end;
}
.jc_left {
  justify-content: left;
}
.jc_right {
  justify-content: right;
}
.dp-b {
  display: block !important;
}
.dp-ib {
  display: inline-block !important;
}
.dp-tb {
  display: table !important;
}

/* ===================================
  list/table
=================================== */
/* list */
.list-item, .side-list {
  list-style: none;
  padding-left: 0;
  padding-right: 0;
}
.list-item li {
  color: var(--color-f8);
  background: var(--color-text);
  margin-bottom: 1rem;
  position: relative;
}
.list-item li a {
  color: var(--color-f8);
  display: block;
  padding: 1rem;
}
.list-item li a:hover {
  color: var(--color-text);
  background: var(--color-f8);
}
.list-item li a::after {
  content: ">";
  color: var(--color-f8);
  position: absolute;
  right: 1rem;
  transition: all 0.5s ease-out;
}
.list-item li a:hover::after {
  color: var(--color-text);
  right: 1.5rem;
}
.side-list li {
  color: var(--color-f8);
  margin-bottom: .5rem;
}
.side-list li a {
  color: var(--color-f8);
  display: block;
  padding: 1rem;
  transition: all 0.5s ease-out;
}
.side-list li a:hover {
  background: var(--color-text);
}
.side-list li a::after {}
.side-list li a:hover::after {}
.info-list li:before {
  content: "\002022";
  padding-right: 0.5rem;
}

/* ===================================
  header to container
=================================== */
header {
  /* height: 100px;
  width: 100%;
  position: fixed;
  z-index: 1; */
}

/* ===================================
  message
=================================== */
.mes {
  position: relative;
  top: 100px;
  left: 0;
  background: var(--color-adw);
  color: var(--color-f8);
  width: auto;
}
.mes p {
  padding: var(--space-2rem) var(--space-4rem);
  position: relative;
  margin-left: 260px;
}

/* ===================================
  main
=================================== */
main {
  /* height: 100%;
  padding: var(--space-4rem);
  position: relative;
  width: calc(100% - 260px);
  margin-left: 260px;
  margin-top: 100px; */
}
main input, main textarea, main select {
  outline: 1px solid var(--color-ddd);
}
main input:focus, main textarea:focus, main select:focus {
  outline: 1px solid var(--color-text);
}
main div {
  margin-bottom: 2rem;
}
main h1 {
  font-size: 3.4rem;
}
main h2 {
  font-size: 2.8rem;
}
main h3 {
  font-size: 2.4rem;
}
main h4 {
  font-size: 2rem;
}
main h5 {
  font-size: 1.8rem;
}
main button {
  padding: .5rem 2rem;
}
main div:last-child {
  margin-bottom: 0;
}
main details div {
  margin-bottom: 0;
}
main table details summary {
  font-size: 1.4rem;
  font-weight: 400;
}
main table details[open] summary {
  padding-bottom: 0;
}
/* レイアウトボックス */
.component-box {
  display: flex;
  padding: var(--space-4rem);
}
.component-box-in {
  width: 100%;
}
.component-box-in * > input, .component-box-in * > button, .component-box-in * > textarea, .component-box-in * > select {
  margin-right: 1rem;
}
.component-box-in input, .component-box-in button, .component-box-in textarea, .component-box-in select {
  margin-left: 1px;
}
#optionBox-1 input, #optionBox-2 input, #optionBox-3 input {
  margin: .5rem 0 0 0;
}
/* ボタン調整:レイアウト1 黒背景・白文字*/
.title-btn, .title-btn:hover, .title-btn:active, .title-btn:visited {
  background: var(--color-text);
  color: var(--color-f8);
  outline: 1px solid var(--color-text);
  padding: 1rem 2rem;
}
.title-btn:hover, .title-btn:active {
  background: var(--color-f8);
  color: var(--color-text);
  outline: 1px solid var(--color-text);
}
/* ボタン調整:レイアウト2 灰色背景・白文字*/
.sub-btn, .sub-btn:hover, .sub-btn:active, .sub-btn:visited {
  background: var(--color-text);
  color: var(--color-f8);
  outline: 1px solid var(--color-text);
  opacity: 1;
  padding: .5rem 2rem;
  display: block;
}
.sub-btn:hover, .sub-btn:active {
  background: var(--color-text);
  color: var(--color-f8);
  outline: 1px solid var(--color-text);
}
/* オーバーフロー設定 */
main .overflow {
  padding-bottom: 2rem;
  overflow-x: scroll;
}
main .overflow table {
  width: 100%;
  white-space: nowrap;
}
main .overflow::-webkit-scrollbar {
  -webkit-appearance:initial;
  appearance: initial;
  width: 7px;
  height: 7px;
}
main .overflow::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: rgba(225,225,225,.5);
  box-shadow: 0 0 1px rgba(255,255,255,.2);
}
main .overflow::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(155,155,155,.5);
  box-shadow: 0 0 1px rgba(0,0,0,.2);
}
main .overflow::-webkit-scrollbar-corner {
  display: none;
}
/* 横スクロールが存在したら表示 */
.sp-scroll {
  /* display: none; */
}
.sp-scroll:after {
  content: "→";
  padding-left: 0.25rem;
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  -moz-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* ===================================
  aside
=================================== */
aside {
  background: var(--color-text);
  height: 100%;
  padding: var(--space-4rem);
  width: 260px;
  position: fixed;
  top: 100px;
  z-index: 1;
}

/* ===================================
  footer
=================================== */
footer {

}

/* ===================================
  レスポンシブ関数設定
  （PC基準にする場合：SP基準 をコメントアウト・SP基準にする場合：PC基準 をコメントアウト）
=================================== */

@media screen and (max-width:1023px){
  /* header */
  .sp-menu {
    height: var(--space-2rem);
    padding: var(--space-2rem);
    position: relative;
    right: var(--space-4rem);
    transition: 0.7s;
    width: var(--space-4rem);
  }
  .sp-menu span {
    background: var(--color-f8);
    height: 2px;
    left: 0;
    position: absolute;
  }
  .sp-menu span:first-child {
    top: var(--space-1rem);
    width: 100%;
  }
  .sp-menu span:last-child {
    bottom: var(--space-1rem);
    width: 50%;
  }
  .sp-menu:hover {
    background: none;
    opacity: .7;
  }
  #sp-menu.open {
    top: 0;
    transition: 0.7s;
  }
  #sp-menu.open span:first-child {
    top: var(--space-2rem);
    transform: rotate(45deg);
  }
  #sp-menu.open span:last-child {
    top: var(--space-2rem);
    transform: rotate(-45deg);
    width: 100%;
  }
  /* aside */
  aside {
    top: 100px;
  }
  aside, .sp-logout {
    bottom: 100px;
  }
  /* aside */
  #aside-box {
    opacity: 0;
    right: 0;
    transform: translatex(260px);
    transition: opacity 1s, transform 1s;
  }
  #aside-box.active {
    opacity: 1;
    transform: translateX(0px);
  }
  .sp-logout {
    bottom: 100px;
    left: 0;
    margin-bottom: var(--space-4rem);
    padding: var(--space-1rem);
    position: absolute;
    right: 0;
  }
  .sp-logout a, .sp-logout a:hover, .sp-logout a:active, .sp-logout a:visited {
    padding-top: var(--space-1rem);
    padding-bottom: var(--space-1rem);
  }
  /* main */
  main {
    margin-left: 0;
    width: 100%;
  }
}

@media screen and (max-width:550px){
  :root {
    /* margin.padding */
    --space-1rem: .5rem;
    --space-2rem: 1rem;
    --space-3rem: 1.5rem;
    --space-4rem: 2rem;
    --space-5rem: 2.5rem;
  }
  /* 文字サイズ */
  .fs-10 {
    font-size: .8rem;
  }
  .fs-12 {
    font-size: 1rem;
  }
  .fs-14 {
    font-size: 1.2rem;
  }
  .fs-16 {
    font-size: 1.4rem; /* ベースサイズ */
  }
  .fs-18 {
    font-size: 1.6rem;
  }
  .fs-20 {
    font-size: 1.8rem;
  }
  .fs-22 {
    font-size: 2rem;
  }
  .fs-24 {
    font-size: 2.2rem;
  }
  .fs-26 {
    font-size: 2.4rem;
  }
  .fs-28 {
    font-size: 2.6rem;
  }
  .fs-30 {
    font-size: 2.8rem;
  }
  .fs-32 {
    font-size: 3rem;
  }
  .fs-34 {
    font-size: 3.2rem;
  }
  .fs-36 {
    font-size: 3.4rem;
  }
  .fs-38 {
    font-size: 3.6rem;
  }
  .fs-40 {
    font-size: 3.8rem;
  }
  /* 余白：margin */
  .mar_1_Xrem {margin: .5rem var(--space-rem) !important;}
  .mar_2_Xrem {margin: 1rem var(--space-rem) !important;}
  .mar_3_Xrem {margin: 1.5rem var(--space-rem) !important;}
  .mar_4_Xrem {margin: 2rem var(--space-rem) !important;}
  .mar_X_1rem {margin: var(--space-rem) .5rem !important;}
  .mar_X_2rem {margin: var(--space-rem) 1rem !important;}
  .mar_X_3rem {margin: var(--space-rem) 1.5rem !important;}
  .mar_X_4rem {margin: var(--space-rem) 2rem !important;}
  .mar_t_1rem {margin-top: var(--space-1rem) !important;}
  .mar_t_2rem {margin-top: var(--space-2rem) !important;}
  .mar_t_3rem {margin-top: var(--space-3rem) !important;}
  .mar_t_4rem {margin-top: var(--space-4rem) !important;}
  .mar_r_1rem {margin-right: var(--space-1rem) !important;}
  .mar_r_2rem {margin-right: var(--space-2rem) !important;}
  .mar_r_3rem {margin-right: var(--space-3rem) !important;}
  .mar_r_4rem {margin-right: var(--space-4rem) !important;}
  .mar_b_1rem {margin-bottom: var(--space-1rem) !important;}
  .mar_b_2rem {margin-bottom: var(--space-2rem) !important;}
  .mar_b_3rem {margin-bottom: var(--space-3rem) !important;}
  .mar_b_4rem {margin-bottom: var(--space-4rem) !important;}
  .mar_l_1rem {margin-left: var(--space-1rem) !important;}
  .mar_l_2rem {margin-left: var(--space-2rem) !important;}
  .mar_l_3rem {margin-left: var(--space-3rem) !important;}
  .mar_l_4rem {margin-left: var(--space-4rem) !important;}
  /* 余白：padding */
  .pad_1_Xrem {padding: .5rem var(--space-rem) !important;}
  .pad_2_Xrem {padding: 1rem var(--space-rem) !important;}
  .pad_3_Xrem {padding: 1.5rem var(--space-rem) !important;}
  .pad_4_Xrem {padding: 2rem var(--space-rem) !important;}
  .pad_X_1rem {padding: var(--space-rem) .5rem !important;}
  .pad_X_2rem {padding: var(--space-rem) 1rem !important;}
  .pad_X_3rem {padding: var(--space-rem) 1.5rem !important;}
  .pad_X_4rem {padding: var(--space-rem) 2rem !important;}
  .pad_t_1rem {padding-top: var(--space-1rem) !important;}
  .pad_t_2rem {padding-top: var(--space-2rem) !important;}
  .pad_t_3rem {padding-top: var(--space-3rem) !important;}
  .pad_t_4rem {padding-top: var(--space-4rem) !important;}
  .pad_r_1rem {padding-right: var(--space-1rem) !important;}
  .pad_r_2rem {padding-right: var(--space-2rem) !important;}
  .pad_r_3rem {padding-right: var(--space-3rem) !important;}
  .pad_r_4rem {padding-right: var(--space-4rem) !important;}
  .pad_b_1rem {padding-bottom: var(--space-1rem) !important;}
  .pad_b_2rem {padding-bottom: var(--space-2rem) !important;}
  .pad_b_3rem {padding-bottom: var(--space-3rem) !important;}
  .pad_b_4rem {padding-bottom: var(--space-4rem) !important;}
  .pad_l_1rem {padding-left: var(--space-1rem) !important;}
  .pad_l_2rem {padding-left: var(--space-2rem) !important;}
  .pad_l_3rem {padding-left: var(--space-3rem) !important;}
  .pad_l_4rem {padding-left: var(--space-4rem) !important;}
  /* width */
  .w100, .w90, .w80, .w70, .w60, .w50, .w40, .w30, .w20, .w10 {width:100%;}
  /* height
  .h100, .h90, .h80, .h70, .h60, .h50, .h40, .h30, .h20, .h10 {height:100%;} */
  /* =========================ベースタグ */
  body {
    font-size: 1.4rem;
  }
  table details a, table details a:hover,
  table details a:active, table details a:visited,
  .primary-btn, .primary-btn:hover,
  .primary-btn:active, .primary-btn:visited {
    /* padding: 0.25rem; */
  }
  table details a, table details a:hover,
  table details a:active, table details a:visited {
    margin-top: .5rem;
    font-size: 1rem;
  }
  details[open] summary {
    padding-bottom: .5rem;
  }
  pre {
    margin-bottom: 3.5rem;
    padding: 1.5rem;
  }
  /* input */
  input, button, textarea, select {
    padding: .5rem 1rem;
  }
  .last-text input {
    width: 80%; /* フォームの最後に文字が当たる場合：手前の要素に class名 last-text を指定 */
  }
  /* input checkbox スタイル */
  input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
    padding: 1.5rem;
  }
  input[type="checkbox"]:checked:before {
    height: 8px;
    top: 15px;
    left: 8px;
  }
  input[type="checkbox"]:checked:after {
    height: 18px;
    top: 8px;
    right: 10px;
  }
  /* ドロップダウン */
  main details summary {
    font-size: 1.8rem;
    padding-left: 2rem;
  }
  main details[open] .open-box {   /* クリックしたら表示される要素 */
    padding: 1rem 0 0 0;
  }
  main details[open] .flex_box.open-box  {
    flex-direction: row;
  }
  /* list */
  .list-item li {
    margin-bottom: .5rem;
  }
  .list-item li a {
    padding: .5rem;
  }
  .list-item li a::after {
    right: .5rem;
  }
  .list-item li a:hover::after {
    right: 1rem;
  }
  .side-list li {
    margin-bottom: .25rem;
  }
  .side-list li a {
    padding: .5rem;
  }
  /* header */
  /* aside */
  aside {
    top: 50px;
  }
  aside, .sp-logout {
    bottom: 50px;
  }
  /* main */
  main {
    margin-top: 50px;
  }
  main div {
    margin-bottom: 1.8rem;
  }
  main h1 {
    font-size: 3rem;
  }
  main h2 {
    font-size: 2.6rem;
  }
  main h3 {
    font-size: 2.2rem;
  }
  main h4 {
    font-size: 1.8rem;
  }
  main h5 {
    font-size: 1.6rem;
  }
  main button {
    padding: .25rem 1rem;
  }
  main table details summary {
    font-size: 1.4rem;
    word-break: keep-all;
  }
  /* レイアウトボックス */
  .sp_flex_box_row {
    flex-direction: row !important;
  }
  label.flex_box {
    flex-direction: row;
    width: auto;
  }
  /* flexbox */
  .sp-fd_rw {
    flex-direction: row !important;
  }
  .sp-fd_cm {
    flex-direction: column !important;
  }
  .flex_box {
    flex-direction: column;
    width: 100%;
  }
  .component-box {
    display: flex;
    padding: var(--space-4rem);
  }
  .component-box-in * > input, .component-box-in * > button, .component-box-in * > textarea, .component-box-in * > select {
    margin-right: .5rem;
    margin-bottom: 1rem;
    max-width: 100%;
  }
  .component-box-in * > input:last-child, .component-box-in:last-child * > button, .component-box-in:last-child * > textarea:last-child, .component-box-in * > select:last-child {
    margin-bottom: 0;
  }
  .component-box-in * > input, .component-box-in * > textarea, .component-box-in * > select {
    width: calc(100% - 2px);
    margin-right: 0;
    margin-left: 0;
  }
  .component-box-in .flex_box:last-child {
    padding-top: 1rem;
  }
  .sp_mar_t_1rem {
    margin-top: 1rem;
  }
  .sp_pad_t_1rem {
    padding-top: 1rem;
  }
  .sp_mar_b_1rem {
    margin-bottom: 1rem;
  }
  .sp_pad_b_1rem {
    padding-bottom: 1rem;
  }
  /* ボタン調整:レイアウト1 黒背景・白文字*/
  .title-btn, .title-btn:hover, .title-btn:active, .title-btn:visited {
    padding: .5rem 1.5rem;
  }
  /* ボタン調整:レイアウト2 灰色背景・白文字*/
  .sub-btn, .sub-btn:hover, .sub-btn:active, .sub-btn:visited {
    padding: .25rem 1.5rem;
  }
}

/* ブラウザ画面が縦長の場合 */
@media screen and (orientation: portrait) {
  /* オーバーフローテーブル */
  /* 横スクロールが存在したら表示 */
  .sp-scroll {
    display: block;
  }
}
/* ブラウザ画面が横長の場合 */
@media screen and (orientation: landscape) {
  /* 横スクロールが存在したら非表示 */
  .sp-scroll {
    display: none;
  }
}