@charset "UTF-8";
/* CSS Document */
  /* ===== DADWAY コラム CTA再設計版  =====
     ・全クラスは dw- prefix で名前空間化（既存サイトへの埋め込み時の衝突回避）
     ・外部依存は Google Fonts のみ。iframe埋め込み可 / Vanilla JS
     ・商品URL・価格・画像は本番差し替え前提（data-placeholder で明示） */
  :root{
    --dw-ink:#2b2b30;          /* 本文 */
    --dw-ink-soft:#6a6a73;     /* 補足 */
    --dw-bg:#ffffff;
    --dw-bg-soft:#f7f6f3;      /* セクション背景 */
    --dw-line:#ece9e3;
    /* 暑さ対策＝涼感のクール系をテーマ色に、購買は温かみのコーラルで誘導 */
    --dw-cool:#009CDE;         /* クール（涼感・診断） */
    --dw-cool-dp:#1c87a0;
    --dw-cool-bg:#e8f6fa;
    --dw-buy:#ff7a5c;          /* 購買CTA（コーラル） */
    --dw-buy-dp:#f2613f;
    --dw-buy-bg:#fff0eb;
    --dw-radius:18px;
    --dw-radius-s:12px;
    --dw-shadow:0 8px 28px rgba(40,40,50,.10);
    --dw-shadow-s:0 3px 12px rgba(40,40,50,.08);
  }
  *{box-sizing:border-box}
  .dw-wrap{
    font-family:"Noto Sans JP",system-ui,sans-serif;
    color:var(--dw-ink);
    line-height:1.9;
    background:var(--dw-bg);
    max-width:760px;
    margin:0 auto;
    padding:0 18px 140px;
    font-size:15.5px;
    -webkit-font-smoothing:antialiased;
  }
  .dw-rounded{font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif;}

  /* パンくず */
  .dw-crumb{font-size:12px;color:var(--dw-ink-soft);padding:16px 0 0;letter-spacing:.02em}
  .dw-crumb a{color:var(--dw-ink-soft);text-decoration:none}

  /* 記事ヘッダ */
  .dw-eyebrow{font-family:"M PLUS Rounded 1c";font-weight:700;color:var(--dw-cool);letter-spacing:.14em;font-size:12px;margin:22px 0 6px}
  h1.dw-title{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:27px;line-height:1.45;margin:0 0 18px;letter-spacing:.01em}
  .dw-lead{font-size:15px;color:var(--dw-ink);background:var(--dw-bg-soft);border-radius:var(--dw-radius);padding:18px 20px;margin:0 0 14px}
  .dw-hero-img{width:100%;border-radius:var(--dw-radius);margin:6px 0 26px;display:block}

  h2.dw-h2{
    font-family:"M PLUS Rounded 1c";font-weight:800;font-size:20px;line-height:1.5;
    margin:46px 0 18px;padding:0 0 0 16px;position:relative;letter-spacing:.01em;
  }
  h2.dw-h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:6px;border-radius:6px;background:linear-gradient(180deg,var(--dw-cool),#7fd0e0)}
  h3.dw-h3{font-family:"M PLUS Rounded 1c";font-weight:700;font-size:16.5px;margin:32px 0 10px;color:#27414a}
  .dw-wrap p{margin:0 0 16px}
  .dw-wrap strong{font-weight:700;background:linear-gradient(transparent 60%,#ffe9b3 60%);padding:0 1px}

  /* ============ ①冒頭ソフトCTA ============ */
  .dw-softcta{
    display:flex;align-items:center;gap:14px;
    background:var(--dw-buy-bg);border:1px solid #ffd9cd;
    border-radius:var(--dw-radius);padding:14px 18px;margin:0 0 30px;
    text-decoration:none;color:var(--dw-ink);transition:.2s;
  }
  .dw-softcta:hover{transform:translateY(-2px);box-shadow:var(--dw-shadow-s)}
  .dw-softcta .ico{font-size:24px;line-height:1}
  .dw-softcta .tx{flex:1}
  .dw-softcta .tx b{font-family:"M PLUS Rounded 1c";font-weight:800;display:block;font-size:15px}
  .dw-softcta .tx span{font-size:12px;color:var(--dw-ink-soft)}
  .dw-softcta .arw{font-family:"M PLUS Rounded 1c";font-weight:800;color:var(--dw-buy-dp);white-space:nowrap;font-size:13px}

  /* ============ ③ 商品カード（EC購買UI） ============ */
  .dw-prodcard{
    display:flex;gap:16px;align-items:center;
    border:1px solid var(--dw-line);border-radius:var(--dw-radius);
    padding:14px;margin:22px 0;background:#fff;box-shadow:var(--dw-shadow-s);
  }
  .dw-prodcard .ph{width:120px;height:120px;flex:none;border-radius:var(--dw-radius-s);overflow:hidden;background:var(--dw-bg-soft)}
  .dw-prodcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .dw-prodcard .body{flex:1;min-width:0}
  .dw-prodcard .pick{display:inline-block;font-family:"M PLUS Rounded 1c";font-weight:700;font-size:11px;color:#fff;background:var(--dw-cool);padding:2px 9px;border-radius:20px;margin-bottom:7px}
  .dw-prodcard .nm{font-weight:700;font-size:14px;line-height:1.5;margin:0 0 6px}
  .dw-prodcard .why{font-size:12px;color:var(--dw-ink-soft);margin:0 0 10px;line-height:1.6}
  .dw-prodcard .price{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:17px;margin:0 0 10px}
  .dw-prodcard .price small{font-size:11px;font-weight:500;color:var(--dw-ink-soft)}
  .dw-prodcard .btns{display:flex;gap:8px;flex-wrap:wrap}
  .dw-btn{
    font-family:"M PLUS Rounded 1c";font-weight:700;text-decoration:none;
    border-radius:30px;padding:9px 16px;font-size:13px;text-align:center;transition:.18s;cursor:pointer;border:none;display:inline-block
  }
  .dw-btn-buy{background:var(--dw-buy);color:#fff}
  .dw-btn-buy:hover{background:var(--dw-buy-dp)}
  .dw-btn-ghost{background:#fff;color:var(--dw-cool-dp);border:1.5px solid var(--dw-cool)}
  .dw-btn-ghost:hover{background:var(--dw-cool-bg)}

  /* ============ ④ 中盤インライン診断カード ============ */
  .dw-quizinvite{
    border-radius:22px;padding:26px 22px;margin:34px 0;text-align:center;color:#fff;
    background:linear-gradient(135deg,#2aa7c4 0%,#37c0d4 55%,#6ad6c0 100%);
    box-shadow:0 12px 30px rgba(42,167,196,.30);position:relative;overflow:hidden
  }
  .dw-quizinvite::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12)}
  .dw-quizinvite .qe{font-family:"M PLUS Rounded 1c";font-weight:700;font-size:12px;letter-spacing:.1em;opacity:.95}
  .dw-quizinvite h3{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:21px;margin:6px 0 8px;color:#fff}
  .dw-quizinvite p{font-size:13px;margin:0 auto 18px;max-width:460px;opacity:.95}
  .dw-quizinvite button{
    font-family:"M PLUS Rounded 1c";font-weight:800;background:#fff;color:var(--dw-cool-dp);
    border:none;border-radius:40px;padding:14px 30px;font-size:16px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.16);transition:.2s
  }
  .dw-quizinvite button:hover{transform:translatey(-2px) scale(1.02)}

  /* ============ ⑤ 記事末コンバージョンブロック ============ */
  .dw-conv{background:var(--dw-bg-soft);border-radius:22px;padding:26px 22px;margin:48px 0 0}
  .dw-conv .bighead{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:18px;text-align:center;margin:0 0 4px}
  .dw-conv .sub{text-align:center;font-size:13px;color:var(--dw-ink-soft);margin:0 0 18px}
  .dw-conv .feat{display:block;text-decoration:none;border-radius:var(--dw-radius);overflow:hidden;box-shadow:var(--dw-shadow-s);margin:0 0 18px;background:#fff}
  .dw-conv .feat img{width:100%;display:block}
  .dw-conv .feat .bar{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--dw-buy);color:#fff;font-family:"M PLUS Rounded 1c";font-weight:800;padding:13px;font-size:15px}
  .dw-navgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
  .dw-navgrid a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dw-ink);background:#fff;border:1px solid var(--dw-line);border-radius:var(--dw-radius-s);padding:13px 14px;font-weight:700;font-size:13.5px;transition:.18s}
  .dw-navgrid a:hover{border-color:var(--dw-cool);background:var(--dw-cool-bg)}
  .dw-navgrid a .e{font-size:20px}
  .dw-related{border-top:1px solid var(--dw-line);padding-top:18px}
  .dw-related .lbl{font-family:"M PLUS Rounded 1c";font-weight:700;font-size:13px;color:var(--dw-ink-soft);margin:0 0 10px}
  .dw-related a{display:block;text-decoration:none;color:var(--dw-cool-dp);font-weight:700;font-size:13.5px;padding:7px 0;border-bottom:1px dashed var(--dw-line)}
  .dw-related a::before{content:"›  ";color:var(--dw-cool)}

  /* ============ ② 追従型 診断ボタン ============ */
  .dw-float{
    position:fixed;right:18px;bottom:10%;z-index:60;
    display:flex;align-items:center;gap:10px;cursor:pointer;
    background:linear-gradient(135deg,#2aa7c4,#37c0d4);color:#fff;
    border:none;border-radius:50px;padding:13px 20px 13px 16px;
    font-family:"M PLUS Rounded 1c";font-weight:800;font-size:14.5px;
    box-shadow:0 10px 26px rgba(42,167,196,.45);
    transform:translateY(140%);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s,box-shadow .2s;
    animation:dw-breath 2.6s ease-in-out infinite;
  }
  .dw-float.show{transform:translateY(0);opacity:1}
  .dw-float:hover{box-shadow:0 14px 32px rgba(42,167,196,.6)}
  .dw-float .fi{font-size:22px;line-height:1}
  .dw-float .ft small{display:block;font-weight:700;font-size:10px;opacity:.9;letter-spacing:.04em}
  .dw-float .close{position:absolute;top:-9px;right:-6px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--dw-cool-dp);border:none;font-size:13px;font-weight:800;cursor:pointer;box-shadow:var(--dw-shadow-s);line-height:1}
  @keyframes dw-breath{0%,100%{box-shadow:0 10px 26px rgba(42,167,196,.45)}50%{box-shadow:0 10px 30px rgba(42,167,196,.7)}}
  @media (prefers-reduced-motion:reduce){.dw-float{animation:none}}
@media(min-width:600px){ .dw-float{bottom:21%;}}

  /* ============ 診断モーダル ============ */
  .dw-modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center}
  .dw-modal.open{display:flex}
  .dw-modal .veil{position:absolute;inset:0;background:rgba(30,34,38,.55);backdrop-filter:blur(2px);animation:dw-fade .25s ease}
  .dw-sheet{
    position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
    background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);
    animation:dw-up .35s cubic-bezier(.2,.8,.2,1);padding:0 0 24px;
  }
  @media(min-width:600px){.dw-modal{align-items:center}.dw-sheet{border-radius:24px;animation:dw-pop .3s ease}}
  @keyframes dw-fade{from{opacity:0}to{opacity:1}}
  @keyframes dw-up{from{transform:translateY(60px);opacity:.4}to{transform:translateY(0);opacity:1}}
  @keyframes dw-pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
  .dw-shead{position:sticky;top:0;background:#fff;padding:20px 22px 12px;border-bottom:1px solid var(--dw-line);z-index:2}
  .dw-shead .x{position:absolute;right:16px;top:16px;width:30px;height:30px;border:none;background:var(--dw-bg-soft);border-radius:50%;font-size:16px;cursor:pointer;color:var(--dw-ink-soft)}
  .dw-shead .qe{font-family:"M PLUS Rounded 1c";font-weight:700;color:var(--dw-cool);font-size:11px;letter-spacing:.1em}
  .dw-shead h3{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:18px;margin:4px 30px 10px 0}
  .dw-prog{height:6px;background:var(--dw-line);border-radius:6px;overflow:hidden}
  .dw-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--dw-cool),#6ad6c0);width:0;transition:width .35s ease}
  .dw-sbody{padding:22px}
  .dw-qtext{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:18px;margin:0 0 18px;line-height:1.55}
  .dw-opts{display:flex;flex-direction:column;gap:11px}
  .dw-opt{display:flex;align-items:center;gap:13px;text-align:left;background:#fff;border:1.5px solid var(--dw-line);border-radius:16px;padding:15px 16px;font-family:"Noto Sans JP";font-weight:700;font-size:14.5px;cursor:pointer;transition:.16s;color:var(--dw-ink)}
  .dw-opt:hover{border-color:var(--dw-cool);background:var(--dw-cool-bg);transform:translateX(2px)}
  .dw-opt .oe{font-size:24px;flex:none}
  .dw-back{margin-top:16px;background:none;border:none;color:var(--dw-ink-soft);font-size:13px;cursor:pointer;font-weight:700}
  .dw-back:disabled{opacity:0;cursor:default}

  /* 結果 */
  .dw-result{padding:22px;text-align:center}
  .dw-result .rtag{font-family:"M PLUS Rounded 1c";font-weight:700;color:var(--dw-cool);font-size:12px;letter-spacing:.08em}
  .dw-result .rlead{font-family:"M PLUS Rounded 1c";font-weight:700;color:var(--dw-ink-soft);font-size:12.5px;margin:0 0 2px}
  .dw-result .rname{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:23px;margin:6px 0 12px;line-height:1.4}
  .dw-result .rwhy{font-size:13.5px;color:var(--dw-ink);background:var(--dw-cool-bg);border-radius:16px;padding:15px 16px;text-align:left;margin:0 0 20px;line-height:1.8}
  .dw-result .rprod{display:flex;gap:14px;align-items:center;border:1px solid var(--dw-line);border-radius:18px;padding:14px;text-align:left;box-shadow:var(--dw-shadow-s);margin:0 0 14px}
  .dw-result .rprod .ph{width:96px;height:96px;flex:none;border-radius:12px;overflow:hidden;background:var(--dw-bg-soft)}
  .dw-result .rprod .ph img{width:100%;height:100%;object-fit:cover}
  .dw-result .rprod .nm{font-weight:700;font-size:13.5px;line-height:1.5;margin:0 0 6px}
  .dw-result .rprod .price{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:16px}
  .dw-result .rprod .price small{font-size:10px;font-weight:500;color:var(--dw-ink-soft)}
  .dw-result .rcta{display:block;font-family:"M PLUS Rounded 1c";font-weight:800;background:var(--dw-buy);color:#fff;text-decoration:none;border-radius:40px;padding:16px;font-size:16px;margin:0 0 10px;transition:.2s}
  .dw-result .rcta:hover{background:var(--dw-buy-dp)}
  .dw-result .rsub{display:block;text-decoration:none;color:var(--dw-cool-dp);font-weight:700;font-size:13px;margin:0 0 6px}
  .dw-result .rredo{background:none;border:none;color:var(--dw-ink-soft);font-size:12.5px;cursor:pointer;font-weight:700;margin-top:6px}

  .dw-note{font-size:11px;color:var(--dw-ink-soft);margin-top:18px;line-height:1.7;border-top:1px dashed var(--dw-line);padding-top:12px}