/* ====================== THEME (scoped) ====================== */
.certlp {
  --cl-mg:#c41458; --cl-mg-d:#9f0e46;        /* マゼンタ帯 */
  --cl-gold:#f2b300; --cl-gold-d:#d09400;    /* 金テール */
  --cl-ink:#333; --cl-muted:#666; --cl-bg:#fff;
  --cl-cream:#fff6b8;                        /* クリーム色カード */
  --cl-rose:#ffe8f1; --cl-rose2:#fff0f6;     /* ピンク系（Q&A帯） */
  --cl-accent:#e60033;                       /* 強調赤 */
  --cl-max:1100px;

  --cl-fz-hero:clamp(18px,3.6vw,30px);
  --cl-fz-h:clamp(16px,3.2vw,22px);
  --cl-fz-b:clamp(14px,2.8vw,16px);

  --cl-r-lg:16px; --cl-r-md:12px; --cl-shadow:0 2px 10px rgba(0,0,0,.08);

  /* サブ帯サイズ（カードと連動） */
  --cl-rib-h:clamp(40px,7.2vw,56px);
  --cl-rib-tail:clamp(18px,6vw,34px);
  --cl-rib-left:clamp(-6px,-1vw,-8px);

  /* ヒーロー帯テール（極小で自動非表示） */
  --cl-hero-tail:clamp(0px,12vw,120px);
}
.certlp *{box-sizing:border-box}
.certlp{color:var(--cl-ink);background:var(--cl-bg);line-height:1.8;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,Roboto,"Segoe UI",sans-serif}
.certlp .cl-wrap{padding:clamp(14px,1vw,32px);}
.certlp .cl-container{max-width:var(--cl-max);margin:auto}
.certlp img{max-width:100%;height:auto;display:block}

/* === Utility === */
.cl-hl{color:var(--cl-accent);font-weight:700}
.cl-note{color:#777;font-size:13px}
.cl-center{text-align:center}
.cl-btn{display:inline-block;padding:10px 16px;border-radius:999px;background:linear-gradient(to bottom,var(--cl-mg),var(--cl-mg-d));color:#fff;font-weight:800;text-decoration:none}

/* ====================== HERO RIBBON ====================== */
.cl-hero{
  position:relative;display:block;width:100%;text-align:center;
  color:#fff;font-weight:800;font-size:var(--cl-fz-hero);letter-spacing:.02em;
  padding:10px clamp(12px,3.6vw,28px);border-radius:10px;
  background:linear-gradient(to bottom,var(--cl-mg),var(--cl-mg-d));
  box-shadow:var(--cl-shadow)
}
.cl-hero::before,.cl-hero::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:var(--cl-hero-tail);height:14px;border-radius:2px;
  background:linear-gradient(to bottom,var(--cl-gold),var(--cl-gold-d));
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))
}
.cl-hero::before{left:calc(-1 * var(--cl-hero-tail) - 6px)}
.cl-hero::after{ right:calc(-1 * var(--cl-hero-tail) - 6px)}
@media (max-width:400px){ .cl-hero::before,.cl-hero::after{display:none} }

/* ====================== SUB RIBBON（▲一体SVG） ====================== */
.cl-rib{
  position:absolute;left:var(--cl-rib-left);top:calc(-1 * (var(--cl-rib-h) - 12px));
  display:inline-flex;align-items:center;gap:.65em;height:var(--cl-rib-h);
  padding:8px 18px 8px 14px;color:#fff;font-weight:800;font-size:var(--cl-fz-h);
  line-height:1;isolation:isolate;white-space:nowrap;z-index:1;
}
.cl-rib>svg{position:absolute;inset:0;z-index:-1;width:calc(100% + var(--cl-rib-tail));height:100%}
.cl-badge{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(#fff,#ffe6f0);color:var(--cl-mg);font-weight:900;font-size:clamp(12px,2.6vw,14px);
  border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.08)
}

