/* 🧩🧩🧩🧩🧩🧩🧩🧩🧩🧩 */
/* 🧩🧩🧩共通部の設定🧩🧩🧩 */

/* 🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨 */
/* 🎨🎨🎨使用色の設定🎨🎨🎨 */

:root {
  --primary-color: royalblue;
  /* ロイヤルブルー */
  --secondary-color: #b0c4de;
  /* ライトスティールブルー */
  --accent-color: #1c5d99;
  /* ロイヤルブルーより濃い色 */
  --background-color: #f7f9fc;
  /* ほぼ白の青色 frameの色*/
  --text-color: #333;
}

/* ============================== */
/* 枠のスタイル */
/* ============================== */
.frame {
  margin: 0 auto;
  padding: 0;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  background-color: var(--background-color);
  overflow: hidden;
  border-top: 10px solid var(--primary-color);
  border-bottom: 10px solid var(--primary-color);
}

/* ============================== */
/* テキストのスタイル */
/* ============================== */
.question {
  font-size: 1.8rem;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.debit-attention {
  margin-top: 10px;
}

.small {
  font-size: 0.7rem;
line-height: 1.3; 
}

.note {
  /* 補足説明 */
  margin-top: 0;
  padding-top: 0;
}

.history {
  /* 現在位置の表示 */
  margin: 0;
  padding: 0;
  text-align: left;
}

.attention-title {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1.3rem;
}

span.bracket {
  margin-left: -0.6em;
  /*「PayPay決済」等の「字の左を揃えている*/
}

.warning-primary {
  font-weight: bold;
  color: red;
}

.warning-secondary {
  grid-gap: 0 0.7em;
  margin: 0 auto;
  padding: 0.2rem 0.1em 0.2rem 0.1rem;
  border-radius: 5px;
  background-color: #ffebee;
  color: #333333;
}

a {
  display: inline-block;
  white-space: normal;
  word-break: break-all;
  /* URLの途中でも折り返す */
}

.point {
  background-image: linear-gradient(to bottom, transparent 55%, #f6e58d 55%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline;
  padding: 0 2px;
}

.system-excuse {
  margin-top: 3rem;
}

.resetBtn-system-excuse {
  margin-top: 0;
}






/* ==============================
メインコンテンツ
============================== */

.button-set-Q1 {
  /* 進む系の配列 */
  display: grid;
  gap: 1rem;
}

.button-set-Q2 {
  /*　確定系の配列 */
  display: grid;
  gap: 1.5rem;
}

.button-set {
  /*　進む系・確定系の両方の配列 */
  display: grid;
  gap: 15px;
  margin-top: 1.5rem;
}

.button-set-back {
  /*　戻る系の配列 */
  display: grid;
  gap: 15px;
  margin-top: 3rem;
}

.return-shipping-sage {
  margin-top: 3.5rem;
}

/* ============================== */
/* 次へボタンのスタイル */
/* ============================== */

/* ======== 通常 ============= */
.next {
  padding: 0.5em 3em;
  width: 100%;
  height: 55px;
  text-decoration: none;
  border: 2px solid var(--primary-color);
  display: inline-block;
  position: relative;
  background-color: var(--primary-color);
}

/* ======== 左側の半円 ============= */
/* 白色の箇所 */
a.next:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  transition: left 0.5s ease, z-index 0.7s ease;
  transform: translateX(0);
  z-index: 0;
}

.text {
  position: relative;
  z-index: 2;
  color: var(--text-color);
  font-size: 1.7em;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 40px;
}

/* 左側の半円 */
.circle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 27px;
  height: 103%;
  transition: all 0.5s;
  border-radius: 0 50px 50px 0;
  background: var(--primary-color);
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
}

.arrow {
  /* 円の中の→ */
  position: absolute;
  font-size: 35px;
  color: var(--background-color);
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ============================== */
/* 次へボタンのスタイル内の文字 */
/* ============================== */

/* ======== 個別設定 ============= */

/* デビットカード*/
#debit-no {
  font-size: 2.2em;
  top: 3px;
}

