@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

/* ---- アンカー位置（このページのみ調整） ----
   module.css の .scroll_adjust は 61px/81px の固定値で #header の実高さ
   （SP 56px / PC 81px ＋ お知らせバー）と合わないため、page.js が測った
   --newera-header-h で上書きする。JSが動かない場合は下のフォールバック値を使用 */
.main .scroll_adjust div {
  padding-top: var(--newera-header-h, 56px);
}
@media screen and (768px <= width) {
  .main .scroll_adjust div {
    padding-top: var(--newera-header-h, 81px);
  }
}

.main .branch_main_area {
  display: block;
}

/* ---- メインビジュアル ---- */
/* mv.png の上部は角が透過（白いアーチ）なので、背景は onsale.png と同じ色にそろえる */
.main .mv_section {
  /* background-color: #121212; */
  border-bottom: min(calc(15 / 768 * 100vw), 15px) solid #e7e8ec;
}
.main .onsale img,
.main .mv img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
}

/* ---- ITEMS スライダー ---- */
.main .slide_section {
  background: #fff;
  margin-block: min(calc(26 / 768 * 100vw), 26px)
    min(calc(45 / 768 * 100vw), 45px);
  position: relative;
}
/* ITEMS 上部の区切りバー（装飾のみ）。slide_section の padding-block 上側が上の余白、
   自身の margin-bottom が ITEMS 見出しまでの余白になる */
.main .slide_section::before {
  content: "";
  position: absolute;
  height: min(calc(20 / 768 * 100vw), 20px);
  background-color: #e7e8ec;
  width: 85%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, min(calc(20 / 768 * 100vw), 20px) 100%);
  top: calc(-1 * min(calc(27 / 768 * 100vw), 27px));
  right: 0;
}
.main .slide_section_header {
  padding-bottom: 1em;
  padding-inline: min(calc(24 / 768 * 100vw), 24px);
}
.main .slide_section_head img {
  /* min-width: 60px; */
  height: auto;
  display: block;
}
.main .slide_swiper_wrap {
  position: relative;
}
.main .js-slide-swiper {
  overflow: hidden;
}
.main .js-slide-swiper .swiper-slide {
  width: auto;
}
.main .js-slide-swiper .slide_img_wrap {
  display: block;
  position: relative;
}
.main .js-slide-swiper .swiper-slide img {
  width: min(calc(150 / 768 * 100vw), 150px) !important;
  max-width: none;
  height: auto;
  display: block;
}
/*
 * .swiper-wrapper には gap / justify-content を指定しないこと。
 * Swiper は slidesPerView:'auto' 時にスライド幅 + spaceBetween で位置を計算するため、
 * gap を足すと 1枚ごとに位置がズレる。スライド間隔は JS 側の spaceBetween で指定する。
 */
.main .js-slide-swiper .swiper-wrapper {
  align-items: center;
}

