:root{
  --primary-color:#008888;
  --primary-dark:#006666;
  --accent-color:#e74c3c;
  --text-color:#333;
  --bg-light:#f9f9f9;
  --border-color:#ddd;
  --white:#fff;
}

*{ box-sizing:border-box; }

body{
  font-family:'Noto Sans JP', system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.6;
  color:var(--text-color);
  margin:0;
  background:var(--bg-light);
}

a{ color:var(--primary-color); text-decoration:none; }
a:hover{ color:var(--primary-dark); text-decoration:underline; }

/* header / container */
header{
  background:var(--white);
  border-bottom:1px solid var(--border-color);
  padding:14px 0;
  text-align:center;
}
.container{
  max-width:960px;
  margin:0 auto;
  padding:0 20px;
}
main.container{
  padding:18px 20px 48px;
}

/* headings */
h1{
  font-size:1.6rem;
  margin:16px 0 10px;
}
h2{
  font-size:1.2rem;
  margin:26px 0 14px;
  padding-bottom:8px;
  border-bottom:2px solid var(--primary-color);
}

/* error */
.err{
  background:#fdecec;
  border:1px solid #f5c6cb;
  color:#8a1f1f;
  padding:12px 14px;
  border-radius:8px;
  margin:14px 0;
  font-weight:700;
}

/* table */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--white);
  border:1px solid #e6e6e6;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
th,td{
  padding:10px;
  border-bottom:1px solid #eee;
  vertical-align:top;
  word-break:break-word;
}
tr:last-child td{ border-bottom:none; }
th{
  background:#f4f4f4;
  color:#555;
  font-weight:700;
  text-align:left;
}

/* buttons */
button, .btn{
  font-family:inherit;
}
#addRowBtn,
#cartBody button{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #cfcfcf;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
#addRowBtn:hover,
#cartBody button:hover{ filter:brightness(.98); }

button[type="submit"]{
  display:inline-block;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid var(--primary-color);
  background:var(--primary-color);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  min-width:180px;
}
button[type="submit"]:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}

/* controls */
/* フォーム意匠を完全に統一 */
.container input[type="text"],
.container input[type="email"],
.container input[type="tel"],
.container input[type="number"],
.container textarea,
.container select{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.4;

  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
}

/* cart inputs: table cell widthに追従 */
#cartBody select,
#cartBody input[type="number"]{
  max-width:100%;
}

/* summary */
#piecesView, #totalView{
  font-weight:700;
}
#totalView{
  font-size:1.3rem;
  color:var(--accent-color);
}

/* radio spacing */
input[type="radio"]{ margin-right:6px; }
label{ display:inline-block; margin:6px 0; cursor:pointer; }

/* ---- form layout (HTML変更なしで崩れにくい形) ---- */
/* p を “行ブロック” として揃える */
form p{
  margin:12px 0;
}

/* 送付先など：ラベルは上、入力は下（頭揃えはこの方式がCSSだけで確実） */
input[name="ship_name"],
input[name="ship_zip"],
input[name="ship_addr"],
input[name="ship_tel"],
input[name="email"],
textarea[name="note"]{
  display:block;
  margin-top:6px;
}

/* ===== フォーム意匠を完全統一（PC・スマホ共通） ===== */
.container input[type="text"],
.container input[type="email"],
.container input[type="tel"],
.container input[type="number"],
.container textarea,
.container select{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.4;

  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
}

/* 行間 */
form p{
  margin: 12px 0;
}

/* テキストエリア */
.container textarea{
  min-height: 140px;
  resize: vertical;
}

/* =========================
   Mobile (<= 600px)
   ========================= */
@media (max-width: 600px){

  /* 余白を詰めて画面を有効活用 */
  .container{
    padding: 0 14px;
  }
  main.container{
    padding: 14px 14px 36px;
  }

  /* 見出しを少し小さく */
  h1{ font-size: 1.35rem; }
  h2{ font-size: 1.05rem; }

  /* 入力系：指で押しやすいサイズに統一 */
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], textarea, select{
    max-width: 100%;      /* 720px制限を解除 */
    width: 100%;
    font-size: 16px;      /* iOSの自動ズーム回避にも有効 */
    padding: 12px 12px;
  }

  /* 郵便番号・電話もスマホでは横幅100%に */
  input[name="ship_zip"],
  input[name="ship_tel"]{
    max-width: 100%;
  }

  /* テーブル：スマホでは横スクロールにして崩れ防止 */
  table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ボタン：幅広にして押しやすく */
  #addRowBtn,
  #cartBody button,
  button[type="submit"]{
    width: 100%;
    min-width: 0;
  }

  /* ラジオ：行間を広げてタップしやすく */
  label{
    display: block;
    margin: 10px 0;
  }

  /* 備考：少し高さを確保 */
  textarea{
    min-height: 160px;
  }
}

/* =========================
   Mobile: カート表をカード化（<= 600px）
   ========================= */
@media (max-width: 600px){

  /* コンテナ余白 */
  .container{ padding: 0 14px; }
  main.container{ padding: 14px 14px 36px; }

  /* 入力はスマホでズームしない＆押しやすい */
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], textarea, select{
    max-width: 100%;
    width: 100%;
    font-size: 16px;
    padding: 12px 12px;
  }

  /* 送付先：住所だけ style="width:420px" が入っているので強制上書き */
  input[name="ship_addr"]{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 受付ボタンを押しやすく */
  button[type="submit"]{
    width: 100%;
    min-width: 0;
  }

  /* 追加ボタンも横幅 */
  #addRowBtn{ width: 100%; }

  /* ========= カートテーブル：カード化 ========= */
  table{
    width: 100%;
    max-width: 100%;
    display: block;
    border-radius: 12px;
  }

  table thead{ display: none; }          /* 見出し行は隠す */
  table tbody{ display: block; }
  table tr{
    display: block;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 10px 10px;
    margin: 10px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  table td{
    display: block;
    border: none;
    padding: 8px 4px;
  }

  /* 1行目（種類select）は見やすく */
  #cartBody td:nth-child(1) select{
    width: 100%;
    max-width: 100%;
  }

  /* 2行目（個数）と3行目（小計）を横並び */
  #cartBody td:nth-child(2),
  #cartBody td:nth-child(3){
    display: inline-block;
    width: 50%;
    vertical-align: top;
  }

  /* 個数 input の幅（JSで90px指定してるので上書き） */
  #cartBody td:nth-child(2) input[type="number"]{
    width: 100% !important;
  }

  /* 小計は右寄せのまま */
  #cartBody td:nth-child(3){
    text-align: right;
    font-weight: 700;
  }

  /* 4行目（削除ボタン）を下に大きく */
  #cartBody td:nth-child(4){
    padding-top: 6px;
  }
  #cartBody td:nth-child(4) button{
    width: 100%;
  }

  /* 合計表示を少し大きく */
  #totalView{ font-size: 1.4rem; }
}

/* 形態(select)を広くする */
select.pack{
  width: 210px;         /* 好みで 200〜260くらいで調整OK */
  min-width: 220px;
}

/* 1個の時に無効化しても見た目が崩れないように */
select.pack.is-disabled{
  opacity: 1;
  background: #f7f7f7;
}