/* =================================================
   Free page: ネーム刺繍（ページ専用）
   scope: .fp-embroidery
================================================= */

.fp-embroidery{
  --brown-900:#3a1a08;
  --brown-800:#3d1b0a;
  --accent:#b5651d;
  --panel:#fdf8f4;
  --border:#e8d5c4;
}

/* ページ内の見出し */
.fp-embroidery .sec h2{
  background:var(--brown-800);
  color:#fff;
  padding:.3em;
}

/* 小物 */
.fp-embroidery .color_red{ color:#f00; }
.fp-embroidery ul.disc{ list-style:disc; margin-left:1.3em; }
.fp-embroidery ol.revert{ list-style:revert; margin-left:1.3em; }

/* ネーム刺繍DL */
.fp-embroidery #name-embroidery{
  max-width:550px;
  margin:1.5rem auto 0;
  display:flex;
  flex-wrap:wrap;
}
.fp-embroidery #name-embroidery dt{
  width:100px;
  font-weight:700;
}
.fp-embroidery #name-embroidery dd{
  width:calc(100% - 100px);
  margin:0;
}
.fp-embroidery #name-embroidery dd:first-of-type{
  font-size:1.2rem;
  font-weight:700;
}

/* ご注文方法 */
.fp-embroidery .order-flow{
  max-width:740px;
  margin:0 auto;
  background:#fff;
  border-radius:16px;
  padding:48px 40px;
  box-shadow:0 4px 24px rgba(0,0,0,.07);
}
.fp-embroidery .order-flow__title{
  text-align:center;
  font-size:22px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--brown-900);
  margin-bottom:8px;
  position:relative;
  padding-bottom:14px;
}
.fp-embroidery .order-flow__title::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  background:var(--accent);
  border-radius:2px;
  margin:10px auto 0;
}
.fp-embroidery .order-flow__lead{
  text-align:center;
  font-size:13.5px;
  color:#666;
  margin-bottom:36px;
  line-height:1.7;
}
.fp-embroidery .order-flow__lead strong{
  color:var(--brown-900);
  font-weight:700;
  background:linear-gradient(transparent 60%, #f5d99a 60%);
}

/* steps */
.fp-embroidery .steps{ display:flex; flex-direction:column; }
.fp-embroidery .step{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:0 20px;
  position:relative;
}
.fp-embroidery .step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:39px;
  top:80px;
  bottom:-28px;
  width:2px;
  background:repeating-linear-gradient(to bottom, #c9956a 0 6px, transparent 6px 12px);
}
.fp-embroidery .step__badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:10px;
}
.fp-embroidery .step__badge-circle{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, #6b3a1f, var(--accent));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 3px 10px rgba(107,58,31,.35);
  flex-shrink:0;
}
.fp-embroidery .step__badge-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  opacity:.85;
  line-height:1;
  margin-bottom:2px;
}
.fp-embroidery .step__badge-num{
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.fp-embroidery .step__card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:28px;
  transition:box-shadow .2s;
}
.fp-embroidery .step__card:hover{ box-shadow:0 4px 16px rgba(107,58,31,.1); }
.fp-embroidery .step__card-title{
  font-size:15px;
  font-weight:700;
  color:var(--brown-900);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.fp-embroidery .step__card-body{
  font-size:13px;
  color:#555;
  line-height:1.75;
}
.fp-embroidery .step__card-body .note{
  font-size:12px;
  color:#888;
  margin-top:6px;
  padding-left:1em;
  text-indent:-1em;
}
.fp-embroidery .step__card-body .note::before{ content:"※"; }

/* 画像ブロック */
.fp-embroidery .step__img-block{
  margin-top:14px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #ddd;
  background:#fff;
}
.fp-embroidery .step__img-block .mock-bar{
  background:#e8e0d8;
  padding:7px 12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.fp-embroidery .mock-bar span{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.fp-embroidery .mock-bar .dot1{ background:#ff5f57; }
.fp-embroidery .mock-bar .dot2{ background:#febc2e; }
.fp-embroidery .mock-bar .dot3{ background:#28c840; }
.fp-embroidery .step__img-block img{
  display:block;
  width:100%;
  height:auto;
}

/* ラベル、注意 */
.fp-embroidery .highlight-label{
  display:inline-block;
  background:#6b3a1f;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 10px;
  border-radius:20px;
  letter-spacing:.08em;
  margin-left:6px;
  vertical-align:middle;
}
.fp-embroidery .caution-box{
  background:#fff8f0;
  border:1px solid #e8c99a;
  border-left:4px solid var(--accent);
  border-radius:8px;
  padding:14px 16px;
  margin-top:32px;
  font-size:12.5px;
  color:#666;
  line-height:1.8;
}
.fp-embroidery .caution-box p{ margin-bottom:4px; }
.fp-embroidery .caution-box p:last-child{ margin-bottom:0; }
.fp-embroidery .caution-box strong{ color:var(--accent); }

/* CTA */
.fp-embroidery .cta-wrap{ text-align:center; margin-top:32px; }
.fp-embroidery .cta-btn{
  display:inline-block;
  background:linear-gradient(135deg, #6b3a1f, var(--accent));
  color:#fff !important;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  padding:14px 40px;
  border-radius:50px;
  letter-spacing:.1em;
  box-shadow:0 4px 16px rgba(107,58,31,.3);
  transition:transform .2s, box-shadow .2s;
}
.fp-embroidery .cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(107,58,31,.4);
}

/* インラインstyle置き換え */
.fp-embroidery .fp-embroidery__code{
  background:#f0e8e0;
  padding:1px 6px;
  border-radius:4px;
  font-size:12px;
}
.fp-embroidery .fp-embroidery__leadtime{
  color:var(--accent);
  font-size:15px;
  font-weight:700;
}

/* =================================================
   刺繍イメージシミュレーター（esim）
================================================= */

.fp-embroidery .esim-section{ margin-top:48px; }
.fp-embroidery .esim-titlebar{
  background:#3c1a08;
  color:#fff;
  text-align:center;
  padding:14px 20px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.1em;
  border-radius:4px;
  margin-bottom:6px;
}
.fp-embroidery .esim-titlebar-sub{
  text-align:center;
  font-size:12px;
  color:#999;
  margin-bottom:24px;
  line-height:1.6;
}

.fp-embroidery .esim-wrap{
  background:#fff;
  border-radius:12px;
  border:1px solid #e8d8cc;
  overflow:hidden;
}
.fp-embroidery .esim-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.fp-embroidery .esim-ctrl{
  padding:24px 22px;
  border-right:1px solid #f0e6de;
  background:#fdf8f4;
}
.fp-embroidery .esim-prev-col{
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fp-embroidery .esim-fg{ margin-bottom:20px; }
.fp-embroidery .esim-fg:last-child{ margin-bottom:0; }
.fp-embroidery .esim-fg__lbl,
.fp-embroidery .esim-prev-lbl{
  font-size:10px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.14em;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:5px;
}
.fp-embroidery .esim-fg__lbl::before,
.fp-embroidery .esim-prev-lbl::before{
  content:"";
  display:inline-block;
  width:3px;
  height:11px;
  background:var(--accent);
  border-radius:2px;
}

.fp-embroidery .esim-inp-wrap{ position:relative; }
.fp-embroidery .esim-inp{
  width:100%;
  padding:11px 42px 11px 12px;
  font-size:15px;
  font-family:'Noto Sans JP', sans-serif;
  border:2px solid var(--border);
  border-radius:9px;
  outline:0;
  background:#fff;
  transition:border-color .2s;
  color:#333;
}
.fp-embroidery .esim-inp:focus{ border-color:var(--accent); }
.fp-embroidery .esim-inp::placeholder{ color:#ccc; }

.fp-embroidery .esim-cnt{
  position:absolute;
  right:10px;
  bottom:10px;
  font-size:10px;
  color:#bbb;
  pointer-events:none;
}
.fp-embroidery .esim-cnt.over{ color:#e03; }

.fp-embroidery .esim-sel-wrap{ position:relative; }
.fp-embroidery .esim-fab-dot{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.12);
  pointer-events:none;
  transition:background .2s;
}
.fp-embroidery .esim-sel{
  width:100%;
  padding:10px 32px 10px 36px;
  border:2px solid var(--border);
  border-radius:9px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  font-family:'Noto Sans JP', sans-serif;
  color:#333;
  outline:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .2s;
}
.fp-embroidery .esim-sel:focus{ border-color:var(--accent); }
.fp-embroidery .esim-sel-wrap::after{
  content:"▼";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:var(--accent);
  pointer-events:none;
}

.fp-embroidery .esim-font-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.fp-embroidery .esim-font-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1.5px solid var(--border);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  outline:0;
  transition:border-color .15s, background .15s;
}
.fp-embroidery .esim-font-btn:hover{ border-color:#c08040; }
.fp-embroidery .esim-font-btn.esim-on{ border-color:var(--accent); background:#fff8f2; }
.fp-embroidery .esim-font-prev{
  font-size:15px;
  font-weight:700;
  color:#6b3a1f;
  min-width:64px;
  flex-shrink:0;
}
.fp-embroidery .esim-font-nm{ font-size:11px; font-weight:700; color:#333; }
.fp-embroidery .esim-font-ds{ font-size:10px; color:#aaa; }

.fp-embroidery .esim-palette{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.fp-embroidery .esim-cbtn{
  width:30px;
  height:30px;
  border-radius:50%;
  border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.07);
  cursor:pointer;
  outline:0;
  transition:transform .15s, box-shadow .15s;
  position:relative;
  flex-shrink:0;
}
.fp-embroidery .esim-cbtn::after{
  content:"";
  position:absolute;
  top:4px;
  left:5px;
  width:8px;
  height:5px;
  background:rgba(255,255,255,.3);
  border-radius:50%;
  transform:rotate(-30deg);
}
.fp-embroidery .esim-cbtn:hover{ transform:scale(1.16); }
.fp-embroidery .esim-cbtn.esim-on{
  box-shadow:0 0 0 3px var(--accent), 0 2px 8px rgba(0,0,0,.2);
  transform:scale(1.1);
}
.fp-embroidery .esim-color-disp{
  font-size:11px;
  color:#aaa;
  margin-top:5px;
  min-height:15px;
}

.fp-embroidery .esim-fabric{
  flex:1;
  min-height:160px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  position:relative;
  overflow:hidden;
  transition:background-color .35s;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.026) 0, rgba(0,0,0,.026) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.026) 0, rgba(0,0,0,.026) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 6px);
  border:1px solid rgba(0,0,0,.06);
}
.fp-embroidery .esim-text{
  display:block;
  font-size:clamp(18px, 4vw, 26px);
  font-weight:900;
  letter-spacing:.1em;
  line-height:1.5;
  text-align:center;
  filter:url(#esim-filter);
  transition:color .25s, font-family .1s;
  word-break:break-all;
  max-width:100%;
}
.fp-embroidery .esim-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:rgba(128,128,128,.4);
  font-size:12px;
  gap:5px;
  pointer-events:none;
  transition:opacity .2s;
  text-align:center;
  padding:16px;
}
.fp-embroidery .esim-empty-ico{ font-size:22px; }

.fp-embroidery .esim-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.fp-embroidery .esim-chip{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:700;
  color:#555;
  background:#fdf8f4;
  border:1px solid var(--border);
  border-radius:20px;
  padding:3px 9px;
}
.fp-embroidery .esim-chip-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.1);
  flex-shrink:0;
}

.fp-embroidery .esim-cta{
  display:block;
  width:100%;
  padding:13px;
  background:linear-gradient(135deg, #6b3a1f, var(--accent));
  color:#fff !important;
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:50px;
  text-decoration:none !important;
  box-shadow:0 4px 14px rgba(107,58,31,.28);
  transition:transform .2s, box-shadow .2s;
}
.fp-embroidery .esim-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(107,58,31,.38);
}

/* レスポンシブ */
@media (max-width:600px){
  .fp-embroidery .order-flow{ padding:32px 20px; }
  .fp-embroidery .step{ grid-template-columns:64px 1fr; gap:0 12px; }
  .fp-embroidery .step__badge-circle{ width:48px; height:48px; }
  .fp-embroidery .step__badge-num{ font-size:18px; }
  .fp-embroidery .step:not(:last-child)::after{ left:31px; }

  .fp-embroidery #name-embroidery dt,
  .fp-embroidery #name-embroidery dd{ width:100%; }

  .fp-embroidery .esim-body{ grid-template-columns:1fr; }
  .fp-embroidery .esim-ctrl{
    border-right:0;
    border-bottom:1px solid #f0e6de;
  }
  .fp-embroidery .esim-fabric{ min-height:140px; }
  .fp-embroidery .esim-cbtn{ width:28px; height:28px; }
}
/* ===== 無料バナー ===== */
.embroidery-free-banner{
  background: linear-gradient(135deg,#b30000,#ff4d4d);
  color:#fff;
  text-align:center;
  padding:10px;
  position: relative;
}

.embroidery-free-banner .badge{
  background:#fff;
  color:#b30000;
  font-size:12px;
  padding:3px 10px;
  display:inline-block;
  margin-bottom:6px;
  font-weight:bold;
}

.embroidery-free-banner .main{
  font-size:26px;
  font-weight:bold;
}

.embroidery-free-banner .main strong{
  font-size:34px;
}

.embroidery-free-banner .sub{
  font-size:14px;
  opacity:0.9;
}

/* ===== 料金強調 ===== */
.price-free{
  font-size:18px;
  margin-top:10px;
}

.price-free .old{
  text-decoration:line-through;
  color:#999;
  margin-right:8px;
}

.price-free .arrow{
  margin:0 5px;
}

.price-free .free{
  color:#d60000;
  font-size:24px;
  font-weight:bold;
}