@charset "UTF-8";
body{
    font-size: 16px;
    color: #A76168;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    min-height: 100vh;
    font-family: "Hiragino Sans", sans-serif;
}
main{
    min-height: 500px;
    width: 100%;
}
footer{
    width: 100%;
}
@font-face { 
    font-family: "times"; 
    src: url("/assets/css/OPTITimes-Roman.otf") format("truetype") 
  }
.openbtn{
    display: none;
}
/* button */
.entry1{
    text-align: center;
    font-size: 1.4em;
    background: rgb(250,160,168);
    background: linear-gradient(167deg, rgba(250,160,168,1) 0%, rgba(193,129,143,1) 100%);
    box-shadow: 0px 8px 20px 0px #D6B7BA;

        color: #fff;
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: #fff;
}
.entry{
    text-align: center;
    font-size: 1.4em;
    background: rgb(244,194,194);
    background: linear-gradient(167deg, rgba(244,194,194,1) 0%, rgba(222,150,165,1) 100%);
    color: #fff;
    padding-top: 1em;
    padding-bottom: 1em;
    box-shadow: 0px 8px 20px 0px #EACAD1;
    background-color: #fff;
    width: 80%;
    max-width: 600px;
    margin:0 auto
}
.mincho{
    font-family: Serif;
    font-weight: 300;    
}
/* ヘッダーPC */
header{
    display: flex;
    width: 100%;
    z-index: 100;
}

.header-logo{
    width: 196px;
    margin-left: 40px;
    margin-top: 40px;
}
.header-menu{
    width: 67%;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:8%;
    font-size: 1.4em;
    margin-top: 48px;
    height: 80px;
    font-family: "times";
    color: #fff;
    background: rgb(231,158,167);
    background: linear-gradient(165deg, rgba(231,158,167,1) 0%, rgba(190,120,136,1) 100%);
}
.header-menu li{
    height: fit-content;
}
.header-menu li:last-child{
}
.br-sp{
    display: none;
}
.header-menu li:last-child a{
    padding:.4em 1.5em;
    width: 100%;
    height: 100%;
    border: #fff 1px solid;
    font-size: .9em;
}
@media screen and (max-width:1024px) {
    main{
        margin-top: 61.58px;
    }
    header{
        justify-content: space-between;
        position: fixed;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        -moz-backdrop-filter: blur(2px);
        -o-backdrop-filter: blur(2px);
        -ms-backdrop-filter: blur(2px);
    }
    .header-menu{
        display: none;
    }
    .header-logo{
        width: 124px;
        margin-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .entry,.entry1{
        padding-top: .5em;
        padding-bottom: .5em;
    }
    .entry1{
        width: 80%;
        margin:0 auto
    }
    .openbtn {
        display: block;
    }
    .hum-active{
        display: block;
        position: fixed;
        width: 100%;
        height: calc(100vh - 61.85px);
        background: unset;
        background-color: rgba(255,255,255,0.85);
        z-index: 10;
        color: #A76168;
        margin-top: 0;
        top:61.58px
    }
    .hum-scroll{
        overflow: hidden;
    }
    .header-menu li:last-child{
        border: unset;
        padding:0;
        width: 55%;
        color:#fff;
    }
    .header-menu li:last-child a{
        width: 100%;
        height: 100%;
        display: block;
        border: unset;
        background: rgb(250,160,168);
        background-color: #fff;
        background: linear-gradient(167deg, rgba(250,160,168,1) 0%, rgba(193,129,143,1) 100%);    
        font-size: .8em;
    }
    .hum-active{
        display: flex;
        flex-wrap: wrap;
        padding-top: 15%;
        align-items: center;
        align-content: flex-start;
    }
    .hum-active li{
        width: 100%;
        text-align: center;
        font-size: 1.5em;
    }
    
}
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
    position: relative;/*ボタン内側の基点となるためrelativeを指定*/
    cursor: pointer;
    width: 50px;
    height:50px;
    border-radius: 5px;
    margin-top: 4px;
    margin-right: 4px;

  }
  
  /*ボタン内側*/
  .openbtn span{
      display: inline-block;
      transition: all .4s;/*アニメーションの設定*/
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
    background: #C38291;
      width: 45%;
    }
  
  .openbtn span:nth-of-type(1) {
    top:15px; 
  }
  
  .openbtn span:nth-of-type(2) {
    top:23px;
  }
  
  .openbtn span:nth-of-type(3) {
    top:31px;
  }
  
  /*activeクラスが付与されると線が回転して×に*/
  
  .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 13px;
      transform: translateY(6px) rotate(-45deg);
      width: 50%;
  }
  
  .openbtn.active span:nth-of-type(2) {
    opacity: 0;/*真ん中の線は透過*/
  }
  
  .openbtn.active span:nth-of-type(3){
      top: 30px;
      left: 13px;
      transform: translateY(-6px) rotate(45deg);
      width: 50%;
  }
