@charset "utf-8";
/* =========================================================
   2026冬 おうちごはん特集（ご家庭用・まとめ買い）/ec/campaign/2026winter/home/
   すべて .hm 配下に閉じて、サイト共通CSSと干渉しないようにしています
   ブレイクポイント：767px以下をSP
   ========================================================= */
.hm{
  --red:#e51513; --ink:#333; --gray:#8c8c8c; --beige:#f6ead5; --pink:#fff2f2; --mist:#f5f5f5; --line:#dbdbdb; --yellow:#fff330;
  --sans:"Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN",sans-serif;
  --w:1240px;
  color:var(--ink); font-family:var(--sans); font-weight:500; letter-spacing:.05em; line-height:1.6;
  -webkit-text-size-adjust:100%; overflow-x:clip;
}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}
.hm :where(p,div,td,li,dt,dd,section,figure,figcaption,ol,ul){font-family:inherit; font-size:inherit; line-height:inherit; color:inherit}
:where(.hm) img{max-width:100%; height:auto; vertical-align:bottom}
:where(.hm) :where(ul,ol){list-style:none; margin:0; padding:0}
:where(.hm) :where(p,h1,h2,h3,h4){margin:0}
:where(.hm) a{color:inherit; text-decoration:none}
:where(.hm) button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
.hm :focus-visible{outline:3px solid #1a73e8; outline-offset:2px}
.hm .pc{display:inline}
.hm-inner{max-width:calc(var(--w) + 40px); margin:0 auto; padding:0 20px}
.hm-sec{padding-bottom:100px; scroll-margin-top:120px}
.hm-sec--beige{background:var(--beige)}
.hm-sec--pink{background:var(--pink)}
.hm-sec--gray{background:var(--mist)}

/* ---------- ボタン・価格（贈答用と共通の考え方） ---------- */
.hm-btns{display:grid; gap:10px}
.hm-btns--row{grid-template-columns:repeat(2,minmax(0,300px)); gap:20px}
.hm-btn{position:relative; display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 40px; border-radius:30px; background:var(--red); color:#fff !important; font-size:16px; font-weight:700; transition:opacity .2s}
.hm-btn::after{content:""; position:absolute; right:22px; top:50%; width:7px; height:7px; border-top:2px solid #fff; border-right:2px solid #fff; transform:translateY(-50%) rotate(45deg)}
.hm-btn--detail{background:var(--ink)}
.hm-btn--wide{width:300px; max-width:100%}
.hm-btn:hover{opacity:.8}
.hm-price{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.hm-price__normal{color:var(--gray); font-size:14px; letter-spacing:0}
.hm-price__row{display:flex; align-items:center; gap:8px}
.hm-price__badge{width:36px; height:36px}
.hm-price__num{color:var(--red); font-size:30px; font-weight:700; letter-spacing:0; line-height:1.2; white-space:nowrap}
.hm-price__yen{font-size:14px}
.hm-price__tax{font-size:10px}
.hm-price__each{font-size:14px}
.hm-price--l .hm-price__badge{width:50px; height:50px}
.hm-price--l .hm-price__num{font-size:45px}
.hm-price--l .hm-price__yen{font-size:20px}
.hm-price--l .hm-price__tax{font-size:12px}
.hm-price--l .hm-price__normal{font-size:15px}
.hm-free span{display:inline-block; padding:1px 8px; border:1.5px solid var(--red); border-radius:4px; color:var(--red); font-size:12px; font-weight:700; letter-spacing:.1em}
.hm-price--l .hm-free span{font-size:16px}
.hm-otoku{display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:5px; background:var(--yellow); line-height:1.3; white-space:nowrap}
.hm-otoku__s{font-size:12px; font-weight:700}
.hm-otoku__l{color:var(--red); font-size:20px; font-weight:900; paint-order:stroke fill; -webkit-text-stroke:4px #fff}
.hm-otoku__l small{font-size:12px}
.hm-otoku--l{padding:8px 16px}
.hm-otoku{align-self:flex-start}
.hm-otoku--l .hm-otoku__s{font-size:16px}
.hm-otoku--l .hm-otoku__l{font-size:26px}
.hm-otoku--l .hm-otoku__l small{font-size:16px}
.hm-unit{color:var(--red); font-size:14px; font-weight:700}
.hm-catch{color:var(--red); font-size:16px; font-weight:700; line-height:1.6}
.hm-catch--s{font-size:13px}
.hm-desc{color:var(--gray); font-size:12px; line-height:1.5}
.hm-img{aspect-ratio:279/250; overflow:hidden; background:#e5e5e5}
.hm-img img{width:100%; height:100%; object-fit:cover}

/* ---------- 01 FV（自動スクロール） ---------- */
/* 3枚の後ろに同じ3枚を複製（home.jsで追加）して、半分の長さだけ流すと切れ目なくループします */
.hm-fv{--fv-w:830px; --fv-h:600px; --fv-gap:30px; --fv-speed:60s; position:relative; height:var(--fv-h); overflow:hidden; margin-top:50px}
.hm-fv__track{display:flex; gap:var(--fv-gap); width:max-content; height:100%; animation:hm-fv-scroll var(--fv-speed) linear infinite}
.hm-fv__slide{flex:none; width:var(--fv-w); height:var(--fv-h); border-radius:10px; overflow:hidden}
.hm-fv__slide img{width:100%; height:100%; object-fit:cover}
@keyframes hm-fv-scroll{from{transform:translateX(calc(var(--fv-gap) * -0.5))}to{transform:translateX(calc(-50% - var(--fv-gap) * 0.5))}}
.hm-fv__txt{position:absolute; left:max(20px,calc(50% - 620px)); bottom:54px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; z-index:2}
.hm-fv__sub{padding:0 20px; border-radius:5px; background:#fff; font-size:20px; font-weight:700; line-height:2}
.hm-fv__ttl{padding:0 20px; border-radius:5px; background:var(--red); color:#fff; font-size:44px; font-weight:900; line-height:2}

/* ---------- 02 特典 ---------- */
.hm-benefit{padding:100px 0}
.hm-nabe,.hm-nabe img{display:block; width:100%}
.hm-benefit__list{display:flex; justify-content:center; gap:50px; margin-top:50px}
.hm-benefit__list li{width:480px}
.hm-benefit__list picture,.hm-benefit__list img{display:block; width:100%}

/* ---------- 03 固定ナビ（共通ヘッダーの下に固定：PC 60px／770px以下 50px） ---------- */
.hm-nav-wrap{--hm-nav-top:60px; position:relative; z-index:4}
.hm-nav{position:relative; background:#fff; border-bottom:1px solid var(--line)}
.hm-nav.is-fixed{position:fixed; top:var(--hm-nav-top); left:0; right:0; box-shadow:0 2px 6px rgba(0,0,0,.08)}
.hm-nav__list{display:grid; grid-template-columns:repeat(4,1fr); max-width:calc(var(--w) + 40px); margin:0 auto; padding:0 20px}
.hm-nav__link{display:block; padding:18px 0 14px; border-bottom:4px solid transparent; font-size:17px; font-weight:700; text-align:center}
.hm-nav__link.is-current{border-bottom-color:var(--red); color:var(--red)}

/* ---------- 05 6選 ---------- */
.hm-sen6head{position:relative; max-width:calc(var(--w) + 40px); margin:0 auto; padding:90px 20px 50px; text-align:center}
.hm-sen6head__ttl img{width:734px}
.hm-sen6head__chara{position:absolute; left:calc(50% + 380px); top:40px; width:223px}
@media (max-width:1340px){.hm-sen6head__chara{left:auto; right:20px; width:170px}}
@media (max-width:1180px){.hm-sen6head__ttl img{width:min(734px,calc(100% - 420px))}}
.hm-sen6head__lead{margin-top:20px; font-size:18px}
.hm-feat{display:grid; grid-template-columns:460px 1fr; gap:50px; margin-bottom:40px; padding:50px; border-radius:10px; background:#fff}
.hm-feat--gray{background:var(--mist)}
.hm-feat__media{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.hm-feat__ribbon{width:327px}
.hm-feat__img{width:460px; aspect-ratio:1; overflow:hidden; background:#e5e5e5}
.hm-feat__img--wide{aspect-ratio:460/427}
.hm-feat__img img{width:100%; height:100%; object-fit:cover}
.hm-pill{padding:6px 20px 8px; border-radius:30px; background:var(--red); color:#fff; font-size:22px; font-weight:900}
.hm-pill--sq{border-radius:5px}
.hm-feat__body{display:flex; flex-direction:column; gap:24px; min-width:0}
.hm-feat__name{font-size:38px; font-weight:900; line-height:1.4}
.hm-feat__price{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px}
.hm-feat__price--col{flex-direction:column; align-items:flex-start; gap:10px}
.hm-stick{width:159px}
.hm-stick--s{width:113px}
.hm-contents{padding:20px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink)}
.hm-contents__ttl{margin-bottom:14px; color:var(--red); font-size:16px; font-weight:700}
.hm-dots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.hm-dots li{position:relative; padding-left:14px; font-size:14px; line-height:1.5}
.hm-dots li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--red)}
.hm-contents__thumbs{display:block; width:min(100%,431px); margin-top:14px}
.hm-tags{display:flex; flex-wrap:wrap; gap:8px}
.hm-tags li{padding:2px 10px; border:1.5px solid var(--red); border-radius:4px; color:var(--red); font-size:14px; font-weight:700}
.hm-sgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px}
.hm-scard{display:flex; flex-direction:column; border-radius:10px; overflow:hidden; background:#fff}
.hm-bar{padding:5px 10px; background:var(--red); color:#fff; font-size:16px; font-weight:900; text-align:center}
.hm-scard__in{display:flex; flex:1; flex-direction:column; gap:12px; padding:10px 10px 24px}
.hm-scard__name{font-size:20px; font-weight:900; line-height:1.4}
.hm-scard__price{display:flex; align-items:center; gap:5px}
.hm-scard__contents .hm-contents__ttl{margin-bottom:5px; font-size:14px}
.hm-scard__items{font-size:12px; line-height:1.5}
.hm-scard .hm-btns{margin-top:auto}
.hm-dots-nav{display:none}

/* ---------- KV（06〜08） ---------- */
.hm-kv{position:relative; height:480px; overflow:hidden}
.hm-kv__img,.hm-kv__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hm-kv__txt{position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; height:100%; max-width:calc(var(--w) + 40px); margin:0 auto; padding:0 20px}
.hm-kv__ttl{padding:0 20px; border-radius:5px; background:var(--red); color:#fff; font-size:44px; font-weight:900; line-height:2}
.hm-kv__sub{padding:4px 20px; border-radius:5px; background:#fff; font-size:20px; font-weight:700}
.hm-sec .hm-kv + .hm-inner{padding-top:60px}

/* ---------- 06〜08 ---------- */
.hm-kg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:40px}
.hm-kgcard{display:grid; grid-template-columns:250px 1fr; gap:24px; padding:20px; border-radius:10px; background:#fff}
.hm-kgcard .hm-img{aspect-ratio:1}
.hm-kgcard__body{display:flex; flex-direction:column; gap:10px}
.hm-kgcard__name{font-size:20px; font-weight:900; line-height:1.4}
.hm-subhead{margin:20px 0 40px; padding-left:18px; border-left:6px solid var(--red); font-size:28px; font-weight:900; line-height:1.4}
.hm-subhead:first-child{margin-top:0}
.hm-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 15px; margin-bottom:40px}
.hm-card{display:flex; flex-direction:column; gap:12px; padding:10px 10px 24px; border-radius:10px; background:#fff}
.hm-card--gray{background:var(--mist)}
.hm-card__name{min-height:2.8em; font-size:18px; font-weight:900; line-height:1.4}
.hm-card .hm-btns{margin-top:auto; padding-top:4px}
.hm-feat__body .hm-otoku{align-self:flex-start}
.hm-minis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.hm-mini{display:flex; flex-direction:column; gap:10px; padding:16px 16px 20px; border:1px solid var(--red); border-radius:10px; background:#fff}
.hm-mini__name{font-size:18px; font-weight:900; line-height:1.4}
.hm-mini__pack{align-self:flex-start; max-height:70px; width:auto}
.hm-mini .hm-btns{margin-top:auto}
.hm-textlink{align-self:flex-start; color:var(--red); font-size:16px; font-weight:700; text-decoration:underline !important}
.hm-more{display:none}

/* ---------- 09 送料 ---------- */
.hm-ship__ttl{padding:90px 20px 50px; font-size:30px; font-weight:900; text-align:center}
.hm-ship__list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.hm-ship__list li{display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px; border-radius:10px; background:#fff; text-align:center}
.hm-ship__pt{color:var(--red); font-size:14px; font-weight:700; letter-spacing:.1em}
.hm-ship__h{font-size:20px; font-weight:900; line-height:1.5}
.hm-ship__t{font-size:14px; font-weight:400; line-height:1.7}

/* ---------- 10 ギフト導線 ---------- */
.hm-giftlink{padding:80px 0 100px}
.hm-giftlink__card{display:grid; grid-template-columns:460px 1fr; gap:50px; align-items:center; padding:50px; border-radius:10px; background:#fff}
.hm-giftlink__img{aspect-ratio:460/304; overflow:hidden}
.hm-giftlink__img img{width:100%; height:100%; object-fit:cover}
.hm-giftlink__body{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.hm-giftlink__ttl{font-size:38px; font-weight:900}
.hm-giftlink__txt{font-weight:400}
.hm-giftlink__links{display:flex; flex-wrap:wrap; gap:12px}
.hm-giftlink__links a{display:flex; align-items:center; justify-content:center; width:200px; min-height:44px; border:2px solid var(--red); border-radius:30px; background:#fff; color:var(--red); font-size:15px; font-weight:700}

/* =========================================================
   SP
   ========================================================= */
@media (max-width:767px){
  .hm .pc{display:none}
  .hm-sec{padding-bottom:48px; scroll-margin-top:100px}
  .hm-btn{min-height:44px; padding:0 30px; font-size:15px}
  .hm-btns--row{grid-template-columns:1fr; gap:10px}
  .hm-btn--wide{width:100%}
  .hm-price__num{font-size:22px}
  .hm-price__yen{font-size:11px}
  .hm-price__tax{font-size:9px}
  .hm-price__badge{width:28px; height:28px}
  .hm-price__normal{font-size:11px}
  .hm-price--l .hm-price__num{font-size:30px}
  .hm-price--l .hm-price__yen{font-size:14px}
  .hm-price--l .hm-price__tax{font-size:10px}
  .hm-price--l .hm-price__badge{width:36px; height:36px}
  .hm-price--l .hm-price__normal{font-size:12px}
  .hm-free span,.hm-price--l .hm-free span{font-size:11px; padding:0 6px}
  .hm-otoku__s{font-size:11px}
  .hm-otoku__l{font-size:17px}
  .hm-otoku__l small{font-size:10px}
  .hm-otoku--l .hm-otoku__s{font-size:15px}
  .hm-otoku--l .hm-otoku__l{font-size:20px}
  .hm-otoku--l .hm-otoku__l small{font-size:12px}
  .hm-feat .hm-otoku--l{align-self:stretch; justify-content:center}
  .hm-feat__price--col{align-items:stretch}
  .hm-feat__price--col .hm-price{align-items:flex-start}
  .hm-card .hm-price__num{font-size:20px}
  .hm-card .hm-price__badge{width:24px; height:24px}
  .hm-card .hm-price__row{gap:4px}
  /* 2列カードでは2行に分ける（デザインどおり） */
  .hm-card .hm-otoku{flex-direction:column; align-items:flex-start; gap:0; padding:6px 8px}
  .hm-card .hm-otoku__s{font-size:10px}
  .hm-card .hm-otoku__l{font-size:15px}
  .hm-card .hm-otoku__l small{font-size:9px}
  .hm-catch{font-size:14px}
  .hm-catch--s{font-size:11px}
  .hm-desc{font-size:10px}
  .hm-unit{font-size:12px}

  /* スライダー共通 */
  .js-slider{display:flex !important; gap:12px; margin:0 -20px; padding:0 20px 4px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none}
  .js-slider::-webkit-scrollbar{display:none}
  .js-slider > li{flex:none; scroll-snap-align:start}
  .hm-dots-nav{display:flex; justify-content:center; gap:6px; margin-top:14px}
  .hm-dots-nav i{width:7px; height:7px; border-radius:50%; background:var(--line)}
  .hm-dots-nav i.is-active{background:var(--red)}

  /* FV */
  .hm-fv{--fv-w:315px; --fv-h:260px; --fv-gap:10px; --fv-speed:40s; height:260px; margin-top:16px; margin-bottom:24px}
  .hm-fv__txt{left:20px; bottom:14px; gap:6px}
  .hm-fv__sub{padding:3px 10px; font-size:13px; line-height:1.5}
  .hm-fv__ttl{padding:0 10px; font-size:26px; line-height:1.6}

  /* 特典 */
  .hm-benefit{padding:28px 0}
  .hm-benefit__list{flex-direction:column; gap:14px; margin-top:14px}
  .hm-benefit__list li{width:100%}

  /* ナビ */
  .hm-nav__list{padding:0}
  .hm-nav__link{padding:14px 0 11px; font-size:14px; border-bottom-width:3px}

  /* 6選 */
  .hm-sen6head{padding:40px 20px 20px; text-align:center}
  .hm-sen6head__ttl img{width:260px}
  .hm-sen6head__chara{position:static; display:block; width:140px; margin:16px auto 0}
  .hm-sen6head__lead{margin-top:16px; font-size:13px; line-height:1.7}
  .hm-feat{grid-template-columns:1fr; gap:16px; margin-bottom:20px; padding:24px 20px}
  .hm-feat__ribbon{width:240px}
  .hm-feat__img{width:100%}
  .hm-pill{padding:4px 14px 6px; font-size:16px}
  .hm-feat__body{gap:16px}
  .hm-feat__name{font-size:24px}
  .hm-feat__price{gap:10px}
  .hm-stick{width:110px}
  .hm-stick--s{width:90px}
  .hm-contents__ttl{font-size:14px}
  .hm-dots{grid-template-columns:1fr; gap:6px}
  .hm-dots li{font-size:12px}
  .hm-sgrid > li{width:280px}
  .hm-bar{font-size:14px}
  .hm-scard__name{font-size:17px}

  /* KV */
  .hm-kv{height:240px}
  .hm-kv__txt{justify-content:flex-end; gap:6px; padding:0 16px 16px}
  .hm-kv__ttl{padding:2px 12px 4px; font-size:22px; line-height:1.6}
  .hm-kv__sub{padding:3px 12px; font-size:12px}
  .hm-sec .hm-kv + .hm-inner{padding-top:24px}

  /* 06〜08 */
  .hm-kg{grid-template-columns:1fr; gap:20px; margin-bottom:20px}
  .hm-kgcard{grid-template-columns:1fr; gap:14px}
  .hm-kgcard__name{font-size:17px}
  .hm-subhead{margin:4px 0 20px; padding-left:12px; border-left-width:5px; font-size:20px}
  .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 11px; margin-bottom:20px}
  .hm-card{gap:8px; padding:8px 8px 12px}
  .hm-card__name{font-size:14px}
  .hm-card .hm-btn,.hm-mini .hm-btn{min-height:34px; padding:0 22px 0 8px; font-size:11px; letter-spacing:.02em}
  .hm-card .hm-btn::after{right:12px; width:6px; height:6px}
  .hm-card .hm-btns{gap:8px}
  .hm-grid--more:not(.is-open) > li:nth-child(n+5){display:none}
  .hm-more{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; margin-bottom:20px; border:1px solid var(--ink); border-radius:30px; background:#fff; font-size:14px; font-weight:700}
  .hm-more[hidden]{display:none}
  .hm-more::after{content:""; width:7px; height:7px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-2px) rotate(45deg)}
  .hm-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .hm-minis{grid-template-columns:1fr; gap:12px}
  .hm-mini .hm-btn{min-height:44px; font-size:15px}
  .hm-mini__name{font-size:16px}
  .hm-textlink{font-size:14px}

  /* 09 */
  .hm-ship__ttl{padding:40px 20px 16px; font-size:22px}
  .hm-ship__list > li{width:270px}
  .hm-ship__h{font-size:16px}
  .hm-ship__t{font-size:12px}

  /* 10 */
  .hm-giftlink{padding:40px 0 48px}
  .hm-giftlink__card{grid-template-columns:1fr; gap:16px; padding:20px}
  .hm-giftlink__body{gap:14px}
  .hm-giftlink__ttl{font-size:22px}
  .hm-giftlink__links{flex-direction:column; width:100%}
  .hm-giftlink__links a{width:100%}
}
@media (max-width:770px){
  .hm-nav-wrap{--hm-nav-top:50px}
}
@media (prefers-reduced-motion:reduce){
  .hm *{transition:none !important; scroll-behavior:auto !important}
  .hm-fv__track{animation:none}
}

/* カートポップアップ（ec/popup.tpl）の基本スタイル：2026summer/under.css より */
.c-popup {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: 0.6s;
}

.c-popup.is-show {
	opacity: 1;
	visibility: visible;
}

.c-popup__inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1200px;
	padding: 30px 0 0;
	background-color: #fff;
	z-index: 2;
	border-radius: 10px;
}

.c-popup__inner img {
	width: 100%;
}


.c-popup__close {
    position: relative;
	left: 47%;
    top: -25px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
@media screen and (max-width: 770px) {
	.c-popup__close {
		left: 43%;
		top: -28px;
		}
	}

.c-popup__close:before{
	content: "閉じる";
    font-size: 17px;
	font-weight: 500;
    position: absolute;
    right: 52%;
}
@media screen and (max-width: 770px) {
	.c-popup__close:before {
		right: 54%;
        top: 2px;
        font-size: 13px;
		}
	}

.c-popup__close span {
    display: block;
    width: 25px;
    height: 3px;
    background: #111111;
    margin: 0 0 5px;
    transition: 0.3s;
    position: absolute;
    top: 50%;
    left: 50%;
}
@media screen and (max-width: 770px) {
	.c-popup__close span {
		width: 18px;
		}
	}

.c-popup__close span:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.c-popup__close span:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.c-popup__content {
	max-height: 80vh;
	padding: 0 50px 50px;
	display: flex;
	gap: 50px;
}

@media screen and (max-width: 770px) {
	.c-popup__content {
		display: block;
		overflow-y: scroll;
		padding: 0 20px 50px;
	}
}

.c-popup__inner img {
	width: 100%;
	margin-top: 30px;
}

@media screen and (max-width: 770px) {
	.c-popup__inner img {
		margin-top: 20px;
	}
}

@media screen and (max-width: 770px) {
	.c-popup__content {
		display: block;
		overflow-y: scroll;
	}
}




.c-popup__background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1;
	cursor: pointer;
}