/* ============================================
   8th KINANSE CUP 2026 記念ウェア販売サイト
   ブルー基調カラースキーム
   ============================================ */

:root {
  --navy: #0e2a4d;          /* ベースの濃紺 */
  --navy-soft: #17395f;
  --blue: #1467c8;          /* メインブルー */
  --sky: #34b3ea;           /* 爽やかなアクセント */
  --sky-light: #d9ecfa;
  --paper: #f1f8fd;         /* 背景 */
  --paper-2: #ffffff;
  --line: #cfe0f0;
  --alert: #e2574d;         /* 必須・締切など */
  --ink: #12283d;           /* 本文文字 */

  /* 商品カラー（スウォッチ用・実物色） */
  --pc-green: #1f8a3b;
  --pc-burgundy: #9d1f34;
  --pc-black: #23282a;
  --pc-royal: #1a4fa0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
}

a { color: var(--blue); }

.display-font {
  font-family: "Bowlby One SC", "Anton", sans-serif;
  letter-spacing: .02em;
}

/* 濃紺グラデーション背景 */
.texture-dark {
  background-color: #0e2a4d;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(52, 179, 234, .38), transparent 55%),
    radial-gradient(circle at 92% 15%, rgba(20, 103, 200, .45), transparent 55%),
    linear-gradient(165deg, #0d2947 0%, #143b69 60%, #0b2340 100%);
}

/* 薄いブルーのセクション */
.bg-sky-soft { background: var(--sky-light); }

.section-title {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: .35em 2.4em;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .28em;
  font-size: .95rem;
  box-shadow: 0 6px 16px rgba(14, 42, 77, .18);
}

/* 市松模様の帯（ブルー） */
.chk-band {
  height: 14px;
  background-image:
    linear-gradient(45deg, var(--sky) 25%, transparent 25%, transparent 75%, var(--sky) 75%),
    linear-gradient(45deg, var(--sky) 25%, transparent 25%, transparent 75%, var(--sky) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}
.chk-band-navy {
  background-image:
    linear-gradient(45deg, var(--navy) 25%, transparent 25%, transparent 75%, var(--navy) 75%),
    linear-gradient(45deg, var(--navy) 25%, transparent 25%, transparent 75%, var(--navy) 75%);
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(14, 42, 77, .06);
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(14, 42, 77, .15);
  display: inline-block;
  vertical-align: middle;
}
.sw-green { background: var(--pc-green); }
.sw-burgundy { background: var(--pc-burgundy); }
.sw-black { background: var(--pc-black); }
.sw-royal { background: var(--pc-royal); }

/* 価格表 */
.price-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.price-table th,
.price-table td {
  border: 1px solid var(--line);
  padding: .55rem .8rem;
  text-align: center;
}
.price-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: .1em;
}
.price-table tbody tr:nth-child(even) { background: #f6fbff; }
.price-table .item-cell {
  background: var(--sky-light);
  font-weight: 700;
  white-space: nowrap;
}

.team-list {
  font-size: .82rem;
  line-height: 1.9;
  word-break: break-word;
}

.deadline-badge {
  background: var(--alert);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
}

/* フォーム */
.field-label {
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--navy);
}
.req::after {
  content: "必須";
  background: var(--alert);
  color: #fff;
  font-size: .65rem;
  border-radius: 4px;
  padding: 0 .4em;
  margin-left: .5em;
  vertical-align: middle;
}
/* datalist付きの入力欄（チーム名）も含めて枠線を統一する。
   ブラウザによっては list 属性付き input が既定スタイルのままとなり
   枠線が消えて見えるため、明示的にセレクタへ含めている。 */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[list], select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem .7rem;
  background: #fff;
  font-size: .95rem;
  font-family: inherit;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}

/* 配送方法ラジオ */
.delivery-option {
  display: block;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: .8rem 1rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.delivery-option:hover { border-color: var(--sky); }
.delivery-option input { width: auto; }
.delivery-option.selected {
  border-color: var(--blue);
  background: #f1f8ff;
  box-shadow: 0 4px 12px rgba(20, 103, 200, .14);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .85rem 2.2rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 103, 200, .35); }
.btn-sky { background: var(--sky); color: #06283f; }
.btn-sky:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(52, 179, 234, .45); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.btn-ghost { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn-ghost:hover { background: var(--blue); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.order-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
}

.notice-box {
  background: #eaf5ff;
  border-left: 5px solid var(--blue);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  font-size: .85rem;
  line-height: 1.8;
}

.sticky-total {
  position: sticky;
  bottom: 0;
  z-index: 30;
}

/* メインデザイン画像（大きく表示） */
#design-main-figure img {
  max-width: 900px;
}

/* Googleフォーム未設定時の警告表示 */
.config-warning {
  background: #fff4e5;
  border-left: 5px solid #e08a1e;
  border-radius: 10px;
  padding: .9rem 1.1rem;
  font-size: .85rem;
  line-height: 1.8;
  color: #6b4106;
}

.text-alert { color: var(--alert); }
.text-navy { color: var(--navy); }
.text-blue { color: var(--blue); }
.text-sky { color: var(--sky); }

@media (max-width: 640px) {
  .price-table th, .price-table td { padding: .4rem .35rem; font-size: .82rem; }
}