@media (max-width: 48rem) {
  #headerNew .openrice-logo {display: block; width: 30vw; padding-bottom: 8vw; margin: auto;}
  #headerNew .openrice-logo > img {display: none;}
}

#bodyContent {position: relative;}

@media (min-width: 48rem) {
  #bodyContent {background: url(../images/mainpage/KV_02.jpg) no-repeat center 36.5vw / 100% auto;}
  #bodyContent:before {content: ''; display: block; position: absolute; width: 100%; padding-bottom: 36.5vw; top: 0; left: 0; background: url(../images/mainpage/KV_01.jpg) no-repeat center top / 100% auto;}
}

@media (max-width: 48rem) {
  .grid-button .grid > span {background-color: #fff;}
  .grid-button .grid > span:before, .grid-button .grid > span:after {background-color: #fff;}
  #bodyContent {background: url(../images/mainpage/mobile/bg.jpg) no-repeat center top / 100% auto; padding-top: 55px;}
}

@media (min-width: 48rem) {
  #bodyContent .deco {position: absolute;}
  #bodyContent .deco span {display: block; width: 100%; }
  #bodyContent .deco1 {width: 17vw; top: 5vw; left: 5.5vw;}
  #bodyContent .deco2 {width: 13vw; top: 0vw; left: 78vw;}
  #bodyContent .deco3 {width: 13vw; top: 44vw; left: 5vw;}
  #bodyContent .deco4 {width: 6vw; top: 45vw; left: 88vw;}
  #bodyContent .deco5 {width: 7vw; top: 70vw; left: 6vw;}
  #bodyContent .deco6 {width: 14vw; top: 62vw; left: 85vw;}
  #bodyContent .deco7 {width: 25vw; top: 82vw; left: 81vw;}
  #bodyContent .deco8 {width: 10vw; top: 115vw; left: 2.5vw; transform: rotate(8deg);}
  #bodyContent .deco9 {width: 13vw; top: 146vw; left: 85vw; transform: scaleX(-1);}
  #bodyContent .deco10 {width: 6vw; top: 169vw; left: 7vw;}
  #bodyContent .deco1 span {padding-bottom: 17vw; background: url(../images/mainpage/deco01.png) no-repeat center / contain; animation: float1 2.5s ease-in-out infinite alternate;}
  #bodyContent .deco2 span {padding-bottom: 13vw; background: url(../images/mainpage/deco03.png) no-repeat center / contain; animation: float2 2.5s ease-in-out infinite alternate;}
  #bodyContent .deco3 span {padding-bottom: 11vw; background: url(../images/mainpage/deco05.png) no-repeat center / contain; animation: float2 2.8s ease-in-out infinite alternate;}
  #bodyContent .deco4 span {padding-bottom: 7vw; background: url(../images/mainpage/deco02.png) no-repeat center / contain; animation: float3 3.3s ease-in-out infinite alternate;}
  #bodyContent .deco5 span {padding-bottom: 8vw; background: url(../images/mainpage/deco02.png) no-repeat center / contain; animation: float2 3s .5s ease-in-out infinite alternate;}
  #bodyContent .deco6 span {padding-bottom: 13vw; background: url(../images/mainpage/deco04.png) no-repeat center / contain; animation: float4 3.3s ease-in-out infinite alternate;}
  #bodyContent .deco7 span {padding-bottom: 25vw; background: url(../images/mainpage/deco06.png) no-repeat center / contain; animation: float2 2.5s ease-in-out infinite alternate;}
  #bodyContent .deco8 span {padding-bottom: 10vw; background: url(../images/mainpage/deco03.png) no-repeat center / contain; animation: float1 2.8s ease-in-out infinite alternate;}
  #bodyContent .deco9 span {padding-bottom: 11vw; background: url(../images/mainpage/deco05.png) no-repeat center / contain; animation: float3 3.2s ease-in-out infinite alternate;}
  #bodyContent .deco10 span {padding-bottom: 6vw; background: url(../images/mainpage/deco02.png) no-repeat center / contain; animation: float1 2.9s ease-in-out infinite alternate;}
}

@media (max-width: 80rem) {
  #bodyContent .deco8 {left: -.5vw;}
  #bodyContent .deco9 {left: 90vw;}
}



#indexTop {margin-top: 28vw;}
@media (max-width: 48rem) {
  #indexTop {margin-top: 46vw;}
}

#introBoxWrap {position: relative; z-index: 1;}
#introBoxWrap .container {position: relative; max-width: 65vw; margin: auto; z-index: 1;}
#introBoxWrap .textBlock img {width: 100%; margin: auto;}
#introBoxWrap .offerBlock {display: flex; flex-flow: row wrap; justify-content: space-between; max-width: 55vw; margin: auto;}
#introBoxWrap .offerBlock .intromenu {-ms-flex: 0 0 24%; -webkit-flex: 0 0 24%; flex: 0 0 24%; max-width: 24%;}
#introBoxWrap .offerBlock .intromenu span {display: block; padding-bottom: 115%;}
#introBoxWrap .offerBlock .intromenu:nth-child(1) span {background: url(../images/mainpage/offer01.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu:nth-child(2) span {background: url(../images/mainpage/offer02.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu:nth-child(3) span {background: url(../images/mainpage/offer03.png) no-repeat center / contain;}
#introBoxWrap .offerBlock .intromenu:nth-child(4) span {background: url(../images/mainpage/offer04.png) no-repeat center / contain;}
#introBoxWrap .dateBlock img {width: 28vw; margin: .25vw auto 0;}

@media (max-width: 48rem) {
  #introBoxWrap .container {max-width: 90vw; 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 .textBlock {order: 2;}
  #introBoxWrap .offerBlock {order: 1; padding: 0 5vw;}
  #introBoxWrap .offerBlock .intromenu {-ms-flex: 0 0 48%; -webkit-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;}
  #introBoxWrap .dateBlock {order: 3;}
  #introBoxWrap .dateBlock img {width: 82vw; 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: .75vw; height: 100%; overflow: hidden; width: 96%; margin: auto; position: relative; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .15);}
.item .img {position: relative; height: 7.315vw;}
.item .img .badge {position: absolute; top: .6vw; left: .6vw;}
.item .img .badge .offerTxt {font-size: 1vw; color: #fff; font-weight: 600; line-height: 1.8; border-radius: 3px; padding: 0 .6vw; background-color: #008043; min-width: 3vw; text-align: center;}
.item .txt {padding: 0.6vw .75vw .75vw;}
.item .txt p {color: #1c3ebb;}
.item .txt .tt {font-weight: 600; line-height: 1.4;}
.item .txt .poiName {font-weight: 600; font-size: 1vw; margin-top: 0.2vw; letter-spacing: 0;}
.item .txt small {color: #777; font-size: .75vw; display: block;}
.item .linkWrap {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}



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

#special-section .ttImgWrap {position: relative;}
#special-section .ttImg {z-index: 1; max-width: 32vw; width: 100%;}
#special-section .list {max-width: 68vw; margin: -1vw auto 0; background: url(../images/mainpage/frame.png) no-repeat center / 100% 100%; padding: 4.15vw 7vw 0;}

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

#special-section .btn {display: block; position: relative; margin: -3.5vw auto 0; width: 16vw; height: 4vw;font-size: 0; background: url(../images/mainpage/button.png) no-repeat center / contain;}
#special-section .btn span {position: relative; z-index: 2;}

@media (min-width: 48rem) {
  #special-section .list {min-height: 25.5vw; 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: 1.425vw; line-height: 1.15; -webkit-line-clamp: 2; height: calc(1em * 1.15 * 2); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
}

@media (max-width: 48rem) {
  #special-section .inner {max-width: 100vw; margin-top: 3vw;}
  #special-section .ttImg {max-width: 86vw; width: 100%;}
  #special-section .list {max-width: 94vw; background: url(../images/mainpage/mobile/frame_m.png) no-repeat center / 100% 100%; padding: 7vw 7vw 15vw;}
  #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 45%; -webkit-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; height: auto;}
  #special-section .item .txt {-ms-flex: 0 0 55%; -webkit-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; padding: 5vw 2vw 6vw 3vw; display: table;}
  #special-section .item .tt {display: table-cell; vertical-align: middle;}
  #special-section .item .txt .tt span {font-size: 4.5vw; width: 100%; line-height: 1.2; -webkit-line-clamp: 3; height: calc(1em * 1.2 * 3); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 0; }
  #special-section .btn {margin: -6vw auto 0; width: 50vw; height: 12vw;}
}



#hottest {padding: 0 1vw; position: relative; z-index: 1;}
#hottest .ttImgWrap {position: relative; margin: -1.5vw auto -1vw;}
#hottest .ttImg {z-index: 1; width: 100%; max-width: 30vw; margin: auto;}


#hottest .inner {position: relative; padding: 0 1vw 2.5vw; max-width: 70vw; margin: auto;}
#hottest .inner > .row {max-width: 100%;}

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

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

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

.section .list {position: relative; z-index: 1; /*background: #000; padding: .5vw .25vw;*/}
#voucher .item .txt .poiName {color: #777; font-size: .75vw; font-weight: 400; margin: 0;}
#voucher .item .txt .oDetailTitle {font-weight: 600;font-size: 1vw; letter-spacing: 0; margin-top: 0.2vw;}

.section .btn {display: block; position: absolute; bottom: 5%; left: 0; right: 0; margin: auto; width: 58%; padding-bottom: 25%;}


@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%; padding-right: 1vw;}
  .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: 12vw;}
  .section .secTTbox:after {content: ''; display: block; position: absolute; z-index: 0; left: 8%; top: -10%; width: 93%; height: 123%;}
  #booking-section.section .secTTbox:after {background: url(../images/mainpage/offer01v2.png) no-repeat center; background-size: contain;}
  #voucher-section.section .secTTbox:after {background: url(../images/mainpage/offer02v2.png) no-repeat center; background-size: contain;}
  #takeaway-section.section .secTTbox:after {background: url(../images/mainpage/offer03v2.png) no-repeat center; background-size: contain;}
  #pay-section.section .secTTbox:after {background: url(../images/mainpage/offer04v2.png) no-repeat center; background-size: contain;}
}

@media print, screen and (max-width: 48rem) {
  .section .secTTbox { width: 100%; height: 20vw; margin: 0 auto 1vw;}
  #booking-section.section .secTTbox {background: url(../images/mainpage/mobile/sec_title01_m.png) no-repeat center; background-size: contain;}
  #voucher-section.section .secTTbox {background: url(../images/mainpage/mobile/sec_title02_m.png) no-repeat center; background-size: contain;}
  #takeaway-section.section .secTTbox {background: url(../images/mainpage/mobile/sec_title03_m.png) no-repeat center; background-size: contain;}
  #pay-section.section .secTTbox {background: url(../images/mainpage/mobile/sec_title04_m.png) no-repeat center; background-size: contain;}
}

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


@media (max-width: 40rem) {
  .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: 115px; 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: 5px; font-size: 13px; -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: 1.4rem;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;}
  #special-section {padding: 10px 10px 3%; }

  #special-section .item {height: 100px; padding: 0;}
  #special-section .item .txt .tt span {font-size:1.3rem; width: 100%; -webkit-line-clamp: 3; max-height: calc(1.3rem * 1.4 * 3); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 0; }

  .section .btn {bottom: auto; width: 45%; padding-bottom: 0; position: relative; margin-top: 1rem;}
  .section .btn span {display: block; padding-bottom: 28%; background: url(../images/mainpage/mobile/bt02_m.png) no-repeat center / contain;}
  .section .poiBlock {padding-bottom: 0.5rem;}
}


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

#editors-section .ttImg {max-width: 28vw; width: 100%; margin-bottom: .75vw;}
#editors-section .inner {position: relative; padding: 0; max-width: 68vw; margin: auto;}
#editors-section .img {border-radius: 1vw; overflow: hidden; height: 100%;}
#editors-section .txt {background-color: #fff; padding: 1vw; border-radius: 1vw;}
#editors-section .txt p {height: calc(1em * 1.5 * 4); line-height: 1.5; font-size: 1vw;}
#editors-section .txt .btn {color: #fff;text-align: center;border-radius: 6vw;line-height: 2.2; margin: .35vw auto 0;float: right; padding: 0 1vw;display: block; font-size: .8vw; font-weight: 600; max-width: 8vw;box-shadow: 1.1px 1.7px 2px 0 rgba(30, 30, 30, 0.2);background-blend-mode: color-burn, normal;background-image: linear-gradient(to bottom, #1a22ef, #071185);}

@media (min-width: 48rem) {
  #editors-section .swiper-slide {padding: 0 1vw;}
  #editors-section .btn:hover {background-color: #ffc4cd;}
}

@media (max-width: 48rem) {
  #editors-section {padding: 0 0vw 8vw; }
  #editors-section .ttImg {width: 100%; max-width: 72vw; 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: 1rem;}
  #editors-section .txt .btn {font-size: 2.25vw; padding: 0 3vw; max-width: 18vw;}
}