@charset "utf-8";

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 5000;
}

#overlay.show {
  opacity: 1;
  pointer-events: auto;
}


.modal {
  display: flex;
  flex-direction: column;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: white;
  padding: 5px;
  border-radius: 8px;

  width: 60%;
  height: 90%;
  max-width: 90vw;
  max-height: 90vh;
  overflow: visible;
  box-sizing: border-box;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5001;
}
@media screen and (max-width: 768px) {
  .modal {
    width: 90%;
  }
}
@media screen and (max-width: 1024px) {
  .modal {
    width: 90%;
  }
}
@media screen and (max-width: 1440px) {
  .modal {
    width: 90%;
  }
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

#modal-content {
  width: 100%;
  height: 100%;
}
#modal-content.hidden {
  visibility: hidden;
}

/* iframeに重なる閉じるボタン */
.modal-close-bar {
  position: relative;
  height: 0; /* 高さを持たせないことでiframeと重なる */
}

#modal-close {
  position: absolute;
  top: -16px;
  right: -15px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(0, 0, 0);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
  border: 3px solid #fff;
  box-sizing: content-box;
}

/* iframeそのもの */
#modal-content {
  width: 100%;
  flex: 1;        /* モーダルの高さに合わせて伸縮 */
  border: none;
  display: block;
  min-height: 0; /* flex子要素の縮小を許可するために必要 */
}

.modal-action {
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 8;
  padding-top: 2px;
}

/* iframeの外（下）に配置されるnav */
.modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px 2px 16px;
  border-top: 1px solid #eee;
}
.modal-nav .modal-button {
  width: 10%;
  padding: 0;
}
.modal-nav .modal-button button {
  width: 100%;
}
@media (max-width: 768px) {
  .modal-nav .modal-button {
    width: 25%;
  }
}


.modal-button {
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 2px;
  margin-bottom: 0;
}

.modal-button button {
  font-weight: bold;
  height: 3rem;
  border: solid 3px #000;
  text-align: center;
  display: block;
  width: 40%;
  margin: 0 auto;
  border-radius: 3px;
  color: #333;
  font-size: 0.8rem;
  width: 50%;
  
}
@media (max-width: 768px) {
  .modal-button button {
    font-size: 2.0rem;
    height: 5rem;
  }
  #button-payment {
    white-space: nowrap;
    font-size: clamp(0.9rem, 3.6vw, 2.0rem);
  }
}

.modal-button.black button {
  background-color: #000;
  border: solid 3px #000;
  color: #fff;
}
.modal-button.gold button {
  background: linear-gradient(180deg, #f5e08a 0%, #c8a84b 50%, #8b6914 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border: solid 2px #8b6914;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.modal-button.silver button {
  background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 50%, #606060 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border: solid 2px #505050;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}


.modal-button button:nth-of-type(2) {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.modal-button button::before {
  content: "";
  position: absolute;
  background-size: cover;
  width: 16px;
  height: 38px;
  left: 4px;
  top: 50%;
  transform: translate(0px, -50%);
}
.modal-button button::after {
  content: "";
  position: absolute;
  background-size: cover;
  width: 16px;
  height: 38px;
  right: 4px;
  top: 50%;
  transform: scale(-1.0) translate(0px, 50%);
}

.modal-button.black button:before, 
.modal-button.black button:after {
  background: url(../img/img_login.png);
}
.modal-button.white button:before,
.modal-button.white button:after {
  background: url(../img/btn_bg.png);
}

.modal-button:is(.gold, .silver) button::before,
.modal-button:is(.gold, .silver) button::after {
  display: none;
}

.modal-button button:disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  border: 3px solid #e0e0e0;
  box-shadow: none;
  text-shadow: none;
  opacity: 0.7;
}
.modal-button button.disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  border: 3px solid #e0e0e0;
  box-shadow: none;
  text-shadow: none;
  opacity: 0.7;
}

.modal-button .button-arrow {
  height: 50%;
  width: auto;
}
.modal-button #button-prev .button-arrow {
  transform: rotate(-90deg);
  left: -10%;
}
.modal-button #button-next .button-arrow {
  transform: rotate(90deg);
  right: -10%;
}

