/* ----------------------------------------------------------------------------------------------------
*  kazoku-sou.css
* --------------------------------------------------------------------------------------------------*/
body {
  min-width: inherit;
}

/* ------------------------------
  page-ttl_wrap
------------------------------ */
.page-ttl_wrap {
  margin-bottom: 0;
  background: url("../img/kazoku-sou/page-img.jpg") no-repeat center center;
}

/* ------------------------------
  sec-mv_wrap
------------------------------ */
.sec-mv_wrap {
  /*
    position: relative;
    height: 893px;
    padding-bottom: 165px;
  //  background: url(../img/kazoku-sou/mv.png) no-repeat center 0 / 100% auto;
    @media screen and (max-width: 767px) {
  //    height: 446px;
      height: 55vw;
      padding-bottom: 82px;
    }
  */
  position: relative;
  width: 100%;
  height: auto;
  min-height: 66vw;
}
@media screen and (max-width: 767px) {
  .sec-mv_wrap {
    margin-bottom: 8vw;
    min-height: 60vw;
  }
}
.sec-mv_wrap .mv {
  width: 100%;
}
.sec-mv_wrap .mv img {
  width: 100%;
  height: auto;
  display: block;
}
.sec-mv_wrap .txt {
  position: absolute;
  padding-top: 5vw;
  width: 16%;
  max-width: 253px;
  z-index: 2;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .sec-mv_wrap .txt {
    max-width: 126px;
  }
}
.sec-mv_wrap .txt img {
  width: 100%;
  height: auto;
}
.sec-mv_wrap .circle_wrap {
  position: absolute;
  width: 100%;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .sec-mv_wrap .circle_wrap {
    bottom: -10vw;
  }
}
.sec-mv_wrap .circle_wrap .circle_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 50px;
}
@media screen and (max-width: 767px) {
  .sec-mv_wrap .circle_wrap .circle_inner {
    gap: 0 25px;
  }
}
@media screen and (max-width: 500px) {
  .sec-mv_wrap .circle_wrap .circle_inner {
    gap: 0 20px;
  }
}
.sec-mv_wrap .circle_wrap .circle_inner .circlebox {
  width: 22%;
  max-width: 356px;
  aspect-ratio: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px 0;
  background: url(../img/kazoku-sou/circle_bg.png) no-repeat center center/100% auto;
}
@media screen and (max-width: 1286px) {
  .sec-mv_wrap .circle_wrap .circle_inner .circlebox {
    gap: 0.5vw 0;
  }
}
@media screen and (max-width: 767px) {
  .sec-mv_wrap .circle_wrap .circle_inner .circlebox {
    width: 25%;
    gap: 1vw 0;
  }
}
.sec-mv_wrap .circle_wrap .circle_inner .circlebox .ico {
  width: auto;
  height: 4.8vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /*
            @media screen and (max-width: 767px) {
              height: 34px;
            }
            @media screen and (max-width: 500px) {
              height: 26px;
            }
  */
}
.sec-mv_wrap .circle_wrap .circle_inner .circlebox .ico img {
  width: auto;
  height: 100%;
}
.sec-mv_wrap .circle_wrap .circle_inner .circlebox .circle_txt {
  padding-top: 0;
  width: 100%;
  color: #fff;
  font-size: 2.25vw;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 84px;
}
@media screen and (max-width: 767px) {
  .sec-mv_wrap .circle_wrap .circle_inner .circlebox .circle_txt {
    height: 54px;
  }
}
@media screen and (max-width: 500px) {
  .sec-mv_wrap .circle_wrap .circle_inner .circlebox .circle_txt {
    height: 34px;
  }
}

