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

.wpcf7-list-item{
    display: block;
}
/*hero area*/
.ex_hero_area{
    width: 100vw;
    height: calc(100vh - 90px);
    position: relative;
    padding-top: 90px;
    z-index: 1;
}
.ex_hero_area .img01 {
    position: absolute;
    left: 0;
    width: 100vw;
    top: 40px;
}
.ex_hero_area .img02 {
    position: absolute;
    top: 22vw;
    left: 7vw;
    width: 22vw;
    z-index: 2;
}   
.ex_hero_area .img03 {
    position: absolute;
    top: 15vw;
    left: 67vw;
    width: 25vw;
}
.ex_hero_area .img04 {
    position: absolute;
    top: 37vw;
    width: 5vw;
    left: 85vw;
}
.ex_hero_area .img06 {
    position: absolute;
    width: 23vw;
    left: 12vw;
    top: 23vw;
}
.ex_hero_area .img07{
    position: absolute;
    display: none;
}
.ex_hero_area .img08{
    position: absolute;
    display: none;
}
.ex_hero_area .img09 {
    width: 100vw;
}
   


/*experience01*/
.experience01{
    position: relative;
    padding-bottom: 100px;
    z-index: 1;
}
.experience01 p {
    color: white;
    text-align: center;
    letter-spacing: .2rem;
}

/*experience02*/
.experience02 ul {
    padding-top: 70px;
    justify-content: center;
}
.experience02 ul li {
    width: 30vw;
    background-color: #fff;
    border-radius: 45px;
    margin-left: 15px;
}
.experience02 ul li:first-child {
    margin-left: 0;
}
.experience02 ul li img {
    margin-top: -6rem;
}
.experience02 h4 {
    padding-top: 30px;
    padding-bottom: 20px;
    paddding-bottom: 100px;
    font-size: 35px;
    color: #0091D3;
}
.experience02 .pa-add {
    padding-top: 60px;
}

/*experience03*/
.experience03 ul li {
    text-align: center;
    color: white;
}
.experience03 ul li h4 {
    font-size: 37px;
    padding-bottom: 15px;
}
.experience03 ul li p {
    padding-bottom: 20px;
}
.experience03_box h4 {
    text-align: center;
    font-size: 37px;
    color: white;
}
.experience03_box {
    margin-top: 70px;
}
.experience03_box1 h4 {
    text-align: center;
    font-size: 37px;
    color: white;
}
.experience03_box1 {
    margin-top: 70px;
}
.experience03_box2 {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}

/*experience04*/
.experience04 {
    padding-top: 100px;
    padding-bottom: 100px;
    color: white;
}
.experience04 .headline-h3 span {
    width: 45%;
}
.experience04 h5 {
    text-align: center;
    font-size: 35px;
}
.experience04 h5 .br {
    display: none;
}
.experience04 .box01 {
    padding-top: 80px;
    display: flex;
}
.experience04 .box02 img {
    width: 9vw;
    margin: 0 auto;
}
.experience04 .box02 p {
    color: #707070;
    background-color: white;
    padding: 20px 50px;
    border-radius: 35px;
    letter-spacing: .2rem;
}
.experience04 .box02 p span {
    font-size: 20px;
}
.experience04 .box01 .p p {
    padding-bottom: 30px;
    padding-left: 30px;
}
.experience04 .img05 {
    width: 6vw;
    right: 0;
    bottom: 0;
}

/*experience05*/
.experience05 {
    padding-top: 100px;
    padding-bottom: 100px;
}
.experience05 dl dt {
    display: flex;
    align-items: flex-end;
    padding-top: 60px;
}
.experience05 dl dt img {
    width: 44px;
}
.experience05 dl dt p {
    font-size: 25px;
    color: white;
    font-weight: bold;
    line-height: 1;
    padding-left: 5px;
}
.experience05 dl dd {
    display: flex;
    align-items: flex-end;
    padding-left: 50px;
    padding-top: 30px;
}
.experience05 dl dd img {
    width: 38px;
}
.experience05 dl dd p {
    font-size: 20px;
    color: white;
    line-height: 1;
    padding-left: 5px;
}

