@charset "UTF-8";
/*----- topics_2026-05-11 -----*/
/* ------------------------------------------------
  color
------------------------------------------------ */
#stage #header {
  background-color: transparent !important;
}
#stage #header > .inner > .logo a {
  background-color: #615255;
}

#wrapper {
  color: #615255;
  background-color: #f2f2f2;
}

#article .inner h1,
#article .inner .date,
#article .inner .txt,
#article .inner .btn_back a {
  color: inherit;
}
#article .inner .btn_back a::after {
  background-color: #615255;
  background-image: none;
  -webkit-mask: url(../images/common/link_arrow0.svg) 0 0 no-repeat;
          mask: url(../images/common/link_arrow0.svg) 0 0 no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
#article .inner .btn_back a:hover {
  background-color: rgba(97, 82, 85, 0.1) !important;
}
#article .inner .annotation {
  line-height: 1.7;
}

#footer {
  color: #fff !important;
  background-color: #615255;
}
#footer a,
#footer .copyright {
  color: #fff !important;
}
#footer .logo a, #footer .logo span {
  background-color: #fff;
  aspect-ratio: 188/66;
  display: block;
  -webkit-mask: url(../images/common/header_logo.svg) center no-repeat;
          mask: url(../images/common/header_logo.svg) center no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#footer .social_menu li a {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#footer .social_menu .social_x {
  aspect-ratio: 51/45;
}
#footer .social_menu .social_x a {
  -webkit-mask-image: url(../images/common/sns1.svg);
          mask-image: url(../images/common/sns1.svg);
}
#footer .social_menu .social_instagram {
  aspect-ratio: 46/45;
}
#footer .social_menu .social_instagram a {
  -webkit-mask-image: url(../images/common/sns2.svg);
          mask-image: url(../images/common/sns2.svg);
}
#footer .social_menu .social_tiktok {
  aspect-ratio: 41/45;
}
#footer .social_menu .social_tiktok a {
  -webkit-mask-image: url(../images/common/sns3.svg);
          mask-image: url(../images/common/sns3.svg);
}

@media screen and (max-width: 640px) {
  #btn_menu .open {
    background-color: #615255;
  }
}
/* ------------------------------------------------
 menu
------------------------------------------------ */
@media screen and (min-width: 641px) {
  #menu li a {
    position: relative;
  }
  #menu li a .txt, #menu li a::after {
    background-color: #615255;
  }
}
/* ------------------------------------------------
 本文
------------------------------------------------ */
@media screen and (min-width: 1220.1px) {
  #article {
    font-size: 18px;
  }
}
@media screen and (max-width: 1220px) and (min-width: 640.1px) {
  #article {
    font-size: max(1rem, 1.2093934426vw);
  }
}