/* ---- スワイパーの矢印（ITEMS／商品写真 共通） ---- */
.main .js-slide-swiper .swiper-button-prev,
.main .js-slide-swiper .swiper-button-next,
.main .js-item-swiper .swiper-button-prev,
.main .js-item-swiper .swiper-button-next {
  width: 8vw;
  height: 8vw;
  max-width: 36px;
  max-height: 36px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  top: 50%;
  margin-top: calc(-1 * min(4vw, 18px));
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.main .js-slide-swiper .swiper-button-prev::after,
.main .js-slide-swiper .swiper-button-next::after,
.main .js-item-swiper .swiper-button-prev::after,
.main .js-item-swiper .swiper-button-next::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
}
.main .js-slide-swiper .swiper-button-prev::after,
.main .js-item-swiper .swiper-button-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_46_18)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.85 32.6502C19.1478 31.9471 18.7533 30.994 18.7533 30.0002C18.7533 29.0065 19.1478 28.0533 19.85 27.3502L33.99 13.2052C34.6935 12.5021 35.6475 12.1072 36.6422 12.1074C37.6368 12.1076 38.5906 12.503 39.2938 13.2065C39.9969 13.91 40.3918 14.864 40.3916 15.8586C40.3914 16.8533 39.996 17.8071 39.2925 18.5102L27.8025 30.0002L39.2925 41.4902C39.976 42.1972 40.3544 43.1442 40.3463 44.1275C40.3382 45.1107 39.9443 46.0515 39.2493 46.7471C38.5544 47.4427 37.614 47.8375 36.6308 47.8465C35.6476 47.8555 34.7001 47.478 33.9925 46.7952L19.8475 32.6527L19.85 32.6502Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_46_18'%3E%3Crect width='60' height='60' fill='white' transform='matrix(-1 0 0 -1 60 60)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.main .js-slide-swiper .swiper-button-next::after,
.main .js-item-swiper .swiper-button-next::after {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_46_14)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40.15 27.3498C40.8522 28.0529 41.2467 29.006 41.2467 29.9998C41.2467 30.9935 40.8522 31.9467 40.15 32.6498L26.01 46.7948C25.3065 47.4979 24.3525 47.8928 23.3578 47.8926C22.3632 47.8924 21.4094 47.497 20.7062 46.7935C20.0031 46.09 19.6082 45.136 19.6084 44.1414C19.6086 43.1467 20.004 42.1929 20.7075 41.4898L32.1975 29.9998L20.7075 18.5098C20.024 17.8028 19.6456 16.8558 19.6537 15.8725C19.6618 14.8893 20.0557 13.9485 20.7507 13.2529C21.4456 12.5573 22.386 12.1625 23.3692 12.1535C24.3524 12.1445 25.2999 12.522 26.0075 13.2048L40.1525 27.3473L40.15 27.3498Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_46_14'%3E%3Crect width='60' height='60' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* ---- 商品一覧 ---- */
/* 写真（375×460）を左右交互に敷き、反対側に商品情報を置く */
.main .item_list {
  background-color: #fff;
  overflow: hidden;
  background: url(../img/bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: min(calc(80 / 768 * 100vw), 80px);
}
.main .item_block {
  display: flex;
  gap: min(calc(30 / 768 * 100vw), 30px);
  margin-top: min(calc(80 / 768 * 100vw), 80px);
}

.main .item_block.ver_right {
  flex-direction: row-reverse;
}
.main .item_photo {
  flex-shrink: 0;
  width: min(calc(375 / 768 * 100vw), 375px);
  position: relative;
}

/* .main .item_photo::before {
  content: "";
  position: absolute;
  background: url(../img/thumb_bg.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: min(calc(35 / 768 * 100vw), 35px);
  left: 0;
} */
.main .item_block.ver_right .item_photo::before {
  transform: scaleX(-1);
}
.main .js-item-swiper {
  overflow: hidden;
}
/* thumb_bg の img はインラインだと body の line-height(1.5=24px) の行ボックスが
   SP時の画像高さ（40px×vw縮小で約19px）より高くなり、vertical-align:bottom の分だけ
   画像の上に隙間が出る。block 化して行ボックスをなくす */
.main .item_photo_bg img {
  display: block;
}
.main .item_block.ver_right .item_photo_bg img {
  margin-left: auto;
}
.main .js-item-swiper .swiper-slide img {
  width: 100% !important;
  max-width: none;
  height: auto;
  display: block;
}
.main .item_info {
  flex: 1;
  min-width: 0;
}

/* 商品名 */
.main .item_head {
  position: relative;
  padding-block: min(calc(14 / 768 * 100vw), 14px) min(calc(10 / 768 * 100vw), 10px);
  padding-left: min(calc(28 / 768 * 100vw), 28px);
  border: min(calc(2 / 768 * 100vw), 2px) solid #121212;
}

.main .item_content {
  padding-left: min(calc(28 / 768 * 100vw), 28px);
}



.main .item_head::before {
  content: "";
  position: absolute;
  width: min(calc(20 / 768 * 100vw), 20px);
  height: min(calc(20 / 768 * 100vw), 20px);
  background: #111;
  top: calc(-1 * min(calc(4 / 768 * 100vw), 4px));
  right: calc(-1 * min(calc(4 / 768 * 100vw), 4px));
  -webkit-clip-path: polygon(
    100% 0%,
    100% 100%,
    75% 100%,
    75% 25%,
    0% 25%,
    0% 0%
  );
  clip-path: polygon(100% 0%, 100% 100%, 75% 100%, 75% 25%, 0% 25%, 0% 0%);
}
.item_block.ver_left .item_head::before {
  transform: rotate(-90deg);
  left: calc(-1 * min(calc(4 / 768 * 100vw), 4px));
}
.item_block.ver_left .item_head {
  border-right: 0;
}

.item_block.ver_right .item_head {
  border-left: 0;
}

.main .item_name {
  color: #121212;
  line-height: 1.3;
  font-weight: bold;
}
/* お気に入り。common.css の .wishlistinserttag は position:absolute / top:-27px のため、
   価格の横に並べるには明示的に静的配置へ戻す必要がある */
.main .item_fav {
  flex-shrink: 0;
}
.main .item_fav .wishlistSubmitButton {
  position: relative;
}
.main .item_fav .wishlistinserttag,
.main .item_fav .wishlistdeletetag {
  position: static;
}

/* 説明文 */
.main .item_desc {
  padding-top: 0.8em;
  color: #121212;
  line-height: 1.7;
  letter-spacing: calc(-1 * min(calc(1 / 768 * 100vw), 1px));
  white-space: nowrap;
}

/* 価格＋お気に入り */
.main .item_price_row {
  display: flex;
  align-items: center;
  gap: 0 min(calc(8 / 768 * 100vw), 8px);
  padding-top: 0.8em;
}
.item_block.ver_left .item_price_row,
.item_block.ver_left .item_cart,
.item_block.ver_left .item_more {
  padding-right: min(calc(28 / 768 * 100vw), 28px);
}

.main .item_price {
  min-width: 0;
  color: #121212;
  line-height: 1.4;
  font-weight: bold;
}
.main .item_color_num {
  padding-right: 0.4em;
}
/* カート */
.main .item_cart {
  padding-top: min(calc(30 / 768 * 100vw), 30px);
}
/* 在庫アイコンは横に並べて、入りきらないときは折り返す */
.main .i_cart101{
  margin-top: min(calc(30 / 768 * 100vw), 30px)!important;
}
.main .item_cart .i_cart_icon_list:empty {
  display: none;
}
/* 数量＋カートは幅を絞って、カートボタンを丸アイコン（module.css の ver_cq）に保つ */

/* カラー展開商品：カートモーダルを開くボタン */
.main .cart_select_btn {
  gap: 0 1em;
  width: min(calc(280 / 768 * 100vw), 280px);
  height: min(calc(50 / 768 * 100vw), 50px);
  margin-top: min(calc(30 / 768 * 100vw), 30px);
  padding-inline: 0.8em;
  font-size: inherit;
  text-align: center;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: #111 !important;
  border: none;
}
/* .i_cart101_btn のバッグアイコンは使わず、右側に下向きシェブロンを出す */
.main .cart_select_btn::before {
  display: none;
}
.main .cart_select_btn::after {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.14em) rotate(45deg);
}
.main .cart_select_btn_text {
  white-space: nowrap;
}
/* アイテム詳細 */
.main .item_more {
  padding-top: min(calc(30 / 768 * 100vw), 30px);
}

