@charset "utf-8";

/* KV */

div#kv {
 position: relative;
}

#kv img.uc-pc {
 width: 100% !important;
}

#kv .uc-mod-media-01 {
 display: inline;
}

.uc-carousel-stop-start-ui {
 display: inline-block;
}

.uc-carousel-stop-start-ui ul {
 padding: 0;
 width: 44px;
 height: 44px;
 position: absolute;
 right: 0;
 bottom: 12px;
 z-index: 2;
}

.uc-carousel-stop-start-ui ul li {
 list-style: none;
 padding: 0;
 margin: 0;
}

.uc-carousel-stop-start-ui ul li button {
 width: 44px;
 height: 44px;
}

.uc-carousel-stop-start-ui ul li button span {
 transition: background-color .3s;
 display: block;
 width: 100%;
 height: 100%;
 background: #1E2766;
 border-radius: 50%;
 text-indent: 100%;
 overflow: hidden;
 white-space: nowrap;
 z-index: 1;
}

.uc-carousel-stop-start-ui ul li button:hover span {
 background: #F8B800;
}

.uc-carousel-stop-start-ui ul li button span::after {
 content: "";
 position: absolute;
 display: block;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
}

.uc-carousel-stop-start-ui ul li.uc-start button span::after {
 background: transparent url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/icon-carousel-start.svg) no-repeat center center;
 background-size: contain;
}

.uc-carousel-stop-start-ui ul li.uc-stop button span::after {
 background: transparent url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/icon-carousel-stop.svg) no-repeat center center;
 background-size: contain;
}

.top-key .slick-dots {
 text-align: center;
 width: 100%;
 padding: 0 0 16px;
 margin-top: 20px;
}

.top-key .slick-dots li {
 cursor: pointer;
 margin: 10px 4px 0;
 display: inline-block;
}

.top-key .slick-dots li button {
 background: transparent;
 width: 22px;
 height: 22px;
 transition: background-color 0.2s;
 position: relative;
 display: block;
 color: transparent;
 border-radius: 50%;
}

.top-key .slick-dots li button:hover:after {
 background: #F8B800;
}

.top-key .slick-dots li button::after {
 background: #1E2766;
 width: 16px;
 height: 16px;
 border: #f6ffe0 3px solid;
 top: 3px;
 left: 3px;
 transition: background-color 0.2s;
 position: absolute;
 content: "";
 border-radius: 50%;
}

.top-key .slick-dots .slick-active button {
 background: #1E2766;
}

.uc-carousel-ui.uc-js-carousel-ui {
 display: none !important;
}

/* message */

div#message {
 padding: 60px 0;
}

.message-img {
 display: inline-block;
 position: relative;
}

.message-img::before {
 content: "";
 display: inline-block;
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/material-01-pc.png)no-repeat right;
 width: 100%;
 height: 100%;
 position: absolute;
 left: -105%;
 top: 0;
 background-size: contain;
}

.message-img::after {
 content: "";
 display: inline-block;
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/material-02-pc.png)no-repeat;
 width: 100%;
 height: 100%;
 position: absolute;
 right: -110%;
 top: 0;
 background-size: contain;
}

.message-img img {
 max-width: 33vw;
}

.message-att p {
 font-size: 1.2rem;
 margin-top: 20px;
}

/* lineup */

#lineup .CMP-CM32-container {
 background: initial;
}

#lineup .lineup-ttl h2::after {
 content: none;
}

#lineup.no-ttl::before,
#lineup .lineup-ttl::after {
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/lineup_no_ttl_bg.png) repeat center top;
 content: '';
 display: block;
 height: 49px;
 left: 0;
 position: absolute;
 top: auto;
 width: 100%;
}

.lineup-block h3 {
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/sub-tit-bk.png) no-repeat;
 background-size: contain;
 font-size: 3.0rem;
 font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', IPAmincho, serif;
 font-weight: 600;
 color: #fff;
 padding: 0 20px;
 width: 550px;
 height: 74px;
 display: flex;
 justify-content: center;
 margin: 0 auto;
 align-items: center;
}

#lineup .uc-list.lineup-btn ul {
 height: 100%;
}

#lineup .CMP-CM30-link-list.section {
 flex-grow: 1;
 display: block;
}

#lineup .uc-list.lineup-btn li {
 height: 100%;
}

#lineup section {
 display: flex;
 flex-direction: column;
 height: 100%;
}

#lineup .lineup-inner .parsys>.CMP-CM06-section .lineup-btn {
 padding: 0 38px;
 height: 100%;
}

