@charset 'UTF-8';

/*  Miyasaka Custom CSS here.  */

.design-testsb .p_layout__img2 {
  margin-bottom: 163px;
  padding-top: 42%;
  z-index: 0;
  clip-path: inset(0);
}

/* ------------------------------------------------------------ */
/*  concept  */
.concept-testsb .sec-concept7 .inbox .ttl-main {
  text-align: center;
}

.concept-testsb .sec-concept7 .inbox .txt {
  margin-top: 68px;
}

.concept-testsb .sec-concept7 .inbox .txt .txt1 {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2.33333em;
  letter-spacing: 0em;
  font-weight: 400;
}

.concept-testsb .sec-concept7 .inbox .txt .txt2 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2.5em;
  letter-spacing: 0em;
  font-weight: 400;
  margin-top: 40px;
}

.concept-testsb .sec-concept7 .itembox1 .inbox .imgbox01,
.concept-testsb .sec-concept7 .itembox2 .inbox .imgbox01,
.concept-testsb .sec-concept7 .itembox3 .inbox .imgbox01,
.concept-testsb .sec-concept7 .itembox4 .inbox .imgbox01,
.concept-testsb .sec-concept7 .itembox5 .inbox .imgbox01 {
  grid-area: imgbox01;
}

.concept-testsb .sec-concept7 .itembox1 .inbox .txtbox,
.concept-testsb .sec-concept7 .itembox2 .inbox .txtbox,
.concept-testsb .sec-concept7 .itembox3 .inbox .txtbox,
.concept-testsb .sec-concept7 .itembox4 .inbox .txtbox,
.concept-testsb .sec-concept7 .itembox5 .inbox .txtbox {
  grid-area: txtbox;
}

.concept-testsb .sec-concept7 .itembox2 .inbox .imgbox02,
.concept-testsb .sec-concept7 .itembox3 .inbox .imgbox02,
.concept-testsb .sec-concept7 .itembox4 .inbox .imgbox02 {
  grid-area: imgbox02;
}

.concept-testsb .sec-concept7 .itembox1 {
  margin-top: clamp(5rem, 0.143rem + 15.179vw, 22rem);
  margin-bottom: clamp(5rem, 2.286rem + 8.482vw, 14.5rem);
}

.concept-testsb .sec-concept7 .itembox1 img {
  width: clamp(20.6rem, 9.543rem + 34.554vw, 59.3rem);
  margin-left: clamp(1.6rem, -2.029rem + 11.339vw, 14.3rem);
}

.concept-testsb .sec-concept7 .itembox1 .inbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "imgbox01 txtbox";
}

.concept-testsb .sec-concept7 .itembox2 {
  margin-bottom: clamp(5rem, 2.286rem + 8.482vw, 14.5rem);
}

.concept-testsb .sec-concept7 .itembox2 .inbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "txtbox imgbox02"
    "txtbox imgbox01";
}

.concept-testsb .sec-concept7 .itembox3 {
  margin-bottom: clamp(6rem, 1.429rem + 14.286vw, 22rem);
}

.concept-testsb .sec-concept7 .itembox3 .imgbox02 {
  position: relative;
  height: clamp(17rem, 11.857rem + 16.071vw, 35rem);
}

.concept-testsb .sec-concept7 .itembox3 .inbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "imgbox02 txtbox"
    "imgbox01 txtbox";
}

.concept-testsb .sec-concept7 .itembox4 {
  margin-bottom: clamp(5rem, 4.4rem + 1.875vw, 7.1rem);
}

.concept-testsb .sec-concept7 .itembox4 .imgbox01 {
  position: relative;
  height: clamp(17rem, 12.857rem + 12.946vw, 31.5rem);
  margin-top: clamp(2.05rem, 0.864rem + 3.705vw, 6.2rem);
}

.concept-testsb .sec-concept7 .itembox4 .inbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "txtbox imgbox02"
    "txtbox imgbox01";
}

.concept-testsb .sec-concept7 .itembox5 {
  margin-bottom: clamp(8rem, 2.286rem + 17.857vw, 28rem);
}

.concept-testsb .sec-concept7 .itembox5 .imgbox01 {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: clamp(2.4rem, -1.171rem + 11.161vw, 14.9rem);
}

.concept-testsb .sec-concept7 .itembox5 .inbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "imgbox01 txtbox";
}

