@charset "utf-8";


/* メインコンテンツ
------------------------------------------------------------ */
.section{
  padding: 8em 0;
  background: #fff;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .section{padding: 4em 0;}
}
@media screen and (max-width: 375px) {}

 /*----- 一覧 -----*/
.archive #section01.section{  padding: 8em 0 0;}
.archive .service-txt .service-in{
  text-align: center;
  margin: auto;
  letter-spacing: 0.2em;
  font-size: 1.1em;
}
.archive .service-box{
  position: relative;
  width: 100%;
  padding-left: 8%;
  margin-bottom: 10%;
}
.archive .service-box:nth-child(2){
  position: relative;
  width: 100%;
  padding-left: 0%;
  padding-right: 8%;
  margin-bottom: 10%;

}
.archive .service-box a{transition: 0.4s;}
.archive .service-box a .imgarea{
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 1 / 0.45;
  border-radius: 20px 0px 0px 20px;
}
.archive .service-box:nth-child(2) a .imgarea{border-radius: 0px 20px 20px 0px;}
.archive .service-box a .imgarea img{
  transition: transform .5s ease;
}
.archive .service-box a:hover .imgarea img{transform: scale(1.06);}
.archive .service-box a .imgarea h2{
  background: #fff;
  padding: 0.5em 2em;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.5em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  letter-spacing: 0.2em;
  z-index: 2;
}
.archive .service-box:nth-child(2) a .imgarea h2{
  left: auto;
  right: 0;
}
.archive .service-box a:hover .imgarea h2{
    color: #ff6000;
  }
.archive .service-box a .txtarea{
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  margin: 1em auto 0;
}
.archive .service-box:nth-child(2) a .txtarea{
  justify-content:  flex-end;
}
.archive .service-box a .txtarea p{
  width: 85%;
  padding-left: 4%;
}
.archive .service-box:nth-child(2) a .txtarea p{
  padding-left: 0%;
  padding-right: 4%;
}
.archive .service-box a .txtarea .btn03{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  border-radius: 50px;
  top: 3%;
  right: 3%;
  margin: auto;
  background: linear-gradient(to right, #ff934c, #fc686f);
  transition: all 0.3s ease-in-out;
}
.archive .service-box:nth-child(2) a .txtarea .btn03{
  right: auto;
  left: 3%;
}
.archive .service-box a .txtarea .btn03::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../img/common/arr-r02.png) 50% 50% no-repeat;
    background-size: contain;
	}
.archive .service-box a:hover .txtarea .btn03{background: #f1f1f1;}
.archive .service-box a:hover .txtarea .btn03:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/common/arr-r03.png) 50% 50% no-repeat;
  background-size: contain;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .archive #section01.section {padding: 4em 0 0;}
  .archive .service-txt .service-in {
    letter-spacing: 0.1em;
    font-size: 0.9em;
    width: 95%;
}
.archive .service-box {
    width: 100%;
    padding-left: 0;
    margin-bottom: 5%;
}
.archive .service-box:nth-child(2) {
    padding-left: 0%;
    padding-right: 0;
    margin-bottom: 5%;
}
.archive .service-box a .imgarea {
    margin: 0;
    aspect-ratio: 1 / 0.6;
    border-radius: 0;
}

.archive .service-box a .imgarea h2 {
    padding: 0.5em 1em;
    font-size: 1em;
}
.archive .service-box a .txtarea p {
    width: 84%;
    font-size: 0.9em;
}
.archive .service-box:nth-child(2) a .txtarea p {width: 83%;}
.archive .service-box a .txtarea .btn03 {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    top: 30%;
}

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

 /*----- 詳細 -----*/
.detail #section01.section{padding: 20em 0 2em;}
.detail .ttlarea-in {
    position: relative;
    width: 100%;
    padding-left: 8%;
}
.detail .ttlarea-in img {border-radius: 20px 0px 0px 20px;}
.detail .ttlarea-in h3 {
    background: #fff;
    padding: 0.5em 2em;
    position: absolute;
    bottom: 0;
    left: 8%;
    font-size: 1.5em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    letter-spacing: 0.2em;
    z-index: 2;
}
.detail .service-main .txt{
  text-align: center;
  margin: 6em auto;
  letter-spacing: 0.2em;
  font-size: 1.1em;
}
.detail #section02{padding: 2em 0 6em;}
.detail #section02 ul{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.detail #section02 ul li{
  width: 49%;
}
.detail #section02 ul li img{border-radius: 20px;}
.detail #section03.section{padding: 2em 0;}
.detail #section03 .txt{
  margin: 2em 1em;
  line-height: 2.5em;
}
.detail #section03 .txt h4{
  margin: 0.5em auto;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  color: #FC6E68;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
}
.detail #section04.section{
  padding: 5% 5% 5% 0;
  position: relative;
  width: 100%;
}
.detail #section04 .bg-g{
min-height: 20rem;
padding: 1em 2em;
background: #eee;
border-radius: 0 20px 20px 0;
}
.detail #section04 h3{
font-size: 1.2em;
font-weight: 900;
font-family: "M PLUS 1", sans-serif;
letter-spacing: 0.2em;
}
.detail .service-list-area{ padding: 3% 0 3% 3%;}
.detail .service-list-area dl{margin-bottom: 2%;}
.detail .service-list-area dl dt{
  position: relative;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding-left: 2.3%;
}
.detail .service-list-area dl dt::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 15px;
  background: linear-gradient(to right, #ff934c, #fc686f);
  border-radius: 50%;
  transform: translateY(-50%);
}
.detail .service-list-area dl dd{
  padding-left: 2.3%;
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail #section01.section {  padding: 4em 0 2em;}
  .detail .ttlarea-in h3 {
    padding: 0.5em 1em;
    bottom: -10%;
    left: 0%;
    font-size: 1.2em;
}
.detail .service-main .txt {
    margin: 3em auto;
    font-size: 0.9em;
}
.detail #section02 {padding: 0em 0 3em;}
.detail #section02 ul li {width: 100%;}
.detail #section02 ul li:first-child{ margin-bottom: 5%;}
.detail #section03 .txt {
    margin: 1em 0em;
    line-height: 2em;
    font-size: 0.9em;
    letter-spacing: 0.1em;
}
.detail #section04.section {padding: 0% 5% 0% 0;}
.detail #section04 .bg-g {padding: 1em;}
.detail .service-list-area dl {margin-bottom: 5%;}
.detail .service-list-area dl dt {padding-left: 7%;}
.detail .service-list-area dl dd {
    padding-left: 7%;
    font-size: 0.9em;
}
}
@media screen and (max-width: 375px) {}

