@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 .Area-in{
  background: #eee;
  margin: auto;
  width: 100%;
  padding: 5%;
}
.archive .Area-in .a-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.archive .Area-in .a-list .a-list-card{
  width: 32%;
  margin-bottom: 4%;
}
.archive .Area-in .a-list .a-list-card a{
display: block;
padding: 1.8em 0.8em;
background: #fff;
border-radius: 20px;
transition: all 0.4s ease-in-out;
}
.archive .Area-in .a-list .a-list-card a figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 1 / 0.85;
}
.archive .Area-in .a-list .a-list-card a figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.archive .Area-in .a-list .a-list-card a:hover figure img {
    transform: scale(1.06);
}
.archive .Area-in .a-list .a-list-card a figcaption {
    margin-top: 0.5em;
    margin-left: 0.5em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    letter-spacing: 0.1em;
    transition: all 0.4s ease-in-out;
}
.archive .Area-in .a-list .a-list-card a:hover figcaption{
color: #ff6000;
}


@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
.archive .Area-in {padding: 10% 2%;}
.archive .Area-in .a-list .a-list-card {
    width: 49%;
    margin-bottom: 5%;
}
.archive .Area-in .a-list .a-list-card a{ border-radius: 12px;}
.archive .Area-in .a-list .a-list-card a figcaption { font-size: 0.8em;}

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

 /*-----お知らせ/詳細-----*/
.detail #section01{padding: 8em 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 #section01 .txt{
  margin: 6em 4em;
  line-height: 2em;
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail .ttlarea-in {padding-left: 0;}
  .detail .ttlarea-in img {border-radius: 0;}
  .detail .ttlarea-in h3 {
    padding: 0.2em 0.5em;
    bottom: 0;
    left: 0;
    font-size: 1.5em;
}
.detail #section01 { padding: 6em 0 2em;}
.detail #section01 .txt {
    margin: 4em 0em 0;
    line-height: 2em;
    font-size: 0.9em;
}
}
@media screen and (max-width: 375px) {}
.detail #section02{ padding: 3em 0;}
.detail #section02 h3{
    font-size: 1.2em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    letter-spacing: 0.2em;
  }
.detail #section02 .point-area{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3em 0;
}
.detail #section02 .point-area dl{width: 32%;}
.detail #section02 .point-area dt{position: relative;}

.detail #section02 .point-area dl:first-child dt:before{
  content: "1";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50px;
  top: -10%;
  left: -3%;
  margin: auto;
  font-size: 2em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  color: #fff;
  background: linear-gradient(to right, #ff934c, #fc686f);
}
.detail #section02 .point-area dl:nth-child(2) dt:before{
  content: "2";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50px;
  top: -10%;
  left: -3%;
  margin: auto;
  font-size: 2em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  color: #fff;
  background: linear-gradient(to right, #ff934c, #fc686f);
}
.detail #section02 .point-area dl:nth-child(3) dt:before{
  content: "3";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50px;
  top: -10%;
  left: -3%;
  margin: auto;
  font-size: 2em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  color: #fff;
  background: linear-gradient(to right, #ff934c, #fc686f);
}
.detail #section02 .point-area dt img{ border-radius: 12px;}
.detail #section02 .point-area dd{ padding: 0.5em;}
.detail #section02 .point-area dd h4{
  margin: 0 auto 0.5em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  letter-spacing: 0.1em;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail #section02 {padding: 3em 0 0;}
  .detail #section02 h3 {
     font-size: 1.1em;
     letter-spacing: 0.1em;
  }
  .detail #section02 .point-area dl {
    width: 100%;
    margin-bottom: 3em;
  }
  .detail #section02 .point-area dl:last-child{
    margin-bottom: 0em;
  }
  .detail #section02 .point-area dt {
    width: 95%;
    margin: auto;
}
.detail #section02 .point-area dl:first-child dt:before,
.detail #section02 .point-area dl:nth-child(2) dt:before,
.detail #section02 .point-area dl:nth-child(3) dt:before{
    top: -12%;
    left: -2%;
}

}
@media screen and (max-width: 375px) {}
.detail #section03{ padding: 2em 0;}
.detail #section03 .security-needs{
  position: relative;
  width: 100%;
  padding-right: 5%;
  }
