/* ===================
	　　 General
=================== */
.header {
  display: block;
}

.btn-search {
  display: none;
}

.htest.open .btn-search {
  display: block;
}

.btn-cart {
  display: none;
}

.htest.open .btn-cart {
  display: block;
}

.header .header-logo img {
  display: none;
  margin: auto;
}

.htest.open .header-logo img {
  display: block;
}

.header .header-logo a {
    /*display: inline-block;*/
    display: block;
}

main {
  padding: 0 !important;
}

.header .btn-menu.open .border::before {
  background: #000;
}

.header .btn-menu.open .border::after {
  background: #000;
}

.header .btn-menu .border {
  background: #000;
}

.header .btn-menu .border::before {
  background: #000;
}

.header .btn-menu .border::after {
  background: #000;
}

.header .btn-menu {
  will-change: transform;
  -webkit-transition: ease-in, -webkit-transform 1000ms;
  transition: ease-in, -webkit-transform 1000ms;
  transition: ease-in, transform 1000ms;
  transition: ease-in, transform 1000ms, -webkit-transform 1000ms;
  transform: translate3d(0, -10rem, 0);
}

.header .btn-menu.hide {
  transform: translate3d(0, 0, 0);
}

.header .btn-menu .border {
  width: calc(54 *(100vw / 750));
}

.header .btn-menu .border::before,
.header .btn-menu .border::before {
  width: calc(54 *(100vw / 750));
  top: calc(-20 *(100vw / 750));
}

.header .btn-menu .border::before,
.header .btn-menu .border::after {
  width: calc(54 *(100vw / 750));
  bottom: calc(-20 *(100vw / 750));
}

#breadcrumb .cateList {
  margin: 0 auto !important;
}

.main-area .main-inner {
  width: 100%;
  max-width: 100%;
}

/* @media screen and (min-width: 768px) {
.header {
    display: none;
}

} */

.CE250526dress {
  --color-white: #ffffff;
  --color-black: #000000;
  --font-wedding: "wedding-gothic-atf", sans-serif;
  --fw-exlight: 200;
  --fw-light: 300;
  --fw-book: 400;
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-bold: 700;
  /* --header-fixed_height: calc(50*100vw/375); */
  position: relative;
  font-feature-settings: "palt";
  overflow: clip;
}
body.no-scroll {
  overflow: hidden;
}

