@charset "UTF-8";
/* CSS Document */
/* 基本設定 */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 初期設定 */
/* ----rem設定---- */
:root {
  --liquid-lgDesignRatio: calc(1440 / 10);
  --liquid-smDesignRatio: calc(390 / 10);
}

html {
  font-size: 62.5%;
}

@media screen and (max-width: 1440px) {
  :root {
    --liquid-htmlroot: calc(100vw / var(--liquid-lgDesignRatio));
  }
  html {
    font-size: var(--liquid-htmlroot);
  }
}
@media screen and (max-width: 840px) {
  :root {
    --liquid-htmlroot: calc(100vw / var(--liquid-smDesignRatio));
  }
}
/* --------- */
/* ----レスポンシブの表示非表示---- */
.sp {
  display: none;
}

@media (max-width: 840px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block;
  }
}
/* --------- */
div#wrapper {
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

.mobile_hidden {
  overflow: visible;
  width: 100%;
}

body {
  color: #565656;
}

.inner {
  width: 86%;
  max-width: 144rem;
  margin: 0 auto;
}

#about {
  padding: 20rem 0;
  overflow: hidden;
}
@media screen and (max-width: 840px) {
  #about {
    padding: 10rem 0;
  }
}
#about .inner {
  font-size: 2rem;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-align: center;
  padding-bottom: 35em;
  position: relative;
}
@media screen and (max-width: 840px) {
  #about .inner {
    font-size: 1.6rem;
    padding-bottom: 18em;
  }
}
#about .inner h2 {
  font-size: 200%;
  line-height: 2;
  margin-bottom: 2em;
  color: #2e745d;
}
@media screen and (max-width: 840px) {
  #about .inner h2 {
    line-height: 1.5;
    font-size: 125%;
	font-weight:500;
  }
}
#about .inner .absBox {
  position: absolute;
}
#about .inner .absBox.first {
  width: 32%;
  max-width: 38.1rem;
  inset: 20% auto auto -4%;
}
@media screen and (max-width: 840px) {
  #about .inner .absBox.first {
    inset: auto auto 10% -15%;
  }
}
#about .inner .absBox.second {
  width: 55%;
  max-width: 63.8rem;
  inset: auto auto 0 0;
}
#about .inner .absBox.third {
  width: 38.3%;
  max-width: 46.2rem;
  inset: auto 0 0 auto;
}
@media screen and (max-width: 840px) {
  #about .inner .absBox.third {
    inset: auto -12% 0 auto;
  }
}

#material {
  padding: 10rem 0 30rem;
}
@media screen and (max-width: 840px) {
  #material {
    padding: 10rem 0 15rem;
  }
}
#material .inner {
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.3em;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4em;
}
@media screen and (max-width: 840px) {
  #material .inner {
    font-size: 1.6rem;
  }
}
#material .inner .txtBox {
  width: 50%;
  max-width: 55rem;
}
#material .inner .imgBox img {
	margin-left: -5rem;
}
@media screen and (max-width: 840px) {
  #material .inner .txtBox {
    width: 100%;
    max-width: initial;
    text-align: center;
  }
}
#material .inner .txtBox h2 {
  font-size: 200%;
  line-height: 2;
  margin-bottom: 1.5em;
  color: #2e745d;
}
@media screen and (max-width: 840px) {
  #material .inner .txtBox h2 {
    font-size: 125%;
    line-height: 1.5;
	font-weight: 500;
  }
}
#material .inner .imgBox {
  width: 47%;
}
@media screen and (max-width: 840px) {
  #material .inner .imgBox {
    width: 100%;
  }
}
#material .inner .imgBox img {
  max-width: initial;
  width: 100%;
}

#value {
  background-color: #f8f5e2;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}
