@charset "utf-8";

/*------------  coupon  ------------*/

#coupon { box-sizing: border-box; margin: 0 auto; padding: 30px 3% 35px; max-width: 1120px; }
.coupon-inner { position: relative; background: #fff; border-radius: 20px; overflow: hidden; }

.main { padding: 11px 3%; background: #08205b; font-family: 'Noto Sans JP', sans-serif; font-size: 26px; font-weight: 900; line-height: 1.2; color: #fff; text-align: center; }
.brand { position: absolute; top: 14px; left: 14px; width: 100px; height: 100px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 3px rgba(0,0,0,0.3); }
.brand img { width: 100%; }

.coupon-block { padding: 0 6%; }

.menu { display: flex; align-items: center; flex-direction: column; padding: 26px 0; }
.menu .pic { width: 220px; }
.menu .pic img { width: 100%; }
.menu .txt { padding: 20px 0 0; text-align: center; -webkit-font-feature-settings:'palt' 1; font-feature-settings:'palt' 1; letter-spacing:.03em; }
.menu .txt .name { padding: 0 0 12px; font-family: 'Noto Sans JP', sans-serif; font-size: 26px; font-weight: 900; line-height: 1.3; }
.menu .txt .name2 { padding: 10px 0 12px; font-family: 'Noto Sans JP', sans-serif; font-size: 26px; font-weight: 900; line-height: 1.3; }
.menu .txt .price { padding: 0 0 12px; font-size: 22px; font-weight: bold; color: #f00000; line-height: 1.3; }
.menu .txt .time { font-size: 16px; line-height: 1.3; }

.qr-block { margin: 0 auto; text-align: center; }
.qr-code { display: inline-block; padding: 30px 50px; border: 1px solid #0b9ece; text-align: center; border-radius: 16px; }
.qr-code .qr { margin: 0 auto; width: 180px; }
.qr-code .qr img { width: 100%; }
.qr-code .txt { padding: 10px 0 0; font-size: 14px; }

.lead { margin: 0 auto; padding: 40px 5% 35px; border-bottom: 1px solid #ddd; line-height: 1.4; text-align: center; }
.lead .brand_logo { margin: 0 auto 25px; width: 180px; }
.lead .title { padding: 0 0 12px; font-family: 'Noto Sans JP', sans-serif; font-size: 24px; font-weight: 900; -webkit-font-feature-settings:'palt' 1; font-feature-settings:'palt' 1; letter-spacing:.03em; }
.lead .note { font-size: 14px; }
.lead .expiry { padding: 2px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700; color: #d00; }
.lead .expiry strong { font-size: 24px; font-weight: 900; }

.view-block { margin: 0 auto; padding: 40px 3% 0; border-bottom: 1px solid #ddd; }
.view { padding: 0 0 45px; line-height: 1.3; text-align: center; }
.view .bnr { margin: 0 auto; padding: 0 0 10px; max-width: 560px; }
.view .txt { font-family: 'Noto Sans JP', sans-serif; font-size: 22px; font-weight: 900; }
.view .valid { padding: 4px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 700; }
.view .note { padding: 7px 0 0; font-size: 13px; line-height: 1.4; }
.view .point { margin: 0 auto; max-width: 560px; }

.summary { padding: 30px 0 50px; }
.summary .item { padding: 0 0 16px; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.4; }
.summary .txt { font-size: 14px; line-height: 1.5; }
.summary .txt em { color: #d00; }
.summary .group { padding: 0 0 6px; margin: 0 1.4em; list-style-type: inherit; }

.btn-back { margin: 0 auto; padding: 0 0 50px; width: 320px; }
.btn-back a { display: block; height: 60px; background: url('/images/campaign/btn_back.png') no-repeat center #057eb0; background-size: 140px 18px; border-radius: 30px; text-indent: -9999px; overflow: hidden; }





@media screen and (max-width: 740px) {

  #coupon { padding: 15px 3% 22px; }
  .coupon-inner { border-radius: 12px; }

  .main { padding: 8px 3%; font-size: 16px; }
  .brand { top: 9px; left: 9px; width: 52px; height: 52px; border-radius: 6px; }

  .coupon-block { padding: 0 3%; }

  .menu { padding: 20px 0; }
  .menu .pic { width: 160px; }
  .menu .txt { padding: 11px 0 0; }
  .menu .txt .name { padding: 0 0 6px; font-size: 19px; }
  .menu .txt .price { padding: 0 0 6px; font-size: 14px; }
  .menu .txt .time { font-size: 13px; }

  .qr-block { margin: 0 auto; text-align: center; }
  .qr-code .qr { width: 150px; }
  .qr-code { padding: 16px 22px; border-radius: 8px; }
  .qr-code .txt { padding: 6px 0 0; }

  .lead { padding: 34px 2% 18px; }
  .lead .brand_logo { margin: -16px auto 14px; width: 110px; }
  .lead .title { padding: 0 0 10px; font-size: 18px; }
  .lead .note { font-size: 13px; }
  .lead .expiry { font-size: 15px; }
  .lead .expiry strong { font-size: 18px; }

  .view-block { padding: 30px 2% 0; }
  .view { padding: 0 0 30px; }
  .view .bnr { padding: 0 0 8px; }
  .view .txt { font-size: 18px; }
  .view .valid {  font-size: 14px; }
  .view .note { font-size: 12px; }

  .summary { padding: 28px 2% 18px; }
  .summary .item { padding: 0 0 14px; font-size: 15px; }
  .summary .group { padding: 0 0 14px; }

  .btn-back { padding: 0 0 30px; width: 260px; }
  .btn-back a { height: 48px; background-size: 108px 14px; border-radius: 24px; }


}