/* ===== nyansのこだわり／Matatabi（W2 Page/OurCraft_Matatabi.aspx 移植・自己完結） =====
   移植元は W2 のカスタムページ1枚に閉じた <style>（:root の --kd-* トークン＋ .kd-* クラス）。
   親ページ（ourcraft）と同じ設計なので、クラス名・デザイン値はそのまま使う。
   ecforce 向けに変えたのは次の3点だけ:
     1. W2 固有セレクタ（#tblLayout / .global-contents__inner / .c-breadcrumb）を除去
     2. ecforce 標準の幅制約（.p-page_content__inner max-width:720px と .p-page_content の padding）を解除
     3. 画像パスを {{ file_root_path }}/ourcraft-matatabi-images/ 配下へ */

/* ---------- ecforce のページ幅制約を解除 ---------- */
.p-page_content__inner:has(> .kd),
.p-page_content__inner.nyans-kd-parent {
  max-width: none;
  width: 100%;
}
.p-page_content:has(.kd),
.p-page_content.nyans-kd-parent-outer {
  padding-left: 0;
  padding-right: 0;
}
/* 見出しは theme_customize が h1-h6 に メイリオ を !important で当てるため上書きが必要 */
.kd, .kd h1, .kd h2, .kd h3, .kd p, .kd a, .kd span, .kd div {
  font-family: var(--kd-ff) !important;
}

body,
:root{
  --kd-maxw:1040px;--kd-text:#2f363a;--kd-muted:#495055;--kd-sub:#666;--kd-light:#999;
  --kd-bg:#fff;--kd-cream:#faf8f5;--kd-warm:#f5f0eb;--kd-line:#e8e4df;
  --kd-accent:#f07a7a;--kd-tc:#e0846d;--kd-gold:#c89f6d;
  --kd-r:10px;--kd-rl:16px;
  --kd-ff:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --kd-fe:"Playfair Display",serif;
}
.kd *,.kd *::before,.kd *::after{box-sizing:border-box}
.kd{max-width:var(--kd-maxw);margin:0 auto;font-family:var(--kd-ff);color:var(--kd-text);line-height:1.9;letter-spacing:.04em;background:var(--kd-bg);-webkit-font-smoothing:antialiased}
.kd img{max-width:100%;height:auto;display:block}
.kd a{color:inherit;text-decoration:none;transition:opacity .25s}
.kd a:hover{opacity:.8}

