@charset "utf-8";


/* ************************************************ 
*	ログイン　共通
* ************************************************ */	
.login-inner {
margin: 0 auto;
padding: 250px 0 200px 0;
width: 1100px;
max-width: 90%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.login-btn1,
.login-btn2,
.login-btn3 {
width: 31.5%;
}
.login-btn1 a,
.login-btn2 a,
.login-btn3 a{
color: #fff;
display: block;
line-height: 1.3;
text-decoration: none;
font-size: min(2.2vw,24px);
align-content: center;
height: 180px;
border-radius: 15px; /* CSS3 */
position:relative;
}
.login-btn1 a{
background-color: #54c2f0;
padding: 0 0 0 105px;
}
.login-btn2 a{
background-color: #ff92a3;
padding: 0 0 0 85px;
}
.login-btn3 a{
background-color: #ff9938;
padding: 0 0 0 85px;
}

.login-btn1 a:hover,
.login-btn2 a:hover,
.login-btn3 a:hover{
color: #fff;
background-color:#004aaf;
border-radius: 15px; /* CSS3 */
}

.login-btn1 a::before,
.login-btn2 a::before,
.login-btn3 a::before{
position:absolute;
top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
content:"";
display:inline-block;
width:45px;
height:45px;
background:url("../images/icon_login.svg") no-repeat;
background-size:contain;
}

.login-btn1 a::before{ left: 45px; }
.login-btn2 a::before{ left: 25px; }
.login-btn3 a::before{ left: 25px; }


/* ************************************************ 
*	ログイン　岐阜　福利厚生　両方
* ************************************************ */	
.login-box {
width: 450px;
text-align: center;
margin: 170px auto 100px auto;
padding: 60px 100px;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
}
.title-gifu,
.title-benefits,
.title-both{
color: #fff;
font-weight: 500;
line-height: 1.3;
font-size: min(2.4vw,24px);
align-content: center;
height: 110px;
border-radius: 15px; /* CSS3 */
margin: 0 0 40px 0;
}
.title-gifu{ background-color: #54c2f0; }
.title-benefits{ background-color: #ff92a3; }
.title-both{ background-color: #ff9938; }

.login-form h3{
font-size: min(1.6vw,16px);
font-weight: 400;
text-align: left;
}
.login-box p{
font-size: min(1.6vw,16px);
margin: 0 0 20px 0;
}
.login-box [type="checkbox"] {
position: relative;
top: 1px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  height: 47px;
  padding: 0 10px;
  background-color: #fff;
  font-size: 18px;
margin-bottom: 30px;
}
.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
input[type="submit"],
.login-btn a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 300px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 30px;
  margin: 0 15px;
  font-size: 18px;
  line-height: 1;
  color: #333;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
input[type="submit"]:hover,
.login-btn a:hover {
  background-color: #333;
  color: #fff;
}


/* ************************************************ 
*	マイページ
* ************************************************ */	
.mypage-title-box {
margin: 100px auto 50px auto;
padding: 0;
width: 1000px;
max-width: 90%;
}

.mypage-title{
font-size: min(2.1vw,21px);
border-bottom: 1px solid #333;
padding: 0 0 15px 0;
font-weight: 500;
}
.mypage-title::before{
position:relative;
top: 12px;
left: 0;
content:"";
display:inline-block;
width:35px;
height:35px;
background:url("../images/icon_mypage.svg") no-repeat;
background-size:contain;
}

.mypage-inner {
margin: 0 auto;
padding: 0 0 200px 0;
width: 1000px;
max-width: 90%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.mypage-btn1,
.mypage-btn2,
.mypage-btn3 {
width: 31.5%;
}
.mypage-btn1 a,
.mypage-btn2 a,
.mypage-btn3 a{
color: #fff;
display: block;
line-height: 1.3;
text-decoration: none;
font-size: min(2.1vw,21px);
align-content: center;
text-align: center;
height: 100px;
border-radius: 15px; /* CSS3 */
position:relative;
}
.mypage-btn1 a{
background-color: #00aeeb;
}
.mypage-btn2 a{
background-color: #ff92a3;
}
.mypage-btn3 a{
background-color: #ff9938;
}

.mypage-btn1 a:hover,
.mypage-btn2 a:hover,
.mypage-btn3 a:hover{
color: #fff;
background-color:#004aaf;
border-radius: 15px; /* CSS3 */
}


/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){

}


/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.login-inner {
padding: 200px 0 100px 0;
}
.login-btn1 a,
.login-btn2 a,
.login-btn3 a{
height: 120px;
padding: 0 0 0 40px;
}
.login-btn1 a::before,
.login-btn2 a::before,
.login-btn3 a::before{
width:30px;
height:30px;
left: 5px;
}
}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.login-inner {
padding: 150px 0 100px 0;
}
.login-btn1,
.login-btn2,
.login-btn3 {
width: 100%;
margin: 0 0 20px 0;
}
.login-btn1 a,
.login-btn2 a,
.login-btn3 a{
font-size: 5vw;
height: 120px;
padding: 0 0 0 85px;
}
.login-btn1 a::before,
.login-btn2 a::before,
.login-btn3 a::before{
width:35px;
height:35px;
left: 35px;
}

.login-box {
width: calc(90% - 40px);
margin: 120px auto 70px auto;
padding: 50px 20px;
}
.title-gifu,
.title-benefits,
.title-both{
font-size: 5vw;
height: 80px;
margin: 0 0 30px 0;
}
.login-form h3{
font-size: 4vw;
}
.login-box p{
font-size: 3.5vw;
}

.mypage-title-box { margin: 50px auto 30px auto; }
.mypage-title{ font-size: 5vw; }
.mypage-inner { padding: 0 0 70px 0; }

.mypage-btn1,
.mypage-btn2,
.mypage-btn3 {
width: 100%;
margin: 0 0 20px 0;
}
.mypage-btn1 a,
.mypage-btn2 a,
.mypage-btn3 a{
font-size: 5vw;
}

}