@charset "UTF-8";
.f-robot {
  font-family: "Roboto", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  background: #fff;
  color: #222;
  overflow: auto;
}
@media screen and (min-width: 768px) {
  body {
    overflow: auto;
  }
}

@media screen and (max-width: 767px) {
  .sns-section {
    overflow: hidden;
  }
}

.bscstm .ls-10em {
  font-feature-settings: "palt";
  letter-spacing: 0.1em !important;
}
.bscstm .ls-12em {
  font-feature-settings: "palt";
  letter-spacing: 0.12em !important;
}
.bscstm .ls-14em {
  font-feature-settings: "palt";
  letter-spacing: 0.14em !important;
}
.bscstm .ls-16em {
  font-feature-settings: "palt";
  letter-spacing: 0.16em !important;
}
.bscstm .ls-18em {
  font-feature-settings: "palt";
  letter-spacing: 0.18em !important;
}
.bscstm .ls-20em {
  font-feature-settings: "palt";
  letter-spacing: 0.2em !important;
}
.bscstm .ls-40em {
  font-feature-settings: "palt";
  letter-spacing: 0.4em !important;
}
@media screen and (min-width: 768px) {
  .bscstm .w-md-auto {
    width: auto !important;
  }
  .bscstm .w-md-1030px {
    width: 1030px !important;
  }
  .bscstm .ls-md-10em {
    font-feature-settings: "palt";
    letter-spacing: 0.1em !important;
  }
  .bscstm .ls-md-12em {
    font-feature-settings: "palt";
    letter-spacing: 0.12em !important;
  }
  .bscstm .ls-md-14em {
    font-feature-settings: "palt";
    letter-spacing: 0.14em !important;
  }
  .bscstm .ls-md-16em {
    font-feature-settings: "palt";
    letter-spacing: 0.16em !important;
  }
  .bscstm .ls-md-18em {
    font-feature-settings: "palt";
    letter-spacing: 0.18em !important;
  }
  .bscstm .ls-md-20em {
    font-feature-settings: "palt";
    letter-spacing: 0.2em !important;
  }
  .bscstm .ls-md-40em {
    font-feature-settings: "palt";
    letter-spacing: 0.4em !important;
  }
}