/* 画面高が足りないとき(横向きスマホで 390〜445px)、モーダル(height:90% = 90vh)のうち
   「カートに追加」行(約54px)と「前へ/次へ」行(約60px)が2段で約114px を占め、
   商品情報を表示する iframe が 276px 程度しか残らない。
   下部を1行にまとめて iframe の高さを稼ぐ:
     [前へ]      [カートに追加]      [次へ]
                    1 / 8
   幅ではなく高さで判定する: orientation は「幅 > 高さ」で切り替わるため、
   幅を狭めて縦長になった途端に無効化され、特定の横幅でしか効かなくなる。
   閾値は iframe 側の縮小指定(confirmation.css の max-height: 420px)と対になる値 */
@media screen and (max-height: 500px) {

  /* .modal は flex column のため下部2ブロックが必ず縦に積まれる。
     grid にして 3行目に横並びで配置する
     (position:fixed は維持されるので閉じるボタンや装飾矢印の基準は変わらない) */
  .modal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    /* 閉じるボタン / タブ / 商品詳細・内容比較・関連商品 / ボタン行 / 商品数 */
    grid-template-rows: 0 auto minmax(0, 1fr) auto auto;
  }

  .modal-close-bar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .modal-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #modal-content,
  .modal-compare,
  .modal-related {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  /* .modal-nav は「前へ / 商品数 / 次へ」をまとめた flex 行。
     display:contents で子を .modal の grid 直下に展開し、
     左端・中央下・右端へ個別に配置する
     (.modal-nav 自身の padding と border-top は無効化されるので、
      区切り線は 3行目の各要素に付け直している) */
  .modal-nav {
    display: contents;
  }

  /* 「前へ」= 左端 */
  .modal-nav > .modal-button:first-of-type {
    grid-column: 1;
    grid-row: 4;
  }

  /* 「カートに追加」= 中央 */
  .modal-action {
    grid-column: 2;
    grid-row: 4;
    /* 横幅の一部だけに影が出て不自然になるため、区切りは border に統一 */
    box-shadow: none;
  }

  /* 「次へ」= 右端 */
  .modal-nav > .modal-button:last-of-type {
    grid-column: 3;
    grid-row: 4;
  }

  .modal-action,
  .modal-nav > .modal-button {
    border-top: 1px solid #eee;
  }

  /* 商品数はカートボタンの真下に小さく */
  #nav-counter {
    grid-column: 2;
    grid-row: 5;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    color: #666;
    padding-bottom: 2px;
  }

  /* 3rem(48px) → 40px。装飾矢印(::before/::after)が 38px なので下限は 40px */
  .modal-button button {
    height: 40px;
    font-size: 12px;
  }

  /* 既定の width:10% は grid の auto 列だと基準が定まらないので、
     ボタン自体を固定幅にする */
  .modal-nav > .modal-button {
    width: auto;
    padding: 2px 8px;
  }

  .modal-nav > .modal-button button {
    width: 64px;
  }

  .modal-action .modal-button button {
    width: 100%;
    max-width: 260px;
  }
}


