#bodyContent {background: url(../images/mainpage/KV-and-bg/index_bg.jpg) no-repeat center 50.5vw; position: relative;}
@media (min-width: 120rem) {
  #bodyContent {background-size: 100% auto;}
}
@media (max-width: 48rem) {
  #bodyContent {background: url(../images/mainpage/KV-and-bg/index_bg-m.jpg) no-repeat center 134vw / 100% auto;}
}

@media (min-width: 769px) {
  .decos {position: absolute; width: 100%; max-width: 80rem; height: 100%; top: 0; left: 0; right: 0; margin: auto; z-index: 0;}
  .decos .deco {position: absolute;}
  .decos .deco span {display: block;}

  .decos .deco1 {top: 143rem; left: -22rem; animation: float4 3.6s ease-in-out infinite alternate;}
  .decos .deco2 {top: 150rem; left: -21rem; animation: float1 3s .8s ease-in-out infinite alternate;}
  .decos .deco3 {top: 124rem; right: -20rem; animation: float3 3.3s .5s ease-in-out infinite alternate;}
  .decos .deco4 {top: 139rem; right: -24rem; animation: float1 3s ease-in-out infinite alternate;}
  .decos .deco5 {top: 210rem; left: -24rem; animation: float1 3.3s .8s ease-in-out infinite alternate;}
  .decos .deco6 {top: 227rem; right: -25rem; animation: float1 3s ease-in-out infinite alternate;}
  .decos .snowflake1 {top: 161rem; left: -8rem; animation: floatDown1 19s ease-in-out infinite, snowFlakeFade 19s ease-in-out infinite;}
  .decos .snowflake2 {top: 184rem; left: -20rem; animation: floatDown2 16s ease-in-out infinite, snowFlakeFade 16s ease-in-out infinite;}
  .decos .snowflake3 {top: 213rem; right: -21rem; animation: floatDown3 16s ease-in-out infinite, snowFlakeFade 16s ease-in-out infinite;}

  .decos .deco1 span {background: url(../images/mainpage/deco-cloud-tart.png) no-repeat center / contain; width: 23rem; height: 13rem;}
  .decos .deco2 span {background: url(../images/mainpage/deco-tart.png) no-repeat center center / contain; width: 13rem; height: 12rem;}
  .decos .deco3 span {background: url(../images/mainpage/deco-sled.png) no-repeat center center / contain; width: 27rem; height: 21rem;}
  .decos .deco4 span {background: url(../images/mainpage/deco-cloud-sled.png) no-repeat center center / contain; width: 22rem; height: 13rem;}
  .decos .deco5 span {background: url(../images/mainpage/deco-cake.png) no-repeat center / contain; width: 24rem; height: 23rem;}
  .decos .deco6 span {background: url(../images/mainpage/deco-coco.png) no-repeat center center / contain; width: 26rem; height: 23rem;}
  .decos .deco.sf span {background: url(../images/mainpage/deco-snowflake.png) no-repeat center center / contain; animation: spin 6s linear infinite;}
  .decos .snowflake1 span {width: 4.5rem; height: 4.5rem;}
  .decos .snowflake2 span {width: 7rem; height: 7rem;}
  .decos .snowflake3 span {width: 11rem; height: 11rem;}
}

#canvasAurora {position: absolute; z-index: 1; width: 100%; height: 100vh; top: 0; left: 0; filter: blur(15px);}


#KV {position: relative;}
#KV .kvImg, #KV .kvImg img {display: block; width: 100%;}
#KV .deco {position: absolute; z-index: 2;}
#KV .deco span {display: block; width: 100%;}
#KV .ttImg {width: 39.5vw; top: 6vw; left: 31vw;}
#KV .ttImg span {padding-bottom: 14vw; background: url(../images/mainpage/KV-and-bg/KV-TT.png) no-repeat center / contain;}