/* ------------------------------
  .sec-head
------------------------------ */
.sec-head {
  padding-top: 120px;
}
.sec-head .logo_tuyama {
  margin: 0 auto 100px;
  width: 37%;
  max-width: 592px;
}
@media screen and (max-width: 767px) {
  .sec-head .logo_tuyama {
    width: 100%;
    max-width: 296px;
  }
}
.sec-head .logo_tuyama img {
  width: 100%;
  height: auto;
}
.sec-head .text {
  margin-bottom: 80px;
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec-head .text {
    margin-bottom: 40px;
    font-size: 5.778vw;
    letter-spacing: 0.05em;
  }
}
.sec-head .sec-head_inner {
  position: relative;
}
.sec-head .sec-head_inner::before {
  position: absolute;
  content: "";
  margin: 0 auto;
  width: 1038px;
  height: 851px;
  background: #D8CDE4;
  border-radius: 50%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .sec-head .sec-head_inner::before {
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  .sec-head .sec-head_inner::before {
    height: 420px;
  }
}
.sec-head .sec-head_inner h2 {
  margin: 0 auto 44px;
  padding-top: 95px;
  color: #5E318E;
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec-head .sec-head_inner h2 {
    margin: 0 auto 22px;
    padding-top: 48px;
    font-size: 9vw;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
}
.sec-head .sec-head_inner .pic {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
}
.sec-head .sec-head_inner .pic img {
  width: 33.3333333333%;
  height: auto;
  font-size: 0;
}

/* ------------------------------

------------------------------ */
.sec-ttl {
  text-align: center;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.25;
  margin-bottom: 30px;
}

.img {
  text-align: center;
  margin: 0 auto 30px auto;
}

.text {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.875;
}

@media screen and (max-width: 767px) {
  .sec-ttl {
    font-size: 5.778vw;
    margin-bottom: 4.444vw;
  }
  .img {
    margin: 0 auto 4.444vw auto;
  }
  .text {
    text-align: left;
    font-size: 3.556vw;
  }
}
/* ------------------------------
  sec01
------------------------------ */
.sec01 {
  padding-top: 90px;
  padding-bottom: 120px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #D8CDE4;
}
@media screen and (max-width: 767px) {
  .sec01 {
    padding-top: 45px;
    padding-bottom: 60px;
    padding-inline: 38px;
  }
}
.sec01 .flex-box {
  margin: 100px auto 54px;
  max-width: 1234px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 84px 80px;
}
@media screen and (max-width: 767px) {
  .sec01 .flex-box {
    margin: 50px auto 27px;
    gap: 42px 40px;
  }
}
.sec01 .flex-box figure {
  width: 358px;
}
.sec01 .flex-box figure figcaption {
  padding-top: 15px;
  font-size: 2.6rem;
  font-family: "Noto Serif JP", serif !important;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec01 .flex-box figure figcaption {
    font-size: 5vw;
    margin-left: -5vw;
    margin-right: -5vw;
  }
}
.sec01 .note {
  margin: 0 auto;
  padding-top: 30px;
  max-width: 1234px;
  border-top: 1px solid #707070;
  text-align: center;
}
.sec01 .note .text {
  font-size: 2rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .sec01 .note .text {
    font-size: 4vw;
    text-align: center;
  }
}

/* ------------------------------
  sec02
------------------------------ */
.sec02 {
  margin-bottom: 130px;
  padding-top: 90px;
  padding-bottom: 120px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #5E318E;
}
@media screen and (max-width: 767px) {
  .sec02 {
    padding-top: 15.556vw;
    padding-bottom: 23vw;
  }
}
.sec02 h2 {
  margin-bottom: 0;
  color: #fff;
  font-size: 3.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .sec02 h2 {
    font-size: 6.923vw;
  }
}
.sec02 h2 span {
  font-size: 6rem;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .sec02 h2 span {
    font-size: 11.53vw;
    display: block;
  }
}
.sec02 .lead {
  margin-bottom: 48px;
  color: #fff;
  font-size: 3rem;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec02 .lead {
    margin-top: 20px;
    font-size: 5.778vw;
    line-height: 1.5;
  }
}
.sec02 .gmap {
  margin: 0 auto;
  width: 75%;
  height: 600px;
}
@media screen and (max-width: 767px) {
  .sec02 .gmap {
    padding-inline: 20px;
    width: 100%;
    height: 100vw;
  }
}
.sec02 .gmap iframe {
  width: 100%;
  height: 100%;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ------------------------------
   sec03
------------------------------ */
.sec03 {
  padding-top: 80px;
  padding-bottom: 185px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sec03 .flex-box {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sec03 .flex-box .box {
  margin-bottom: 50px;
  width: 48%;
  max-width: 380px;
}

.sec03 .img {
  margin-bottom: 20px;
}

.sec03 .text {
  font-size: 1.4rem;
  line-height: 2;
}

.sec03 img {
  max-width: 100%;
}

.sec03 .img_list {
  margin: 130px 0 0 0;
}

.sec03 .img_list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sec03 .img_list li {
  width: 23.4%;
  max-width: 280px;
  margin: 0 2.1333% 60px 0;
  line-height: 1;
}

.sec03 .img_list li:nth-of-type(4n) {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .sec03 {
    padding-top: 15.556vw;
    padding-bottom: 22.222vw;
  }
  .sec03 .flex-box {
    display: block;
  }
  .sec03 .flex-box .box {
    width: 100%;
    max-width: inherit;
  }
  .sec03 .flex-box .box + .box {
    margin-top: 8.889vw;
  }
  .sec03 .img {
    margin-bottom: 3.333vw;
  }
  .sec03 .text {
    font-size: 3.111vw;
  }
  .sec03 .img_list {
    margin: 15.556vw 0 0 0;
  }
  .sec03 .img_list li {
    width: 48%;
    max-width: inherit;
    margin: 0 4% 4% 0;
  }
  .sec03 .img_list li:nth-of-type(4n) {
    margin-right: 4%;
  }
  .sec03 .img_list li:nth-of-type(2n) {
    margin-right: 0;
  }
}