<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>商品ページ｜ACL版レイアウト（クイックカートイン対応）</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Slick -->
<link href="https://img.shop-pro.jp/tmpl_js/86/slick.css" rel="stylesheet" />
<link href="https://img.shop-pro.jp/tmpl_js/86/slick-theme.css" rel="stylesheet" />

<style>
/* =========================================================
  商品ページ用 CSS（ACL商品一覧とトーンを揃えた版：完全版）
  - 3カラム（〜1030pxで1カラム）
  - 左：カテゴリ（商品一覧と似た白カード）
  - 中央：画像スライダー＆サムネ
  - 右：商品名・型番・購入を1枚カードに統合
  - 下段：製品情報（上に細いベージュライン＋本文）
  - 詳細スペック：共通ボックス
  - レビュー：左寄せカード表示
  - 右下：フローティング購入ボックス（PCだけ表示）
========================================================= */

/* ---- ACL 共通っぽいトークン ---- */
:root{
  --brown:#3c2e1e;
  --gray:#e5e5e5;
  --text:#444;
  --bg:#fafafa;

  /* アクセント用（見出しラインやカートボタン） */
  --accent-from:#3c2e1e;
  --accent-to:#d9b47e;

  /* 枠・影 */
  --border-soft:#eee1cf;
  --border-line:#e2ddd3;
  --shadow-soft:0 2px 8px rgba(0,0,0,.04);
  --shadow-strong:0 6px 18px rgba(0,0,0,.16);

  /* 「製品情報」の上ライン */
  --info-bar-from:#f5ece0;
  --info-bar-to:#fff7e8;
}

/* ====== 全体レイアウト（Gridで横並び） ====== */
.p-product.is-custom .u-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}
.p-product.is-custom .p-product-main{
  display:grid;
  grid-template-columns:220px 530px minmax(360px,1fr);
  column-gap:36px;
  row-gap:8px; /* 詳細スペック〜レビューの縦のすき間もここで調整 */
  align-items:flex-start;
  margin:24px 0 40px;
}
@media (max-width:1180px){
  .p-product.is-custom .p-product-main{
    grid-template-columns:220px 500px 1fr;
    column-gap:28px;
  }
}
@media (max-width:1030px){
  .p-product.is-custom .p-product-main{
    grid-template-columns:1fr;
    gap:24px;
    margin:20px 0 32px;
  }
}

/* Gridの子が横に膨らまないようにする */
.p-product-sidebar,
.p-product-img,
.p-product-info{
  min-width:0;
}

/* ================================
   メイン画像の上：商品名エリア
=============================== */
.p-product.is-custom .p-product-main-head{
  grid-column:1 / -1;
  margin:0 0 12px;
  text-align:center;
}
.p-product.is-custom .p-product-main-head__ttl{
  margin:0 0 4px;
  font-size:22px;
  font-weight:700;
  color:#333;
}
.p-product.is-custom .p-product-main-head__model{
  margin:0;
  font-size:13px;
  color:#666;
}

/* 右カード内のタイトルは重複するので非表示 */
.p-product.is-custom .p-product-info-card .p-product-info__ttl,
.p-product.is-custom .p-product-info-card .p-product-info__id{
  display:none;
}

/* ================================
   左サイドバー（商品一覧と似せる）
=============================== */
.p-product-sidebar{
  width:220px;
  padding:14px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.p-product-sidebar h3{
  margin:0 0 10px;
  font-size:15px;
  font-weight:700;
  color:var(--brown);
}
.p-product-sidebar ul{
  list-style:none;
  margin:0;
  padding:0;
}
.p-product-sidebar li + li{
  margin-top:4px;
}
.p-product-sidebar a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  font-size:14px;
  line-height:1.5;
  color:#443a2f;
  text-decoration:none;
  background:transparent;
  border:none;
  text-align:left;
  box-sizing:border-box;
  transition:background-color .16s, transform .12s;
}
.p-product-sidebar a:hover,
.p-product-sidebar a:focus{
  background:#fffdf9;
  transform:translateX(2px);
  outline:none;
}
.p-product-sidebar img{
  width:20px;
  height:20px;
  object-fit:contain;
}
@media (max-width:1030px){
  .p-product-sidebar{
    width:auto;
    max-width:520px;
    margin:0 auto 4px;
  }
}

/* ================================
   画像エリア
=============================== */
.p-product-img{width:100%}
.p-product-img__main{text-align:center}
.p-product-img__main-item{
  position:relative;
  text-align:center;
  aspect-ratio:1/1;
}
/* 古いブラウザ向けフォールバック */
.p-product-img__main-item:before{
  content:"";
  display:block;
  padding-top:100%;
}
@supports (aspect-ratio: 1/1){
  .p-product-img__main-item:before{display:none}
}
.p-product-img__main-item img{
  position:absolute;
  inset:0;
  margin:auto;
  max-width:100%;
  max-height:100%;
}

/* サムネイル */
.p-product-img__thumb{margin-top:8px}
.p-product-thumb-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin:8px -4px 0;
  padding:0;
  list-style:none;
}
@media (max-width:1030px){
  .p-product-thumb-list{
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
}
.p-product-thumb-list__item{
  box-sizing:border-box;
  margin-bottom:8px;
  padding:0 4px;
  width:20%;
  cursor:pointer;
  opacity:1;
  transition:opacity .3s, transform .15s;
}
.p-product-thumb-list__item:hover,
.p-product-thumb-list__item:focus,
.p-product-thumb-list__item.is-current{
  opacity:.7;
  transform:translateY(-1px);
  outline:none;
}
.p-product-thumb-list__img{
  position:relative;
  text-align:center;
}
.p-product-thumb-list__img:before{
  content:"";
  display:block;
  padding-top:100%;
}
.p-product-thumb-list__img img{
  position:absolute;
  inset:0;
  margin:auto;
  max-width:100%;
  max-height:100%;
}
.u-overflow-slide{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* slick 矢印（最小限のカスタム） */
.p-product-img__main .slick-prev,
.p-product-img__main .slick-next{
  top:50%;
  width:30px;
  height:30px;
  z-index:1;
}
.p-product-img__main .slick-prev:before,
.p-product-img__main .slick-next:before{
  content:"";
  position:absolute;
  top:7px;
  left:10px;
  width:15px;
  height:15px;
  border-left:1px solid #333;
  border-top:1px solid #333;
}
.p-product-img__main .slick-prev{left:15px}
.p-product-img__main .slick-prev:before{transform:rotate(-45deg)}
.p-product-img__main .slick-next{right:15px}
.p-product-img__main .slick-next:before{left:4px;transform:rotate(135deg)}
@media (max-width:767px){
  .p-product-img__main .slick-prev,
  .p-product-img__main .slick-next{
    width:45px;
    height:45px;
  }
  .p-product-img__main .slick-prev{left:0}
  .p-product-img__main .slick-prev:before{left:17px;top:15px}
  .p-product-img__main .slick-next{right:0}
  .p-product-img__main .slick-next:before{left:13px;top:15px}
}

/* ================================
   右カラム：商品情報カード
=============================== */
.p-product-info{
  width:100%;
  max-width:420px;
}
@media (max-width:1030px){
  .p-product-info{
    max-width:none;
    margin:0 auto;
  }
}

.p-product-info-card{
  position:relative;
  margin:10px 0 18px;
  padding:16px;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.p-product-info-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--accent-from),var(--accent-to));
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  z-index:1;
}
.p-product-info__ttl{
  margin:2px 0 6px;
  font-size:22px;
  font-weight:700;
  color:var(--brown);
}
@media (max-width:767px){
  .p-product-info__ttl{font-size:20px;}
}
.p-product-info__id{
  margin:0 0 10px;
  font-size:12px;
  color:#857b6b;
}

