@charset "UTF-8";
/* CSS Document */



body{
  padding: 0;
  margin: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


/*レスポンシブ対応*/
.pc_ver{
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.sp_ver{
  display: none;
}


.main_view{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
}
.main_view a{
  display: block;
  position: absolute;
  top: 31%;
  right: 8%;
  width: 230px;
  opacity: 1;
  transition: 0.3s;
}
.main_view a:hover{
  opacity: 0.6;
}



.login_view{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
}

form{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
input[type="text"]{
  display: block;
  position: absolute;
  top: 26%;
  right: 6%;
  padding: 0 20px;
  width: 235px;
  height: 33px;
  border: solid 1px #818181;
  font-size: 20px;
  text-align: center;
}
button{
  display: block;
  position: absolute;
  top: 61%;
  right: 8.5%;
  width: 230px;
  height: 38px;
  border: none;
  background-image: url("../img/login_button.png");
  background-size: cover;
  background-position: center center;
  opacity: 1;
  transition: 0.3s;
  cursor: pointer;
  background-color: #FFFFFF;
}

button:hover{
  opacity: 0.6;
}




.list_view{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
}
.list_view a{
  display: block;
  position: absolute;
  right: 6%;
  width: 220px;
  opacity: 1;
  transition: 0.3s;
}
.list_view a:hover{
  opacity: 0.6;
}

.no1_button{
  top: 14%;
}
.no2_button{
  top: 21.8%;
}
.no3_button{
  top: 29.7%;
}
.no4_button{
  top: 37.6%;
}
.no5_button{
  top: 45.6%;
}
.no6_button{
  top: 53.6%;
}
.no7_button{
  top: 61.7%;
}
.no8_button{
  top: 69.6%;
}
.no9_button{
  top: 77.5%;
}
.no10_button{
  top: 85.7%;
}



.no_view{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
}
.tel_button{
  display: block;
  position: absolute;
  bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
}
.next_bn{
  display: block;
  position: absolute;
  top: -20%;
  right: 10%;
  width: 130px;
}
.next_arrow{
  display: block;
  position: absolute;
  top: -24%;
  right: 0;
  width: 60px;
  opacity: 1;
  transition: 0.3s;
}
.next_arrow:hover{
  opacity: 0.6;
}
.prev_bn{
  display: block;
  position: absolute;
  top: -20%;
  left: 10%;
  width: 130px;
}
.prev_arrow{
  display: block;
  position: absolute;
  top: -24%;
  left: 0;
  width: 60px;
  opacity: 1;
  transition: 0.3s;
}
.prev_arrow:hover{
  opacity: 0.6;
}
.list_back{
  display: block;
  position: absolute;
  bottom: -25%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #222222;
  text-decoration: none;
}
.list_back:hover{
  text-decoration: underline;
}

.logout{
  display: block;
  position: absolute;
  bottom: -5%;
  left: 80%;
  transform: translateX(-50%);
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #251716;
  border-radius: 100px;
  padding: 5px 0;
}


.sankourei{
  display: block;
  position: absolute;
  bottom: -25%;
  right: 0;
  width: 40px;
}















@media screen and (max-width: 480px) {
	/* 600px以下に適用されるCSS（スマホ用） */

  
  
  
  /*レスポンシブ対応*/
.pc_ver{
  display: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.sp_ver{
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
  
  

  
.main_view_sp{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.main_view_sp a{
  display: block;
  position: absolute;
  top: 80vw;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  opacity: 1;
  transition: 0.3s;
}
.main_view_sp a:hover{
  opacity: 0.6;
}



.login_view_sp{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

form{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
input[type="text"]{
  display: block;
  position: absolute;
  top: 8vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5vw;
  width: 60vw;
  height: 8vw;
  border: solid 1px #818181;
  font-size: 5vw;
  text-align: center;
}
button{
  display: block;
  position: absolute;
  top: 85vw;
  left: 50%;
  transform: translateX(-50%);
  width: 60vw;
  height: 13vw;
  border: none;
  background-image: url("../img/login_button.png");
  background-size: cover;
  background-position: center center;
  opacity: 1;
  transition: 0.3s;
  cursor: pointer;
  background-color: #FFFFFF;
}

button:hover{
  opacity: 0.6;
}




.list_view_sp{
  display: block;
  position: relative;
  top: 10vw;
  left: 0%;
  width: 100%;
  height: auto;
}
  .list_img_sp{
    display: block;
    position: relative;
    top: 0;
    left: 0;
  }
.list_view_sp a{
  display: block;
  position: absolute;
  right: 14vw;
  width: 50vw;
  opacity: 1;
  transition: 0.3s;
}
.list_view_sp a:hover{
  opacity: 0.6;
}

.no1_button{
  top: 41vw;
}
.no2_button{
  top: 54vw;
}
.no3_button{
  top: 68vw;
}
.no4_button{
  top: 82vw;
}
.no5_button{
  top: 95.5vw;
}
.no6_button{
  top: 109vw;
}
.no7_button{
  top: 123vw;
}
.no8_button{
  top: 136vw;
}
.no9_button{
  top: 149.5vw;
}
.no10_button{
  top: 163vw;
}



.no_view_sp{
  display: block;
  position: absolute;
  top: 20vw;
  left: 0%;
  transform: translate(0%, 0%);
  width: 100%;
}
.tel_button_sp{
  display: block;
  position: absolute;
  bottom: -20vw;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
}
.next_bn_sp{
  display: block;
  position: absolute;
  top: -13vw;
  right: 20vw;
  width: 23vw;
}
.next_arrow_sp{
  display: block;
  position: absolute;
  top: -17vw;
  right: 7vw;
  width: 10vw;
  opacity: 1;
  transition: 0.3s;
}
.next_arrow_sp:hover{
  opacity: 0.6;
}
.prev_bn_sp{
  display: block;
  position: absolute;
  top: -13vw;
  left: 20vw;
  width: 23vw;
}
.prev_arrow_sp{
  display: block;
  position: absolute;
  top: -17vw;
  left: 7vw;
  width: 10vw;
  opacity: 1;
  transition: 0.3s;
}
.prev_arrow_sp:hover{
  opacity: 0.6;
}
.list_back_sp{
  display: block;
  position: absolute;
  bottom: -40vw;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #222222;
  text-decoration: none;
  padding-bottom: 10vw;
}
.list_back_sp:hover{
  text-decoration: underline;
}


.sankourei_sp{
  display: block;
  position: absolute;
  bottom: -35vw;
  right: 10vw;
  width: 10vw;
}

  
  
.logout_sp{
  display: block;
  position: absolute;
  top: 200vw;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #251716;
  text-decoration: none;
  padding: 0vw 0 10vw 0;
}

  
  


}