@charset "UTF-8";

/* sass */
.treat-crunch img { width: 100%; }

.treat-crunch .img-banner { box-shadow: 0px 0px 15px -5px #777777; border-radius: 10px; }

.bg01 { background-color: #FFF5E1; }

.bg02 { background-color: #810608; }

.ft-shippori { font-family: "Shippori Mincho", serif; }

.txt-gram { border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #fff; font-size: 4rem; text-align: center; }

.txt-gram p { font-weight: bold; }

div.btn-normal { margin-top: 48px; margin-bottom: 88px; }

div.btn-normal > p a { border: 2px solid #FFF; background: var(--Linear, linear-gradient(0deg, #E2E2E2 0.26%, #FFF 99.75%)); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16); color: #000; font-family: "Noto Sans JP", sans-serif; font-size: 2.8rem; font-weight: bold; display: block; text-align: center; text-decoration: none; transition: all .5s ease; padding: 15px; width: 490px; }

div.btn-normal > p a:hover { opacity: .7; }

.ucpet-btn-ec.uc-mod-btn-ec-02.btn-em p.uc-mod-cart-right { margin-top: 48px; }

.ucpet-btn-ec.uc-mod-btn-ec-02.btn-em p.uc-mod-cart-right a { border: 2px solid #FFF !important; background: var(--Linear, linear-gradient(180deg, #B38641 0.25%, #7F5C27 99.74%)); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16); color: #fff !important; font-family: "Noto Sans JP", sans-serif; font-size: 2.8rem !important; font-weight: bold !important; display: block; text-align: center; text-decoration: none; transition: all .5s ease; padding: 30px; }

.ucpet-btn-ec.uc-mod-btn-ec-02.btn-em p.uc-mod-cart-right a:hover { opacity: .7; }

.wrap-content01 { padding: 80px 0; }

.wrap-content01 * { margin: 0 auto; max-width: 1000px; }

.wrap-content01 .parsys > .section + .section { margin-top: 56px; }

.txt-hero { color: #530000; font-size: 3rem; }

.txt-hero p { font-weight: bold; line-height: 1.5; }

.txt-hero p + p { margin-top: 13px; }

.txt-hero .large { font-size: 4.8rem; }

.txt-line { background-color: #F2C512B2; background: linear-gradient(transparent 65%, #F2C512B2 35%); }

.box-made { position: relative; }

.box-made > .section:has(.txt-hero) { position: absolute; top: 32px; left: 0; }

.wrap-content02 { padding: 96px 0; }

.wrap-content02 * { max-width: 688px; margin: 0 auto; }

div.img-lineup { margin-top: -25px; }

.txt-with-icon { position: relative; }

.txt-with-icon .img-icon { position: absolute; top: -45px; left: -80px; width: 170px; height: auto; }

.txt-with-icon .txt-gram { margin-top: 30px; }

.wrap-line-up { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 48px; padding-right: 0; }

.wrap-line-up > .section { margin: 0; width: calc(50% - 20px); }

.wrap-line-up > .section:nth-child(n+3) { margin-top: 40px; }

.wrap-line-up .box-line-up { background-color: #fff; padding-top: 15px; }

.wrap-txt-flavor { margin-top: 15px; }

div.txt-flavor { background-color: #E371A2; color: #fff; font-family: "Shippori Mincho", serif; font-size: 2.2rem; text-align: center; }

div.txt-flavor p { font-weight: 700; }

div.txt-flavor.pt2 { background-color: #8D2A77; }

div.txt-flavor.pt3 { background-color: #F29E12; }

div.txt-flavor.pt4 { background-color: #5AA849; }

div.txt-flavor.pt5 { background-color: #E1131C; }

.ttl-treat-crunch { color: #530000; font-family: "Shippori Mincho", serif; font-size: 1.8rem; font-weight: bold; text-align: center; margin-top: 10px; }

.ttl-treat-crunch .large { font-size: 2.6rem; }

@media (max-width: 1024px) { .txt-gram { font-size: 2.4rem; }
  div.btn-normal { margin-top: 24px; margin-bottom: 48px; }
  div.btn-normal > p a { font-size: 2.4rem; padding: 10px; width: 100%; }
  div.btn-normal > p a:hover { opacity: 1; }
  .ucpet-btn-ec.uc-mod-btn-ec-02.btn-em p.uc-mod-cart-right { margin-top: 48px; }
  .ucpet-btn-ec.uc-mod-btn-ec-02.btn-em p.uc-mod-cart-right a { font-size: 2.4rem !important; padding: 10px; }
  .ucpet-btn-ec.uc-mod-btn-ec-02.btn-em p.uc-mod-cart-right a:hover { opacity: 1 !important; }
  .wrap-content01 { padding: 40px 15px; }
  .wrap-content01 * { margin: auto; max-width: initial; width: 100%; }
  .wrap-content01 .parsys > .section + .section { margin-top: 24px; }
  .txt-hero { font-size: 2rem; text-align: center; }
  .txt-hero p + p { margin-top: 8px; }
  .txt-hero .large { font-size: 3.5rem; }
  .box-made > .section:has(.txt-hero) { position: relative; top: 0; left: 0; }
  .wrap-content02 { padding: 56px 15px; }
  .wrap-content02 * { margin: auto; max-width: initial; width: 100%; }
  div.img-lineup img { margin-left: -15px; width: calc(100% + 30px); }
  .txt-with-icon .img-icon { top: -33px; left: -9px; width: 105px; height: auto; }
  .txt-with-icon .txt-gram { margin-top: 30px; }
  .wrap-line-up { background-color: #fff; justify-content: start; margin-top: 24px; padding-right: 14px; }
  .wrap-line-up > .section { width: 50%; }
  .wrap-line-up > .section:nth-child(n+3) { margin-top: 0; }
  .wrap-line-up .box-line-up { padding: 24px 0 14px 16px; }
  .wrap-txt-flavor { margin-top: 5px; }
  div.txt-flavor { font-size: 1.5rem; padding: 3px 0; }
  .ttl-treat-crunch { font-size: 1.4rem; margin-top: 5px; }
  .ttl-treat-crunch .large { font-size: 1.8rem; } }