@charset "utf-8";
/*------------------------------------------------------------
	薪ページ
------------------------------------------------------------*/
/* common */
:root {
  --base-color01: #4b4643;
  --base-color02: #29190a;
  --font-color01: #fff;
  --font-color02: #4d222e;
}
.concept,
.wood-burning-stove {
  background-color: #e8e8e8;
}
.concept .copy,
.wood-burning-stove .copy {
  color: var(--font-color02);
}
.contents_body {
  background-color: var(--base-color01);
}
.contents_body .contents_img img {
  height: 100%;
}
.overlap_text {
  color: var(--font-color01);
  text-shadow: 1px 1px 3px var(--base-color01);
}
/* header */
.lp_header {
  background-color: var(--base-color01);
  height: 60px;
}
.lp_nav_list li a {
  color: #9e9792;
}
/* main visual */
.mv_image {
  height: 100svh;
}
.mv_image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.mv_copy {
  color: #4e3607;
}
a.mv_scrollicon {
  color: #fff;
}
/* concept */
.concept_company {
  height: auto;
}
.concept_img {
  right: 0;
}
.concept_text {
  width: 71%;
  max-width: 703px;
}
/* wood-burning-stove */
.wood-burning-stove_img {
  left: 0;
}
.wood-burning-stove_text {
  margin-left: auto;
  margin-right: 0;
  width: 72%;
}
/* process */
.process {
  background-image: url(../img/firewood/process_bg.jpg);
  background-position: 50% 50%;
  background-size: cover;
  color: var(--font-color01);
  position: relative;
  text-align: left;
}
.process::after {
  background-color: var(--base-color02);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.62;
  position: absolute;
  right: 0;
  top: 0;
}
.process h2 {
  margin: 0 0 8px;
}
.process .copy {
  line-height: 2;
  opacity: 0.7;
}
/* protect-the-earth */
.protect-the-earth {
  background-color: var(--base-color01);
  color: #d6d9d3;
}
.protect-the-earth .contents_text {
  margin: 0 0 24px;
}
h3 {
  font-weight: 300;
}
/* gallery */
.gallery {
  background-color: #dae3d8;
}
/* order */
.order {
  background-color: #fff0d0;
}
.lp_form_btn {
  align-items: center;
  background-color: #583506;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  display: block;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.lp_form_btn.soldout {
  background-color: #ede6d4;
  box-shadow: unset;
  pointer-events: none;
}
a.lp_form_btn:link {
  color: #ffffff;
}
a.lp_form_btn:visited {
  color: #ffffff;
}
a.lp_form_btn:hover {
  color: #ffffff;
}
a.lp_form_btn.soldout:link {
  color: #dbd5c6;
}
a.lp_form_btn.soldout:visited {
  color: #dbd5c6;
}
a.lp_form_btn.soldout:hover {
  color: #dbd5c6;
}
.order .law.contents_text {
  margin: 0;
}
.law a {
  text-decoration: underline;
}
/* woodchips */
.woodchips {
  background-color: #fff;
}
.woodchips_img_wrapper {
  display: flex;
}
.woodchips .contents_text {
  margin: 12px 0 0;
  text-align: center;
}
.woodchips .contents_text a {
  color: #0956bf;
  text-decoration: underline;
}

/* GSAP用 */
.contents_body .contents_img {
  /* マスクで非表示にしておく */
  clip-path: inset(0 100% 0 0);
  /* マスクがアニメーションを表示できるように */
  transition: 1s ease-in-out;
}
.contents_body.show .contents_img {
  /* マスクを解除 */
  clip-path: inset(0 0 0 0);
}
.contents_body .overlap_text {
  /* 透過で非表示 */
  opacity: 0;
  /* マスクがアニメーションを表示できるように */
  transition: 0.5s 0.5s ease-in-out;
}
.contents_body.show .overlap_text {
  /* 表示 */
  opacity: 1;
}

