@charset "UTF-8";
.deco-bed,
.deco__item {
  position: relative
}
.deco-bed::after,
.deco__item::after {
  position: absolute;
  display: block;
  content: "　";
  z-index: 1
}
@media screen and (min-width:576px) {
  .hero__sub__img img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
  }
}
.bl__paragraph-double {
  line-height: 1.8
}
.bg-clr-pale-green {
  background: #e3ebe0
}
.ttl--border-before--new-line {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(60%,transparent),color-stop(0,#e9e5bd));
  background: linear-gradient(transparent 60%,#e9e5bd 0);
  display: inline;
  padding: 0 2px 1px
}
.content__ttl__base {
  margin-top: 3rem
}
.deco-bed {
  margin-left: 4rem
}
.deco-bed::after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 69px;
  height: 51px;
  background-image: url(/img/kitaibaraki/special/compact-bunk-room/icon-bed.png?0);
  top: 0;
  right: 0
}
.special-top .card__speech-bubble,
.special-top.block {
  margin-bottom: 3.5rem
}
.room-type.block,
.special-top .card__img.image-bed,
.special-top .content:first-child {
  margin-bottom: 4rem
}
.special-top .content:first-child .card__ttl {
  font-size: 5.4rem;
  text-align: center;
  margin-bottom: 3rem
}
.special-top .content:first-child .card__ttl > * {
  margin: 0
}
.special-top .content:first-child .card__ttl__sub {
  position: relative;
  margin-top: 2rem
}
.special-top .content:first-child .card__ttl__sub::before {
  position: absolute;
  content: "コンパクトバンクルーム";
  font-size: 2.4rem;
  left: 50%;
  top: -5px;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%)
}
.special-top .content:first-child .card__txt {
  margin-bottom: 5rem
}
.special-top .content:first-child .card__txt__inner {
  max-width: 815px;
  margin: auto
}
.special-top .card__catchphrase {
  text-align: center;
  margin-bottom: 3rem
}
.special-top .card__catchphrase > * {
  margin: 0 0 1.5rem;
  line-height: 1.5
}
.special-top .card__catchphrase__main {
  font-size: 5.1rem
}
.special-top .card__catchphrase__main .ttl--border-before--new-line {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(70%,transparent),color-stop(0,#e9e5bd));
  background: linear-gradient(transparent 70%,#e9e5bd 0)
}
.special-top .card__catchphrase__sub {
  font-size: 2.8rem
}
.special-top .card__catchphrase__sub .ttl--border-before--new-line {
  background: -webkit-gradient(linear,left top,left bottom,color-stop(70%,transparent),color-stop(0,#e9e5bd));
  background: linear-gradient(transparent 70%,#e9e5bd 0)
}
.special-top .card__speech-bubble:nth-child(even) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-self: end
}
.special-top .card__speech-bubble__inner {
  background: #f1f5fb;
  max-width: 566px;
  border-radius: 20px;
  padding: 2.5rem 3.5%;
  letter-spacing: .97px;
  line-height: 1.5
}
.special-top .card__speech-bubble .card__ttl {
  font-size: 2.6rem;
  margin: 0 0 1rem
}
.special-top .card__speech-bubble .card__txt {
  margin: 0;
  font-size: 1.7rem
}
.deco__item::after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}
.deco__hito--1::after {
  width: 228px;
  height: 190px;
  background-image: url(/img/kitaibaraki/special/compact-bunk-room/hito.png?0)
}
@media screen and (min-width:1025px) {
  .compact-bunk-room header {
    margin-bottom: -10.5rem
  }
  .compact-bunk-room .hero__sub__img img {
    height: 110px!important
  }
  .deco__hito--1::after {
    bottom: 18rem;
    left: 2rem
  }
}
@media screen and (max-width:1024px) {
  .deco-bed {
    margin-left: 1em
  }
  .special-top {
    margin-bottom: 5rem!important
  }
  .deco__hito--1::after {
    width: calc(228px * .7);
    height: calc(190px * .7)
  }
}
@media screen and (min-width:576px) and (max-width:1024px) {
  .compact-bunk-room header {
    margin-bottom: -16.5rem
  }
  .compact-bunk-room .hero__sub__img img {
    height: 17rem!important
  }
  .content__ttl__base {
    margin-top: 8rem
  }
  .content__ttl__sub {
    margin-bottom: -8.5rem
  }
  .deco-bed::after {
    width: 55.2px;
    height: 40.8px;
    top: -3px;
    right: -8px
  }
  .special-top .content:first-child .card__ttl {
    font-size: 5rem
  }
  .special-top .card__speech-bubble .card__ttl,
  .special-top .content:first-child .card__ttl__sub::before {
    font-size: 2rem
  }
  .special-top .card__catchphrase > * {
    margin: 0 0 2rem
  }
  .special-top .card__catchphrase__main {
    font-size: 3.5rem
  }
  .special-top .card__catchphrase__sub {
    font-size: 2.6rem
  }
  .deco__hito--1 {
    margin-right: calc(228px * .7)!important
  }
  .deco__hito--1::after {
    top: -6rem;
    right: -17rem
  }
  .deco__hito--2 {
    margin-left: calc(222px * .6)!important
  }
}
@media screen and (max-width:575px) {
  .fit-over__sp--40 {
    height: 40vh
  }
  .fit-over__sp--40 > img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
  }
  .bl__padding-t__none--sp {
    padding-top: 0
  }
  .bl__margin-t__8rem--sp {
    margin-top: 8rem
  }
  .ly__con-padding--sp {
    padding-right: 4%;
    padding-left: 4%
  }
  .content__ttl__base {
    margin-top: 4rem
  }
  .deco-bed::after {
    width: 41.4px;
    height: 30.6px;
    top: 1px;
    right: -10px
  }
  .special-top .card__img.image-bed > * {
    width: 40%;
    height: auto
  }
  .special-top .content:first-child .card__ttl {
    font-size: 3.2rem;
    margin-bottom: 4rem
  }
  .special-top .content:first-child .card__ttl__sub::before {
    font-size: 1.4rem
  }
  .special-top .card__catchphrase__main {
    font-size: 2.7rem
  }
  .special-top .card__catchphrase__sub {
    font-size: 1.9rem
  }
  .special-top .card__speech-bubble:not(:last-child) {
    margin-bottom: 9rem
  }
  .special-top .card__speech-bubble__inner {
    padding: 2.5rem 9% 4.5rem
  }
  .special-top .card__speech-bubble .card__ttl {
    font-size: 1.9rem;
    margin: 0 0 2rem
  }
  .deco__hito--1 {
    padding-top: 4.5rem!important
  }
  .deco__hito--1::after {
    top: -10.5rem;
    left: -1rem
  }
  .deco__hito--2 {
    padding-top: 5rem!important
  }
}
.deco__hito--2::after {
  width: 222px;
  height: 268px;
  background-image: url(/img/kitaibaraki/special/compact-bunk-room/hito2.png?0)
}
@media screen and (min-width:1025px) {
  .deco__hito--2::after {
    top: 15rem;
    right: 0
  }
}
@media screen and (max-width:1024px) {
  .deco__hito--2::after {
    width: calc(222px * .6);
    height: calc(268px * .6)
  }
}
@media screen and (min-width:576px) and (max-width:1024px) {
  .deco__hito--2::after {
    top: -5rem;
    left: -14rem
  }
}
@media screen and (max-width:575px) {
  .deco__hito--2::after {
    right: 1rem;
    top: -13rem
  }
  .deco__hito--3 {
    padding-top: 1rem!important
  }
}
.deco__hito--3::after {
  width: 222px;
  height: 182px;
  background-image: url(/img/kitaibaraki/special/compact-bunk-room/hito3.png?0)
}
@media screen and (min-width:1025px) {
  .deco__hito--3::after {
    top: -13rem;
    left: 0
  }
}
@media screen and (min-width:576px) and (max-width:1024px) {
  .deco__hito--3::after {
    top: -11rem;
    left: -1rem
  }
  .room-type.block {
    padding-top: 7.5rem;
    margin-bottom: 10rem
  }
}
.how-to-use,
.how-to-use .content__ttl,
.room-type.block .content__img,
.room-type.block .content__ttl,
.stay-plan .content__ttl {
  margin-bottom: 3rem
}
.room-type.block .box-color {
  background: #dcdfed;
  padding-top: 2rem;
  padding-bottom: 2.5rem
}
.room-type.block .box-color__item {
  color: #3a3758
}
.room-type.block .box-color .card__ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.room-type.block .box-color .card__ttl__inner {
  font-size: 2.3rem;
  font-weight: 700;
  border-top: 1px solid;
  border-bottom: 1px solid;
  display: inline-block;
  padding: .8rem 2rem
}
.room-type.block .box-color .card__body > * {
  font-size: 1.9rem;
  font-weight: 700;
  border-bottom: 1px solid;
  line-height: 2;
  margin: 0 0 1rem
}
.how-to-use .content__img,
.ttl-bg {
  text-align: center
}
.ttl-bg__en {
  font-size: 8.4rem;
  font-weight: 700;
  color: #d7daea;
  margin: 0
}
.ttl-bg__main {
  font-size: 2.8rem;
  font-weight: 400;
  margin: -1rem 0 1rem
}
.ttl-bg__txt {
  font-size: 1.2rem;
  margin: 0
}
.how-to-use .content__txt {
  margin-top: 1rem
}
.stay-plan {
  margin-bottom: 10rem
}
@media screen and (max-width:1024px) {
  .deco__hito--3::after {
    width: calc(222px * .8);
    height: calc(182px * .8)
  }
  .ttl-bg {
    position: relative
  }
  .ttl-bg__en {
    font-size: 7.5rem;
    width: 460.8px;
    height: 102px;
    margin: auto;
    position: absolute;
    left: 50%;
    top: -62%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1
  }
  .how-to-use {
    margin-bottom: 10rem
  }
  .how-to-use .content__ttl,
  .stay-plan {
    margin-top: 6rem
  }
  .how-to-use .content__ttl .ttl-bg__main,
  .stay-plan .content__ttl .ttl-bg__main {
    font-size: 2.2rem
  }
  .how-to-use .content__ttl .ttl-bg__en {
    top: -100%
  }
}
.stay-plan .content__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center
}
.stay-plan .content__name > * {
  background: #bdcfe7;
  font-size: 2.2rem;
  display: inline-block;
  padding: 1rem 5rem;
  border-radius: 20px
}
@media screen and (max-width:575px) {
  .deco__hito--3::after {
    left: 1rem;
    top: -13rem
  }
  .room-type.block {
    padding-top: 8.5rem;
    margin-bottom: 10rem
  }
  .room-type.block .box-color .card__ttl__inner {
    font-size: 1.9rem
  }
  .room-type.block .box-color .card__size-bed {
    line-height: 1.8
  }
  .stay-plan .content__name > * {
    font-size: 1.8rem;
    padding: 1rem 4%
  }
}