@charset "utf-8";

/* メインイメージ
------------------------------------------------------------ */
#mainimage {
  position: relative;
  width: 92%;
  text-align: right;
  margin-left: 8%;
  padding-top: 70px;
}
#mainimage img{
    border-radius: 0 0 0 50px;
}

#mainimage .main-logo{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: flex-start;
  top: 15%;
  left: 5%;
  text-align: left;
  color: #5d5d5d;
}
#mainimage .main-logo h3{
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: #fff;
  writing-mode: vertical-rl;
  padding: 0.5em 0.5em 0.5em 0;
}
#mainimage .main-logo h2{
  font-size: 3em;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: #fff;
  writing-mode: vertical-rl;
  padding: 0.2em 0em 0.2em 0.2em;
}

 /*-----画像-----*/
@media screen and (min-width:521px) and ( max-width:1024px) {
#mainimage .main-logo {top: 20%;}
#mainimage .main-logo h3 {font-size: 1.2em;}
#mainimage .main-logo h2 {font-size: 2em;}

}
@media screen and (max-width: 520px) {
  #mainimage {
    width: 95%;
    margin-left: 5%;
    padding-top: 76px;
}
#mainimage img {border-radius: 0 0 0 30px;}
#mainimage .main-logo {
    top: 30%;
}
#mainimage .main-logo h3 {
    font-size: 0.8em;
}
#mainimage .main-logo h2 {
    font-size: 1.2em;
}
}

/* section01
------------------------------------------------------------ */
.news {margin: 6em auto;}
.news .newsarea{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85%;
  margin-left: 10%;
  background: #f0f0f0;
  padding: 1em;
  border-radius: 15px;
}
.news .newsarea h2{
  width: 20%;
  color:#fd664d;
  letter-spacing: 0.1em;
}
.news .newsarea .list{ width: 80%;}
.news .newsarea dl{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    font-size: 0.9em;
}
.news .newsarea dt{ margin-right: 1.5em;}
.news .newsarea dd a{
    text-decoration: underline;
    transition: all 0.4s ease-in-out;
  }
.news .newsarea dd a:hover{
  color:#fd664d;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
  .news .newsarea {
    width: 90%;
    margin-left: 8%;
}

}
@media screen and (max-width: 520px) {
  .news { margin: 3em auto;}
  .news .newsarea {
    width: 90%;
    margin-left: 5%;
}
  .news .newsarea h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
}
.news .newsarea dl {
    width: 100%;
    font-size: 0.8em;
}
}

  /* section02
  ------------------------------------------------------------ */
  .concept h2{
    font-size: 2em;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1.4em;
  }
  .concept h2 span{display: block;}
  .concept .txtarea{
    text-align: center;
    margin: 2em auto;
    line-height: 4em;
    letter-spacing: 0.2em;
}
  .concept .txtarea .bg{
    background: url(../img/common/bg-logo.png) 50% 50% no-repeat;
    background-size: contain;
  }
  @media screen and (min-width:521px) and ( max-width:1024px) {
    .concept .txtarea {
    line-height: 3em;
    width: 95%;
}

  }
  @media screen and (max-width: 520px) {
    .concept h2 {
      width: 95%;
      margin: auto;
      font-size: 1.2em;
    }
    .concept .txtarea {
    text-align: center;
    margin: 2em auto;
    line-height: 2em;
    letter-spacing: 0.2em;
    font-size: 0.8em;
    width: 95%;
}
  }

  /* section03
  ------------------------------------------------------------ */
