@charset "utf-8";

:root {
  --color_08: #15722c;
  --color_09: #717071;
}

.desc_detail5 sup{
  position: relative;
  top: -.1em;
  font-size: .6em;
}

.brandAbout_area .area_inner {
  width: 90rem;
  margin: 0 auto;
  padding-top: 8rem;
}

.brandAbout_area .area_ttl {
  margin-bottom: 4rem;
  padding: 2.4rem 0;
  border-top: solid #808080;
  border-bottom: solid #808080;
  border-width: .1rem;
  font-size: 2rem;
}

.brandAbout {
  padding-bottom: 4.6rem;
  border-bottom: solid .1rem #808080;
}

.brandAbout h4 {
  margin-bottom: 3.4rem;
  font-size: 1.8rem;
}

.brandAbout>div {
  display: flex;
  justify-content: space-between;
  gap: 6rem;
}

.brandAbout p {
  font-size: 1.4rem;
  line-height: 2;
  text-align: justify;
}

.brandAbout p sup {
  font-size: 1rem;
}

.brandAbout figure {
  width: 38.4rem;
  margin-top: .7rem;
  flex-shrink: 0;
}

.brandConcept {
  margin-top: 6rem;
  padding-bottom: 7.9rem;
  border-bottom: solid .1rem #808080;
}

.brandConcept h4 {
  margin-bottom: 2.3rem;
  font-size: 2rem;
  text-align: center;
}

.brandConcept>p {
  margin-bottom: 4rem;
  font-size: 1.4rem;
  line-height: calc(30.8/14);
  text-align: center;
}

.brandFeature_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
}

.each_feature h5 {
  margin-bottom: 2.8rem;
  padding: 1.3rem 0;
  background: #138b4b;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
}

.each_feature h6 {
  margin-top: 3rem;
  margin-bottom: 2rem;
  font-size: 1.6rem;
}

.each_feature:nth-of-type(2) h6 {
  text-align: center;
}

.each_feature>p {
  font-size: 1.3rem;
  line-height: 2;
  text-align: justify;
}

.each_feature:nth-of-type(2)>p {
  font-size: 1.2rem;
  text-align: center;
}

.each_feature:nth-of-type(2)>p .txt_L {
  display: block;
  margin-top: .8rem;
  font-size: 1.5rem;
}

.each_feature:nth-of-type(1) dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

.each_feature:nth-of-type(1) dt {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
  font-size: 1.6rem;
  letter-spacing: .05em;
  text-align: center;
}

.each_feature:nth-of-type(1) dt::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  height: .8rem;
  margin-bottom: -.3rem;
  content: "";
}

.each_feature:nth-of-type(1) dl>div:nth-of-type(1) dt::before {
  width: 10.4rem;
  height: .8rem;
  background: #cdefdd;
}

.each_feature:nth-of-type(1) dl>div:nth-of-type(2) dt::before {
  width: 21rem;
  height: .8rem;
  background: #cdefdd;
}

.each_feature:nth-of-type(1) dd figure {
  width: 16.5rem;
  margin: 0 auto 2rem;
}

.each_feature dl div:nth-of-type(2) dd figure {
  width: 14.3rem;
}

.each_feature:nth-of-type(1) dd p {
  font-size: 1.1rem;
  line-height: 2;
  text-align: justify;
}

.fragrance_wrap {
  position: relative;
  margin-top: 1rem;
}

.fragrance_wrap figure {
  width: 38.5rem;
  margin: 32px auto 0;
  margin-left: 3.3rem;
}

.fragrance_wrap dl {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3.2rem;
  margin-left: 3.3rem;
}

.fragrance_wrap dl>div:nth-of-type(1),
.fragrance_wrap dl>div:nth-of-type(3) {
  width: 13rem;
  margin-top: 6.5rem;
}

.fragrance_wrap dl>div:nth-of-type(1) {
  margin-right: 1.5rem;
  text-align: right;
}


.fragrance_wrap dl>div:nth-of-type(2) {
  text-align: center;
}

.fragrance_wrap dl>div:nth-of-type(3) {
  margin-left: 1.5rem;
}

.fragrance_wrap dl>div:nth-of-type(4),
.fragrance_wrap dl>div:nth-of-type(5) {
  width: 16.5rem;
  margin-top: 22.2rem;
}

.fragrance_wrap dl>div:nth-of-type(4) {
  padding-right: 2rem;
  text-align: right;
}

.fragrance_wrap dl>div:nth-of-type(5) {
  padding-left: 2rem;
}

.fragrance_wrap dt {
  margin-bottom: .9rem;
  font-size: 1.3em;
  color: #138b4b;
  text-align: center;
}

.fragrance_wrap dd {
  font-size: .9rem;
  line-height: calc(16.2/9);
  white-space: nowrap;
  text-align: center;
}

.fragrance_wrap dl>div:nth-of-type(2) dd {}

.notes {
  width: 90rem;
  margin: 5.5rem auto 0;
  font-size: 1rem;
  line-height: calc(18/10) !important;
  text-align: justify;
}

