@charset "UTF-8";
#HeroNews, #ReserVation * {
  color: #fff
}

.news_lists li a:hover .news_text h3, .news_more a, .reserv_note p span:not(.attention) a {
  text-decoration: underline
}

@media screen and (min-width:769px) {
  .mainvis_title-1:after, .mainvis_title-1:before {
    background-position: 0 3pc;
    -webkit-animation: a .5s forwards;
    animation: a .5s forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
  }
  .mainvis_title-2:after, .mainvis_title-2:before {
    background-position: 0 3pc;
    -webkit-animation: a .5s forwards;
    animation: a .5s forwards;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s
  }
}

@-webkit-keyframes a {
  0 {
    background-position: 0 3pc
  }
  to {
    background-position: 0 0
  }
}

@keyframes a {
  0 {
    background-position: 0 3pc
  }
  to {
    background-position: 0 0
  }
}

#HeroArea {
  background: #222;
  position: relative
}

#HeroNews {
  padding: .5em;
  text-align: center;
  background: #000;
  line-height: 1.5em
}

#MainVisual {
  height: 86vh
}

.slideshow li, .slideshow:after {
  width: 100%;
  height: 100%;
  position: absolute
}

.slideshow {
  background: #fff
}

.slideshow li {
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: scale(0.95)translateY(0);
  transform: scale(0.95)translateY(0);
  -webkit-transition: opacity 1.5s 0 linear, -webkit-transform 0 2s linear;
  transition: opacity 1.5s 0 linear, -webkit-transform 0 2s linear;
  transition: opacity 1.5s 0 linear, transform 0 2s linear;
  transition: opacity 1.5s 0 linear, transform 0 2s linear, -webkit-transform 0 2s linear
}

.slideshow li img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%)
}

.slideshow li.is_active {
  opacity: 1;
  -webkit-transform: scale(1)translateY(-10px);
  transform: scale(1)translateY(-10px);
  -webkit-transition: opacity 1.5s 0 linear, -webkit-transform 8s 0 linear;
  transition: opacity 1.5s 0 linear, -webkit-transform 8s 0 linear;
  transition: opacity 1.5s 0 linear, transform 8s 0 linear;
  transition: opacity 1.5s 0 linear, transform 8s 0 linear, -webkit-transform 8s 0 linear
}

.slideshow:after {
  content: "";
  display: block;
  top: 0;
  left: 0;
  background-image: linear-gradient(-45deg, #333 1%, grey 1%, grey 49%, #333 49%, #333 51%, grey 51%, grey 99%, #333 99%, #333);
  background-size: 4px 4px;
  opacity: .2
}

.mainvis_title-1:after, .mainvis_title-1:before, .mainvis_title-2:after, .mainvis_title-2:before {
  content: "";
  display: block;
  margin-top: -50px;
  margin-left: -296px;
  width: 37pc;
  height: 39px;
  position: absolute;
/*  top: 50%;*/
  top:40%;
  left: 50%;
  opacity: .9;
  background-size: contain;
  background-image: url(/assets/img/top/top_title-1-1.png);
  background-repeat: no-repeat
}

.mainvis_title-1:after, .mainvis_title-2:after {
  background-image: url(/assets/img/top/top_title-2-1.png)
}

@media screen and (max-width:768px) {
  #HeroNews {
    padding: .5em 1em;
    text-align: left
  }
  .mainvis_title-1:after, .mainvis_title-1:before, .mainvis_title-2:after, .mainvis_title-2:before {
    margin-left: -148px;
    margin-top: -75px;
    width: 296px;
    height: 19px
  }
}

.mainvis_title-2:before {
  background-image: url(/assets/img/top/top_title-1-2.png)
}

.mainvis_title-2:after {
  background-image: url(/assets/img/top/top_title-2-2.png)
}

.mainvis_title-2:after, .mainvis_title-2:before {
  margin-top: 0;
  height: 28px
}

.backgroundblendmode .mainvis_title-1:after, .backgroundblendmode .mainvis_title-1:before, .backgroundblendmode .mainvis_title-2:after, .backgroundblendmode .mainvis_title-2:before {
  mix-blend-mode: color-dodge;
  opacity: 1
}

#ReserVation {
  position: absolute;
  bottom: 7px;
  left: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.6rem;
  z-index: 1
}

.ReserVation_inner {
  position: relative
}

