@charset "UTF-8";

header .logo-area > .title h1 > .shop-name {
  border-color: #000 !important;
}

.company-name {
  color: #000 !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
}

@media screen and (max-width: 767px) {
  .company-name {
    font-size: 1.2rem !important;
  }
}

nav.global {
  display: none !important;
}

@media screen and (max-width: 767px) {
  nav.global {
    display: block !important;
  }
}

main {
  width: 100%;
}

main section {
  border-top: none;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

main section:not(:last-child) {
  margin-bottom: 0;
}

.reproduction {
  font-size: 16px;
  line-height: 1.8;
}

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

@media screen and (max-width: 767px) {
  .reproduction {
    font-size: 14px;
  }
}

.reproduction .inner {
  max-width: 1162px;
  margin: 0 auto;
  padding: 0 16px;
}


/* PC/SP出し分け
------------------------------ */

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: inline-block !important;
  }
}


/* ---------------------------------
メイン
---------------------------------- */
.reproduction .main img {
  width: 100%;
}
.reproduction .main .catch {
  text-align: center;
}

.reproduction .main .catch img {
  width: 50vw;
}


/* ---------------------------------
安心・安全を保障します
---------------------------------- */
.reproduction .about {
  padding-top: 120px;
}

.reproduction .about h2 {
  text-align: center;
}

.reproduction .about h3 {
  margin-top: 60px;
}

.reproduction .about .about-wrap {
  position: relative;
  z-index: 0;
  margin-top: -3.9vw;
  padding-top: 5.2vw;
}

.reproduction .about .about-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color:#F0F8EA;
    transform: skewY(-12deg);
}

.reproduction .about .about-cts {
  display: flex;
}

.reproduction .about .about-cts figure {
  width: 43.8%;
  text-align: center;
}

.reproduction .about .about-cts figure img {
  width: 65%;
}

.reproduction .about .about-cts .text {
  width: 56.2%;
}

.reproduction .about .strong {
  background: linear-gradient(transparent 60%, #FFF 60%);
  color: #229C37;
  font-size: 20px;
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .reproduction .about {
    padding-top: 40px;
  }

  .reproduction .about h2 img {
    max-width: 316px;
    width: 100%;
  }

  .reproduction .about h3 {
    margin-top: 40px;
  }

  .reproduction .about h3 img {
    max-width: 294px;
    width: 100%;
  }

  .reproduction .about .about-wrap {
    margin-top: -3.9vw;
    padding-top: 5.2vw;
    padding-bottom: 13.33vw;
  }

  .reproduction .about .about-cts {
    flex-wrap: wrap;
    gap: 24px 0;
  }

  .reproduction .about .about-cts figure {
    width: 100%;
  }

  .reproduction .about .about-cts figure img {
    width: 43%;
  }

  .reproduction .about .about-cts .text {
    width: 100%;
  }

  .reproduction .about .strong {
    font-size: 18px;
  }
}


/* ---------------------------------
point1
---------------------------------- */
.reproduction .point1 {
  margin-top: 120px;
  padding: 0 0 120px;
}

.reproduction .point1 h2 {
  text-align: center;
}

.reproduction .point1 h2 + p {
  margin-top: 40px;
  text-align: center;
}

.reproduction .point1 .jio {
  display: flex;
  gap: 0 3.5%;
  margin-top: 60px;
}

.reproduction .point1 .jio .logo {
  width: 21.6%;
  background-color: #f5f7f7;
}

.reproduction .point1 .jio .text {
  width: calc(100% - 21.6% - 3.5%);
  padding: 24px 32px;
  background-color: #f5f7f7;
}

.reproduction .point1 .jio .text dt {
  color: #1b4184;
  font-size: 26px;
  font-weight: 700;
}

.reproduction .point1 h3 {
  margin-top: 80px;
  text-align: center;
}

.reproduction .point1 .point-list li {
  margin-top: 60px;
}

.reproduction .point1 .point-list dl {
  display: flex;
  gap: 0 3.5%;
}

.reproduction .point1 .point-list dt {
  width: 11.3%;
  text-align: center;
}

.reproduction .point1 .point-list dd {
  width: calc(100% - 11.3% - 3.5%);
}

.reproduction .point1 .point-list dd h4 {
  color: #229c37;
  font-size: 26px;
  font-weight: 700;
}

.reproduction .point1 .point-list dd .note {
  margin-left: 1em;
  text-indent: -1em;
}

@media only screen and (max-width: 767px) {
  .reproduction .point1 {
    margin-top: 60px;
    padding: 0 0 60px;
  }

  .reproduction .point1 h2 img {
    max-width: 343px;
    width: 100%;
  }

  .reproduction .point1 h2 + p {
    margin-top: 20px;
  }

  .reproduction .point1 .jio {
    flex-wrap: wrap;
    gap: 24px 0;
    margin-top: 40px;
  }

  .reproduction .point1 .jio .logo {
    width: 100%;
    text-align: center;
  }

  .reproduction .point1 .jio .text {
    width: 100%;
    padding: 16px;
  }

  .reproduction .point1 .jio .text dt {
    font-size: 20px;
  }

  .reproduction .point1 h3 {
    margin-top: 60px;
  }

  .reproduction .point1 h3 img {
    max-width: 294px;
    width: 100%;
  }

  .reproduction .point1 .point-list li {
    margin-top: 40px;
  }

  .reproduction .point1 .point-list dl {
    display: flex;
    gap: 0 5.3%;
  }

  .reproduction .point1 .point-list dt {
    width: 20%;
    padding-top: 8px;
  }

  .reproduction .point1 .point-list dd {
    width: calc(100% - 20% - 5.3%);
  }

  .reproduction .point1 .point-list dd h4 {
    font-size: 20px;
  }

  .reproduction .point1 .point-list dd .note {
    font-size: 12px;
  }
}


/* ---------------------------------
point2
---------------------------------- */
.reproduction .point2 {
  padding: 120px 0;
  background-color: #f0f8ea;
}

.reproduction .point2 h2 {
  text-align: center;
}

.reproduction .point2 h2 + p {
  margin-top: 40px;
  text-align: center;
}

.reproduction .point2 h3 {
  margin-top: 60px;
  text-align: center;
}

.reproduction .point2 .inspection-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 2.12%;
  margin-top: 40px;
}

