/* PTAページ：固定ヘッダー header-bottom の透明領域が入力欄を覆ってクリックを奪う問題対策
   pta.css は PTA系ページでしか読まれないため、ここに書けば他ページに影響しない
   header-bottom 全体をクリック透過にし、ロゴだけ残してクリック可能に */
header .header-bottom {
  pointer-events: none;
}
header .header-bottom .header_logo {
  pointer-events: auto;
}

/* PTAページ：±ボタン（新クラス pta-qty-inputarea で親テーマのスタイルを完全に切り離す）
   ー・入力欄・＋ を1つの枠線で囲む形（原本HTMLに準拠） */
.pta-qty-inputarea,
.pta_application_form_totalinputarea {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content !important;
  margin: 8px auto !important;
  border: 1px solid #aaaaaa;
  background: #fff;
  border-radius: 2px;
  padding: 2px 8px;
  box-sizing: border-box;
}
/* STEP4：枠の右に「個」を出すためのラッパー */
.pta_qty_with_unit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 8px auto;
}
.pta_qty_with_unit .pta_application_form_totalinputarea {
  margin: 0 !important; /* 中央寄せはラッパーに任せる */
}
.pta_qty_with_unit .totalpieces_num {
  font-size: 16px;
  line-height: 1;
}
.pta-qty-inputarea input,
.pta_application_form_totalinputarea input {
  width: 80px !important;
  flex: none !important;
  text-align: center;
  box-sizing: border-box;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 2px !important;
  box-shadow: none !important;
}
.pta-qty-inputarea input:focus,
.pta_application_form_totalinputarea input:focus {
  outline: none;
  box-shadow: none !important;
}
/* ±ボタンの見た目を原本HTMLに近づける（枠線なしのテキスト風）
   原本は :before / :after の擬似要素だが、ここではクリックハンドラを残すため
   button 要素のまま枠線・背景を消してテキストとして表示する */
.pta-qty-inputarea .qty-btn,
.pta_application_form_totalinputarea .qty-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-width: 1em;
  flex: none !important;
  border: none !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.pta-qty-inputarea .qty-btn:hover,
.pta_application_form_totalinputarea .qty-btn:hover {
  background: transparent !important;
  color: #1690ee !important;
  opacity: 0.8;
}

/* PTA確認画面（page-pta-form.php）：カートテーブル内の±記号を非表示 */
.pta_application_form_cartitem .pta_application_form_inputarea:before,
.pta_application_form_cartitem .pta_application_form_inputarea:after {
  content: none;
}

/* 注文内容テーブル内の type=number 入力欄からブラウザ標準のスピナー（▲▼）を除去
   Safari / Chrome / Firefox 対応 */
.pta_application_form_cartitem input[type="number"]::-webkit-inner-spin-button,
.pta_application_form_cartitem input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pta_application_form_cartitem input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* PTAページ：STEP3 納入容器選択のチェックボックス上下余白 */
/* 親テーマは margin:15px auto 0（上広・下狭）→ 新HTML仕様の margin:10px auto 25px に */
.pta_application_form_outer .checkboxitem {
  margin: 10px auto 25px !important;
}

/* PTAページ：STEP3 納入容器選択（3カラム均等幅 + 縦破線） */
/* 親テーマは2項目前提で width:fit-content・:first-child のみ border-right なので上書き */
.pta_application_form_outerarea {
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch;
  gap: 0 !important;
}
.pta_application_form_outerarea .pta_application_form_outer {
  flex: 1 1 0 !important;
  width: 33.333% !important;
  max-width: 33.333% !important;
  padding: 20px !important;
  border-right: 1px dashed #1690EE !important;
  box-sizing: border-box;
}
.pta_application_form_outerarea .pta_application_form_outer:first-child {
  border-right: 1px dashed #1690EE !important;
}
.pta_application_form_outerarea .pta_application_form_outer:last-child {
  border-right: none !important;
}
@media screen and (max-width: 840px) {
  .pta_application_form_outerarea {
    display: block !important;
  }
  .pta_application_form_outerarea .pta_application_form_outer {
    width: 95% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-right: none !important;
    border-bottom: 1px dashed #1690EE !important;
  }
  .pta_application_form_outerarea .pta_application_form_outer:first-child {
    border-right: none !important;
    border-bottom: 1px dashed #1690EE !important;
  }
  .pta_application_form_outerarea .pta_application_form_outer:last-child {
    border-bottom: none !important;
  }
}