/*experience_experience_contact02*/
.experience_contact02 {
    padding-top: 50px;
    padding-bottom: 100px;
}
.experience_contact02 h3 {
    font-size:84px;
    text-align: center;
    color: white;
    letter-spacing: 1rem;
}
.experience_contact02 form {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 30px;
}
.experience_contact02 form dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    color: white;
}
.experience_contact02 form dl dt {
    width: 25%;
    padding-top: 20px;
}
.experience_contact02 form dl dd {
    width: 75%;
    padding-top: 20px;
}
.experience_contact02 form dl dd p {
    padding-top: 8px;
}

/*ラジオボタンstart*/
.radio_box {
    display: flex;
}
.radio_box1 label {
  position: relative;
  cursor: pointer;
  padding-left: 40px;
    padding-right: 25px;
}

.radio_box1 label::before,
.radio_box1 label::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.radio_box1 label::before {
  background-color: #fff;
  border: 1px solid #F6E05E;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  left: 5px;
}

.radio_box1 label::after {
  background-color: #63B3ED;
  border-radius: 50%;
  opacity: 0;
  width: 18px;
  height: 18px;
  left: 10px
}

input:checked + label::after {
  opacity: 1;
}

.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}
/*ラジオボタンend*/

.experience_contact02 input[type="text"] {
    width: 80%;
}
.experience_contact02 input {
    border: 1px solid #F6E05E;
    border-radius: 8px;
    color: #707070;
}
.experience_contact02 select {
    border: 1px solid #F6E05E;
    border-radius: 8px;
}
.experience_contact02 textarea {
    border: 1px solid #F6E05E;
    border-radius: 8px;
}
.experience_contact02 textarea{
    width: 80%;
}
.experience_contact02 form .submit {
    margin-top: 50px;
    text-align: center;
}
.experience_contact02 form .submit .btn01 {
    outline-color: white;
    padding-left: 100px;
    padding-right: 100px;
    border-radius: 0;
}