.reproduction .point2 .inspection-list li {
  width: calc((100% - 6.36%) / 4);
}

.reproduction .point2 .inspection-list figcaption {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .reproduction .point2 {
    padding: 60px 0;
  }

  .reproduction .point2 h2 img {
    max-width: 342px;
    width: 100%;
  }

  .reproduction .point2 h2 + p {
    margin-top: 20px;
  }

  .reproduction .point2 h3 {
    margin-top: 40px;
  }

  .reproduction .point2 h3 img {
    max-width: 342px;
    width: 100%;
  }

  .reproduction .point2 .inspection-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 4.26%;
    margin-top: 24px;
  }

  .reproduction .point2 .inspection-list li {
    width: calc((100% - 4.26%) / 2);
  }

  .reproduction .point2 .inspection-list figcaption {
    font-size: 15px;
  }
}


/* ---------------------------------
安心R住宅
---------------------------------- */
.reproduction .r-house {
  padding: 120px 0 0;
}

.reproduction .r-house h2 {
  text-align: center;
}

.reproduction .r-house h3 {
  margin-top: 60px;
}

.reproduction .r-house .r-house-wrap {
  position: relative;
  z-index: 0;
  margin-top: -3.9vw;
  padding-top: 5.2vw;
}

.reproduction .r-house .r-house-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color:#F0F8EA;
    transform: skewY(-12deg);
}

.reproduction .r-house .r-house-cts {
  display: flex;
}

.reproduction .r-house .r-house-cts figure {
  width: 43.8%;
  text-align: center;
}

.reproduction .r-house .r-house-cts figure img {
  width: 65%;
}

.reproduction .r-house .r-house-cts .text {
  width: 56.2%;
}

.reproduction .r-house .r-house-cts .text p:not(:first-of-type) {
  margin-top: 1em;
}

.reproduction .r-house .strong {
  background: linear-gradient(transparent 60%, #FFF 60%);
  color: #229C37;
  font-size: 20px;
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .reproduction .r-house {
    padding-top: 40px;
  }

  .reproduction .r-house h2 {
    text-align: center;
  }

  .reproduction .r-house h2 img {
    max-width: 279px;
    width: 100%;
  }

  .reproduction .r-house h3 {
    margin-top: 40px;
  }

  .reproduction .r-house h3 img {
    max-width: 291px;
    width: 100%;
  }

  .reproduction .r-house .r-house-wrap {
    margin-top: -3.9vw;
    padding-top: 5.2vw;
    padding-bottom: 13.33vw;
  }

  .reproduction .r-house .r-house-cts {
    flex-wrap: wrap;
    gap: 24px 0;
  }

  .reproduction .r-house .r-house-cts figure {
    width: 100%;
    text-align: center;
  }

  .reproduction .r-house .r-house-cts figure img {
    width: 35%;
  }

  .reproduction .r-house .r-house-cts .text {
    width: 100%;
  }

  .reproduction .r-house .strong {
    font-size: 18px;
  }
}

/* ---------------------------------
point3
---------------------------------- */
.reproduction .point3 {
  margin-top: 120px;
	padding: 0 0 120px;
}

.reproduction .point3 h2 {
  margin-bottom: 106px;
  text-align: center;
}

.reproduction .point3 .concerns-list > ul {
  display: flex;
  gap: 0 3.5%;
}

.reproduction .point3 .concerns-list > ul > li {
  width: calc((100% - 7%) / 3);
  padding: 0 15px 24px;
  border-radius: 22px;
  background-color: #FFF;
  box-shadow: 0 5px 16px rgba(0,0,0,.15);
}

.reproduction .point3 .concerns-list figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 120px;
  text-align: center;
  margin: -46px 0 6px;
}

.reproduction .point3 .concerns-list figure img {
  max-width: none;
  height: 100%;
}

.reproduction .point3 .concerns-list dt {
  margin-bottom: 6px;
  background: linear-gradient(135deg, #e8588c 0%, #ff2e79 50%, #ff8392 66%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.reproduction .point3 .concerns-list dd li {
  list-style: disc;
  margin-left: 1.5em;
}

.reproduction .point3 .btn {
  margin-top: 80px;
  text-align: center;
}

.reproduction .point3 .btn a:hover {
  opacity: .7;
}

.reproduction .point3 .btn img {
  max-width: 574px;
}

@media only screen and (max-width: 767px) {
  .reproduction .point3 {
    margin-top: 60px;
    padding: 0 0 60px;
  }

  .reproduction .point3 h2 {
    margin-bottom: 52px;
    text-align: center;
  }

    .reproduction .point3 h2 img {
      max-width: 260px;
    }

  .reproduction .point3 .concerns-list > ul {
    flex-wrap: wrap;
    gap: 60px 0;
  }

  .reproduction .point3 .concerns-list > ul > li {
    width: 100%;
    border-radius: 16px;
  }

  .reproduction .point3 .concerns-list dt {
    font-size: 20px;
  }

  .reproduction .point3 .btn {
    margin-top: 60px;
  }

  .reproduction .point3 .btn img {
    max-width: 366px;
    width: 100%;
  }
}