#lineup .lineup-gd .lineup-inner .parsys>.CMP-CM06-section .lineup-btn a {
 padding: 16px 0;
}

#lineup .lineup-inner .parsys>.CMP-CM06-section .lineup-btn a {
 background-color: #7a4328;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 10px 0;
 line-height: 1.2;
}


.lineup-gd {
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/common/lineup_bg.png) no-repeat;
 background-size: cover;
 padding: 60px 0;
}

.lineup-gd.lineup-block .parsys,
.lineup-sn.lineup-block .parsys {
 justify-content: space-between !important;
}

.lineup-fr {
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/lineup-bg-fr.png) no-repeat;
 background-size: cover;
 padding: 60px 0;
}


.lineup-sn {
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/lineup-bg-sn.png) no-repeat;
 background-size: cover;
 padding: 67px 0 0;
}

.lineup-sn.lineup-block .parsys:after {
 content: "";
 display: inline-block;
 width: 33%;
}

section.sapporo {
 flex-direction: initial !important;
 flex-wrap: wrap;
}

section.sapporo>div:nth-child(-n+2) {
 width: 50%;
}

#lineup .lineup-inner .parsys>.CMP-CM06-section .sapporo img {
 width: 224px !important;
 max-width: none !important;
 margin-left: -30px;
 margin-right: -30px;
}

#lineup .lineup-inner .parsys>.CMP-CM06-section .sapporo .no-margin .uc-object {
 overflow: hidden;
}

.lineup-gd.lineup-block .lineup-inner::after {
 content: "";
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/dog-01.png)no-repeat;
 width: 303px;
 height: 415px;
 display: inline-block;
 position: absolute;
 bottom: 0;
 right: -303px;
}

.lineup-fr.lineup-block .lineup-inner::after {
 content: "";
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/dog-02.png)no-repeat;
 width: 349px;
 height: 396px;
 display: inline-block;
 position: absolute;
 bottom: 0;
 left: -303px;
}

.lineup-sn.lineup-block .lineup-inner::after {
 content: "";
 background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/dog-03.png)no-repeat;
 width: 273px;
 height: 408px;
 display: inline-block;
 position: absolute;
 bottom: 0;
 right: -300px;
}

.lineup-fr.lineup-block .parsys {
 position: relative;
}

.lineup-fr.lineup-block .parsys>div:last-child {
 position: absolute;
 right: 0;
 background-color: initial !important;
 border-radius: initial !important;
 box-shadow: none !important;
 margin: 0;
 padding: 0;
 width: 330px !important;
 bottom: 50px;
 overflow: inherit !important;
}

section.lineup-hayagui {
 position: relative;
 width: 330px;
 height: 330px !important;
 border-radius: 50%;
 background: linear-gradient(to bottom, #fff 70%, saddlebrown 30%);
}

section.lineup-hayagui::after {
 content: "";
 position: absolute;
 top: 50%;
 left: -50px;
 margin-top: -15px;
 border: 15px solid transparent;
 border-right: 45px solid #fff;
 z-index: 0;
}

section.lineup-hayagui::before {
 content: "「早食い軽減設計」は\A専用ページでご案内";
 white-space: pre;
 font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', IPAmincho, serif;
 font-size: 2.4rem;
 font-weight: 600;
 position: absolute;
 top: -60px;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 color: #4b0000;
 line-height: 1.2;
}

section.lineup-hayagui p.uc-object.uc-fadeIn-target.uc-js-fadeIn.uc-fadeIn {
 padding: 0 !important;
 height: calc(330px * 0.7);
 display: flex;
 justify-content: center;
 align-items: center;
}

#lineup .lineup-inner .parsys>.CMP-CM06-section .lineup-hayagui img {
 width: calc(224px * 0.8);
}

section.lineup-hayagui p.uc-caption {
 height: calc(330px * 0.3);
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', IPAmincho, serif;
 color: #fff !important;
 padding-bottom: 10px;
}

/* ec-area */

.uc-mod-btn-ec-02.uc-js-modal-inline-00.ucpet-btn-ec.ucpet-mglr-ec-sp-pt1.ucpet-wdt-ec-pc-pt1 {
 margin: 0 auto;
}

section.ec-sec {
 background-color: #fff;
 padding: 70px 0;
 margin: 0;
}


/* manga-bnr */

.manga-bnr {
 background-color: #f2f2f2;
 padding: 60px 0;
}



/* --------------------------------------------------------------------------------------
   ios用のリンク対策
--------------------------------------------------------------------------------------- */

