@charset "utf-8";
/* CSS Document */


/* BEM 記法 */
/* B: Block要素 */
/* E: Element要素 */
/* M: Modifier要素 */

/*==================================================================
 クラス名のルール： Block要素名_Elemment要素名--Modifier要素名
※Block要素とElemment要素を繋ぐアンダーバーは基本2本だが一本に省略する事とする

・Block要素は主にセクション的な役割で使う
・Elemment要素はBlock要素内を形作るもう一つのBlock要素
・Modifier要素はElemment要素内に入る装飾的な役割。
※Modifier要素にはmarginの使用は禁止とする。

==================================================================*/

/* root
-------------------------*/
:root {
--hogehoge: hoge;
--spring: #f5b6b9;
--summer: #82c7d7;
--autumn: #d5c74d;
--winter: #a7c7cf;
/* --eventColor01: rgba(239, 194, 227, 0.5);
--eventColor02: rgba(0, 212, 202, 0.5);
--eventColor03: rgba(78, 161, 209, 0.5);
--eventColor04: rgba(209, 78, 78, 0.5); */
--eventColor01: #245272;
--eventColor02: #FFFCF1;
--eventColor03: #85eae5;
/* --eventColor04: rgba(209, 78, 78, 0.5); */
--eventColor04: #C43C31;
--emphasisColor: #e1431e;
}
/* カスケードレイヤー */
@layer components {
}
/* Variable Units */

@media screen and (max-width: 660px) {}
@media screen and (min-width: 660px) {}


/* 追加スタイル＋打消し
====================================*/
.pc-style {
  display: inline-block;
  @media screen and (max-width: 820px) {
    display: none;
  }
}
.sp-style {
  display: none;
  @media screen and (max-width: 820px) {
    display: inline-block;
  }
}

h2.is-single__title__en.u-text--head strong {
  font-weight: bold;
}

.is-single__title {
  text-align: center;
  margin-bottom: 32px;
  @media screen and (max-width: 719px) {
    padding: 0 5%;
    margin: 0 auto 32px;
  }
}

.is-single-preface-text {
  max-width: 800px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  @media screen and (max-width: 820px) {
    max-width: 100%;
    text-align: justify;
    padding: 0 5%;
    box-sizing: border-box;
  }
}

.is-single-about-clm2_lists__item_bg2 {
  width: 50%;
  height: 350px;
  background: center / cover no-repeat;
  @media only screen and (max-width: 719px) {
    width: 100vw;
    height: 250px;
    margin-top: 0;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-bottom: 20px;
  }
}


.u-text--body.bottom-line {
  display: inline-block;
  position: relative;
}

.headrap {
  display: block;
  width: 100%;
  position: relative;
}
.headcover {
  background: center / cover no-repeat;
  position: relative;
  width: 100%;
  /*min-height: 350px;*/
  /*padding: 30px;*/
}

.headcover .is-bg {
  background: center / cover no-repeat;
}

.inhead {
  max-width: 460px;
  width: 100%;
  text-align: justify;
  position: absolute;
  left: 5%;
  bottom: 40%;
  @media screen and (max-width: 1200px) {
    max-width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    padding: 5% 5% 0;
    box-sizing: border-box;
  }
}

.is-single-about-clm2_lists__item_text .inner--2column {
  width: 510px;
  margin: 0 90px 0 0;
  @media only screen and (max-width: 719px) {
    width: 100%;
    margin: 20px 0;
  }
}
.inner--2column {
  & .is-single__title {
    text-align: left;
    @media only screen and (max-width: 719px) {
      padding: 0 5% 0;
    }
  }
}

@media only screen and (max-width: 719px) {
.is-single-about-clm2_lists__item_bg {
    width: 100vw;
    height: 450px;
    margin-top: 0;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-bottom: 20px;
  }
}
.u-text--body-padding {
  padding: 0;
  @media only screen and (max-width: 719px) {
    padding: 0 5% 0;
  }
}

.is-3column-production_lists__item_text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 90px;
  width: 100%;
  margin: 20px 0;
  @media only screen and (max-width: 719px) {
    flex-flow: column;
    gap: 20px;
  }
  & .inner,.is-3column-production_lists__item_bg {
    max-width: 33.3%;
    width: 100%;
    @media only screen and (max-width: 719px) {
      max-width: 100%;
    }
  }
  & .is-single__title {
    text-align: left;
    @media only screen and (max-width: 719px) {
      padding: 0 5%;
    }
  }
  & .is-3column-production-text {
    text-align: justify;
  }
}

.is-3column-production_lists__item_bg {
  width: 100%;
  height: 350px;
  @media only screen and (max-width: 719px) {
    height: 250px;
  }
}

.beauty-ingredients {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 20px;
  @media only screen and (max-width: 719px) {
    max-width: 100%;
    justify-content: flex-start;
    flex-flow: wrap;
    gap: 0;
    margin: 0 0 30px;
    padding: 0 5%;
  }
  & img {
    max-width: 223px;
    width: 100%;
    @media only screen and (max-width: 719px) {
      width: 50%;
    }
  }
}