/* 関連商品タブ(大・中・小などのバリエーション)。商品カードを並べる */
.modal-related {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 8px;
}
.modal-related-list {
  display: grid;
  /* 商品画像は商品詳細と同じ大きさ(最大470px)で表示する */
  grid-template-columns: repeat(auto-fill, minmax(min(470px, 100%), 470px));
  gap: 12px;
  padding: 2px 6px 8px 2px; /* 枠の影が切れないように */
}
/* 枠はTOPの商品カード(.contpack-list li)に合わせる */
.modal-related-item {
  cursor: pointer;
  border: 1px solid #ac7d24;
  border-radius: 7px;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.45);
  background: #fff;
  overflow: hidden;
}
.modal-related-item .banner-mount {
  width: 100%;
  background: #F2F0EC;
}
.modal-related-name {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  padding: 4px 8px;
  overflow-wrap: anywhere; /* 商品名は省略せず全て表示する */
}
/* TOPの商品カードの価格(.price-tag.cart)に合わせて右寄せ・太字 */
.modal-related-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  text-align: right;
  padding: 0 8px 6px;
}
@media (max-width: 768px) {
  .modal-related-item {
    border-width: 0.8px;
    border-radius: 4px;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.45);
  }
  .modal-related-name {
    font-size: 1.4rem;
  }
  .modal-related-price {
    font-size: 1.6rem;
  }
}

/* 商品詳細/内容比較のタブ */
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 48px 0 8px; /* 右は閉じるボタンと重ならないように空ける */
  border-bottom: 2px solid #750000;
}
.modal-tab {
  flex: 1;
  max-width: 200px;
  padding: 8px 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  background: #fff;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}
.modal-tab.active {
  color: #fff;
  background: #750000;
  border-color: #750000;
}
/* ランキングの順位バッジ(左上)と重ならないように空ける */
.modal:has(#modalRank:not(.none)) .modal-tabs {
  padding-left: 80px;
  padding-top: 60px; /* 順位の下線より下からタブを始める(PCは順位の数字が大きい) */
}
@media (max-width: 768px) {
  .modal:has(#modalRank:not(.none)) .modal-tabs {
    padding-top: 38px;
  }
}
#modal-content.tab-hidden {
  display: none;
}

/* 内容比較 */
.modal-compare {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* 上に余白を持たせると、固定した列見出しの上の隙間から行が見えたり、スクロール開始時に
     見出しが余白の分だけ動いたりするため、上の余白は取らない(見出し自身のpaddingで空ける) */
  padding: 0 8px 12px;
}
/* collapse だと罫線が表全体に描かれ、iOS Safari ではスクロール時に固定した列見出しの上へ
   罫線や内容物アイコンが透けて出るため、separate にして線を各セルの右・下に持たせる */
.modal-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-left: 1px solid #ddd;
  font-size: 0.9rem;
  color: #333;
}
.modal-compare-table th,
.modal-compare-table td {
  padding: 8px;
  border: none;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  text-align: center;
  white-space: nowrap;
}
.modal-compare-table thead th {
  border-top: 1px solid #ddd;
  padding-top: 14px;
}
.modal-compare-table thead th {
  background: #F2F0EC;
  font-weight: bold;
}
/* 内容物名の列はスクロールしても残す */
.modal-compare-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
  font-weight: normal;
  white-space: normal;
  min-width: 12em;
}
/* 内容物のアイコン＋名前 */
.modal-compare-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* アイコンのcanvasが列見出しより手前に描かれないよう、重なり順をこの中に閉じ込める */
.modal-compare-item .item-pic {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
}
.modal-compare-table thead th.selectable {
  cursor: pointer;
  color: #8b6914;
  text-decoration: underline;
}
.modal-compare-table .current {
  background: #fdf3dc;
  font-weight: bold;
}
.modal-compare-table thead th.current {
  background: #ac7d24;
  color: #fff;
}
/* 列見出し：小さい商品画像＋サイズ＋価格。縦スクロールしても残す */
.modal-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* 商品画像と内容物の仕切り。border-collapse の線は sticky に追従しないため影で描く */
  box-shadow: inset 0 -2px 0 #ac7d24;
  /* iOS Safariではスクロール中にcanvas(内容物アイコン)が固定した見出しの上に透けて出るため、
     見出しを独立したレイヤーにして常に手前に描かせる */
  will-change: transform;
}
.modal-compare-table thead th:first-child {
  left: 0;
  z-index: 3;
}
/* 内容物名だけの行はスマホ縦のみ表示する(PC・横向きは左の列に名前を出す) */
.modal-compare-table .modal-compare-label {
  display: none;
}
.modal-compare-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* mountCanvas が width:100% をインライン指定するため !important で上書きする */
.modal-compare-head .banner-mount {
  width: 160px !important;
  border-radius: 4px;
  overflow: hidden;
}
.modal-compare-size {
  font-size: 1.2rem;
}
.modal-compare-price {
  font-size: 1rem;
}
/* 現在選んでいる商品の列見出しに出す印(色付けは th.current) */
.modal-compare-selected {
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: #ac7d24;
}
@media (max-width: 768px) {
  .modal-tab {
    font-size: 1.3rem;
  }
  .modal-compare-table {
    font-size: 1.2rem;
  }
  /* 列見出しのサイズ・価格は内容物より大きくして見やすくする */
  .modal-compare-size {
    font-size: 1.8rem;
  }
  .modal-compare-price {
    font-size: 1.6rem;
  }
}