/* ▼ -----------可変設定---------- ▼ */
.CE250526dress {
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 1400;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1400px) {
  .CE250526dress {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

 /* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .CE250526dress {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

 /* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .CE250526dress {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */

  .CE250526dress::-webkit-scrollbar{
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .CE250526dress .feed img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  .main-area {
    padding: 0;
  }

@media screen and (min-width: 768px) {
  .CE250526dress .hidden-desktop {
    display: none !important;
  }
  #feed1 {
    height: 80vh;
    width: calc(80vh * ((750 / 720)));
  }
  #feed2, #feed3, #feed4, #feed5, #feed6, #feed7, #feed8, #feed9, #feed10 {
    height: 80vh;
    width: calc(80vh * ((450 / 720)));
  }
}
@media screen and (max-width: 767px) {
  .CE250526dress .hidden-mobile {
    display: none !important;
  }
  #feed1 {
    height: 80svh;
    width: calc(80svh * ((900 / 1200)));
  }
  #feed2, #feed3, #feed4, #feed5, #feed6, #feed7, #feed8, #feed9 {
    height: 80svh;
    width: calc(80svh * ((750 / 1200)));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - position
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.CE250526dress .common-position {
  position: absolute;
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - grid
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.CE250526dress .common-grid {
  display: grid;
  gap: var(--row, 0) var(--column, 0);
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - flex
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.CE250526dress .common-flex_row {
  display: flex;
  flex-direction: row;
  gap: var(--row, 0) var(--column, 0);
}
.CE250526dress .common-flex_row_reverse {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--row, 0) var(--column, 0);
}
.CE250526dress .common-flex_column {
  display: flex;
  flex-direction: column;
  gap: var(--row, 0) var(--column, 0);
}
.CE250526dress .common-flex_column_reverse {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--row, 0) var(--column, 0);
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - common
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.CE250526dress .common_switchList {
  position: relative;
  align-items: center;
  --column: calc(21.5*100vw/1280);
}
.CE250526dress .common_switchList::before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: calc(10* 100vw / 1280);
  background-color: var(--color-black);
  z-index: 2;
  top: calc(1* 100vw / 1280);
  left: calc(36* 100vw / 1280);
  transform: rotate(15deg);
}
.CE250526dress .common_switchBtn {
  font-size: 1rem;
  font-size: calc(10*100vw/1280);
  line-height: 1.4;
  letter-spacing: .0;
  font-weight: var(--fw-medium);
  font-family: 'HelveticaMD';
  cursor: pointer;
  pointer-events: none;
  color: var(--color-black);
}
.CE250526dress .is-apper .common_switchBtn.js-indexBtn,
.CE250526dress .common_switchBtn.js-feedBtn {
  pointer-events: initial;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - feed
//////////////////////////////////////////////////////////////////////////////////////////////
*/
  .CE250526dress .feed {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .CE250526dress .feed_title {
    font-size: calc(27* var(--variable)* var(--ratio));
    line-height: 1;
    font-weight: var(--fw-regular);
    font-family: var(--font-wedding);
    letter-spacing: -0.01em;
    color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: calc(80* var(--variable)* var(--ratio));
  }

  .CE250526dress .feed_inner {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: clip;
  }
  .CE250526dress .feed_list {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    height: 80vh;
    /* width: 100%; */
    white-space: nowrap;
  }
  .CE250526dress .mv_title_box {
    position: absolute;
    display: block;
    width: calc(275* var(--variable)* var(--ratio));
    top: calc(412* var(--variable)* var(--ratio));
    left: calc(70* var(--variable)* var(--ratio));
    z-index: 10;
  }
  .CE250526dress .mv_subtitle {
    font-size: calc(28* var(--variable)* var(--ratio));
    line-height: 1;
    font-family: var(--font-wedding);
    font-weight: var(--fw-exlight);
    color: var(--color-black);
    pointer-events: none;
    letter-spacing: -0.01em;
    text-align: center;
  }
  .CE250526dress .mv_title {
    font-size: calc(35* var(--variable)* var(--ratio));
    line-height: 1.22625;
    font-family: var(--font-wedding);
    font-weight: var(--fw-regular);
    color: var(--color-black);
    letter-spacing: -0.01em;
    pointer-events: none;
    margin-top: calc(10* var(--variable)* var(--ratio));
    text-align: center;
  }

  #feed9 {
    /* background-image: url(../img/ev.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; */
    position: relative;
  }

  /* #feed9 a {
    display: block;
    width: 100%;
  } */

  #feed9 p {
    font-size: calc(35* var(--variable)* var(--ratio));
    line-height: 1;
    font-family: var(--font-wedding);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    letter-spacing: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    pointer-events: none;
  }

  #feed9 .feed_staff {
    position: absolute;
    bottom: calc(40* var(--variable)* var(--ratio));
    left: calc(40* var(--variable)* var(--ratio));
    z-index: 10;
    pointer-events: none;
  }

  #feed9 .feed_staff li {
    font-size: calc(15* var(--variable)* var(--ratio));
    font-family: var(--font-wedding);
    font-weight: var(--fw-regular);
    color: var(--color-white);
    margin-top: calc(15* var(--variable)* var(--ratio));
  }
  #feed9 .feed_staff span {
    font-size: calc(12* var(--variable)* var(--ratio));
  }

  .CE250526dress .feed_text {
    /* position: fixed; */
    width: 100%;
    height: 100%;
    /* height: 100vh;
    background-color: var(--color-white);
    top: 0;
    right: 0;
    z-index: 100; */
    position: relative;
  }
  /* .CE250526dress .feed_text_credit {

  } */
  .CE250526dress .feed_text_credit_list {
    font-size: calc(18* var(--variable)* var(--ratio));
    line-height: 1.2;
    letter-spacing: 0;
    font-family: var(--font-wedding);
    font-weight: var(--fw-exlight);
    padding-top: calc(30* var(--variable)* var(--ratio));
    padding-left: calc(40* var(--variable)* var(--ratio));
  }
  .CE250526dress .feed_text_credit_list > li {
    display: inline-block;
  }
  .CE250526dress .feed_text_btn_link {
    margin-bottom: calc(18.7*100vw/1280);
    font-size: calc(10*100vw/1280);
    line-height: 1.4;
    font-weight: var(--fw-medium);
    font-family: 'HelveticaMD';
  }
  .CE250526dress .feed_item:has(.feed_item_credit) {
    position: relative;
    width: calc(600*100vw/1280);
    height: 100vh;
    background-color: var(--color-white);
    padding-right: calc(360*100vw/1280);
  }
  .CE250526dress .feed_item_credit {
    position: absolute;
    bottom: calc(18.7*100vw/1280);
    left: calc(21*100vw/1280);
    font-size: calc(10*100vw/1280);
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: var(--fw-regular);
    font-family: 'Times';
  }
  .CE250526dress .feed_item_title {
    position: absolute;
    top: calc(18.7* 100vw / 1280);
    left: calc(21* 100vw / 1280);
    font-size: calc(10*100vw/1280);
    line-height: 1.4;
    font-weight: var(--fw-medium);
    font-family: 'HelveticaMD';
    color: var(--color-black);
  }