@media (max-width: 767px) {
  /* common */
  .lp h2 {
    margin: 0 0 8px;
  }
  .contents_body .contents_img {
    height: 280px;
    width: 100%;
  }
  /* main visual */
  .mv_contents {
    min-width: 280px;
    top: 50%;
  }
  .mv_logo {
    height: auto;
    width: 180px;
  }
  .mv_copy {
    margin: 0 0 38px;
  }
  /* concept */
  .concept h2 img {
    height: 56px;
    width: auto;
  }
  .concept_company {
    margin: 0;
    width: 236px;
  }
  .concept_text {
    width: 100%;
  }
  /* wood-burning-stove */
  .wood-burning-stove h2 img {
    height: auto;
    width: 100%;
    max-width: 394px;
  }
  .wood-burning-stove_text {
    margin: 0 auto;
    width: 100%;
  }
  /* process */
  .process_inner {
    padding: 0 0 126px;
  }
  .process h2 img {
    height: 56px;
    width: auto;
  }
  .process .contents_img {
    margin: 0 auto;
    width: 74%;
  }
  /* protect-the-earth */
  .protect-the-earth_contents {
    width: 90%;
  }
  .protect-the-earth .contents_text {
    font-size: 16px;
  }
  .protect-the-earth h2 img {
    height: auto;
    width: 100%;
    max-width: 325px;
  }
  /* woodchips */
  .woodchips {
    padding: 126px 0 120px;
  }
  .woodchips h2 {
    height: 56px;
    width: 242px;
  }
  .woodchips .contents_text {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  }
}

@media (min-width: 768px) {
  /* lp共通項目の上書き */
  .lp .copy {
    margin: 0 0 20px;
  }
  /* common */
  .contents_body .contents_img {
    height: 430px;
    position: absolute;
    top: -128px;
    width: 78%;
  }
  /* header */
  .lp_header_logo {
    height: 38px;
    width: 272px;
  }
  /* main visual */
  .mv_contents {
    top: 50%;
  }
  .mv_copy {
    height: 138px;
    margin-bottom: 42px;
    width: 436px;
  }
  /* concept */
  .concept {
    padding: 87px 0 0;
  }
  .concept h2 {
    height: 57px;
    width: 224px;
    margin-bottom: 15px;
  }
  .concept_company {
    margin: 0 auto;
    max-width: 540px;
  }
  /* wood-burning-stove */
  .wood-burning-stove {
    padding: 90px 0 0;
  }
  .wood-burning-stove h2 {
    margin: 0 auto 15px;
    height: 57px;
    width: 560px;
  }
  .wood-burning-stove_text {
    margin-left: auto;
    margin-right: 0;
    width: 57%;
    max-width: 564px;
  }
  /* process */
  .process {
    padding: 130px 0 0;
  }
  .process_inner {
    padding: 0 0 230px;
  }
  .process h2 {
    height: 57px;
    width: 220px;
  }
  .process .copy {
    margin-bottom: 78px;
    text-align: left;
  }
  .process .contents_img img {
    height: auto;
    width: 100%;
  }
  .process .contents_img01 {
    max-width: 1112px;
  }
  /* protect-the-earth */
  .protect-the-earth {
    padding: 100px 0 0;
  }
  .protect-the-earth h2 {
    height: 57px;
    width: 500px;
    margin-bottom: 12px;
  }
  /* woodchips */
  .woodchips {
    padding: 168px 0 208px;
  }
  .woodchips h2 {
    height: 70px;
    width: 302px;
  }
  .woodchips_img {
    width: 50%;
  }
}
@media (max-width: 1086px) {
  /* header */
  .lp_header {
    height: unset;
    padding: 10px 0;
  }
  .lp_header_inner {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .lp_nav {
    margin: 10px 0 0 20px;
    width: 100%;
  }
  .lp_header_logo {
    height: 29px;
    width: 208px;
  }
  .lp_nav_list li {
    margin: 0px 22px 0 0;
  }
  .lp_nav_list li:last-child {
    margin: 0px 22px 0 0;
  }
}