:root{
      --red:#e60012;
      --red-dark:#b8000e;
      --navy:#1c1c1c;      /* 基調のブラック */
      --yellow:#cfa14f;    /* ゴールドアクセント */
      --gold-light:#f2e6cd;
      --bg:#fbf6ed;        /* クリーム地 */
      --line:#e8dcc4;
    }
    *{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;background:var(--bg);color:#000;line-height:1.7;}
    img{max-width:100%;}
  
    /* header (site mock) */
    .site-header{background:#fff;border-bottom:3px solid var(--red);padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
    .logo{font-weight:800;font-size:20px;color:var(--red);letter-spacing:.05em;}
    .logo small{display:block;font-size:10px;color:#000;font-weight:400;letter-spacing:0;}
    .header-tel{margin-left:auto;text-align:right;font-size:12px;color:#000;}
    .header-tel b{font-size:18px;color:var(--navy);}
    .breadcrumb{font-size:11px;color:#000;padding:8px 16px;max-width:1000px;margin:0 auto;}
  
    .wrap{max-width:1000px;margin:0 auto;padding:0 16px 60px;}
  
    /* MV */
    .mv{margin-top:8px;}
    .mv svg{display:block;width:100%;height:auto;border-radius:16px;}
  
    /* hero */
    .hero{background:linear-gradient(135deg,var(--navy) 0%,#2d4a7a 100%);border-radius:16px;color:#fff;text-align:center;padding:48px 24px 40px;position:relative;overflow:hidden;}
    .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,217,0,.12);}
    .hero::before{width:300px;height:300px;top:-120px;left:-80px;}
    .hero::after{width:220px;height:220px;bottom:-100px;right:-60px;}
    .hero .brand{display:inline-block;background:#fff;color:var(--navy);font-weight:800;padding:4px 18px;border-radius:999px;font-size:14px;letter-spacing:.2em;margin-bottom:16px;}
    .hero h1{font-size:clamp(24px,5vw,42px);font-weight:900;line-height:1.35;}
    .hero h1 .free{color:var(--yellow);font-size:clamp(36px,7.5vw,64px);display:inline-block;}
    .hero p.sub{margin-top:12px;font-size:14px;opacity:.9;}
    .period{display:inline-block;margin-top:24px;background:var(--yellow);color:var(--navy);font-weight:800;font-size:clamp(15px,3vw,20px);padding:10px 28px;border-radius:8px;position:relative;z-index:1;}
  
    /* lead */
    .lead{background:#fff;border-radius:12px;padding:28px 24px;margin-top:24px;font-size:15px;}
    .lead b{color:var(--red);}
  
    /* section titles */
    .sec-title{margin:48px 0 8px;text-align:center;}
    .sec-title .en{color:var(--red);font-size:12px;font-weight:700;letter-spacing:.25em;}
    .sec-title h2{font-size:clamp(20px,4vw,28px);color:var(--navy);font-weight:800;}
    .sec-title .bar{width:56px;height:4px;background:var(--red);margin:10px auto 0;border-radius:2px;}
  
    /* product switch buttons (tabs) */
    .ptabs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0 8px;}
    .ptab{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 10px;cursor:pointer;text-align:center;font-family:inherit;transition:border-color .15s, background .15s;position:relative;}
    .ptab .thumb{margin-bottom:10px;}
    .ptab .tname{font-size:14px;font-weight:800;color:#000;line-height:1.4;}
    .ptab:hover{border-color:var(--yellow);}
    .ptab.active{border-color:var(--red);background:#fff2ee;}
    .ptab.active::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);border:10px solid transparent;border-top-color:var(--red);border-bottom:none;}
    @media (max-width:640px){.ptabs{grid-template-columns:repeat(2,1fr);}}
    .ptabs-bottom{margin-top:16px;}
    .ptabs-bottom .ptab.active::after{display:none;}
    .ptabs-wrap{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
    .ptabs-label{text-align:center;font-size:14px;font-weight:800;color:var(--navy);}
    .product{display:none;}
    .product.show{display:block;}
  
    /* product card */
    .product{background:#fff;border-radius:14px;border:1px solid var(--line);margin-top:28px;overflow:hidden;scroll-margin-top:16px;}
    .product-head{background:var(--navy);color:#fff;padding:14px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
    .product-head .maker{background:var(--yellow);color:var(--navy);font-size:11px;font-weight:800;padding:2px 10px;border-radius:4px;}
    .product-head h3{font-size:18px;font-weight:800;}
    .product-head .minlot{margin-left:auto;font-size:12px;background:rgba(255,255,255,.15);padding:3px 10px;border-radius:4px;}
    .product-body{padding:20px;}
    .pen-visual{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
    .pen-thumb{flex:0 0 96px;height:96px;border-radius:10px;background:#f1ede6;display:flex;align-items:center;justify-content:center;font-size:10px;color:#000;text-align:center;border:1px dashed #d6cebf;}
    .pen-copy{font-size:13px;color:#000;}
    .pen-intro{font-size:14px;color:#000;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line);}
    .price-label{font-size:15px;font-weight:800;color:var(--navy);margin:24px 0 10px;padding:20px 0 0 12px;border-top:1px solid var(--line);position:relative;}
    .price-label::before{content:"";position:absolute;left:0;bottom:2px;width:4px;height:18px;background:var(--red);border-radius:2px;}
  
    /* spotlight (Calme-style price appeal) */
    .spot{display:flex;gap:28px;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;}
    .spot-img{flex:0 0 260px;}
    .spot-main{flex:1;min-width:260px;}
    .spot-title{color:var(--red);font-weight:800;font-size:15px;border-bottom:2px solid var(--red);display:inline-block;padding-bottom:2px;margin-bottom:14px;}
    .tag{display:inline-block;font-size:11px;font-weight:800;color:#fff;padding:3px 12px;border-radius:3px;margin-bottom:4px;}
    .tag-normal{background:#555;}
    .tag-cp{background:var(--red);}
    .spot-price-normal{font-size:15px;color:#000;margin-bottom:8px;}
    .spot-price-normal .strike{text-decoration:line-through;font-weight:700;}
    .spot-arrow{color:var(--red);font-size:20px;margin:2px 0 6px;}
    .spot-price-cp{font-size:15px;margin-bottom:14px;}
    .spot-price-cp .big{color:var(--red);font-size:32px;font-weight:900;}
    .spot-unit{font-size:13px;color:#000;}
    .otoku{display:inline-block;border:2px solid var(--red);border-radius:8px;padding:8px 28px;font-weight:800;font-size:16px;color:#000;background:#fff;}
    .otoku b{color:var(--red);font-size:22px;}
    .spot-minlot{font-size:12px;color:#000;margin-top:10px;}
  
    /* per-product CTA (split by tip size) */
    .product-cta{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-top:22px;}
    .product-cta a{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:14px;padding:10px 32px;border-radius:999px;text-decoration:none;box-shadow:0 3px 0 var(--red-dark);}
    .product-cta a:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--red-dark);}
  
    table{width:100%;border-collapse:collapse;font-size:14px;}
    thead th{background:var(--gold-light);color:var(--navy);font-size:12px;padding:10px 8px;border:1px solid var(--line);}
    tbody td{padding:9px 8px;border:1px solid var(--line);text-align:right;white-space:nowrap;background:#fff;}
    tbody td.lot{text-align:center;font-weight:700;color:var(--navy);background:#faf4e4;}
    .before{color:#000;}
    .after{color:var(--red);font-weight:800;font-size:15px;}
    .save{color:#0a8a4a;font-weight:700;font-size:12px;}
    .table-note{font-size:11px;color:#000;margin-top:8px;}
  
    /* notes */
    .notes{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin-top:28px;}
    .notes h3{color:var(--navy);font-size:16px;margin-bottom:10px;border-left:4px solid var(--red);padding-left:10px;}
    .notes ul{list-style:none;font-size:13px;color:#000;}
    .notes li{padding-left:1.2em;position:relative;margin-bottom:6px;}
    .notes li::before{content:"※";position:absolute;left:0;color:var(--red);}
    .notes dl{font-size:14px;}
    .notes dt{font-weight:800;color:#000;margin-top:14px;}
    .notes dd{color:#000;font-size:13px;}
  
    /* flow */
    .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:20px;}
    .step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 14px;text-align:center;}
    .step .num{color:var(--red);font-weight:800;font-size:12px;letter-spacing:.15em;}
    .step h4{color:var(--navy);font-size:15px;margin:4px 0 6px;}
    .step p{font-size:12px;color:#000;text-align:left;}
  
    /* cta */
    .cta{margin-top:40px;text-align:center;background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);border-radius:16px;padding:36px 20px;color:#fff;}
    .cta p{font-weight:700;margin-bottom:16px;}
    .cta a{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:900;font-size:18px;padding:14px 48px;border-radius:999px;text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.2);}
    .cta a:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.2);}
    .cta .small{font-size:11px;opacity:.85;margin-top:12px;}
  
    footer{background:var(--navy);color:#fff;text-align:center;font-size:11px;padding:20px;margin-top:60px;}
    .mock-ribbon{position:fixed;top:12px;right:-42px;background:#333;color:#fff;font-size:11px;font-weight:700;padding:4px 48px;transform:rotate(35deg);z-index:99;opacity:.85;}

    /* 関連リンク（2x2グリッド）のCSS */
.related-links {
    margin: 40px 0;
}
.related-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}
.related-links-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: #ffffff;
    border: 2px solid #1c1c1c;
    border-radius: 6px;
    color: #1c1c1c;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-size: 15px;
}
.related-links-grid a:hover {
    background: #1c1c1c;
    color: #ffffff;
}

@media (max-width: 600px) {
    .related-links-grid {
        grid-template-columns: 1fr;
    }
}