@charset "utf-8";
/*************************************************************
 *
 * Copyright (c) 2024 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2024 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 1.0.0
 * Update	  : 2024.10.09
 *
 *************************************************************/
[v-cloak]{
  display: none;
}
[class^="icon-"], [class*=" icon-"]{
	margin-right:.5em;
}


/**
 * テキストエリア
 */
textarea{
  border-style: solid;
  border-color: #c8cfd7;
  color: #162533;
  transition: border-color .2s;
  resize: vertical;
    min-height: 19.25vw;
    padding: 1.5vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    box-shadow:inset 0 0.25vw 0.25vw rgb( 0 0 0 / 8% );
    font-size: 3.5vw;
    line-height: 5.25vw;
}
textarea:focus{
  border-color: #005bac;
  outline: none;
}
textarea::placeholder{
  color: rgba( 22, 37, 51, .2);
}



/**
 * テキストボックス
 */
input:not([type=checkbox]):not([type=radio]):not([type=file]){
  border-style: solid;
  border-color: #c8cfd7;
  color: #162533;
  transition: border-color .2s;
    height: 9vw;
    padding: 0 3vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    box-shadow:inset 0 0.25vw 0.25vw rgb( 0 0 0 / 8% );
    font-size: 3.5vw;
    line-height: 8.5vw;
}
input:focus:not([type=checkbox]):not([type=radio]):not([type=file]){
  border-color: #005bac;
  outline: none;
}
input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder{
  color: rgba( 22, 37, 51, .2);
}


/**
 * チェックボックス
 */
input[type=checkbox]{
  appearance: none;
  border-style: solid;
  border-color: #c8cfd7;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
    width: 4.5vw;
    height: 4.5vw;
    border-width: 0.5vw;
    border-radius: 0.5vw;
}
input[type=checkbox]:checked{
  background-color: #005bac;
  border-color: #005bac;
}
input[type=checkbox]:checked::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  border-left-style: solid;
  border-left-color: #fff;
  border-bottom-style: solid;
  border-bottom-color: #fff;
  transform: rotate(-45deg);
    bottom: 0.75vw;
    width: 2vw;
    height: 0.75vw;
    border-left-width: 0.5vw;
    border-bottom-width: 0.5vw;
}
input[type=checkbox]:disabled{
  opacity: .3;
  cursor: default;
}


/**
 * チェックボックス：スイッチ
 */
label.switch{
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
    min-width: 20vw;
}
label.switch > input[type=checkbox]{
  appearance: none;
  width: 100%;
  border-style: solid;
  border-color: #c8cfd7;
  background-color: #eee;
  cursor: pointer;
  transition: background-color .2s;
    min-height: 7.5vw;
    border-width: 0.25vw;
    border-radius: 3.75vw;
}
label.switch > input[type=checkbox]::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 50%;
  border-style: solid;
  border-color: #c8cfd7;
  background-color: #fff;
  transition: left .2s;
    width: 6vw;
    height: 6vw;
    border-width: 0.25vw;
    left: 0.25vw;
}
label.switch > input[type=checkbox]:checked{
  background-color: #005bac;
}
label.switch > span{
  display: block;
  opacity: 1;
  transition: opacity .05s;
}
label.switch > input[type=checkbox] ~ span{
  position: absolute;
  top: 0;
  display: inline-block;
  white-space: nowrap;
  transition: opacity .2s, color .2s;
    padding: 0 2.5vw;
    font-size: 3.5vw;
    line-height: 7.5vw;
}
label.switch > input[type=checkbox] ~ span.on{
  color: #fff;
    left: 1.25vw;
}
label.switch > input[type=checkbox] ~ span.off{
  color: #555;
    right: 1.25vw;
}
label.switch > input[type=checkbox]:not(:checked) ~ span.on{
  opacity: 0;
}
label.switch > input[type=checkbox]:checked ~ span.off{
  opacity: 0;
}



/**
 * セレクトボックス
 */
 select{
  appearance: none;
  border-style: solid;
  border-color: #c8cfd7;
  background-color: #fff;
  background-image: url('/commons/imgs/select_icon.svg');
  background-repeat: no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition: border .2s;
  outline: none;
    height: 9vw;
    padding: 0 6vw 0 3vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    background-position: top 2.25vw right 1.5vw;
    background-size: 4.5vw;
    font-size: 3.5vw;
 }
 select:focus{
  border-color: #005bac;
 }


/**
 * ボタン：塗り
 */
button.background {
  border: none;
  cursor: pointer;
  outline: none;
    height: 10vw!important;
    padding: 0 4vw!important;
    border-radius: 1vw!important;
    font-size: 4vw!important;
}
button.background:disabled{
  background-color: #e8e8e8!important;
  color: #ccc!important;
  cursor: default!important;
}
button.background:not(:disabled){
  transition: background-color .2s,
              color .2s;
  background-color: #f0f0f0;
  font-weight: bold;
  color: #555d65;
}
button.background:not(:disabled):hover{
  background-color: #f8f8f8;
}
/* 青 */
button.background:not(.disabled).blue{
  background-color: #005bac!important;
  color: #fff!important;
}
button.background:not(.disabled).blue:hover{
  background-color: rgb(22, 111, 189)!important;
  color: #ddd!important;
}
/* 赤 */
button.background:not(:disabled).red{
  background-color: #f2994a!important;
  color: #fff!important;
}
button.background:not(:disabled).red:hover{
  background-color: #f5aa68!important
}
  button.background.small{
    height: 7vw!important;
    padding: 1vw 2vw!important;
    border-radius: 0.5vw!important;
    font-size: 3vw!important;
  }
  button.background.big{
    height: 12.25vw!important;
    padding: 2.5vw 4vw!important;
    border-radius: 1vw!important;
    font-size: 4.5vw!important;
  }