.ReserVation_inner .ReserVcomment {
  position: absolute;
  top: -94px;
  left: -20px;
  z-index: 2
}

@media screen and (max-width:768px) {
  .ReserVation_inner .ReserVcomment {
    top: -94px;
    left: 0
  }
  .ReserVation_inner .ReserVcomment img {
    max-width: 100%
  }
}

@media screen and (min-width:769px) {
  #ReserVation {
    margin-left: -5in;
    width: 60pc
  }
}

@media screen and (max-width:768px) {
  .mainvis_title-2:after, .mainvis_title-2:before {
    margin-top: -50px;
    height: 14px
  }
  #ReserVation {
    margin-left: -48%;
    width: 96%
  }
  .reserv_column_input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}

.reserv_link {
  border: 1px solid #fff;
  text-align: center;
  background: rgba(255, 43, 62, .9)
}

@media screen and (min-width:769px) {
  .reserv_column_input {
    float: left;
    width: 50pc
  }
  .reserv_column_search {
    float: right;
    width: 150px
  }
  .reserv_link {
    float: left;
    height: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background .3s;
    transition: background .3s
  }
  .reserv_link:hover {
    background: rgba(255, 43, 62, .7)
  }
  .reserv_link a {
    width: 200px;
    padding-top: .3em;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
  }
}

@media screen and (max-width:768px) {
  .reserv_link {
    width: 39%;
    font-size: 1.2rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}

.reserv_link a {
  display: block
}

@media screen and (max-width:768px) {
  .reserv_link a {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
}

.reserv_link a span {
  margin-top: .5em;
  display: block;
  font-size: 1.2rem
}

@media screen and (min-width:769px) {
  .lang_en #ReserVation {
    width: 980px
  }
  .lang_en .reserv_column_input {
    width: 820px
  }
  .lang_en .reserv_link a {
    width: 220px
  }
  .lang_es #ReserVation {
    width: 1030px
  }
  .lang_es .reserv_column_input {
    width: 870px
  }
  .lang_es .reserv_link a {
    width: 270px
  }
  .reserv_input-checkin, .reserv_input-checkout {
    margin-top: -23px;
    margin-left: 15px;
    float: left
  }
  .reserv_input-checkin label, .reserv_input-checkout label {
    margin-bottom: .5em
  }
}

@media screen and (max-width:768px) {
  .reserv_link a span {
    font-size: 1rem
  }
  .reserv_input {
    width: 59%
  }
  .reserv_input-checkin, .reserv_input-checkout {
    padding: 0 5px;
    border: 1px solid #fff;
    font-size: 1.2rem;
    line-height: 1.5em;
    background: rgba(0, 0, 0, .6)
  }
}

.reserv_input-checkin label, .reserv_input-checkout label {
  display: block
}

.reserv_input-checkin input, .reserv_input-checkout input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  background-image: url(/assets/img/icon_calender.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  cursor: pointer
}

@media screen and (min-width:769px) {
  .reserv_input-checkin input, .reserv_input-checkout input {
    padding: 10px 10px 10px 50px;
    width: 280px;
    height: 50px;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, .6)
  }
}

@media screen and (max-width:768px) {
  .reserv_input-checkin input, .reserv_input-checkout input {
    background-color: transparent;
    padding: 2px 10px 2px 20px;
    width: 100%;
    height: 22px;
    background-size: 15px;
    background-position: left center
  }
}

.attention {
  margin-top: -3px;
  margin-left: 3px;
  padding: 1px 2px;
  background: #e85398;
  display: inline-block;
  line-height: 1em;
  color: #222!important
}

:placeholder-shown {
  color: #fff
}

::-webkit-input-placeholder {
  color: #fff
}

:-moz-placeholder, ::-moz-placeholder {
  opacity: 1;
  -ms-filter: "alpha(opacity=100)";
  color: #fff
}

:-ms-input-placeholder {
  color: #fff
}

.reserv_button-search {
  border: 1px solid #fff;
  background: rgba(0, 0, 0, .6);
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer
}

@media screen and (min-width:769px) {
  .reserv_button-search {
    width: 100%;
    height: 50px
  }
  .reserv_button-search:hover {
    background: rgba(0, 0, 0, .1)
  }
}

@media screen and (max-width:768px) {
  .reserv_input-checkout {
    margin-top: 5px
  }
  .reserv_button-search {
    margin-top: 5px;
    clear: both;
    display: block;
    font-size: 1.3rem;
    width: 100%;
    line-height: 39px
  }
}