@media screen and (max-width:768px) {

  .brandAbout_area .area_inner {
    width: calc(640 * (100vw / 750));
    padding-top: calc(119 * (100vw / 750));
  }

  .brandAbout_area .area_ttl {
    margin-bottom: calc(41 * (100vw / 750));
    padding: calc(44 * (100vw / 750)) 0 calc(35 * (100vw / 750));
    border-width: calc(2 * (100vw / 750));
    font-size: calc(34 * (100vw / 750));
  }

  .brandAbout {
    padding-bottom: calc(80 * (100vw / 750));
    border-width: calc(2 * (100vw / 750));
  }

  .brandAbout h4 {
    margin: 0 auto calc(33 * (100vw / 750));
    font-size: calc(32 * (100vw / 750));
    line-height: calc(57.6/32);
  }

  .brandAbout>div {
    display: block;
  }

  .brandAbout p {
    font-size: calc(24 * (100vw / 750));
    text-align: justify;
  }

  .brandAbout p sup {
    font-size: calc(15 * (100vw / 750));
  }

  .brandAbout figure {
    width: calc(640 * (100vw / 750));
    margin-top: calc(54 * (100vw / 750));
  }

  .brandConcept {
    margin-top: calc(82 * (100vw / 750));
    padding-bottom: calc(84 * (100vw / 750));
    border-width: calc(2 * (100vw / 750));
  }

  .brandConcept h4 {
    margin-bottom: calc(30 * (100vw / 750));
    font-size: calc(36 * (100vw / 750));
  }

  .brandConcept>p {
    margin-bottom: calc(72 * (100vw / 750));
    font-size: calc(24 * (100vw / 750));
  }

  .brandFeature_wrap {
    display: block;
  }

  .each_feature:nth-of-type(n+2) {
    margin-top: calc(60 * (100vw / 750));
  }

  .each_feature h5 {
    margin-bottom: calc(50 * (100vw / 750));
    padding: calc(19 * (100vw / 750)) 0;
    font-size: calc(24 * (100vw / 750));
  }

  .each_feature h5 sup {
  }

  .each_feature h6 {
    margin: 0 auto calc(30 * (100vw / 750));
    font-size: calc(28 * (100vw / 750));
  }

  .each_feature:nth-of-type(2) h6 {
    margin-bottom: calc(30 * (100vw / 750));
    letter-spacing: .05em;
  }

  .each_feature>p {
    font-size: calc(22 * (100vw / 750));
  }

  .each_feature:nth-of-type(2)>p {
    font-size: calc(20 * (100vw / 750));
  }

  .each_feature:nth-of-type(2)>p .txt_L {
    margin-top: calc(12 * (100vw / 750));
    font-size: calc(26 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dl {
    display: block;
    margin-top: calc(36 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dl>div:nth-of-type(n+2) {
    margin-top: calc(41 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dt {
    margin-bottom: calc(48 * (100vw / 750));
    font-size: calc(28 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dt::before {
    height: calc(18 * (100vw / 750));
    margin-bottom: calc(-5 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dl>div:nth-of-type(1) dt::before {
    width: calc(180 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dl>div:nth-of-type(2) dt::before {
    width: calc(360 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dd figure {
    width: calc(332 * (100vw / 750));
    margin: 0 auto calc(30 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dl>div:nth-of-type(2) dd figure {
    width: calc(270 * (100vw / 750));
    margin: 0 auto calc(27 * (100vw / 750));
  }

  .each_feature:nth-of-type(1) dd p {
    font-size: calc(20 * (100vw / 750));
  }

  .fragrance_wrap {
    /* width: 100vw; */
    /* margin: calc(62 * (100vw / 750)) calc(50% - 50vw) 0; */
  }

  .fragrance_wrap figure {
    width: calc(664 * (100vw / 750));
    margin: calc(53 * (100vw / 750)) auto 0;
  }

  .fragrance_wrap dl>div:nth-of-type(1),
  .fragrance_wrap dl>div:nth-of-type(3) {
    width: calc(182 * (100vw / 750));
    margin-top: calc(95 * (100vw / 750));
  }

  .fragrance_wrap dl>div:nth-of-type(1) {
    margin-right: calc(30 * (100vw / 750));
  }

  .fragrance_wrap dl>div:nth-of-type(3) {
    margin-left: calc(30 * (100vw / 750));
  }

  .fragrance_wrap dl>div:nth-of-type(4),
  .fragrance_wrap dl>div:nth-of-type(5) {
    width: calc(230 * (100vw / 750));
    margin-top: calc(265 * (100vw / 750));
  }

  .fragrance_wrap dl>div:nth-of-type(4) {
    padding-right: calc(30 * (100vw / 750));
  }

  .fragrance_wrap dl>div:nth-of-type(5) {
    padding-left: calc(30 * (100vw / 750));
  }

  .fragrance_wrap dt {
    margin-bottom: calc(17 * (100vw / 750));
    font-size: calc(24 * (100vw / 750));
  }

  .fragrance_wrap dd {
    font-size: calc(18 * (100vw / 750));
    line-height: 1.77;
  }

  .fragrance_wrap dl>div:nth-of-type(2) dd {
    line-height: 1.77;
  }

  .notes {
    width: calc(600 * (100vw / 750));
    margin: calc(74 * (100vw / 750)) auto 0;
    font-size: calc(18 * (100vw / 750));
  }
}