/**
 * ボタン：線
 */
button.border {
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-color: #b5b5b5;
  background-color: #fff;
  line-height: 1.5em;
  color: #222;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color .1s linear, color .1s linear;
    padding: 2vw 3vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    font-size: 3.5vw;
}
button.border[disabled]{
  pointer-events: none;
  opacity: .4;
  cursor: default;
  box-shadow: none;
}
button.border:hover:not([disabled]){
  border-color: #888;
  color: #888;
}
button.border:active:not([disabled]){
  background-color: #bdbdbd;
  color: #fff;
}
/* 青色 */
button.border.blue {
  border-color: #0084cf;
  background-color: #fff;
  color: #0074b6;
}
button.border.blue:hover:not([disabled]){
  border-color: #0084cf;
  background-color: #e7f4fc;
  color: #0074b6;
}
button.border.blue:active:not([disabled]){
  background-color: #4c7d98;
  color: #fff;
}
/* 赤色 */
button.border.red {
  border-color: #ff881f;
  background-color: #fff;
  color: #ff881f;
}
button.border.red:hover:not([disabled]){
  border-color: #ff881f;
  background-color: #fff3ea;
  color: #ff881f;
}
button.border.red:active:not([disabled]){
  background-color: #dd781f;
  color: #fff;
}
  button.border.small{
    height: 7vw!important;
    padding: 1vw 2vw!important;
    border-radius: 0.5vw!important;
    font-size: 3vw!important;
  }
  button.border.big{
    height: 12.25vw!important;
    padding: 2.5vw 4vw!important;
    border-radius: 1vw!important;
    font-size: 4.5vw!important;
  }


/**
 * ボタン：アイコン付き
 */
button.border[class^="icon-"],
button.border[class*=" icon-"]{
  position: relative;
    padding-left: 12vw;
}
button.border[class^="icon-"]::before,
button.border[class*=" icon-"]::before{
  position: absolute;
  left: 0;
  z-index: 2;
  color: #fff;
  text-align: center;
    width: 9.25vw;
}
button.border[class^="icon-"]:hover:not([disabled])::before,
button.border[class*=" icon-"]:hover:not([disabled])::before{
  color: #ccc;
}
button.border[class^="icon-"]::after,
button.border[class*=" icon-"]::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  background-color: #b5b5b5;
    width: 9.25vw;
}
button.border[class^="icon-"]:hover:not([disabled])::after,
button.border[class*=" icon-"]:hover:not([disabled])::after{
  background-color: #858585;
}
/* 青色 */
button.border.blue[class^="icon-"]::after,
button.border.blue[class*=" icon-"]::after {
  background-color: #0084cf;
}
button.border.blue[class^="icon-"]:hover:not([disabled])::after,
button.border.blue[class*=" icon-"]:hover:not([disabled])::after{
  background-color: #016ead;
}
/* 赤色 */
button.border.red[class^="icon-"]::after,
button.border.red[class*=" icon-"]::after {
  background-color: #ff881f;
}
button.border.red[class^="icon-"]:hover:not([disabled])::after,
button.border.red[class*=" icon-"]:hover:not([disabled])::after{
  background-color: #ff881f;
}
  button.border.small[class^="icon-"],
  button.border.small[class*=" icon-"]{
    padding-left: 9vw!important;
  }
  button.border.small[class^="icon-"]::before,
  button.border.small[class*=" icon-"]::before{
    width: 6.5vw;
  }
  button.border.small[class^="icon-"]::after,
  button.border.small[class*=" icon-"]::after{
    width: 6.5vw;
  }

  button.border.big[class^="icon-"],
  button.border.big[class*=" icon-"]{
    padding-left: 15vw;
  }
  button.border.big[class^="icon-"]::before,
  button.border.big[class*=" icon-"]::before{
    width: 11.75vw;
  }
  button.border.big[class^="icon-"]::after,
  button.border.big[class*=" icon-"]::after{
    width: 11.75vw;
  }


/**
 * テーブル
 */
div.tableWrap {
  display: inline-block;
  max-width: 100%;
  border-style: solid;
  border-color: #e5e5e5;
  background-color: #eee;
  overflow-x: auto;
  overflow-y: hidden;
    margin-top: 2.5vw;
    border-width: 0.25vw;
    padding: 0.75vw;
}
div.tableWrap > table {
  width: 100%;
  border-collapse: collapse;
  border-style: solid;
  border-color: #d5d5d5;
  border-spacing: 0;
  background-color: #fff;
    border-width: 0.25vw;
}
div.tableWrap > table > thead > tr > th {
  border-style: solid;
  border-color: #d5d5d5;
  background-color: #f7f7f7;
  line-height: 1.2em;
  color: #333;
    border-width: 0.25vw;
    padding: 2.5vw;
    font-size: 3.5vw;
}
div.tableWrap > table > tbody > tr > * {
  border-style: solid;
  border-color: #d5d5d5;
  background-color: #fff;
  line-height: 1.4em;
  color: #333;
    border-width: 0.25vw;
    padding: 2.5vw;
    font-size: 3.5vw;
}
div.tableWrap > table > tbody > tr > th {
  background-color: #f7f7f7;
}
div.tableWrap > table > tfoot > tr > * {
  border-style: solid;
  border-color: #d5d5d5;
  background-color: #fff;
  line-height: 1.4em;
  color: #333;
    border-width: 0.25vw;
    padding: 2.5vw;
    font-size: 3.5vw;
}
div.tableWrap > table > tfoot > tr > th {
  background-color: #f7f7f7;
}


/**
 * ローディング
 */
img.loading { 
  animation-name: rotation;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
    margin-top: 5vw;
    width: 20vw;
}
@keyframes rotation {
    0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}