@media (min-width: 48rem) {
  #KV .deco1 {width: 22vw; top: 14vw; left: -3.5vw;}
  #KV .deco2 {width: 10vw; top: 14vw; left: 87vw;}
  #KV .deco3 {width: 21vw; top: 31vw; left: 80vw;}
  #KV .deco1 span {padding-bottom: 10vw; background: url(../images/mainpage/food-steak.png) no-repeat center / contain; animation: float1 2.5s ease-in-out infinite alternate;}
  #KV .deco2 span {padding-bottom: 10.5vw; background: url(../images/mainpage/food-wine.png) no-repeat center / contain; animation: float2 2.5s ease-in-out infinite alternate;}
  #KV .deco3 span {padding-bottom: 17vw; background: url(../images/mainpage/food-pizza.png) no-repeat center / contain; animation: float2 2.8s ease-in-out infinite alternate;}
}

@media (max-width: 48rem) {
  #KV .ttImg {width: 82vw; top: 23vw; left: 0; right: 0; margin: auto;}
  #KV .ttImg span {padding-bottom: 34vw; background: url(../images/mainpage/KV-and-bg/KV-TT-m.png) no-repeat center / contain;}
}




#introBoxWrap {position: relative; z-index: 2; padding: 0 2rem;}
#introBoxWrap .container {position: relative; max-width: 75rem; margin: -6vw auto 0;}
#introBoxWrap .textBlock {margin: 1.75rem auto;}
#introBoxWrap .textBlock p {color: #644b3a; font-size: 1.415rem; font-weight: 700; line-height: 1.6; text-align: center;}
#introBoxWrap .offerBlock {display: flex; flex-flow: row wrap; justify-content: space-between;}
#introBoxWrap .offerBlock .intromenu {-ms-flex: 0 0 24%; -webkit-flex: 0 0 24%; flex: 0 0 24%; max-width: 24%; padding-bottom: 24%; position: relative;}
#introBoxWrap .offerBlock .intromenu:nth-child(1) {background: url(../images/mainpage/offer-menu.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu:nth-child(2) {background: url(../images/mainpage/offer-voucher.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu:nth-child(3) {background: url(../images/mainpage/offer-tas2.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu:nth-child(4) {background: url(../images/mainpage/offer-orpay.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu span {display: block; position: absolute; left: 0; right: 0; bottom: 18%; margin: auto; max-width: 8rem; font-size: 1.15rem; font-weight: 600; line-height: 2; border-radius: 3rem; color: #fff; text-align: center; background: linear-gradient(to bottom, #fff9fc, #fccbd2, #fb507c, #fb507c, #ed4169, #e83964); background-position: 0 100%; background-size: 100% 200%; transition: all .3s ease-in-out;}
#introBoxWrap .dateBlock img {width: 34rem; margin: 0 auto;}

@media (min-width: 48rem) {
  #introBoxWrap .offerBlock .intromenu:hover span {color: #d70052; background-position: 0 0;}
}

@media (max-width: 48rem) {
  #introBoxWrap {padding: 0 4vw;}
  #introBoxWrap .container {max-width: 100%; display: flex; flex-flow: row wrap;}
  #introBoxWrap .container > div {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
  #introBoxWrap .offerBlock .intromenu {-ms-flex: 0 0 49%; -webkit-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%; padding-bottom: 49%;}
  #introBoxWrap .offerBlock .intromenu span {max-width: 19vw; font-size: 3vw; line-height: 1.85; border-radius: 8vw;}
  #introBoxWrap .textBlock {margin: 5vw auto 0; padding: 0 4vw;}
  #introBoxWrap .textBlock p {font-size: 3.95vw; line-height: 1.8;}
  #introBoxWrap .dateBlock img {width: 90vw; margin: 3.5vw auto 0;}
}







@media only screen and (min-width: 48rem) {
  .section .poiBlock:hover {transform: scale(1.02);}
}


