:root{
    --black:#0A0A0B;
    --black-soft:#151517;
    --black-card:#1B1B1D;
    --green:#3FBE59;
    --green-bright:#7CEB92;
    --green-dim:rgba(63,190,89,0.14);
    --white:#F4F4F2;
    --gray:#9A9A9E;
    --gray-dim:#6E6E72;
    --line:rgba(255,255,255,0.12);
    --line-strong:rgba(255,255,255,0.22);
    --red:#FF9D9D;
    --radius:14px;
    --radius-sm:8px;
    --font-jp:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--black);
    color:var(--white);
    font-family:var(--font-jp);
    line-height:1.8;
    letter-spacing:.02em;
    -webkit-font-smoothing:antialiased;
    padding-bottom:84px; /* sticky bar分 */
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  button{font-family:inherit;}

  /* ===== ドラフト注記バー ===== */
  .draft-bar{
    background:var(--black-soft);
    border-bottom:1px solid var(--line);
    color:var(--gray);
    font-size:12px;
    text-align:center;
    padding:10px 16px;
    letter-spacing:.04em;
  }
  .draft-bar b{color:var(--green-bright);font-weight:600;}

  .wrap{max-width:720px;margin:0 auto;padding:0 24px;}

  /* ===== 共通セクション ===== */
  section{padding:72px 0;border-bottom:1px solid var(--line);}
  section:last-of-type{border-bottom:none;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;color:var(--green-bright);
    letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:16px;
  }
  .eyebrow .ja{color:var(--gray);font-weight:500;letter-spacing:.04em;text-transform:none;}
  h2.headline{
    font-size:clamp(22px,4.2vw,30px);
    font-weight:800;
    color:var(--white);
    margin:0 0 20px;
    line-height:1.55;
  }
  .lead{color:var(--gray);font-size:15px;margin:0 0 28px;}
  .mark{background:linear-gradient(transparent 62%, var(--green-dim) 62%);padding:0 2px;color:var(--white);}

  /* ===== ヒーロー ===== */
  .hero{padding:56px 0 64px;text-align:center;}
  .hero .eyebrow{justify-content:center;width:100%;}
  .hero h1{
    font-size:clamp(34px,8vw,52px);
    font-weight:900;
    margin:6px 0 10px;
    letter-spacing:.02em;
    line-height:1.1;
  }
  .hero h1 .en{display:block;color:var(--white);}
  .hero .sub{
    color:var(--gray);
    font-size:15px;
    margin:0 0 32px;
  }
  .hero .sub b{color:var(--green-bright);font-weight:700;}

  /* ===== デザインカード ===== */
  .design-grid{display:flex;flex-direction:column;gap:20px;}
  .design-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--black-soft);
    overflow:hidden;
  }
  .design-card .thumb{background:var(--white);padding:18px;}
  .design-card .thumb img{border-radius:6px;margin:0 auto;max-height:320px;width:auto;}
  .design-card .body{padding:22px 24px 26px;}
  .design-card h3.design-letter{
    font-size:64px;font-weight:900;color:var(--green-bright);line-height:1;margin:0 0 16px;
  }
  .design-card .price-tag{font-size:14px;color:var(--white);margin:0 0 18px;}
  .design-card .price-tag strong{font-size:20px;font-weight:800;margin-right:4px;}

  .selector-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{font-size:11px;color:var(--gray-dim);letter-spacing:.06em;}
  .size-select{
    background:var(--black);color:var(--white);border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;min-width:160px;
  }
  .qty-stepper{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;}
  .qty-stepper button{
    width:36px;height:40px;background:var(--black-card);color:var(--white);border:none;
    font-size:16px;cursor:pointer;
  }
  .qty-stepper button:hover{background:var(--line);}
  .qty-stepper input{
    width:40px;height:40px;text-align:center;border:none;border-left:1px solid var(--line-strong);
    border-right:1px solid var(--line-strong);background:var(--black);color:var(--white);font-size:14px;
  }
  .add-cart-btn{
    width:100%;background:var(--green);color:#06250D;font-weight:800;font-size:14.5px;
    border:none;border-radius:999px;padding:13px 20px;cursor:pointer;letter-spacing:.02em;
    transition:background .15s ease, transform .15s ease;
  }
  .add-cart-btn:hover{background:var(--green-bright);}
  .add-cart-btn:active{transform:translateY(1px);}
  .add-feedback{
    display:none;margin-top:10px;font-size:12.5px;color:var(--green-bright);text-align:center;
  }
  .add-feedback.show{display:block;}

  /* ===== 商品仕様 ===== */
  .spec-table{width:100%;border-collapse:collapse;margin-bottom:28px;}
  .spec-table tr{border-bottom:1px solid var(--line);}
  .spec-table tr:last-child{border-bottom:none;}
  .spec-table th,.spec-table td{
    text-align:left;padding:14px 4px;font-size:14px;font-weight:400;
    vertical-align:top;
  }
  .spec-table th{
    width:30%;color:var(--gray);font-weight:600;white-space:nowrap;
  }
  .spec-table td a{color:var(--green-bright);text-decoration:underline;text-underline-offset:2px;}
  .size-subhead{font-size:13px;font-weight:700;color:var(--white);margin:0 0 10px;}
  .kids-size-row{
    display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;
  }
  .kids-size-row span{
    border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--white);
  }
  /* ===== 募集スケジュール（タイムライン） ===== */
  .timeline{position:relative;padding-left:30px;margin-top:8px;}
  .timeline::before{
    content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-strong);
  }
  .timeline .node{position:relative;padding-bottom:34px;}
  .timeline .node:last-child{padding-bottom:0;}
  .timeline .dot{
    position:absolute;left:-30px;top:2px;width:18px;height:18px;border-radius:50%;
    background:var(--black);border:2px solid var(--green);
  }
  .timeline .node.final .dot{border-color:var(--gray-dim);}
  .timeline .date{font-size:12px;color:var(--green-bright);font-weight:700;letter-spacing:.04em;}
  .timeline .title{font-size:16px;font-weight:800;color:var(--white);margin:4px 0 6px;}
  .timeline .desc{font-size:13px;color:var(--gray);margin:0 0 10px;}
  .timeline .branch{display:flex;gap:8px;flex-wrap:wrap;}
  .timeline .branch span{
    font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--gray);
  }
  .timeline .branch span.go{color:#06250D;background:var(--green);border-color:var(--green);font-weight:700;}
  .timeline .branch span.wait{color:var(--green-bright);border-color:var(--green);}
  .timeline .branch span.stop{color:var(--red);border-color:rgba(255,157,157,.45);}
  .ship-hint{margin:8px 0 0;font-size:11.5px;color:var(--gray-dim);}
  .schedule-info{
    border:1px solid var(--line-strong);border-radius:var(--radius);
    background:var(--black-soft);padding:22px 24px;margin-top:20px;
  }
  .schedule-info .info-label{
    display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
    color:var(--green-bright);text-transform:uppercase;margin-bottom:10px;
  }
  .schedule-info p{margin:0 0 10px;font-size:13.5px;color:var(--gray);}
  .schedule-info p:last-child{margin-bottom:0;}
  .shipping-list{list-style:none;margin:10px 0 0;padding:0;}
  .shipping-list li{
    font-size:13px;color:var(--white);padding:8px 0;border-top:1px solid var(--line);
  }
  .shipping-list li:first-child{border-top:none;}
  .total-note{
    font-size:13px;color:var(--gray);margin:0 0 28px;
    border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:12px 16px;
  }
  .total-note b{color:var(--green-bright);}

  /* ===== 注意事項 ===== */
  .notice-callout{
    border:1px solid var(--green);background:var(--green-dim);
    border-radius:var(--radius);padding:22px 24px;margin-bottom:24px;
  }
  .notice-callout .label{
    display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;color:#06250D;
    background:var(--green);border-radius:999px;padding:3px 10px;margin-bottom:12px;
  }
  .notice-callout p{margin:0 0 10px;font-size:14px;color:var(--white);}
  .notice-callout p:last-child{margin-bottom:0;color:var(--gray);font-size:13px;}
  .notice-list{list-style:none;margin:0;padding:0;}
  .notice-list li{
    display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--gray);
  }
  .notice-list li:last-child{border-bottom:none;}
  .notice-list li .x{
    flex:0 0 18px;color:var(--gray-dim);font-weight:700;
  }
  .notice-list li b{color:var(--white);font-weight:600;}

  /* ===== カート ===== */
  .cart-empty{
    border:1px dashed var(--line-strong);border-radius:var(--radius);padding:32px 24px;text-align:center;
    color:var(--gray);font-size:14px;
  }
  .cart-empty a{
    display:inline-block;margin-top:14px;border:1px solid var(--line-strong);border-radius:999px;
    padding:10px 20px;font-size:13px;color:var(--white);text-decoration:none;font-weight:700;
  }
  .cart-table{width:100%;border-collapse:collapse;margin-bottom:4px;}
  .cart-table th{
    text-align:left;font-size:11px;color:var(--gray-dim);font-weight:600;letter-spacing:.04em;
    padding:0 4px 10px;border-bottom:1px solid var(--line-strong);
  }
  .cart-table td{
    padding:14px 4px;font-size:13.5px;color:var(--white);border-bottom:1px solid var(--line);vertical-align:middle;
  }
  .cart-table td.num{text-align:right;white-space:nowrap;}
  .cart-table .item-name{font-weight:700;}
  .cart-table .item-sub{display:block;font-size:12px;color:var(--gray);font-weight:400;margin-top:2px;}
  .cart-qty{display:flex;align-items:center;gap:8px;}
  .cart-qty button{
    width:26px;height:26px;border-radius:6px;border:1px solid var(--line-strong);background:var(--black-card);
    color:var(--white);cursor:pointer;font-size:14px;line-height:1;
  }
  .cart-qty button:hover{background:var(--line);}
  .cart-remove{
    background:none;border:none;color:var(--gray-dim);font-size:12px;cursor:pointer;text-decoration:underline;
    padding:0;
  }
  .cart-remove:hover{color:var(--red);}
  .cart-total-row{
    display:flex;justify-content:space-between;align-items:baseline;padding:18px 4px 24px;
    border-bottom:1px solid var(--line-strong);margin-bottom:24px;
  }
  .cart-total-row .label{font-size:13px;color:var(--gray);}
  .cart-total-row .value{font-size:24px;font-weight:800;color:var(--white);}
  .checkout-btn{
    display:block;width:100%;background:var(--green);color:#06250D;font-weight:800;font-size:16px;
    border:none;border-radius:999px;padding:17px 24px;cursor:pointer;letter-spacing:.02em;
  }
  .checkout-btn:hover{background:var(--green-bright);}
  .checkout-btn:disabled{background:var(--line-strong);color:var(--gray-dim);cursor:not-allowed;}
  .mock-toast{
    display:none;
    margin-top:16px;
    border:1px dashed var(--line-strong);
    border-radius:var(--radius-sm);
    padding:14px 16px;
    font-size:13px;
    color:var(--gray);
    text-align:left;
  }
  .mock-toast.show{display:block;}
  .mock-toast b{color:var(--green-bright);}

  /* ===== フッター ===== */
  footer{
    padding:40px 24px 24px;text-align:center;
    color:var(--gray-dim);font-size:12px;
    line-height:2;
  }
  footer a{color:var(--green-bright);text-decoration:underline;text-underline-offset:2px;}

  /* ===== 下部固定バー ===== */
  .sticky-bar{
    position:fixed;left:0;right:0;bottom:0;
    background:rgba(10,10,11,0.92);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;
    padding:12px 20px;
    z-index:50;
  }
  .sticky-bar .info{font-size:12px;color:var(--gray);}
  .sticky-bar .info strong{display:block;font-size:14px;color:var(--white);}
  .sticky-bar .mini-btn{
    background:var(--green);color:#06250D;font-weight:800;font-size:13px;
    border:none;border-radius:999px;padding:11px 20px;cursor:pointer;white-space:nowrap;
  }

  /* ===== ヒーロー・公式ロゴ ===== */
  .logomark-icon{
    color:var(--white);width:24px;height:auto;flex-shrink:0;display:block;
  }
  .hero-lockup{
    display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 0 20px;
  }
  .hero-lockup .hero-mark{
    color:var(--white);width:72px;height:auto;
  }
  .hero-lockup .hero-logotype{
    color:var(--white);width:min(380px,84%);height:auto;
  }
  .product-label{
    display:block;font-size:clamp(20px,5.5vw,30px);font-weight:800;letter-spacing:.02em;
    color:var(--white);margin:0 0 24px;line-height:1.3;
  }

  /* ===== 販売枚数カウンター ===== */
  .sales-counter{
    border:1px solid var(--line-strong);border-radius:var(--radius);
    background:var(--black-soft);padding:18px 20px;margin:0 0 24px;
    text-align:left;
  }
  .hero .sales-counter{max-width:360px;margin-left:auto;margin-right:auto;}
  .sales-counter .counter-main{font-size:14px;color:var(--white);font-weight:700;margin-bottom:10px;}
  .sales-counter .counter-main strong{
    color:var(--green-bright);font-size:22px;font-weight:800;margin:0 2px;
  }
  .sales-counter .counter-bar{
    width:100%;height:8px;border-radius:999px;background:var(--black);
    border:1px solid var(--line-strong);overflow:hidden;
  }
  .sales-counter .counter-bar-fill{
    height:100%;width:0%;background:var(--green);border-radius:999px;
    transition:width .4s ease;
  }
  .sales-counter .counter-bar-fill.reached{background:var(--green-bright);}
  .sales-counter .counter-sub{margin-top:10px;font-size:12px;color:var(--gray-dim);}

  @media (max-width:480px){
    section{padding:52px 0;}
    .wrap{padding:0 18px;}
    .hero-lockup .hero-mark{width:56px;}
    .hero-lockup .hero-logotype{width:88%;}
    .product-label{font-size:clamp(18px,6vw,24px);}
    .cart-table th:nth-child(1),.cart-table td:nth-child(1){min-width:0;}
    .cart-table{font-size:12.5px;}
  }

/* ===== 追加分（Phase1機能で使用・モックには無い） ===== */
button:disabled,select:disabled{opacity:.45;cursor:not-allowed;}
.campaign-status{border:1px solid var(--line-strong);border-radius:14px;padding:16px;margin:20px 0;}
.campaign-status button{background:none;border:1px solid var(--line-strong);border-radius:999px;color:var(--white);font-size:12px;padding:8px 16px;cursor:pointer;margin-top:4px;}
.campaign-status button:hover{background:var(--line);}
.api-error{color:var(--red);white-space:pre-line;}
.success-content{padding:48px 0;}
.success-content address{font-style:normal;white-space:pre-line;overflow-wrap:anywhere;}
@media(max-width:420px){.wrap{padding:0 14px}.cart-table td{padding:10px 3px}.cart-qty{gap:3px}}