#debit-yes {
  font-size: 2em;
  top: 5px;
}

/* ======== 単品落札　個別設定 ============= */
/* 🍈送料変更🍈 */
#text-afterchange {
  font-size: clamp(1.25em, 2vw, 1.7em); 
  top: 13px;
}

/* 🍒沖縄離島🍒 */
#next-island {
  padding-top: 1px;
}

#text-island {
  position: relative;
  z-index: 2;
  color: var(--text-color);
}

/* 佐川配送かつを小さく */
.small-text {
  font-size: 1em;
}

/* 沖縄離島への配送を大きく */
.large-text {
  font-size: 1.3em;
  padding-top: 0;
  margin-top: 0;
  line-height: 20px;
  margin-left: 10px;
}

/* 長いため改行 */
#text-error1-break-line,
#text-island-break-line {
  display: block;
}

/* 🍒🍒🍒🍒🍒 */

/* 理解した次へ進むボタン */
.understand-text {
  left: 30px;
}

/* 決済方法別　ご返金方法等 */
#text-refund {
  font-size: 1.5em;
  top: 10px;
}

/* ======== 通常 ============= */
#next-usually {
  height: 60px;
  text-decoration: none;
  border: 2.5px solid var(--accent-color);
  display: inline-block;
  position: relative;
  background-color: var(--accent-color);
}

/* ======== 左側の半円 ============= */
/* 白色の箇所 */
#a.next-usually:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  transition: left 0.5s ease, z-index 0.7s ease;
  transform: translateX(0);
  z-index: 0;
}

#text-usually {
  z-index: 2;
  color: var(--text-color);
  font-size: 1.8em;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 40px;
  top: 10px;
}

/* 左側の半円 */
#circle-usually {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 30px;
  height: 103%;
  transition: all 0.5s;
  border-radius: 0 50px 50px 0;
  background: var(--accent-color);
  transform: translateY(-50%);
  opacity: 1;
}

#arrow-usually {
  /* 円の中の→ */
  position: absolute;
  font-size: 35px;
  color: var(--background-color);
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ======================================= */

/* ======== 各種支払い系 ============= */
p.convenience-miss {
  margin: 40px auto auto auto;
  font-weight: bold;
  text-align: center;
}

#credit-text-one-bag,
#credit-text-island {
  font-size: 29px;
}

#PayPaycredit-text-one-bag,
#PayPaycredit-text-island {
  font-size: 26px;
}

.text-mix-yes-no {
  left: 55px;
}

.return-shipping-text-mix-yes-no {
  left: 55px;
  font-size: 1em;
}

/* ============================================================ */

/* ============================== */
/* 選択ボタンのスタイル */
/* ============================== */
.choice {
  padding-left: 30px;
  padding-top: 0.25em;
  width: 100%;
  height: 55px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  background: linear-gradient(to bottom, var(--primary-color), #2a3f8f);
  color: var(--background-color);
  font-weight: bold;
  font-size: 1.7em;
  border-radius: 10px;
  box-shadow: 0 6px 0 #2a2f6f, 0 5px 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
}

/* ======== 各種支払い系 ============= */
.text-shop-cash{
top:4px;
  position: relative; 
}

/* ============================== */
/* 戻るボタンのスタイル */
/* ============================== */
.preBtn {
  margin-top: 20px;
  width: 100%;
  height: 55px;
  text-decoration: none;
  border: 2px solid var(--primary-color);
  display: inline-block;
  position: relative;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
}

/* ======== 右の半円 ============= */
/* 白色の箇所 */
.preBtn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  transition: left 0.5s ease, z-index 0.7s ease;
  transform: translateX(0);
  z-index: 0;
}

.text-preBtn {
  position: relative;
  z-index: 2;
  color: var(--text-color);
  font-size: 1.7em;
  left: 55px;
  top: 2px;
}