.reserv_note ul {
  text-align: right
}

.reserv_note ul li {
  margin-left: 10px;
  display: inline-block
}

.reserv_note p {
  position: absolute;
  bottom: 0
}

.reserv_note p span:not(.attention) {
  margin-right: 10px
}

@media screen and (max-width:768px) {
  .reserv_note ul {
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
  .reserv_note ul li {
    margin-left: 0
  }
  .reserv_note p {
    position: static;
    bottom: 0
  }
}

#CONCEPT, #MainAddress, #NEWS {
  text-align: center
}

#CONCEPT, .about_column_image {
  position: relative;
  overflow: hidden
}

.flatpickr-day.disabled, .flatpickr-day.nextMonthDay {
  color: #333;
  opacity: .3
}

.sat {
  color: #00f
}

.sun {
  color: red
}

.main_menu_lists {
  background: #ff6784;
  background: -webkit-gradient(linear, left top, right top, from(#ff6784), color-stop(44%, #ff81a7), color-stop(83%, #ff609f));
  background: linear-gradient(to right, #ff6784 0, #ff81a7 44%, #ff609f 83%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch
}

.main_menu_lists li {
  border-right: 1px solid #ff5db3;
  width: 16.6%;
  display: table;
  height: 90pt
}

.main_menu_lists li a {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  letter-spacing: .1em;
  font-family: Josefin Sans, YuGothic, Yu Gothic, sans-serif;
  vertical-align: initial;
  vertical-align: middle;
  font-display: swap;
  font-size: 2.2rem;
  font-weight: 700
}

@media screen and (min-width:769px) {
  .main_menu_lists li a {
    -webkit-transition: background .3s;
    transition: background .3s
  }
  .main_menu_lists li a:hover {
    background: hsla(0, 0%, 100%, .2)
  }
  #MainAddress dl {
    display: inline-block
  }
  #MainAddress dl:after {
    margin-right: .5em;
    content: "|";
    color: #888
  }
}

.main_menu_lists .booking {
  border-right: 0;
  background: #ff234e
}

.main_menu_lists .booking .hvr-sweep-to-bottom:before {
  background: rgba(0, 0, 0, .2)
}

.IS_IPAD .main_menu_lists li a {
  font-size: 1.7rem
}

#MainAddress {
  background: #ede5e5
}

#MainAddress dl {
  letter-spacing: .05em
}

#MainAddress dl dd, #MainAddress dl dt {
  margin-right: .5em;
  display: inline-block
}

@media screen and (min-width:769px) {
  #MainAddress {
    padding: 13px
  }
  #MainAddress dd, #MainAddress dl, #MainAddress dt {
    line-height: 1em;
    vertical-align: baseline
  }
  .googlemap {
    display: inline-block
  }
}

.address-en dd, .address-en dt, .googlemap, .oishi_contact dd {
  font-family: Josefin Sans, YuGothic, Yu Gothic, sans-serif;
  vertical-align: initial;
  font-display: swap
}

@media screen and (max-width:768px) {
  #MainAddress dl dt {
    color: #816c72
  }
  #MainAddress {
    padding: 10px;
    font-size: 1.2rem;
    line-height: 1.5em
  }
  .googlemap {
    margin-top: 10px;
    text-align: center
  }
  .googlemap a {
    padding: 3px 20px 0;
    display: inline-block;
    background: #fff;
    border: 1px solid #d3c4c4
  }
}

.address-en dd, .address-en dt {
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 700
}

.googlemap {
  color: #e85398;
  font-weight: 700
}

#CONCEPT, #OISHI, #STAY {
  color: #fff
}

#CONCEPT .title_level1 {
  mix-blend-mode: overlay;
  opacity: .7
}

.concept_inner {
  background: url(/assets/img/top/top_bg_concept.jpg)center;
  background-size: cover;
  padding: 75pt 0
}

@media screen and (max-width:768px) {
  .concept_inner {
    background-position: 0 100%;
    padding: 40px 4%
  }
  #ABOUT .title_level2, #ABOUT .title_level4 {
    text-align: center
  }
}

#ABOUT {
  background: #fff5fb
}

#ABOUT .wave-bottom, #ABOUT .wave-top {
  mix-blend-mode: inherit;
  opacity: .1;
  z-index: 1
}

.about_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%
}