@media screen and (max-width: 840px) {
  #value {
    margin: 0 3%;
  }
}
#value .leftBox {
  width: 50%;
  position: relative;
}
#value .leftBox .stickyBox {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.8s ease-in-out;
  background-image: url(../img/hagumi/value-img01@2x.webp);
}
#value .leftBox .stickyBox.firA {
  background-image: url(../img/hagumi/value-img01@2x.webp);
}
#value .leftBox .stickyBox.secA {
  background-image: url(../img/hagumi/value-img02@2x.webp);
}
#value .leftBox .stickyBox.thirA {
  background-image: url(../img/hagumi/value-img03@2x.webp);
}
#value .rightBox {
  width: 50%;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.3em;
  font-weight: 400;
  padding: 15em 0;
}
@media screen and (max-width: 840px) {
  #value .rightBox {
    width: 100%;
    font-size: 1.5rem;
    padding: 2em 0;
  }
}
#value .rightBox .rightInner {
  max-width: 56.5rem;
  width: 86%;
  margin: 0 auto;
}
#value .rightBox .rightInner .valueList {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  row-gap: 15em;
}
@media screen and (max-width: 840px) {
  #value .rightBox .rightInner .valueList {
    row-gap: 7em;
  }
}
#value .rightBox .rightInner .valueList .valueItem .spImg {
  width: 100%;
  height: 28em;
  border-radius: 1em;
  margin-bottom: 3em;
  overflow: hidden;
}
#value .rightBox .rightInner .valueList .valueItem .spImg img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#value .rightBox .rightInner .valueList .valueItem > p {
  padding-left: 2em;
  position: relative;
  font-size: 125%;
  line-height: 1;
  margin-bottom: 2em;
  color: #2e745d;
}
@media screen and (max-width: 840px) {
  #value .rightBox .rightInner .valueList .valueItem > p {
    font-size: 86.66%;
  }
}
#value .rightBox .rightInner .valueList .valueItem > p::before {
  content: "";
  display: block;
  width: 1.6em;
  aspect-ratio: 206/76;
  background: url(../img/hagumi/lineup-ico01.svg) no-repeat;
  background-size: contain;
  position: absolute;
  inset: auto auto 0 0;
}
#value .rightBox .rightInner .valueList .valueItem dt {
  font-size: 200%;
  line-height: 1.7;
  margin-bottom: 1.5em;
  color: #2e745d;
}
#value .rightBox .rightInner .valueList .valueItem dt span {
  display: block;
  font-size: 62.5%;
}
#value .rightBox .rightInner .valueList .valueItem .hosho {
  background: radial-gradient(circle, #2e745d 1.5px, transparent 1.5px) repeat-x;
  background-size: 12px 3px;
  padding-top: 2px;
  padding-top: 2em;
  margin-top: 2em;
  line-height: 1.5;
  font-size: 80%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 1em;
}
#value .rightBox .rightInner .valueList .valueItem .hosho li {
  width: 49%;
}
@media screen and (max-width: 840px) {
  #value .rightBox .rightInner .valueList .valueItem .hosho li {
    width: 100%;
  }
}
#value .rightBox .rightInner .valueList .valueItem .valueImg {
  background: radial-gradient(circle, #2e745d 1.5px, transparent 1.5px) repeat-x;
  background-size: 12px 3px;
  padding-top: 1em;
  margin-top: 1em;
}
#value .rightBox .rightInner .valueList .valueItem .valueImg > p {
  font-size: 80%;
  text-align: center;
}
#value .rightBox .rightInner .valueList .valueItem .valueImg .imgBox img {
  max-width: initial;
  width: 100%;
}