/* 決済方法選択へ戻るの文字を小さく */
.text-preBtn-pay-way {
  font-size: 1.6em;
}

/* 右の半円 */
.circle-preBtn {
  position: absolute;
  top: 50%;
  right: 0px;
  width: 27px;
  height: 102%;
  transition: all 0.5s;
  border-radius: 50px 0 0 50px;
  background: var(--secondary-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.arrow-preBtn {
  /* 円の中の← */
  position: absolute;
  font-size: 35px;
  color: var(--primary-color);
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ============================== */
/* 戻るボタンのスタイル */
/* ============================== */
.preBtn {
  margin-top: 20px;
  width: 100%;
  height: 55px;
  text-decoration: none;
  border: 2px solid var(--primary-color);
  display: inline-block;
  position: relative;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
}

/* ======== 右の半円 ============= */
/* 白色の箇所 */
.preBtn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  transition: left 0.5s ease, z-index 0.7s ease;
  transform: translateX(0);
  z-index: 0;
}

.text-preBtn {
  position: relative;
  z-index: 2;
  color: var(--text-color);
  font-size: 1.7em;
  left: 55px;
  top: 2px;
}

/* 決済方法選択へ戻るの文字を小さく */
.text-preBtn-pay-way {
  font-size: 1.6em;
}

/* 右の半円 */
.circle-preBtn {
  position: absolute;
  top: 50%;
  right: 0px;
  width: 27px;
  height: 102%;
  transition: all 0.5s;
  border-radius: 50px 0 0 50px;
  background: var(--secondary-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.arrow-preBtn {
  /* 円の中の← */
  position: absolute;
  font-size: 35px;
  color: var(--primary-color);
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ==============================
最初に戻るボタン
============================== */

.resetBtn {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  width: 100%;
  height: 55px;
  background: #c7d2e0;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 6px 0 #6a7b8f, 0 10px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  color: var(--text-color);
  cursor: pointer;
}

.resetBtn span {
  position: relative;
  top: 3px;
  left: 40px;
}

.return-shipping {
  font-size: 1.7em;
  width: 100%;
  display: flex;
  align-items: center;
}

.return-shipping span {
  position: relative;
  top: 4px;
  left: 30px;
}

/* ======================================= */
/* 銀行口座 */
.bank-account {
  margin-top: 40px;
  padding: 3px;
  padding-bottom: 0;
  border: 3px solid var(--primary-color);
  position: relative;
  background-color: var(--background-color);
  border-radius: 8px;
}

.bank-account::before {
  content: "振込先口座情報";
  position: absolute;
  top: -15px;
  left: 15px;
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 2px 10px;
  font-weight: bold;
  font-size: 18px;
}

.bank-account p {
  margin: 10px;
}

/* 佐川営業所問合せリンク囲み */
.memo {
  padding: 10px;
  border: 3px solid var(--primary-color);
  border-radius: 8px;
}

/* 手続き前変更時の時間帯例 */

.OK-NG {
  margin-top: 0.4rem;
}

.OK,
.NG {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  /* 角を少し丸くする */
  color: white;
  font-weight: bold;
  font-size: 16px;
  border: none;
  cursor: default;
  margin: 0px;
  margin-right: 6px;
  text-align: center;
}

.OK {
  background-color: #4caf50;
  /* 緑 */
}

.NG {
  background-color: #f44336;
  /* 赤 */
}

/* ============================== */
/* メディアクエリ (タップ系) */
/* タップ後のスタイル (pointer: coarse) */
/* ============================== */
@media (pointer: coarse) {

  a.next.tapped .circle {
    /* 右に行く円 */
    border: 2px solid var(--background-color);
    left: calc(100% - 52px);
    /* 親の右端 = 100% - 自分の幅より少し右 */
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  a.next.tapped {
    border-radius: 0 40px 40px 0;
    border: 2px solid var(--background-color);
 background-color: var(--primary-color);
    /* 塗る感じを出すため枠を消している noneではtopがずれる */
  }

  a.next.tapped:before {
    /* ホバー時のブルー */
    left: 100%;
  }

  a.next.tapped .text {
    /* 文字色反転 */
    color: var(--background-color) !important;
    font-weight: bold;
  }

  a.next.tapped .arrow {
    /* 円の中の→を上に */
    opacity: 1;
  }



  /* ======== 単品落札　個別設定 ============= */
  #next-usually.tapped {
    border: 2px solid var(--background-color);
    /* 塗る感じを出すため枠を消している noneではtopがずれる */
  }

  #next-usually.tapped #circle-usually {
    /* 右に行く円 */
    border: 2px solid var(--background-color);
    left: calc(100% - 59px);
    /* 親の右端 = 100% - 自分の幅より少し右 */
    width: 61px;
    height: 61px;
    border-radius: 50%;
  }

  #next-usually.tapped #arrow-usually {
    opacity: 1;
  }

  /* 🍍店頭引取※限定※🍍*/
  #next-nondelivery.tapped #text-nondelivery {
    font-size: clamp(1.53em, 2vw, 1.7em); 
    top: 11px;
  }

  /* 🍈送料変更🍈*/
  #next-afterchange.tapped #text-afterchange {
   font-size: clamp(1.05em, 2vw, 1.7em); 
    top: 15px;
  }

  /* 🍊異種同梱🍊 */
  #next-sagawa-only.tapped #text-sagawa-only {
    font-size: clamp(1.52em, 2vw, 1.7em); 
    top: 11px;
  }

  /* 🍉簡易書留不要🍉 */
  #next-no-need.tapped #text-no-need {
   font-size: clamp(1.6em, 2vw, 1.7em); 
    top: 10px;
  }

  /*🍒沖縄離島🍒 */
  a.next.tapped #text-island {
    /* 文字色反転 */
    color: var(--background-color) !important;
    font-weight: bold;
  }

  /* 理解した次へ進む */
  .next.tapped .understand-text {
    font-size: clamp(1.5em, 2vw, 1.7em); 
    top: 9px;
  }

  /* 注意事項を確認する */
  .next.tapped .check-text {
    font-size: clamp(1.5em, 2vw, 1.7em); 
    top: 9px;
  }

  /* 決済方法別　ご返金方法等 */
  .next.tapped #text-refund {
   font-size: clamp(1.37em, 2vw, 1.7em); 
    top: 12px;
  }

  /* ==============================
次へボタン　ここまで
============================== */

  /* ============================== */
  /* 戻るボタンのスタイル */
  /* ============================== */
  .preBtn.tapped .circle-preBtn {
    /* 左に行く円 */
    border: 3px solid var(--primary-color);
    right: calc(100% - 49px);
    /* 親の右端 = 100% - 自分の幅より少し右 */
    width: 50px;
    height: 55px;
    border-radius: 50%;
  }

  .preBtn.tapped {
    /* 円が来るため、右端を短く */
    border: 2px solid var(--background-color);
    /* 塗る感じを出すため枠を消している noneではtopがずれる */
    border-radius: 50px 0 0 50px;
  }

  .preBtn.tapped:before {
    /* ホバー時のブルー */
    left: -100%;
  }

  .preBtn.tapped .arrow-preBtn {
    /* 円の中の→を上に */
    opacity: 1;
  }

  /* ==============================
最初に戻るボタン
============================== */
  .resetBtn.tapped {
    background: #b7c2d0;
  }

  .resetBtn.tapped{
    transform: translateY(10px);
    box-shadow: 0 2px 0 #6a7b8f, 0 5px 10px rgba(0, 0, 0, 0.3);
    color: var(--text-color);
  }

  /* ============================== */
  /* 選択ボタンのスタイル */
  /* ============================== */
  .choice.tapped {
  background: linear-gradient(to bottom, #2a3f8f, #253c7a);
  transform: translateY(10px);
  box-shadow: 0 2px 0 #6a7b8f, 0 5px 10px rgba(0, 0, 0, 0.3);
  }

  .choice:active {
    transform: translateY(10px);
    box-shadow: 0 2px 0 #6a7b8f, 0 5px 10px rgba(0, 0, 0, 0.3);
  }

}