.main .item_more_btn {
  display: inline-flex;
  align-items: center;
  gap: 0 0.4em;
  padding: min(calc(10 / 768 * 100vw), 10px) min(calc(24 / 768 * 100vw), 24px);
  color: #fff;
  line-height: 1.2;
  text-decoration: none;
  background-color: #72223d;
  border-radius: 999px;
}
.main .item_more_btn::before {
  content: "";
  flex-shrink: 0;
  width: 0.5em;
  height: 0.6em;
  background-color: currentColor;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* ---- About（ニューエラについて） ---- */
.main .about {
  padding: min(calc(50 / 768 * 100vw), 50px) 0 0;
  text-align: center;
}
.main .about img {
  margin-inline: auto;
  height: auto;
}

/* ---- ページTOPへ ---- */
.main .totop_wrap {
  display: flex;
  justify-content: flex-end;
  padding: 0 min(calc(24 / 768 * 100vw), 24px);
  margin-top: min(calc(30 / 768 * 100vw), 30px);
}
.main .totop {
  display: inline-flex;
  align-items: center;
  gap: 0 0.3em;
  color: #c4007f;
  font-weight: bold;
  text-decoration: none;
  border-style: solid;
  border-color: #c4007f;
  border-width: 0 0 2px;
}
.main .totop::before {
  content: "";
  width: 0.8em;
  height: 0.6em;
  background-color: #c4007f;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* ---- カートモーダル（カラー展開商品／opioneers2607 と同仕様） ---- */
.modal_modmicro {
  z-index: 10000;
}
.main .cart_modal {
  padding: min(calc(24 / 768 * 100vw), 24px) min(calc(20 / 768 * 100vw), 20px)
    min(calc(10 / 768 * 100vw), 10px);
}
.main .cart_modal_title {
  padding-bottom: min(calc(12 / 768 * 100vw), 12px);
  color: #121212;
  line-height: 1.3;
  font-weight: bold;
}
/* 商品セクション｜カートセクション を中央揃えで横並び */
.main .cart_modal_body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: min(calc(16 / 768 * 100vw), 16px);
  border-top: 2px solid #4b382d;
  border-bottom: 2px solid #4b382d;
}
.main .cart_var_list {
  flex: 1;
  min-width: 0;
}
.main .cart_var {
  display: flex;
  align-items: center;
  gap: min(calc(12 / 768 * 100vw), 12px);
  padding: min(calc(14 / 768 * 100vw), 14px) 0;
  cursor: pointer;
}
.main .cart_var_list .cart_var:not(:last-child) {
  border-bottom: 1px dashed #ddd;
}
/* サムネイル（選択対象外） */
.main .cart_var_thumb {
  flex-shrink: 0;
  width: min(calc(110 / 768 * 100vw), 110px);
  cursor: default;
}
.main .cart_var_thumb img {
  width: 100% !important;
  max-width: none;
  height: auto;
  display: block;
}
.main .cart_var_info {
  flex: 1;
  min-width: 0;
}
.main .cart_var_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(calc(10 / 768 * 100vw), 10px);
  padding-bottom: 0.4em;
}
.main .cart_var_name {
  /* min-width: min(calc(210 / 768 * 100vw), 210px); */
  color: #121212;
  line-height: 1.3;
  font-size: min(calc(20 / 768 * 100vw), 20px);
  font-weight: bold;
  cursor: pointer;
  color: #4b382d;
}
.main .cart_var_fav .wishlistSubmitButton {
  position: relative;
}
.main .cart_var_fav .wishlistinserttag,
.main .cart_var_fav .wishlistdeletetag {
  position: static;
}