.detail #section03 .security-needs-in{
  min-height: 20rem;
  padding: 1em 2em;
  background: #eee;
  border-radius: 0 20px 20px 0;
}
.detail #section03 .ttl03{font-size: 0.9em;}
.detail #section03 .txt{
  margin: 1em 2em;
  line-height: 2.5em;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail #section03 .security-needs {padding-right: 0;}
  .detail #section03 .security-needs-in {
    border-radius: 0;
    padding: 1em;
  }
  .detail #section03 .txt {
    margin: 1em 0em;
    line-height: 2.5em;
    font-size: 0.9em;
}

}
@media screen and (max-width: 375px) {}
.detail #section04{ padding: 2em 0;}
.detail #section04 h3 {
    font-size: 1.2em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    letter-spacing: 0.2em;
}
.detail #section04 .service-area ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 3em 0;
}
.detail #section04 .service-area ul li {
  width: 32%;
}
.detail #section04 .service-area a{
  position: relative;
  display: block;
}
.detail #section04 .service-area figure{margin: auto;}
.detail #section04 .service-area figure img{
  border-radius: 12px;
  transition: all 0.4s ease-in-out;
}
.detail #section04 .service-area a:hover figure img{opacity: 0.7;}
.detail #section04 .service-area figcaption{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(255 255 255 / 90%);
  padding: 0.5em 1em;
  font-weight: 900;
  font-family: "M PLUS 1", sans-serif;
  letter-spacing: 0.2em;
  transition: all 0.4s ease-in-out;
}
.detail #section04 .service-area a:hover figcaption{
  color: #fff;
  background:  #fc6a6e;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail #section04 h3 {
    font-size: 1.1em;
    letter-spacing: 0.1em;
}
.detail #section04 .service-area ul li {
    width: 100%;
    margin-bottom: 2em;
}
.detail #section04 .service-area figcaption {
    padding: 0.5em 1em;
    width: 80%;
}

}
@media screen and (max-width: 375px) {}
  .detail #section05{ padding: 2em 0 8em;}
  .detail #section05 .bg-g {
      position: relative;
      background: #efefef;
      width: 95%;
      margin-left: 5%;
      padding: 3% 0 3% 2%;
      border-radius: 20px 0 0 20px;
  }
  .detail #section05 .ttl03 {
    position: absolute;
    width: 50%;
    top: 2%;
    left: 2%;
}
  .detail #section05 .swiper-2 {
    width: 90%;
    margin-right: 0;
    overflow: hidden;
}
.detail #section05 .swiper-wrapper{
   margin: 10% 0 3% 2%;
 }
 .detail #section05 .swiper-2 .swiper-slide {
   height: auto;
}
 .detail #section05 .swiper-2 .swiper-slide a{
   display: block;
   padding: 1.8em 0.8em;
   background: #fff;
   border-radius: 20px;
   transition: 0.4s;
 }
 .detail #section05 .swiper-2 .swiper-slide a:hover{
    color:#ff6000;
   background: rgb(255 255 255 / 50%);
 }
 .detail #section05 .swiper-2 .swiper-slide a figure{
   position: relative;
   overflow: hidden;
   margin: 0;
   aspect-ratio: 1 / 0.7;
 }
 .detail #section05 .swiper-2 .swiper-slide a figure img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.detail #section05 .swiper-2 .swiper-slide a:hover figure img{transform: scale(1.06);}
.detail #section05 .swiper-2 .swiper-slide a figcaption{
   margin-top: 0.5em;
   font-weight: 900;
   font-family: "M PLUS 1", sans-serif;
   letter-spacing: 0.1em;
 }