@media screen and (max-width:425px) {
  #CONCEPT .title_level4 {
    letter-spacing: -.04em
  }
  .about_inner {
    display: block;
    margin: 40px auto;
    width: 92%
  }
}

.about_column_text {
  width: 60%
}

@media screen and (min-width:769px) {
  .about_column_text {
    padding: 75pt 5pc
  }
}

@media screen and (max-width:768px) {
  .about_column_text {
    padding: 50px 40px
  }
  #STAY .title_level2 {
    text-align: center
  }
}

@media screen and (max-width:425px) {
  .about_column_text {
    padding: 0;
    width: 100%;
    display: block
  }
}

.about_column_image {
  width: 40%
}

.about_column_image img {
  width: auto;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0
}

@media screen and (max-width:425px) {
  .about_column_image {
    margin-top: 20px;
    width: 100%;
    display: block
  }
  .about_column_image img {
    position: static;
    width: 100%;
    height: auto
  }
}

#STAY .stay_inner {
  background: url(/assets/img/top/top_bg_stay.jpg);
  background-size: cover
}

.stay_links {
  overflow: hidden
}

@media screen and (min-width:769px) {
  #STAY .stay_inner {
    padding: 75pt 5pc 70px
  }
  #STAY .section_inner, #STAY .stay_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
  .stay_column_text {
    margin-right: 40px;
    min-width: 445px
  }
  .stay_links li {
    margin-right: 10px;
    float: left
  }
}

@media screen and (max-width:768px) {
  #STAY .stay_inner {
    padding: 40px 4% 35px;
    width: 92%
  }
  .stay_links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
  .stay_links li {
    width: 48%
  }
  .stay_links li a {
    width: 100%;
    font-size: 1.2rem;
    border-radius: 7px
  }
  .stay_column_icon {
    margin-top: 10px
  }
}

.stay_icons {
  overflow: hidden
}

.stay_icons li {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1em;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

@media screen and (min-width:769px) {
  .stay_column_icon, .stay_icons {
    width: 5in
  }
  .stay_icons li {
    margin-bottom: 20px;
    padding-left: 60px;
    width: 10pc;
    height: 55px;
    font-size: 1.2rem
  }
}

@media screen and (max-width:768px) {
  .stay_icons li {
    margin-bottom: 10px;
    width: 33.3%;
    font-size: 1rem
  }
}

@media screen and (min-width:769px) {
  .stay_icons [class^=icons-] {
    margin-right: 10px;
    font-size: 5.5rem;
    position: absolute;
    top: 0;
    left: 0
  }
}

.stay_photos {
  background: #222
}

.stay_photos img {
  width: 100%
}

.stay_photos .floatL {
  width: 76%
}

@media screen and (max-width:768px) {
  .stay_icons [class^=icons-] {
    margin-right: 10px;
    font-size: 2.6rem
  }
  .stay_photos .floatL {
    width: 100%
  }
}

.stay_photos .floatR {
  width: 24%
}

#NEWS {
  background: #fff5fb
}

#NEWS .wave-bottom, #NEWS .wave-top {
  mix-blend-mode: inherit;
  opacity: .1
}

#NEWS .title_level1 {
  margin-bottom: 60px
}

@media screen and (max-width:768px) {
  .stay_photos .floatR {
    width: 100%;
    position: relative;
    overflow: hidden
  }
  .stay_photos .floatR .stay_photos02, .stay_photos .floatR .stay_photos03 {
    width: 50%
  }
  .stay_photos .floatR .stay_photos02 img, .stay_photos .floatR .stay_photos03 img {
    width: 100%
  }
  .stay_photos .floatR .stay_photos02 {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }
  .stay_photos .floatR .stay_photos03 {
    margin-left: 50%
  }
  #NEWS .title_level1 {
    margin-bottom: 30px
  }
}

.news_lists {
  overflow: hidden;
  margin: 0 auto;
  width: 100%
}

@media screen and (min-width:769px) {
  .news_lists {
    width: 60pc
  }
}

@media screen and (max-width:768px) {
  .news_lists {
    width: 680px
  }
}

@media screen and (max-width:425px) {
  .news_lists {
    width: 100%
  }
}

.news_lists li {
  margin-right: 5%;
  width: 30%;
  float: left;
  text-align: left;
  overflow: hidden
}

#LOCATION, #OISHI, .fun_inner, .oishi_contact, .oishi_inquiry {
  text-align: center
}

.news_lists li:last-child {
  margin-right: 0
}

