@charset "UTF-8";

/* common */
.main-area,
.main_inner {
  width: 100%;
  margin: auto;
  padding-bottom: calc(90 * (100vw / 375));
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", HGS明朝E, "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 400
}

.main-area,
.main-area *,
.main-area :after,
.main-area :before,
.main_inner,
.main_inner *,
.main_inner :after,
.main_inner :before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.main-area img,
.main-area svg,
.main_inner img,
.main_inner svg {
  width: 100%;
  height: auto
}

.main-area a,
.main_inner a {
  overflow: visible
}

.main-area a:hover,
.main_inner a:hover {
  cursor: pointer
}

.sp-component {
  display: block
}

.pc-component {
  display: none
}

@media only screen and (min-width:768px) {
  .main-area,
  .main_inner {
    padding-bottom: 7.6rem;
  }

  .main-area {
    margin-top: 1.6rem;
  }
}

/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

/* LPコンテンツ */

/* ===============================================### 
アニメーション設定
###=============================================== */

/************** fade **************/
.js-26ss .js-fade-in,
.js-26ss .js-fade-trigger .js-fade-image {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 1s;
}

.js-26ss .js-fade-in.fade-delay.delay01,
.js-26ss .js-fade-trigger .js-fade-image.fade-delay.delay01 {
  transition-delay: 0.3s;
}

.js-26ss .js-fade-in.fade-delay.delay02,
.js-26ss .js-fade-trigger .js-fade-image.fade-delay.delay02 {
  transition-delay: 0.6s;
}

.js-26ss .js-fade-in.fade-delay.delay03,
.js-26ss .js-fade-trigger .js-fade-image.fade-delay.delay03 {
  transition-delay: 0.9s;
}

.js-26ss .js-fade-in.fade-delay.delay04,
.js-26ss .js-fade-trigger .js-fade-image.fade-delay.delay04 {
  transition-delay: 1.2s;
}

.js-26ss .js-fade-in.fade-delay.delay05,
.js-26ss .js-fade-trigger .js-fade-image.fade-delay.delay05 {
  transition-delay: 1.5s;
}


.js-26ss .js-slide-in {
  opacity: 0;
  transform: translate(-100px, 0);
  transition-property: opacity, transform;
  transition-duration: 1s;
}