.detail #section05 .s-faq-area h3{
  font-size: 1.2em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  letter-spacing: 0.2em;
  }
.detail #section05 .s-faq-area-in{ margin: 3em auto;}
.detail .details-summary {
      position: relative;
      display: block;
      padding: 20px;
      font-weight: bold;
      border-bottom: 1px solid #aaa;
      &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
        .qbox{
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
    .qbox p{width: 72%;}
    .btn {
      position: absolute;
          top: 40%;
          right: 5%;
          width: 22px;
          height: 22px;
          transform-origin: center center;
          transition-duration: 0.2s;

          &:before,
          &:after {
              content: "";
              background-color: #209cff;
              border-radius: 10px;
              width: 22px;
              height: 2px;
              position: absolute;
              top: 10px;
              left: 0;
              transform-origin: center center;
          }
          &:before {
              width: 2px;
              height: 22px;
              top: 0;
              left: 10px;
          }
      }
    &.is-active {
      .btn {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        &:before {
                content: none;
            }
      }
      }
  }
  .detail .details-summary::-webkit-details-marker {
    display: none;
  }
  .detail .details-content {
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: rgb(248, 248, 248);
  border-radius: 20px;
  margin-top: 1em;
    p {
      width: 88%;
      margin: 0 0 20px;
      &:last-of-type {
        margin: 0 0 0;
      }
    }
  }


  .detail .qicon{
    color: #ffffff;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    font-size: 1.5em;
    vertical-align: middle;
    margin-right: 1em;
    border-radius: 50%;
    background: linear-gradient(to right, #209cff, #68e0cf);
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .detail .aicon{
    color: #fff;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    font-size: 1.5em;
    vertical-align: middle;
    margin-right: 1em;
    border-radius: 50%;
    background: linear-gradient(to right, #ff934c, #fc686f);
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  @media screen and (min-width:521px) and ( max-width:1024px) {}
  @media screen and (max-width: 520px) {
    .detail #section05 .s-faq-area-in {margin: 2em auto;}
.detail .details-summary {
    width: 98%;
    padding: 4% 1%;
}
.detail .qicon {
    margin-right: 0.5em;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
}
detail .qbox p {
        width: 72%;
        font-size: 0.9em;
        line-height: 1.3em;
    }
    .detail .btn {
          top: 36%;
          right: 3%;
    }
    .detail .aicon {
    margin-right: 0.5em;
    width: 1.5em;
    height: 1.5em;
}
    .detail .details-content p {
        width: 80%;
        margin: 0 0 20px;
        font-size: 0.9em;
    }
}
  @media screen and (max-width: 375px) {}
  .detail #section06.section{padding: 2em 0 20em;}
  .detail .service-link ul{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .detail .service-link ul li{
    width: 49%;
    border-radius: 12px;
  }
  .detail .service-link ul li a {
    position: relative;
    display: block;
}
  .detail .service-link ul li a figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 30px;
    aspect-ratio: 1 / 0.7;
  }
  .detail .service-link ul li a figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}
  .detail .service-link ul li a:hover figure img{transform: scale(1.06);}

  .detail .service-link ul li a figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 50%;
    background: rgb(255 255 255 / 90%);
    padding: 0.5em 1em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    transition: all 0.4s ease-in-out;
}
  .detail .service-link ul li a figcaption span{
    font-size: 1.3em;
    letter-spacing: 0.2em;
  }
  .detail .service-link ul li a:hover figcaption{ color:#ff6000;}

  @media screen and (min-width:521px) and ( max-width:1024px) {}
  @media screen and (max-width: 520px) {
    .detail #section06.section { padding: 0em 0 5em;}
    .detail .service-link ul li {width: 49%;}
    .detail .service-link ul li a figure {border-radius: 10px;}
    .detail .service-link ul li a figcaption {
      width: 85%;
      font-size: 0.7em;
      padding: 0.5em;
    }
    .detail .service-link ul li a figcaption span {
    font-size: 1em;
    letter-spacing: 0;
  }

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