.news_lists li a:hover .news_image {
  opacity: .5;
  -webkit-transition: opacity .5s;
  transition: opacity .5s
}

@media screen and (max-width:425px) {
  .news_lists li {
    margin-bottom: 10px;
    width: 100%;
    overflow: hidden
  }
  .news_lists li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}

.news_image {
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  width: 277px;
  height: 277px;
  position: relative
}

@media screen and (max-width:768px) {
  .news_image {
    width: 204px;
    height: 204px
  }
}

@media screen and (max-width:425px) {
  .news_image {
    margin-bottom: 0;
    margin-right: 10px;
    width: 75pt;
    height: 75pt;
    min-width: 75pt
  }
  #OISHI {
    text-align: left
  }
}

.news_image img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  max-height: 100%
}

.news_more, .oishi_photos {
  position: relative
}

.news_text {
  line-height: 1.5em;
  font-size: 1.5rem
}

.news_date, .news_tag {
  margin-right: .5em;
  display: inline-block
}

#OISHI {
  background: url(/assets/img/top/top_bg_oishi.jpg)center;
  background-size: cover
}

#OISHI img {
  width: 100%;
  height: auto
}

.oishi_title {
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width:769px) {
  .news_date, .news_tag {
    font-size: 1.2rem
  }
  .oishi_title {
    width: 241px;
    height: 85px
  }
  .oishi_footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}

.oishi_photos-img01, .oishi_photos-img03 {
  margin-bottom: 20px
}

@media screen and (max-width:768px) {
  .news_text {
    font-size: 1.2rem
  }
  .news_date, .news_tag {
    font-size: 1rem
  }
  .oishi_title {
    width: 9pc;
    height: 51px
  }
  .oishi_photos-img01, .oishi_photos-img03 {
    margin-bottom: 13px
  }
}

@media screen and (max-width:425px) {
  .oishi_photos-img01, .oishi_photos-img03 {
    margin-bottom: 7px
  }
}

.oishi_photos-L {
  float: left;
  width: 32%
}

.oishi_photos-R {
  float: right;
  width: 66.3%
}

.oishi_logo {
  width: 10pc;
  height: 57px;
  position: absolute;
  bottom: -5pc;
  left: 0
}

.oishi_contact dl {
  display: inline-block
}

.oishi_contact dt {
  font-size: 1rem
}

.oishi_contact dd {
  font-size: 2.2rem;
  line-height: 1.5em;
  font-weight: 400
}

.oishi_contact .oishi_reserve dd:after {
  content: "/"
}

@media screen and (max-width:768px) {
  .oishi_contact {
    overflow: hidden
  }
  .oishi_contact dd {
    font-size: 2.1rem;
    font-family: Josefin Sans, YuGothic, Yu Gothic, sans-serif;
    font-weight: 400;
    vertical-align: initial;
    font-display: swap
  }
}

.oishi_hitosara_btn {
  margin: 10px 0 5px 10px
}

.oishi_hitosara_btn a {
  padding: 0 20px;
  line-height: 2em;
  display: block;
  color: #5744a4;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #fff), color-stop(50%, #f3f1f1), to(#f3f1f1));
  background: linear-gradient(#fff, #fff 50%, #f3f1f1 50%, #f3f1f1);
  vertical-align: baseline
}

@media screen and (max-width:425px) {
  .oishi_hitosara_btn a {
    line-height: inherit
  }
}

#FUN .title_level1 {
  margin-bottom: 30px
}

@media screen and (max-width:768px) {
  .oishi_hitosara_btn a {
    padding: 10px 20px
  }
  #FUN .title_level1 {
    margin-bottom: 15px
  }
  #FUN .lead_text {
    text-align: center
  }
}

.fun_inner {
  position: relative
}

.insta_slide-footer, .insta_slide-header {
  position: absolute;
  left: 0
}

.insta_slide-header {
  top: 0
}

@media screen and (min-width:769px) {
  .oishi_hitosara_btn a {
    -webkit-transition: background .3s;
    transition: background .3s
  }
  .oishi_hitosara_btn a:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, #fff), color-stop(50%, #faebeb), to(#faebeb));
    background: linear-gradient(#fff, #fff 50%, #faebeb 50%, #faebeb)
  }
  .fun_inner {
    padding: 100px 0 50px
  }
  .fun_sns {
    margin: 20px auto 45px
  }
  .insta_slide-header {
    -webkit-animation: b 50s linear infinite;
    animation: b 50s linear infinite
  }
}