/* オプション */
.p-product-option{margin:16px 0;}
.p-product-option-tbl{
  margin:0 0 12px;
  overflow-x:auto;
}
.p-product-option-tbl table{
  margin-bottom:0;
  border-left:0;
  border-right:0;
  width:100%;
}
.p-product-option-tbl table div{
  display:inline-block !important;
}
.p-product-option-tbl th{min-width:100px;}
.p-product-option-tbl th,
.p-product-option-tbl td{
  padding:12px 5px;
  border-top:1px solid #e5e1db;
  border-bottom:1px solid #e5e1db;
  border-left:0;
  text-align:center;
  font-size:13px;
}
.p-product-option-select{margin:10px 0;}
.p-product-option-select__box{margin-top:12px;}
.p-product-option-select__ttl{
  margin-bottom:5px;
  font-weight:700;
  font-size:13px;
  color:#3c2e1e;
}

/* 名入れ */
.p-product-name{margin:16px 0;}
.p-product-name__ttl{
  margin-bottom:6px;
  font-weight:700;
  font-size:13px;
}
.p-product-name__body input{width:100%;}

/* ================================
   カード内：購入ボックス
=============================== */
.p-product-info-card .p-product-buybox{
  margin-top:16px;
  padding:14px 16px 16px;
  border:1px solid var(--border-soft);
  border-top:none !important; /* 線を完全に消す */
  border-radius:10px;
  background:#fffdf6;
  box-shadow:var(--shadow-soft);
}

/* 金額まわり */
.p-product-buybox__price{
  display:block;
  margin-bottom:10px;
}
.p-product-buybox__price-label{
  font-size:12px;
  color:#857b6b;
  margin:0 0 4px;
}
.p-product-buybox__price-now{
  font-size:22px;
  font-weight:700;
  color:#3c2e1e;
}
.p-product-buybox__off{
  font-size:12px;
  color:#b55225;
  background:#fbe7da;
  padding:2px 7px;
  border-radius:999px;
  margin-left:6px;
}

/* 数量行 */
.p-product-buybox .p-product-form-stock{
  margin:12px 0 14px;
}
.p-product-form-stock__input{
  display:flex;
  align-items:center;
  gap:8px;
}
.p-product-form-stock__label{
  font-size:14px;
}
.p-product-buybox__qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  font-size:14px;
  flex-wrap:wrap;
}
.p-product-buybox__qty input{
  width:80px;
  max-width:100%;
  padding:4px;
  text-align:center;
  border:1px solid #ccc;
  border-radius:4px;
}

/* 数量入力幅（競合防止） */
.p-product-info-card .p-product-buybox .p-product-buybox__qty input{width:80px;}
.acl-buybox .acl-buybox__qty input{width:90px;}
.p-product-form-stock__input input{width:60px;}

/* ================================
   カートに入れるボタン（商品／フロート共通）
=============================== */
.p-product-buybox__btn,
.acl-buybox .acl-buybox__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:10px 0;
  background:#3c2e1e;
  color:#fff;
  font-size:15px;
  font-weight:700;
  border:none;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:background-color .18s, transform .06s, box-shadow .12s, opacity .16s;
}
.p-product-buybox__btn:hover,
.acl-buybox .acl-buybox__btn:hover{
  background:#4a3a27;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
  opacity:0.98;
}
.p-product-buybox__btn:active,
.acl-buybox .acl-buybox__btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 4px rgba(0,0,0,.14);
}
.p-product-buybox__btn:focus-visible,
.acl-buybox .acl-buybox__btn:focus-visible{
  outline:2px solid #d9b47e;
  outline-offset:2px;
}

/* ================================
   情報リンク（配送・ギフト・問い合わせ）
=============================== */
.p-product-info-links{
  margin:18px 0 18px;
  padding:0;
  list-style:none;
}
.p-product-info-links,
.p-product-info-links__item{
  list-style:none;
  padding-left:0;
  margin-left:0;
}
.p-product-info-links__item + .p-product-info-links__item{
  margin-top:10px;
}
.p-product-info-links__item a{
  display:block;
  padding:10px 12px;
  font-size:14px;
  font-weight:600;
  color:#333;
  text-decoration:none;
  background:#f7f7f7;
  border:1px solid #ddd;
  border-radius:6px;
  box-sizing:border-box;
}
.p-product-info-links__item a:hover,
.p-product-info-links__item a:focus{
  color:var(--accent-from);
  border-color:var(--accent-from);
  background:#fcfcfc;
  outline:none;
}

/* &#9993;マーク */
.p-product-info-links__icon{
  margin-right:6px;
  font-size:15px;
}

@media (max-width:767px){
  .p-product-info-links{
    margin:16px 0 14px;
  }
  .p-product-info-links__item a{
    font-size:14px;
    padding:9px 10px;
  }
}

/* SNSアイコン周り */
.p-product-sns-list{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
}
.p-product-sns-list__item{margin-right:20px;}

/* ================================
   下段「製品情報」
=============================== */
.p-product.is-custom .p-product-explain{
  grid-column:1 / -1;
  max-width:900px;
  margin:16px auto 0 !important;
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.p-product.is-custom .p-product__ttl{
  position:relative;
  margin:0 0 16px;
  padding:12px 0 10px;
  font-size:21px;
  font-weight:700;
  color:#3c2e1e;
  border:none;
  background:none;
}
.p-product.is-custom .p-product__ttl:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--info-bar-from),var(--info-bar-to));
  border-radius:2px;
}

