@charset "utf-8";
/*************************************************************
 *
 * Copyright (c) 2022 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2022 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 0.2.0
 * Update	  : 2022.12.12
 *
 *************************************************************/
 
 
 body[class^="overflowY"]{
   overflow-y: hidden;
 }


/**
 * アラート
 */
body > div.ysAlert{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba( 0, 0, 0, .2 );
  text-align: left;
}
body > div.ysAlert > div.wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  background-color: #fff;
}
body > div.ysAlert > div.wrap > div.header{
  display: flex;
  flex-direction: row;
  border-style: solid;
  border-color: #d9e0e8;
  font-weight: bold;
  line-height: 1em;
}
body > div.ysAlert > div.wrap > div.header div.subject{
  flex: 1;
}
body > div.ysAlert > div.wrap > div.header div.close{
  position: relative;
  margin: auto;
  cursor: pointer;
}
body > div.ysAlert > div.wrap > div.header div.close::before,
body > div.ysAlert > div.wrap > div.header div.close::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: #858c90;
  transform: rotate(45deg);
}
body > div.ysAlert > div.wrap > div.header div.close::after{
  transform: rotate(-45deg);
}
body > div.ysAlert > div.wrap > div.body{
  background-color: #fff;
  overflow-x: auto;
}
body > div.ysAlert > div.wrap > div.footer{
  display: flex;
  justify-content: flex-end;
  background-color: #f9fbfd;
  border-top-style: solid;
  border-top-color: #d9e0e8;
}
body > div.ysAlert > div.wrap > div.footer > button{
  background-color: #fff;
  border-style: solid;
  border-color: #d9e0e8;
  font-weight: bold;
  color: #888d65;
  transition: background-color .2s,
              color .2s;
}
body > div.ysAlert > div.wrap > div.footer > button:hover{
  background-color: #f5f7f9;
  color: #555d65;
}
@media print, screen and (min-width: 1024px){
  /* px */
  
  body > div.ysAlert > div.wrap{
    width: 560px;
    box-shadow: 0 8px 40px rgb(22 37 51 / 20%);
    border-radius: 8px;
  }
  body > div.ysAlert > div.wrap > div.header{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-width: 1px;
    padding: 12px 16px;
    font-size: 18px;
  }
  body > div.ysAlert > div.wrap > div.header > div.subject{
    padding: 8px 0;
  }
  body > div.ysAlert > div.wrap > div.header div.close{
    width: 20px;
    height: 20px;
  }
  body > div.ysAlert > div.wrap > div.header div.close::before,
  body > div.ysAlert > div.wrap > div.header div.close::after{
    width: 18px;
    height: 3px;
  }
  body > div.ysAlert > div.wrap > div.body{
    min-height: 150px;
    max-height: 300px;
    padding: 24px 24px 48px;
    font-size: 18px;
  }
  body > div.ysAlert > div.wrap > div.footer{
    border-top-width: 1px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 12px 16px;
  }
  body > div.ysAlert > div.wrap > div.footer > button{
    height: 40px;
    margin-right: 8px;
    border-width: 1px;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 40px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

  body > div.ysAlert > div.wrap{
    width: 65.5737vw;
    box-shadow: 0 0.9367vw 4.6838vw rgb(22 37 51 / 20%);
    border-radius: 0.9367vw;
  }
  body > div.ysAlert > div.wrap > div.header{
    border-top-left-radius: 0.9367vw;
    border-top-right-radius: 0.9367vw;
    border-width: 0.117vw;
    padding: 1.4051vw 1.8735vw;
    font-size: 2.1077vw;
  }
  body > div.ysAlert > div.wrap > div.header > div.subject{
    padding: 0.9367vw 0;
  }
  body > div.ysAlert > div.wrap > div.header div.close{
    width: 2.3419vw;
    height: 2.3419vw;
  }
  body > div.ysAlert > div.wrap > div.header div.close::before,
  body > div.ysAlert > div.wrap > div.header div.close::after{
    width: 2.1077vw;
    height: 0.3512vw;
  }
  body > div.ysAlert > div.wrap > div.body{
    min-height: 17.5644vw;
    max-height: 35.1288vw;
    padding: 2.8103vw 2.8103vw 5.6206vw;
    font-size: 2.1077vw;
  }
  body > div.ysAlert > div.wrap > div.footer{
    border-top-width: 0.117vw;
    border-bottom-left-radius: 0.9367vw;
    border-bottom-right-radius: 0.9367vw;
    padding: 1.4051vw 1.8735vw;
  }
  body > div.ysAlert > div.wrap > div.footer > button{
    height: 4.6838vw;
    margin-right: 0.9367vw;
    border-width: 0.117vw;
    border-radius: 0.4683vw;
    padding: 0 1.4051vw;
    font-size: 1.8735vw;
    line-height: 4.6838vw;
  }
}
@media screen and (max-width: 640px){
	/* px/4 */

  body > div.ysAlert > div.wrap{
    width: 90vw;
    box-shadow: 0 2vw 10vw rgb(22 37 51 / 20%);
    border-radius: 2vw;
  }
  body > div.ysAlert > div.wrap > div.header{
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    border-width: 0.25vw;
    padding: 3vw 4vw;
    font-size: 4.5vw;
  }
  body > div.ysAlert > div.wrap > div.header > div.subject{
    padding: 2vw 0;
  }
  body > div.ysAlert > div.wrap > div.header div.close{
    width: 5vw;
    height: 5vw;
  }
  body > div.ysAlert > div.wrap > div.header div.close::before,
  body > div.ysAlert > div.wrap > div.header div.close::after{
    width: 4.5vw;
    height: 0.75vw;
  }
  body > div.ysAlert > div.wrap > div.body{
    min-height: 37.5vw;
    max-height: 75vw;
    padding: 6vw 6vw 12vw;
    font-size: 4.5vw;
  }
  body > div.ysAlert > div.wrap > div.footer{
    border-top-width: 0.25vw;
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
    padding: 3vw 4vw;
  }
  body > div.ysAlert > div.wrap > div.footer > button{
    height: 10vw;
    margin-right: 2vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    padding: 0 3vw;
    font-size: 4vw;
    line-height: 10vw;
  }
}



/**
 * スピナー
 */
body > div.ysSpinner{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
}
body > div.ysSpinner > div.close{
  position: absolute;
  display: inline-block;
  cursor: pointer;
}
body > div.ysSpinner > div.close::before,
body > div.ysSpinner > div.close::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  background-color: #fff;
}
body > div.ysSpinner > div.close::before{
  transform: rotate(45deg);
}
body > div.ysSpinner > div.close::after{
  transform: rotate(-45deg);
}
body > div.ysSpinner > div.wrap{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  animation-name: ysSpinnerKey;
  animation-duration: 1s;
  animation-timing-function: steps( 8, start );
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
body > div.ysSpinner > div.wrap > div{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  width: 100%;
}
body > div.ysSpinner > div.wrap > div::before{
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  height: 100%;
  border-radius: 50%;
}
body > div.ysSpinner > div.wrap > div:nth-child(1){ transform: rotate(  0deg); }
body > div.ysSpinner > div.wrap > div:nth-child(2){ transform: rotate( 45deg); }
body > div.ysSpinner > div.wrap > div:nth-child(3){ transform: rotate( 90deg); }
body > div.ysSpinner > div.wrap > div:nth-child(4){ transform: rotate(135deg); }
body > div.ysSpinner > div.wrap > div:nth-child(5){ transform: rotate(180deg); }
body > div.ysSpinner > div.wrap > div:nth-child(6){ transform: rotate(225deg); }
body > div.ysSpinner > div.wrap > div:nth-child(7){ transform: rotate(270deg); }
body > div.ysSpinner > div.wrap > div:nth-child(8){ transform: rotate(315deg); }
body > div.ysSpinner > div.wrap > div:nth-child(1)::before{ background-color: rgba( 255, 255, 255, .0 ); }
body > div.ysSpinner > div.wrap > div:nth-child(2)::before{ background-color: rgba( 255, 255, 255, .1 ); }
body > div.ysSpinner > div.wrap > div:nth-child(3)::before{ background-color: rgba( 255, 255, 255, .2 ); }
body > div.ysSpinner > div.wrap > div:nth-child(4)::before{ background-color: rgba( 255, 255, 255, .4 ); }
body > div.ysSpinner > div.wrap > div:nth-child(5)::before{ background-color: rgba( 255, 255, 255, .6 ); }
body > div.ysSpinner > div.wrap > div:nth-child(6)::before{ background-color: rgba( 255, 255, 255, .8 ); }
body > div.ysSpinner > div.wrap > div:nth-child(7)::before{ background-color: rgba( 255, 255, 255, .9 ); }
body > div.ysSpinner > div.wrap > div:nth-child(8)::before{ background-color: rgba( 255, 255, 255, 1  ); }
@keyframes ysSpinnerKey{
    0%{ transform: rotate(  0deg); }
  100%{ transform: rotate(360deg); }
}
@media print, screen and (min-width: 1024px){
  /* px */
  
  body > div.ysSpinner > div.close{
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
  body > div.ysSpinner > div.close::before,
  body > div.ysSpinner > div.close::after{
    width: 30px;
    height: 5px;
  }
  body > div.ysSpinner > div.wrap{
    width: 50px;
    height: 50px;
  }
  body > div.ysSpinner > div.wrap > div::before{
    width: 14px;
    height: 14px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

  body > div.ysSpinner > div.close{
    top: 1.1709vw;
    right: 1.1709vw;
    width: 4.6838vw;
    height: 4.6838vw;
  }
  body > div.ysSpinner > div.close::before,
  body > div.ysSpinner > div.close::after{
    width: 3.5128vw;
    height: 0.5854vw;
  }
  body > div.ysSpinner > div.wrap{
    width: 5.8548vw;
    height: 5.8548vw;
  }
  body > div.ysSpinner > div.wrap > div::before{
    width: 1.6393vw;
    height: 1.6393vw;
  }
}
@media screen and (max-width: 640px){
	/* px/4 */

  body > div.ysSpinner > div.close{
    top: 2.5vw;
    right: 2.5vw;
    width: 10vw;
    height: 10vw;
  }
  body > div.ysSpinner > div.close::before,
  body > div.ysSpinner > div.close::after{
    width: 7.5vw;
    height: 1.25vw;
  }
  body > div.ysSpinner > div.wrap{
    width: 12.5vw;
    height: 12.5vw;
  }
  body > div.ysSpinner > div.wrap > div::before{
    width: 3.5vw;
    height: 3.5vw;
  }
}