@media screen and (max-width:768px) {
  .fun_inner {
    padding: 50px 0 25pt;
  }
  .insta_logo {
    width: 55px;
    height: auto
  }
  .insta_slide-header {
    -webkit-animation: d 50s linear infinite;
    animation: d 50s linear infinite
  }
}

.insta_slide-footer {
  bottom: 0
}

@-webkit-keyframes b {
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-3000px);
    transform: translateX(-3000px)
  }
}

@keyframes b {
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-3000px);
    transform: translateX(-3000px)
  }
}

@-webkit-keyframes c {
  0 {
    -webkit-transform: translateX(-2700px);
    transform: translateX(-2700px)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes c {
  0 {
    -webkit-transform: translateX(-2700px);
    transform: translateX(-2700px)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@-webkit-keyframes d {
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-800px);
    transform: translateX(-800px)
  }
}

@keyframes d {
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  to {
    -webkit-transform: translateX(-800px);
    transform: translateX(-800px)
  }
}

@-webkit-keyframes e {
  0 {
    -webkit-transform: translateX(-720px);
    transform: translateX(-720px)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes e {
  0 {
    -webkit-transform: translateX(-720px);
    transform: translateX(-720px)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

#LOCATION {
  background: #23132d;
  color: #fff;
  position: relative
}

#LOCATION .wave-bottom, #LOCATION .wave-top {
  mix-blend-mode: unset;
  opacity: .7;
  z-index: 1
}

@media screen and (min-width:769px) {
  .insta_slide-footer {
    -webkit-animation: c 50s linear infinite;
    animation: c 50s linear infinite
  }
  .insta_lists {
    height: 300px
  }
  .insta_lists img {
    width: 300px;
    height: 300px
  }
  .location_inner {
    margin: 75pt 0 0
  }
}

@media screen and (max-width:768px) {
  .insta_slide-footer {
    -webkit-animation: e 50s linear infinite;
    animation: e 50s linear infinite
  }
  .insta_lists {
    height: 5pc
  }
  .insta_lists img {
    width: 5pc;
    height: 5pc
  }
  .location_inner {
    margin: 40px auto 0;
    width: 90%
  }
}

.location_access, .location_address {
  font-size: 1.4rem
}

.location_access {
  font-weight: 400
}

.location_more {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1
}

@media screen and (min-width:769px) {
  .location_map img {
    width: 100%
  }
  .location_more {
    bottom: 45px
  }
}

@media screen and (max-width:768px) {
	.location_map img {
		max-width: 100%;
	}
  .location_more {
    bottom: 15px
  }
}

/* ===============================
	 FUN slider追加
 =============================== */
.fun_slider {
	margin: 0 auto;
	height: 300px;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.fun_slider ul{
	height: 300px;
	float: left;
	display: inline;
	overflow: hidden;
	-webkit-animation: b 50s linear infinite;
	animation: b 50s linear infinite;
}
.fun_slider ul li {
	width: 300px;
	height: 300px;
	float: left;
	display: inline;
	overflow: hidden;
}
.fun_slider ul li img{
	max-width: 100%;
}
.fun_slider ul:after{
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.fun_slider ul {
	display: inline-block;
	overflow: hidden;
}

@media screen and (max-width:768px) {
	.fun_slider {
		height: 160px;
	}
	.fun_slider ul{
		height: 160px;
	}
	.fun_slider ul li {
		width: 160px;
		height: 160px;
	}
}


/* ===============================
	 LOCATION modal追加
 =============================== */
#LOCATION .location_map{
	position: relative;
}
#LOCATION button.modal_btn{
	background: none;
	position: absolute;
	outline: none;
}
#LOCATION button.modal_btn:hover{
	cursor: pointer;
}
#LOCATION button.modal_btn span.add_circle{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
#LOCATION button.modal_btn span.add_circle:before{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	background: url(/assets/img/location/circle.png) center center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	-webkit-transition: 0.30s;
	-moz-transition: 0.30s;
	-ms-transition: 0.30s;
	-o-transition: 0.30s;
	transition: 0.30s;
}
#LOCATION button.modal_btn span.add_circle:hover::before {
	-webkit-transform: rotateZ(180deg);
		 -moz-transform: rotateZ(180deg);
			-ms-transform: rotateZ(180deg);
			 -o-transform: rotateZ(180deg);
					transform: rotateZ(180deg);
}
#LOCATION button.modal_btn img{
	width: 100%;
}
#LOCATION button#btn_yoyogi{
	top: 3.1%;
	left: 35.7%;
	width: 11.5%;
}
#LOCATION button#btn_takeshita{
	top: 11.3%;
	right: 29.5%;
	width: 11.5%;
}
#LOCATION button#btn_omotesando{
	bottom: 35.6%;
	right: 26.7%;
	width: 11.4%;
}
#LOCATION button#btn_scramble{
	top: 31.5%;
	left: 31.2%;
	width: 9.2%;
}
#LOCATION button#btn_109{
	top: 36.5%;
	left: 17.7%;
	width: 14.3%;
}
#LOCATION button#btn_asakusa{
	top: 22.9%;
	right: 8%;
	width: 5.6%;
}
#LOCATION button#btn_skytree{
	top: 22.9%;
	right: 2.2%;
	width: 5.6%;
}
#LOCATION button#btn_stadium{
	top: 0;
	right: 24%;
	width: 5.6%;
}
#LOCATION button#btn_bayarea1{
	bottom: 15%;
	right: 26%;
	width: 5.6%;
}
#LOCATION button#btn_bayarea2{
	bottom: 15%;
	right: 20%;
	width: 5.6%;
}
#LOCATION button#btn_bayarea3{
	bottom: 15%;
	right: 14%;
	width: 5.6%;
}