/* PTAページ：オプション商品アイテム（原本HTMLと同等レイアウト）
   親テーマの flex + justify-content:center は「2行目に2項目だけ」のとき
   その2項目も中央寄せされてしまうため、grid に切り替える。
   ・grid 全体は中央配置（justify-content:center）
   ・grid 内のセルは固定カラムなので、2行目に2項目しかない場合も左から配置される
   ・項目幅を統一して綺麗にグリッド整列 */
.pta_application_form_optionarea {
  display: grid !important;
  grid-template-columns: repeat(3, 350px);
  justify-content: center !important;
  gap: 20px;
}
.pta_application_form_optionarea .pta_application_form_item {
  width: 350px;
  box-sizing: border-box;
}
/* 画像エリアは親テーマ通り（max-width:350px / width:90% / border / margin:auto）に任せ、
   アスペクト比だけ揃える */
.pta_application_form_optionarea .pta_application_form_itemimg {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pta_application_form_optionarea .pta_application_form_itemimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* レスポンシブ：コンテナ幅に応じてカラム数を縮小 */
@media screen and (max-width: 1100px) {
  .pta_application_form_optionarea {
    grid-template-columns: repeat(2, 350px);
  }
}
@media screen and (max-width: 770px) {
  .pta_application_form_optionarea {
    grid-template-columns: 350px;
  }
}
@media screen and (max-width: 680px) {
  .pta_application_form_optionarea {
    grid-template-columns: minmax(0, 1fr);
  }
  .pta_application_form_optionarea .pta_application_form_item {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

/* 別売り商品エリアの「北関東：…」配送エリア一覧を中央寄せ */
.pta_application_form_separate > p:last-child {
  text-align: center;
}

/* 別売り商品エリア（最大3カラム）：オプションエリアと同じグリッド方式 */
.pta_application_form_separate_items {
  display: grid;
  grid-template-columns: repeat(3, 350px);
  justify-content: center;
  gap: 20px;
  margin: 0 auto 20px;
}
.pta_application_form_separate_items .pta_application_form_item {
  width: 350px;
  box-sizing: border-box;
}
.pta_application_form_separate_items .pta_application_form_itemimg {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pta_application_form_separate_items .pta_application_form_itemimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 1100px) {
  .pta_application_form_separate_items {
    grid-template-columns: repeat(2, 350px);
  }
}
@media screen and (max-width: 770px) {
  .pta_application_form_separate_items {
    grid-template-columns: 350px;
  }
}
@media screen and (max-width: 680px) {
  .pta_application_form_separate_items {
    grid-template-columns: minmax(0, 1fr);
  }
  .pta_application_form_separate_items .pta_application_form_item {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

/* ----------------------------------------------------------
   PTA注文完了ページ（page-pta-complete.php）
   原本 docs/EC_PTA_html_20260521/style.css に準拠
---------------------------------------------------------- */
.pta_complete_text {
  text-align: center;
  line-height: 2em;
}
.pta_complete_text dl {
  padding: 30px 15px;
}
.pta_complete_text dl dt {
  font-weight: bold;
}
.pta_complete_text dl.pta_complete_contactarea {
  width: 90%;
  margin: 20px auto;
  padding: 20px 10px;
  border: 1px dashed #1890EE;
}
.pta_complete_text dl.pta_complete_contactarea dt {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  color: #1890EE;
  padding: 0 0 10px;
}
.pta_complete_text dl.pta_complete_contactarea ul {
  padding: 20px 0 0;
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
}
.pta_complete_text dl.pta_complete_contactarea ul li {
  padding: 0 20px 15px;
}
.pta_complete_text dl.pta_complete_contactarea ul li span {
  display: block;
  font-size: 0.8em;
  line-height: 1.2em;
}
@media screen and (max-width: 680px) {
  .pta_complete_text dl.pta_complete_contactarea ul {
    display: block;
  }
}

/* PTA確認画面：注文画面に戻るリンク */
.pta_back_to_order {
  text-align: center;
  margin-top: 12px;
}
.pta_back_to_order a {
  color: #999;
  text-decoration: underline;
  font-size: 0.9em;
}

/* ----------------------------------------------------------
   STEP5フォーム：スマホ表示時の横はみ出し対策
   親テーマは .pta_application_form_customer に white-space:nowrap が
   かかっており、長いテキスト（エリア説明など）が改行されず
   右側で見切れる。モバイル時のみ折り返しを許可する。
---------------------------------------------------------- */
@media screen and (max-width: 840px) {
  .pta_application_form_customer,
  .pta_application_form_customer th,
  .pta_application_form_customer td {
    white-space: normal !important;
    word-break: break-word;
  }
  .pta_application_form_customer .pta_font_small {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
  }
}

/* ----------------------------------------------------------
   STEP5フォーム拡張（送付先エリア・建物名・袋種類のラジオボタン）
---------------------------------------------------------- */

.pta_font_small {
  font-size: 0.8em;
}

.input_radioarea {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.input_radioarea li {
  margin: 0 25px 5px 0;
}
.input_radioarea li label {
  align-items: center;
  display: flex;
  cursor: pointer;
}
.input_radioarea li input {
  margin: 0 5px 0 0;
  cursor: pointer;
}
.input_radioarea li input[type="radio"] {
  appearance: none;
  border: 1px solid #aaaaaa;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  margin: 0 8px 0 0;
  position: relative;
}
.input_radioarea li input[type="radio"]::before {
  background: #707070;
  border-radius: 50%;
  content: "";
  height: 10px;
  width: 10px;
  opacity: 0;
  position: absolute;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.input_radioarea li input[type="radio"]:checked::before {
  opacity: 1;
}
@media screen and (max-width: 680px) {
  .input_radioarea {
    display: block;
  }
}

/* ----------------------------------------------------------
   注文内容テーブル拡張（送料行・お支払い合計・特別オプション・割引表示）
---------------------------------------------------------- */

/* 特別オプション（別売り）バッジ */
.p_a_f_ci_cart_category02 {
  display: inline-block;
  color: #ffffff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  background: #11B60D;
  text-align: center;
  line-height: 1.2em;
  padding: 5px;
}

/* 納入容器無し選択時の5%割引表示 */
.pta_outer_discount {
  padding: 10px 0 0 0;
  color: #ff0000;
}
.pta_outer_discount span {
  font-size: 0.8em;
  display: block;
}

/* 納入容器無しの割引案内（赤背景） */
.pta_application_form_outer_notice {
  width: 100%;
  background: #FF0000;
  border-radius: 15px;
  padding: 10px;
  color: #ffffff;
  font-weight: bold;
  display: block;
}

/* セット商品：合計／送料の下に罫線を表示
   親テーマは .p_a_f_ci_tr_last td に border-bottom:none を設定しているため再付与 */
.pta_application_form_cartitem .cart-set-subtotal-row td,
.pta_application_form_cartitem .cart-shipping-row td {
  border-bottom: 1px solid #9B9B9B !important;
}

/* お支払い合計行（二重線・太字） */
.pta_application_form_cartitem .p_a_f_ci_tr_last02 td {
  border-top: 4px double #9B9B9B;
  border-bottom: none !important; /* 下の罫線は不要 */
  text-align: right;
  font-weight: bold;
  font-size: 1.1em;
}
.pta_application_form_cartitem .p_a_f_ci_tr_last02 td.p_a_f_ci_td02,
.pta_application_form_cartitem .p_a_f_ci_tr_last02 td.p_a_f_ci_td03,
.pta_application_form_cartitem .p_a_f_ci_tr_last02 td.p_a_f_ci_td05 {
  border-right: none;
}

/* 横スクロール注釈：970px以下のみ表示 */
.table_wrap_notice {
  display: none;
}
@media screen and (max-width: 970px) {
  .table_wrap_notice {
    display: block;
    font-size: 14px;
    color: #FF0000;
    text-align: right;
    margin: 5px 0 10px;
  }
}

/* ボタンエリア（注文する＋戻るボタン） */
.pta_application_btnarea {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
}
.pta_application_btnarea .pta_application_btn_cart {
  margin: 20px;
}
.pta_application_btn_return {
  max-width: 280px;
  width: 100%;
  margin: 20px;
}
.pta_application_btn_return a {
  width: 100%;
  height: 100%;
  display: block;
  border: 2px solid #1890EE;
  border-radius: 50px;
  background: #ffffff;
  transition: 0.6s;
  color: #1890EE;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 22px;
  text-align: center;
  padding: 15px 0;
  box-sizing: border-box;
}
.pta_application_btn_return a:hover {
  background: #1890EE;
  color: #ffffff;
}
@media screen and (max-width: 940px) {
  .pta_application_btnarea {
    display: block;
  }
  .pta_application_btnarea .pta_application_btn_cart {
    margin: 20px auto 40px;
  }
  .pta_application_btn_return {
    margin: auto;
  }
}