.reco {margin: 6em auto;}
.reco .bg-all{
  width: 100%;
  padding: 4em 0;
  background: url(../img/common/bg01.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.reco .recoarea{
  width: 50%;
  margin: auto;
  background: #ffffffbd;
  border-radius: 20px;
  text-align: center;
  padding: 2em 0 3em;
  box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.3);
}
.reco .recoarea h2{
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.3em;
}
.reco .recoarea ul{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 95%;
  margin: 3em auto 0;
}
.reco .recoarea ul li{
  list-style-type: disc;
  width: 40%;
  text-align: left;
  font-size: 0.9em;
  margin: 0 0 2em;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
  .reco .recoarea {
    width: 90%;
    padding: 2em 0;
}
.reco .recoarea ul {margin: 2em auto 0;}
}
@media screen and (max-width: 520px) {
  .reco .recoarea {
    width: 90%;
}
.reco .recoarea h2 {font-size: 1.2em;}
.reco .recoarea ul {
    width: 95%;
    margin: 2em auto 0;
}
.reco .recoarea ul li {
    width: 85%;
    font-size: 0.8em;
    margin: 0 0 2em;
}
}

/* section04
------------------------------------------------------------ */
.target .targetarea{
  position: relative;
  border: 6px solid;
  border-image: linear-gradient(to bottom, #fd644f 0%, #f28e26) 1;
  width: 50%;
  min-height: 250px;
  margin: auto;
}
.target .targetarea h2{
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  letter-spacing: 0.3em;
  font-weight: 500;
  font-size: 1.2em;
  width: 55%;
  text-align: center;
}
.target .targetarea ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.target .targetarea li{
  position: relative;
  padding-bottom: 3em;
}
.target .targetarea li:last-child{
  padding-bottom: 0;
}
.target .targetarea li::before{
  content: "";
  position: absolute;
  display: block;
  top: -9%;
  left: -24%;
  width: 40px;
  height: 40px;
  background: url(../img/common/check_icon.png) 50% 50% no-repeat;
  background-size: contain;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
  .target .targetarea {
    width: 90%;
}
.target .targetarea h2{
  width: 65%;
}

}
@media screen and (max-width: 520px) {
  .target .targetarea {
    width: 90%;
    min-height: 200px;
    margin: auto;
}
.target .targetarea h2 {
    top: -7%;
    left: 50%;
    letter-spacing: 0.2em;
    font-size: 0.9em;
    width: 85%;
}
.target .targetarea ul {
    top: 45%;
    left: 55%;
    transform: translateY(-45%) translateX(-55%);
    width: 70%;
}
.target .targetarea li {
    padding-bottom: 2em;
    font-size: 0.8em;
}
.target .targetarea li::before {
    top: -1%;
    left: -16%;
    width: 25px;
    height: 25px;
}

}

/* section05
------------------------------------------------------------ */
.service .servicearea{
  width: 95%;
  margin: 3em auto;
}
.service .column-3 {
justify-content: space-between;
}
.service .column-3 .box{width: 32%;}
.service .box h3{
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}
.service .box .img{
  border: 5px solid #f28e26;
  border-radius: 20px;
  padding: 0.5em 1em;
}
.service .box .txt{ margin: 1em 1em 0;}
@media screen and (min-width:521px) and ( max-width:1024px) {
  .service .column-3 .box {
    width: 49%;
  margin-bottom: 1em;
}
.service .box .txt {
    margin: 1em 1em 0;
    font-size: 0.9em;
}
}
@media screen and (max-width: 520px) {
  .service .column-3 .box {
      width: 100%;
      margin-bottom: 3em;
  }
  .service .box .txt {
      font-size: 0.8em;
  }
}

/* section06
------------------------------------------------------------ */
.service02 .service02area{
  width: 95%;
  margin: 3em auto;
}
.service02 .column-3 {
justify-content: space-between;
}
.service02 .column-3 .box{
  position: relative;
  display: inline-block;
  width: 32%;
  min-height: 300px;
  background: #fff;
  text-align: center;
  padding: 0.5em 1em 2em;
  margin-bottom: 3em;
}
.service02 .column-3 .box::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  border: 5px solid transparent;
  background: linear-gradient(to bottom, #fd644f 50%, #f28e26);
  -webkit-mask: linear-gradient(to bottom, #fd644f 50%, #f28e26);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fd644f 0 0) padding-box, linear-gradient(#f28e26 0 0) border-box;
  mask-composite: exclude;
  }
  .service02 .box .number{
  font-size: 2.5em;
  font-weight: bold;
  color: #f59639;
  margin-bottom: 0.5em;
}
  .service02 .box h3{
    color: #f59639;
    line-height: 1.5em;
    margin-bottom: 1em;
  }
  .service02 .box .txt{ padding: 0 1.5em;}
  @media screen and (min-width:521px) and ( max-width:1024px) {
    .service02 .column-3 .box {
    width: 49%;
    min-height: 300px;
    margin-bottom: 3em;
}
.service02 .box h3 { min-height: 3em;}

}
  @media screen and (max-width: 520px) {
    .service02 .column-3 .box {
        width: 95%;
        min-height: 220px;
        padding: 0.5em 0.5em 1em;
        margin: 0 auto 1em;
    }
    .service02 .box .number {font-size: 2em;}
    .service02 .box h3 {
      margin-bottom: 1em;
      font-size: 0.9em;
  }
  .service02 .box .txt {
    padding: 0 1.5em;
    font-size: 0.8em;
}

}

  /* section07
  ------------------------------------------------------------ */

.recruit .recarea{
  padding: 4em 0;
  background: #f5f5f5;
}
.recruit .recbox{
  width: 80%;
  margin: 2em auto 0;
  background: #fff;
  padding: 1em 2em;
}
.recruit .recbox .box h3{
border-bottom: 1px solid #f59639;
padding: 1em;
margin-bottom: 1em;
}
.recruit .box-in{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.recruit .box-in .img{width: 40%;}
  .recruit .box-in .txt{
    width: 55%;
    margin-left: 5%;
  }
  .recruit .box-in .txt dl{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid #cccccc;
    padding: 1em;
}
  .recruit .box-in .txt dt{
    width: 40%;
    font-weight: bold;
  }
  .recruit .box-in .txt dd{width: 60%;}
  .recruit .txt-btn{text-align: right;}
  @media screen and (min-width:521px) and ( max-width:1024px) {
    .recruit .recbox {
    width: 95%;
    margin: 2em auto 0;
    padding: 1em 1em;
}
.recruit .box-in .txt dl {
    padding: 1em;
    font-size: 0.9em;
}
  }
  @media screen and (max-width: 520px) {
    .recruit .recarea {padding: 3em 0;}
    .recruit .recbox {
    width: 95%;
    padding: 1em 1em;
}
.recruit .box-in .img {width: 100%;}
.recruit .box-in .txt {
    width: 100%;
    margin: 1em auto 0;
    font-size: 0.8em;
}
.txt-btn a::before {
    left: -55%;
}
.txt-btn a:hover:before {
    left: -60%;
}
}

  /* section08
  ------------------------------------------------------------ */
.about .aboutbox{
  width: 80%;
  margin: 2em auto;
}
.about dl{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid #adadad;
  padding: 1em 1em 2em;
  margin-bottom: 1em;
  }
  .about dl dt{
      width: 30%;
      font-weight: bold;
  }
  .about dl dd{width: 70%;}
  .about .map{
    width: 100%;
    margin: 6em auto;
  }
  .about .map iframe{
    width: 100%;
    height: 400px;
  }
  .about .officearea{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
  }
  .about .officearea .txtbox{
    position: relative;
    width: 35%;
    border-radius: 20px;
  }
  .about .officearea .txtbox:before{
    content: "";
      position: absolute;
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      background: linear-gradient(to bottom, #fd644f 0%, #f28e26 100%);
      border-radius: 20px;
      z-index: -1;
  }
  .about .officearea .txtbox-in{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: #fff;
    padding: 2em;
  }
  .about .officearea .txtbox-in .ttl01{
    font-size: 1em;
    text-align: left;
    margin-bottom: 3em;
    font-weight: bold;
}
  .about .officearea .txtbox-in li{
    margin-bottom: 1em;
  }
  .about .officearea .txtbox-in li:last-child{
    margin-bottom: 0;
  }

  .about .officearea .o-map{
    width: 60%;
    margin-left: 5%;
  }
  .about .officearea .o-map iframe{
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
  .about .aboutbox {width: 90%;}
  .about .map {margin: 3em auto;}
  .about .officearea {
    width: 95%;
    margin: auto;
}
.about .officearea .txtbox {width: 40%;}
.about .officearea .txtbox-in {
    padding: 2em 1em;
}
.about .officearea .txtbox-in .ttl01 {
    font-size: 0.9em;
    margin-bottom: 2em;
}
.about .officearea .txtbox-in li {font-size: 0.9em;}
.about .officearea .o-map {
    width: 57%;
    margin-left: 3%;
}

}
@media screen and (max-width: 520px) {
  .about .aboutbox {width: 95%;}
  .about dl {
  padding: 1em 1em 1em;
  font-size: 0.8em;
}
.about .map {
  width: 100%;
  margin: 3em auto;
}
.about .map iframe {height: 300px;}
.about .officearea {
  width: 90%;
  margin: auto;
}
.about .officearea .txtbox {
  width: 100%;
}
.about .officearea .txtbox-in {
  padding: 1em;
}
.about .officearea .txtbox-in .ttl01 {
  margin-bottom: 2em;
}
.about .officearea .txtbox-in li {
  margin-bottom: 0.5em;
  font-size: 0.8em;
}
.about .officearea .o-map {
  width: 100%;
  margin: 2em auto 0;
}
.about .officearea .o-map iframe {
  border: 0;
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

}