.item {display: block; background-color: #fff; border-radius: .75rem; height: 100%; overflow: hidden; width: 96%; margin: auto; position: relative; }
.item .img {position: relative; height: 8rem;}
.item .img .badge {position: absolute; top: .6rem; left: .6rem;}
.item .img .badge .offerTxt {font-size: 1rem; color: #fff; font-weight: 600; line-height: 1.8; border-radius: 3px; padding: 0 .6rem; background-color: #008043; min-width: 3rem; text-align: center;}
.item .txt {padding: 0.6rem .75rem .75rem;}
.item .txt p {color: #866950;}
.item .txt .tt {font-weight: 600; line-height: 1.4;}
.item .txt .poiName {font-weight: 600; font-size: 1.1rem; margin-top: 0.2rem; letter-spacing: 0;}
.item .txt small {color: #777; font-size: .85rem; display: block;}
.item .linkWrap {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}



#special-section {padding: 4rem 1rem 1rem; position: relative; z-index: 1;}
#special-section .inner {position: relative; padding: 0; max-width: 80rem; margin: auto; }

#special-section .ttImgWrap {position: relative;}
#special-section .ttImg {z-index: 1; max-width: 48rem; width: 100%;}
#special-section .list {max-width: 76rem; margin: 1rem auto 0; padding: 1rem;}

#special-section .item {padding: 0; width: calc(100% - 1rem);}
#special-section .item .img {height: 11rem; margin: .85rem .85rem 0; z-index: 1;}
#special-section .item .txt {padding: .85rem 1.25rem 1rem; text-align: center;}
#special-section .item .tt {color: #866950; z-index: 1;}

#special-section .btn {display: block; position: relative; margin: 1.5rem auto 0; width: 18rem; height: 4rem; padding: 3px; border-radius: 3rem; background: linear-gradient(170deg, #964840, #fddeb4); box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .35);}
#special-section .btn span {position: relative; display: block; width: 100%; height: 100%; border-radius: 3rem; background: linear-gradient(to bottom, #fff9fc, #fccbd2, #fa5f9e, #e2387a); background-position: 0 100%; background-size: 100% 200%; color: #fff; font-size: 1.55rem; text-align: center; font-weight: 600; line-height: 3.25rem; transition: all .3s ease-in-out;}

@media (min-width: 48rem) {
  #special-section .list {min-height: 19rem; opacity: 0; transition: opacity .2s ease-in-out;}
  #special-section .list.swiperloaded {opacity: 1;}
  #special-section .item {margin: 0 auto;}
  #special-section .item .tt {font-size: 1rem; line-height: 1.25; -webkit-line-clamp: 3; height: calc(1em * 1.25 * 3); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

  #special-section .btn:hover span {color: #d70052; background-position: 0 0;}
}

@media (max-width: 48rem) {
  #special-section {padding: 5vw 0 8vw; }
  #special-section .inner {max-width: 100vw; margin-top: 3vw;}
  #special-section .ttImg {max-width: 98vw; width: 100%;}
  #special-section .list {max-width: 85vw; padding: 1vw 0;}
  #special .swiper-wrapper {display: block;}
  #special-section .item {margin: 2.5vw auto; width: calc(100% - 2vw); display: flex; justify-content: space-between; flex-flow: row nowrap;}
  #special-section .item .img {-ms-flex: 0 0 40%; -webkit-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; height: auto!important; margin: 0;}
  #special-section .item .txt {-ms-flex: 0 0 60%; -webkit-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; padding: 6vw 3vw; display: table;}
  #special-section .item .tt {display: table-cell; vertical-align: middle;}
  #special-section .item .txt .tt span {font-size: 4.15vw; width: 100%; line-height: 1.4; -webkit-line-clamp: 3; max-height: calc(1em * 1.4 * 3); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 0; }
  #special-section .btn {margin: 5vw auto 0; width: 60vw; height: auto; padding: 2px; border-radius: 8vw;}
  #special-section .btn span {border-radius: 8vw; font-size: 4.65vw; line-height: 11vw;}
}



#hottest {padding: 0rem; position: relative; z-index: 1;}
#hottest .ttImgWrap {position: relative; margin: 3rem auto 2rem;}
#hottest .ttImg {z-index: 1; width: 100%; max-width: 48rem; margin: auto;}


#hottest .inner {position: relative; padding: 0 0 3vw; max-width: 78rem; margin: auto;}
#hottest .inner > .row {max-width: 100%;}

@media (max-width: 80rem) {
  #hottest .inner {max-width: 88rem;}
}

@media (max-width: 40rem) {
  #hottest {padding: 3vw 0;}
  #hottest .ttImgWrap {margin: 0;}
  #hottest .ttImg {max-width: 98vw; width: 100%; margin-bottom: 0;}
  #hottest .inner {max-width: 88vw;}
}

.section {padding: 0;}
.section .secTTbox {position: relative;}
.section .secTTbox > .columns {padding: 0;}

.section .list {position: relative; z-index: 1;}
#voucher .item .txt .poiName {color: #777; font-size: .85rem; font-weight: 400; margin: 0;}
#voucher .item .txt .oDetailTitle {font-weight: 600;font-size: 1.1rem; letter-spacing: 0; margin-top: 0.2rem;}

.section .btn {display: block; position: absolute; bottom: 11%; left: 0; right: 0; margin: auto; max-width: 6.5rem; font-size: 1rem; font-weight: 600; line-height: 1.85; border-radius: 3rem; color: #fff; text-align: center; background: linear-gradient(to bottom, #fff9fc, #fccbd2, #fb507c, #fb507c, #ed4169, #e83964); background-position: 0 100%; background-size: 100% 200%; transition: all .3s ease-in-out;}


@media print, screen and (min-width: 48rem) {
  .section .inner > .row > .medium-3 {-ms-flex: 0 0 22%;-webkit-flex: 0 0 22%;flex: 0 0 22%;max-width: 22%;}
  .section .inner > .row > .medium-9 {-ms-flex: 0 0 78%;-webkit-flex: 0 0 78%;flex: 0 0 78%;max-width: 78%;}
  .section .secTTbox {height: 13rem;}
  .section .secTTbox:after {content: ''; display: block; position: absolute; z-index: 0; left: 0%; top: -10%; width: 100%; height: 120%;}
  #booking-section.section .secTTbox:after {background: url(../images/mainpage/offer-menu.png) no-repeat center; background-size: contain;}
  #voucher-section.section .secTTbox:after {background: url(../images/mainpage/offer-voucher.png) no-repeat center; background-size: contain;}
  #takeaway-section.section .secTTbox:after {background: url(../images/mainpage/offer-tas2.png) no-repeat center; background-size: contain;}
  #pay-section.section .secTTbox:after {background: url(../images/mainpage/offer-orpay.png) no-repeat center; background-size: contain;}

  .section .btn:hover {color: #d70052; background-position: 0 0;}
}

@media print, screen and (max-width: 48rem) {
  .section .secTTbox { width: 100%; height: 24vw; margin: 8vw auto 5vw;}
  #booking-section.section .secTTbox {background: url(../images/mainpage/poi_menu_m.png) no-repeat center; background-size: contain;}
  #voucher-section.section .secTTbox {background: url(../images/mainpage/poi_voucher_m.png) no-repeat center; background-size: contain;}
  #takeaway-section.section .secTTbox {background: url(../images/mainpage/poi_tas_m.png) no-repeat center; background-size: contain;}
  #pay-section.section .secTTbox {background: url(../images/mainpage/poi_orpay_m.png) no-repeat center; background-size: contain;}
}

@media (max-width: 80rem) {
  .item .img {height: 8.15vw;}
}


@media (max-width: 48rem) {
  .section {padding: 0 0 2vw; }
  .section:last-child {margin-bottom: 0;}
  .section .ttImg {max-width: 260px;}
  .section .list {/*background: none;*/}

  .item {font-size: 0; height: 100%; min-height: 30vw; border-radius: 2vw; width: 100%;}
  .item .img, .item .txt {display: inline-block; vertical-align: top; height: 100%!important;}
  .item .img {width: 37.5%; }
  .item .txt {width: 62%; font-size: 1rem; padding: .95rem .65rem 1rem 1rem; position: relative; }
  .item .txt p {color: #866950;}
  .item .txt small, #voucher .item .txt .poiName {margin-bottom: .5vw; font-size: 3.15vw; -webkit-line-clamp: 2; max-height: calc(1em * 1.2 * 2); overflow: hidden; text-overflow: ellipsis; display: block; display: -webkit-box; -webkit-box-orient: vertical; line-height: 1.2;}
  .item .txt .poiName, #voucher .item .txt .oDetailTitle {font-size: 4.15vw; height: auto; overflow:auto; -webkit-line-clamp: 3; max-height: calc(1em * 1.2 * 3); height: auto; overflow: hidden;}
  .item .txt .badge .offerTxt { color: #fff; display: inline-block;font-weight: 600;line-height: 1.8;border-radius: 3px;padding: 0 10px;background-color: #008043;min-width: 30px;text-align: center; margin-top: 10px;}
  .item .txt .badge .offerTxt small {display: inline-block; color: #fff; font-size: .8em;}

  .section .btn {bottom: auto; max-width: 40vw; padding-bottom: 0; position: relative; margin-top: 4vw;     border-radius: 8vw; background: linear-gradient(170deg, #964840, #fddeb4); padding: 2px; box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .35);}
  .section .btn span {display: block; font-size: 4.65vw; line-height: 11vw; border-radius: 8vw; background: linear-gradient(to bottom, #fa5f9e, #e2387a);}
  .section .poiBlock {padding-bottom: 0.5rem;}
}


#editors-section {padding: 0 1rem 4rem; position: relative; z-index: 1; margin-top: 1rem;}

#editors-section .ttImg {max-width: 48rem; width: 100%; margin-bottom: .75rem;}
#editors-section .inner {position: relative; padding: 0; max-width: 70rem; margin: 1.75rem auto 0;}
#editors-section .img {border-radius: 1rem; overflow: hidden; height: 100%;}
#editors-section .txt {background-color: #fff; padding: 1rem; border-radius: 1rem;}
#editors-section .txt p {height: calc(1em * 1.4 * 4); line-height: 1.4; font-size: 1.15rem; color: #111;}
#editors-section .txt .btn {color: #fff; text-align: center; border-radius: 3rem; margin: .35rem auto 0; float: right; display: block; width: 7rem; background: linear-gradient(170deg,#fddeb4, #964840); box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .35); padding: 2px;}
#editors-section .txt .btn span {display: block; border-radius: 3rem; width: 100%; line-height: 1.85; padding-bottom: .1rem; font-size: .9rem; font-weight: 600; text-align: center; background: linear-gradient(to bottom, #fff9fc, #fccbd2, #fa5f9e, #e2387a); background-position: 0 100%; background-size: 100% 200%; transition: all .3s ease-in-out;}

@media (min-width: 48rem) {
  #editors-section .swiper-slide {padding: 0 .5rem;}
  #editors-section .txt .btn:hover span {color: #d70052; background-position: 0 0;}
}

@media (max-width: 48rem) {
  #editors-section {padding: 0 0vw 12vw; margin-top: 0;}
  #editors-section .ttImg {width: 100%; max-width: 98vw; margin-bottom: 2vw;}
  #editors-section .inner {max-width: 88vw;}
  #editors-section .swiper-wrapper {display: block;}
  #editors-section .swiper-wrapper .swiper-slide {margin-bottom: 10px; border-radius: .85rem; overflow: hidden;}
  #editors-section .img, #editors-section .txt {border-radius: 0;}
  #editors-section .txt {padding: 1rem;}
  #editors-section .txt p {font-size: 3.65vw;}
  #editors-section .txt .btn {max-width: 23vw; width: 100%; border-radius: 8vw;}
  #editors-section .txt .btn span {font-size: 3.15vw; padding: 0 3vw; border-radius: 8vw; line-height: 2.15;}
}