/* ============================== */
/* ホバー時のスタイル (pointer: fine) */
/* ============================== */

@media (pointer: fine) {
  /* ホバー時 */

  a.next:hover .circle {
    /* 右に行く円 */
    border: 2px solid var(--background-color);
    left: calc(100% - 52px);
    /* 親の右端 = 100% - 自分の幅より少し右 */
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  a.next:hover {
    border-radius: 0 40px 40px 0;
    border: 2px solid var(--background-color);
    /* 塗る感じを出すため枠を消している noneではtopがずれる */
  }

  a.next:hover:before {
    /* ホバー時のブルー */
    left: 100%;
  }

  a.next:hover .text {
    /* 文字色反転 */
    color: var(--background-color) !important;
    font-weight: bold;
  }

  a.next:hover .arrow {
    /* 円の中の→を上に */
    opacity: 1;
  }

  /* ホバー時からもどるときにアクションをなくす */
  a.next:not(:hover):before {
    /* ブルーの塗りつぶし */
  }

  a.next:not(:hover) .circle {
    /* 円 */
  }

  a.next:not(:hover) .arrow {
    /* 矢印 */
  }

  /* ======== 単品落札　個別設定 ============= */
  #next-usually:hover {
    border: 2px solid var(--background-color);
    /* 塗る感じを出すため枠を消している noneではtopがずれる */
  }

  #next-usually:hover #circle-usually {
    /* 右に行く円 */
    border: 2px solid var(--background-color);
    left: calc(100% - 59px);
    /* 親の右端 = 100% - 自分の幅より少し右 */
    width: 61px;
    height: 61px;
    border-radius: 50%;
  }

  #next-usually:hover #arrow-usually {
    opacity: 1;
  }

  /* 🍍店頭引取※限定※🍍*/
  #next-nondelivery:hover #text-nondelivery {
    font-size: clamp(1.53em, 2vw, 1.7em); 
    top: 11px;
  }

  /* 🍈送料変更🍈*/
  #next-afterchange:hover #text-afterchange {
    font-size: clamp(1.05em, 2vw, 1.7em); 
    top: 15px;
  }

  /* 🍊異種同梱🍊 */
  #next-sagawa-only:hover #text-sagawa-only {
   font-size: clamp(1.52em, 2vw, 1.7em); 
    top: 11px;
  }

  /* 🍉簡易書留不要🍉 */
  #next-no-need:hover #text-no-need {
   font-size: clamp(1.6em, 2vw, 1.7em); 
    top: 10px;
  }

  /*🍒沖縄離島🍒 */
  a.next:hover #text-island {
    /* 文字色反転 */
    color: var(--background-color) !important;
    font-weight: bold;
  }

  /* 理解した次へ進む */
  .next:hover .understand-text {
  font-size: clamp(1.5em, 2vw, 1.7em); 
    top: 9px;
  }

  /* 注意事項を確認する */
  .next:hover .check-text {
   font-size: clamp(1.5em, 2vw, 1.7em); 
    top: 9px;
  }

  /* 決済方法別　ご返金方法等 */
  .next:hover #text-refund {
