@charset "UTF-8";


/* sass */
.txt-note > p { color: #5F5F5F; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 1.3rem; }

.zakutto { overflow: hidden; }

.kv { background-color: #361812; }

.kv img { max-width: 1440px; width: 100%; }

.wrap-features { background-color: #361812; padding-bottom: 107px; position: relative; }

.wrap-features::before { content: ""; display: inline-block; background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/features-deco-bg.png) no-repeat; background-size: contain; position: absolute; top: 230px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1428px; max-width: 100%; height: 1103px; }

.wrap-features-inner { background-color: #fff; border-radius: 20px; position: relative; margin-inline: auto; margin-top: -20px; max-width: 1000px; z-index: 5; }

.wrap-features-inner::before, .wrap-features-inner::after { content: ""; display: inline-block; position: absolute; }

.wrap-features-inner::before { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/features-deco-front-1.png) no-repeat; background-position: right; background-size: contain; top: 230px; left: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 175px; height: 1345px; z-index: 10; }

.wrap-features-inner::after { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/features-deco-front-2.png) no-repeat; background-size: contain; top: 230px; right: 0; -webkit-transform: translateX(50%); transform: translateX(50%); width: 150px; height: 1345px; z-index: 10; }

.features-hdg img { margin-top: -8px; position: relative; z-index: 10; }

.features-detail { margin-inline: auto; padding-bottom: 48px; width: 800px; }

.features-lead-img { margin-top: 35px; width: 100%; }

.features-box { margin-top: 64px; }

.features-box-col2 { display: flex; flex-wrap: wrap; }

.features-box-col2 > .section { width: 50%; }

.features-num-img { text-align: center; }

.features-num-img img { width: auto; height: 53px; }

.features01-img { margin-top: 24px; }

.features02-box { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 13px; margin-left: -16px; }

.features02-box > .section, .features02-box > .section > .box-image { aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.features02-box > .section { background: #F8DC6C; background: linear-gradient(0deg, #f8dc6c 0%, #ebbe58 100%); -webkit-filter: drop-shadow(4px 4px 4.4px rgba(0, 0, 0, 0.12)); filter: drop-shadow(4px 4px 4.4px rgba(0, 0, 0, 0.12)); margin-left: 16px; width: 101px; }

.features02-box > .section > .box-image { background: linear-gradient(270deg, #FFF2D9 3.76%, #FFFDF3 31.56%, #FFFDF5 59%, #FFD4D4 96.41%); padding: 3px; width: calc(100% - 8px); }

.features02-box > .section > .box-image.pt2 img { width: auto; height: 46px; }

.features04-img { margin-inline: auto; width: 400px; }

.features-box-rcmnd { border-radius: 14.4px; background-color: #FFF0CD; margin-inline: auto; margin-top: 24px; padding: 30px 30px 27px 37px; width: 607px; }

.features-rcmnd-list > li { color: #671F1A; font-family: "Noto Serif JP", sans-serif; font-size: 1.6rem; font-weight: 700; display: flex; letter-spacing: 0.1rem; padding: 1rem 0; }

.features-rcmnd-list > li::before { content: ""; display: inline-block; background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-arrow.svg) no-repeat; position: relative; top: 0.4em; margin-right: 0.5rem; min-width: 14px; min-height: 14px; width: 14px; height: 14px; }

.features-rcmnd-list > li + li { border-top: 2px dashed #C3A899; }

.wrap-voice { background: #FFF8DB url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/voice-bg.png); background-size: cover; }

.wrap-voice-inner { padding: 75px 0 104px; position: relative; }

.wrap-voice-inner::before, .wrap-voice-inner::after { content: ""; display: inline-block; position: absolute; }

.wrap-voice-inner::before { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto01.png) no-repeat; background-size: contain; aspect-ratio: 88/59; top: 175px; left: -130px; width: 265px; height: auto; }

.wrap-voice-inner::after { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto02.png) no-repeat; background-size: contain; aspect-ratio: 76/59; top: 505px; right: -130px; width: 240px; height: auto; }

.section:has(> .wrap-voice-inner) { position: relative; }

.section:has(> .wrap-voice-inner)::before, .section:has(> .wrap-voice-inner)::after { content: ""; display: inline-block; position: absolute; }

.section:has(> .wrap-voice-inner)::before { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto03.png) no-repeat; background-size: contain; aspect-ratio: 19/18; bottom: 0; left: -130px; width: 210px; height: auto; }

.section:has(> .wrap-voice-inner)::after { display: none; }

.wrap-voice-box { display: flex; flex-wrap: wrap; margin-left: -40px; }

.wrap-voice-box > .section { margin: 40px 0 0 40px; width: calc(100% / 3 - 40px); }

.wrap-voice-box .voice-box > .section:has(img) { margin: 0 35px; }

.wrap-voice-box .voice-box .box-image { background: #F8DC6C; background: linear-gradient(1deg, #f8dc6c 0%, #ebbe58 100%); border-radius: 50%; box-shadow: 4px 4px 4.4px 0 rgba(0, 0, 0, 0.12); padding: 4px; }

.wrap-voice-box .voice-box .box-detail { background-color: #fff; font-family: "Noto Sans JP", sans-serif; margin-top: 16px; padding: 14px 14px 18px 16px; }

.wrap-voice-box .voice-box .box-detail .txt-name > p { font-size: 2rem; text-align: center; }

.wrap-voice-box .voice-box .box-detail .txt-voice > p { font-size: 1.4rem; line-height: 1.5; }

.section:has(> .wrap-voice-box) { margin-inline: auto; width: 950px; }

.wrap-lineup-box { display: flex; flex-wrap: wrap; margin-left: -48px; }

.wrap-lineup-box > .section { margin: 48px 0 0 48px; width: calc(100% / 3 - 48px); }

.section:has(> .wrap-lineup-box) { margin-inline: auto; width: 856px; }

.wrap-lineup-inner { padding-top: 70px; }

.lineup-box .box-txt { margin-top: 10px; }

.lineup-box .box-txt > [class^="txt-"] { font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.5; text-align: center; }

.lineup-box .box-txt .txt-brand { font-size: 1.6rem; }

.lineup-box .box-txt .txt-brand + .txt-flavor { margin-top: 5px; }

.lineup-box .box-txt .txt-brand + .txt-tag { margin-top: 5px; }

.lineup-box .box-txt .txt-flavor { font-size: 2.2rem; }

.lineup-box .box-txt .txt-sub { font-size: 1.4rem; margin: 0 -1em; }

.lineup-box .box-txt .txt-tag .inner { border-radius: 20px; color: #fff; font-size: 1.5rem; display: inline-block; margin-inline: auto; padding: 0 15px; }

.lineup-box .box-txt .txt-tag.pt1 .inner { background: #009C37; }

.lineup-box .box-txt .txt-tag.pt2 .inner { background: #00A3F5; }

.lineup-box .lineup-img { margin-inline: auto; width: 220px; height: auto; }

.lineup-box .lineup-btn { margin-top: 13px; }

.lineup-box .lineup-btn a { border-radius: 20px; background: linear-gradient(270deg, #F8D97C 0%, #FFECB2 50%, #F8D97C 100%); font-family: "Noto Sans JP", sans-serif; font-size: 1.6rem; display: block; padding: 3px; margin-inline: auto; text-align: center; transition: opacity .3s; width: 250px; }

.lineup-box .lineup-btn a:hover { opacity: .6; text-decoration: none; }

.lineup-box .lineup-btn.mt-l { margin-top: 37px; }

/* ECリンク */
.ucpet-btn-ec.ucpet-mglr-ec-sp-pt2 { margin-top: 54px !important; }

.ucpet-btn-ec.uc-mod-btn-ec-02 .uc-mod-cart-right a { background: linear-gradient(90deg, #FA8C61 0%, #FFE0D1 50%, #F56B4D 100%) !important; border-radius: 60px !important; border: none !important; color: #000 !important; padding: 15px 50px !important; font-family: "Noto Sans JP", sans-serif; font-size: 2rem !important; width: 400px !important; display: inline-block !important; }

.uc-mod-btn-ec-02 { margin-top: 0 !important; }

.ucpet-btn-ec.ucpet-wdt-ec-pc-pt1 { width: auto !important; }

.ucpet-btn-ec.uc-mod-btn-ec-02 .uc-mod-cart-right a:hover { opacity: 0.6 !important; color: #000 !important; border: none !important; }

@media (max-width: 1024px) { .txt-note > p { font-size: 1.3rem; }
  .kv img { max-width: 100%; width: 100%; }
  .zakutto { overflow: visible; }
  .zakutto img { width: 100%; }
  .uc-mod-media-01 .uc-object img.uc-sp { display: block; }
  .uc-mod-media-01 .uc-object img.uc-pc { display: none; }
  .wrap-features { background: #361812; background: linear-gradient(0deg, #361812 0%, #361812 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); padding-bottom: 15px; overflow: visible; }
  .wrap-features::before, .wrap-features::after { display: none; }
  .wrap-features-inner { border-radius: 2.667vw; margin-top: -24.533vw; max-width: 100%; z-index: 0; }
  .wrap-features-inner::before, .wrap-features-inner::after { display: none; }
  .features-hdg { margin-bottom: 8.533vw; }
  .features-hdg img { margin-top: 0; z-index: 0; }
  .features-detail { padding-bottom: 28px; width: 100%; }
  .features-lead-img { margin-top: 35px; }
  .features-box { padding: 0 24px; position: relative; margin-top: 40px; }
  .features-box.box01::before, .features-box.box01::after { content: ""; display: inline-block; position: absolute; z-index: 5; }
  .features-box.box01::before { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto01.png) no-repeat; background-size: contain; top: -6.667vw; left: -5.333vw; aspect-ratio: 3/2; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 17.333vw; }
  .features-box.box01::after { display: none; }
  .features-box.box02::before, .features-box.box02::after { content: ""; display: inline-block; position: absolute; z-index: 5; }
  .features-box.box02::before { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto03.png) no-repeat; background-position: left; background-size: contain; top: -8vw; left: -4vw; aspect-ratio: 79/75; -webkit-transform: translateX(0); transform: translateX(0); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 24vw; z-index: 5; }
  .features-box.box02::after { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto02.png) no-repeat; background-size: contain; top: -10.667vw; right: -12.533vw; aspect-ratio: 48/37; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 22.667vw; }
  .features-box.box04::before, .features-box.box04::after { content: ""; display: inline-block; position: absolute; z-index: 5; }
  .features-box.box04::before { display: none; }
  .features-box.box04::after { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto04.png) no-repeat; background-position: left; background-size: contain; top: 21.333vw; right: -30.667vw; aspect-ratio: 98/69; -webkit-transform: translateX(0); transform: translateX(0); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 34.667vw; z-index: 5; }
  .features-box-col2 { display: block; }
  .features-box-col2 > .section { width: 100%; }
  .features-num-img img { width: auto; height: 11.2vw; }
  .features-txt-img { margin-bottom: 10px; }
  .features-txt-img img { width: 100%; height: auto; }
  .section:has(> .features-num-img) + .section:has(> .features-txt-img) { margin-top: 7px; }
  .features01-img { margin-top: 16px; }
  .features02-box { margin-left: -16px; }
  .features02-box > .section { margin-left: 16px; width: calc(100% / 3 - 16px); }
  .features02-box > .section > .box-image { padding: 3px; width: calc(100% - 8px); }
  .features02-box > .section > .box-image.pt2 img { width: auto; height: 12.267vw; }
  .features04-img { width: 66.667vw; }
  .features-box-rcmnd { border-radius: 3.84vw; margin: 24px auto; padding: 20px 21px; width: calc(100% - 34px); max-width: 607px; }
  .features-rcmnd-list > li { font-size: 1.4rem; }
  .wrap-voice { background: #FFF8DB url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/voice-bg-sp.png); background-size: 39px; }
  .wrap-voice-inner { padding: 50px 0 48px; position: relative; }
  .wrap-voice-inner::before { aspect-ratio: 161/108; -webkit-transform: rotate(25deg); transform: rotate(25deg); top: 133.333vw; left: -24vw; width: 51.733vw; height: auto; }
  .wrap-voice-inner::after { aspect-ratio: 75/58; top: 226.667vw; right: -32vw; width: 61.333vw; height: auto; }
  .section:has(> .wrap-voice-inner) { position: relative; }
  .section:has(> .wrap-voice-inner)::before, .section:has(> .wrap-voice-inner)::after { content: ""; display: inline-block; position: absolute; }
  .section:has(> .wrap-voice-inner)::before { aspect-ratio: 94/89; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); bottom: 193.333vw; left: -18.667vw; width: 50.667vw; height: auto; }
  .section:has(> .wrap-voice-inner)::after { background: url(/content/dam/sites/jp_unicharmpet_com/ginnospoon/gin/zakutto/icn-zakutto04.png) no-repeat; background-size: contain; aspect-ratio: 181.51/154.59; display: inline-block; bottom: 80vw; right: -41.333vw; width: 77.333vw; height: auto; }
  .wrap-voice-box { display: block; padding: 0 17px; margin-left: 0; }
  .wrap-voice-box > .section { margin: 20px 0 0; width: 100%; }
  .wrap-voice-box .voice-box { position: relative; z-index: 5; }
  .wrap-voice-box .voice-box > .section:has(img) { margin: 0; }
  .wrap-voice-box .voice-box .box-image { margin-inline: auto; width: 48vw; }
  .wrap-voice-box .voice-box .box-detail { margin-top: 16px; padding: 14px 16px 15px; }
  .wrap-voice-box .voice-box .box-detail .txt-name > p { font-size: 1.6rem; }
  .wrap-voice-box .section:has(> .voice-box) + .section:has(> .voice-box) { margin-top: 24px; }
  .section:has(> .wrap-voice-box) { width: 100%; }
  .wrap-lineup-box { display: block; margin-left: 0; }
  .wrap-lineup-box > .section { margin: 10.667vw auto; width: 100%; }
  .section:has(> .wrap-lineup-box) { width: 100%; }
  .wrap-lineup-inner { padding-top: 48px; }
  .lineup-hdg-img { margin-inline: auto; width: 80vw; }
  .lineup-box .box-txt .txt-brand { font-size: 1.4rem; }
  .lineup-box .box-txt .txt-brand + .txt-flavor { margin-top: 5px; }
  .lineup-box .box-txt .txt-brand + .txt-tag { margin-top: 5px; }
  .lineup-box .box-txt .txt-flavor { font-size: 2rem; margin-top: 5px; }
  .lineup-box .box-txt .txt-sub { font-size: 1.4rem; margin: 0 -1em; }
  .lineup-box .box-txt .txt-tag .inner { font-size: 1.4rem; }
  .lineup-box .lineup-img { width: 49.067vw; }
  .lineup-box .lineup-btn { margin: 2.667vw auto 0; width: 53.333vw; }
  .lineup-box .lineup-btn a { border-radius: 5.333vw; padding: 1.333vw; width: 100%; }
  .lineup-box .lineup-btn a:hover { opacity: 1; }
  .lineup-box .lineup-btn.mt-l { margin-top: 2.667vw; }
  /* ECリンク */
  .ucpet-btn-ec.ucpet-mglr-ec-sp-pt2 { margin-top: 10.667vw !important; margin-bottom: 10.667vw !important; }
  .ucpet-btn-ec.uc-mod-btn-ec-02 .uc-mod-cart-right a { width: 100% !important; max-width: 400px !important; } }