html {
  scroll-behavior: smooth;
}
body {
  width: 100%;
  margin: 0;
  background: #fff;
  color: #707070;
  font-family: -apple-system, BlinkMacSystemFont, '游ゴシック体', YuGothic, '游ゴシック Medium', 'ヒラギノ角ゴ ProN W3',
    'Hiragino Kaku Gothic ProN W3', HiraKakuProN-W3, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro',
    'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Helvetica Neue', HelveticaNeue, Helvetica,
    Arial, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 1.2vw;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  body {
    font-size: 3.2vw;
  }
}
/*!
 * "genshingothic" is lisenced under the SIL Open Font License 1.1
 * by http://jikasei.me/font/genshin/
 */
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Light.ttf') format('truetype');
  font-weight: 1 100;
}
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Monospace-ExtraLight.ttf') format('truetype');
  font-weight: 101 200;
}
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Monospace-Normal.ttf') format('truetype');
  font-weight: 201 300;
}
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Monospace-Regular.ttf') format('truetype');
  font-weight: 301 400;
}
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Monospace-Medium.ttf') format('truetype');
  font-weight: 401 500;
}
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Monospace-Bold.ttf') format('truetype');
  font-weight: 501 700;
}
@font-face {
  font-family: 'genshingothic';
  src: url('../font/genshingothic/GenShinGothic-Monospace-Heavy.ttf') format('truetype');
  font-weight: 701 800;
}
/*
 * font対応
 * by https://kuroeveryday.blogspot.com/2017/04/css-styling-html-forms.html
 */
button,
input,
select,
textarea {
  font-family: inherit;
}

body > .wrap {
  position: absolute;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
body > .wrap::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url('../img/background.jpg');
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 1024px) {
  body > .wrap::before {
    height: 250vw;
  }
}
main {
  margin: 7vw 0;
}
@media screen and (max-width: 1024px) {
  main {
    margin: 30vw 0 40vw 0;
  }
}
footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}
h1 {
  font-size: 1.8vw;
}
@media screen and (max-width: 1024px) {
  h1 {
    font-size: 6vw;
  }
}
p {
  line-height: 2em;
}
hr {
  height: 0.1vw;
  border-top: 0.1vw solid #58b6b9;
  margin: 2vw auto;
}
@media screen and (max-width: 1024px) {
  hr {
    border-top: 0.5vw solid #58b6b9;
    margin: 6vw auto;
  }
}
/* PCのみで表示したい場合class="PC"を指定
SPのみで表示したい場合class="SP"を指定 */
/* 操作はcommon.jsで実施 */
.PC {
}
.SP {
}

/* 共通コンポーネント */
/* 背景囲む外側 */
.common-outer-panel {
  background: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
  width: 54vw;
  /* padding: 2vw; */
  margin-bottom: 3vw;
  border: 0.1vw solid #b6b6b6;
  border-radius: 0.5vw;
}
@media screen and (max-width: 1024px) {
  .common-outer-panel {
    width: 98vw;
    padding: 4vw 0vw 3vw 0vw;
    padding-top: 0;
    margin-bottom: 10vw;
    border-width: 0.5vw;
    border-radius: 2vw;
  }
}
/* 画面タイトル */
.common-title {
  padding: 3vw 0 1vw 0;
  color: #707070;
  border-radius: 0.5vw 0.5vw 0 0;
}
@media screen and (max-width: 1024px) {
  .common-title {
    padding: 9vw 0 4vw 0vw;
  }
}

/* 画面タイトルアイコン */
.common-title-icon {
  height: 2vw;
  margin: 0vw 1vw;
  margin-bottom: 0.1vh;
}
@media screen and (max-width: 1024px) {
  .common-title-icon {
    margin: 0vw 2vw;
    margin-bottom: 0.5vw;
    height: 5vw;
  }
}

/* 画面説明 */
.common-description {
  color: #707070;
  font-size: 1.3vw;
  width: 85%;
  padding: 0 7.5%;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .common-description {
    font-size: 2.7vw;
    width: 88%;
    padding: 0 6%;
  }
}
/* エラーメッセージ */
.common-error-message {
  text-align: left;
  color: #f00;
  font-size: 1.3vw;
  font-weight: bold;
  background: #ffb5b5;
  border: 0.05vw solid #f00;
  border-radius: 0.3vw;
  padding: 1vw;
  margin: 1vw 2vw;
}
@media screen and (max-width: 1024px) {
  .common-error-message {
    font-size: 2vw;
    border-width: 0.2vw;
    padding: 2vw;
    margin: 2vw 2vw;
  }
}
/* 背景囲む内側 */
.common-inner-panel {
  background: #fff;
  margin: 2vw;
  border: 0.1vw solid #58b6b9;
  border-radius: 2vw;
  padding: 2vw;
}
@media screen and (max-width: 1024px) {
  .common-inner-panel {
    border-width: 0.5vw;
    margin: 2vw 1vw 1vw 1vw;
  }
}

/* 背景囲む内側 */
.common-inner-panel-blue {
  border: 0.1vw solid #a0c4fa;
}

/* インナータイトル */
.common-inner-title {
  font-size: 1.7vw;
  margin-bottom: 1vw;
}
@media screen and (max-width: 1024px) {
  .common-inner-title {
    font-size: 5vw;
    line-height: 2em;
    margin-bottom: 2.6vw;
  }
}
.common-inner-title + .common-supplement {
  text-align: center;
}
/* ラベル */
.common-label {
  text-align: left;
  color: #333;
  font-size: 1.5vw;
}
@media screen and (max-width: 1024px) {
  .common-label {
    font-size: 2.7vw;
  }
}
/* 必須マーク */
.common-required-mark {
  color: #fff;
  font-size: 1vw;
  padding: 0.2vw;
  border: 0.01vw solid #ff5e5e;
  border-radius: 0.2vw;
  margin-left: 1vw;
  background: #ff5e5e;
}
@media screen and (max-width: 1024px) {
  .common-required-mark {
    font-size: 2vw;
    padding: 0.6vw;
    margin-left: 1vw;
    border-radius: 1vw;
  }
}
/* 補足事項  */
.common-supplement {
  text-align: left;
  color: #666;
  font-size: 1.3vw;
}
@media screen and (max-width: 1024px) {
  .common-supplement {
    font-size: 2.7vw;
  }
}
/* バリデーションチェック */
.common-valid {
  text-align: left;
  color: #f00;
  font-size: 1vw;
}
@media screen and (max-width: 1024px) {
  .common-valid {
    font-size: 2vw;
  }
}
/* テキストボックス */
/* 確認画面用テキスト入力表示 */
.common-textbox,
.common-confirmation-text {
  display: block;
  text-align: left;
  padding: 0.5vw;
  border: none;
  background: #fff;
  width: calc(100% - 1.2vw);
  margin: 0.5vw 0;
  font-size: 1.3vw;
  min-height: 2vw;
  word-break: break-all;
  line-height: 1.5em;
  border: 0.1vw solid #b6b6b6;
  border-radius: 0.5vw;
}
@media screen and (max-width: 1024px) {
  .common-textbox,
  .common-confirmation-text {
    width: calc(100% - 4.4vw);
    padding: 2vw;
    margin: 0 0 2vw 0;
    border-width: 0.2vw;
    font-size: 3.2vw;
    min-height: 4.8vw;
    border-radius: 2vw;
  }
}
.common-confirmation-text {
  background: #eee;
}
.common-textbox.short,
.common-confirmation-text.short {
  width: calc(45% - 1vw);
}
@media screen and (max-width: 1024px) {
  .common-textbox.short,
  .common-confirmation-text.short {
    width: calc(45% - 4vw);
  }
}
.common-textbox::placeholder {
  color: #cfcfcf;
}