.kd-bc{padding:12px 24px;font-size:12px;color:var(--kd-light);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.kd-bc a{color:var(--kd-muted);text-decoration:underline}

/* Hero image */
.kd-hero-img{width:100%;overflow:hidden}
.kd-hero-img img{width:100%;display:block;object-fit:cover;aspect-ratio:4/3}

/* Title block */
.kd-title{padding:56px 24px 48px;text-align:center;background:linear-gradient(180deg,var(--kd-cream),var(--kd-bg))}
.kd-title__en{font-family:var(--kd-fe);font-style:italic;font-size:13px;color:var(--kd-gold);letter-spacing:.1em}
.kd-title__main{font-size:24px;font-weight:700;line-height:1.75;letter-spacing:.06em;margin:16px 0 0}
.kd-title__sub{font-size:15px;line-height:2;color:var(--kd-sub);margin:20px auto 0;max-width:600px}

/* Sections */
.kd-sec{padding:72px 24px}
.kd-sec--cream{background:var(--kd-cream)}
.kd-sec--warm{background:var(--kd-warm)}
.kd-inner{max-width:720px;margin:0 auto}
.kd-center{text-align:center}

/* Typography */
.kd-en{font-family:var(--kd-fe);font-style:italic;font-size:13px;color:var(--kd-gold);letter-spacing:.1em}
.kd-h2{font-size:24px;font-weight:700;line-height:1.65;letter-spacing:.05em;margin:14px 0 0}
.kd-h3{font-size:18px;font-weight:700;line-height:1.6;margin:0}
.kd-h4{font-size:16px;font-weight:700;line-height:1.6}
.kd-body{font-size:15px;line-height:2.1;color:var(--kd-sub)}
.kd-lead{font-size:17px;line-height:2.1;color:var(--kd-sub)}
.kd-small{font-size:12px;color:var(--kd-light)}
.kd-em{font-style:normal;background:linear-gradient(transparent 60%,rgba(224,132,109,.18) 60%)}
.kd-divider{width:40px;height:2px;background:var(--kd-tc);margin:20px auto}

/* Blockquote */
.kd-bq{
  padding:28px 24px;background:var(--kd-cream);border-left:3px solid var(--kd-tc);
  border-radius:0 var(--kd-r) var(--kd-r) 0;
  font-size:16px;font-weight:700;line-height:1.85;letter-spacing:.04em;margin-top:28px;
}

/* Two column */
.kd-2col{display:grid;grid-template-columns:1fr;gap:28px;margin-top:36px;align-items:center}
.kd-2col__img{width:100%;border-radius:var(--kd-rl);aspect-ratio:4/3;object-fit:cover}

/* Feature cards */
.kd-fc{
  background:var(--kd-bg);border:1px solid var(--kd-line);border-radius:var(--kd-rl);
  padding:32px 24px;margin-top:24px;transition:box-shadow .3s;
}
.kd-fc:hover{box-shadow:0 6px 24px rgba(0,0,0,.05)}
.kd-fc:first-of-type{margin-top:40px}
.kd-fc__num{font-family:var(--kd-fe);font-size:14px;color:var(--kd-gold);letter-spacing:.1em}
.kd-fc__title{font-size:18px;font-weight:700;line-height:1.6;margin-top:8px}
.kd-fc__body{font-size:15px;line-height:2;color:var(--kd-sub);margin-top:12px}
.kd-fc__img{width:100%;border-radius:var(--kd-r);margin-top:16px}
.kd-fc--accent{border-left:3px solid var(--kd-tc)}

/* Steps */
.kd-steps{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
.kd-step{display:flex;gap:18px;align-items:flex-start;background:var(--kd-bg);border:1px solid var(--kd-line);border-radius:var(--kd-rl);padding:24px 20px}
.kd-step__num{flex-shrink:0;font-family:var(--kd-fe);font-size:28px;color:var(--kd-tc);line-height:1;width:44px;text-align:center}
.kd-step__body{flex:1}
.kd-step__title{font-size:16px;font-weight:700;line-height:1.6}
.kd-step__desc{font-size:14px;color:var(--kd-sub);line-height:1.9;margin-top:6px}

/* Highlight box (商品案内) */
.kd-hl{
  background:linear-gradient(135deg,#fffaf7,#fff5f0);border:2px solid var(--kd-tc);
  border-radius:var(--kd-rl);padding:40px 24px;margin-top:40px;
}
.kd-hl__badge{
  display:inline-block;background:var(--kd-tc);color:#fff;
  font-size:12px;font-weight:700;padding:4px 16px;border-radius:100px;letter-spacing:.06em;
}
.kd-hl__title{font-size:22px;font-weight:700;line-height:1.6;margin-top:16px}
.kd-hl__body{font-size:15px;line-height:2;color:var(--kd-sub);margin-top:12px}
.kd-hl__list{list-style:none;padding:0;margin:20px 0 0}
.kd-hl__list li{position:relative;padding-left:28px;margin-bottom:10px;font-size:15px;line-height:1.8}
.kd-hl__list li::before{content:"\2713";position:absolute;left:0;color:var(--kd-tc);font-weight:700}

/* FAQ */
.kd-faq{margin-top:32px}
.kd-faq__item{border-bottom:1px solid var(--kd-line);padding:24px 0}
.kd-faq__item:first-child{border-top:1px solid var(--kd-line)}
.kd-faq__q{font-size:15px;font-weight:700;line-height:1.7;display:flex;gap:12px;align-items:flex-start}
.kd-faq__q::before{
  content:"Q";flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;background:var(--kd-tc);color:#fff;
  font-family:var(--kd-fe);font-size:14px;font-weight:700;border-radius:50%;
}
.kd-faq__a{font-size:14px;line-height:2;color:var(--kd-sub);margin-top:12px;padding-left:40px}

/* CTA */
.kd-cta{padding:72px 24px;text-align:center;background:linear-gradient(180deg,var(--kd-bg),var(--kd-cream))}
.kd-btn{
  display:inline-block;background:var(--kd-tc);color:#fff;
  font-size:15px;font-weight:700;padding:18px 48px;border-radius:100px;
  letter-spacing:.08em;transition:opacity .3s;margin-top:24px;
}
.kd-btn:hover{opacity:.85;color:#fff}
.kd-btn--ghost{background:transparent;color:var(--kd-tc);border:2px solid var(--kd-tc)}
.kd-btn--ghost:hover{background:var(--kd-tc);color:#fff}

/* Product cards */
.kd-prods{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
.kd-prod{
  display:block;background:var(--kd-bg);border:1px solid var(--kd-line);
  border-radius:var(--kd-rl);overflow:hidden;text-align:center;transition:box-shadow .3s;
}
.kd-prod:hover{opacity:1;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.kd-prod__img{width:100%;aspect-ratio:1/1;object-fit:cover}
.kd-prod__body{padding:16px 12px}
.kd-prod__name{font-size:14px;font-weight:700}
.kd-prod__price{font-size:14px;color:var(--kd-tc);font-weight:700;margin-top:4px}

/* Read more cards */
.kd-read{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
.kd-read__item{display:block;background:var(--kd-bg);border:1px solid var(--kd-line);border-radius:var(--kd-rl);padding:24px 20px;transition:box-shadow .3s,transform .3s}
.kd-read__item:hover{opacity:1;box-shadow:0 6px 24px rgba(0,0,0,.06);transform:translateY(-2px)}
.kd-read__en{font-family:var(--kd-fe);font-style:italic;font-size:11px;color:var(--kd-gold);letter-spacing:.1em}
.kd-read__title{font-size:15px;font-weight:700;line-height:1.6;margin-top:6px}
.kd-read__desc{font-size:13px;color:var(--kd-sub);line-height:1.8;margin-top:8px}

/* === PC === */
@media(min-width:861px){
  .kd-hero-img img{aspect-ratio:21/9}
  .kd-title{padding:72px 48px 64px}
  .kd-title__main{font-size:36px}
  .kd-sec{padding:100px 48px}
  .kd-h2{font-size:30px}
  .kd-lead{font-size:18px}
  .kd-2col{grid-template-columns:1fr 1fr;gap:48px}
  .kd-fc{padding:40px 36px}
  .kd-hl{padding:56px 48px}
  .kd-steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .kd-step{flex-direction:column;text-align:center}
  .kd-step__num{width:auto}
  .kd-prods{max-width:360px;margin-left:auto;margin-right:auto}
  .kd-read{grid-template-columns:1fr 1fr;gap:20px}
  .kd-cta{padding:100px 48px}
}
@media(max-width:600px){
  .kd-btn{display:block;padding:18px 24px;text-align:center}
}