.sample-section{position:relative;background:#F8F6F1;padding:48px 40px 56px;font-family:'Segoe UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo',sans-serif;box-sizing:border-box;}
.sample-section::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);background:#F8F6F1;z-index:0;}
.sample-section > *{position:relative;z-index:1;}
.sample-wrap{max-width:1100px;margin:0 auto;}

/* ページタイトル */
.sample-section .s-title{text-align:center;margin-bottom:14px;}
.sample-section .s-title h2{font-size:26px;color:#1A3A5C;margin:0;font-weight:700;letter-spacing:0.5px;}
.sample-section .s-sub{text-align:center;font-size:13px;color:#8a8a8a;margin-bottom:36px;letter-spacing:1px;}

/* ステップ全体 */
.sample-section .steps{display:flex;flex-direction:column;gap:20px;}

/* 個別ステップカード */
.sample-section .step-card{background:#fff;border-radius:10px;border:1px solid #e8e4dc;overflow:hidden;transition:all .3s ease;display:flex;align-items:stretch;}
.sample-section .step-card:hover{box-shadow:0 6px 20px rgba(26,58,92,0.12);border-color:#C9A961;transform:translateY(-2px);}

/* ステップ番号エリア */
.sample-section .step-num{flex-shrink:0;width:72px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1A3A5C 0%,#2a5380 100%);position:relative;}
.sample-section .step-num::after{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background:linear-gradient(180deg,#C9A961 0%,#e0c070 100%);}
.sample-section .step-num span{font-size:30px;font-weight:800;color:#fff;font-family:'Georgia',serif;}

/* ステップ内容 */
.sample-section .step-body{flex:1;padding:20px 28px;}
.sample-section .step-body .step-label{font-size:12px;color:#C9A961;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.sample-section .step-body .step-text{font-size:14px;line-height:1.9;color:#444;margin:0;}

/* 太字ハイライト */
.sample-section .step-body .step-text strong{color:#1A3A5C;}

/* 注意書きボックス（STEP 1内） */
.sample-section .step-note{background:#fff8e8;border-left:3px solid #C9A961;border-radius:4px;padding:12px 16px;margin-top:10px;font-size:13px;line-height:1.7;color:#7a6a3a;}
.sample-section .step-note strong{color:#b8920e;}

/* STEP 2 補足 */
.sample-section .step-sub-note{background:#eef3f9;border-radius:4px;padding:10px 14px;margin-top:10px;font-size:13px;line-height:1.7;color:#3a5a7a;}

/* SKU確認方法ボックス */
.sample-section .sku-tip{display:inline-flex;align-items:center;gap:6px;background:#1A3A5C;color:#fff;font-size:12px;padding:3px 10px;border-radius:4px;font-weight:600;margin:0 2px;}

/* 流れ矢印 */
.sample-section .flow-arrow{text-align:center;color:#C9A961;font-size:20px;margin:-6px 0;}

/* 配送情報バー */
.sample-section .ship-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1A3A5C 0%,#2a5380 100%);border-radius:10px;padding:18px 28px;margin-top:32px;color:#fff;}
.sample-section .ship-bar .ship-item{display:flex;align-items:center;gap:10px;}
.sample-section .ship-bar .ship-item .ship-icon{font-size:22px;}
.sample-section .ship-bar .ship-item .ship-label{font-size:12px;color:#a0bcd6;letter-spacing:1px;}
.sample-section .ship-bar .ship-item .ship-value{font-size:16px;font-weight:700;color:#fff;}
.sample-section .ship-bar .ship-item .ship-value .ship-free{color:#C9A961;}
.sample-section .ship-bar .ship-divider{width:1px;height:40px;background:rgba(255,255,255,0.15);}

/* 注意エリア */
.sample-section .caution-box{background:#fff;border:1px dashed #d4cfc4;border-radius:8px;padding:16px 20px;margin-top:20px;font-size:13px;line-height:1.8;color:#666;}
.sample-section .caution-box .caution-title{display:flex;align-items:center;gap:6px;font-weight:700;color:#1A3A5C;margin-bottom:6px;font-size:14px;}

/* レスポンシブ */
@media(max-width:768px){
  .sample-section{padding:32px 16px 40px;}
  .sample-section .s-title h2{font-size:20px;}
  .sample-section .step-num{width:56px;}
  .sample-section .step-num span{font-size:24px;}
  .sample-section .step-body{padding:16px 18px;}
  .sample-section .step-body .step-text{font-size:13px;line-height:1.8;}
  .sample-section .ship-bar{flex-direction:column;gap:14px;padding:16px;}
  .sample-section .ship-bar .ship-divider{width:100%;height:1px;}
}