@media only screen and (max-width: 768px){
	#LOCATION .location_map .flexbox_sp{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px;
		margin-bottom: 50px;
	}
	#LOCATION button#btn_yoyogi{
		top: 2%;
    left: 35%;
    width: 20%;
	}
	#LOCATION button#btn_takeshita{
		top: 4.3%;
    right: 3%;
    width: 19%;
	}
	#LOCATION button#btn_omotesando{
		bottom: auto;
		top: 36%;
    right: 2.7%;
    width: 21.4%;
	}
	#LOCATION button#btn_scramble{
		top: 18.5%;
    left: 28.2%;
    width: 17.2%;
	}
	#LOCATION button#btn_109{
		top: 27.5%;
    left: 9.7%;
    width: 19.3%;
	}
	#LOCATION .location_map .flexbox_sp .bayarea{
		width: 49%;
	}
	#LOCATION .location_map .flexbox_sp .bayarea .inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#LOCATION button#btn_asakusa,
	#LOCATION button#btn_skytree,
	#LOCATION button#btn_stadium{
		position: static;
		width: 15%;
	}	
	#LOCATION button#btn_bayarea1,
	#LOCATION button#btn_bayarea2,
	#LOCATION button#btn_bayarea3{
		position: static;
		width: 30%;
	}	
	#LOCATION span.sp_text{
		padding-top: 5px;	
	}
}

.modal.inline {
	overflow: auto;
	overflow-x: hidden;
}
.modal {
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	padding: 40px 0 30px;
	box-sizing: border-box;
}
.modal .modal_wrap {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 920px;
	position: relative;
	height: 100%;
	box-sizing: border-box;
}
.modal .modal_container {
	width: 100%;
	padding: 60px 40px 40px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
	box-sizing: border-box;
}
.modal .modal_wrap .modal_close_btn {
	cursor: pointer;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1000;
}
.modal .modal_wrap .gmap_rute{
	width: 100%;
	height: 500px;
}
.modal .modal_wrap .btn_serchrute{
	text-align: center;
	margin-top: 20px;
}

@media only screen and (max-width: 768px){
	.modal.inline {
		overflow-y: scroll;
		height: 100%;
		padding: 0;
	}
	.modal .modal_wrap {
		max-width: 100%;
		padding: 20px;
		height: 100%;
		position: relative;
	}
	.modal .modal_container {
		width: 100%;
		height: 100%;
		padding: 40px 20px 60px;
		background: #fff;
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		-webkit- transform: none;
		box-sizing: border-box;
	}
	.modal .modal_wrap .modal_close_btn {
		top: 0;
    right: 0;
	}
	.modal .modal_wrap .gmap_rute{
		width: 100%;
		height: 100%;
	}
	.modal .modal_wrap .btn_serchrute{
		margin-top: 15px;
	}
}


/* ===============================
	 SPECIAL CONTENTS追加（コロナ）
 =============================== */
