@charset "utf-8";

article > section[id$="_header"] {
  padding: 0px var(--padding);
}
article > section[id$="_header"] > div {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  justify-content: center;
  padding: 3.2vw 0px;
}
article > section[id$="_header"] > div > div {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  row-gap: 30px;
  justify-items: center;
  /* width: 825px; */
  width: min(825px, 95vw);
}
article > section[id$="_header"] h2 {
  text-align: center;
  line-height: 1.3;
}
article > section[id$="_header"] h2 > p {
  font-family: var(--font_mincho);
}
article > section[id$="_header"] h2 > p > span {
  font-size: inherit;
  font-family: inherit;
}
/*こども園園庭*/
article > section#kodomoen_header h2 > p {
  font-size: min(3.6rem, calc(7.65vw + 0.00588rem));
}
/*からまつオーダーメイドファニチャー*/
article > section#karamatsu_header h2 > p {
  font-size: min(3.6rem, calc(7.65vw + 0.00588rem));
}
@media screen and (max-width: 669px) {
  article > section#karamatsu_header h2 > p > span.nl_1::before {
    content: "\A";
    white-space: pre;
  }
}
@media screen and (max-width: 509px) {
  article > section#karamatsu_header h2 > p > span.nl_2::before {
    content: "\A";
    white-space: pre;
  }
}
/*ログハウス*/
article > section#loghouse_header h2 > p {
  font-size: min(3.4rem, calc(7.86vw - 0.52857rem));
}
@media screen and (max-width: 889px) {
  article > section#loghouse_header h2 > p > span.nl_1::before {
    content: "\A";
    white-space: pre;
  }
}
@media screen and (max-width: 599px) {
  article > section#loghouse_header h2 > p > span.nl_2::before {
    content: "\A";
    white-space: pre;
  }
}
/*木質舗装*/
article > section#mokushitsuhosou_header h2 > p {
  font-size: min(3.4rem, calc(5.73vw - 0.15302rem));
}
@media screen and (max-width: 829px) {
  article > section#mokushitsuhosou_header h2 > p > span.nl_1::before {
    content: "\A";
    white-space: pre;
  }
}
/*デザインウォール*/
article > section#designwall_header h2 > p {
  font-size: min(3.4rem, calc(7.65vw + 0.00588rem));
}
@media screen and (max-width: 619px) {
  article > section#designwall_header h2 > p > span.nl_1::before {
    content: "\A";
    white-space: pre;
  }
}

article > section[id$="_header"] h3 {
  line-height: 1.4;
  width: 98%;
}
article > section[id$="_header"] h3 > p {
  font-size: 1.8rem;
  text-align: justify;
  font-weight: normal;
}

article > section[id$="_thumbnail"] > div {
  padding: 0px var(--padding) 40px;
  display: grid;
  grid-auto-rows: 1fr;
  column-gap: 20px;
  row-gap: 40px;
  justify-content: center;
}
@media screen and (min-width: 1260px) {
  article > section[id$="_thumbnail"] > div {
    grid-template-columns: repeat(4, 220px);
  }
}
@media screen and (max-width: 1259px) and (min-width: 500px) {
  article > section[id$="_thumbnail"] > div {
    grid-template-columns: repeat(auto-fit, 220px);
  }
}
@media screen and (max-width: 499px) {
  article > section[id$="_thumbnail"] > div {
    grid-template-columns: 95vw;
  }
}

article > section[id$="_thumbnail"] > div img {
  transition-duration: 0.5s;
}
article > section[id$="_thumbnail"] > div img:hover {
  box-shadow: 0 0 15px #333;
  transition-duration: 0.3s;
}
article > section[id$="_thumbnail"] > div figcaption {
  text-align: center;
  font-size: 1.5rem;
}
article > section[id$="_explanation"] > div {
  padding: 0px var(--padding) 40px;
  display: grid;
  justify-content: center;
}
@media screen and (min-width: 1280px) {
  article > section[id$="_explanation"] > div > div {
    width: 940px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    justify-content: center;
  }
}
@media screen and (max-width: 1279px) {
  article > section[id$="_explanation"] > div > div {
    width: 100%;
    display: grid;
    grid-template-columns: 98%;
    row-gap: 10px;
    justify-content: center;
  }
}

article > section[id$="_pdf"] {
  padding: 20px 0px 80px;
}
article > section[id$="_pdf"] h2 {
  width: 100%;
  text-align: center;
  line-height: 1;
  padding-bottom: 20px;
  font-size: 2rem;
}
article > section[id$="_pdf"] > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-auto-rows: 1fr;
  column-gap: 20px;
  row-gap: 10px;
  justify-content: center;
  align-items: center;
}
article > section[id$="_pdf"] img {
  border: solid 1px #999;
  box-sizing: border-box;
}