@media (min-width: 961px) {

 .top-banner>.CMP-CM06-section .inner-box .logo-txt a:hover,
 .index-banner li a:hover {
  text-decoration: none;
 }

 .top-banner>.CMP-CM06-section:hover .photo img {
  transform: scale(1.1);
 }

}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 960px) {

 /* message */

 div#message {
  padding: 5vw 0;
 }

 .message-img {
  display: inline-block;
  position: relative;
  padding-top: calc(90vw * 428 / 750);
  padding-bottom: calc(90vw * 394 / 720);
 }

 .message-img img {
  max-width: 90vw;
 }

 .message-img::before {
  content: "";
  display: block;
  background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/material-01-sp.png)no-repeat right;
  width: 90vw;
  height: calc(90vw * 428 / 750);
  position: absolute;
  left: 0;
  top: 0;
  background-size: contain;
 }

 .message-img::after {
  content: "";
  display: inline-block;
  background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/material-02-sp.png)no-repeat;
  width: 90vw;
  height: calc(90vw * 394 / 720);
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  background-size: cover;
 }

 .message-att {
  width: 90vw;
  margin: 0 auto !important;
  text-align: left;
 }

 .message-att p {
  margin-top: 5vw;
 }

 /* Lineup */

 #lineup .lineup-ttl h2 span {
  font-size: 5vw;
 }

 .lineup-block h3 {
  width: 80vw;
  height: calc(80vw * 74 / 550);
  font-size: 5vw;
 }

 #lineup .lineup-inner .parsys>div {
  width: 47.5% !important;
  margin: 0 0 5vw !important;
 }

 .lineup-gd {
  padding: 10vw 5vw;
 }

 .lineup-fr,
 .lineup-sn {
  padding: 10vw 5vw;
 }

 #lineup .lineup-inner .parsys {
  padding: 5vw 0;
  padding-bottom: calc(70vw * 303 / 415);
  justify-content: space-between;
 }

 #lineup .lineup-inner .parsys>.CMP-CM06-section .lineup-btn {
  padding: 0;
 }

 #lineup .lineup-gd .lineup-inner .parsys>.CMP-CM06-section .lineup-btn a {
  padding: 2vw 0;
 }

 .lineup-fr.lineup-block .parsys>div:last-child {
  position: initial;
  padding: 0 !important;
  display: flex;
  align-items: flex-end;
 }

 .lineup-gd.lineup-block .lineup-inner::after {
  right: 0;
  width: 40vw;
  height: calc(40vw * 415 / 303);
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
 }

 .lineup-fr.lineup-block .lineup-inner::after {
  width: 40vw;
  height: calc(40vw * 396 / 349);
  right: 0;
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
 }

 .lineup-fr .parsys {
  padding-bottom: calc(40vw * 396 / 349) !important;
 }

 .lineup-sn .parsys {
  padding-bottom: calc(70vw * 273 / 408) !important;
 }

 .lineup-sn.lineup-block .parsys:after {
  content: none;
 }

 .lineup-sn.lineup-block .lineup-inner::after {
  width: 30vw;
  height: calc(30vw * 408 / 273);
  right: 0;
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  display: block;
 }

 section.lineup-hayagui {
  width: calc(90vw * 0.475) !important;
  height: calc(90vw * 0.475) !important;
 }

 section.lineup-hayagui p.uc-object.uc-fadeIn-target.uc-js-fadeIn.uc-fadeIn {
  height: calc(90vw * 0.475 * 0.7) !important;
 }

 #lineup .lineup-inner .parsys>.CMP-CM06-section .lineup-hayagui img {
  width: calc(90vw * 0.475 * 0.7 * 0.8) !important;
 }

 section.lineup-hayagui::before {
  font-size: 4vw;
  top: -10vw;
 }

 section.lineup-hayagui p.uc-caption {
  height: calc(90vw * 0.475 * 0.3) !important;
  font-size: 2.8vw !important;
  line-height: 1.2;
 }

 section.lineup-hayagui::after {
  left: -8vw;
 }

 #lineup .lineup-inner .parsys>.CMP-CM06-section .sapporo img {
  width: 29.733vw !important;
 }

 .lineup-sn.lineup-block .parsys>div:nth-child(4) {
  padding: 2.667vw 2.5vw 5.333vw !important;
 }

 section.ec-sec,
 .manga-bnr {
  padding: 5vw;
 }

 .lineup-fr {
  background: url(/content/dam/sites/jp_unicharmpet_com/gran-deli/top/lineup-bg-fr-sp.png) no-repeat;
  background-size: cover;
 }
}