.modal_btn2{
  font-size: 18px;
  font-family: YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ\ Ｐゴシック,sans-serif;
  font-weight: bold;
  color: #0d70bb;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  padding: 10px 25px;
  border: 2px solid #0d70bb;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(0) translateX(-50%);
  -webkit- transform: translateY(0) translateX(-50%);
  margin-top: 43px;
  cursor: pointer;
}
.modal_btn2,.modal_btn2:active,.modal_btn2:hover{
  outline: none;
}
.modal_btn2:hover{
  opacity: .7;
}

@media only screen and (max-width: 768px){
  .modal_btn2{
    font-size: 12px;
    margin-top: -25px;
    padding: 10px;
    margin-left:-101px;
    transform: translateY(0) translateX(0);
    -webkit- transform: translateY(0) translateX(-);
  }
}

@media only screen and (max-width: 320px){
  .modal_btn2{
    font-size: 14px;
  }
}

.modal#js-modal .modal_wrap{
  max-width: 100%;
}
.modal-inner{
  font-family: YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ\ Ｐゴシック,sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 90vh;
  max-width: 1370px;
  background-color: rgba(255,255,255,0.9);
  z-index: 2;
  overflow: hidden;
}

@media only screen and (max-width: 768px){
  .modal-inner{
    width: 90%;
    height: 90vh;
  }
}

.modal_ttl_area{
  background: #d3edfb;
  color: #0065b6;
  padding: 30px 30px 15px;
  text-align: center;
  position: relative;
}
.modal#js-modal .modal_ttl_area .modal_close_btn{
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translate(0,-50%);
  cursor: pointer;
}

@media only screen and (max-width: 767px){
  .modal#js-modal .modal_ttl_area .modal_close_btn{
    width: 30px;
    top: 10px;
    right: 7px;
    transform: none;
  }
  .modal#js-modal .modal_ttl_area .modal_close_btn img{
    max-width: 100%;
  }
}

.modal_ttl_area h2{
  font-size: 20px;
  font-weight: bold;
  padding: .5em 0;
}

@media only screen and (max-width: 767px){
  .modal_ttl_area h2{
    font-size: 18px;
    padding: .3em 0;
  }
}

.modal-inner .modal-contents{
  padding: 42px 50px 42px 50px;
  color: #0065b6;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal-contents{
    padding: 20px 10px 0;
  }
}

.modal-inner .modal_contents_inner{
  overflow-y: scroll;
  height: calc(100% - 120px);
  padding-bottom: 20px;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal_contents_inner{
    overflow-y: scroll;
    height: calc(100% - 160px);
    padding-bottom: 20px;
  }
}

.modal-inner .modal_contents_inner::-webkit-scrollbar {
    width: 10px;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal_contents_inner::-webkit-scrollbar {
    width: 6px;
  }
}

.modal-inner .modal_contents_inner::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
.modal-inner .modal_contents_inner::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#e74993;
}

.modal-inner .modal-contents section + section{
  margin-top: 50px;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal-contents section + section{
    margin-top: 30px;
  }
}

.modal-inner .modal-contents h3{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal-contents h3{
    font-size: 16px;
  }
}

.modal-inner .modal-contents h3 span{
  display: block;
  font-size: 12px;
  font-weight: normal;
  margin-top: 5px;
}
.modal-inner .modal-contents ul{
  display: flex;
  flex-wrap: wrap;
  margin-right: 20px;
  height: 100%;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal-contents ul{
    margin-right: 5px;
  }
}

.modal-inner .modal-contents ul li{
  width: calc(99% / 6);
  padding: 0 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px){
  .modal-inner .modal-contents ul li{
    width: calc(100% / 3);
    padding: 0 5px;
    margin-bottom: 15px;
    box-sizing: border-box;
  }
}

.modal-inner .modal-contents ul li img{
  max-width: 100%;
}

.modal-inner .modal-contents .modal_icon{
  padding: 30px 0 60px;
}

@media only screen and (max-width: 767px){
  .modal-inner .modal-contents .modal_icon{
    max-width: 50%;
    padding: 20px 0;
    margin: auto;
  }
  .modal-inner .modal-contents .modal_icon img{
    max-width: 100%;
  }
}

.modal-inner .modal-contents .modal_icon + p{
  font-size: 16px;
  line-height: 1.4;
  font-weight: bold;
  color: #e95098;
}
.modal-inner .modal-contents .modal_icon + p > span{
	display: block;
	margin-top:10px;
}