#article.section h1 {
  text-align: center;
}
#article.section h1 span.small {
  text-align: center;
  text-indent: 0.5em;
  margin-bottom: 0.1818181818em;
}
#article.section h1 + .logo {
  margin: 3.5rem auto 5.4rem;
  width: 54.6rem;
  width: 30.3333333333em;
}
#article.section .headding {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0;
}
#article.section .headding > span {
  display: block;
}
#article.section .headding .txt {
  line-height: 1;
  margin-bottom: -0.8333333333em;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.6666666667em;
  position: relative;
  z-index: 1;
}
#article.section .headding .txt img {
  width: auto;
  height: 100%;
}
#article.section .headding.onlytxt .txt {
  margin: 0 auto;
}
@media screen and (min-width: 640.1px) {
  #article.section .headding.onlytxt .txt {
    height: 4.1111111111em;
  }
}
#article.section .column {
  margin-top: 6.6666666667em;
}
#article.section .column .body strong.ll {
  font-size: 1.5555555556em;
  font-weight: bold;
}
#article.section .online_shop {
  text-align: center;
}
#article.section .online_shop .title {
  font-size: 1.5555555556em;
  font-weight: bold;
  margin-bottom: 0.2142857143em;
}
#article.section .online_shop .copy {
  font-size: 1em;
}
#article.section .online_shop .soon {
  margin-left: auto;
  margin-right: auto;
  width: 41.6666666667em;
  display: flex;
  align-items: center;
  -moz-column-gap: 1.6666666667em;
       column-gap: 1.6666666667em;
}
#article.section .online_shop .soon::before, #article.section .online_shop .soon::after {
  content: "";
  border-top: 1px solid #615255;
  flex: 1;
}
#article.section .online_shop .soon span {
  font-size: 1em;
  line-height: 1;
  margin-top: -0.5em;
}
#article.section .online_shop .btns {
  margin-top: 1.4444444444em;
  display: flex;
  justify-content: center;
  -moz-column-gap: 1.3333333333em;
       column-gap: 1.3333333333em;
}
#article.section .online_shop .link_more {
  margin: 0;
}
#article.section .online_shop .link_more.btn_buy {
  width: 13em;
}
#article.section .online_shop .link_more.btn_buy * {
  color: #fff;
  font-size: 0.8888888889em;
  text-decoration: none;
  line-height: 1;
  border-radius: 100rem;
  background-color: #615255;
  padding: 1.375em 0;
  display: block;
  width: auto;
}
#article.section .online_shop .link_more.btn_buy .disabled {
  color: #948e8f;
  background-color: #dadada;
}
@media screen and (min-width: 640.1px) {
  #article.section .txt {
    font-size: 1em;
  }
  #article.section .column {
    font-size: 1em;
    display: flex;
    -moz-column-gap: 5.5555555556em;
         column-gap: 5.5555555556em;
  }
  #article.section .column .body {
    margin-top: 3.8888888889em;
    margin-right: -1em;
    flex: 1;
  }
  #article.section .column .body p + p,
  #article.section .column .body * + .txt {
    margin-top: 2.2222222222em;
  }
}
@media screen and (max-width: 1220px) and (min-width: 640.1px) {
  #article.section .column {
    -moz-column-gap: 2.7777777778em;
         column-gap: 2.7777777778em;
  }
  #article.section .column .body {
    font-size: 0.9444444444em;
  }
}
@media screen and (max-width: 640px) {
  #article.section h1 {
    text-align: center;
  }
  #article.section h1 span.small {
    margin-bottom: 0.5384615385em;
  }
  #article.section h1 + .logo {
    margin-top: 3.5rem;
    margin-bottom: 5.4rem;
    width: 27.3rem;
  }
  #article.section .headding .txt {
    margin-bottom: -0.8rem;
    height: 3.7rem;
  }
  #article.section .column {
    margin-top: 6rem;
  }
  #article.section .column .headding + .body {
    margin-top: 5.2rem;
  }
  #article.section .column .body strong.ll {
    font-size: 1.5em;
  }
  #article.section .online_shop .title {
    font-size: 1.8rem;
  }
  #article.section .online_shop .copy {
    font-size: 1.2rem;
  }
  #article.section .online_shop .soon {
    margin-top: 2rem;
    width: 21.5rem;
    -moz-column-gap: 1.3rem;
         column-gap: 1.3rem;
  }
  #article.section .online_shop .soon span {
    font-size: 1.3rem;
  }
  #article.section .online_shop .btns {
    margin-top: 2rem;
    flex-direction: column;
    align-items: center;
    row-gap: 1.5em;
  }
  #article.section .online_shop .link_more {
    margin: 0;
  }
  #article.section .online_shop .link_more.btn_buy {
    width: 21.5rem;
  }
  #article.section .online_shop .link_more.btn_buy * {
    font-size: 1.4rem;
    padding: 1.8rem 0;
  }
}

/* ----------------------------
 concept
------------------------------*/
#concept .headding {
  width: 50%;
}
#concept .headding .txt {
  margin-left: 0.2rem;
}
@media screen and (max-width: 640px) {
  #concept .headding {
    margin-left: -3.6rem;
  }
  #concept .headding .txt {
    margin-left: 2.6rem;
  }
  #concept .headding .img {
    width: 30.3rem;
  }
}

/* ----------------------------
 fragrance
------------------------------*/
#fragrance .headding {
  width: 50%;
}
#fragrance .headding .txt {
  margin-left: 0.6666666667em;
}
#fragrance .body .l1 + p {
  margin-top: 1.6666666667em;
}
#fragrance .body .pyramid {
  margin: 0 auto;
  margin-top: 3.3333333333em !important;
  width: 20.1111111111em;
}
#fragrance .body .pyramid .annotation {
  font-size: 0.6666666667em;
  text-align: right;
  margin-top: 0.25em;
  display: block;
}
@media screen and (max-width: 640px) {
  #fragrance {
    margin-top: 10rem !important;
  }
  #fragrance .headding {
    margin-left: -3.6rem;
  }
  #fragrance .headding .txt {
    margin-left: 2.6rem;
  }
  #fragrance .headding .img {
    width: 30.3rem;
  }
  #fragrance .body .pyramid {
    margin-top: 4.5rem !important;
    width: 27.9rem;
  }
  #fragrance .body .pyramid .annotation {
    font-size: 0.9rem;
  }
}

