/* Karuzip ダウンロードカード（設計 D 案・card_variant="d1"）。
   markup の正本は scripts/download-card-markup.mjs。形式頁の右欄（.kdc--side）と
   記事の導線（.kdc--inline）で共用する。色は design/karuzip-ui の値（Brand #2B6FD6 /
   Deep #225BB0 / Ink #1D2632 / ink2 #4A5564 / line #E6EBF1 / tint line #CFE0F7）。
   説明文は ink2（#4A5564）。旧カードの灰色（#8893A3・#A8B2C0）は白地で 4.5:1 を満たさない。 */
.kdc{container-type:inline-size;box-sizing:border-box;border:1px solid #CFE0F7;border-radius:14px;background:#fff;color:#1D2632;overflow:hidden;font-family:"Zen Kaku Gothic New","Yu Gothic UI","Noto Sans JP",sans-serif;line-height:1.5;text-align:left}
.kdc *,.kdc *::before,.kdc *::after{box-sizing:border-box}
.kdc p{margin:0;padding:0}
.kdc-i,.kdc__facts li::before,.kdc__pc::before,.kdc__store::before{content:"";display:inline-block;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain}
.kdc-i--download{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E")}
.kdc-i--send{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E")}
.kdc__facts li::before,.kdc-i--check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")}
.kdc__pc::before,.kdc-i--pc{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M12 16v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M12 16v4'/%3E%3C/svg%3E")}
.kdc__store::before,.kdc-i--store{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
.kdc .kdc__main{display:flex;flex-direction:column;gap:14px;padding:20px}
.kdc .kdc__head{display:flex;align-items:center;gap:12px}
.kdc img.kdc__mark{display:block;flex:none;width:40px;height:40px;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.kdc .kdc__title{color:#1D2632;font-size:16.5px;font-weight:700;line-height:1.45}
.kdc .kdc__sub{display:block;margin-top:2px;color:#4A5564;font-size:12.5px}
.kdc .kdc__lead{margin-top:4px;color:#4A5564;font-size:13.5px;line-height:1.7}
/* 記事側の a{text-decoration:underline}（:not() 付きで詳細度が高い）に負けないよう、ボタンだけ !important。 */
.kdc .kdc__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:62px;margin:0;padding:8px 16px;border:0;border-radius:12px;background:#2B6FD6;color:#fff;font:inherit;text-align:center;text-decoration:none!important;opacity:1;cursor:pointer;box-shadow:0 5px 14px rgba(43,111,214,.24);transition:background .15s,transform .15s}
.kdc .kdc__btn:hover{background:#225BB0;color:#fff;transform:translateY(-1px)}
.kdc .kdc__btn:active{background:#225BB0;transform:none}
.kdc .kdc__btn:focus-visible,.kdc a.kdc__store:focus-visible,.kdc a.kdc__tools:focus-visible{outline:3px solid rgba(43,111,214,.34);outline-offset:3px}
.kdc .kdc__btn-main{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px;font-weight:700;line-height:1.4;text-decoration:none}
.kdc .kdc__btn-sub{color:#fff;font-size:12px;font-weight:500;line-height:1.4;text-decoration:none}
.kdc ul.kdc__facts{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;color:#4A5564;font-size:13px;line-height:1.5}
.kdc ul.kdc__facts>li{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;color:#4A5564;font-size:13px;line-height:1.5}
.kdc ul.kdc__facts>li::before{position:static;width:14px;height:14px;margin:0;border:0;border-radius:0;background:#138A62}
.kdc a.kdc__store{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-top:1px solid #E6EBF1;background:#FAFBFC;color:#225BB0;font-size:13px;text-decoration:none}
.kdc a.kdc__store:hover{color:#225BB0;text-decoration:underline}
.kdc a.kdc__store::before{width:15px;height:15px}
.kdc .kdc__pc,.kdc .kdc__mobile{display:none}

/* 記事の導線: 標識 | 見出し・事実 | 取得ボタン。カードの幅が 680px 未満（記事の本文幅など）では
   取得ボタンを下段の全幅へ回す（ビューポートではなくカード自身の幅で切り替える）。 */
.kdc--inline{margin:28px 0}
/* カードの直後に残す補足（Store のレビュー導線・要望の窓口）。 */
.kdc-note{margin:-14px 0 28px;color:#4A5564;font-size:13px;line-height:1.7}
.kdc-note .sub{margin:0;padding:0;color:#4A5564;font-size:12.5px;text-align:left}
.kdc-note+.kdc-note,.kdc-note+p.kdc-note{margin-top:-22px}
.kdc--inline .kdc__main{display:grid;grid-template-columns:48px minmax(0,1fr) 248px;align-items:center;gap:18px;padding:24px 28px}
.kdc--inline img.kdc__mark{width:48px;height:48px}
.kdc--inline .kdc__title{font-size:18px}
.kdc--inline ul.kdc__facts{flex-direction:row;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.kdc--inline a.kdc__store{padding:10px 28px}
@container (max-width:680px){
  .kdc--inline .kdc__main{grid-template-columns:48px minmax(0,1fr);gap:14px 16px;padding:22px 24px}
  .kdc--inline .kdc__main>.kdc__btn{grid-column:1/-1}
  .kdc--inline .kdc__title{font-size:17px}
  .kdc--inline a.kdc__store{padding:10px 24px}
}

/* ≤720px: Karuzip は PC 専用。取得ボタンと Store を外し、PC 専用の注記と持ち帰りに替える。 */
@media(max-width:720px){
  .kdc.kdc--desktop-only{display:none}
  .kdc .kdc__main,.kdc--inline .kdc__main{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px 20px 14px}
  .kdc--inline .kdc__main>img.kdc__mark{display:none}
  .kdc--inline .kdc__title{font-size:16.5px}
  .kdc--inline ul.kdc__facts{flex-direction:column;gap:6px;margin-top:10px}
  .kdc .kdc__main>.kdc__btn,.kdc a.kdc__store{display:none}
  .kdc .kdc__pc{display:flex;gap:10px;margin:0 20px;padding:11px 13px;border:1px solid #CFE0F7;border-radius:10px;background:#F2F7FE;color:#4A5564;font-size:13px;line-height:1.6}
  .kdc .kdc__pc::before{width:20px;height:20px;margin-top:1px;background:#2B6FD6}
  .kdc .kdc__pc b{color:#1D2632}
  .kdc .kdc__mobile{display:flex;flex-direction:column;gap:6px;padding:14px 20px 16px}
  .kdc a.kdc__tools{display:flex;align-items:center;justify-content:center;min-height:44px;color:#225BB0;font-size:14px;text-decoration:none}
  .kdc a.kdc__tools:hover{text-decoration:underline}
}
@media(prefers-reduced-motion:reduce){
  .kdc .kdc__btn{transition:none}
  .kdc .kdc__btn:hover{transform:none}
}

/* /kaiketsu の下載区（generate-kaiketsu.mjs の .kzp-dl__card）にも D 案の 2 行ボタンと持ち帰り主導を当てる。 */
.kzp-dl__card[data-card-variant]{border-color:#CFE0F7}
.kzp-btn.kzp-btn--2line{flex-direction:column;gap:2px;height:auto;min-height:62px;padding:8px 26px;line-height:1.35}
.kzp-btn--2line .kzp-btn__main{display:flex;align-items:center;gap:8px}
.kzp-btn--2line .kzp-btn__sub{font-size:12px;font-weight:500}
.kzp-dl__tools{display:flex;align-items:center;justify-content:center;min-height:44px;color:#225BB0;font-size:14px;text-decoration:none}
.kzp-dl__tools:hover{text-decoration:underline}