/* 本文中央寄せ（製品情報だけ） */
.p-product.is-custom .p-product-explain__body{
  line-height:1.95;
  word-break:break-word;
  text-align:center !important;
  padding-top:10px;
  border-top:1px solid var(--border-line);
  font-size:16.5px;
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
.p-product.is-custom .p-product-explain__body *{
  text-align:center !important;
}
.p-product.is-custom .p-product-explain__body p{margin:0 0 1em;}
.p-product.is-custom .p-product-explain__body ul,
.p-product.is-custom .p-product-explain__body ol{
  margin:0 0 1em;
  padding-left:1.3em;
}
.p-product.is-custom .p-product-explain__body h4,
.p-product.is-custom .p-product-explain__body h5{
  margin:1.2em 0 .6em;
  font-weight:700;
}
@media (max-width:767px){
  .p-product.is-custom .p-product-explain__body{
    font-size:15.5px;
    line-height:1.9;
  }
  .p-product.is-custom .p-product__ttl{font-size:19px;}
}


/* ================================
   入力／在庫／ボタン／エラー（既存クラス）
=============================== */
.p-product select,
.p-product input[type=text]{
  box-sizing:border-box;
  padding:5px;
  height:40px;
  border:1px solid #bfbfbf;
  font-size:16px;
}
.p-product-form-stock{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:20px 0;
}
.p-product-form-stock__input{
  display:flex;
  align-items:center;
}
.p-product-form-stock__unit{margin-left:10px;}
.p-product-form-stock__stock{margin-left:25px;}
.p-product-form-btn{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.p-product-form-btn__cart{width:100%;}

@media (max-width:1030px){
  .p-product-form-btn__cart{
    flex:1;
    width:auto;
  }
}
.p-product-form__error-message{
  color:#DB5656;
  margin-top:15px;
}
.p-product-form__error-message:empty{display:none;}

/* ================================
   右下：フローティング購入ボックス
=============================== */
.acl-buybox{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:99;
  width:300px;
  max-width:88vw;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:12px;
  box-shadow:var(--shadow-strong);
  padding:14px 14px 16px;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.25s;
}
.acl-buybox.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.acl-buybox__name{
  font-weight:700;
  margin-bottom:2px;
  font-size:14px;
  color:#3c2e1e;
}
.acl-buybox__model{
  font-size:12px;
  color:#857b6b;
  margin-bottom:6px;
}
.acl-buybox__price{
  margin:6px 0 2px;
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
}
.acl-buybox__price-now{
  font-size:18px;
  font-weight:700;
  margin-right:4px;
  color:#3c2e1e;
}
.acl-buybox__off{
  font-size:11px;
  background:#fbe7da;
  padding:2px 6px;
  border-radius:999px;
  margin-right:4px;
  color:#b55225;
}
.acl-buybox__price-normal{
  font-size:12px;
  color:#777;
}
.acl-buybox__qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 10px;
  font-size:13px;
}
.acl-buybox__qty label{white-space:nowrap;}
.acl-buybox__stock{
  font-size:12px;
  color:#666;
  margin-top:4px;
  text-align:right;
}

/* ▼ PCだけ表示：1030px以下（タブレット＋スマホ）はフロート非表示 */
@media (max-width:1030px){
  .acl-buybox{
    display:none !important;
  }
}

/* Grid子要素の暴走防止＋古いfloat対策 */
.p-product-main > *{float:none !important;}
.p-product-info,
.p-product-img{min-width:0;}
@media (max-width:767px){
  .p-product-info-card{margin:8px 0 14px;}
  .p-product-name{margin:14px 0;}
}

/* ================================
   クイックカートイン モーダル／スピナー
=============================== */
.cart_in_modal,
.cart_in_error_modal{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.7);
  z-index:20000;
  display:none;              /* 初期は非表示（JSでflexに変更される） */
  align-items:center;
  justify-content:center;
  overflow:auto;
}
.cart_in_modal__bg{
  background-color:rgba(0,0,0,0.7);
  position:fixed;
  width:100%;
  height:100%;
  z-index:20000;
}
.cart_in_modal__outline{
  width:90%;
  margin:20px 5%;
  padding:20px;
  background-color:#fff;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);
  box-sizing:border-box;
  text-align:center;
  position:absolute;
}
@media screen and (min-width:960px){
  .cart_in_modal__outline{
    width:900px;
    margin:auto;
    padding:20px 70px;
    position:relative;
  }
}
.cart_in_modal__heading{
  font-size:20px;
  font-weight:bold;
  margin:20px 0;
  line-height:1.4;
}
@media screen and (min-width:960px){
  .cart_in_modal__heading{
    font-size:26px;
    margin:30px 0;
    line-height:1.2;
  }
}
.cart_in_error_modal__heading{
  font-size:20px;
  font-weight:bold;
  margin:40px 0 20px;
  line-height:1.4;
}
@media screen and (min-width:960px){
  .cart_in_error_modal__heading{
    margin:30px 0;
    line-height:1.2;
  }
}
.cart_in_modal__detail{
  display:flex;
  padding:20px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  align-items:center;
  flex-direction:column;
}
@media screen and (min-width:960px){
  .cart_in_modal__detail{flex-direction:row;}
}
.cart_in_modal__name{
  font-size:16px;
  flex:1;
  line-height:1.4;
  text-align:left;
  margin:0;
}
@media screen and (min-width:960px){
  .cart_in_modal__name{font-size:18px;}
}
.cart_in_modal__image-wrap{
  padding:5px;
  width:170px;
  height:170px;
  background:rgba(0,0,0,0.1);
  position:relative;
  border:5px solid transparent;
  box-sizing:border-box;
}
@media screen and (min-width:960px){
  .cart_in_modal__image-wrap{
    margin:0 30px 0 0;
    flex-basis:170px;
  }
}
.cart_in_modal__image{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.cart_in_modal__text-link{
  color:#2169f3;
  cursor:pointer;
  position:relative;
  display:inline-block;
  margin:20px 0 0;
  padding:0 0 0 20px;
  line-height:1.15;
}
.cart_in_modal__text-link::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:8px;
  height:8px;
  border-top:2px solid #2169f3;
  border-right:2px solid #2169f3;
  transform:rotate(225deg);
}
.cart_in_modal__button-wrap{
  width:100%;
  margin:30px auto;
  font-size:17px;
}
@media screen and (min-width:960px){
  .cart_in_modal__button-wrap{width:350px;}
}
.cart_in_modal__button{
  font-size:17px;
  font-weight:bold;
  line-height:23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  cursor:pointer;
  text-decoration:none;
  color:#fff;
  border:0;
  border-radius:999px;
  width:100%;
  height:58px;
  padding:15px;
  background:#2169f3;
  box-shadow:0 2px 0 #1a54c2;
  outline:none;
  appearance:none;
}
.cart_in_modal__button:hover,
.cart_in_modal__button:focus{
  color:#e9f0fe;
  background-color:#1e5fdb;
  box-shadow:none;
  transform:translate3d(0,2px,0);
}
.cart_in_modal__close-icon{
  cursor:pointer;
}
.cart_in_modal__close-icon::before,
.cart_in_modal__close-icon::after{
  content:"";
  width:35px;
  height:6px;
  display:block;
  position:absolute;
  top:30px;
  right:20px;
  background:#eee;
  border-radius:4px;
}
.cart_in_modal__close-icon::before{transform:rotate(-45deg);}
.cart_in_modal__close-icon::after{transform:rotate(45deg);}