.js-26ss .js-fade-in.show,
.js-26ss .js-fade-trigger.show .js-fade-image {
  opacity: 1;
  transform: translate(0, 0);
}
.js-26ss .js-fade {
  opacity: 0;
  will-change: opacity, transform;
  transition: ease-in, opacity 2500ms, transform 1000ms;
  transform: translate3d(0, 0, 0) scale(1);
}
.js-26ss .js-fade.active {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

/************** credit **************/
.credit-button {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  z-index: 13;
}

.credit-button span {
  display: block;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: #fff;
  transition: all 0.3s ease;
  pointer-events: none;
}

.credit-button span:nth-child(2) {
  transform: rotate(90deg);
}

.credit-button.is-active span:nth-child(2) {
  transform: rotate(0deg);
}

/* --- SPの時のスタイル（デフォルト） --- */
.js-26ss .credit-wrap {
  display: block;      /* 普通に表示 */
  position: static;   /* 重ねない */
  padding: 1rem 0;    /* 画像の下に適度な余白 */
  background: none;   /* 背景の黒透過を消す */
  color: #333333;        /* 文字色を黒（または任意の色）に */
  opacity: 1;         /* 常に表示 */
  visibility: visible;
  pointer-events: auto;
}

.js-26ss .credit-wrap a {
  color: inherit;     /* 親の文字色を継承 */
  text-decoration: none;
}

/* --- PCの時だけ重ねるスタイルに上書き --- */
@media screen and (min-width: 768px) {
  .js-26ss .credit-wrap {
    --color-dark: #333333;
    --color-white: #fff;
    --color-overlay: rgba(51, 51, 51, .3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-block: var(--lp-prices-vertical-spacer);
    padding-inline: var(--lp-prices-horizontal-spacer);
    background-color: var(--color-overlay);
    color: var(--color-white);
    z-index: 10;
    /* PCでは初期状態を非表示にする */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.6s ease;
  }

  /* ホバー時の挙動 */
  .js-26ss .credit-wrap.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/************** credit **************/

/* --- 共通・SPの時のスタイル（デフォルト） --- */
.js-26ss .credit {
  /* SPでは画像の下に配置するため absolute を解除 */
  position: static; 
  width: 100%;
  /* SPでは最初から表示させる */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  
  font-size: calc(14 * (100vw / 375)); /* 少し小さめに調整 */
  letter-spacing: 0.1em;
  line-height: 2;
  padding: calc(10 * (100vw / 375)) 0; /* 画像との間の余白 */
  text-align: left;
}

.js-26ss .credit a {
  color: #333333; /* SPでは背景が白なので黒文字に */
  text-decoration: none;
}

.js-26ss .credit .not_credit {
  pointer-events: none;
}
.js-26ss .credit .big_space {
  display: block;
  margin-top: 0.5rem;
}

/* --- PCの時（768px以上）のスタイル --- */
@media screen and (min-width: 768px) {
  .js-26ss .credit {
    position: absolute;
    bottom: 0.6rem;
    left: 1.2rem;
    width: 85%;
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: 0.1em;
    padding: 0;
    
    /* PCではホバー前は非表示にする */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.6s ease;
  }

  /* 親の .is-active がついた時だけ表示 */
  .js-26ss .credit-wrap.is-active .credit {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  .js-26ss .credit a {
    color: #fff; /* PCでは黒透過背景に乗るので白文字に */
  }
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .credit-button {
    bottom: calc(15 * (100vw / 375));
    right: calc(15 * (100vw / 375));
    width: calc(15 * (100vw / 375));
    height: calc(15 * (100vw / 375));
  }
}



/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.js-26ss .bg-wrap {
  padding-bottom: 8rem;
}

.js-26ss .item-wrap {
  position: relative;
}

.js-26ss .content__item .slide-wrap {
  --display: flex;
}

.js-26ss .flex-wrap{
  display: flex;
}

.js-26ss .grid-wrap{
  display: grid;
}

/* ===============================================### 
MV
###=============================================== */
.js-26ss .mv{
}

.js-26ss .mv__inner{
  position: relative;
}

/************** text **************/
.js-26ss .lp-title{
  position: absolute;
  color: #fff;
  width: 27.5rem;
  margin: initial;
  left: 50%;
  transform: translateX(35%);
  bottom: 18.6rem;
}

.js-26ss .inner_logo{
  width: 16rem;
  fill: #fff;
}

.js-26ss .inner_logo .logo_letter_item{
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.3s;
}

.js-26ss .inner_logo.fade-in .logo_letter_item{
  opacity: 1;
}

.js-26ss .maivsiual_tx .fvAnime.__1{
  margin-top: 3.8rem;
}

.js-26ss .maivsiual_tx .fvAnime.ttl{
  font-size: 2.4rem;
  line-height: 1;
}

.js-26ss .maivsiual_tx .fvAnime.sub_ttl{
  font-size: 2rem;
  line-height: 1.5;
  margin-top: 2rem;
}
.js-26ss .maivsiual_tx .fvAnime.sub_ttl2{
  margin-top: 0;
}

.js-26ss .maivsiual_tx .fvAnime.__4{
  margin-top: 2rem;
}

.js-26ss .maivsiual_tx .fvAnime.copy{
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ===========### responsive ###=========== */
@media screen and (min-width: 768px) and (max-width: 1300px) {
  .js-26ss .lp-title{
    left: 75rem;
    transform: translateX(0);
  }
}

@media screen and (max-width: 767px) {
  .js-26ss .lp-title{
    position: initial;
    width: calc(345 * (100vw / 375));
    margin: calc(30 * (100vw / 375)) auto 0;
    transform: none;
    color: #000;
  }

  .js-26ss .inner_logo{
    width: calc(136 * (100vw / 375));
    /* fill: #000; */
    position: absolute;
    top: calc(136 * (100vw / 375));
    left: calc(190 * (100vw / 375));
    z-index: 5;
  }

  .js-26ss .maivsiual_tx .fvAnime.__1{
    margin-top: calc(23 * (100vw / 375));
  }

  .js-26ss .maivsiual_tx .fvAnime.ttl{
    font-size: calc(20 * (100vw / 375));
    line-height: 1.25;
  }

  .js-26ss .maivsiual_tx .fvAnime.sub_ttl{
    font-size: calc(16 * (100vw / 375));
    line-height: 1;
    margin-top: calc(23 * (100vw / 375));
  }

  .js-26ss .maivsiual_tx .fvAnime.__4{
    margin-top: calc(11 * (100vw / 375));
  }

  .js-26ss .maivsiual_tx .fvAnime.copy{
    font-size: calc(14 * (100vw / 375));
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.02em;
  }
}

/* ===============================================### 
コンテンツ01
###=============================================== */
.js-26ss .content01{
  padding-top: 5rem;
}

.js-26ss .content01 .content__inner{
  width: 90rem;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
}

.js-26ss .content01 .content__inner .content__item {
  width: 44.5rem;
  margin-inline: auto;
}

.js-26ss .content01 .content__item .flex-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 1rem;
}

.js-26ss .content01 .flex-wrap .flex-item {
  width: 100%;
  margin-inline: auto;
}

.js-26ss .content01 .product-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 1rem;
}

.js-26ss .content01 .product-wrap .product {
  width: 21.75rem;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .js-26ss .content01{
    padding-top: calc(21 * (100vw / 375));
  }

  .js-26ss .content01 .content__inner{
    width: calc(345 * (100vw / 375));
    flex-direction: column;
    column-gap: 0;
  }

  .js-26ss .content01 .content__inner .content__item {
    width: 100%;
    margin-inline: auto;
  }

  .js-26ss .content01 .content__item .flex-wrap {
    flex-direction: column-reverse;
    row-gap: calc(15 * (100vw / 375));
  }

  .js-26ss .content01 .flex-wrap .flex-item {
    width: 100%;
    margin-inline: auto;
  }

  .js-26ss .content01 .product-wrap {
    flex-direction: column;
    row-gap: calc(20 * (100vw / 375));
  }

  .js-26ss .content01 .product-wrap .product {
    width: calc(345 * (100vw / 375));
  }

  .js-26ss .content__item .slide-wrap {
    display: flex;
  }
  .js-26ss .content__item .slide-wrap .content__image {
    width: calc(172.5 * (100vw / 375));
  }
}


/* ===============================================### 
コンテンツ02
###=============================================== */
.js-26ss .content02 .content__inner{
  width: 90rem;
  margin: 1.1rem auto 0;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
}

.js-26ss .content02 .content__item{
  width: 21.75rem;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .js-26ss .content02 .content__inner{
    width: calc(345 * (100vw / 375));
    margin: calc(40 * (100vw / 375)) auto 0;
    flex-direction: column;
    column-gap: 0;
    row-gap: calc(40 * (100vw / 375));
  }

  .js-26ss .content02 .content__item{
    width: 100%;
  }

}

/* ===============================================### 
コンテンツ03
###=============================================== */
.js-26ss .content03 .content__inner{
  width: 90rem;
  margin: 1rem auto 0;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
}

.js-26ss .content03 .content__item{
  width: 44.5rem;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .js-26ss .content03 .content__inner{
    width: calc(345 * (100vw / 375));
    margin: calc(40 * (100vw / 375)) auto 0;
    flex-direction: column;
    column-gap: 0;
    row-gap: calc(40 * (100vw / 375));
  }

  .js-26ss .content03 .content__item{
    width: 100%;
  }

}

/* ===============================================### 
コンテンツ04
###=============================================== */
.js-26ss .content04{
  padding-top: 1rem;
}

.js-26ss .content04 .content__inner{
  width: 90rem;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
}

.js-26ss .content04 .content__inner .content__item {
  width: 44.5rem;
  margin-inline: auto;
}

.js-26ss .content04 .content__item .flex-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 1rem;
}

.js-26ss .content04 .flex-wrap .flex-item {
  width: 100%;
  margin-inline: auto;
}

.js-26ss .content04 .product-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 1rem;
}

.js-26ss .content04 .product-wrap .product {
  width: 21.75rem;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .js-26ss .content04{
    padding-top: calc(21 * (100vw / 375));
  }

  .js-26ss .content04 .content__inner{
    width: calc(345 * (100vw / 375));
    flex-direction: column;
    column-gap: 0;
  }

  .js-26ss .content04 .content__inner .content__item {
    width: 100%;
    margin-inline: auto;
  }

  .js-26ss .content04 .content__item .flex-wrap {
    row-gap: calc(15 * (100vw / 375));
  }

  .js-26ss .content04 .flex-wrap .flex-item {
    width: 100%;
    margin-inline: auto;
  }

  .js-26ss .content04 .product-wrap {
    flex-direction: column;
    row-gap: calc(20 * (100vw / 375));
  }

  .js-26ss .content04 .product-wrap .product {
    width: calc(345 * (100vw / 375));
  }

  .js-26ss .content04 .space-plus {
    margin-top: calc(20 * (100vw / 375));
  }
}


/* ===============================================### 
コンテンツ05
###=============================================== */
.js-26ss .content05{
  padding-top: 1rem;
}

.js-26ss .content05 .content__inner{
  width: 90rem;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
}

.js-26ss .content05 .content__inner .content__item {
  width: 44.5rem;
  margin-inline: auto;
}

.js-26ss .content05 .content__item .flex-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 1rem;
}