/* ====================== 4つの理由 ====================== */
.cl-reasons{margin:22px 0 0}
.cl-reasons ol{counter-reset:cpn;list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,2.6vw,18px)}
.cl-reasons li {
  position:relative;background:var(--cl-cream);border-radius:var(--cl-r-lg);
  padding: 20px 16px 14px;box-shadow:var(--cl-shadow);
  margin-bottom: 3em;
}

.cl-reasons .cl-badge::before{counter-increment:cpn;content:counter(cpn)}

/* ====================== セクション小見出し ====================== */
.cl-sec-title{
  position:relative;display:inline-block;margin:26px 0 12px;padding:8px 14px;color:#fff;font-weight:800;
  font-size:var(--cl-fz-h);background:linear-gradient(to bottom,#8e0f3d,#6e0c2f);border-radius:8px
}
.cl-sec-title::after{
  content:"";position:absolute;right:-28px;top:50%;transform:translateY(-50%);
  width:28px;height:12px;border-radius:2px;background:linear-gradient(to bottom,var(--cl-gold),var(--cl-gold-d))
}

/* ====================== 3大特典 ====================== */
.cl-benefit-grid{display:grid;gap:12px}
@media (min-width:700px){ .cl-benefit-grid{grid-template-columns:repeat(3,1fr)} }
.cl-benefit{background:#fff;border-radius:12px;box-shadow:var(--cl-shadow);padding:12px;text-align:center}
.cl-benefit img{width:80px;height:80px;object-fit:cover;border-radius:8px}

/* ====================== 生地タイプ ====================== */
.cl-fabrics{display:grid;gap:18px;margin:10px 0 0}
.cl-fabric{background:#fff;border-radius:var(--cl-r-lg);box-shadow:var(--cl-shadow)}
.cl-inner{padding:clamp(14px,3.5vw,22px)}
.cl-type-label{
width: 95%;
font-family: serif;
position:relative;display:inline-flex;align-items:center;font-weight:800;color:#fff;
  padding:8px 16px;background:#000;font-size:var(--cl-fz-h)
}
/*.cl-type-label::after{content:"";position:absolute;top:0;right:-18px;width:22px;height:100%;background:#000;clip-path:polygon(0 0,100% 50%,0 100%)}*/
.cl-grid{display:grid;gap:16px;align-items:start}
@media (min-width:820px){ .cl-grid{grid-template-columns:1.4fr 1fr} }
.cl-photo{overflow:hidden}
.cl-photo img {
	display: block;
	max-width: 100%;
	border-radius:12px;
}
.cl-swatches{display:grid;gap:12px;margin:8px 0 4px}
.cl-swatches{grid-template-columns:1fr}
@media (min-width:560px){ .cl-swatches{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .cl-swatches{grid-template-columns:repeat(3,1fr)} }
.cl-swatch{position:relative;background:#fafafa;border:1px solid #eee;border-radius:10px;}
.cl-swatch img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cl-swatch figcaption{padding:8px 10px;font-size:14px}
.cl-rank {position:absolute;left:5px;top:5px;background:linear-gradient(#fff,#ffecc6);border-radius:999px;padding:3px 6px;font-weight:800;color:#b47b00;border:2px solid #fff;font-size:10px}
.cl-rank {
	width: 30px;
	height: 30px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	border: none;
	border-radius: 0;
	text-indent: -5000px;
	transform: rotate(-15deg);
	top: -15px;
	left: -15px;
}
.rank1 {
	background-image: url(../images/01.png);
}
.rank2 {
	background-image: url(../images/02.png);
}
.rank3 {
	background-image: url(../images/03.png);
}
.rank4 {
	background-image: url(../images/04.png);
}
.rank5 {
	background-image: url(../images/05.png);
}

/* ====================== サイズ（表＋図） ====================== */
.cl-size .cl-grid{display:grid;gap:16px}
@media (min-width:880px){ .cl-size .cl-grid{grid-template-columns:1.1fr 1fr} }
.cl-table{background:#fff;border-radius:12px;box-shadow:var(--cl-shadow);padding:14px 16px}
.cl-table .cap{font-weight:800;margin:0 0 .6em}
table.cl-tbl{width:100%;border-collapse:separate;border-spacing:0;background:#f7f7fb;border:1px solid #e6e6ee;border-radius:10px;overflow:hidden}
.cl-tbl th,.cl-tbl td{padding:10px 12px;border-bottom:1px solid #e6e6ee}
.cl-tbl th{background:#fff;text-align:left}
.cl-diagram{background:#fff;border-radius:12px;box-shadow:var(--cl-shadow);padding:10px}
.cl-diagram svg{display:block;width:100%;height:auto}

/* ====================== Q&A（ピンク帯） ====================== */
.cl-qa{background:var(--cl-rose);border:1px solid #ffd2e5;border-radius:14px;margin:22px 0 0}
.cl-qa .inner{padding:12px 14px}
.cl-qa h3{margin:0 0 8px;font-weight:800;font-size:var(--cl-fz-h)}
.cl-qaitem{padding:12px 0;border-top:1px dashed rgba(0,0,0,.15)}
.cl-qaitem:first-child{border-top:none}
.cl-q{position:relative;margin:0 0 6px;padding-left:2.1em;font-weight:800;color:var(--cl-accent)}
.cl-q::before{content:"Q.";position:absolute;left:-15px;top:3px;font-weight:900}
.cl-a{position:relative;margin:0}
.cl-a::before{content:"⇒";position:absolute;left:-15px;top:3px;font-weight:900}
.cl-mark{background:linear-gradient(transparent 58%, #fff5a6 0)}

/* ====================== 収納例（A3/A4） ====================== */
.cl-ex-grid{display:grid;gap:16px}
@media (min-width:860px){ .cl-ex-grid{grid-template-columns:1fr 1fr} }
.cl-ex{background:#fff;border-radius:12px;box-shadow:var(--cl-shadow);padding:12px}
.cl-ex h4{margin:0 0 6px;font-size:var(--cl-fz-h)}
.cl-shot{position:relative;border-radius:12px;overflow:hidden}
.cl-measure{position:absolute;left:8%;top:8%;background:#ff4d4d;color:#fff;font-weight:800;font-size:14px;border-radius:6px;padding:4px 8px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cl-measure:nth-child(2){left:auto;right:8%;bottom:10%;top:auto}

/* ====================== オプション（袋・箱・のし） ====================== */
.cl-options .grid{display:grid;gap:12px}
@media (min-width:900px){ .cl-options .grid{grid-template-columns:repeat(3,1fr)} }
.cl-option{background:#fff;border-radius:12px;box-shadow:var(--cl-shadow);padding:12px}
.cl-option h4{margin:6px 0;font-size:var(--cl-fz-h)}

/* ====================== 価格 ====================== */
.cl-prices .grid{display:grid;gap:12px}
@media (min-width:800px){ .cl-prices .grid{grid-template-columns:repeat(3,1fr)} }
.cl-price{background:#fff;border-radius:12px;box-shadow:var(--cl-shadow);padding:12px}
.cl-price table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #eee;border-radius:10px;overflow:hidden}
.cl-price th,.cl-price td{padding:10px 12px;border-bottom:1px solid #eee;text-align:right}
.cl-price th{background:#fafafa;text-align:left}

/* ====================== print ====================== */
@media print{
  .cl-hero::before,.cl-hero::after{display:none}
  .cl-reasons li,.cl-fabric,.cl-ex,.cl-option,.cl-price{box-shadow:none;border:1px solid #ddd}
}

/* ====== 原稿差し替え箇所の視認性（必要なければ削除可） ====== */
.cl-todo{background:linear-gradient(transparent 55%, #ffe1e1 0);}


/* 証書ケース .com について（h3.custom） */
h3.custom span {
	font-size: 50%;
	font-weight: normal;
}
h3.custom{
  /* 色は必要に応じて調整 */
  --c-top:  #a51f4a;   /* 上部の明るい赤紫 */
  --c-mid:  #8a1538;   /* 中間 */
  --c-bot:  #640e28;   /* 下部の濃い色 */

  position: relative;
  display: block;
  margin: 1em 15px;
  padding: 8px 16px;              /* 画像比に近い余白 */
  color: #fff;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.6;
  border-radius: 5px;

  /* 本体の縦グラデ */
  background:
    linear-gradient(to bottom, var(--c-top) 0%, var(--c-mid) 55%, var(--c-bot) 100%);

  /* 立体感：外側影 + 上端のエッジと下側の落ち影（inset） */
  box-shadow:
    0 3px 10px rgba(0,0,0,.25),         /* 外側の落ち影 */
    inset 0 1px 0 rgba(255,255,255,.45),/* 上端の白いエッジ */
    inset 0 -3px 6px rgba(0,0,0,.35);   /* 下側の暗部 */

  /* 文字のにじみ防止 */
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* 上部の光沢（細いハイライト） */
h3.custom::before{
  content:"";
  position:absolute; inset:2px 2px auto 2px; height:12px;
  border-radius:7px;
  background: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,0));
  pointer-events:none;
}

/* 角からのグロス（左上が強い鈍い光） */
h3.custom::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:
    radial-gradient(120% 200% at 20% -60%,
      rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  pointer-events:none;
}






/* =====================  Scoped: .zk-options  ===================== */
.zk-options{
  /* 画像のPC幅（20–30%の範囲で調整可） */
  --zk-media-pc: 26%;
  --zk-ink:#222; --zk-muted:#666;
  --zk-ac:#c41458; --zk-ac-d:#9f0e46;
  --zk-line:#e9e9f1; --zk-soft:#f7f7fb; --zk-chip:#eef1f6;
  --zk-shadow:0 6px 18px rgba(0,0,0,.05);
  --zk-s1:8px; --zk-s2:12px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,Roboto,"Segoe UI",sans-serif;
  color:var(--zk-ink); line-height:1.75;
}
.zk-options *{box-sizing:border-box}
.zk-options img{display:block;max-width:100%;height:auto}

/* ===== Block ===== */
.zk-block{margin:12px 0;background:#fff;box-shadow:var(--zk-shadow)}
.zk-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px var(--zk-s2);
  border-left:5px solid var(--zk-ac);
  background:#fff;border-bottom:1px solid var(--zk-line);
  height: auto;
}
@media (max-width:768px){
	div#wrapper header.zk-head {
		display: flex;
		height: auto;
		position: static;
		box-shadow: none;
		padding-left: 1em;
		padding-bottom: .5em;
		padding-right: .5em;
	}
	span.zk-meta {
		margin-top: .5em;
	}
	div#wrapper div#container section h3.zk-title {
		background: none;
		color: #333;
		padding: 0;
	}
}
.zk-meta{font-size:.78rem;color:#999;font-weight:800;letter-spacing:.02em}
.zk-title{margin:0;font-weight:800;font-size:clamp(16px,3.3vw,19px)}
.zk-badge{margin-left:auto;background:#ffebe6;color:#c0392b;font-weight:800;border-radius:999px;padding:.2em .6em}
.zk-price-badge{margin-left:auto;background:#fff4c4;border:1px solid #f4da7a;border-radius:6px;padding:.15em .5em;font-weight:800;white-space:nowrap}
.zk-price-badge em{font-style:normal;font-size:1.35em}

/* ===== Body / 回り込み ===== */
.zk-body{padding:8px var(--zk-s2) var(--zk-s2)}
/* モバイル：縦積み */
.zk-media{margin:0 0 8px}
.zk-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #eee}
.zk-text{display:block}
.zk-lead{margin:0}
.zk-list{margin:0;padding-left:1.05em}
.zk-list li{margin:.2em 0}

/* PC：画像は左フロート（20–30%）、テキストは右へ回り込み */
@media (min-width:680px){
  .zk-body{display:block} /* BFCを作らない */
  .zk-media{display:block !important; float:left !important; width:var(--zk-media-pc) !important;
            margin:0 var(--zk-s2) var(--zk-s1) 0 !important}
  .zk-text{display:block !important; overflow:visible !important}
  /* 下のブロックは必ず回り込み解除して全幅 */
  .zk-clear, .zk-price, .zk-simple, .zk-prodgrid{display:block !important; clear:both !important; float:none !important}
  /* 本体にもclearfix（後続が潜らない保険） */
  .zk-body::after{content:"";display:block;clear:both}
}

/* ===== Notes（控えめ） ===== */
.zk-notes{display:grid;gap:4px;margin:6px 0 0;font-size:.86rem;color:#666}
.zk-notes div{display:grid;grid-template-columns:auto 1fr;gap:.5em;background:#fff;border:1px dashed #e7e7ef;padding:4px 8px;border-radius:6px}
.zk-notes dt{align-self:start;font-weight:700;color:#8a8a99;font-size:.78rem;background:#f4f5fb;border:1px solid #ececf5;border-radius:4px;padding:0 .5em}

/* ===== Ribbon 見出し（価格例） ===== */
.zk-ribbon{
  position:relative;margin:10px 0 0;padding:9px 14px;font-size:1rem;font-weight:800;letter-spacing:.02em;
  color:#fff;background:linear-gradient(to bottom,var(--zk-ac),var(--zk-ac-d));box-shadow:inset 0 2px 0 rgba(255,255,255,.25)
}
.zk-ribbon::after{content:"";position:absolute;top:0;bottom:0;right:-16px;width:16px;background:linear-gradient(to bottom,var(--zk-ac),var(--zk-ac-d));clip-path:polygon(0 0,100% 50%,0 100%)}
.zk-ribbon small{font-weight:700;font-size:.85em;opacity:.85;margin-left:.25em}

/* ===== Price table（賞状印刷） ===== */
.zk-price{border:1px solid var(--zk-line);background:#fff;margin-top:0}
.zk-price-sub{margin:0;padding:8px 12px 6px;color:var(--zk-muted);font-size:.9rem;border-bottom:1px dashed var(--zk-line)}
.zk-price-grid{display:grid;gap:8px;padding:8px}
@media (min-width:560px){ .zk-price-grid{grid-template-columns:1fr 1fr} }
.zk-price-col{background:#fff;border:1px solid var(--zk-line)}
.zk-price-col-head{padding:8px 10px;border-bottom:1px solid var(--zk-line);background:#fafafa;height: auto;}
.zk-price-col-title{font-weight:800}
.zk-price-col-note{font-size:.86rem;color:#666}
.zk-price-rows{display:grid}
.zk-price-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 10px;border-top:1px dashed #ddd}
.zk-price-row:first-child{border-top:0}
.zk-price-row div:last-child{font-weight:800}
.zk-conditions{
	margin:0;padding:6px 10px 8px;color:#555;
	clear: both;
	padding-top: 10px;
}
.zk-conditions li {
	margin:.2em 0;
	position: relative;
	font-size: 12px;
}
.zk-conditions li:before {
	padding-left: 2em;
	position: absolute;
	content: "※";
	top: 0;
	left: -3em;
}

/* ===== Simple price（化粧箱・封筒・セット等） ===== */
.zk-simple{display:flex;align-items:center;gap:10px;margin-top:6px}
.zk-chip{display:inline-block;background:var(--zk-chip);border:1px solid #dde2ea;color:#405069;border-radius:999px;padding:.1em .6em;font-size:.85rem;font-weight:700}
.zk-yen{font-weight:800}
.zk-yen em{font-style:normal;font-size:1.2em}
.zk-note{color:#777;font-size:.9rem}

/* ===== Product mini cards（持ち帰り用セット） ===== */
.zk-prodgrid{display:grid!important;gap:10px;margin-top:8px}
@media (min-width:640px){ .zk-prodgrid{grid-template-columns:repeat(3,1fr)} }
.zk-prod{background:#fff;border:1px solid var(--zk-line)}
.zk-prod .zk-ph{padding:8px}
.zk-prod .zk-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #eee}
.zk-prod .zk-tx{padding:8px 10px}
.zk-colors{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.zk-color{display:inline-flex;align-items:center;gap:6px;border:1px solid #e6e6e6;border-radius:999px;padding:2px 8px}
.zk-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid #aaa}
.zk-dot--black{background:#111}.zk-dot--navy{background:#1f2a48}.zk-dot--green{background:#2a5b4a}.zk-dot--brown{background:#4b2d1a}

/* ===== CTA（必要なら） ===== */
.zk-cta{text-align:center;margin:8px 0 10px}
.zk-btn{display:inline-block;background:linear-gradient(to bottom,var(--zk-ac),var(--zk-ac-d));color:#fff;text-decoration:none;font-weight:800;border-radius:999px;padding:.5em .9em}


/* 30x30 の横並びサムネイル（衝突回避のため zk- 接頭辞） */
.zk-thumbs{
  --zk-thumb: 40px;               /* サイズ一括変更用 */
  display:flex; flex-wrap:wrap;
  align-items:center; gap:6px;
  margin:0; padding:0; list-style:none;
}
.zk-thumbs li{ display:block }
.zk-thumbs a{ display:block; border-radius:4px; outline:0 }
.zk-thumbs a:focus-visible{ box-shadow:0 0 0 2px rgba(0,0,0,.25) }

/* サムネイル本体：正方形でトリミング */
.zk-thumbs img{
  display:block;
  width:var(--zk-thumb); height:var(--zk-thumb);
  object-fit:cover;               /* 非正方形でも中心トリミング */
  border-radius:4px;              /* 角丸不要なら 0 に */
  background:#f2f3f5;             /* ロード中の下地 */
}

/* 折返しさせず横スクロールにする場合 */
.zk-thumbs--scroll{
  flex-wrap:nowrap; overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* ================================
   30x30 captioned thumbnails (wrap)
   ================================ */
.zk-thumbcap{
  /* 調整用カスタムプロパティ */
  --zk-thumb: 30px;           /* 画像サイズ */
  --zk-cell:  40px;           /* 各セルの横幅（キャプション含む） */
  --zk-gap-x: 10px;           /* 横の間隔 */
  --zk-gap-y: 10px;           /* 縦の間隔 */

  display:flex;
  flex-wrap:wrap;
  gap:var(--zk-gap-y) var(--zk-gap-x);
  margin:0; padding:0; list-style:none;
}

.zk-thumbcap li{ display:block }

.zk-thumbcap a{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:var(--zk-cell);
  text-decoration:none;
  color:inherit;
  outline:0;
}

.zk-thumbcap a:focus-visible{
  box-shadow:0 0 0 2px rgba(0,0,0,.25);
  border-radius:6px;
}

/* サムネイル画像（常に30x30に揃える） */
.zk-thumbcap img{
  display:block;
  width:var(--zk-thumb);
  height:var(--zk-thumb);
  object-fit:cover;
  border-radius:4px;          /* 角丸不要なら 0 */
  background:#f2f3f5;         /* ロード中の下地 */
}

/* キャプション：中央寄せ・2行まで表示（省略） */
.zk-thumbcap .zk-cap{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-align:center;
  line-height:1.2;
  font-size:12px;
  max-width:100%;
  word-break:break-word;
}

/* 画像の周囲を少しだけ広くしたい場合（任意） */
/*
.zk-thumbcap img{ padding:2px; border:1px solid #e5e7eb; background:#fff; }
*/