/* ----------------------------
 design
------------------------------*/
#design.txt {
  margin-top: 12.7777777778em !important;
}
#design.txt .headding {
  margin-left: auto;
  width: 70%;
}
#design.txt .headding .txt {
  margin-left: 0.5555555556em;
}
#design.txt .body {
  margin-top: 5.5555555556em;
  display: flex;
  -moz-column-gap: 10%;
       column-gap: 10%;
}
#design.txt .body .img {
  width: 40%;
}
#design.txt .body .txt {
  margin-top: 3.3333333333em;
  flex: 1;
}
#design.txt .body .txt p + p {
  margin-top: 2.2222222222em;
}
@media screen and (max-width: 640px) {
  #design.txt {
    margin-top: 9rem !important;
  }
  #design.txt .headding {
    width: 33.5rem;
  }
  #design.txt .headding .txt {
    height: 3.6rem;
  }
  #design.txt .body {
    margin-top: 5rem;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  #design.txt .body .img {
    margin-left: -3.6rem;
    width: 23.5rem;
  }
  #design.txt .body .txt {
    margin-top: 0;
  }
}

/* ----------------------------
 goods
------------------------------*/
#goods.txt {
  margin-top: 10em !important;
}
#goods.txt .body .column {
  margin-top: 3.3333333333em;
  align-items: center;
}
#goods.txt .body .column + .column {
  margin-top: 4.4444444444em;
}
#goods.txt .body .column .img {
  width: 60%;
}
#goods.txt .body .column .txt {
  flex: 1;
}
#goods.txt .body .column .txt p + p {
  margin-top: 1.1111111111em;
}
#goods.txt .body .column .txt .annotation {
  font-size: 0.6666666667em;
  margin-top: 1.6666666667em;
}
#goods.txt .body .column:nth-of-type(2) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 640px) {
  #goods.txt {
    margin-top: 9rem !important;
  }
  #goods.txt .body .img + .txt {
    text-align: left;
    margin-top: 2.5rem;
  }
  #goods.txt .body .column {
    margin-top: 4rem;
  }
  #goods.txt .body .column + .column {
    margin-top: 4.5rem;
  }
  #goods.txt .body .column .img {
    width: auto;
  }
  #goods.txt .body .column .txt .annotation {
    font-size: 1rem;
    margin-top: 0.5rem;
  }
}

/* ----------------------------
 experience
------------------------------*/
#experience.txt {
  margin-top: 10em !important;
}
#experience.txt .body {
  margin-top: 4.4444444444em;
}
#experience.txt .body .img + .caption {
  text-align: center;
  margin-top: 2.2222222222em;
}
#experience.txt .body.column {
  align-items: center;
}
#experience.txt .body.column + .column {
  margin-top: 6.6666666667em;
}
#experience.txt .body.column .img {
  width: 50%;
}
#experience.txt .body.column .txt {
  flex: 1;
}
#experience.txt .body.column .txt h3 {
  font-size: 1.5555555556em;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin-top: 0;
}
#experience.txt .body.column .txt h3 i {
  font-size: 0.6428571429em;
  font-style: normal;
}
#experience.txt .body.column .txt p + p {
  margin-top: 1.1111111111em;
}
#experience.txt .body.column .txt .annotation {
  font-size: 0.7777777778em;
  margin-top: 1.1428571429em;
}
@media screen and (max-width: 640px) {
  #experience.txt {
    margin-top: 9rem !important;
  }
  #experience.txt .body {
    margin-top: 4rem;
  }
  #experience.txt .body.column + .column {
    margin-top: 6rem;
  }
  #experience.txt .body.column .img {
    width: auto;
  }
  #experience.txt .body.column .txt {
    margin-top: 2.5rem;
    margin-right: -1em;
  }
  #experience.txt .body.column .txt h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  #experience.txt .body.column .txt h3 i {
    font-size: 1.2rem;
  }
  #experience.txt .body.column .txt .annotation {
    font-size: 1rem;
  }
}