#lineup {
  padding: 20rem 0 0;
}
@media screen and (max-width: 840px) {
  #lineup {
    padding: 10rem 0 0;
  }
}
#lineup .inner {
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.3em;
  font-weight: 400;
}
@media screen and (max-width: 840px) {
  #lineup .inner {
    font-size: 1.5rem;
  }
}
#lineup .inner .ttlBox {
  font-size: 250%;
  line-height: 1;
  padding: 1em 0;
  margin-bottom: 2em;
  text-align: center;
  position: relative;
  border-top: 1px dashed #2e745d;
  border-bottom: 1px dashed #2e745d;
  color: #2e745d;
}
@media screen and (max-width: 840px) {
  #lineup .inner .ttlBox {
    font-size: 146.66%;
  }
}
#lineup .inner .ttlBox::before {
  content: "Line up";
  display: block;
  font-size: 220%;
  position: absolute;
  inset: 50% auto auto 0;
  transform: translateY(-50%);
  font-family: "Nanum Myeongjo", serif;
  opacity: 0.2;
}
@media screen and (max-width: 840px) {
  #lineup .inner .ttlBox::before {
    font-size: 106.5%;
  }
}
#lineup .inner .txt {
  text-align: center;
  margin-bottom: 2em;
}
@media screen and (max-width: 840px) {
  #lineup .inner .txt {
    width: 90%;
    margin: 0 auto 2em;
  }
}
#lineup .inner .lineupList {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 2em;
}
#lineup .inner .lineupList .lineupItem {
  display: block;
  width: calc((100% - 2em) / 2);
  padding: 2em 3em;
  border-radius: 1em;
  border: 1px solid #2e745d;
  background-color: #f8f5e2;
}
@media screen and (max-width: 840px) {
  #lineup .inner .lineupList .lineupItem {
    width: 100%;
    padding: 2em 2em;
  }
}
#lineup .inner .lineupList .lineupItem:hover {
  opacity: 1;
  background-color: #fff;
}
#lineup .inner .lineupList .lineupItem .imgBox {
  margin-bottom: 2em;
}
#lineup .inner .lineupList .lineupItem .imgBox img {
  max-width: initial;
  width: 100%;
}
#lineup .inner .lineupList .lineupItem > p {
  padding-left: 2em;
  position: relative;
  font-size: 125%;
  line-height: 1;
  margin-bottom: 0.5em;
  color: #2e745d;
}
@media screen and (max-width: 840px) {
  #lineup .inner .lineupList .lineupItem > p {
    font-size: 86.66%;
  }
}
#lineup .inner .lineupList .lineupItem > p::before {
  content: "";
  display: block;
  width: 1.6em;
  aspect-ratio: 206/76;
  /* ★ここが変更点 */
  background-color: var(--accent, #1c8f3f);

  -webkit-mask: url(../img/hagumi/lineup-ico01.svg) no-repeat center;
  mask: url(../img/hagumi/lineup-ico01.svg) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;

  position: absolute;
  inset: auto auto 0 0;
}
#lineup .inner .lineupList > .lineupItem:nth-of-type(1){ --accent:#dbbeaa; }
#lineup .inner .lineupList > .lineupItem:nth-of-type(2){ --accent:#93d19a; }
#lineup .inner .lineupList > .lineupItem:nth-of-type(3){ --accent:#b494d6; }
#lineup .inner .lineupList > .lineupItem:nth-of-type(4){ --accent:#7ab8d3; }


#lineup .inner .lineupList .lineupItem dt {
  font-size: 150%;
  line-height: 1;
  margin-bottom: 0.5em;
  color: #2e745d;
}
@media screen and (max-width: 840px) {
  #lineup .inner .lineupList .lineupItem dt {
    font-size: 100%;
    margin-bottom: 1em;
  }
}
#lineup .inner .lineupList .lineupItem dd {
  font-size: 90%;
  line-height: 1.66;
}
@media screen and (max-width: 840px) {
  #lineup .inner .lineupList .lineupItem dd {
    font-size: 80%;
  }
}
#lineup .inner .lineupList .lineupItem button {
    width: 6em;
    padding: 0.5em 0;
    display: block;
    margin: 2em 0 0 auto;
    background-color: #2e745d;
    border-radius: 999px;
    text-align: center;
}
@media screen and (max-width: 840px) {
  #lineup .inner .lineupList .lineupItem button {
    margin-top: 1em;
  }
}
#lineup .inner .lineupList .lineupItem button img {
  width: 35%;
}