@charset "UTF-8";
/*----- topics_2026-05-11 -----*/
/* ------------------------------------------------
  color
------------------------------------------------ */
:root {
  --text-color: #615255;
}

#stage #header {
  background-color: transparent !important;
}
#stage #header > .inner > .logo a {
  background-color: var(--text-color);
}

#wrapper {
  color: var(--text-color);
  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: var(--text-color);
  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(var(--text-color), 0.1) !important;
}
#article .inner .annotation {
  line-height: 1.7;
}

#footer {
  color: #fff !important;
  background-color: var(--text-color);
}
#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;
}
#footer .social_menu .x {
  aspect-ratio: 51/45;
}
#footer .social_menu .x a {
  -webkit-mask-image: url(/images/common/sns1.svg);
          mask-image: url(/images/common/sns1.svg);
}
#footer .social_menu .instagram {
  aspect-ratio: 46/45;
}
#footer .social_menu .instagram a {
  -webkit-mask-image: url(/images/common/sns2.svg);
          mask-image: url(/images/common/sns2.svg);
}
#footer .social_menu .tiktok {
  aspect-ratio: 41/45;
}
#footer .social_menu .tiktok a {
  -webkit-mask-image: url(/images/common/sns3.svg);
          mask-image: url(/images/common/sns3.svg);
}

#btn_menu .open {
  background-color: var(--text-color);
}

/* ------------------------------------------------
 本文
------------------------------------------------ */
#article.section h1 {
  text-align: center;
}
#article.section h1 span.small {
  text-align: center;
  text-indent: 0.5em;
  margin-top: 0;
  margin-bottom: 0.5384615385em;
}
#article.section h1 + .logo {
  margin: 3.5rem auto 5.4rem;
  width: 27.3rem;
}
#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.8rem;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.7rem;
  position: relative;
  z-index: 1;
}
#article.section .headding .txt img {
  width: auto;
  height: 100%;
}
#article.section .headding.onlytxt .txt {
  margin: 0 auto;
}
#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;
  font-weight: bold;
}
#article.section .online_shop {
  text-align: center;
}
#article.section .online_shop .title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
#article.section .online_shop .copy {
  font-size: 1.2rem;
}
#article.section .online_shop .btns {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  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 * {
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  border: none;
  background-color: var(--text-color);
  padding: 1.8rem 0;
  display: block;
}
#article.section .online_shop .link_more.btn_buy .disabled {
  color: #948e8f;
  background-color: #dadada;
}

/* ----------------------------
 concept
------------------------------*/
#concept .headding {
  margin-left: -3.6rem;
  width: 50%;
}
#concept .headding .txt {
  margin-left: 2.6rem;
}
#concept .headding .img {
  width: 30.3rem;
}

/* ----------------------------
 fragrance
------------------------------*/
#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 .l1 + p {
  margin-top: 1.6666666667em;
}
#fragrance .body .pyramid {
  margin: 0 auto;
  margin-top: 4.5rem !important;
  width: 27.9rem;
}
#fragrance .body .pyramid .annotation {
  font-size: 0.9rem;
}

/* ----------------------------
 design
------------------------------*/
#design.txt {
  margin-top: 9rem !important;
}
#design.txt .headding {
  margin-right: -3.6rem;
}
#design.txt .headding .txt {
  margin-left: 0.5rem;
  height: 3.6rem;
}
#design.txt .body {
  margin-top: 5rem;
  display: flex;
  flex-direction: column-reverse;
  -moz-column-gap: 10%;
       column-gap: 10%;
  row-gap: 5rem;
}
#design.txt .body .img {
  margin-left: -3.6rem;
  width: 23.5rem;
}
#design.txt .body .txt {
  flex: 1;
}
#design.txt .body .txt p + p {
  margin-top: 2.2222222222em;
}

/* ----------------------------
 goods
------------------------------*/
#goods.txt {
  margin-top: 9rem !important;
}
#goods.txt .body .column {
  margin-top: 4rem;
  align-items: center;
}
#goods.txt .body .column + .column {
  margin-top: 4.5rem;
}
#goods.txt .body .column .img + .txt {
  text-align: left;
  margin-top: 2.5rem;
}
#goods.txt .body .column .txt {
  flex: 1;
}
#goods.txt .body .column .txt p + p {
  margin-top: 1rem;
}
#goods.txt .body .column .txt .annotation {
  font-size: 1rem;
  margin-top: 0.5rem;
}
#goods.txt .body .column:nth-of-type(2) {
  flex-direction: row-reverse;
}

/* ----------------------------
 experience
------------------------------*/
#experience.txt {
  margin-top: 9rem !important;
}
#experience.txt .body {
  margin-top: 4rem;
}
#experience.txt .body.column {
  align-items: center;
}
#experience.txt .body.column + .column {
  margin-top: 6rem;
}
#experience.txt .body.column .txt {
  margin-top: 2.5rem;
  margin-right: -1em;
  flex: 1;
}
#experience.txt .body.column .txt h3 {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}
#experience.txt .body.column .txt h3 i {
  font-size: 1.2rem;
  font-style: normal;
}
#experience.txt .body.column .txt p + p {
  margin-top: 1.1111111111em;
}
#experience.txt .body.column .txt .annotation {
  font-size: 1rem;
  margin-top: 0.8rem;
}

/* ----------------------------
 collection
------------------------------*/
#article #collection h2 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 7.5rem;
}
#article #collection h2 span {
  line-height: 1;
  display: block;
}
#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;
  font-weight: bold;
}
#article #collection .item {
  margin-top: 4rem;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr;
  row-gap: 2.2rem;
}
#article #collection .item + .item {
  margin-top: 5rem;
}
#article #collection .item .package {
  background-color: #ede7e8;
  padding: 4rem 0;
}
#article #collection .item .package .ph {
  margin: 0 auto;
  width: 22.7rem;
  display: block;
}
#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;
  display: block;
}
#article #collection .item .detail .bottles .txt {
  line-height: 1;
  margin-top: 0;
}
#article #collection .item .detail .bottles .txt .name {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-right: -1em;
}
#article #collection .item .detail .bottles .txt .copy {
  font-size: 1.2rem;
  margin-top: 1rem !important;
}
#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 {
  padding: 3rem 0;
}
#article #collection .item.water .package .ph {
  width: 4.8rem;
}
#article #collection .item.water .detail {
  text-align: center;
}
#article #collection .item.water .detail .bottles .txt .name {
  margin-right: 0;
}
#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.8rem;
  font-weight: bold;
  text-align: center;
  margin-top: 4rem;
}
#article #collection .annotation {
  font-size: 0.9rem;
  margin: 1rem auto 0;
}