.main .cart_var_info .i_cart_icon {
  width: auto;
  padding-inline: 0.6em;
}
.main .cart_var_info .i_cart101_empty {
  margin: 0.5em 0 0;
}
/* ラジオ */
.main .cart_var_choice {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.main .cart_var_radio {
  flex-shrink: 0;
  width: min(calc(22 / 768 * 100vw), 22px);
  height: min(calc(22 / 768 * 100vw), 22px);
  margin: 0;
  accent-color: #121212;
  cursor: pointer;
}
/* カートセクション（カラー分を用意し、選択中のみ表示） */
.main .cart_unit_list {
  width: 30%;
}
.cart_unit_list .i_cart101_select{
  display: flex;
  align-items: center;
}

.main .cart_unit {
  display: none;
}
.main .cart_unit.is_selected {
  display: block;
}
.main .cart_unit .i_cart101 {
  margin: 0;
  display: block;
}
.main .cart_unit_amount {
  padding-right: 0.4em;
  color: #121212;
  white-space: nowrap;
  font-weight: bold;
}

.main .cart_unit .i_cart101_select select {
  width: 100%;
  border-radius: 999px;
}
.main .modal_modmicro_content .i_cart101_btn.ver_cq {
  margin-top: 5%;
  margin-left: auto;
}

/* ---- ファッション　モーダル（共通） ---- */
.main .js_fashion_modal .modal_modmicro_overlay {
  padding: 20px 0;
}
@media screen and (768px <= width) {
  .main .js_fashion_modal .modal_modmicro_overlay {
    padding: 20px 20px;
  }
}
.main .js_fashion_modal .swiper {
  --swiper-pagination-bullet-inactive-color: #b4b4b4;
  --swiper-pagination-color: #000;
  padding: 0 0 10px;
}
.main .js_fashion_modal .modal_modmicro_container {
  max-width: 800px;
}
.main .js_fashion_modal .swiper-slide {
  text-align: center;
}
.main .js_fashion_modal .swiper-slide img {
  width: 100% !important;
  max-width: none;
}
.main .js_fashion_modal .swiper-pagination {
  position: static;
  margin: 10px 0 0;
}
.main .js_fashion_modal .swiper-button-next,
.main .js_fashion_modal .swiper-button-prev {
  display: none;
}
@media screen and (992px <= width) {
  .main .js_fashion_modal .swiper-button-next,
  .main .js_fashion_modal .swiper-button-prev {
    display: block;
    color: #000;
  }
}