@media screen and (max-width:767px){

    .ex_hero_area {
        width: 100vw;
        height: 500px;
        position: relative;
        padding-top: 60px;
        z-index: 1;
    }
    .cloud_area {
        position: absolute;
        width: 70%;
        top: 50px;
        right: 0;
    }
    .cloud_area ul {
        display: flex;
        margin-bottom: 0.3rem;
    }
    .cloud_area li {
        margin-left: 0.3rem;
    }
    .ex_hero_area .img01 {
        position: absolute;
        left: 0;
        width: 100%;
        top: 50px;
    }
    .ex_hero_area .img02 {
        position: absolute;
        top: 13%;
        left: 0%;
        width: 36%;
        z-index: 2;
    }
    .ex_hero_area .img03 {
        position: absolute;
        top: 12%;
        left: unset;
        width: 45%;
        z-index: 10;
        right: 0;
    }
    .ex_hero_area .img04 {
        position: absolute;
        top: 33%;
        width: 9%;
        left: unset;
        right: 3%;
    }
    .ex_hero_area .img09 {
        position: absolute;
        width: 100%;
        top: 60px;
        left: unset;
    }
    
    .experience02 {
        padding-bottom: 50px;
    }
    .experience02 ul {
        text-align: center;
        padding-top: 0;
    }
    .experience02 ul li,.experience02 ul li:first-child {
        width: 80%;
        margin: 0 auto;
        margin-top: 50px;
    }
    .experience02 h4 {
        padding-top: 30px;
        padding-bottom: 20px;
        paddding-bottom: 100px;
        font-size: 18px;
    }
    .experience02 ul li img {
        margin-top: 2rem;
    }
    .experience02 .pa-add {
        padding-top: 30px;
    }
    .experience02 .headline-h3 span {
        width: 90%;
    }
    /*experience03*/
    .experience03 ul {
        display: block;
    }
    .experience03 ul li h4 {
        font-size: 18px;
        padding-bottom: 15px;
    }
    .experience03 ul li p {
        padding-bottom: 10px;
    }
    .experience03_box h4 {
        font-size: 18px;
    }
    .experience03_box {
        margin-top: 70px;
    }
    .experience03_box1 h4 {
        font-size: 18px;
    }
    .experience03_box1 ul {
        display: flex;
        margin-top: 30px;
    }
    .experience03_box1 ul li {
        padding: 5px;
    }
    .experience03_box2 {
        text-align: center;
        margin-top: 60px;
        margin-bottom: 30px;
    }
    .experience04 {
        padding-bottom: 50px;
    }
    .experience04 h5 {
        font-size: 18px;
    }
    .experience04 h5 .br {
        display: block;
    }
    .experience04 .box01 {
        padding-top: 30px;
        display: block;
        text-align: center;
    }
    .experience04 .box02 img {
        width: 60%;
        margin: 0 auto;
    }
    .experience04 .box02 p {
        padding: 15px 0px;
        border-radius: 35px;
        letter-spacing: .2rem;
        text-align: center;
        margin-bottom: 30px;
    }
    .experience04 .box01 .p p {
        text-align: center;
        padding-bottom: 30px;
        padding-left: 0px;
    }
    .experience04 .img05 {
        width: 50%;
        position: static;
        right: 50%;
        padding-top: 30px;
    }
    
    /*experience05*/
    .experience05 dl dt {
        padding-top: 30px;
    }
    .experience05 dl dt img {
        width: 32px;
    }
    .experience05 dl dt {
        align-items: center;
    }
    .experience05 dl dt p {
        font-size: 18px;
        color: white;
        font-weight: bold;
        line-height: 25px;
        padding-left: 5px;
    }
    .experience05 dl dd {
        display: flex;
        align-items: center;
        padding-left: 50px;
        padding-top: 30px;
    }
    .experience05 dl dd img {
        width: 27px;
    }
    .experience05 dl dd p {
        font-size: 14px;
        color: white;
        line-height: 20px;
        padding-left: 5px;
    }
    
    /*experience_contact02*/
    .experience_contact02 {
        padding-top: 0px;
    }
    .experience_contact02 h3 {
        font-size:46px;
    }
    .experience_contact02 form {
        max-width: 90%;
        margin: 0 auto;
        margin-top: 30px;
    }
    .experience_contact02 form dl {
        display: block;
    }
    .experience_contact02 form dl dt {
        width: 100%;
        text-align: center;
        padding-top: 30px;
    }
    .experience_contact02 form dl dd {
        text-align: center;
        width: 100%;
        padding-top: 15px;
    }
    .experience_contact02 form dl dd p {
        padding-top: 8px;
        text-align: left;
    }
    .experience_contact02 input[type="text"] {
        width: 100%;
    }
    .experience_contact02 textarea{
        width: 100%;
    }
    /*ラジオボタンstart*/
    .radio_box {
        display: block;
        text-align: left;
    }
    .radio_box1 {
        margin-bottom: 15px;
    }
    .radio_box1 label {
      position: relative;
      cursor: pointer;
      padding-left: 40px;
        padding-right: 25px;
    }

    .radio_box1 label::before,
    .radio_box1 label::after {
      content: "";
      display: block; 
      border-radius: 50%;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
    }

    .radio_box1 label::before {
      background-color: #fff;
      border: 1px solid #F6E05E;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      left: 5px;
    }

    .radio_box1 label::after {
      background-color: #63B3ED;
      border-radius: 50%;
      opacity: 0;
      width: 18px;
      height: 18px;
      left: 10px
    }

    input:checked + label::after {
      opacity: 1;
    }

    .visually-hidden {
     position: absolute;
     white-space: nowrap;
     border: 0;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     overflow: hidden;
     height: 1px;
     width: 1px;
     margin: -1px;
     padding: 0;
    }
    /*ラジオボタンend*/
}