/* スピナー */
.spinner::before{
  content:"";
  box-sizing:border-box;
  position:absolute;
  top:50%;
  left:50%;
  height:100px;
  width:100px;
  margin-top:-50px;
  margin-left:-50px;
  border-radius:50%;
  border:5px solid #eee;
  border-top-color:#fd7f23;
  animation:spinner 0.5s linear infinite;
}
@keyframes spinner{
  to{transform:rotate(360deg);}
}

/* SP改行用クラス */
.sp-br{display:inline;}
@media screen and (min-width:960px){
  .sp-br{display:none;}
}

/* 見出し＋本文（もし h1 の中に p を入れている場合用） */
h1 p{
  font-size:12px;
  line-height:18px;
  margin:0 10px;
}

/* ヘッダー左のカート一式を非表示 */
.l-sp-header-cart-btn{
  display:none !important;
}

/* =========================================
   商品名を「カテゴリーの横の列」に配置（PCだけ）
========================================= */
@media (min-width:1031px){
  .p-product.is-custom .p-product-main-head{
    grid-column:2 / 4;
    grid-row:auto;
    margin:0 0 12px;
    padding-left:10px;
    text-align:left;
  }
  .p-product.is-custom .p-product-main-head,
  .p-product.is-custom .p-product-main-head__ttl,
  .p-product.is-custom .p-product-main-head__model{
    text-align:left !important;
  }
}

/* ▼ アコーディオン式「配送について」「ギフト」共通ボタン */
.p-info-toggle__btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  font-size:14px;
  font-weight:600;
  color:#333;
  background:#f7f7f7;
  border:1px solid #ddd;
  border-radius:6px;
  cursor:pointer;
}
.p-info-toggle__btn:hover{
  background:#fcfcfc;
  border-color:var(--accent-from);
}
.p-info-toggle__icon{
  font-size:18px;
  font-weight:700;
  margin-left:8px;
  transition:transform .2s ease;
}
.p-info-toggle__content{
  display:none;
  padding:10px 12px 12px;
  background:#fff;
  border:1px solid #ddd;
  border-top:0;
  border-radius:0 0 6px 6px;
  font-size:14px;
  line-height:1.7;
}
.p-info-toggle.open .p-info-toggle__content{
  display:block;
}
.p-info-toggle.open .p-info-toggle__icon{
  transform:rotate(45deg);
}
.p-info-toggle__guide a{
  color:var(--accent-from);
  text-decoration:underline;
}

/* ▼ ギフト：チケット購入ボタン */
.p-info-gift__btnwrap{
  margin:10px 0 14px;
}
.p-info-gift__btn{
  display:inline-block;
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:#6b4f2c;
  border-radius:6px;
  text-decoration:none;
  transition:background .2s ease, opacity .2s ease;
}
.p-info-gift__btn:hover{
  background:#836543;
  opacity:0.95;
}

/* ========================================================
   レビュー表示（左寄せカード／余白調整済み）
======================================================= */

/* レビュー全体：製品情報と同じ位置・幅＋左寄せ */
.p-product.is-custom .p-product-review{
  grid-column:1 / -1;
  max-width:900px;
  margin:0 auto 0 !important;  /* ★スペック直下の余白ゼロ★ */
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  text-align:left !important;
}

/* 見出し行（「レビュー」＋ボタン） */
.p-product.is-custom .p-product-review__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 0 6px;
  margin-bottom:8px;
  border-bottom:1px solid #e5e1db;
}

/* 「レビュー」見出しは少し小さめ */
.p-product.is-custom .p-product-review .p-product__ttl{
  margin:0;
  padding:0;
  font-size:18px;
}
.p-product.is-custom .p-product-review .p-product__ttl:before{
  content:none;
}

/* 「レビューを書く」ボタン */
.p-product-review__write-btn{
  display:inline-block;
  padding:6px 14px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#3c2e1e;
  border-radius:20px;
  text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:background-color .18s, transform .06s, box-shadow .12s, opacity .16s;
}
.p-product-review__write-btn:hover{
  background:#4a3a27;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
  opacity:0.98;
}
.p-product-review__write-btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 4px rgba(0,0,0,.14);
}
.p-product-review__write-btn:focus-visible{
  outline:2px solid #d9b47e;
  outline-offset:2px;
}

/* 本文側は全部左寄せ */
.p-product.is-custom .p-product-review__body{
  margin-top:14px;
  text-align:left;
}
.p-product.is-custom .p-product-review__body *{
  text-align:left !important;
}

/* 1件ずつのレビューカード */
.reviewlist{
  padding:10px 10px 8px;
  margin:0 0 10px;
  border-radius:8px;
  border:1px solid #e5e1db;
  background:#fff;
  box-sizing:border-box;
}

/* 上部：星＋投稿者情報の行 */
.reviewlist_datas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-bottom:6px;
  font-size:12px;
  color:#857b6b;
}

/* 星アイコン（左） */
.icon_star{
  float:none;
  width:auto;
  overflow:visible;
  display:flex;
  align-items:center;
}
.icon_star img{
  max-width:inherit;
}

