@charset "utf-8";
main[role="main"] {
    overflow: visible;
  }
main *,
::after,
::before {
  box-sizing: border-box;
}
body main {
	text-size-adjust: 100%;
  color: #282828;
  font-family: "Noto Sans JP";
  font-weight: 400;
  line-height: 1.5 !important;
}
main img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.content-container {
  max-width: 1200px;
  margin: 0 auto;
}
.content-ttl {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(39px, 4.33vw, 52px);
  font-weight: bold;
}
.sp-only {
  display: none;
}

@media screen and (max-width: 1200px) {
  .content-container {
    padding: 0 15px;
  }
}

@media screen and (max-width: 767px) {
  main {
    margin-bottom: 0;
  }
  .content-container {
    padding: 0 15px;
  }
  .content-ttl {
    font-size: min(8.53vw, 48px);
  }
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}

/* ----animation---- */
.fade-in.inview {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s;
}
.fade-in.inview.active {
  opacity: 1;
  transform: translateY(0px);
}
.fade-in-right.inview {
  opacity: 0;
  transform: translateX(-30px);
  transition: .5s ease-in-out;
}
.fade-in-right.inview.active {
  opacity: 1;
  transform: translateX(0px);
}
@media screen and (max-width: 767px) {
  .fade-in-sp.inview {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s, transform 1s;
  }
  .fade-in-sp.inview.active {
    opacity: 1;
    transform: translateY(0px);
  }
  .fade-in-right.inview {
    transform: translateY(30px) translateX(0);
    transition: opacity 1.5s, transform 1s;
  }
  .fade-in-right.inview.active {
    opacity: 1;
    transform: translateY(0px) translateX(0);
  }
}

/* ----MV---- */
.mv {
  margin-top: 88px;
}

/* ----intro---- */
.intro {
  padding: min(9.08vw, 109px) 0 min(8.42vw, 101px);
  background: #fffbed;
}
.intro-wrapper {
  width: fit-content;
  margin: 0 auto;
}
.intro-ttl {
  line-height: 1.556;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: bold;
}
.intro-txt {
  position: relative;
  width: clamp(407px, 45.17vw, 542px);
  margin: min(5.42vw, 65px) auto 0;
}
.intro-note {
  margin-top: 26px;
  text-align: right;
  font-size: 12px;
  color: #757575; 
}

@media screen and (max-width: 767px) {
  .intro {
    padding: min(19.2vw, 108px) 0 min(20vw, 113px);
  }
  .intro-ttl {
    line-height: 1.5;
    font-size: min(5.33vw, 30px);
  }
  .intro-txt {
    width: clamp(256px, 68.27vw, 384px);
    margin: min(7.47vw, 42px) auto 0;
  }
  .intro-note {
    margin-top: min(8.53vw, 48px);
    font-size: 11px;
  }
}

