@charset "utf-8";
/* CSS Document */
/* -----------------------------------------------------------
	main
----------------------------------------------------------- */
.uk-link, a {
  color: #3A4861;
}
.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
  color: #3A4861;
  text-decoration: none
}
/* -----------------------------------------------------------
	header
----------------------------------------------------------- */
#rr_header .headernav {
  background: none;
  border: none
}
#bookingbtn {
  z-index: 1000
}
#rr_header .rr-logo > img {
  max-height: 40px;
}
header#rr_header {
  height: 80px
}
#rr_header .selecthotels_form {
  width: 50vw;
  right: 0
}
@media (max-width: 767px) {
  #rr_header .uk-navbar-container {
    height: 100%
  }
  #rr_header .uk-navbar-left {
    align-items: stretch;
    position: absolute;
    top: 5px
  }
  #rr_header .uk-navbar-center {
    display: none
  }
  #rr_header .selecthotels_form {
    width: 100vw;
  }
}
/* -----------------------------------------------------------
	menu
----------------------------------------------------------- */
.uk-open > .uk-offcanvas-bar {
  transform: none
}
.uk-close:after {
  display: none
}
.bfhbook .txtlink {
  padding: 0.5rem;
}
.bfhbook .txtlink a:hover {
  text-decoration: underline
}
.bookimg {
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  display: inline-block;
  -webkit-transform-style: flat;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-sizing: border-box;
  -webkit-transition: .2s;
  margin: 30px 10px 10px;
  -moz-perspective: 1200px;
  perspective: 1000px;
  position: relative;
}
.bookimg .img {
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: left;
  transform-origin: left;
  top: 0;
  background-color: #eee;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.bookimg:hover .img {
  -webkit-transform: rotateY(-5deg) rotateZ(0);
  -moz-transform: rotateY(-5deg) rotateZ(0);
  -ms-transform: rotateY(-5deg) rotateZ(0);
  transform: rotateY(-5deg) rotateZ(0);
  box-shadow: 8px 0 12px rgba(0, 0, 0, 0.60);
}
@media (max-width: 767px) {
	.bfhbook [class*='pcw40']  {
		width: 100%
	}
	.bfhbook [class*='uk-child-width'] li {
		width: 40%
	}
}
	
/* -----------------------------------------------------------
	logo
----------------------------------------------------------- */
#breakfasthotel {
  font-family: 'Noto Sans JP', sans-serif;
}
a.bfhhotellink:hover {
  text-decoration: none;
}
@media (max-width: 767px) {
  #breakfasthotel .uk-container {
    max-width: 100%;
  }
  #breakfasthotel .uk-card-body {
    padding: 10px;
  }
  .uk-grid-small > * {
    padding-left: 0;
  }
}
/* -----------------------------------------------------------
	blog
----------------------------------------------------------- */
.bfhblog-img {
  padding-right: 20px;
}
.bfhblog-btn {
  background: rgba(0, 0, 0, 1.00);
  text-align: center;
  width: 70%;
  margin: 0 auto;
  border-radius: 0.2rem;
  color: rgba(255, 255, 255, 1.00);
}
.bfhblog-btn a {
  color: rgba(255, 255, 255, 1.00);
  font-size: 110%;
  display: block;
  padding: 10px;
}
.bfhblog-btn a:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 1.00);
  border: 1px solid rgba(0, 0, 0, 1.00);
  color: rgba(0, 0, 0, 1.00)
}
@media (max-width: 766px) {
  .bfhblog-img {
    padding-right: 0;
    padding-bottom: 10px;
  }
  .bfhblog-btn {
    width: 90%
  }
}
/* -----------------------------------------------------------
	bfhs
----------------------------------------------------------- */
.newsbox {
  border: 2px solid rgba(46, 34, 212, 1.00);
  border-radius: 3rem;
  padding: 2rem;
  margin: 2rem;
  position: relative
}
.newsbox h2 {
  transform: rotate(342deg);
  font-size: 4rem;
  font-family: 'IM Fell Double Pica SC', serif;
  color: rgb(27 23 89 / 80%);
  letter-spacing: 2rem;
  position: absolute;
  top: -15px;
  left: 2rem;
  -webkit-box-reflect: below -40px -webkit-gradient(linear, left bottom, left top, from(rgb(255 255 255 / 16%)), to(transparent))
}
.bfhsbox {
  display: flex;
  position: relative;
  min-height: 800px;
  height: 100vh
}
.bfhsbox > * {
  width: 50%
}
.bfhsbox:last-child {
  margin: 0 0 5rem
}
.imgbox {
  position: relative
}
#nakasu .imgexterior {
  position: absolute;
  width: 40%;
  top: 0;
  left: 0
}
#nakasu .imgbreakfast {
  position: absolute;
  top: 30%;
  left: 35%;
  width: 50%;
  overflow: visible
}
#nakasu .imgrooms {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 100%
}
#porto .imgexterior {
  position: absolute;
  width: 40%;
  top: 0;
  left: 0
}
#porto .imgbreakfast {
  position: absolute;
  top: 30%;
  left: 35%;
  width: 50%;
  overflow: visible
}
#porto .imgrooms {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 100%
}
.imgexterior {
  position: absolute;
  width: 40%;
  top: 0;
  right: 0
}
.imgbreakfast {
  position: absolute;
  top: 30%;
  right: 35%;
  width: 50%;
  overflow: visible
}
.imgbreakfast:before {
  content: "";
  display: block;
  background-color: rgb(4 31 94 / 90%);
  width: 100%;
  padding-bottom: 70%;
  margin-top: -1.5%;
  position: absolute;
  right: 0;
  top: 0
}
.imgrooms {
  position: absolute;
  top: 75%;
  left: -70%;
  width: 100%
}
.imgrooms ul {
  padding-left: 0
}
.imgrooms li.mar0a {
  margin: 0 auto
}
.bfhborder {
  border-top: 2px solid rgb(26 22 88);
  border-bottom: 2px solid rgb(26 22 88);
  padding: 0 1rem
}
@media (max-width: 766px) {
  .newsbox {
    margin: 0.1rem
  }
  .bfhsbox {
    display: block;
    height: 100%
  }
  .bfhsbox > * {
    width: 100%
  }
  .imgrooms {
    position: relative;
    left: 0;
    bottom: 0
  }
  [class*='img'] {
    position: relative;
    width: 95%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    text-align: center
  }
}
mil-campaign [class^="mil-banner"], [data-is="mil-campaign"] [class^="mil-banner"] {
box-shadow: none!important;
background-color: unset!important;
}