font-size: clamp(1.37em, 2vw, 1.7em); 
    top: 12px;
  }

  /* ==============================
次へボタン　ここまで
============================== */

  /* ============================== */
  /* 戻るボタンのスタイル */
  /* ============================== */
  .preBtn:hover .circle-preBtn {
    /* 左に行く円 */
    border: 3px solid var(--primary-color);
    right: calc(100% - 49px);
    /* 親の右端 = 100% - 自分の幅より少し右 */
    width: 50px;
    height: 55px;
    border-radius: 50%;
  }

  .preBtn:hover {
    /* 円が来るため、右端を短く */
    border: 2px solid var(--background-color);
    /* 塗る感じを出すため枠を消している noneではtopがずれる */
    border-radius: 50px 0 0 50px;
  }

  .preBtn:hover:before {
    /* ホバー時のブルー */
    left: -100%;
  }

  .preBtn:hover .arrow-preBtn {
    /* 円の中の→を上に */
    opacity: 1;
  }

  /* ホバー時からもどるときにアクションをなくす */
  .preBtn:not(:hover):before {
    transition: none;
  }

  .preBtn:not(:hover) .circle {
    transition: none;
  }

  a.preBtn:not(:hover) .arrow {
    transition: none;
  }

  /* ==============================
最初に戻るボタン
============================== */
  .resetBtn:hover {
    background: #b7c2d0;
  }

  .resetBtn:active {
    transform: translateY(10px);
    box-shadow: 0 2px 0 #6a7b8f, 0 5px 10px rgba(0, 0, 0, 0.3);
    color: var(--text-color);
  }

  /* ============================== */
  /* 選択ボタンのスタイル */
  /* ============================== */
  .choice:hover {
    background: linear-gradient(to bottom, #2a3f8f, #253c7a);
  }

  .choice:active {
    transform: translateY(10px);
    box-shadow: 0 2px 0 #6a7b8f, 0 5px 10px rgba(0, 0, 0, 0.3);
  }

  }