.js-26ss .content05 .flex-wrap .flex-item {
  width: 100%;
  margin-inline: auto;
}

.js-26ss .content05 .product-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 1rem;
}

.js-26ss .content05 .product-wrap .product {
  width: 21.75rem;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .js-26ss .content05{
    padding-top: calc(21 * (100vw / 375));
  }

  .js-26ss .content05 .content__inner{
    width: calc(345 * (100vw / 375));
    flex-direction: column;
    column-gap: 0;
  }

  .js-26ss .content05 .content__inner .content__item {
    width: 100%;
    margin-inline: auto;
  }

  .js-26ss .content05 .content__item .flex-wrap {
    flex-direction: column-reverse;
    row-gap: calc(15 * (100vw / 375));
  }

  .js-26ss .content05 .flex-wrap .flex-item {
    width: 100%;
    margin-inline: auto;
  }

  .js-26ss .content05 .product-wrap {
    flex-direction: column;
    row-gap: calc(20 * (100vw / 375));
  }

  .js-26ss .content05 .product-wrap .product {
    width: calc(345 * (100vw / 375));
  }
}

/* ===============================================
* btn *
=============================================== */
.link-btn {
  display: block;
  width: calc(335 * (100vw / 375));
  height: calc(50 * (100vw / 375));
  margin-right: auto;
  margin-left: auto;
}

.link-btn--top {
  margin-top: calc(30 * (100vw / 375));
  margin-bottom: calc(80 * (100vw / 375))
}

@media only screen and (min-width:768px) {
  .link-btn {
    width: 40rem;
    height: 5rem;
  }

  .link-btn--newarrivals {
    margin-top: 0;
  }

  .link-btn--top {
    margin-top: 2rem;
    margin-bottom: 8.1rem;
  }
}

/* ===============================================
* LPレイアウト *
=============================================== */
.pc_view{
  display: block;
}
.smp_view{
  display: none;
}

@media screen and (max-width: 767px) {
  .pc_view{
    display: none !important;
  }
  .smp_view{
    display: block;
  }
}