@media screen and (min-width: 768px) {
  .CE250526dress .feed_title {
    font-size: calc(22*(100vw / 1400));
    padding-top: calc(34*(100vw / 1400));
  }
  .CE250526dress .mv_title_box {
    width: calc(188*(100vw / 1400));
    top: calc(229*(100vw / 1400));
    left: calc(212*(100vw / 1400));
  }
  .CE250526dress .mv_subtitle {
    font-size: calc(18*(100vw / 1400));
  }
  .CE250526dress .mv_title {
    font-size: calc(24*(100vw / 1400));
  }
  #feed9 .feed_staff {
    bottom: calc(22*(100vw / 1400));
    left: calc(24*(100vw / 1400));
  }
  #feed9 p {
    font-size: calc(21*(100vw / 1400));
  }
  #feed9 .feed_staff li {
    font-size: calc(9*(100vw / 1400));
    margin-top: calc(9*(100vw / 1400));
  }
  #feed9 .feed_staff span {
    font-size: calc(7.2*(100vw / 1400));
  }
  .CE250526dress .feed_text_credit_list {
    /* font-size: calc(15*(100vw / 1400));
    font-weight: var(--fw-book);
    padding-top: calc(40*(100vw / 1400));
    padding-left: calc(40*(100vw / 1400)); */
    font-size: 1.5rem;
    font-weight: var(--fw-book);
    padding-top: 4rem;
    padding-left: 4rem;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - animation
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.CE250526dress .feed_text_credit_list {
  opacity: 0;           /* 初期状態では完全に透明 */
  visibility: hidden;   /* 初期状態では完全に非表示 (イベントも受け付けない) */
  transition: opacity 0.5s ease, visibility 1.5s ease; /* opacityとvisibilityの両方にトランジションを設定 */
  /* 必要に応じて、要素の絶対位置やサイズもここに指定 */
  position: absolute; /* HTMLに基づいて追加 */
  top: 0;             /* 必要に応じて位置を調整 */
  left: 0;            /* 必要に応じて位置を調整 */
  width: 100%;        /* 親要素に対する幅 */
  height: 100%;       /* 親要素に対する高さ */
}
.CE250526dress .feed_text_credit_list.is-show {
  opacity: 1;           /* is-showが付与されたら完全に表示 */
  visibility: visible;  /* is-showが付与されたら可視 */
}

.CE250526dress .js-showIndex,
.CE250526dress .js-showFeed {
  display: none;
  opacity: 0;
  pointer-events: none;
}
.CE250526dress .js-showIndex.is-show,
.CE250526dress .js-showFeed.is-show {
  display: block;
  pointer-events: initial;
  opacity: 1;
}
.CE250526dress .js-clickModalClose {
  pointer-events: none;
}
.CE250526dress .is-showModal .js-clickModalClose {
  pointer-events: initial;
}
.CE250526dress .js-showFixedHeader {
  display: none;
}
.CE250526dress .js-showFixedHeader.is-showHeader {
  display: block;
}
.CE250526dress .js-showTitle {
  cursor: pointer;
}

  .CE250526dress .js-showText,
  .CE250526dress .js-showTitle {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
  }
  .CE250526dress .feed_item > .js-showTitle {
    opacity: 1;
    pointer-events: initial;
  }
  .CE250526dress .js-showText.is-apper,
  .CE250526dress .js-showTitle.is-showtitle {
    opacity: 1;
    pointer-events: initial;
  }


.CE250526dress .js-vanishText {
  /* display: none; */
  opacity: 0;
  pointer-events: none;
  transition: all .5s;
}
.CE250526dress .js-vanishText.is-vanish {
  /* display: block; */
  opacity: 1;
  pointer-events: initial;
}

.CE250526dress .fadein-load {
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity 1s ease;
}

.CE250526dress .fadein-load.active {
  opacity: 1;
  transform: translate(0, 0);
}

.feed {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

.sticky-layout-container-flex {
  display: flex;
  flex-direction: column; /* 要素を縦方向に並べる */
  min-height: 100vh;
}

/* 上部スティッキー要素 */
.sticky-header-flex {
  position: sticky;
  top: 0;
  height: 10.67vh;
  z-index: 100;
  flex-shrink: 0; /* 縮まないようにする */
}

/* メインコンテンツ（スクロール可能部分） */
.main-content-flex {
  flex-grow: 1; /* 利用可能なスペースを全て埋める */
  overflow-y: auto; /* この要素内でスクロールを有効にする */
  background-color: #ffffff;
}

/* 下部スティッキー要素 */
.sticky-footer-flex {
  position: sticky;
  bottom: 0;
  /* padding: 20px; */
  height: 9.33vh;
  z-index: 100;
  flex-shrink: 0;
  /* overflow: clip; */
}

/* オプション: デザインのためのスタイル */
.sticky-layout-container-flex > * {
  box-sizing: border-box;
}

.scroll_container {
    width: calc(262* var(--variable)* var(--ratio));
    position: absolute;
    bottom: calc(24* var(--variable)* var(--ratio));
    right: calc(40* var(--variable)* var(--ratio));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
}

.scrollbar-text {
  display: inline-block;
  position: relative; /* absoluteからrelativeに変更し、flow内で配置 */
  padding: calc(10* var(--variable)* var(--ratio)); /* 上下左右のパディングを均等に */
  color: #fff;
  font-size: calc(27* var(--variable)* var(--ratio));
  font-family: var(--font-wedding);
  line-height: 1;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
}

.scrollbar {
  position: relative;
  height: 1px;
  width: calc(122* var(--variable)* var(--ratio));
  margin-left: calc(5* var(--variable)* var(--ratio));
}

.scrollbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}

.scrollbar::before {
  content: "";
  position: absolute;
  top: calc(-4* var(--variable)* var(--ratio)); /* 線に対して上下中央に配置 */
  width: calc(10* var(--variable)* var(--ratio));
  height: calc(10* var(--variable)* var(--ratio));
  border-radius: 50%;
  background: #fff;
  animation: circlemove 3s ease-in-out infinite,
    cirlemovehide 3s ease-out infinite;
  left: 0; /* 開始位置 */
}

@keyframes circlemove {
  0% {
    left: 0px; /* 左端から開始 */
  }
  100% {
    left: calc(100% - (10 * var(--variable) * var(--ratio)));
  }
}

@keyframes cirlemovehide {
  0% {
    opacity: 1; /* 開始時は表示 */
  }
  80% {
    opacity: 1; /* アニメーションの大部分で表示を維持 */
  }
  95% { /* 終端に近づいたらフェードアウト開始 */
    opacity: 0.2;
  }
  100% {
    opacity: 0; /* 終端で完全に非表示 */
  }
}

@media screen and (min-width: 768px) {
.scroll_container {
  /* width: calc(284*(100vw / 1400));
  top: calc(30*(100vw / 1400));
  bottom: initial;
  right: calc(40*(100vw / 1400)); */
  width: 28.4rem;
  top: 3rem;
  bottom: initial;
  right: 4rem;
}

.scrollbar-text {
  /* padding: calc(10*(100vw / 1400));
  font-size: calc(15*(100vw / 1400)); */
  padding: 1rem; /* 上下左右のパディングを均等に */
  font-size: 1.5rem;
  font-weight: var(--fw-book);
  color: var(--color-black);
  white-space: nowrap;
}

.scrollbar {
  /* width: calc(200*(100vw / 1400));
  margin-left: calc(10*(100vw / 1400)); */
  width: 20rem;
  margin-left: 1rem;
}

.scrollbar::after {
  width: 100%;
  background: var(--color-black);
}

.scrollbar::before {
  /* top: calc(-2*(100vw / 1400));
  width: calc(6*(100vw / 1400));
  height: calc(6*(100vw / 1400)); */
  top: -2px;
  width: 6px;
  height: 6px;
  background: var(--color-black);
}

.sticky-footer-flex {
  overflow: clip;
}

@keyframes circlemove {
  0% {
    left: 0px; /* 左端から開始 */
  }
  100% {
    left: calc(100% - (10*(100vw / 1400)));
  }
}

}

@media screen and (max-width: 767px) {
/* Safari */
  /* _::-webkit-full-page-media, _:future, :root .sticky-footer-flex {
      position: fixed;
      bottom: 10svh;
  } */
  _::-webkit-full-page-media, _:future, :root .feed_text_credit_list {
    padding-top: 0;
  }
  _::-webkit-full-page-media, _:future, :root .scroll_container {
    bottom: initial;
    top: calc(950* var(--variable)* var(--ratio));
}
  _::-webkit-full-page-media, _:future, :root .feed_text_credit_list {
    top: calc(-100* var(--variable)* var(--ratio));
    z-index: 100;
  }
}