/* PC */
@media (min-width: 768px) {
  .concept-testsb .sec-concept1 .content {
    margin-top: 162px;
  }

  .concept-testsb .sec-concept7 .itembox1 .in-txt,
  .concept-testsb .sec-concept7 .itembox2 .in-txt,
  .concept-testsb .sec-concept7 .itembox3 .in-txt,
  .concept-testsb .sec-concept7 .itembox4 .in-txt,
  .concept-testsb .sec-concept7 .itembox5 .in-txt {
    width: 73%;
  }

  .concept-testsb .sec-concept7 .itembox1 .inbox .txtbox {
    padding-top: 26px;
  }

  .concept-testsb .sec-concept7 .itembox1 .in-txt {
    padding-left: 149px;
    margin-bottom: 138px;
  }

  .concept-testsb .sec-concept7 .itembox2 .inbox .txtbox {
    padding-top: 305px;
  }

  .concept-testsb .sec-concept7 .itembox2 .in-txt {
    padding-left: 167px;
  }

  .concept-testsb .sec-concept7 .itembox2 .imgbox02 {
    position: relative;
    height: 489px;
  }

  .concept-testsb .sec-concept7 .itembox2 .imgbox02 .img01 {
    position: absolute;
    top: -150px;
    right: 0;
  }

  .concept-testsb .sec-concept7 .itembox2 .imgbox02 .img02 {
    position: absolute;
    top: 0;
    right: 391px;
  }

  .concept-testsb .sec-concept7 .itembox3 .inbox .txtbox {
    padding-top: 224px;
  }

  .concept-testsb .sec-concept7 .itembox3 .inbox .imgbox02 img {
    position: absolute;
    left: 68.33%;
  }

  .concept-testsb .sec-concept7 .itembox3 .in-txt {
    padding-left: 139px;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .txtbox {
    padding-top: 121px;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .imgbox01 .img01 {
    position: absolute;
    top: 0;
    right: 107px;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .imgbox01 .img02 {
    position: absolute;
    top: 143px;
    right: 446px;
  }

  .concept-testsb .sec-concept7 .itembox4 .in-txt {
    padding-left: 205px;
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox .txtbox {
    padding-top: 179px;
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox .imgbox01 .img01 {
    position: absolute;
    top: 0;
    left: 0;
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox .imgbox01 .img02 {
    position: absolute;
    top: 392px;
    left: 122px;
  }

  .concept-testsb .sec-concept7 .itembox5 .in-txt {
    padding-left: 167px;
  }
}

/* SP */
@media (max-width: 767px) {
  .concept-testsb .sec-concept1 .content {
    margin-top: 45px;
  }

  .concept-testsb .sec-concept7 .itembox1 .in-txt,
  .concept-testsb .sec-concept7 .itembox2 .in-txt,
  .concept-testsb .sec-concept7 .itembox3 .in-txt,
  .concept-testsb .sec-concept7 .itembox4 .in-txt,
  .concept-testsb .sec-concept7 .itembox5 .in-txt {
    margin-inline: auto;
    width: 78%;
  }

  .concept-testsb .sec-concept7 .inbox .txt {
    margin-top: 30px;
  }

  .concept-testsb .sec-concept7 .inbox .txt .txt1 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 2em;
    letter-spacing: 0em;
    font-weight: 400;
  }

  .concept-testsb .sec-concept7 .itembox1 .inbox .imgbox01 {
    margin-bottom: 50px;
  }

  .concept-testsb .sec-concept7 .itembox2 .inbox .txtbox {
    padding-top: 50px;
    padding-bottom: 35px;
  }

  .concept-testsb .sec-concept7 .itembox2 .inbox .imgbox01 {
    justify-self: end;
  }

  .concept-testsb .sec-concept7 .itembox2 .inbox .imgbox01 img {
    display: block;
    width: 90%;
    margin-left: auto;
  }

  .concept-testsb .sec-concept7 .itembox2 .imgbox02 {
    position: relative;
    aspect-ratio: 320 / 227;
  }

  .concept-testsb .sec-concept7 .itembox2 .imgbox02 .img01 {
    position: absolute;
    top: 0;
    right: 0;
    width: 52.5%;
  }

  .concept-testsb .sec-concept7 .itembox2 .imgbox02 .img02 {
    position: absolute;
    top: 38.3%;
    left: 11%;
    width: 29%;
  }

  .concept-testsb .sec-concept7 .itembox3 .inbox .imgbox02 img {
    width: 32%;
  }

  .concept-testsb .sec-concept7 .itembox3 .inbox .txtbox {
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .txtbox {
    padding-bottom: 52px;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .imgbox02 {
    margin-right: 35px;
    justify-self: end;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .imgbox02 img {
    display: block;
    width: 67.8%;
    margin-left: auto;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .imgbox01 .img01 {
    position: absolute;
    width: 56.8%;
    top: 0;
    left: 0;
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox .imgbox01 .img02 {
    position: absolute;
    width: 36%;
    top: 99px;
    right: 20px;
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox .txtbox {
    margin-top: 50px;
    margin-bottom: 38px;
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox .imgbox01 .img01 {
    width: 43%;
    align-self: flex-end;
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox .imgbox01 .img02 {
    width: 87.5%;
    margin-left: 20px;
  }

  .concept-testsb .sec-concept7 .itembox1 .inbox {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "imgbox01" "txtbox";
  }

  .concept-testsb .sec-concept7 .itembox2 .inbox,
  .concept-testsb .sec-concept7 .itembox3 .inbox {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "imgbox02" "txtbox" "imgbox01";
  }

  .concept-testsb .sec-concept7 .itembox4 .inbox {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "txtbox" "imgbox02" "imgbox01";
  }

  .concept-testsb .sec-concept7 .itembox5 .inbox {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "txtbox" "imgbox01";
  }
}