.about {
  font-family: "Noto Sans JP", sans-serif;
}
.about img {
  max-width: 100%;
  height: auto;
}
.about hr {
  border-top: 1px dotted #2f2f2f;
}
.about sup {
  font-size: 0.5em;
  vertical-align: text-top;
}
.about h3 {
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .about .inner {
    max-width: 1140px !important;
  }
}
@media screen and (min-width: 768px) {
  .about .inner--wide {
    max-width: 1340px !important;
  }
}
@media screen and (max-width: 767px) {
  .about .sp-padding-none {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
@media screen and (max-width: 767px) {
  .about .btn-common {
    font-size: 14px;
  }
}
.about .baria-title {
  border-bottom: 1px solid #c3c5bf;
  padding-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .about .baria-title {
    width: max-content;
  }
}
@media screen and (min-width: 768px) {
  .about .text--xsm {
    letter-spacing: 0.01em;
  }
}
@media screen and (min-width: 768px) {
  .about .text--sm {
    letter-spacing: 0.03em;
  }
}
@media screen and (min-width: 768px) {
  .about .text {
    letter-spacing: 0.05em;
  }
}
@media screen and (min-width: 768px) {
  .about .text--md {
    letter-spacing: 0.07em;
  }
}
@media screen and (min-width: 768px) {
  .about .text--lg {
    letter-spacing: 0.1em;
  }
}
.about .annotation {
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .about .annotation {
    letter-spacing: normal;
  }
}
.about .caption {
  letter-spacing: -0.05em;
}
.about .caption--sm {
  letter-spacing: -0.06em;
}
.about .page-title {
  font-family: "Poppins", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  letter-spacing: 0.08em;
}
.about .page-title .underline {
  padding-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .about .page-title .underline {
    border-bottom: 2px solid #c3c5bf;
  }
}
@media screen and (max-width: 767px) {
  .about .page-title .underline {
    width: max-content;
    display: block;
    margin: 0 auto;
    border-bottom: 2px solid #c3c5bf;
  }
}
.about .section-title {
  letter-spacing: 0.05em;
}
.about .section-title.section-title--brackets {
  letter-spacing: 0.1em;
}
.about .section-title.section-title--brackets .small {
  display: block;
  letter-spacing: 0.02em;
}
.about .section-title.section-title--brackets .bracket {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.about .section-title.section-title--brackets .bracket::before, .about .section-title.section-title--brackets .bracket::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.about .section-title.section-title--brackets .bracket::before {
  left: 0;
  width: 17px;
  height: 63.5px;
  background: url(../img/brackets-left_sp.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .about .section-title.section-title--brackets .bracket::before {
    width: 23px;
    height: 85px;
    background: url(../img/brackets-left_pc.png) no-repeat center center/contain;
  }
}
.about .section-title.section-title--brackets .bracket::after {
  right: 0;
  width: 17.5px;
  height: 63.5px;
  background: url(../img/brackets-right_sp.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .about .section-title.section-title--brackets .bracket::after {
    width: 24px;
    height: 85px;
    background: url(../img/brackets-right_pc.png) no-repeat center center/contain;
  }
}
.about .emphasis-dot {
  display: inline-block;
  padding-top: 8px;
  background: url(../img/emphasis-dot.png) no-repeat top left 6px/80px 3px;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .about .emphasis-dot {
    background: url(../img/emphasis-dot.png) no-repeat top left 5px/88px 3px;
  }
}
.about .tag {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .about .tag {
    top: 100px;
  }
}
@media screen and (min-width: 1240px) {
  .about .tag {
    left: 50%;
    transform: translateX(calc(-50% - 510px));
  }
}
.about .tag__part {
  display: inline-block;
  position: relative;
  z-index: 10;
  padding-left: 50px;
  font-family: "Poppins", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .about .tag__part {
    padding-left: 70px;
  }
}
.about .tag__part::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  width: 45px;
  height: 1px;
  background: #888888;
}
@media screen and (min-width: 768px) {
  .about .tag__part::before {
    width: 60px;
  }
}
.about .story-tag {
  position: absolute;
  left: 0;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .about .story-tag {
    top: 10%;
  }
}
@media screen and (max-width: 767px) {
  .about .story-tag {
    top: 40px;
  }
}
@media screen and (min-width: 1240px) {
  .about .story-tag {
    left: 47.5%;
    transform: translateX(calc(-50% - 510px));
  }
}
.about .story-tag__part {
  display: inline-block;
  position: relative;
  z-index: 10;
  padding-left: 50px;
  font-family: "Poppins", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .about .story-tag__part {
    padding-left: 70px;
  }
}
.about .story-tag__part::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  width: 45px;
  height: 1px;
  background: #888888;
}
@media screen and (min-width: 768px) {
  .about .story-tag__part::before {
    width: 60px;
  }
}
.about .about__title {
  margin-top: -22px;
}
@media screen and (min-width: 768px) {
  .about .about__title {
    margin-top: -42px;
  }
}
.about__main-visual {
  position: relative;
  z-index: -1;
  margin-top: -80px;
}
@media screen and (min-width: 768px) {
  .about__main-visual {
    margin-top: initial;
  }
}
.about .philosophy,
.about .fragrance,
.about .story {
  position: relative;
  background-color: #f5f5f5;
}
.about .philosophy .inner,
.about .fragrance .inner,
.about .story .inner {
  padding-right: 20px !important;
}
@media screen and (min-width: 1020px) {
  .about .philosophy .inner,
  .about .fragrance .inner,
  .about .story .inner {
    padding-right: calc(50vw - 490px) !important;
  }
}
.about .philosophy__img,
.about .fragrance__img,
.about .story__img {
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) and (max-width: 1600px) {
  .about .philosophy__img,
  .about .story__img {
    width: 50%;
  }
}
.about .method {
  position: relative;
}
@media screen and (min-width: 768px) {
  .about .method__box {
    width: 35.4545454545%;
  }
}
@media screen and (min-width: 768px) {
  .about .method__img {
    margin-left: 11.8181818182%;
  }
}
.about .method__background {
  background-color: #fff;
}
.about .commitment {
  position: relative;
}
.about .commitment .commitment-img {
  position: relative;
  background-color: #f5f5f5;
}
.about .commitment__background {
  max-width: 100%;
  background-color: #f8f9fa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 768px) {
  .about .commitment__item {
    max-width: 490px;
  }
}
@media screen and (min-width: 768px) {
  .about .commitment__visual {
    width: 53.5714285714%;
  }
}
@media screen and (min-width: 1040px) {
  .about .commitment__visual {
    margin-top: -75px !important;
    transform: translateX(80px);
  }
}
.about .commitment__card {
  padding-right: 0;
  padding-left: 0;
}
@media screen and (min-width: 768px) {
  .about .commitment__card {
    width: calc(50% - 15px);
    max-width: 400px;
  }
}
@media screen and (min-width: 768px) {
  .about .commitment__card + .commitment__card {
    margin-left: 30px;
  }
}
.about .commitment__map {
  background: url(../img/japan.png) no-repeat center top/contain;
}
@media screen and (min-width: 768px) {
  .about .commitment__map {
    background: url(../img/japan.png) no-repeat 50% 50%/contain;
  }
}
@media screen and (min-width: 768px) {
  .about .commitment__box {
    width: 55.0295857988%;
  }
}
@media screen and (min-width: 768px) {
  .about .commitment__pic {
    width: 39.7633136095%;
  }
}
.about .commitment__lists {
  display: inline-block;
  position: relative;
  padding-right: 17px;
  padding-left: 24px;
}
@media screen and (min-width: 768px) {
  .about .commitment__lists {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 400px;
  }
}
@media screen and (max-width: 767px) {
  .about .commitment__lists {
    width: 100%;
  }
}
.about .commitment__lists::before, .about .commitment__lists::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 100px;
}
@media screen and (min-width: 768px) {
  .about .commitment__lists::before, .about .commitment__lists::after {
    height: 65px;
  }
}
.about .commitment__lists::before {
  left: 0;
  background: url(../img/brackets-commitment-left_sp.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .about .commitment__lists::before {
    width: 7px;
    background: url(../img/brackets-commitment-left_pc.png) no-repeat center center/contain;
  }
}
.about .commitment__lists::after {
  right: 0;
  background: url(../img/brackets-commitment-right_sp.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .about .commitment__lists::after {
    background: url(../img/brackets-commitment-right_pc.png) no-repeat center center/contain;
  }
}
.about .commitment__list {
  padding-left: 5px;
}
@media screen and (max-width: 767px) {
  .about .commitment__list {
    padding-left: 55px;
    font-feature-settings: "palt";
    letter-spacing: 0.16em !important;
  }
}
@media screen and (min-width: 768px) {
  .about .commitment__list {
    width: calc(50% - 5px);
    max-width: 175px;
  }
}
@media screen and (min-width: 768px) {
  .about .commitment__list:nth-child(2n) {
    margin-left: 5px;
  }
}
.about .our-standard {
  position: relative;
}
.about .our-standard__card {
  background-color: #f5f6f0;
}
@media screen and (min-width: 768px) {
  .about .our-standard__card {
    width: 49%;
  }
}
.about .our-standard__title .underline {
  padding-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .about .our-standard__title .underline {
    border-bottom: 2px solid #c3c5bf;
  }
}
@media screen and (max-width: 767px) {
  .about .our-standard__title .underline {
    width: max-content;
    display: block;
    margin: 0 auto;
    border-bottom: 2px solid #c3c5bf;
  }
}
.about .our-standard__check {
  position: relative;
  padding-left: 25px;
}
.about .our-standard__check::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: url(../img/icon-check.png) no-repeat center center/contain;
}
.about .our-standard__text {
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .about .our-standard #sp-reposition1 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .about .our-standard #sp-reposition1 p {
    display: inline;
  }
  .about .our-standard #sp-reposition1 p:first-child {
    margin-right: 5px;
  }
}
.about .fragrance {
  position: relative;
  background-color: #fff;
}
.about .our-mind {
  position: relative;
  background-color: #f5f5f5;
}
.about .our-mind__img {
  width: calc(33.3333333333% - 5px);
}
@media screen and (min-width: 768px) {
  .about .our-mind__img {
    width: calc(33.3333333333% - 16.6666666667px);
  }
}
.about .our-mind__img + .our-mind__img {
  margin-left: 7.5px;
}
@media screen and (min-width: 768px) {
  .about .our-mind__img + .our-mind__img {
    margin-left: 25px;
  }
}
@media screen and (min-width: 768px) {
  .about .sustainable__left {
    display: block;
    width: 41.8181818182%;
  }
}
@media screen and (min-width: 768px) {
  .about .sustainable__right {
    display: block;
    width: 56.3636363636%;
    margin-left: 1.8181818182%;
  }
}
@media screen and (min-width: 1240px) {
  .about .sustainable__right {
    transform: translateX(70px);
  }
}
.about .sustainable__list-title {
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .about .sustainable__list-title {
    font-weight: 400;
  }
}