/* スマホ・横向き：関連商品は2列、比較表は詰めて表示する */
@media (max-width: 768px), (max-height: 500px) {
  .modal-related {
    padding: 4px;
  }
  .modal-related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .modal-tabs {
    padding-top: 2px;
  }
  /* 内容比較・関連商品タブが無い時も、商品詳細タブは3つ並んだ時と同じ幅にする */
  .modal-tab {
    flex: 0 1 calc((100% - 8px) / 3);
    padding: 4px 0;
  }

  .modal-compare {
    padding: 0 4px 4px;
  }
  .modal-compare-table th,
  .modal-compare-table td {
    padding: 4px;
  }
  .modal-compare-table thead th {
    padding-top: 8px;
  }
  .modal-compare-head .banner-mount {
    width: 80px !important;
  }
  /* アイコンを縮め、名前はアイコンの下に出して列幅を抑える */
  .modal-compare-table tbody th {
    min-width: 0;
    width: 5.5em;
  }
  .modal-compare-item {
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }
  .modal-compare-item .icon-mount {
    width: 32px !important;
  }
}

/* スマホ縦：名前の列をやめ、内容物名を全幅の行にして個数の行の上に出す。商品列は均等幅で画面内に収める */
@media (max-width: 768px) {
  .modal-compare-table {
    table-layout: fixed;
  }
  .modal-compare-table thead th:first-child,
  .modal-compare-table tbody tr:not(.modal-compare-label) > th {
    display: none;
  }
  .modal-compare-table .modal-compare-label {
    display: table-row;
  }
  .modal-compare-table .modal-compare-label th {
    position: static;
    width: auto;
    padding: 4px 6px;
    background: #F2F0EC;
    border-bottom: none;
  }
  .modal-compare-label .modal-compare-item {
    flex-direction: row;
    gap: 6px;
    text-align: left;
  }
  /* %指定だと列幅が内容(価格の文字)で決まるため幅が0になり、画像が描かれないことがある。px固定にする */
  .modal-compare-head .banner-mount {
    width: 80px !important;
  }
}

/* スマホ縦向き：関連商品は1列にして商品画像を大きくする */
@media (max-width: 768px) {
  .modal-related-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 横向き(画面高が低い)：関連商品は3列にして小さめにする */
@media (max-height: 500px) {
  .modal-related-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .modal-related-name {
    font-size: 11px;
    padding: 2px 6px;
  }
  .modal-related-price {
    font-size: 12px;
    padding: 0 6px 4px;
  }
  .modal-tab,
  .modal-compare-table {
    font-size: 12px;
  }
  .modal-compare-size {
    font-size: 12px;
  }
  .modal-compare-price {
    font-size: 12px;
  }
}

/* 関連商品タブ上部の「一括でカートに入れる」 */
.modal-related-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 6px 8px 2px;
}
.modal-related-add-all {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}
@media (max-width: 768px) {
  .modal-related-add-all {
    width: 100%;
    font-size: 1.4rem;
  }
}