/* ============================== */
/* 🖥 レスポンシブ対応 */
/* ============================== */

/* 📱📱📱📱📱📱📱📱📱*/
/* タブレット用（横幅 601px〜960px） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .container {
    width:100%;
  }

  .question {
    font-size: 2rem;
padding-left: clamp(0, 4vw, 48px);
  }
.note{
padding-left: clamp(0, 4vw, 48px);
}

  .text {
    font-size: 26px;
  }

  /* ============================== */
  /* 枠のスタイル 囲み */
  /* ============================== */
  .frame {
    border-left: 10px solid var(--primary-color);
    border-right: 10px solid var(--primary-color);
padding: clamp(10px, 5vw, 50px);
  }


  /* ============================== */
  /* ボタン系の配置揃え */
  /* ============================== */
  .button-set-Q1,
  .button-set-Q2,
  .button-set,
  .button-set-back {
    margin: 50px;
     margin:0 auto;
width:80%;
  }


.button-set {
  margin-top: 1.5rem;
}

.button-set-back {
  margin-top: 3rem;
 }

  /* ============================== */
  /*次へ進むボタン */
  /* ============================== */

/* ======== 単品落札　個別設定 ============= */
/* 🍈送料変更🍈 */
#text-afterchange {
  font-size: 1.4em;
top:10px;
}


/* 🍒沖縄離島🍒 */
.large-text {
font-size: clamp(1.35em, 2vw, 1.5em); 
  margin-top: 3px;
  margin-left: 50px;
}


/* 決済方法別　ご返金方法等 */
#text-refund {
  font-size: clamp(1.4em, 2vw, 1.7em); 
  top: 11px;
}


  /* ======== 単品落札　個別設定 ============= */
   /* 🍍店頭引取※限定※🍍*/
  #next-nondelivery:hover #text-nondelivery {
    font-size: 1.7em;
  top: auto;
  }

  /* 🍈送料変更🍈*/
  #next-afterchange:hover #text-afterchange {