/* 投稿者情報（ニックネーム／年代／性別／日付） */
.review_poster{
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  margin:0;
  padding:0;
}
.review_poster li{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.review_poster li + li::before{
  content:"／";
  margin:0 2px;
  color:#b3a48d;
}

/* タイトル行 */
.review_ttl{
  font-size:14px;
  font-weight:700;
  margin:4px 0 6px;
  display:flex;
  align-items:center;
  gap:4px;
}
.review_ttl__star img{
  height:14px;
  width:auto;
}

/* 本文 */
.reviewlist_content{
  font-size:13px;
  line-height:1.7;
  color:#3c2e1e;
}

/* 画像が添付されている場合（本文の上に） */
.review_img{
  float:none;
  display:block;
  margin:4px 0 8px;
}

/* ショップからのコメント */
.shopcomment{
  margin-top:10px;
  margin-bottom:2px;
  background:#f5f2ea;
  padding:10px 12px;
  border-radius:6px;
  font-size:13px;
  line-height:1.7;
}
.shopcomment_ttl{
  font-size:13px;
  font-weight:700;
  margin:0 0 4px;
}

/* レビューが0件のときのメッセージ */
.p-product-review__empty{
  font-size:14px;
  color:#666;
  margin:8px 0 0;
}

/* 「もっと見る」リンク */
.p-product-review__more{
  margin:4px 0 0;
  text-align:right;
}
.p-product-review__more a{
  font-size:13px;
  color:#3c2e1e;
  text-decoration:underline;
}

/* スマホでの余白調整（レビュー部分のみ） */
@media (max-width:767px){
  .p-product.is-custom .p-product-review__head{
    gap:8px;
  }
  .p-product-review__write-btn{
    padding:5px 10px;
    font-size:12px;
  }
}

/* ===== 詳細・スペック（統一デザイン） ===== */
.acl-detail-spec {
  margin: 24px 0 0;
  padding: 20px 20px 18px;
  background: #faf7f2;
  border: 1px solid #eee1cf;
  border-radius: 10px;
  font-size: 14px;
  color: #3c2e1e;
  line-height: 1.8;
}

.acl-detail-ttl {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.acl-detail-table {
  margin: 0;
  padding: 0;
}

.acl-detail-table dt {
  margin: 14px 0 4px;
  font-weight: 700;
}

.acl-detail-table dd {
  margin: 0 0 8px;
}

.acl-detail-list {
  margin: 0;
  padding-left: 18px;
}

.acl-detail-list li {
  margin: 0 0 3px;
  list-style: disc;
}

/* 最後の余白消し */
.acl-detail-table dd:last-of-type,
.acl-detail-list li:last-child {
  margin-bottom: 0;
}

/* 説明文との間を詰める（説明ブロックの最後のp下だけ少し空ける） */
.acl-uni-spoon p:last-of-type {
  margin-bottom: 12px !important;
}

/* ★ 詳細スペック内だけ、説明エリアのデフォルトul余白を打ち消す */
.p-product.is-custom .p-product-explain__body .acl-detail-list {
  margin: 0;
}

/* ★ 詳細スペック内の <br> は見た目を崩すので非表示にする */
.p-product.is-custom .p-product-explain__body .acl-detail-spec br {
  display: none;
}

/* ================================
   スマホ向け微調整（全体）
=============================== */
@media (max-width:767px){

  /* ★ 横スクロールを出さない（画面幅にカチッと収める） */
  html,
  body{
    overflow-x:hidden;
  }
  .p-product.is-custom{
    overflow-x:hidden;
  }

  /* コンテナ：画面幅にフィット＆左右12pxで統一 */
  .p-product.is-custom .u-container{
    max-width:100%;
    width:100%;
    margin:0 auto;
    padding:0 12px;
    box-sizing:border-box;
  }

  /* メイン・製品情報・レビューの幅をそろえて中央に */
  .p-product.is-custom .p-product-main,
  .p-product.is-custom .p-product-explain,
  .p-product.is-custom .p-product-review{
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  /* サイドバーとカードの内側余白を少しだけキュッと */
  .p-product-sidebar{
    padding:12px 10px;
  }
  .p-product-info-card{
    padding:14px 12px;
  }

  /* 詳細スペックは少しだけコンパクトに */
  .acl-detail-spec{
    padding:16px 14px 14px;
    font-size:13.5px;
  }

  /* サムネイルを少し大きめに */
  .p-product-thumb-list__item{
    width:25%;
  }
}

/* ================================
   カテゴリーはPCだけ表示（1030px以下は非表示）
=============================== */
@media (max-width:1030px){
  .p-product-sidebar{
    display:none;
  }
}

/* =========================================================
   ▼ 製品ページ下３つのバナー（1枚＋2枚）
========================================================= */

.acl-after-desc {
  max-width: 1000px;
  margin: 40px auto 60px;
  padding: 0 16px;
  box-sizing: border-box;
}

.acl-after-desc figure {
  margin: 0;
}

.acl-after-desc img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* 上の1枚 */
.acl-hero {
  margin: 0 0 28px;
}

/* 下2枚（PCは横2） */
.acl-row {
  display: grid;
  gap: 28px;
}

.acl-2col {
  grid-template-columns: repeat(2, 1fr);
}

/* タブレットでも 2列キープ */
@media (max-width:1030px){
  .acl-after-desc {
    margin: 32px auto 48px;
    padding: 0 14px;
  }
  .acl-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

/* スマホでも 2列キープ */
@media (max-width:767px){
  .acl-after-desc {
    margin: 28px auto 40px;
    padding: 0 10px;
  }

  .acl-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .acl-after-desc img {
    border-radius: 10px;
  }
}
</style>
</head>
<body>

<!-- ▼ クイックカートインを有効化 -->
<{assign var="is_enable_async_cart_in_pc" value="1"}>

<!-- ▼ ヘッダーカート（“カートを見る”はcart_view_with_asyncでPOST遷移） -->
<div class="l-sp-header-cart-btn" style="margin:10px 0;">
  <{if $is_enable_async_cart_in_pc}>
    <form name="cart_view_with_async" method="POST" action="<{$view_cart_url}>">
      <{$view_cart_with_async_info}>
    </form>
    <button class="l-sp-header-cart-btn__link cart_view_with_async" style="display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer">
      <img src="https://img.shop-pro.jp/tmpl_img/87/icon-cart.svg" alt="カートを見る" />
      <span class="l-sp-header-cart-btn__count">
        <span class="cart_count"><{$incart_total_count}></span>
      </span>
    </button>
  <{else}>
    <a href="<{$view_cart_url}>" class="l-sp-header-cart-btn__link">
      <img src="https://img.shop-pro.jp/tmpl_img/87/icon-cart.svg" alt="カートを見る" />
      <span class="l-sp-header-cart-btn__count"><{$incart_total_count}></span>
    </a>
  <{/if}>
</div>

<div class="p-product is-custom">
  <div class="p-product u-container">

    <!-- ▼ 商品フォーム -->
    <form name="product_form" method="post" action="<{$cart_url}>" accept-charset="UTF-8">
      <input type="hidden" name="product_id" value="<{$product.id}>">
      <input type="hidden" name="add" value="1">

      <div class="p-product-main">

        <!-- ▼ 商品名（メイン画像の上） -->
        <div class="p-product-main-head">
          <h1 class="p-product-main-head__ttl"><{$product_name}></h1>
          <p class="p-product-main-head__model"><{$product.model}></p>
        </div>

        <!-- 左：カテゴリー -->
        <aside class="p-product-sidebar" id="js-product-sidebar">
          <h3>カテゴリー</h3>
          <ul>
            <li><a href="/?mode=cate&cbid=1666853&csid=0">カトラリー</a></li>
            <li><a href="/?mode=cate&cbid=1684573&csid=0">箸と箸置き</a></li>
            <li><a href="/?mode=cate&cbid=1684581&csid=0">ベビー・キッズ</a></li>
            <li><a href="/?mode=cate&cbid=2344098&csid=0">キッチン</a></li>
            <li><a href="/?mode=cate&cbid=1666859&csid=0">うつわとカップ</a></li>
            <li><a href="/?mode=cate&cbid=1665104&csid=0">リラクゼーション</a></li>
            <li><a href="/?mode=cate&cbid=1684577&csid=0">靴べら</a></li>
            <li><a href="/?mode=cate&cbid=1684588&csid=0">その他</a></li>
            <li><a href="/?mode=cate&cbid=1684587&csid=0">ギフト</a></li>
            <li><a href="/?mode=cate&cbid=2957819&csid=0">アウトレット品</a></li>
          </ul>
        </aside>

        <!-- 中央：画像スライダー -->
        <div class="p-product-img">
          <div class="p-product-img__main js-images-slider">
            <div class="p-product-img__main-item">
              <{if $product.img_url != ""}>
                <img src="<{$product.img_url}>" alt="<{$product_name|escape:'html'}>">
              <{else}>
                <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="no image">
              <{/if}>
            </div>
            <{if $otherimg_num != 0}>
              <{section name=num loop=$otherimg}>
                <{if $otherimg[num].url != ""}>
                <div class="p-product-img__main-item">
                  <img src="<{$otherimg[num].url}>" alt="<{$product_name|escape:'html'}>">
                </div>
                <{/if}>
              <{/section}>
            <{/if}>
          </div>
        </div>

        <!-- 右：サムネイル＋商品情報＋購入 -->
        <div class="p-product-info">

          <!-- ▼ サムネイル -->
          <{if $otherimg_num != 0}>
          <div class="p-product-img__thumb">
            <div class="u-overflow-slide">
              <ul class="p-product-thumb-list">
                <{if $product.img_url != ""}>
                <li class="p-product-thumb-list__item">
                  <div class="p-product-thumb-list__img"><img src="<{$product.img_url}>" alt="<{$product_name|escape:'html'}>"></div>
                </li>
                <{/if}>
                <{section name=num loop=$otherimg}>
                  <{if $otherimg[num].url != ""}>
                  <li class="p-product-thumb-list__item">
                    <div class="p-product-thumb-list__img"><img src="<{$otherimg[num].url}>" alt="<{$product_name|escape:'html'}>"></div>
                  </li>
                  <{/if}>
                <{/section}>
              </ul>
            </div>
          </div>
          <{/if}>
          <!-- ▲ サムネイル -->

          <div class="p-product-info-card is-merged">
            <h2 class="p-product-info__ttl"><{$product_name|default:"商品名"}></h2>
            <div class="p-product-info__id"><{$product.model}></div>

            <!-- オプション -->
            <{if $opt_url != ""}>
              <div class="p-product-option">
                <{if $option_output_mode}>
                  <div class="p-product-option-tbl" id="prd-opt-table"><{$option_table}></div>
                  <div class="p-product-option-select" id="prd-opt-select">
                    <{section name=num loop=$option}>
                      <div class="p-product-option-select__box">
                        <div class="p-product-option-select__ttl"><{$option[num].name}></div>
                        <select name="<{$option[num].select_name}>" class="product_cart_select">
                          <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
                        </select>
                      </div>
                    <{/section}>
                  </div>
                <{else}>
                  <div class="p-product-option-select">
                    <{section name=num loop=$option}>
                      <div class="p-product-option-select__box">
                        <div class="p-product-option-select__ttl"><{$option[num].name}></div>
                        <select name="<{$option[num].select_name}>" class="product_cart_select">
                          <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
                        </select>
                      </div>
                    <{/section}>
                  </div>
                <{/if}>
              </div>
            <{/if}>

            <!-- 名入れ等 -->
            <{if $product.product_text_titles}>
              <div class="p-product-name">
                <{foreach from=$product.product_text_titles key=key item=val}>
                  <div class="p-product-name__ttl"><{$val|escape}></div>
                  <div class="p-product-name__body">
                    <input type="text" name="product_text[<{$key|escape}>]" value="">
                  </div>
                <{/foreach}>
              </div>
            <{/if}>

            <div class="p-product-buybox">
              <!-- 金額 -->
              <div class="p-product-buybox__price">
                <p class="p-product-buybox__price-label">販売価格</p>

                <{if $members_login_flg == true && $product.discount_flg == true}>
                  <span class="p-product-buybox__price-now"><{$product.sales}></span>
                  <span class="p-product-buybox__off"><{$product.discount_rate}>OFF</span>
                  <span class="p-product-buybox__price-normal">通常 <{$product.regular_price}></span>
                <{else}>
                  <span class="p-product-buybox__price-now"><{$product.sales}></span>
                <{/if}>
              </div>

              <div class="p-product-form">
                <{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
                  <!-- 数量 -->
                  <div class="p-product-form-stock">
                    <div class="p-product-form-stock__input">
                      <label for="buy_qty" class="p-product-form-stock__label">数量</label>
                      <input id="buy_qty" type="number" inputmode="numeric" min="1" step="1" name="product_num" value="<{$product.init_num|default:1}>" />
                      <{if $product.unit != ""}><span class="p-product-form-stock__unit"><{$product.unit}></span><{/if}>
                    </div>
                    <{if $product.stock_disp}>
                      <div class="p-product-form-stock__stock">在庫：<{$product.stock_str}></div>
                    <{/if}>
                  </div>

                  <!-- カートボタン -->
                  <div class="p-product-form-btn">
                    <div class="p-product-form-btn__cart">
                      <button type="submit" class="p-product-buybox__btn c-btn-cart">
                        <i class="c-icon-cart"></i> カートに入れる
                      </button>
                    </div>
                  </div>

                  <p class="p-product-form__error-message stock_error"></p>
                <{else}>
                  <button class="p-product-buybox__btn c-btn-cart" type="button" disabled="disabled">
                    <{if $product.soldout_flg}>SOLD OUT
                    <{elseif $product.login_sale_flg}>会員のみ購入できます
                    <{elseif $shop_stop_flg}>休止中<{/if}>
                  </button>
                <{/if}>
              </div>
            </div>
          </div>

          <!-- ▼ 配送について（アコーディオン） -->
          <ul class="p-product-info-links">
            <li class="p-product-info-links__item p-info-toggle">
              <button type="button" class="p-info-toggle__btn">
                配送について
                <span class="p-info-toggle__icon">＋</span>
              </button>

              <div class="p-info-toggle__content">
                <p>税込3千円以上のご注文で送料無料</p>
                <p>月〜土曜日は朝9時までのご注文で即日発送</p>
                <p>※土曜朝9時〜月曜朝9時までのご注文は、月曜日以降に順次発送</p>
                <p class="p-info-toggle__guide">
                  <a href="<{$sk_url}>#deliveryguide">ご利用ガイドを見る</a>
                </p>
              </div>
            </li>

            <!-- ▼ ギフトラッピング（アコーディオン） -->
            <li class="p-product-info-links__item p-info-toggle">
              <button type="button" class="p-info-toggle__btn">
                ギフトラッピングについて
                <span class="p-info-toggle__icon">＋</span>
              </button>

              <div class="p-info-toggle__content">
                <p>この商品はラッピング可能です。</p>

                <p class="p-info-gift__btnwrap">
                  <a href="https://your-gift-ticket-url" class="p-info-gift__btn" target="_blank">
                    &#127873; ラッピングチケットを購入する
                  </a>
                </p>

                <p>ギフトラッピングは有料で承ります。ラッピングチケットをご購入ください。</p>
              </div>
            </li>

            <!-- ▼ 問い合わせリンク -->
            <li class="p-product-info-links__item">
              <a href="<{$prod_inq_url}>">
                <span class="p-product-info-links__icon">&#9993;</span>
                商品について問い合わせる
              </a>
            </li>
          </ul>

          <!-- SNSアイコン -->
          <ul class="p-product-sns-list">
            <li class="p-product-sns-list__item"><{$line_button}></li>
            <li class="p-product-sns-list__item"><{facebook_share}></li>
            <li class="p-product-sns-list__item"><{twitter_tweet}></li>
          </ul>

        </div><!-- /.p-product-info -->

      </div><!-- /.p-product-main -->

      <!-- 下段：商品説明 -->
      <div class="p-product-explain">
        <h3 class="p-product__ttl">製品情報</h3>
        <div class="p-product-explain__body"><{$product.explain}></div>
      </div>

      <!-- レビュー -->
      <div class="p-product-review">
        <div class="p-product-review__head">
          <h3 class="p-product__ttl">この商品のレビュー</h3>
          <a href="/?mode=review_write&product_id=<{$product.id}>"
             class="p-product-review__write-btn">
            レビューを書く
          </a>
        </div>

        <div class="p-product-review__body">
          <{ if $review_use_flg }>
            <{ if $review_item_num > 0 }>
              <{assign var="m_num" value=3}>
              <{section name=num loop=$reviewlist max=$m_num}>
              <div class="reviewlist">
                <div class="reviewlist_datas">
                  <div class="icon_star">
                    <img src="https://img.shop-pro.jp/img/review/star_<{$reviewlist[num].star|string_format:"%02d"}>.png" />
                  </div>
                  <ul class="review_poster">
                    <li><{$reviewlist[num].nickname}></li>
                    <li><{$reviewlist[num].nendai}></li>
                    <li><{$reviewlist[num].sex}></li>
                    <li><{$reviewlist[num].date}></li>
                  </ul>
                </div>
                <div class="reviewlist_content">
                  <div class="review_ttl">
                    <span class="review_ttl__star">
                      <img src="https://img.shop-pro.jp/img/review/star_<{$reviewlist[num].star|string_format:"%02d"}>.png"
                           alt="評価 <{$reviewlist[num].star}> / 5">
                    </span>
                    <span class="review_ttl__text"><{$reviewlist[num].title}></span>
                  </div>

                  <{if $reviewlist[num].img_url != ""}>
                    <img src="<{$reviewlist[num].img_url}>" class="review_img" width="100" />
                  <{/if}>

                  <div><{$reviewlist[num].comment}></div>
                </div>

                <{if $reviewlist[num].res_comment != ""}>
                <div class="shopcomment">
                  <div class="shopcomment_ttl">ショップからのコメント</div>
                  <{$reviewlist[num].res_comment}>（<{$reviewlist[num].res_date}>）
                </div>
                <{/if}>
              </div>
              <{/section}>

              <{ if $review_item_num > $m_num }>
                <p class="p-product-review__more">
                  <a href="/?mode=review&product_id=<{$product.id}>">
                    もっと見る（全 <{$review_item_num}> 件）
                  </a>
                </p>
              <{/if}>
            <{ else }>
              <p class="p-product-review__empty">レビュー投稿はありません。</p>
            <{/if}>
          <{ else }>
            <p class="p-product-review__empty">レビュー機能は現在ご利用いただけません。</p>
          <{/if}>
        </div><!-- /.p-product-review__body -->
      </div><!-- /.p-product-review -->

      <!-- ▼ クイックカートインONの合図 -->
      <{$product.info}>
      <input type="hidden" name="is_async_cart_in" value="1">

      <!-- ▼ 右下：フローティング購入ボックス -->
      <{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
      <div class="acl-buybox">
        <div class="acl-buybox__name"><{$product_name}></div>
        <{if $product.model != ""}>
          <div class="acl-buybox__model"><{$product.model}></div>
        <{/if}>

        <div class="acl-buybox__price">
          <{if $members_login_flg == true && $product.discount_flg == true}>
            <span class="acl-buybox__price-now"><{$product.sales}></span>
            <span class="acl-buybox__off"><{$product.discount_rate}>OFF</span>
            <span class="acl-buybox__price-normal">通常 <{$product.regular_price}></span>
          <{else}>
            <span class="acl-buybox__price-now"><{$product.sales}></span>
          <{/if}>
        </div>

        <div class="acl-buybox__qty">
          <label for="acl_qty">数量</label>
          <input id="acl_qty" type="number" inputmode="numeric" min="1" step="1" value="<{$product.init_num|default:1}>">
          <{if $product.unit != ""}><span class="acl-buybox__unit"><{$product.unit}></span><{/if}>
        </div>

        <div class="p-product-buybox__actions">
          <button type="button" class="p-product-buybox__btn acl-buybox__btn js-float-submit">カートに入れる</button>
        </div>

        <{if $product.stock_disp}>
          <div class="acl-buybox__stock">在庫：<{$product.stock_str}></div>
        <{/if}>
      </div>
      <{else}>
      <div class="acl-buybox">
        <div class="acl-buybox__name"><{$product_name}></div>
        <{if $product.model != ""}>
          <div class="acl-buybox__model"><{$product.model}></div>
        <{/if}>
        <div class="acl-buybox__price">
          <span class="acl-buybox__price-now"><{$product.sales}></span>
        </div>
        <button type="button" class="acl-buybox__btn" disabled>
          <{if $product.soldout_flg}>SOLD OUT
          <{elseif $product.login_sale_flg}>会員のみ購入できます
          <{elseif $shop_stop_flg}>休止中<{/if}>
        </button>
      </div>
      <{/if}>

    </form>
  </div>
</div>

<!-- ▼ 商品説明下の案内バナー（1枚＋2枚） -->
<div class="acl-after-desc">
  <!-- 上の1枚（ブランド紹介など） -->
  <figure class="acl-hero">
    <img src="https://img17.shop-pro.jp/PA01265/139/etc_base64/wOLMwDM.jpg" alt="アジアクラフトリンクのものづくり紹介">
  </figure>

  <!-- 下2枚（木目・保証など） -->
  <div class="acl-row acl-2col">
    <figure>
      <img src="https://img17.shop-pro.jp/PA01265/139/etc_base64/wOLMwDI.jpg" alt="天然木の色味・木目についてのご案内">
    </figure>
    <figure>
      <img src="https://img17.shop-pro.jp/PA01265/139/etc_base64/wOLMwDE.jpg" alt="安心の3ヶ月保証について">
    </figure>
  </div>
</div>

<!-- ▼ クイックカートイン：成功/エラーモーダル & スピナー背景 -->
<div class="cart_in_modal cart_modal__close" style="display:none;">
  <div class="cart_in_modal__outline not_bubbling">
    <label class="cart_modal__close cart_in_modal__close-icon"></label>
    <p class="cart_in_modal__heading">こちらの商品が<br class="sp-br">カートに入りました</p>
    <div class="cart_in_modal__detail">
      <{if $product.img_url != ""}>
      <div class="cart_in_modal__image-wrap">
        <img src="<{$product.img_url}>" alt="<{$product_name|escape:'html'}>" class="cart_in_modal__image" />
      </div>
      <{/if}>
      <p class="cart_in_modal__name"><{$product_name}></p>
    </div>
    <div class="cart_in_modal__button-wrap">
      <form name="cart_view_with_async" method="POST" action="<{$view_cart_url}>">
        <{$view_cart_with_async_info}>
      </form>
      <button class="cart_view_with_async cart_in_modal__button cart_in_modal__button--solid">かごの中身を見る</button>
      <p class="cart_modal__close cart_in_modal__text-link">ショッピングを続ける</p>
    </div>
  </div>
</div>

<div class="cart_in_error_modal cart_in_error__close" style="display:none;">
  <div class="cart_in_modal__outline not_bubbling">
    <label class="cart_in_error__close cart_in_modal__close-icon"></label>
    <p class="cart_in_error_message cart_in_error_modal__heading"></p>
    <div class="cart_in_modal__button-wrap">
      <button class="cart_in_error__close cart_in_modal__button cart_in_modal__button--solid">ショッピングを続ける</button>
    </div>
  </div>
</div>

<div class="cart_in_modal__bg show_while_cart_in_connecting spinner" style="display:none;"></div>

<!-- jQuery / Slick 読み込み & 初期化（画像スライダー） -->
<script>
(function(){
  function loadJS(src, cb){
    var s=document.createElement('script');
    s.src=src;
    s.async=true;
    s.onload=cb;
    document.head.appendChild(s);
  }
  function ensureJQ(next){
    if(window.jQuery && jQuery.fn){return next();}
    loadJS('https://code.jquery.com/jquery-3.6.0.min.js', next);
  }
  function ensureSlick(next){
    if(window.jQuery && jQuery.fn && jQuery.fn.slick){return next();}
    loadJS('https://img.shop-pro.jp/tmpl_js/86/slick.min.js', next);
  }
  function init(){
    var $ = window.jQuery;
    var slider='.js-images-slider',
        thumb='.p-product-thumb-list__item';

    $(thumb).each(function(i){
      $(this).attr('data-index',i);
    });

    var $s=$(slider);
    if($s.length && !$s.hasClass('slick-initialized')){
      $s.on('init', function(e, slick){
        var cur=slick.currentSlide||0;
        $(thumb).removeClass('is-current');
        $(thumb+'[data-index="'+cur+'"]').addClass('is-current');
      });

      $s.slick({
        slidesToShow:1,
        slidesToScroll:1,
        arrows:true,
        dots:false,
        infinite:true,
        adaptiveHeight:true,
        speed:300
      });

      $(document).on('click', thumb, function(){
        var i=+$(this).attr('data-index');
        $s.slick('slickGoTo', i, false);
      });

      $s.on('beforeChange', function(e, slick, cur, next){
        $(thumb).removeClass('is-current');
        $(thumb+'[data-index="'+next+'"]').addClass('is-current');
      });
    }
  }
  ensureJQ(function(){
    ensureSlick(function(){
      if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded', init);
      }else{
        init();
      }
    });
  });
})();
</script>

<!-- アコーディオン（配送・ギフト） -->
<script>
document.addEventListener("DOMContentLoaded", function(){
  document.querySelectorAll(".p-info-toggle__btn").forEach(function(btn){
    btn.addEventListener("click", function(){
      const parent = btn.closest(".p-info-toggle");
      parent.classList.toggle("open");
    });
  });
});
</script>

<!-- 数量サニタイズ／フローティング表示／ボタン動作／「カートを見る」POST -->
<script>
(function(){
  function sanitizeQty(v){
    v=(v+'').replace(/[^\d０-９]/g,'')
             .replace(/[０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0);});
    var n=parseInt(v,10);
    if(!n||n<1) n=1;
    return String(n);
  }

  var form   = document.forms['product_form'];
  var mainQ  = document.getElementById('buy_qty');
  var floatQ = document.getElementById('acl_qty');
  var floatBtn = document.querySelector('.js-float-submit');
  var box = document.querySelector('.p-product.is-custom .acl-buybox');
  var footer = document.querySelector('.site-footer, footer, #footer');

  if(mainQ && floatQ){
    mainQ.addEventListener('input',  function(){
      floatQ.value = sanitizeQty(this.value);
    });
    floatQ.addEventListener('input', function(){
      mainQ.value  = sanitizeQty(this.value);
    });
  }

  if(form){
    form.addEventListener('submit', function(){
      if(mainQ){ mainQ.value = sanitizeQty(mainQ.value); }
      if(floatQ && mainQ){ floatQ.value = mainQ.value; }
    });
  }

  if(floatBtn && form){
    floatBtn.addEventListener('click', function(){
      var safe = mainQ ? sanitizeQty(mainQ.value) : '1';
      if(floatQ){ safe = sanitizeQty(floatQ.value || safe); }
      if(mainQ){ mainQ.value = safe; }
      if(floatQ){ floatQ.value = safe; }
      form.submit();
    });
  }

  function onScroll(){
    if(!box) return;
    var y = window.pageYOffset || document.documentElement.scrollTop;
    if(y > 500){
      box.classList.add('is-visible');
    }else{
      box.classList.remove('is-visible');
    }
    if(footer){
      var rect = footer.getBoundingClientRect();
      var overlap = (window.innerHeight - rect.top);
      var baseBottom = 16;
      var lift = Math.max(0, overlap + 16);
      box.style.bottom = (overlap > 0 ? (baseBottom + lift) : baseBottom) + 'px';
    }
  }
  window.addEventListener('scroll', onScroll, {passive:true});
  window.addEventListener('resize', onScroll);
  onScroll();

  document.querySelectorAll('.cart_view_with_async').forEach(function(btn){
    btn.addEventListener('click', function(e){
      e.preventDefault();
      var f = document.forms['cart_view_with_async'];
      if(f){ f.submit(); }
    });
  });
})();
</script>

<!-- ※ async_cart_in.js / cart.js 等はプラットフォーム側で共通読み込みされます -->
</body>
</html>