.common-textbox:disabled,
.common-textbox:read-only {
  background: #eee;
}

.common-textbox:disabled::placeholder,
.common-textbox:read-only::placeholder {
  color: transparent;
}

.common-textarea,
.common-confirmation-textarea {
    display: block;
    text-align: left;
    padding: 0.5vw;
    border: none;
    background: #fff;
    width: calc(100% - 1vw);
    margin: 0.5vw 0;
    font-size: 1.3vw;
    height: 5em;
    line-height: 1.5em;
    border: 0.1vw solid #b6b6b6;
    border-radius: 0.5vw;
    overflow: auto;
    max-height: 200px;
    word-wrap: break-word;
}@media screen and (max-width: 1024px) {
  .common-textarea,
  .common-confirmation-textarea {
    width: calc(100% - 4vw);
    padding: 2vw;
    margin: 0 0 2vw 0;
    border-width: 0.2vw;
    font-size: 3.2vw;
    height: 10em;
    border-radius: 2vw;
  }
}
.common-textarea::placeholder {
  color: #cfcfcf;
}
.common-confirmation-textarea {
  background: #eee;
}

/* 右揃えテキスト */
.common-textalign-right {
  text-align: right;
}
/* 要素横並び用ボックス */
.common-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.common-flex > * {
  width: 45%;
}
.common-flex.reverse {
  flex-direction: row-reverse;
}
/* セレクトボックス */
.common-select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  margin: 0.5vw 0;
}
@media screen and (max-width: 1024px) {
  .common-select {
    margin: auto;
  }
}
.common-select::before {
  position: absolute;
  top: 50%;
  right: 1vw;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 0.3vw solid rgba(0, 0, 0, 0);
  border-right: 0.3vw solid rgba(0, 0, 0, 0);
  border-top: 0.3vw solid #999;
  transition: 0.2s;
  transform: translateY(-50%);
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .common-select::before {
    top: 4vw;
    right: 2.7vw;
    border-width: 1.2vw;
  }
}
.common-select:hover::before,
.common-select:active::before {
  transform: rotate(90deg);
  border-top: 0.3vw solid #333;
}
@media screen and (max-width: 1024px) {
  .common-select:hover::before,
  .common-select:active::before {
    border-width: 1.2vw;
  }
}
.common-select > select {
  position: relative;
  width: 100%;
  padding: 0.1vw 0.5vw;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 3;
  line-height: 2em;
  font-size: 1.3vw;
  color: #000;
  cursor: pointer;
  border: 0.1vw solid #b6b6b6;
  border-radius: 0.5vw;
}
@media screen and (max-width: 1024px) {
  .common-select > select {
    padding: 1vw 3vw;
    font-size: 3.2vw;
    border-radius: 2vw;
    /* Safariブラウザ セレクトボックス */
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media,
  _:future,
  :root .common-select > select {
    margin: 0.2vw 0;
  }
}
.common-select > select::-ms-expand {
  display: none;
}
.common-select > select > option {
  font-size: 1.3vw;
  color: #000;
}
@media screen and (max-width: 1024px) {
  .common-select > select > option {
    font-size: 2.6vw;
  }
}
.select-under-margin {
  margin: 0.5vw 0;
}
@media screen and (max-width: 1024px) {
  .select-under-margin {
    margin: 0 0 2vw 0;
  }
}
/* チェックボックス ラジオボタン 共通 */
.common-checkbox,
.common-radio {
  margin: 0.5vw;
  display: flex;
  flex-wrap: wrap;
  transition: 0.2s;
}
@media screen and (max-width: 1024px) {
  .common-checkbox,
  .common-radio {
    margin: 2vw;
    display: block;
    text-align: left;
  }
  .common-checkbox,
  .common-radio.flex {
    margin: 2vw;
    display: flex;
    align-items: center;
  }
}
.common-checkbox > label,
.common-radio > label {
  display: flex;
  margin: 0.5vw;
  cursor: pointer;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .common-checkbox > label,
  .common-radio > label {
    margin: 4vw;
  }
  .common-radio.flex > label {
    margin: 4vw 2vw;
  }
}
.common-checkbox > label > span,
.common-radio > label > span {
  position: relative;
  padding-left: 0.2vw;
  line-height: 2em;
  font-size: 1.3vw;
}
@media screen and (max-width: 1024px) {
  .common-checkbox > label > span,
  .common-radio > label > span {
    padding-left: 1vw;
    font-size: 2.6vw;
  }
}
.common-checkbox > label > input,
.common-radio > label > input {
  width: 1.2vw;
  height: 1.2vw;
}
@media screen and (max-width: 1024px) {
  .common-checkbox > label > input,
  .common-radio > label > input {
    width: 4vw;
    height: 4vw;
  }
}
.common-checkbox > label > input:checked + span,
.common-radio > label > input:checked + span {
  color: #58b6b9;
  font-weight: bold;
}

/* サイドボタン */
.common-side-button {
  display: flex;
}
.common-side-button > a,
.common-side-button > button {
  margin-left: 1vw;
  padding: 0.2vw 1vw;
  width: auto;
  font-size: 1vw;
  line-height: normal;
}
@media screen and (max-width: 1024px) {
  .common-side-button > a,
  .common-side-button > button {
    margin: 0 0 0 1vw;
    padding: 0.2vw 2vw;
    font-size: 3.2vw;
  }
}

/* ラジオボタン拡張 スライドボタン*/
.common-slide-button {
  display: flex;
}

.common-slide-button input {
  display: none;
}
.common-slide-button > label {
  position: relative;
  width: 7vw;
  height: 2vw;
  background: #fff;
  margin: 0.5vw 0;
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .common-slide-button > label {
    width: 30vw;
    height: 8vw;
    background: #fff;
    margin: 2vw 0;
    padding: 0;
  }
}
.common-slide-button > label:first-child {
  border-radius: 0.5vw 0 0 0.5vw;
  border-left: 0.1vw solid #b6b6b6;
  border-top: 0.1vw solid #b6b6b6;
  border-bottom: 0.1vw solid #b6b6b6;
}
@media screen and (max-width: 1024px) {
  .common-slide-button > label:first-child {
    border-radius: 2vw 0 0 2vw;
    border-width: 0.2vw;
  }
}
.common-slide-button > label:last-child {
  border-radius: 0 0.5vw 0.5vw 0;
  border-right: 0.1vw solid #b6b6b6;
  border-top: 0.1vw solid #b6b6b6;
  border-bottom: 0.1vw solid #b6b6b6;
}
@media screen and (max-width: 1024px) {
  .common-slide-button > label:last-child {
    border-radius: 0 2vw 2vw 0;
    border-width: 0.2vw;
  }
}
.common-slide-button > label > span {
  position: absolute;
  top: -0.1vw;
  left: -0.1vw;
  display: block;
  width: 100%;
  line-height: 2vw;
  border: 0.1vw solid rgba(255, 255, 255, 0);
  border-radius: 0.5vw;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  .common-slide-button > label > span {
    line-height: 8vw;
    border-radius: 2vw;
  }
}
.common-slide-button > label > input {
  position: absolute;
  top: 0;
  left: 0;
}
.common-slide-button > label > input:checked + span {
  background: #58b6b9;
  color: #fff;
  z-index: 100;
  border: 0.1vw solid #58b6b9;
}
.common-slide-button > label:first-child > input:checked + span {
  animation: 0.1s linear 0s normal 1 running slideleft;
}
.common-slide-button > label:last-child > input:checked + span {
  animation: 0.1s linear 0s normal 1 running slideright;
}
@keyframes slideleft {
  0% {
    transform: translateX(5vw);
  }
  50% {
    transform: translateX(2vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideright {
  0% {
    transform: translateX(-5vw);
  }
  50% {
    transform: translateX(-2vw);
  }
  100% {
    transform: translateX(0);
  }
}
@media screen and (max-width: 1024px) {
  @keyframes slideleft {
    0% {
      transform: translateX(10vw);
    }
    50% {
      transform: translateX(5vw);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slideright {
    0% {
      transform: translateX(-10vw);
    }
    50% {
      transform: translateX(-5vw);
    }
    100% {
      transform: translateX(0);
    }
  }
}

/* 表形式 */
.common-grid-total {
  text-align: right;
  font-size: 1vw;
  margin-top: 2vw;
}
@media screen and (max-width: 1024px) {
  .common-grid-total {
    font-size: 3.2vw;
    margin-top: 4vw;
  }
}
.common-grid {
  width: 100%;
  border: 0.2vw solid #ddd;
  margin: 0.5vw auto;
}
@media screen and (max-width: 1024px) {
  .common-grid {
    display: flex;
    border-width: 0.2vw;
    margin: 1vw auto 4vw auto;
  }
}
.common-grid th,
.common-grid td {
  padding: 1vw 0.5vw;
  text-align: center;
  font-size: 1.2vw;
  display: table-cell;
  vertical-align: middle;
  line-height: 2em;
  min-height: 2em;
  border: 0.2vw solid #ddd;
  background: #fff;
  word-break: break-all;
  min-width: 3vw;
  max-width: 15vw;
}
@media screen and (max-width: 1024px) {
  .common-grid th,
  .common-grid td {
    padding: 2vw;
    font-size: 3.2vw;
    display: block;
    border-width: 0.2vw;
    max-width: 50vw;
    overflow-x: scroll;
  }
}
.common-grid th {
  background: #eee;
}
@media screen and (max-width: 1024px) {
  .common-grid thead {
    display: block;
    flex-shrink: 0;
  }
  .common-grid tbody {
    display: flex;
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
  }
}
.common-grid a,
.common-grid input[type='submit'],
.common-grid span.common-confirm-button {
  padding: 0.3vw 0.5vw;
  border-radius: 0.2vw;
  border: none;
  color: #fff;
  font-size: 1.3vw;
  text-align: center;
  transition: 0.2s;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  .common-grid a,
  .common-grid input[type='submit'],
  .common-grid span.common-confirm-button {
    padding: 1vw 5vw;
    border-radius: 0.4vw;
    font-size: 2.6vw;
    width: 100%;
  }
}
.common-grid a,
.common-grid span.common-confirm-button {
  background: #b6b6b6;
}
.common-grid a:hover,
.common-grid a:active {
  background: #707070;
}
.common-grid .button-blue {
  background: #58b6b9;
}
.common-grid .button-blue:hover,
.common-grid .button-blue:active {
  background: #195b58;
}
.common-grid .button-red {
  background: #e373a2;
}
.common-grid .button-red:hover,
.common-grid .button-red:active {
  background: #8f355a;
}

.common-grid .button-white {
  color: #444 !important;
  background: #dadada;
}
.common-grid .button-white:hover,
.common-grid .button-white:active {
  color: #fff !important;
  background: #474747;
}

.common-grid .button-re-red {
  color: #e373a2 !important;
  background: #fff !important;
  border: 1px solid #e373a2 !important;
}
.common-grid .button-re-red:hover,
.common-grid .button-re-red:active {
  color: #fff !important;
  background: #e373a2 !important;
}

/* 表下の詳細ボタン */
.common-grid-total-plus {
  text-align: right;
  font-size: 1vw;
  margin-top: 2vw;
}
@media screen and (max-width: 1024px) {
  .common-grid-total-plus {
    font-size: 3.2vw;
    margin-top: 4vw;
  }
}

/* モバイル表示時の調整 */
@media screen and (max-width: 1024px) {
  .common-grid th,
  .common-grid td,
  .common-grid th p,
  .common-grid td p,
  .common-grid td a {
    font-size: 3.2vw;
  }
  .common-grid th:before,
  .common-grid td:before,
  .common-grid p:before {
    display: block;
    float: left;
    height: 2em;
    content: '\00A0';
  }
  .common-grid td p:empty {
    min-height: 2em;
  }
}

.common-detail-button {
  text-align: right;
  margin-top: 1.5vw;
}
@media screen and (max-width: 1024px) {
  .common-detail-button {
  }
}
.common-detail-button {
  text-align: right;
  margin-top: 1vw;
}
@media screen and (max-width: 1024px) {
  .common-detail-button {
  }
}
.common-detail-button > a {
  padding: 0.3vw 0.5vw;
  border-radius: 0.2vw;
  background: #a0a0a0;
  color: #fff;
  font-size: 1vw;
  margin-right: auto;
}
@media screen and (max-width: 1024px) {
  .common-detail-button > a {
    padding: 1vw 5vw;
    border-radius: 0.4vw;
    font-size: inherit;
  }
}
.common-detail-button > a:hover,
.common-detail-button > a:active {
  background: #4e7ecd;
}
/* ファイルアップロード項目 */
.common-upload {
  width: 35vw;
  margin: 2vw auto;
}
@media screen and (max-width: 1024px) {
  .common-upload {
    width: auto;
  }
}
.common-upload > p,
.common-upload > .common-label {
  text-align: center;
  margin: 2vw 0 0 0;
  font-size: 1.3vw;
}
@media screen and (max-width: 1024px) {
  .common-upload > p {
    font-size: 3vw;
  }
}
.common-upload > .common-supplement {
  margin: 0.5vw 0 0 0;
  font-size: 1vw;
}
.common-upload-area {
  background: #ffffff;
  margin: auto;
  margin-top: 1vw;
  padding: 1vw;
  position: relative;
  opacity: 0;
  transition: 0.2s;
  border: 0.1vw solid #b6b6b6;
  border-radius: 0.5vw;
}
@media screen and (max-width: 1024px) {
  .common-upload-area {
    padding: 5vw;
    border-width: 0.2vw;
    border-radius: 1vw;
  }
}
.common-upload-area:hover {
  cursor: pointer;
}
.common-upload-area > p {
  font-size: 1vw;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .common-upload-area > p {
    font-size: 2.6vw;
  }
}
.common-upload-area > p:before {
  content: '';
  width: 3vw;
  height: 3vw;
  display: block;
  margin: 0.5vw auto;
  background: url('../img/pdf_upload.svg');
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .common-upload-area > p:before {
    width: 8vw;
    height: 8vw;
  }
}
/* アイコン変更(imageアイコン) */
.common-upload-area .icon-image:before {
  background: url('../img/icon_image.svg');
}
/* アイコン変更(csvアイコン) */
.common-upload-area .icon-csv:before {
  background: url('../img/icon_csv.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}
/* アイコン変更(fileアイコン) */
.common-upload-area .icon-file:before {
  background: url('../img/icon_file.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
.common-upload-area-drop {
  background-color: rgb(240, 240, 240, 0.7);
  border: 0.1vw dashed red;
  border-radius: 0.3vw;
}
.common-upload-area ul {
  height: 100%;
  align-items: center;
}
.common-upload-area ul li {
  height: calc(100% - 0.2vw);
  text-align: left;
  padding: 0em 1vw;
  border-radius: 0.3vw;
  background-color: #fff;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  width: calc(-2vw + 100%);
  width: fill-available;
  width: -webkit-fill-available;
}
.common-upload-area ul li:first-child::before {
  content: '';
  width: 2vw;
  height: 2vw;
  float: left;
  background-image: url('../img/icon_pdf.svg');
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .common-upload-area ul li:first-child::before {
    width: 8vw;
    height: 8vw;
  }
}
/* アイコン変更(imageアイコン) */
.common-upload-area ul .icon-image-small:first-child::before {
  background-image: url('../img/icon_image.svg');
}
/* アイコン変更(csvアイコン) */
.common-upload-area ul .icon-csv-small:first-child::before {
  background-image: url('../img/icon_csv.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}
/* アイコン変更(fileアイコン) */
.common-upload-area ul .icon-file-small:first-child::before {
  background-image: url('../img/icon_file.svg');
}

.common-upload-area ul li > p {
  font-size: 1vw;
  margin: 1em auto auto auto;
  line-height: 3em;
}
@media screen and (max-width: 1024px) {
  .common-upload-area ul li > p {
    font-size: 2.6vw;
  }
}
.common-file-name {
  width: calc(100% - 3vw);
  margin: 0px 0.5vw;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.common-file-delete:before {
  content: '';
  width: 1.5vw;
  height: 1.5vw;
  padding: 0.1vw;
  float: right;
  background-image: url('../img/icon_delete.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  .common-file-delete:before {
    width: 8vw;
    height: 8vw;
  }
}
.common-file-delete:hover:before {
  background-image: url('../img/icon_delete_on.svg');
}
.common-upload-area + label,
.common-upload-area + label input[type='file'] {
  display: none;
}
.common-toast {
  position: fixed;
  width: 75vw;
  background: #e373a2;
  color: #fff;
  z-index: -1000;
  text-align: center;
  left: 25vw;
  opacity: 0;
  /* top: calc(50% - 50px/2);
  left: calc(50% - 75vw/2); */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  vertical-align: middle;
  line-height: 2em;
}
.common-toast-animation {
  animation: toaster 5s ease-in 0s 1 alternate;
  -moz-animation: toaster 5s ease-in 0s 1 alternate;
  -webkit-animation: toaster 5s ease-in 0s 1 alternate;
  -o-animation: toaster 5s ease-in 0s 1 alternate;
  -ms-animation: toaster 5s ease-in 0s 1 alternate;
}
@keyframes toaster {
  0% {
    opacity: 0;
    z-index: 1000;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 確認送信画面  */
.common-message-box {
  width: 30vw;
  padding: 2vw;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .common-message-box {
    width: auto;
  }
}
.common-message-box > h5 {
  padding: 1.5vw;
  background-color: #f8feff;
  font-size: 1.2vw;
}
@media screen and (max-width: 1024px) {
  .common-message-box > h5 {
    padding: 3.5vw;
    font-size: 3.2vw;
  }
}
.common-message-box > div {
  background-color: #f5f5f5;
  padding: 1.5vw;
}
@media screen and (max-width: 1024px) {
  .common-message-box > div {
    padding: 3.5vw;
  }
}
.common-message-box > div > p {
  font-size: 1vw;
  margin-bottom: 0.5vw;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .common-message-box > div > p {
    font-size: 2vw;
    margin-bottom: 2.5vw;
  }
}
/* ページングボタン  */
.common-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5vw 0;
}
@media screen and (max-width: 1024px) {
  .common-paging {
    margin: 4vw 0;
    flex-wrap: wrap;
  }
}
.common-paging-prev,
.common-paging-num,
.common-paging-next {
  display: block;
  padding: 1vw 0;
  margin: 0 0.2vw;
  background: #fff;
  font-size: 1vw;
  line-height: 1em;
  border: 0.1vw solid #b6b6b6;
  border-radius: 0.5vw !important;
  color: #707070;
  text-align: center;
  transition: 0.2s;
}
@media screen and (max-width: 1024px) {
  .common-paging-prev,
  .common-paging-num,
  .common-paging-next {
    padding: 3vw 0;
    margin: 0 1vw;
    border-radius: 1vw;
    font-size: 3.2vw;
  }
}
.common-paging-num {
  width: 3vw;
}
@media screen and (max-width: 1024px) {
  .common-paging-num {
    width: 10vw;
  }
}
.common-paging-prev,
.common-paging-next {
  width: 4vw;
}
@media screen and (max-width: 1024px) {
  .common-paging-prev,
  .common-paging-next {
    width: 12vw;
  }
}
.common-paging-prev:hover,
.common-paging-num:enabled:hover,
.common-paging-next:hover,
.common-paging-prev:active,
.common-paging-num:enabled:active,
.common-paging-next:active,
.common-paging-num.select {
  background: #58b6b9;
  border-color: #58b6b9;
  color: #fff;
  cursor: pointer;
}

/* 確認、キャンセルボタン  */
.common-buttonset {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2vw 0 0.5vw 0;
}
@media screen and (max-width: 1024px) {
  .common-buttonset {
    margin: 4vw 0;
  }
}
.common-buttonset-confirmation,
.common-buttonset-cancel {
  display: block;
  padding: 1vw;
  margin: 0 2vw 0 2vw;
  border-radius: 0.5vw;
  font-size: 1.3vw;
  text-align: center;
  min-width: 5vw;
  transition: 0.2s;
}
@media screen and (max-width: 1024px) {
  .common-buttonset-confirmation,
  .common-buttonset-cancel {
    padding: 4vw;
    margin: 0 1vw;
    border-width: 0.2vw;
    border-radius: 1vw;
    font-size: 3.2vw;
    width: 20vw;
  }
}
.common-buttonset-confirmation {
  background: #e373a2;
  color: #fff;
}
.common-buttonset-confirmation:hover,
.common-buttonset-confirmation:active {
  background: #8f355a;
}
.common-buttonset-cancel {
  color: #444;
  background: #dadada;
}
.common-buttonset-cancel:hover,
.common-buttonset-cancel:active {
  color: #fff;
  background: #474747;
}
/* リンク */
.common-link {
  display: block;
  font-size: 1.3vw;
  font-weight: bold;
  line-height: 2.5em;
  border-radius: 2em;
  margin: 0.5vw;
  padding: 0 2em;
  transition: 0.2s;
  color: #444;
  background: #dadada;
}
@media screen and (max-width: 1024px) {
  .common-link {
    font-size: 4.5vw;
    margin: 6vw 1vw;
  }
}
.common-link:hover,
.common-link:active {
  color: #fff;
  background: #474747;
}
.common-link-simple {
  display: block;
  font-size: 1vw;
  text-decoration: underline;
  color: #033070;
  margin: 0.5vw;
}
@media screen and (max-width: 1024px) {
  .common-link-simple {
    font-size: 3.2vw;
    margin: 6vw 1vw;
  }
}
.common-inner-link {
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  font-weight: bold;
}
/* 青ボタン  */
/* 赤ボタン  */
/* 白ボタン  */
.common-button-re-red,
.common-button-deepblue,
.common-button-blue,
.common-button-blue-reverse,
.common-button-red,
.common-button-white,
.common-button-gray {
  display: block;
  margin: 0.5vw auto;
  padding: 0.3vw 0;
  border-radius: 0.2vw;
  width: 100%;
  font-size: 1.3vw;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  line-height: 2em;
  border-radius: 0.5vw !important;
}
@media screen and (max-width: 1024px) {
  .common-button-re-red,
  .common-button-deepblue,
  .common-button-blue,
  .common-button-red,
  .common-button-white,
  .common-button-gray {
    margin: 3vw auto;
    padding: 4vw 0;
    border-radius: 6vw !important;
    font-size: 3.2vw;
    line-height: 1em;
  }
}
.common-button-blue {
  color: #fff;
  background: #58b6b9;
}

.common-button-blue-reverse {
  color: #58b6b9;
  background: #fff;
  border: 1px solid #58b6b9;
}

.common-button-deepblue {
  color: #fff;
  background: #a0c4fa;
}

.common-button-re-red {
  color: #e373a2;
  background: #fff;
  border: 1px solid #e373a2;
}

.common-button-blue:hover,
.common-button-blue:active {
  background: #378386;
}

.common-button-blue-reverse.active,
.common-button-blue-reverse:hover,
.common-button-blue-reverse:active {
  color: #fff;
  background: #378386;
}

.common-button-deepblue:hover,
.common-button-deepblue:active {
  background: #a0c4fa;
}

.common-button-re-red:hover,
.common-button-re-red:active {
  color: #fff;
  background: #e373a2;
}

.common-button-red {
  background-color: #e373a2;
  color: #fff;
  font-size: 1.3vw;
}
@media screen and (max-width: 1024px) {
  .common-button-red {
    font-size: 3.2vw;
  }
}
.common-button-red:hover,
.common-button-red:active {
  background: #8f355a;
}
/* 非活性 */
.common-button-red.disabled {
  background: #707070;
  color: #444;
  pointer-events: none;
}
.common-button-red.disabled:hover,
.common-button-red.disabled:active {
  background: #707070;
  color: #444;
}
.common-button-gray {
  color: #fff;
  background: #898989;
}
/* 非活性  */
.common-button-gray.disabled {
  pointer-events: none;
  background: #707070;
  color: #444;
}
.common-button-gray:hover,
.common-button-gray:active {
  background: #555;
}
.common-button-white {
  color: #444;
  background: #dadada;
}
.common-button-white:hover,
.common-button-white:active {
  color: #fff;
  background: #474747;
}
.common-button-arrangement,
.common-button-arrangement-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}
@media screen and (max-width: 1024px) {
  .common-button-arrangement,
  .common-button-arrangement-2 {
    display: block;
  }
}
.common-button-arrangement-2 {
  justify-content: flex-start;
  flex-direction: initial;
}
/* 注意事項  */
.common-attention {
  text-align: left;
  margin: 2vw 2vw;
  color: #707070;
}
@media screen and (max-width: 1024px) {
  .common-attention {
    margin: 1vw;
    margin-top: 2vw;
  }
}
.common-attention > h5 {
  font-size: 1.2vw;
}
@media screen and (max-width: 1024px) {
  .common-attention > h5 {
    font-size: 2.8vw;
  }
}
.common-attention > ul {
  margin-top: 0.5vw;
}
.common-attention > ul > li {
  font-size: 1.1vw;
  line-height: 1.2vw;
  list-style: circle;
  margin-left: 1.5em;
}
@media screen and (max-width: 1024px) {
  .common-attention > ul > li {
    font-size: 2vw;
    line-height: 5vw;
  }
}

.common-scrol {
  overflow: scroll;
  margin-bottom: 1vw;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .common-scrol {
    margin-bottom: 2vw;
  }
}
.common-scrol-y {
  overflow-y: scroll;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .common-scrol-y {
    overflow-y: scroll;
    height: 94%;
  }
}
.common-scrol-x {
  overflow-x: scroll;
  margin-bottom: 1vw;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .common-scrol-x {
    margin-bottom: 2vw;
  }
}

/* 日付選択 */
.common-input-date {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.common-input-date > div {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin: 0.5vw 0.1vw 0.5vw 0.5vw;
}
@media screen and (max-width: 1024px) {
  .common-input-date > div {
    border-width: 0.2vw;
    margin: 0.5vw 0.1vw 0.5vw 0.5vw;
  }
}
.common-input-date > div:nth-child(1) {
  width: 5.5vw; /*年*/
}
@media screen and (max-width: 1024px) {
  .common-input-date > div:nth-child(1) {
    width: 20vw;
  }
}
.common-input-date > div:nth-child(2),
.common-input-date > div:nth-child(3),
.common-input-date > div:nth-child(4),
.common-input-date > div:nth-child(5) {
  width: 4vw; /*月、日*/
}
@media screen and (max-width: 1024px) {
  .common-input-date > div:nth-child(2),
  .common-input-date > div:nth-child(3),
  .common-input-date > div:nth-child(4),
  .common-input-date > div:nth-child(5) {
    width: 15vw;
  }
}

/* 範囲検索 */
.common-input-range {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.common-input-range > label {
  white-space: nowrap;
}

.common-date-focus::before {
  transform: rotate(90deg);
  border-top: 0.3vw solid #333 !important;
}
@media screen and (max-width: 1024px) {
  .common-date-focus::before {
    border-top: 1.2vw solid #333 !important;
  }
}
.common-input-date > div > input {
  position: relative;
  padding: 0.1vw 0.5vw;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 3;
  line-height: 2em;
  font-size: 1.3vw;
  color: #000;
  cursor: pointer;
  border: 0.1vw solid #b6b6b6;
  border-radius: 0.5vw;
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .common-input-date > div > input {
    padding: 2vw;
    font-size: 3.2vw;
    border-radius: 2vw;
    border-width: 0.2vw;
    line-height: 4.8vw;
    width: calc(100% - 5.4vw);
    /* Safariブラウザ セレクトボックス */
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media,
  _:future,
  :root .common-input-date > div > input {
    margin: 0.2vw 0;
  }
}
.common-input-date > div > input::-ms-expand {
  display: none;
}
.common-input-date > input {
  display: none;
}
.common-add-button {
  display: block;
  margin: 1vw auto;
  width: 5vw;
  font-size: 1.3vw;
  font-weight: bold;
  color: #fff;
  background: #58b6b9;
  border-radius: 1vw;
  cursor: pointer;
  transition: 0.2s;
  line-height: 2em;
}
@media screen and (max-width: 1024px) {
  .common-add-button {
    width: 14vw;
    font-size: 3vw;
    border-radius: 3vw;
    margin: 3vw auto;
  }
}
.common-pdf-header,
.common-pdf-footer {
  background: #c5c5c5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2vw;
  padding: 0.2vw;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .common-pdf-header,
  .common-pdf-footer {
    padding: unset;
    font-size: 4vw;
  }
}
.common-pdf-header > div,
.common-pdf-footer > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.common-pdf-header span,
.common-pdf-footer span {
  display: block;
  min-width: 1vw;
  padding: 0.5vw;
  margin: 0.5vw;
  border-radius: 0.3vw;
  background: #fff;
  text-align: center;
  transition: 0.2s;
  cursor: pointer;
  font-weight: bold;
}
@media screen and (max-width: 1024px) {
  .common-pdf-header span,
  .common-pdf-footer span {
    min-width: 4vw;
    border-radius: 1vw;
    padding: 2vw;
    margin: 2vw;
    font-size: 4vw;
  }
}
.common-pdf-header span:hover,
.common-pdf-header span:active,
.common-pdf-footer span:hover,
.common-pdf-footer span:active {
  background: #dedede;
}
.common-pdf-header div#addbutton_list,
.common-pdf-footer div#addbutton_list {
  position: absolute;
  top: 3vw;
  left: 0;
  display: none;
  background: #ccc;
  z-index: 400;
}
/* .common-pdf-header span#downloadbutton,
.common-pdf-footer span#downloadbutton{
  padding: 0.5vw 2vw;
}@media screen and (max-width: 1024px){
  .common-pdf-header span#downloadbutton,
  .common-pdf-footer span#downloadbutton{
    padding: 2vw 8vw;
}} */
.common-pdf-header span#submitbutton,
.common-pdf-header span#zoomoutbutton,
.common-pdf-header span#js-pager-next,
.common-pdf-footer span#submitbutton,
.common-pdf-footer span#zoomoutbutton,
.common-pdf-footer span#js-pager-next {
  margin-right: 2vw;
}
.common-pdf-header p,
.common-pdf-footer p {
  padding: 0 1vw;
}
@media screen and (max-width: 1024px) {
  .common-pdf-header p,
  .common-pdf-footer p {
    font-size: 4vw;
  }
  .common-pdf-header p > small,
  .common-pdf-footer p > small {
    font-size: 4vw;
  }
}
.common-pdf-area {
  position: relative;
  overflow: scroll;
  height: 60vw;
  background: #5c5c5c;
}
@media screen and (max-width: 1024px) {
  .common-pdf-area {
    height: 150vw;
  }
}
.common-pdf-area > canvas,
.common-pdf-area > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.common-pdf-area > div > div {
  position: relative;
}
.common-pdf-area > div > div > div {
  border-radius: 0.3vw;
  padding: 0 0.5em;
}
.common-pdf-area > div > div > div.editable {
  border: 0.1vw solid rgba(6, 192, 250, 1);
}
@media screen and (max-width: 1024px) {
  .common-pdf-area > div > div > div.editable {
    border-width: 0.5vw;
  }
}
.common-pdf-area input[type='text'] {
  font-family: 'genshingothic';
  width: 100%;
  line-height: 2.5em;
  background-color: rgba(0, 0, 0, 0);
  border: none;
}
.common-pdf-area input[type='text'].movable {
  cursor: grab;
}
.common-pdf-area input[type='text']:active {
  cursor: grabbing;
}
.common-pdf-area input[type='text']:focus {
  outline: 0;
}
.common-pdf-area span {
  content: '×';
  position: absolute;
  font-size: 0.95vw;
  width: 1em;
  height: 1em;
  right: -0.5vw;
  top: -0.5vw;
  background: #fff;
  color: rgba(6, 192, 250, 05);
  border-radius: 1em;
  border: 0.05vw solid rgba(6, 192, 250, 1);
  display: none;
}
@media screen and (max-width: 1024px) {
  .common-pdf-area span {
    font-size: 6vw;
    right: -8vw;
    top: -0.6vw;
    border-width: 0.5vw;
  }
}
.common-pdf-area span:hover {
  cursor: pointer;
}
.common-pdf-area > div > div > div:hover > span {
  display: block;
}
.common-messagebox-outer,
.common-exception-outer {
  width: 45vw;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .common-messagebox-outer,
  .common-exception-outer {
    width: 90vw;
  }
}
.common-messagebox-title,
.common-exception-title {
  font-size: 1.3vw;
  line-height: 1.5em;
  margin-bottom: 1em;
}
@media screen and (max-width: 1024px) {
  .common-messagebox-title,
  .common-exception-title {
    font-size: 3vw;
  }
}
.common-exception-title {
  color: #c24242;
}
.common-messagebox-message,
.common-exception-message {
  text-align: left;
  margin-bottom: 1em;
}
.common-exception-message {
  color: #c24242;
}
ul.common-exception-message {
  padding-left: 2vw;
}
@media screen and (max-width: 1024px) {
  ul.common-exception-message {
    padding-left: 2em;
  }
}
ul.common-exception-message > li {
  list-style: disc;
}

.common-confirm-window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: none;
}
.common-confirm-window > div {
  width: 30vw;
  padding: 1vw;
  background: #fff;
  border-radius: 0.2vw;
  margin: 10vw auto auto auto;
  z-index: 1001;
}
@media screen and (max-width: 1024px) {
  .common-confirm-window > div {
    width: calc(100% - 10vw);
    padding: 5vw;
    margin: 40vw auto auto auto;
  }
}
.common-confirm-window > div > p {
  text-align: left;
}
.common-PDFdownload {
  position: relative;
  display: block;
  line-height: 4em;
  background: #fff;
  margin: 1em auto;
  color: #000;
  width: 30vw;
  border-radius: 1em;
  transition: 0.2s;
}
@media screen and (max-width: 1024px) {
  .common-PDFdownload {
    width: 80vw;
  }
}
.common-PDFdownload:hover,
span.common-PDFdownload {
  background: #707070;
}
.common-PDFdownload::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1vw;
  transform: translateY(-50%);
  width: 1.9vw;
  height: 2.5vw;
  background-image: url('../img/icon_pdf.svg');
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  .common-PDFdownload::before {
    left: 3vw;
    width: 4.6vw;
    height: 6vw;
  }
}

.common-file-download {
  position: relative;
  display: block;
  line-height: 4em;
  background: #fff;
  margin: 1em auto;
  color: #000;
  width: 30vw;
  border-radius: 1em;
  transition: 0.2s;
  font-size: 1.3vw;
  border: 0.1vw solid #b6b6b6;
}
@media screen and (max-width: 1024px) {
  .common-file-download {
    width: 80vw;
  }
}
.common-file-download:hover,
span.common-file-download {
  background: #707070;
}
.common-file-download::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1vw;
  transform: translateY(-50%);
  width: 2.5vw;
  height: 2.5vw;
  background-image: url('../img/icon_file.svg');
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  .common-file-download::before {
    left: 3vw;
    width: 4.6vw;
    height: 6vw;
  }
}

#nowLoading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
#nowLoading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4vw;
  height: 4vw;
  background: url('../img/nowloading.gif');
  background-size: cover;
}

.selected {
  background: #71e5e9;
}
.notSelectable {
  background: #e2e2e2;
}

.common-background-blue {
  background-color: #58b6b9;
  color: #fff;
}

.common-background-deepblue {
  background-color: #a0c4fa;
  color: #fff;
}
#rowSelect_filter input,
#rowSelect-conform_filter input,
#rowSelectSingle_filter input {
  height: 2.5vw;
  width: 20vw;
  margin-left: 2vw;
  font-size: 1.5vw;
  padding: 0 1vw;
}
@media screen and (max-width: 1024px) {
  #rowSelect_filter input,
  #rowSelect-conform_filter input,
  #rowSelectSingle_filter input {
    height: 6vw;
    width: 50vw;
    font-size: 4vw;
  }
}

/* ホバーアイコン用定義 */
.common-hover-icon {
  fill: #58b6b9;
  transition: 0.2s;
  line-height: 0;
  text-align: center;
}
.common-hover-icon:hover {
  fill: #195b58;
}
.common-hover-icon > svg {
  height: 2vw;
  width: 1.5vw;
}
@media screen and (max-width: 1024px) {
  .common-hover-icon > svg {
    height: 5vw;
    width: 4vw;
  }
}

/* ヘルプアイコン用定義 */
.common-help-icon {
  fill: #707070;
  transition: 0.2s;
  line-height: 0;
  text-align: center;
}
.common-help-icon:hover {
  fill: #555;
}
.common-help-icon > svg {
  height: 3vw;
  width: 2vw;
}
@media screen and (max-width: 1024px) {
  .common-help-icon > svg {
    height: 5vw;
    width: 4vw;
  }
}

/* ヘルプ用モーダル */
.common-help-window {
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: none;
}
.common-help-window > div {
  position: relative;
  width: 50vw;
  background: #fff;
  margin: 10vh auto auto auto;
  border-radius: 0.5vw;
  padding: 3vw;
  z-index: 1002;
  line-height: 1.5em;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .common-help-window > div {
    width: 90vw;
    line-height: 2em;
  }
}
.common-help-window > div > .common-help-window-close {
  position: absolute;
  top: -0.5vw;
  right: -0.5vw;
  width: 2vw;
  height: 2vw;
  background: #fff;
  border: 0.1vw solid #999;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
}
@media screen and (max-width: 1024px) {
  .common-help-window > div > .common-help-window-close {
    top: -5vw;
    right: -2vw;
    width: 8vw;
    height: 8vw;
    border: 0.5vw solid #999;
  }
}
.common-help-window > div > .common-help-window-close:hover {
  background: #ddd;
}
.common-help-window > div > .common-help-window-close::before,
.common-help-window > div > .common-help-window-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2vw;
  height: 1vw;
  background: #999;
}
@media screen and (max-width: 1024px) {
  .common-help-window > div > .common-help-window-close::before,
  .common-help-window > div > .common-help-window-close::after {
    width: 0.6vw;
    height: 5vw;
  }
}
.common-help-window > div > .common-help-window-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.common-help-window > div > .common-help-window-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* ヘルプ用モーダルの箇条書き表記 */
.common-help-window > div > div > ul > li {
  margin: 2vw;
  list-style: circle;
}
.common-help-window > div > div > ul > li > p {
  line-height: 1.5em;
}
@media screen and (max-width: 1024px) {
  .common-help-window > div > div > ul > li > p {
    font-size: 2.5vw;
    line-height: 2em;
  }
}

/* PDFプレビュー用css */
.upload-pdf-preview-area .common-pdf-header {
  justify-content: center;
}
.upload-pdf-preview-area .common-pdf-header > div:last-child {
  right: 0;
  position: absolute;
}
.upload-pdf-preview-area .common-pdf-footer {
  justify-content: center;
}
.upload-pdf-preview-area .common-pdf-footer > div:last-child {
  right: 0;
  position: absolute;
}

/** タブ */
.tab-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.tab-list-item {
  text-align: center;
  flex: 2 1 auto;
  background-color: #eee;
  padding: 16px 0;
  list-style-type: none;
}
.tab-list-item.tab-active {
  background-color: #58b6b9;
  color: white;
}

.tab-contents-item {
  display: none;
  margin-top: 1vw;
}
.tab-contents-item.tab-show {
  display: block;
}

.fix-button {
  padding: 0.4vw !important;
}

.dropdown-menu {
    position: absolute;
    z-index: 1;
    display: none;
    width: 7vw;
    background-color: #58B6B9;
    border: 1px solid #eee;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 20%);
}

.dropdown-toggle {
    width: 7vw;
    padding: 0.2vw;
    font-size: 1.0vw;
    line-height: 1.5;
    color: white;
    cursor: pointer;
    background-color: #58B6B9;
    border: 1px solid #eee;
}

.dropdown-item {
    width: 100%;
    color: white;
    text-align: left;
}

.dropdown-menu a {
    display: block;
    padding: 0.6vw 0.8vw;
    color: white;
    text-decoration: none;
}

.dropdown-toggle::after {
    margin-left: 0.5em;
    content: "\25BE"; /* Unicode character for downward arrow */
}

.dropdown:hover .dropdown-menu {
    display: block;
}

@media screen and (max-width: 1024px) {
    .dropdown-menu {
        width: 20vw;
    }

    .dropdown-toggle {
        width: 20vw;
        padding: 1vw;
        font-size: 3.0vw;
    }

    .dropdown-menu a {
        padding: 2vw;
        font-size: 3.0vw;
    }
}

/* bootstrap系、移行不要↓ */
.m-0 {
    margin: 0 !important;
}

.pt-2 {
    padding-top: .5rem !important;
}

.pb-2 {
    padding-bottom: .5rem !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.font-small, .fs-sm {
    font-size: 85%;
}

.font-bold, .fw-bold {
    font-weight: bold;
}

.d-none {
    display: none !important;
}

.pl-2 {
    padding-left: 0.5rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.text-decoration-underline {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.lh-125 {
  line-height: 1.25rem !important;
}

.lh-150 {
  line-height: 1.5rem !important;
}

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

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

/* bootstrap系、移行不要↑ */

/* 他のサービスへの誘導Modal中のボタン */
.modal--lp-button--service {
  padding: 7px 15px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: #EE7800;
  text-align: center;
  text-decoration: none;
  background: #FFf;
  border: 2px solid #EE7800;
  border-radius: 6px;
  box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 20%);
}

.modal--lp-button--entry {
  padding: 7px 15px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  background: #EE7800;
  border: 2px solid #EE7800;
  border-radius: 6px;
  box-shadow: 2px 2px 4px 0 rgb(0 0 0 / 20%);
}

.modal--lp-button--entry.disabled {
  pointer-events: none;
  background: #6c757d;
  border: 2px solid #6c757d;
}

.modal--lp-button--service:hover {
  color: #FFF;
  background: #EE7800;
}

.modal--lp-button--entry:hover {
  color: #EE7800;
  background: #FFF;
}

.modal--lp-button--entry.disabled:hover {
  color: #fff;
  background: #5c636a;
}

.common-sub-title {
  margin-top: 2vw;
  text-align: left;
}

/* Bootstrapの一部CSSを追加 */
.spinner-grow,
.spinner-border {
  display: inline-block;
  width: var(--spinner-width);
  height: var(--spinner-height);
  vertical-align: var(--spinner-vertical-align);
  border-radius: 50%;
  animation: var(--spinner-animation-speed) linear infinite var(--spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg); /* rtl:ignore */
  }
}

.spinner-border {
  --spinner-width: 2rem; /* Replace with desired size */
  --spinner-height: 2rem; /* Replace with desired size */
  --spinner-vertical-align: middle; /* Replace with desired value */
  --spinner-border-width: 0.25em; /* Replace with desired size */
  --spinner-animation-speed: 0.75s; /* Replace with desired speed */
  --spinner-animation-name: spinner-border;

  border: var(--spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --spinner-width: 0.8rem; /* Replace with desired size */
  --spinner-height: 0.8rem; /* Replace with desired size */
  --spinner-border-width: 0.2em; /* Replace with desired size */
}

/* Growing circle */
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

.spinner-grow {
  --spinner-width: 2rem; /* Replace with desired size */
  --spinner-height: 2rem; /* Replace with desired size */
  --spinner-vertical-align: middle; /* Replace with desired value */
  --spinner-animation-speed: 0.75s; /* Replace with desired speed */
  --spinner-animation-name: spinner-grow;

  background-color: currentcolor;
  opacity: 0;
}

.spinner-grow-sm {
  --spinner-width: 0.8rem; /* Replace with desired size */
  --spinner-height: 0.8rem; /* Replace with desired size */
}

.common-button-red span,
.common-button-re-red span {
  font-size: 1.3vw;
}

.common-button-red:disabled,
.common-button-red.disabled,
.common-button-re-red:disabled,
.common-button-re-red.disabled {
  pointer-events: none;
  background: #ccc;
  border-color: #ccc;
}

.d-visible-when-disabled {
  visibility: hidden
}

.common-button-red:disabled .d-visible-when-disabled,
.common-button-red.disabled .d-visible-when-disabled,
.common-button-re-red:disabled .d-visible-when-disabled,
.common-button-re-red.disabled .d-visible-when-disabled {
  visibility: visible;
}

.vw-20 {
  width: 20vw !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

@media screen and (max-width: 1024px) {
  .common-button-red span,
  .common-button-re-red span {
    font-size: 3.2vw;
  }

  .spinner-border,
  .spinner-grow {
    --spinner-animation-speed: 1.5s; /* Replace with adjusted speed */
  }

  .vw-20 {
    width: 100% !important;
  }
}