@charset "UTF-8";

.main {
  --outer-blue: #2d6091;
  --outer-brown: #5a4636;
  --outer-text: #121212;
}

/* ---- メインビジュアル ---- */
.main .mv {
  margin: 0;
  line-height: 0;
}
.main .mv img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
}

/* ---- 背景 ---- */
.main .outer_body {
  background: url(../img/bg.webp) center top / 100% auto repeat-y;
  padding-bottom: min(calc(40 / 768 * 100vw), 40px);
  padding-top: min(calc(30 / 768 * 100vw), 30px);
}

/* ---- サムネ一覧 ---- */
.main .thumb_area {
  padding: min(calc(30 / 768 * 100vw), 30px) min(calc(22 / 768 * 100vw), 22px)
    min(calc(50 / 768 * 100vw), 50px);
    background: #d1c4ab;
}
.main .thumb_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(calc(20 / 768 * 100vw), 20px) min(calc(16 / 768 * 100vw), 16px);
}
.main .thumb {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.main .thumb.js_tab {
  cursor: pointer;
}
.main .thumb_label {
  display: block;
  padding: 0.25em 0;
  color: #fff;
  line-height: 1.3;
  font-weight: bold;
  white-space: nowrap;
  background-color: var(--outer-blue);
  margin-inline:min(calc(5 / 768 * 100vw), 5px);
}
/* ラベルなし（発売中）は高さだけ確保して行をそろえる */
.main .thumb_label.ver_none {
  visibility: hidden;
}
.main .thumb_img {
  display: block;
  position: relative;
  line-height: 0;
}
.main .thumb_img img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
}
/* 選択中は青枠 */
.main .thumb.js_tab .thumb_img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: min(calc(4 / 768 * 100vw), 4px) solid transparent;
  transition: border-color 0.2s;
  pointer-events: none;
}
.main .thumb.js_tab.is_active .thumb_img::after {
  border-color: var(--outer-blue);
  border-radius: min(calc(4 / 768 * 100vw), 4px);
}
@media (hover: hover) {
  .main .thumb.js_tab:hover .thumb_img img {
    opacity: 0.8;
  }
}

.main .thumb_coming_head {
  margin: min(calc(20 / 768 * 100vw), 20px) 0 min(calc(14 / 768 * 100vw), 14px);
  line-height: 0;
}
.main .thumb_coming_head img {
  height: auto;
}

/* ---- 商品パネル ---- */
.main .panel_area {
  margin-inline: min(calc(8 / 768 * 100vw), 8px);
    padding: min(calc(17 / 768 * 100vw), 17px) min(calc(8 / 768 * 100vw), 8px);
    border: min(calc(2 / 768 * 100vw), 2px) solid var(--outer-brown);
}
.main .panel {
  display: none;
}
.main .panel.is_active {
  display: block;
  animation: outer_panel_fade 0.4s ease;
}
@keyframes outer_panel_fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main .panel_inner {
  background-color: #fbf8f8;
}
.main .panel_head {
  padding: min(calc(18 / 768 * 100vw), 18px) min(calc(24 / 768 * 100vw), 24px);
  color: #fff;
  background-color: #2e6090;
}
.main .panel_name {
  margin: 0;
  line-height: 1.4;
  font-weight: bold;
}
.main .panel_price {
  margin: 0.2em 0 0;
  line-height: 1.4;
}
.main .panel_price .i_color_timesale {
  color: #ffd2d2;
}
.main .panel_color_num {
  padding-right: .5em;
}
.main .panel_body {
  padding: min(calc(24 / 768 * 100vw), 24px) min(calc(20 / 768 * 100vw), 20px)
    min(calc(30 / 768 * 100vw), 30px);
}
.main .panel_desc {
  margin: 0 0 min(calc(20 / 768 * 100vw), 20px);
  padding-inline: 0.2em;
  color: var(--outer-text);
  line-height: 1.6;
  font-weight: bold;
}

/* 商品写真スライダー */
.main .js-item-swiper {
  overflow: hidden;
}
.main .js-item-swiper .swiper-slide img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
}
.main .js-item-swiper .swiper-button-prev,
.main .js-item-swiper .swiper-button-next {
  width: 6vw;
  height: 6vw;
  max-width: 36px;
  max-height: 36px;
  margin-top: calc(-1 * min(3vw, 18px));
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.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-item-swiper .swiper-button-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 14 21 30l16 16' fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.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' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23 14 16 16-16 16' fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* カラーを選ぶ／アイテム詳細 */
.main .panel_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(20 / 768 * 100vw), 20px);
  margin-top: min(calc(30 / 768 * 100vw), 30px);
}

.main .cart_select_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 3em;
  width: 100%;
  height: min(calc(76 / 768 * 100vw), 76px);
  margin: 0;
  padding-inline: 1em;
  color: #fff;
  font-size: inherit;
  text-align: center;
  background: #111 !important;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* .i_cart101_btn のバッグアイコンは使わず、右側に下向きシェブロンを出す */
.main .cart_select_btn::before {
  display: none;
}
.main .cart_select_btn::after {
  content: "";
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.2em) rotate(45deg);
}
.main .cart_select_btn_text {
  white-space: nowrap;
}
/* 発売前：カートの代わりに COMING SOON（押せない） */
.main .panel_coming {
  color: #fff;
  line-height: 1.1;
  background-color: #0e6eb8;
  text-align: center;
  padding: 0.3em 1em;
  font-size: min(calc(24 / 768 * 100vw), 16px);
}
.main .panel_more_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.6em;
  flex-shrink: 0;
  min-width: min(calc(230 / 768 * 100vw), 230px);
  padding: min(calc(10 / 768 * 100vw), 10px) min(calc(24 / 768 * 100vw), 24px);
  color: #fff;
  line-height: 1.4;
  text-decoration: none;
  background-color: var(--outer-blue);
  border-radius: 999px;
}
.main .panel_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%);
}
.main .panel_more_btn:hover {
  color: #fff;
  opacity: 0.8;
}

/* 説明画像 */
.main .panel_dec {
  margin-top: min(calc(40 / 768 * 100vw), 40px);
  line-height: 0;
}
.main .panel_dec img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
}

/* ---- カートモーダル（カラー展開商品／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;
}