/* ----NEW COLOR---- */
.new {
  position: relative;
  width: clamp(651px, 72.33vw, 868px);
  margin: clamp(45px, 5vw, 60px) auto;
  padding: clamp(50px, 5.5vw, 66px) 0 clamp(53px, 5.83vw, 70px);
  background: url(/pages/elegance/main/elegance_26ss_symbolic/img/26ss_sy_bg_01_pc.jpg) no-repeat center / cover;
  z-index: 0;
}
.new-date {
  position: relative;
  width: clamp(153px, 17vw, 204px);
  height: clamp(27px, 3vw, 36px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: #948f90;
  font-size: clamp(14px, 1.5vw, 18px);
  color: #fff;
  z-index: 1;
}
.new-ttl {
  position: relative;
  width: clamp(134px, 14.92vw, 179px);
  margin: clamp(19px, 2.08vw, 25px) auto 0;
  z-index: 1;
}
.new-no {
  position: relative;
  width: clamp(54px, 6vw, 72px);
  margin: clamp(21px, 2.33vw, 28px) auto 0;
  z-index: 1;
}
.new-type {
  position: relative;
  width: clamp(84px, 9.33vw, 112px);
  height: clamp(23px, 2.5vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: clamp(20px, 2.25vw, 27px) auto 0;
  background: #c0a76e;
  font-size: clamp(12px, 1.33vw, 16px);
  color: #fff;
  z-index: 1;
}
.new-lead {
  position: relative;
  width: clamp(389px, 42.83vw, 514px);
  margin: clamp(23px, 2.58vw, 31px) auto 0;
  filter: drop-shadow(0px 0px 3em #ffffff) drop-shadow(0px 0px 1em #ffffff);
  z-index: 0;
}
.new-txt {
  position: relative;
  width: 318px;
  margin: clamp(44px, 4.83vw, 58px) auto 0;
  z-index: 1;
}
.new-note {
  position: absolute;
  bottom: clamp(23px, 2.5vw, 30px);
  right: clamp(125px, 13.92vw, 167px);
  font-size: 12px;
  color: #757575;
}

@media screen and (max-width: 767px) {
  .new {
    width: 100%;
    margin: 0;
    padding: min(10.67vw, 60px) 0 min(12vw, 68px);
    background: url(/pages/elegance/main/elegance_26ss_symbolic/img/26ss_sy_bg_01_sp.jpg) no-repeat center / cover;
  }
  .new-date {
    width: min(32vw, 180px);
    height: min(5.33vw, 30px);
    font-size: min(3.2vw, 18px);
  }
  .new-ttl {
    width: min(28.8vw, 162px);
    margin: min(4.8vw, 27px) auto 0;
  }
  .new-no {
    width: min(14.13vw, 80px);
    margin: min(4vw, 23px) auto 0;
  }
  .new-type {
    width: min(21.33vw, 120px);
    height: min(5.87vw, 33px);
    margin: min(4.8vw, 27px) auto 0;
    font-size: min(3.2vw, 18px);
  }
  .new-lead {
    width: min(42.67vw, 240px);
    margin: min(6.13vw, 35px) auto 0;
  }
  .new-txt {
    width: min(63.47vw, 357px);
    margin: min(8.27vw, 47px) auto 0;
  }
  .new-note {
    bottom: min(4.8vw, 27px);
    right: min(8.53vw, 48px);
    font-size: 11px;
  }
}

/* ----PRODUCTS---- */
.products {
  padding: clamp(102px, 11.33vw, 136px) 0;
  background: #fffbed;
}
.products-subtitle {
  margin-bottom: clamp(18px, 2vw, 24px);
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: bold;
}
.products-img {
  width: clamp(363px, 40.33vw, 484px);
  margin: clamp(38px, 4.17vw, 50px) auto 0;
}
.products-list {
  display: flex;
  justify-content: center;
  column-gap: clamp(23px, 2.5vw, 30px);
  margin-top: clamp(26px, 2.92vw, 35px);
}
.products-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.products-type {
  width: clamp(185px, 20.5vw, 246px);
  height: clamp(22px, 2.42vw, 29px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: #c0a76e;
  font-size: clamp(12px, 1.33vw, 16px);
  color: #fff
}
.products-brand {
  margin-top: clamp(14px, 1.5vw, 18px);
  line-height: 1;
  font-size: clamp(14px, 1.33vw, 16px);
}
.products-name {
  margin-top: 6px;
  line-height: 1;
  font-size: clamp(17px, 1.83vw, 22px);
}
.products-price {
  margin-top: 6px;
  line-height: 1.75;
  text-align: center;
  font-size: clamp(14px, 1.33vw, 16px);
}
.products-note {
  margin-top: 9px;
}
.products-note-item {
  padding-left: 1em;
  position: relative;
  font-size: clamp(12px, 1.33vw, 16px);
  color: #757575;
  font-feature-settings: "palt";
  letter-spacing: .08em;
}
.products-note-item span {
  position: absolute;
  left: 0;
}
.products-note-item a {
  text-decoration: underline;
  text-underline-offset: .3em;
  color: #757575;
  transition: .3s;
}
.products-note-item a:hover {
  text-decoration: underline;
  color: #757575;
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .products {
    padding: min(20.27vw, 114px) 0;
  }
  .products-subtitle {
    margin-bottom: min(2.93vw, 17px);
    font-size: min(3.2vw, 18px);
  }
  .products-img {
    width: 100%;
    max-width: 518px;
    margin: min(7.47vw, 42px) auto 0;
  }
  .products-list {
    flex-direction: column;
    row-gap: min(8.27vw, 47px);
    margin-top: min(7.73vw, 44px);
  }
  .products-item {
    width: 100%;
  }
  .products-type {
    width: min(46.93vw, 264px);
    height: min(5.6vw, 32px);
    font-size: min(3.2vw, 18px);
  }
  .products-brand {
    margin-top: min(3.2vw, 18px);
    font-size: min(3.2vw, 18px);
  }
  .products-name {
    margin-top: min(1.07vw, 6px);
    font-size: min(4.27vw, 24px);
  }
  .products-price {
    margin-top: min(1.33vw, 8px);
    line-height: 1.667;
    font-size: min(3.2vw, 18px);
  }
  .products-note {
    margin-top: min(1.6vw, 9px);
  }
  .products-note-item {
    font-size: min(3.2vw, 18px);
  }
}

/* ----the EFFECTS of LA POUDRE HAUTE NUANCE---- */
.feature {
  margin-bottom: min(7.75vw, 93px);
  background: #251a17;
}
.feature .content-container {
  height: clamp(480px, 53.33vw, 640px);
  padding-top: min(5.25vw, 63px);
  background: url(/pages/elegance/main/elegance_26ss_symbolic/img/26ss_sy_bg_02_pc.jpg) no-repeat center / cover;
}
.feature-ttl {
  width: clamp(340px, 34.17vw, 410px);
  margin: 0 auto;
}
.feature-txt {
  margin: clamp(99px, 11vw, 132px) min(11.58vw, 139px) 0 auto;
  width: clamp(420px, 39.5vw, 474px);
}

@media screen and (max-width: 767px) {
  .feature {
    margin-bottom: min(5.07vw, 29px);
  }
  .feature .content-container {
    height: min(159.47vw, 897px);
    padding-top: min(10.67vw, 60px);
    background: url(/pages/elegance/main/elegance_26ss_symbolic/img/26ss_sy_bg_02_sp.jpg) no-repeat center / cover;
  }
  .feature-ttl {
    width: min(70.13vw, 395px);
  }
  .feature-txt {
    margin: min(71.73vw, 404px) auto 0;
    width: 100%;
    max-width: 518px;
  }
}

/* ----HOW TO USE---- */
.howto {
  padding: clamp(75px, 8.33vw, 100px) 0 clamp(14px, 1.5vw, 18px);
}
.howto-img {
  width: clamp(303px, 33.67vw, 404px);
  margin: clamp(38px, 4.17vw, 50px) auto 0;
}
.howto-txt {
  margin-top: clamp(18px, 2vw, 24px);
  text-align: center;
  font-size: clamp(14px, 1.33vw, 16px);
}
.howto-tips {
  position: relative;
  max-width: 868px;
  margin: clamp(35px, 3.83vw, 46px) auto 0;
  border: solid 2px #c0a76e;
  padding: clamp(21px, 2.33vw, 28px) clamp(11px, 1.25vw, 15px);
}
.howto-tips-ttl {
  position: absolute;
  top: clamp(-18px, -1.5vw, -14px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0 8px;
  background: #fff;
  font-size: clamp(16px, 1.75vw, 21px);
  font-weight: bold;
}
.howto-tips-content {
  display: flex;
  flex-wrap: wrap;
}
.howto-tips-artist {
  width: clamp(179px, 19.83vw, 238px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.howto-tips-artist-img {
  width: 77px;
}
.howto-tips-artist-txt {
  margin-top: 7px;
  font-size: 12px;
}
.howto-tips-txt {
  font-size: clamp(14px, 1.33vw, 16px);
}
.howto-tips-items {
  margin-top: clamp(11px, 1.25vw, 15px);
  padding-left: clamp(179px, 19.83vw, 238px);
}
.howto-tips-item + .howto-tips-item {
  margin-top: 8px;
}
.howto-tips-item {
  padding-left: 1em;
  text-indent: -1em;
  font-size: clamp(14px, 1.33vw, 16px);
}
.howto-tips-item a {
  text-decoration: underline;
  text-underline-offset: .3em;
  transition: .3s;
}
.howto-tips-item a:hover {
  text-decoration: underline;
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .howto {
    padding: min(13.33vw, 75px) 0 min(1.07vw, 6px);
  }
  .howto-img {
    width: min(64vw, 360px);
    margin: min(5.87vw, 33px) auto 0;
  }
  .howto-txt {
    margin-top: min(5.87vw, 32px);
    font-size: min(3.2vw, 18px);
  }
  .howto-tips {
    width: 100%;
    max-width: 518px;
    margin: min(9.07vw, 51px) auto 0;
    border: solid 1px #c0a76e;
    padding: min(5.33vw, 30px);
  }
  .howto-tips-ttl {
    top: min(-3.2vw, -12px);
    padding: 0 min(1.33vw, 8px);
    font-size: min(4vw, 23px);
  }
  .howto-tips-content {
    flex-direction: column;
  }
  .howto-tips-artist {
    order: 2;
    width: 100%;
    flex-direction: row;
    column-gap: min(4vw, 23px);
    margin-top: min(3.47vw, 20px);
  }
  .howto-tips-artist-img {
    width: min(14.67vw, 83px);
  }
  .howto-tips-artist-txt {
    margin-top: 0;
    font-size: min(2.93vw, 17px);
  }
  .howto-tips-txt {
    order: 1;
    font-size: min(3.2vw, 18px);
  }
  .howto-tips-items {
    order: 3;
    margin-top: min(1.33vw, 8px);
    padding-left: 0;
  }
  .howto-tips-item + .howto-tips-item {
    margin-top: min(0.53vw, 3px);
  }
  .howto-tips-item {
    font-size: min(3.2vw, 18px);
  }
}

/* ----ITEMS USED---- */
.items-used {
  padding: clamp(75px, 8.33vw, 100px) 0 clamp(53px, 5.83vw, 70px); 
}
.items-used-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: clamp(53px, 5.83vw, 70px);
  margin-top: clamp(38px, 4.17vw, 50px);
}
.items-used-img {
  width: clamp(336px, 37.33vw, 448px);
}
.items-used-cat + .items-used-cat {
  margin-top: clamp(27px, 3vw, 36px);
}
.items-used-cat-ttl {
  padding-left: 2px;
  font-size: clamp(15px, 1.67vw, 20px);
  font-weight: bold;
  color: #727272;
}
.items-used-cat-item {
  margin-top: 8px;
}
.items-used-cat-item + .items-used-cat-item {
  margin-top: clamp(12px, 1.33vw, 16px);
}
.items-used-cat-item {
  position: relative; 
  padding-left: clamp(11px, 1.25vw, 15px);
}
.items-used-cat-item::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 6px solid #282828;
  border-right: 0;
}
.items-used-cat-item a {
  text-decoration: underline;
  text-underline-offset: .5em;
  text-decoration-color: #747474;
  font-size: clamp(12px, 1.33vw, 16px);
  transition: .3s;
}
.items-used-cat-item a:hover {
  text-decoration: underline;
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .items-used {
    padding: min(13.33vw, 75px) 0 min(5.33vw, 30px); 
  }
  .items-used-wrapper {
    flex-direction: column;
    row-gap: min(6.93vw, 39px);
    margin-top: min(5.33vw, 30px);
  }
  .items-used-img {
    width: min(75.47vw, 425px);
    max-width: 518px;
    margin: 0 auto;
  }
  .items-used-cat + .items-used-cat {
    margin-top: min(8vw, 45px);
  }
  .items-used-cat-ttl {
    padding-left: min(0.53vw, 3px);
    font-size: min(4vw, 23px);
  }
  .items-used-cat-item {
    margin-top: min(1.6vw, 9px);
  }
  .items-used-cat-item + .items-used-cat-item {
    margin-top: min(2.67vw, 15px);
  }
  .items-used-cat-item {
    padding-left: min(2.67vw, 15px);
  }
  .items-used-cat-item::before {
    border-top: min(0.53vw, 3px) solid transparent;
    border-bottom: min(0.53vw, 3px) solid transparent;
    border-left: min(1.07vw, 6px) solid #282828;
  }
  .items-used-cat-item a {
    font-size: min(3.2vw, 18px);
  }
}

/* ----others---- */
.others {
  padding: clamp(75px, 8.33vw, 100px) 0 0;
}
.others-txt {
  text-align: center;
  font-size: 18px;
  color: #757575;
}
.others-txt span {
  position: relative;
  display: inline-block;
  padding: 0 6px;
}
.others-txt span::before, 
.others-txt span::after {
  position: absolute;
  top: 50%;
  content: "";
  width: 2px;
  height: 23px;
  background: #757575;
}
.others-txt span::before {
  left: 0;
  transform: rotate(-30deg) translateY(-50%);
}
.others-txt span::after {
  right: 0;
  transform: rotate(30deg) translateY(-50%);
}
.others-list {
  margin-top: clamp(34px, 3.75vw, 45px);
}
.others-item {
  width: clamp(417px, 46.33vw, 556px);
  overflow: hidden;
  margin: 0 auto;
}
.others-item + .others-item {
  margin: clamp(23px, 2.5vw, 30px) auto 0;
}
.others-item a {
  display: block;
}
.others-item a img {
  transition: .3s;
}
.others-item a:hover img {
  transform: scale(1.04);
}
.others-item:first-of-type {
  border: solid 1px #a18c42;
}
.price-note {
  margin-top: 48px;
  text-align: center;
  font-size: 12px;
  color: #757575;
}

@media screen and (max-width: 767px) {
  .others {
    padding: min(13.33vw, 75px) 0 0;
  }
  .others-txt {
    font-size:  min(3.2vw, 18px);
  }
  .others-txt span {
    padding: 0;
  }
  .others-txt span::before, 
  .others-txt span::after {
    width: 1px;
    height: min(9.33vw, 53px);
  }
  .others-list {
    margin-top: min(3.2vw, 18px);
  }
  .others-item {
    width: 100%;
    max-width: 518px;
  }
  .others-item + .others-item {
    margin-top: min(8.53vw, 48px);
  }
  .price-note {
    font-size: min(2.93vw, 17px);
  }
}

/* ----Shop Search---- */
.elegancetop {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}
.elg-store-finder-link .elg-store-finder-link__button {
  max-width: 550px !important;
}
.search-shops {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .elg-store-finder-link {
    padding: 0 !important;
  }
  .elegancetop__banner {
    margin: 0 !important;
  }
}

/* ----Other Collection---- */
.other-collection {
  margin: 15px 0;
}
.collection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0 30px;
}
.collection-item {
  width: calc((100% - 30px) / 2);
  overflow: hidden;
}
.collection-item a img {
  transition: .3s;
}
.collection-item a:hover img {
  transform: scale(1.05);
}

@media screen and (max-width: 1200px) {
  .collection-list {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .other-collection {
    margin: 8% 0 15%;
  }
  .collection-list {
    flex-direction: column;
    padding: 0;
  }
  .collection-item {
    width: 100%;
  }
  .collection-item img {
    width: 100%;
  }
}