.detail #section05 .swiper-2 .swiper-slide a figcaption .time{
 font-weight: normal;
 letter-spacing: 0em;
 font-size: 0.8em;
 display: block;
}
.detail #section05 .swiper-2 .swiper-slide a figcaption .cate{
 font-size: 0.8em;
 background: #ff6000;
 padding: 0.5em 0.8em;
 color: #fff;
 letter-spacing: 0;
 border-radius: 5px;
 margin: 0.5em auto;
 display: inline-block;
 }
.detail #section05 .swiper-2 .swiper-slide a figcaption .ttl{
display: block;
}
.detail #section05 .swiper-2 .swiper-slide a:hover figcaption .ttl{
  color:#ff6000;
}
 .detail #section05 .slide-nav{
   position: absolute;
   top: 1%;
   right: 3%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
 .detail #section05 .slide-nav .swiper-button-prev,
 .detail #section05 .slide-nav .swiper-button-next{
   width: 3em;
   height: 3em;
   background: #fff;
   border-radius: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: 0.4s;
 }
.detail #section05 .slide-nav .swiper-button-prev:hover,
.detail #section05 .slide-nav .swiper-button-next:hover{
 background: linear-gradient(to right, #ff934c, #fc686f);
 transition: 0.4s;
}
 .detail #section05 .slide-nav .swiper-button-next{ margin-left: 1em;}
 .detail #section05 .swiper-button-prev svg {
 transform: rotate(180deg);
 transition: 0.4s;
}
 .detail #section05 .swiper-button-next svg {
   transform: rotate(0deg);
   transition: 0.4s;
 }
 .detail #section05 .slide-nav .swiper-button-prev:hover svg,
 .detail #section05 .slide-nav .swiper-button-next:hover svg{
   color: #fff;
 }
 .detail #section05 .slide-nav .btn01{ margin-left: 2em;}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail #section05 {padding: 2em 0 0em;}
  .detail #section05 .ttl03 {width: 95%;}
  .detail #section05 .swiper-wrapper { margin: 45% 0 6% 2%;}
  .detail #section05 .slide-nav {
   top: 16%;
   right: 4%;
  }
  .detail #section05 .slide-nav .swiper-button-next { margin-left: 0.5em;}
  .detail #section05 .slide-nav .btn01 {margin-left: 1em;}
}
@media screen and (max-width: 375px) {}
.detail #area-list .ttl03 {
      font-size: 0.9em;
  }
.detail #area-list .Area-in {
      margin: auto;
      width: 100%;
      padding: 3% 1%;
  }

.detail #area-list .Area-in .a-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}
.detail #area-list .Area-in .a-list .a-list-card{
  width: 19%;
  margin-right: 1%;
}
.detail #area-list .Area-in .a-list .a-list-card:last-child{
    margin-right: 0%;
}
.detail #area-list .Area-in .a-list .a-list-card a{
display: block;
padding: 1.8em 0.8em;
background: #f4f4f4;
border-radius: 20px;
transition: all 0.4s ease-in-out;
}
.detail #area-list .Area-in .a-list .a-list-card a figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 1 / 0.85;
}
.detail #area-list .Area-in .a-list .a-list-card a figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.detail #area-list .Area-in .a-list .a-list-card a:hover figure img {
    transform: scale(1.06);
}
.detail #area-list .Area-in .a-list .a-list-card a figcaption {
    margin-top: 0.5em;
    margin-left: 0.5em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
    letter-spacing: 0.1em;
    transition: all 0.4s ease-in-out;
}
.detail #area-list .Area-in .a-list .a-list-card a:hover figcaption{
color: #ff6000;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
  .detail #area-list .Area-in {padding: 5% 0%;}
  .detail #area-list .Area-in .a-list .a-list-card {
    width: 49%;
    margin-right: 1%;
    margin-bottom: 2%;
}
.detail #area-list .Area-in .a-list .a-list-card:nth-child(2n) { margin-right: 0%;}
.detail #area-list .Area-in .a-list .a-list-card a {
    padding: 1em 0.5em;
    border-radius: 10px;
}
.detail #area-list .Area-in .a-list .a-list-card a figcaption { font-size: 0.8em;}

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