/* はがきデザイン比較 */
.ndc,.ndc-ask{--ndc-shu:#c41e2d;--ndc-shu-pale:#fbecec;--ndc-gold:#b8923f;--ndc-gold-pale:#f7efdd;--ndc-ink:#2b2622;--ndc-sub:#6b625b;--ndc-line:#eadfd5;margin:1.5em 0;color:var(--ndc-ink)}
.ndc *,.ndc-ask *{box-sizing:border-box}
.ndc button,.ndc-ask button{font-family:inherit;line-height:1.5;letter-spacing:normal;text-transform:none;box-shadow:none;min-height:0}
.ndc button.ndc-tab{font-size:15px}
.ndc button.ndc-chip,.ndc-ask .ndc-ask-ex button{font-size:13px}
.ndc button.ndc-more,.ndc-ask button.ndc-ask-go{font-size:15px}
.ndc button:focus-visible,.ndc-ask button:focus-visible,.ndc-ask textarea:focus-visible,.ndc a:focus-visible{outline:3px solid var(--ndc-gold);outline-offset:2px}

.ndc-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--ndc-line);margin:0 0 10px}
.ndc-tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 12px;font-weight:700;color:var(--ndc-sub);cursor:pointer}
.ndc-tab[aria-selected="true"]{color:var(--ndc-shu);border-bottom-color:var(--ndc-shu)}
.ndc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.ndc-chips-label{font-size:13px;color:var(--ndc-sub);margin-right:4px}
.ndc-chip{border:1px solid var(--ndc-line);background:#fff;color:var(--ndc-ink);border-radius:999px;padding:3px 12px;font-size:13px;cursor:pointer}
.ndc-chip[aria-pressed="true"]{background:var(--ndc-gold-pale);border-color:var(--ndc-gold);font-weight:700}
.ndc-count{font-size:13px;color:var(--ndc-sub);margin:0 0 10px}

.ndc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 16px;align-items:stretch;margin:0}
.ndc-card{margin:0;display:flex;flex-direction:column}
.ndc-card[hidden]{display:none}
.ndc-thumb{background:var(--ndc-gold-pale);border-radius:4px;height:240px;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.ndc-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 2px 6px rgba(0,0,0,.15);margin:0}
.ndc-noimg{flex-direction:column;gap:6px;text-align:center;background:#fff;border:2px solid var(--ndc-shu);padding:16px}
.ndc-noimg-co{font-size:13px;color:var(--ndc-shu);font-weight:700}
.ndc-noimg-name{font-size:16px;font-weight:700;line-height:1.4}
.ndc-credit{font-size:11px;color:var(--ndc-sub);margin:4px 0 0}
.ndc-meta{padding:8px 2px 0;display:flex;flex-direction:column;flex:1 1 auto}
.ndc-meta p{margin:0}
.ndc-co{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--ndc-sub)}
.ndc-pr{font-size:10px;border:1px solid var(--ndc-sub);border-radius:3px;padding:0 4px;line-height:1.5}
.ndc .ndc-name,.ndc-ask .ndc-name{font-size:15px;font-weight:700;line-height:1.4;margin:2px 0 4px;padding:0;border:0;background:none}
.ndc .ndc-name::before,.ndc .ndc-name::after,.ndc-ask .ndc-name::before,.ndc-ask .ndc-name::after{display:none}
.ndc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px!important}
.ndc-tags span{font-size:11px;background:var(--ndc-shu-pale);color:var(--ndc-shu);border-radius:3px;padding:0 6px;line-height:1.7}
.ndc-who{font-size:12px;color:var(--ndc-sub);margin:0 0 4px!important}
.ndc-price{font-size:13px}
.ndc-price b{font-size:15px}
.ndc-price small{font-size:11px;color:var(--ndc-sub);white-space:nowrap}
/* 同じページに一覧がいくつもあるときは、注意書きを最初の一覧にだけ出す */
.ndc~.ndc .ndc-note{display:none}
.ndc-comment{font-size:13px;color:var(--ndc-sub);line-height:1.65;margin:6px 0 8px!important}
.ndc-meta .ndc-link{margin-top:auto;padding-top:6px}
.ndc-link a{font-size:14px;font-weight:700;color:var(--ndc-shu)}
.ndc-reason{font-size:13px;border-left:3px solid var(--ndc-gold);background:#fff;padding:4px 8px;margin:6px 0!important}

.ndc-more-wrap{text-align:center;margin:18px 0 0}
.ndc-more{background:#fff;border:2px solid var(--ndc-shu);color:var(--ndc-shu);border-radius:999px;padding:8px 28px;font-weight:700;cursor:pointer}
.ndc-note,.ndc-ask-privacy{font-size:12px;color:var(--ndc-sub);margin:14px 0 0}
.ndc-empty-filter{font-size:14px;color:var(--ndc-sub)}

.ndc-ask{border:2px solid var(--ndc-shu);background:var(--ndc-shu-pale);border-radius:12px;padding:16px}
.ndc-ask-label{display:block;font-size:18px;font-weight:700;margin-bottom:2px}
.ndc-ask-lead{font-size:14px;margin:0 0 8px}
.ndc-ask-row{display:flex;flex-wrap:wrap;gap:8px}
.ndc-ask textarea{flex:1 1 280px;min-height:60px;border:1px solid var(--ndc-line);border-radius:8px;padding:8px 10px;font:inherit;background:#fff;color:var(--ndc-ink)}
.ndc-ask-go{background:var(--ndc-shu);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-weight:700;cursor:pointer}
.ndc-ask-ex{font-size:13px;color:var(--ndc-sub);margin:8px 0 0}
.ndc-ask-ex button{background:none;border:0;color:var(--ndc-shu);text-decoration:underline;cursor:pointer;padding:0 4px}
.ndc-ask-status{font-size:13px;color:var(--ndc-sub);margin:8px 0}
.ndc-ask-out:empty{display:none}

@media (max-width:560px){
  .ndc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .ndc-thumb{height:180px;padding:8px}
  .ndc-comment{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
}

/* 案内役のお気に入り（0.15.0） */
.ndc-fav{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#fdecef;color:#b3264a;font-size:11px;font-weight:700;vertical-align:middle;white-space:nowrap}

/* わたしのお気に入り（0.17.0） */
.ndc-card{position:relative}
.ndc-heart{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.94);color:#8a8a8a;font-size:20px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .12s ease}
.ndc-heart:hover,.ndc-heart:focus-visible{transform:scale(1.1);color:#b3264a;outline:2px solid #b3264a;outline-offset:1px}
.ndc-heart[aria-pressed="true"]{color:#b3264a;border-color:#b3264a;background:#fff}
#ndc-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:9995;max-width:92vw;padding:10px 18px;border-radius:6px;background:#1d2327;color:#fff;font-size:14px;line-height:1.6;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#ndc-toast.is-on{opacity:1;transform:translate(-50%,0)}
.ndc-my-count{font-weight:700;margin:0 0 12px}
.ndc-my-empty{background:var(--ndc-gold-pale,#faf6ea);border-radius:6px;padding:14px 18px;margin:0 0 16px}
.ndc-my-empty p{margin:0 0 6px}
.ndc-my-head{font-weight:700;margin:0 0 6px}
.ndc-my-cotable{overflow-x:auto;margin:0 0 18px}
.ndc-my-cotable table{width:100%;border-collapse:collapse;font-size:14px}
.ndc-my-cotable th,.ndc-my-cotable td{border:1px solid #e2ddd0;padding:8px 10px;text-align:left;vertical-align:top}
.ndc-my-cotable thead th{background:var(--ndc-gold-pale,#faf6ea);white-space:nowrap}
.ndc-my-actions{margin:16px 0 0;text-align:right}
.ndc-my-clear{background:none;border:0;color:#646970;text-decoration:underline;cursor:pointer;font-size:13px;padding:4px}
@media (prefers-reduced-motion:reduce){.ndc-heart,#ndc-toast{transition:none}}

/* わたしのお気に入り：見出しの画像に枚数を重ねる・横4枚・会社ごとの表は下（0.17.2） */
.ndc.ndc-my{max-width:1120px;margin-left:auto;margin-right:auto;container-type:inline-size}
.ndc-my .ndc-my-hero{position:relative;margin:0 0 16px}
.ndc-my .ndc-my-hero img{display:block;width:100%;height:auto;border-radius:6px;margin:0}
.ndc-my .ndc-my-count{text-align:center;margin:0 0 12px}
.ndc-my .ndc-my-count b{font-weight:700}
.ndc-my .ndc-my-count i{font-style:normal;color:#b3264a}
/* 画像の中、説明の1行の下に重ねる（文字の大きさは、画像の幅に合わせて変わる） */
.ndc-my.has-banner .ndc-my-count{position:absolute;left:6.2%;top:71%;margin:0;text-align:left;white-space:nowrap;line-height:1.3;color:#6b625b;font-weight:400;letter-spacing:normal;font-size:15px;font-size:clamp(11px,2.05cqw,24px)}
.ndc-my.has-banner .ndc-my-count b{color:#b3264a;font-size:1.25em}
/* カード：横に4枚。足りない段は中央に寄せる。余白は詰める */
.ndc-my .ndc-my-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 12px;margin:0}
.ndc-my .ndc-my-grid .ndc-card{flex:0 0 calc((100% - 12px)/2);max-width:calc((100% - 12px)/2);min-width:0}
.ndc-my .ndc-my-grid .ndc-card .ndc-name,.ndc-my .ndc-my-grid .ndc-card .ndc-comment{overflow-wrap:anywhere}
.ndc-my .ndc-my-grid .ndc-thumb{height:210px;padding:8px}
.ndc-my .ndc-my-grid .ndc-heart{top:6px;right:6px;width:34px;height:34px;font-size:18px}
/* 会社ごとの表：カードの下に、小さな枠で出す */
.ndc-my .ndc-my-co{max-width:620px;margin:26px auto 0;border:1px solid #e2ddd0;border-radius:8px;background:#fff;padding:10px 14px 14px}
.ndc-my .ndc-my-head{text-align:center;font-weight:700;font-size:14px;margin:0 0 8px}
.ndc-my .ndc-my-cotable{margin:0;overflow-x:auto}
.ndc-my .ndc-my-cotable table{width:100%!important;margin:0!important;font-size:13px}
.ndc-my .ndc-my-cotable th,.ndc-my .ndc-my-cotable td{padding:6px 8px}
.ndc-my .ndc-my-empty{max-width:760px;margin-left:auto;margin-right:auto}
.ndc-my .ndc-my-actions{text-align:center}
@container (min-width:480px){.ndc-my .ndc-my-grid .ndc-card{flex-basis:calc((100% - 24px)/3);max-width:calc((100% - 24px)/3)}}
@container (min-width:640px){.ndc-my .ndc-my-grid .ndc-card{flex-basis:calc((100% - 36px)/4);max-width:calc((100% - 36px)/4)}}
/* 画像が小さくなる幅では、枚数は画像の下に出す（重ねると読めないため） */
@container (max-width:519px){.ndc-my.has-banner .ndc-my-count{position:static;text-align:center;white-space:normal;font-size:14px;margin:8px 0 0}}
@supports not (container-type:inline-size){
  @media (min-width:600px){.ndc-my .ndc-my-grid .ndc-card{flex-basis:calc((100% - 24px)/3);max-width:calc((100% - 24px)/3)}}
  @media (min-width:900px){.ndc-my .ndc-my-grid .ndc-card{flex-basis:calc((100% - 36px)/4);max-width:calc((100% - 36px)/4)}}
  @media (max-width:599px){.ndc-my.has-banner .ndc-my-count{position:static;text-align:center;white-space:normal;margin:8px 0 0}}
}

/* わたしのお気に入り：絵柄を見比べる場所なので、タグ・紹介文・賀詞・向いている人は出さない（0.17.3） */
.ndc-my .ndc-my-grid .ndc-tags,.ndc-my .ndc-my-grid .ndc-comment,.ndc-my .ndc-my-grid .ndc-who,.ndc-my .ndc-my-grid .ndc-credit{display:none}
.ndc-my .ndc-my-grid .ndc-thumb{height:230px}
.ndc-my .ndc-my-grid .ndc-name{font-size:14px;line-height:1.5;margin:2px 0 4px}
.ndc-my .ndc-my-grid .ndc-price{font-size:12px}
.ndc-my .ndc-my-grid .ndc-link{margin-top:6px}
/* 0.19.2：スマホでは「会社ごとに見ると」の表を、会社ごとの箱に組み替える（列が多くて、文字が縦に折れるため） */
@media (max-width:599px){
  .ndc-my .ndc-my-cotable{overflow-x:visible}
  .ndc-my .ndc-my-cotable table,.ndc-my .ndc-my-cotable tbody,.ndc-my .ndc-my-cotable tr,.ndc-my .ndc-my-cotable th,.ndc-my .ndc-my-cotable td{display:block;width:auto!important;border:0}
  .ndc-my .ndc-my-cotable thead{display:none}
  .ndc-my .ndc-my-cotable tr{border:1px solid #e2ddd0;border-radius:6px;margin:0 0 10px;overflow:hidden;background:#fff}
  .ndc-my .ndc-my-cotable tbody th{background:var(--ndc-gold-pale,#faf6ea);padding:8px 10px;font-size:14px;text-align:left;white-space:normal}
  .ndc-my .ndc-my-cotable td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 10px;border-top:1px solid #f0ece0;font-size:13px;text-align:right}
  .ndc-my .ndc-my-cotable td::before{content:attr(data-label);flex:0 0 auto;max-width:60%;text-align:left;color:var(--ndc-sub,#6b625b);font-size:12px}
}