/* mv */
.mv{
    display: flex;
    max-width: 1112px;
    margin:0 auto;
    position:relative;
    padding-top: 64px;
    overflow-y: clip;
    padding-bottom: 42px;
}
.mv-img1{
    width: 45%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.mv-img1 img{
    width: 65%;
}
.mv-img2{
    width: 85%;
    position: absolute;
    top:0px;
    left:50%;
}
/* 入社祝いキャンペーン */
.campaign{
    height: 740px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

}
.campaign-container{
    max-width: 584px;
    margin: 0 auto;
}
.campaign-container h3{
    font-size: 2.5em;
    text-align: center;
}
.campaign-container__p{
    text-align: center;
    padding-top: 2em;
    padding-bottom: 2em;
    line-height: 1.8em;
}
.campaign-container__detail{
    font-size: .8em;
    margin-top: 2em;
}
.campaign-container__bg{
    position: absolute;
    height:100%;
    left: 0;
    z-index: -1;
    fill:#FDF8F8;
}
.mv-sp{
    display: none;
}
@media screen and (max-width:1200px) {
    .mv-img1 {
        justify-content: center;
    }
}
@media screen and (max-width:600px) {
    .mv-sp{
        width: 100%;
        display: block;
    }
    .mv-sp img{
        width: 100%;
    }
    .mv{
        display: none;
    }
    .campaign-container__bg{
        left: -20%;
        top: -25%;
        width: 75%;
    }
    .campaign-container h3{
        font-size: 2em;
        text-align: center;
    }
    .br-sp{
        display: block;
    }
    .campaign-container__detail{
       width: 80%;
       margin: 24px auto;
       font-size: .9em;

    } 
}
/* 有休消化率 */
.yukyu {
    width: 100%;
    margin-top: 160px;
    min-height: 476.43px;
    padding-bottom: 64px;
    overflow: hidden;
}
.yukyu-img{
    display: none;
}
.yukyu-container{
    max-width:1112px;
    margin:0 auto;
    padding:0 5%;
    background: linear-gradient(00deg, #FFF7F7 0%, #FFF7F7 83%, #fff 83%, #fff 100%);
    padding-bottom: 11%;
    position: relative;
}
.div1{
    position: relative;
}
.g1{
    width: 45%;
    position: relative;
    z-index: 2;
}
.g2{
    position: absolute;
    position: absolute;
    width: 65%;
    top: 0;
    z-index: 0;
    right: 0;
}
.g3{
    position: absolute;
    width: 120%;
    z-index: 0;
    top: 6%;
    right: -314px;
    overflow: visible;
    top: 16%;
    height: 84%;
}
.workandlife{
    width: 100%;
}
@media screen and (max-width:600px) {
    .div1 {
        display: none;
    }
    .yukyu-img{
        display: block;
        margin-left: 3%;
    }
    .g3{
        display: none;
    }
    .yukyu-container{
        margin:0 auto;
        padding:0;
        background: unset;
    
    }
}
@media screen and (max-width:400px) {
    .yukyu-container{
        height:312px !important;
    }    

}
/* 3point */
.threePoint{
    max-width: 1116px;
    margin:0 auto;
    margin-top: 120px;
    padding-left: 5%;
    padding-right: 5%;
}
.p-bg1{
    background: linear-gradient(180deg, #fff 0%, #ffff 85%, #FFF7F7 85%, #FFF7F7 100%);
}
.threePoint-detail{
    margin-top: 120px;
}
.threeH3-sp,.threePoint-detail-sp{
    display: none;
}
@media screen and (max-width:600px) {
    .threeH3,.threePoint-detail{
        display: none;
    }
    .threeH3-sp{
        display: block;
        width: 80%;
        margin: 64px auto;
        
    }
    .threePoint-detail-sp{
        display: block;
        width: 90%;
        margin: 64px auto;
    }
    .p-bg1{
        background: unset;
    }

}
 /*  充実の研修制度　*/
 .kensyu{
    max-width: 1112px;
    margin:0px auto 0px auto;
    padding:270px 5% 0px 5%;
    margin-top: -150px;
    background-color: #fff;
 }
 .kensyu h3{
    text-align: center;
    font-size: 2em;
    font-weight: 500;
 }
 .kensyu-container{
    display: flex;
    gap:5%;
    margin-top: 64px;
 }
 .kensyu-container__img{
    width: 40%;
 }
 .kensyu-container__img img{
    width: 100%;
 }
  .kensyu-container__p{
    width: 55%;
 }
 .kensyu-p1{
    font-size: 1.5em;
    border-bottom: 3px solid #E28F99;
    width: fit-content;
 }
 .kensyu-ul{
    font-size: 1.25em;
    margin-top:64px;
    margin-left: 16px;
    margin-bottom: 64px;
 }
 .kensyu-p2{
    margin-left: 16px;
 }
 .sp-kensyu{
    display: none;
 }
 .pc-kensyu{
    width: 100%;
 }
 @media screen and (max-width:600px) {
    .kensyu {
        max-width: unset;
         margin: 0 auto; 
        padding: unset;
        margin-top: unset;
    }
    .kensyu-container {
        flex-direction: column;
        padding: 0 5%;
    }
    .kensyu-container__img{
        width: 100%;
     }

      .kensyu-container__p{
        width: 100%;
     }    
     .pc-kensyu{
        display: none;
     }
     .sp-kensyu{
        display: block;
        margin-bottom: 2em;
     }
     .kensyu-p1{
        font-size: 1em;
     }
     .kensyu-ul{
        font-size: .85em;
        margin-top:24px;
        margin-bottom: 24px;
        margin-left: 0;
     }
     .kensyu-p2{
        margin-left: 0;
        font-size: .85em;
     }    
     .pc-br{
        display: none;
     }
     .nyusha{
        padding-top: 60px !important;
        padding-bottom: 48px !important;
        padding-left: 10% !important;
        padding-right: 10% !important;
     }
     .p-bg2{
        padding-bottom: 0 !important;
        background-color: #fff !important;
     }
}

 /* 入社までの流れ */
 .p-bg2{
    background-color: #FFF7F7;
    padding-bottom: 120px;
 }
 .nyusha{
    max-width: 1116px;
    margin:0 auto;
    padding-top: 120px;
    padding-left: 5%;
    padding-right:5%;
    padding-bottom: 120px;
    background-color: #fff;
 }
 .w-bg{
    background-color: #fff;
    max-width: 1116px;
    padding-bottom: 120px;
    margin:0 auto
 }
 /* staff kengaku*/
 .staff{
    position: relative;
    background: linear-gradient(90deg, #FFF7F7 0%, #FFF7F7 50%, #fff 50%, #fff 100%);
 }
 .staff-box{
    max-width: 1112px;
    margin: 0 auto;
    background: #FFF7F7;
    margin: 160px auto;
    position: relative;
    padding-top: 10%;
    padding-bottom: 5%;
    padding-right: 5%;
    padding-left: 5%;
    
 }

 .staff, .staff img,.kengaku,.kengaku img{
    width: 100%;
 }
 .staff-title{
    position: absolute;
    top:-25%;
    width: 50% !important;
    z-index: 1;
    left: 4%;
}
 .kengaku h3{
    max-width: 1118px;
    margin: 0 auto
 }
 .staff-t-sp{
    width: 70% !important;
    position: absolute;
    top: -12%;
 }
.kengaku a{
    margin: 80px auto;
    display: block;
}
.staff-sp{
    display: none;
}
.sp-salon{
    display: none;
}
@media screen and (max-width:1090px) {
    .staff-box{
        padding-top: 13%;
    }
}
@media screen and (max-width:600px) {
    .staff-box{
        display: none;
    }
    .staff-sp{
        margin-right: auto;
        width: 100%;
        display: block;
        position: relative;
        height: 500px;
        padding-top: 10%;
        background: linear-gradient(90deg, #FFF7F7 0%, #FFF7F7 90%, #fff 90%, #fff 100%);
        margin-top: 64px;
    }
    .staff-svg {
        width: 280px !important;
        position: absolute;
        bottom:90%;
        left:0%;
    }
    .staff p{
        font-size: 1.5em;
        margin-bottom: 24px;
        padding-left: 5%;
        position: relative;
    }
    .staff-scroll{
        overflow: scroll;
        width: 100%;
    }
    .staff-scroll__inner{
        width: 1100px;
        padding-left: 5%;
    }
    .sp-salon{
        display: block;
        width: 100%;
        padding:0%;
        margin-top: 80px;
    }
    .kengaku h3{
        display: none;
    }
}
/* 店舗一覧 */
.storeList{
    background: linear-gradient(90deg, #fff 0%, #fff 50%, #FFF7F7 50%, #FFF7F7 100%);
    position: relative;
    margin-top: 240px;
}
.salon{
    position: absolute;
    bottom:87%;
    width: 50%;
    left: 5%;
    max-width: 585px;
    z-index: 0;
}
.salon img{
    width: 100%;
}
.storeList-container{
    margin-left: 5%;
    padding-left: 5%;
    padding-bottom: 0%;
    padding-top: 5%;
    display: flex;
    flex-wrap: wrap;
    margin:0 auto;
    gap: 5%;
    padding-right: 5%;
    background-color: #FFF7F7;
    max-width: 1116px;
    justify-content: space-between;
    position: relative;
}
.storeList-container__box{
    width: 45%;
    position: relative;
    margin-bottom: 10%;
    min-width: 300px;
}
.storeList-container__box>div{
    position: absolute;
    background-color: #fff;
    padding:5%;
    bottom:-25%;
    width: 60%;
    min-width: 200px;
}
.storeList-container__box img{
    width: 100%;
}
.storeList h3{
    font-size: 2em;
    margin-bottom: 1.5em;
    width: 100%;
    position: relative;
    z-index: 1;
    font-weight: 500;
}
.storeList-container__box>div>div{
    position: relative;
    width: 100%;
    padding: 0;
}
.storeList-container__box>div>div>a{
    position: absolute;
    right:3%;
    bottom: 3%;
    width: 24px;
}
.storeList-container__box>div>div>p:first-of-type{
    font-size: 1.2em;
    margin-bottom: .2em;
}
    @media screen and (max-width:842px) {
    .storeList-container h3{
        margin-top: 32px;
    }
    .storeList-container{
        margin-left: 5%;
        padding-right: 10%;
    }
    .storeList{
        background: linear-gradient(90deg, #fff 0%, #fff 5%, #FFF7F7 5%, #FFF7F7 100%);
    }    
    .salon{
        bottom: 95%;
        left: 2%;
        width: 80%;
        min-width: 280px;
    }
    .storeList-container__box{
        width: 100%;
        position: relative;
        margin-bottom: 50%;
    }
    .storeList-container__box div{
        position: absolute;
        background-color: #fff;
        padding:5%;
        bottom:-55%;
        width: 89%;
        min-width: 200px;
    }
    
}

/* work */
.work div{
    max-width: 1116px;
    margin:0 auto;
    padding-top: 120px;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 120px;
}
.work img{
    width: 100%;
}
.work-sp{
    display: none;
}
.contact-2{
    display: none;
}
@media screen and (max-width:842px) {
    .work-sp{
        display: block;
    }
    .work-pc{
        display: none;
    }
    footer{
        flex-direction: column;
        text-align: center;
    }
    footer > img{
        width: 70%;
        margin:1em auto 2em;
    }
    footer p{
        text-align: center !important;
    }
    .copy{
        margin-top: 1em;
    }
    .contact-1{
        display: none;
    }
    .contact-2{
        display: block;
        padding: 0 5%;
    }
}
/* footer */
footer{
    margin-top: 120px;
    background-color: #ECB6BC;
    display: flex;
    padding: 5% 10%;
    justify-content: space-between;
    color: #fff;
}
.copy{
    font-size: .8em;
}
footer div{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
footer p{
    width: 100%;
    text-align: right;
}
/* プライバシーポリシー */
.privacy{
    max-width:1108px;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto;
    margin-top: 120px;
}
.privacy h2{
    font-weight: 500;
    font-size: 2em;
    text-align: center;
    white-space: 1em;
    letter-spacing: .2em;
    margin-bottom: 16px;
}
.privacy > p{
    text-align: center;
    margin-bottom: 120px;
}
.privacy section{
    border-top: #F0E3E4 solid 1px;
    padding-bottom: 10%;   
}
.privacy h3{
    margin: 1em 0;
}
/* company */
.company{
    margin: 0 auto;
    margin-top: 48px;
}
.company>img{
    max-width: 1108px;
    margin:0 auto;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    margin-bottom: 120px;
}
.message{
    background-color: #FFF7F7;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}
.message-container{
    max-width: 860px;
    margin:0 auto;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
}
.message-container>div{
    background-color: #fff;
    padding: 4em;
}
.message h2{
    font-size: 2em;
    margin-bottom: .8em;
    font-weight: 500;
    position: relative;
}
.message-container__bg{
    position: absolute;
    max-width: 813px;
    bottom:86%;
    left: 15%;
    width: 60%;
    width: 100%;
}
.daihyo{
    text-align: right;
    margin-top: 5em;
}
dl {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
dt {
    flex-basis: 15%;
    padding: 40px 0;
    border-top: 1px solid #F0E3E4;
}
dd {
    flex-basis: 85%;
    padding: 40px 0;
    border-top: 1px solid #F0E3E4;
    padding-left: 42px;
}
dt:last-of-type,dd:last-child{
    border-bottom: 1px solid #F0E3E4;
}
.about{
    max-width: 860px;
    margin:0 auto;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    margin-top: 120px;
}
.about h2{
    text-align: center;
    font-size: 2em;
    margin-bottom: 2em;
    font-weight: 500;
}
.contact-container__inner{
    overflow: hidden;
}
@media screen and (max-width: 600px) {
    .company dl {
    flex-flow: column;
    }
    .message-container__bg {
        bottom: 95%;
        left: 5%;
        width: 90%;
    }
    .company>img {
        margin-bottom: 80px;
    }
    .message {
        padding-top: 34px;
    }
    .message-container>div {
        padding: 2em;
    
    }
    dt {
        flex-basis: 100%;
        padding: 40px 0 8px 0;
        font-weight: bold;
    }
    dd {
        padding: 0 0 40px 0;
        border-top:unset;
    }
    dt:last-of-type{
        border-bottom: unset;
    }
    dd:last-child{
        border-bottom: 1px solid #F0E3E4;
        width: 100%;
    }
    .contact-contact__bg{
        position: absolute;
        max-width: 613px;
        bottom: 97.5% !important;
        left: 2% !important;
        width: 80% !important;
    }
    .contact-container {
        padding-top: 56px !important;
    }
    .contact-container__inner{
        width: 90% !important;
    }
    .form4 textarea{
        min-width: 100%;
    }
}
/* contact */
.contact2{
    width: 100%;   
    margin-top: 112px;
}
.contact{
    width: 100%;   
    margin-top: 120px;
}
.contact>h2{
    max-width: 800px;
    margin:0 auto;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    margin-bottom: 120px;
    font-weight: 500;
}
.contact img{
    width: 100%;
}
.contact-contact__bg{
    position: absolute;
    max-width: 613px;
    bottom: 95%;
    left: 15%;
    width: 60%;
    width: 100%;
}
.contact-container{
    background-color: #FFF7F7;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}
.contact-container__inner{
    max-width: 860px;
    margin:0 auto;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
}
.contact-container__inner{
    background-color: #fff;
    padding: 5%;
}
.contact-container > p{
    font-size: .9em;
    text-align: center;
    margin-bottom: 40px;
}
.youkou{
    max-width: 860px;
    margin:0 auto;
    width: 100%;
    margin-top: 120px;
}
.youkou img{
    width: 100%;
}

.contact-form p {
    margin-bottom: 20px;
    font-size: 14px;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5em 0;
    border-top: 1px solid #DBCED0;
    align-items: center;
}
.form3{
    align-items: unset;
}
.form-group label {
    min-width: 200px;
    width: 30%;
    margin-right: 10%;
}
.form2 input{
    width: 70%;
    min-width: 320px;
}
.form2{
    row-gap: 1em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    flex: 1;
    padding: 4px;
    border: 1px solid #e8dada;
}

.dob input[type="text"] {
    width: calc(33.33% - 10px);
}

.dob input[type="text"] + input[type="text"] {
    margin-left: 10px;
}

.status,
.locations,
.employment-type,
.license,
.start-date {
    display: flex;
    flex-wrap: wrap;
}

.status label,
.locations label,
.employment-type label,
.license label,
.start-date label {
    flex: 1 0 200px;
}

.form-group textarea {
    resize: vertical;
    height: 100px;
}

.privacy-policy {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}
.privacy-policy label{
    width: fit-content;
}
.privacy-policy input[type="checkbox"] {
    margin-right: 10px;
}
.ymd{
    display: flex;
    width: 100%;
}
.ymd div:first-of-type input{
    width: 4em;
}
.ymd input{
    min-width: 4em;
    margin-right: 8px;
}
.ymd div{
    display: flex;
    align-items: flex-end;
}
.ymd span{
    margin-right: 1em;
}
.pp{
    text-decoration: underline;
}
.contact-form button {
    display: block;
    width: 100%;
    padding: .5em 1.5em;
    background: #d3a8a8;
    color: #ffffff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(167deg, rgba(250,160,168,1) 0%, rgba(193,129,143,1) 100%);
    box-shadow: 0px 8px 20px 0px #D6B7BA;
}

.contact-form button:hover {
    background: #b58989;
}

.contact-info {
    margin-top: 80px;
    text-align: center;
}

.contact-info p {
    margin-bottom: 40px;
    text-align: center;
}

.contact-info .phone {
    background: #DCAAB4;
    color: #ffffff;
    padding: 20px;
}
.phone img{
    width: 100%;
}

.contact-info .phone p {
    margin: 5px 0;
}
.min-text{
    max-width: 320px;
}
.status,.locations,.employment-type,.license,.start-date{
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    min-width: 300px;
    row-gap: 1em;
}
.status input{
    width:fit-content;
}
.status label{
    width: 90%;
}
.status div{
    width: 100%;
    display: flex;
}
.locations div{
    width: 50%;
    display: flex;
    align-items: center;
}
.employment-type div,.license div{
    width: 100%;
    display: flex;
}
.start-date div{
    width: 50%;
}
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
input[type="checkbox"] {
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #DBCED0;
    vertical-align: -2.5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 20px;
    margin-right: 14px;
}

input[type="checkbox"]:checked:before {
    position: absolute;
    top: 2px;
    left: 6px;
    transform: rotate(50deg);
    width: 6px;
    height: 12px;
    border-right: 2px solid #A76168;
    border-bottom: 2px solid #A76168;
    content: '';
}
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #DBCED0;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    margin-right: 12px;
    position: relative;
    padding: 0;
  }
  input[type="radio"]:checked {
    border-color: #A76168;
  }
  input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: #A76168;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  ::placeholder {
    color: #CEA7AB;
  }
  .youkou-a{
    border: #A76168 1px solid;
    padding: .5em 1em;
    margin: 0 auto;
    display: block;
    width: fit-content;
    margin-bottom: 2em;
  }
  .youkou-a:hover{
    background-color: #A76168;
    color: #fff;
  }
  @media screen and (max-width: 600px) {
    .form-group {
        gap: 8px;
    }
    .form-group label {
        margin-right: 0%;
    }
    .privacy-policy{
        flex-wrap: nowrap;
        align-items: baseline;
    }
    .youkou img {
        padding: 0 5%;
    }
    .yukyu {
        margin-top: 0px;
    }
    .threePoint {
        margin-top: 64px;
    }
  }

  :where(:focus-visible) {
    outline: 3px solid #ECBDC1;
    outline-offset: 1px;
    }