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

.flow .pageTtl,
.merit .pageTtl{
  padding-top: 0;
  margin-bottom: 10px;
}


/*mv [
----------------------------------------------------------- */
.mv{
  position: relative;
}
.mv .mvTxt{
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  padding: 0 20px 10px 20px;
  text-align: left;
  color: var(--color-white);
}
.mv .mvTxt h1{
  margin: 5px 0 0 0;
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*15 / 22*/
  line-height: 1.0;
}
.mv .mvTxt p{
  font-size: clamp(calc(38px * var(--font-markup)), calc(38vw / var(--vw-sp)), 38px);/*60 / 38*/
  line-height: 1.0;
}

@media print, screen and (min-width:768px) {
  .mv{}
  .mv .mvTxt{
    padding: 0 30px 15px 30px;
  }
  .mv .mvTxt h1{
    margin-top: 10px;
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*15 / 22*/
  }
  .mv .mvTxt p{
    font-size: clamp(calc(60px * var(--font-markup)), calc(60vw / var(--vw-pc)), 60px);/*60 / 38*/
  }
}

/*loginArea [
----------------------------------------------------------- */
.loginArea{
  text-align: center;
}
.loginArea p{
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*18 / 20*/
  line-height: var(--line-height);
}
.loginArea .login_wrap{
  position: relative;
  display: flex;
  justify-content: center;
  height: 50px;
  margin: 30px auto 0 auto;
  /*opacity: 0.5;*/
}
/*.loginArea .login_wrap *{
  pointer-events: none;
}*/
.loginArea .login_wrap input{
  display: block;
  width: 70%;
  padding: 0 0 0 10px;
  background: var(--color-white);
  border: none;
  font-family: var(--font-family);
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 18*/
  text-align: left;
  line-height: 1.0;
}
.loginArea .login_wrap .sendBtn{
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-def01);
}
.loginArea .login_wrap .icon-login{
  width: 20px;
}
.loginArea .login_wrap .login-btn_text{
  /*margin: 0 0 0 5px;*/
  color: var(--color-white);
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*15 / 24*/
  line-height: 1.0;
}

.loginArea .login_wrap .login-btn_wrap {
  display: flex;
  align-items: center;
  /*column-gap: 16px;*/
  column-gap: 10px;
}

.error_text {
  position: absolute;
  left: 0;
  top: -28px;
  color: #c22828;
  background-color: rgba(255, 255, 255, 0.7);
  line-height: 2;
  letter-spacing: 1px;
  padding: 0 10px;
  font-size: 12px;
}


@media print, screen and (min-width:768px) {
  .loginArea{}
  .loginArea p{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*18 / 20*/
  }
  .loginArea .login_wrap{
    width: 620px;
    height: 75px;
  }
  .loginArea .login_wrap *{}
  .loginArea .login_wrap input{
    display: block;
    width: calc(70% - 10px);
    padding-left: 15px;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*13 / 18*/
  }
  .loginArea .login_wrap .sendBtn{}
  .loginArea .login_wrap .icon-login{
    width: 32px;
  }
  .loginArea .login_wrap .login-btn_text{
    font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*15 / 24*/
  }
  .error_text {
    left: 5px;
    top: -28px;
  }
}

/*flow [
----------------------------------------------------------- */
.flow{
  background: var(--color-white);
}
.flow ul{}
.flow ul li{
  position: relative;
  margin: 40px 0 0 0;
  padding: 35px 15px 20px 15px;
  background: #595757;
  color: var(--color-white);
  text-align: left;
  line-height: var(--line-height);
}
.flow ul li .fEn{
  position: absolute;
  left: 15px;
  top: -0.5em;
  display: block;
  color: var(--color-key01);
  font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-sp)), 40px);/*40 / 55*/
  line-height: 1.0;
}
.flow ul li .t01{
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 22*/
}
.flow ul li .t02{
  margin: 10px 0 0 0;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 14*/
}
.flow ul li .btn{
  margin: 10px 0 0 0;
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*14 / 15*/
  line-height: 1.0;
}
.flow ul li .btn a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 15px;
  background: url("../../common/images/h_btn_entry.jpg") no-repeat center center;
  background-size: cover;
}
.flow ul li .btn a i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: var(--color-def01);
  border-radius: 50%;
}
.flow ul li .btn a i::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 0 0 1px;
  border-left: 5px solid var(--color-white);
  border-right: none;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;  
}

@media print, screen and (min-width:768px) {
  .flow{}
  .flow ul{
    display: flex;
    justify-content: space-between;
    max-width: 1120px;
    margin: 60px auto 0 auto;
  }
  .flow ul li{
    width: calc((350 / 1120) * 100%);
    margin-top: 0;
    padding: 35px 3% 30px 3%;
  }
  .flow ul li .fEn{
    left: 10%;
    font-size: clamp(calc(55px * var(--font-markup)), calc(55vw / var(--vw-pc)), 55px);/*40 / 55*/
  }
  .flow ul li .t01{
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*20 / 22*/
  }
  .flow ul li .t02{
    margin: 10px 0 0 0;
    font-size: clamp(calc(13px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*13 / 14*/
  }
  .flow ul li .btn{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);/*14 / 15*/
  }
  .flow ul li .btn a{
    height: 32px;
    padding: 0 20px;
  }
  .flow ul li .btn a i{}
  .flow ul li .btn a i::after{}

}

/*merit [
----------------------------------------------------------- */
.merit{
  background: var(--color-white);
}
.merit ul{}
.merit ul li{
  display: flex;
  align-items: center;
  margin: 30px 0 0 0;
  background: #595757;
  color: var(--color-white);
  text-align: left;
  line-height: var(--line-height);
}
.merit ul li div,
.merit ul li figure{}
.merit ul li div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60%;
  padding: 0 15px 0 15px;
}
.merit ul li .fEn{
  display: block;
  color: var(--color-key01);
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*24 / 28*/
  line-height: 1.0;
}
.merit ul li .t01{
  margin: 10px 0 0 0;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 14*/
}

.merit ul li figure{
  position: relative;
  width: 40%;
  height: 140px;
  overflow: hidden;
}
.merit ul li figure img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media print, screen and (min-width:768px) {
  .merit{}
  .merit ul{
    display: flex;
    justify-content: space-between;
    max-width: 1120px;
    margin: 40px auto 0 auto;
  }
  .merit ul li{
    width: calc((540 / 1120) * 100%);
    margin-top: 0;
  }
  .merit ul li div,
  .merit ul li figure{
    width: 50%;
  }
  .merit ul li div{
    padding: 0 5% 0 5%;
  }
  .merit ul li .fEn{
    font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*24 / 28*/
  }
  .merit ul li .t01{
    margin: 10px 0 0 0;
    font-size: clamp(calc(13px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*13 / 14*/
  }
  .merit ul li figure{
    height: auto;
  }
  .merit ul li figure img{
    object-fit: unset;
    width: 100%;
    height: auto;
  }
}