font-size: clamp(1.2em, 2vw, 1.7em); 
  top:12px;
  }

  /* 🍊異種同梱🍊 */
  #next-sagawa-only:hover #text-sagawa-only {
    font-size: 1.7em;
  top: auto;
  }

  /* 🍉簡易書留不要🍉 */
  #next-no-need:hover #text-no-need {
    font-size: 1.7em;
  top: auto;
  }

  /* 理解した次へ進む */
  .next:hover .understand-text {
    font-size: 1.7em;
  top: auto;
  }

  /* 注意事項を確認する */
  .next:hover .check-text {
    font-size: 1.7em;
  top: auto;
  }

  /* 決済方法別　ご返金方法等 */
  .next:hover #text-refund {
      font-size: clamp(1.2em, 2vw, 1.7em); 
  top: 12px;
  }

  /* ==============================
次へボタン　ここまで
============================== */
  /* ==============================
戻るボタン 系
============================== */

 .button-set-Q1 .resetBtn,
  .button-set-Q2 .resetBtn,
  .button-set .resetBtn,
  .button-set-back .resetBtn {
  justify-self: end;

}

.resetBtn {
width:350px;
}



.resetBtn span {
margin :0 auto;
left:auto;
}


}


/* 💻 💻 💻 💻 💻 💻  */
/* PC用 */
@media screen and (min-width: 1024px) {
html{
font-size:16px;
}


  .container {
    width:80%;
  }

  .question {
    font-size: 2rem;
  }

  .text {
    font-size: 26px;
  }

  /* ============================== */
  /* 枠のスタイル 囲み */
  /* ============================== */
  .frame {
    border-left: 10px solid var(--primary-color);
    border-right: 10px solid var(--primary-color);
padding:50px;
padding-bottom:90px;
  }


  /* ============================== */
  /* ボタン系の配置揃え */
  /* ============================== */
  .button-set-Q1,
  .button-set-Q2,
  .button-set,
  .button-set-back {
    margin: 50px;
     margin:0 auto;
width:80%;
  }


.button-set {
  margin-top: 1.5rem;
}

.button-set-back {
  margin-top: 3rem;
 }

  /* ============================== */
  /*次へ進むボタン */
  /* ============================== */

/* ======== 単品落札　個別設定 ============= */
/* 🍈送料変更🍈 */
#text-afterchange {
font-size: clamp(1.5em, 2vw, 1.7em); 
top:auto;
}


/* 🍒沖縄離島🍒 */
.large-text {
  font-size: 1.55em;
  margin-top: 3px;
  margin-left: 50px;
}


/* 決済方法別　ご返金方法等 */
#text-refund {
  font-size: 1.7em;
  top: auto;
}


  /* ======== 単品落札　個別設定 ============= */
   /* 🍍店頭引取※限定※🍍*/
  #next-nondelivery:hover #text-nondelivery {
    font-size: 1.7em;
  top: auto;
  }

  /* 🍈送料変更🍈*/
  #next-afterchange:hover #text-afterchange {
font-size: 1.3em;
  top:13px;
  }

  /* 🍊異種同梱🍊 */
  #next-sagawa-only:hover #text-sagawa-only {
    font-size: 1.7em;
  top: auto;
  }

  /* 🍉簡易書留不要🍉 */
  #next-no-need:hover #text-no-need {
    font-size: 1.7em;
  top: auto;
  }

  /* 理解した次へ進む */
  .next:hover .understand-text {
    font-size: 1.7em;
  top: auto;
  }

  /* 注意事項を確認する */
  .next:hover .check-text {
    font-size: 1.7em;
  top: auto;
  }

  /* 決済方法別　ご返金方法等 */
  .next:hover #text-refund {
    font-size: 1.7em;
  top: auto;
  }

  /* ==============================
次へボタン　ここまで
============================== */
  /* ==============================
戻るボタン 系
============================== */

 .button-set-Q1 .resetBtn,
  .button-set-Q2 .resetBtn,
  .button-set .resetBtn,
  .button-set-back .resetBtn {
  justify-self: end;

}

.resetBtn {
width:350px;
}



.resetBtn span {
margin :0 auto;
left:auto;
}

}


/* ============================== */
/* 最初の質問以外の非表示設定
他にdisplayを使用しているため、一番最後にすること*/
/* ============================== */
.hiddenContent {
  display: none !important;
}