@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap');

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    :root {
      --green:        #3CB96A;
      --green-line:   #B8E8CA;
      --pink:         #E0006A;
      --pink-pale:    #FFE8F3;
      --yellow-pale:  #FFF8D6;
      --bg:           #fff;
      --bg-page:      #ffaccd;
      --text:         #231815;
      --text-sub:     #231815;
      --radius:       12px;
      --shadow:       0 2px 10px rgba(60,185,106,.12);
      --shadow-hover: 0 6px 20px rgba(60,185,106,.22);
    }
 
    /*---------------------------------------- 共通 */
 
    #news main .content-main {
      background-color: #ffaccd;
      padding-bottom: 50px;
    }
 
    #news .post-content a {
      text-decoration: none;
    }
 
    #news .post-content div,
    #news .post-content p {
      font-family: 'Comfortaa','Zen Maru Gothic','ヒラギノ角ゴ Pro W3','Noto Sans JP',sans-serif;
    }
 
    .wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 16px 64px;
    }
 
    /* ===== Hero ===== */
    #news .hero {
      margin-bottom: 28px;
    }
    .hero img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0 0 var(--radius) var(--radius);
    }
 
    /* ===== Lead ===== */
    .lead {
      margin: 30px auto 40px;
      width: fit-content;
      padding: 0 25px;
      color: var(--text-sub);
    }
    .lead p {
      color: var(--text-sub);
      text-align: left;
    }
 
    /* ===== Section heading ===== */
    .sec-head {
      margin: 60px 0 20px;
      text-align: center;
    }
    .sec-head-badge {
      display: inline-block;
      font-size: clamp(20px, 4.5vw, 36px);
      font-weight: 700;
      color: var(--pink);
      letter-spacing: .05em;
      background: #fff326;
      padding: 24px 32px 10px;
      border-radius: 999px;
      line-height: 0.75em;
      border: 0px solid #fff326;
    }
    .sec-head-badge span {
      font-size: 0.5em;
    }
 
    /* ===== Grid ===== */
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 11px;
      max-width: 900px;
      width: 94%;
      margin: 15px 2.8%;
    }
    @media (min-width: 580px) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
 
    /* ===== Card ===== */
    .card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      background: var(--bg);
      border: 2px solid #fff326;
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      transition: border-color .25s ease;
    }
    .card:hover {
      border-color: var(--green);
    }

    /* Badge */
    .card .badge {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 1;
      background: var(--green);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      padding: 3px 10px;
      border-radius: 999px;
    }
 
    /* Image */
    .card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
      background: #edf8f1;
      transition: transform .4s ease;
    }
    .card:hover img {
      transform: scale(1.05);
    }
 
    /* Body */
    .card .body {
      padding: 10px 12px 0;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .card .name {
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.5;
      margin-bottom: 8px;
      flex: 1;
    }
 
    /* Price box */
    .card .price-box {
      background: var(--pink-pale);
      margin: 0 -12px;
      padding: 7px 12px 9px;
      text-align: right;
      border-radius: 0 0 calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px);
    }
    .card .orig {
      font-size: 11px;
      color: var(--text-sub);
      text-decoration: line-through;
    }
    .card .sale {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 3px;
    }
    .card .price {
      font-size: 26px;
      font-weight: 900;
      color: var(--pink);
      line-height: 1;
    }
    .card .price small {
      font-size: 12px;
      font-weight: 700;
    }
    .card .unit {
      font-size: 11px;
      color: var(--text-sub);
    }
 
    /* ===== And more ===== */
    .more {
      text-align: center;
      margin: 70px 0 0;
    }
    .more-badge {
      display: inline-block;
      font-size: clamp(22px, 6vw, 36px);
      font-weight: 900;
      color: var(--pink);
      letter-spacing: .08em;
      background: var(--pink-pale);
      padding: 10px 32px;
      border-radius: 999px;
    }
    .more-text {
      font-size: 13px;
      color: var(--text-sub);
      line-height: 1.8;
      padding-top: 18px;
    }
 
    /* ===== Campaign banner ===== */
    .campaign {
      border-radius: var(--radius);
      overflow: hidden;
      max-width: 900px;
      width: 94%;
      margin: 40px 2.8%;
    }
    .campaign .lead{
      margin: 20px auto 20px;
      padding: 0;
    }
    .campaign img {
      width: 100%;
      height: auto;
      display: block;
    }
    .campaign-btn-wrap {
      background: var(--pink-pale);
      text-align: center;
      padding: 16px 24px 20px;
    }
    .camp-copy {
      font-weight: 700;
      color: var(--pink);
      margin-bottom: 12px;
    }
    .camp-copy em {
      font-size: 18px;
      font-style: normal;
    }
    .post-content .camp-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--green);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 17px 40px;
      border-radius: 999px;
      text-decoration: none;
      letter-spacing: .05em;
      transition: opacity .2s;
    }
    .post-content .camp-btn::after {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-top: 2.5px solid #fff;
      border-right: 2.5px solid #fff;
      transform: rotate(45deg);
      flex-shrink: 0;
    }
    .post-content .camp-btn:hover {
      opacity: .8;
    }

 
    /* ===== Campaign banner grid ===== */
    .campaign-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin: 40px 2.8% 0;
    }
    .campaign-grid a {
      display: block;
      border-radius: var(--radius);
      overflow: hidden;
    }
    .campaign-grid img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
      transition: opacity .2s;
    }
    .campaign-grid a:hover img {
      opacity: .85;
    }
 
    /*====================== mb ======================*/
    @media screen and (max-width: 768px) {
      body .box-white,
      body .post-content { padding: 0; }
      body .group { padding: 0 0 80px; }
      body main > .title_area,
      body .group::before,
      body .inner > header,
      body .inner dl.periodText { display: none !important; }
      body .group .inner { width: 100%; }
      body .post-content p,
      body .post-content h2,
      body .post-content h3 { margin: 0; }
      #news main .pc { display: none !important; }
      #news main .sp { display: block !important; }
      .content-main img { width: 100%; height: auto; vertical-align: top; }
      #news main .content img.img-responsive { width: 100%; height: auto; vertical-align: top; }
    }
 
    /*====================== pc ======================*/
    @media print, screen and (min-width: 769px) {
      body header.title_area,
      body .group:nth-of-type(2n-1)::before { display: none !important; }
      body .group,
      body .box-white,
      body .post-content { padding: 0; }
      body .inner { max-width: 960px; width: 100%; }
      body .inner > header,
      body .inner dl.periodText { display: none !important; }
      body .post-content p,
      body .post-content h2,
      body .post-content h3 { margin: 0; }
      #news main div.image { text-align: center; }
      #news main .content-topic { margin: 0 auto; padding-top: 68px; padding-bottom: 100px; }
      #news main .pc { display: block !important; }
      #news main .sp { display: none !important; }
    }
 
    @media (max-width: 400px) {
      .card .name  { font-size: 12px; }
      .card .price { font-size: 19px; }
    }