/* ----------------------------
 collection
------------------------------*/
#article #collection h2 {
  font-size: 1em;
  font-weight: 500;
  margin-top: 11.1111111111em;
}
#article #collection h2 span {
  line-height: 1;
  display: block;
}
#article #collection h2 .s {
  font-size: 1.3333333333em;
}
#article #collection h2 .en {
  margin-top: 1.6666666667em;
  margin-bottom: 0.8888888889em;
}
#article #collection h2 .ja {
  font-size: 1.5555555556em;
  font-weight: bold;
}
#article #collection .item {
  margin-top: 4.4444444444em;
  display: grid;
  align-items: center;
  grid-template-columns: 60% auto;
  -moz-column-gap: 10%;
       column-gap: 10%;
}
#article #collection .item + .item {
  margin-top: 7.7777777778em;
}
#article #collection .item .package {
  background-color: #ede7e8;
  padding: 4.1666666667em 0;
}
#article #collection .item .package .ph {
  margin: 0 auto;
  width: 25em;
  width: 75%;
  display: block;
}
#article #collection .item .package .ph img {
  filter: drop-shadow(0px 0.3333333333em 1.1111111111em #bebebe);
}
#article #collection .item .detail .bottles .ph {
  width: 8.7777777778em;
  display: block;
}
#article #collection .item .detail .bottles .txt {
  line-height: 1;
  margin-top: 1em;
}
#article #collection .item .detail .bottles .txt .name {
  font-size: 1.6666666667em;
  font-weight: bold;
  margin-right: -1em;
}
#article #collection .item .detail .bottles .txt .copy {
  font-size: 1em;
  margin-top: 0.9em;
}
#article #collection .item .detail .spec {
  font-size: 0.7777777778em;
  letter-spacing: 0;
  line-height: 1.7;
  margin-top: 2.4285714286em;
}
#article #collection .item .detail .note {
  font-size: 0.6666666667em;
  margin-top: 2.8333333333em;
}
#article #collection .item.smooth .package {
  background-color: #e5e5eb;
}
#article #collection .item.water .package .ph {
  width: 5.3333333333em;
}
#article #collection .item.water .detail .spec {
  margin-top: 0.8571428571em;
}
#article #collection .item.water .detail .note {
  margin-top: 1.6666666667em;
}
#article #collection .release_date {
  font-size: 1.5555555556em;
  font-weight: bold;
  text-align: center;
  margin-top: 3.9285714286em;
}
#article #collection .annotation {
  font-size: 0.6666666667em;
  margin: 1.6666666667em 8.3333333333em 0;
}
@media screen and (max-width: 640px) {
  #article #collection h2 {
    font-size: 1.2rem;
    margin-top: 7.5rem;
  }
  #article #collection h2 .s {
    font-size: 1.3333333333em;
  }
  #article #collection h2 .en {
    margin-top: 1.1666666667em;
    margin-bottom: 0.8333333333em;
  }
  #article #collection h2 .ja {
    font-size: 1.5em;
  }
  #article #collection .item {
    margin-top: 4rem;
    grid-template-columns: 1fr;
    row-gap: 2.2rem;
  }
  #article #collection .item + .item {
    margin-top: 5rem;
  }
  #article #collection .item .package {
    padding: 4rem 0;
  }
  #article #collection .item .package .ph {
    width: 22.7rem;
  }
  #article #collection .item .package .ph img {
    filter: drop-shadow(0px 0.3rem 1rem #bebebe);
  }
  #article #collection .item .detail .bottles {
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 1.2rem;
         column-gap: 1.2rem;
  }
  #article #collection .item .detail .bottles .ph {
    width: 8.3rem;
  }
  #article #collection .item .detail .bottles .txt {
    line-height: 1;
    margin-top: 0;
  }
  #article #collection .item .detail .bottles .txt .name {
    font-size: 1.8rem;
  }
  #article #collection .item .detail .bottles .txt .copy {
    font-size: 1.2rem;
  }
  #article #collection .item .detail .spec {
    font-size: 1rem;
    margin-top: 2rem;
  }
  #article #collection .item .detail .note {
    font-size: 0.9rem;
    margin-top: 0.4rem !important;
  }
  #article #collection .item.water .package {
    padding: 3rem 0;
  }
  #article #collection .item.water .package .ph {
    width: 4.8rem;
  }
  #article #collection .item.water .detail {
    text-align: center;
  }
  #article #collection .release_date {
    font-size: 1.8rem;
    margin-top: 4rem;
  }
  #article #collection .annotation {
    font-size: 0.9rem;
    margin: 1rem auto 0;
  }
}