@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : character.css
Description : キャラクター
===================================================================== */
/* =====================================================================
    character
======================================================================*/
.character {
  position: relative;
  width: 100%;
  padding: 16rem 0 48rem 0;
}
@media screen and (min-width: 768px) {
  .character {
    padding: 16rem 0 29.6rem 0;
  }
}
.character .bg-shape01 {
  top: 6rem;
  transform: translateY(0);
}
.character .bg-shape01 .cloud01 {
  left: -5.3rem;
  top: 52rem;
}
@media screen and (min-width: 768px) {
  .character .bg-shape01 .cloud01_r {
    right: -5.8rem;
    top: 49.4rem;
  }
}
.character .bg-shape02 {
  top: inherit;
  bottom: 48rem;
  transform: translateY(0);
}
@media screen and (min-width: 768px) {
  .character .bg-shape02 {
    bottom: 29.6rem;
  }
}
.character .bg-shape02 .cloud01 {
  left: -5.3rem;
  top: -10rem;
}
@media screen and (min-width: 768px) {
  .character .bg-shape02 .cloud01 {
    left: -16rem;
    top: 34.7rem;
  }
}
.character-deco01 {
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco01 {
    right: -6rem;
    top: 3rem;
    display: block;
    width: 39.6rem;
  }
}
.character-deco02 {
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco02 {
    right: 13.5rem;
    top: 8.7rem;
    display: block;
    width: 26.1rem;
  }
}
.character-deco03 {
  position: absolute;
  display: none;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco03 {
    right: 23rem;
    top: 0;
    display: block;
    width: 17.9rem;
  }
}
.character-deco04 {
  position: absolute;
  left: -10.4rem;
  bottom: 6rem;
  display: block;
  width: 53.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco04 {
    left: -3.2rem;
    bottom: -6rem;
    width: 47rem;
  }
}
.character-deco05 {
  position: absolute;
  left: 12rem;
  bottom: 29.2rem;
  display: block;
  width: 11.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco05 {
    left: 16.4rem;
    bottom: 14.6rem;
    width: 10rem;
  }
}
.character-deco06 {
  position: absolute;
  right: 47rem;
  bottom: 0;
  display: block;
  width: 17.7rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco06 {
    right: calc(50% + 27.6rem);
    bottom: -5.6rem;
  }
}
.character-deco07 {
  position: absolute;
  right: -9.6rem;
  bottom: -21rem;
  display: block;
  width: 50.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco07 {
    right: calc(50% - 50rem);
    bottom: -11rem;
  }
}
.character-deco08 {
  position: absolute;
  right: 36.2rem;
  bottom: -31.8rem;
  display: block;
  width: 20.2rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco08 {
    right: calc(50% + 5.3rem);
    bottom: -26.5rem;
  }
}
.character-deco09 {
  position: absolute;
  right: 46.8rem;
  bottom: 8rem;
  display: block;
  width: 12rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco09 {
    right: 50%;
    bottom: -1.5rem;
  }
}
.character-deco10 {
  position: absolute;
  right: 6.3rem;
  bottom: -24rem;
  display: block;
  width: 52.5rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-deco10 {
    right: calc(50% - 50rem);
    bottom: -25rem;
  }
}
.character-column {
  position: relative;
  width: 100%;
}
.character-wrap {
  position: relative;
  width: 100%;
}
.character-main {
  position: relative;
  width: 100%;
  margin-bottom: 42rem;
}
@media screen and (min-width: 768px) {
  .character-main {
    margin-bottom: 36rem;
  }
}
.character-main:last-child {
  margin-bottom: 24rem;
}
@media screen and (min-width: 768px) {
  .character-main:last-child {
    margin-bottom: 0;
  }
}
.character-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  width: 115.3846153846%;
  margin: 0 -7.6923076923%;
  padding-bottom: 22rem;
}
@media screen and (min-width: 768px) {
  .character-item {
    width: 80rem;
    margin: 0 auto;
    padding-bottom: 12rem;
  }
}
.character-item.neboby {
  margin-top: 9rem;
}
@media screen and (min-width: 768px) {
  .character-item.neboby {
    flex-direction: row;
  }
}
.character-item.neboby::before {
  transform: scale(1, 1);
}
.character-item.neboby::after {
  transform: scale(1, 1);
}
@media screen and (min-width: 768px) {
  .character-item.neboby .character-item-bg {
    background-image: url(../images/character/character_bg03.png);
  }
}
.character-item.neboby .character-item-img {
  width: 37rem;
  margin: -3rem auto 0 auto;
  transform: translateX(3rem);
}
@media screen and (min-width: 768px) {
  .character-item.neboby .character-item-img {
    margin: -3rem 0 0 6rem;
    transform: none;
  }
}
@media screen and (min-width: 768px) {
  .character-item.neboby .character-item-text {
    margin: 13rem 8rem 0 -3rem;
  }
}
@media screen and (min-width: 768px) {
  .character-item.neboby .character-item-taste {
    margin: 5.2rem auto 0 9rem;
  }
}
@media screen and (min-width: 768px) {
  .character-item.kokemaru {
    flex-direction: row-reverse;
  }
}
.character-item.kokemaru::before {
  transform: scale(-1, 1);
}
.character-item.kokemaru::after {
  transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
  .character-item.kokemaru .character-item-bg {
    width: 101.25%;
    background-image: url(../images/character/character_bg04.png);
  }
}
.character-item.kokemaru .character-item-img {
  width: 16.8rem;
  margin: 1rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .character-item.kokemaru .character-item-img {
    margin: 4rem 12rem 0 0;
  }
}
@media screen and (min-width: 768px) {
  .character-item.kokemaru .character-item-text {
    margin: 10rem auto 0 10rem;
  }
}
@media screen and (min-width: 768px) {
  .character-item.kokemaru .character-item-taste {
    margin: 0 7rem 0 auto;
  }
}
.character-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  aspect-ratio: 750/140;
  background-image: url(../images/character/character_bg05.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .character-item::before {
    content: none;
  }
}
.character-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  aspect-ratio: 750/100;
  background-image: url(../images/character/character_bg06.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .character-item::after {
    content: none;
  }
}
.character-item-bg {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e4f6ff;
  transform: translateX(-50%);
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .character-item-bg {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}
.character-item-img {
  position: relative;
}
.character-item-text {
  position: relative;
  width: 58rem;
  margin: 4rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .character-item-text {
    width: 32rem;
    margin: 0;
  }
}
.character-item-text > dt {
  width: 100%;
}
.character-item-text > dt > span {
  color: #f4853d;
  font-size: 150%;
  font-weight: 700;
}
.character-item-text > dd {
  width: 100%;
  margin-top: 2.4rem;
}
@media screen and (min-width: 768px) {
  .character-item-text > dd {
    margin-top: 1.8rem;
  }
}
.character-item-text > dd > span {
  font-weight: 500;
}
.character-item-taste {
  position: relative;
  width: 51.2rem;
  margin: 6.4rem 3.6rem 0 auto;
}
@media screen and (min-width: 768px) {
  .character-item-taste {
    width: 36.6rem;
    margin: 0;
  }
}
.character-item-taste::before {
  content: "";
  position: absolute;
  left: 11.328125%;
  bottom: -6.4rem;
  display: block;
  width: 16.015625%;
  aspect-ratio: 82/56;
  background-image: url(../images/character/character_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .character-item-taste::before {
    bottom: -4.8rem;
  }
}
.character-item-taste > dt {
  position: absolute;
  left: 50%;
  top: -1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 51.7578125%;
  aspect-ratio: 351/72;
  background-image: url(../images/common/shape_ttl_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .character-item-taste > dt {
    top: -1.2rem;
  }
}
.character-item-taste > dt > span {
  color: #ffffff;
  font-size: 110%;
  font-weight: 900;
  transform: translateY(-0.05em);
}
.character-item-taste > dd {
  width: 100%;
  padding: 4.8rem 4rem 3.6rem 4rem;
  text-align: center;
  background-image: url(../images/character/character_bg01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .character-item-taste > dd {
    padding: 3.6rem 3rem 2.7rem 3rem;
  }
}
.character-item-taste > dd > span {
  font-weight: 500;
}

/* =====================================================================
    room
======================================================================*/
.room {
  position: relative;
  width: 100%;
  padding: 16rem 0 20rem 0;
}
@media screen and (min-width: 768px) {
  .room {
    padding: 16rem 0 26.6666666667vw 0;
  }
}
@media screen and (min-width: 1200px) {
  .room {
    padding: 16rem 0 320px 0;
  }
}
.room::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14rem;
  display: block;
  width: 100%;
  height: calc(100% + 14rem);
  background-color: #dcf8ff;
  z-index: -4;
}
@media screen and (min-width: 768px) {
  .room::before {
    top: -11.2rem;
    height: calc(100% + 11.2rem);
  }
}
@media screen and (min-width: 768px) {
  .room .inner {
    width: calc(800 / 1200 * 100%);
    max-width: 800px;
  }
}
.room-ttl {
  position: relative;
  width: 100%;
  z-index: -2;
}
.room-column {
  position: relative;
  width: 100%;
  padding-top: 1.2rem;
}
@media screen and (min-width: 768px) {
  .room-column {
    padding-top: 1vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-column {
    padding-top: 12px;
  }
}
.room-column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0.8rem solid #ffffff;
  border-top: none !important;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .room-column::before {
    border: 0.6666666667vw solid #ffffff;
  }
}
@media screen and (min-width: 1200px) {
  .room-column::before {
    border: 8px solid #ffffff;
  }
}
.room-wrap {
  position: relative;
  width: 100%;
}
.room-main {
  position: relative;
  width: 100%;
  padding-bottom: 58rem;
}
@media screen and (min-width: 768px) {
  .room-main {
    padding-bottom: 13.3333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-main {
    padding-bottom: 160px;
  }
}
.room-main::before {
  content: "";
  position: absolute;
  left: -5rem;
  top: -58rem;
  display: block;
  width: 115.3846153846%;
  aspect-ratio: 750/984;
  background-image: url(../images/character/room_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .room-main::before {
    left: -28.75%;
    top: -41.6666666667vw;
    width: 156.375%;
    aspect-ratio: 1251/1090;
    background-image: url(../images/character/room_bg01_pc.png);
  }
}
@media screen and (min-width: 1200px) {
  .room-main::before {
    top: -500px;
  }
}
.room-main::after {
  content: "";
  position: absolute;
  left: -5rem;
  bottom: -10rem;
  display: block;
  width: 115.3846153846%;
  aspect-ratio: 750/681;
  background-image: url(../images/character/room_bg04_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .room-main::after {
    left: -34%;
    bottom: -17.5vw;
    width: 146%;
    aspect-ratio: 1168/788;
    background-image: url(../images/character/room_bg04_pc.png);
  }
}
@media screen and (min-width: 1200px) {
  .room-main::after {
    bottom: -210px;
  }
}
.room-item {
  position: relative;
  width: 100%;
  padding: 0;
}
.room-item.neboby {
  padding-bottom: 10rem;
}
@media screen and (min-width: 768px) {
  .room-item.neboby {
    padding-bottom: 8.3333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby {
    padding-bottom: 100px;
  }
}
.room-item.neboby .room-item-img {
  width: 70.7692307692%;
  transform-origin: center center;
  transition: 0.3s ease;
  animation: room-anime01 4s infinite;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-img {
    width: 57.5%;
  }
}
.room-item.neboby .room-item-img::before {
  content: "";
  position: absolute;
  right: 49%;
  bottom: 49%;
  display: block;
  width: 8.2608695652%;
  aspect-ratio: 38/51;
  background-image: url(../images/character/room_img01_balloon.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform-origin: right bottom;
  transition: 0.3s ease;
  animation: room-anime02 4s infinite;
  z-index: 1;
}
.room-item.neboby .room-item-text::before {
  content: "";
  position: absolute;
  left: -5rem;
  top: calc(100% - 6rem);
  display: block;
  width: 115.3846153846%;
  aspect-ratio: 750/595;
  background-image: url(../images/character/room_bg02_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-text::before {
    left: -9.25%;
    top: -4.5833333333vw;
    width: 130.625%;
    aspect-ratio: 1045/621;
    background-image: url(../images/character/room_bg02_pc.png);
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-text::before {
    top: -55px;
  }
}
.room-item.neboby .room-item-text > dt {
  margin-top: 3rem;
  background-image: url(../images/character/ttl_bg01.png);
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-text > dt {
    margin-top: 2.5vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-text > dt {
    margin-top: 30px;
  }
}
.room-item.neboby .room-item-profile {
  margin-top: 8rem;
  transform: none;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-profile {
    margin-top: -34.5833333333vw;
    transform: translateX(-11.25%);
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-profile {
    margin-top: -415px;
  }
}
.room-item.neboby .room-item-profile::before {
  content: "";
  position: absolute;
  left: -5rem;
  top: calc(100% + 1.5rem);
  display: block;
  width: 115.3846153846%;
  aspect-ratio: 750/1271;
  background-image: url(../images/character/room_bg03_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-profile::before {
    left: -1.25%;
    top: 100%;
    width: 144%;
    aspect-ratio: 1152/1035;
    background-image: url(../images/character/room_bg03_pc.png);
  }
}
.room-item.neboby .room-item-profile > dt {
  background-image: url(../images/character/ttl_bg01.png);
}
.room-item.neboby .room-item-click01 {
  position: relative;
  width: 45.5384615385%;
  margin: 10rem 0 0 33rem;
  cursor: pointer;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-click01 {
    width: 37%;
    margin: 5vw -10.625% 0 auto;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-click01 {
    margin: 60px -85px 0 auto;
  }
}
.room-item.neboby .room-item-click01::before {
  content: "";
  position: absolute;
  left: 23.9864864865%;
  top: 5.4824561404%;
  display: block;
  width: 51.6891891892%;
  aspect-ratio: 153/64;
  background-image: url(../images/character/room_img03_click.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: none;
  transform-origin: center bottom;
  transition: 0.3s ease;
  animation: room-anime04 1.5s infinite;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-click01::before {
    transform: scale(0.75);
  }
}
.room-item.neboby .room-item-click02 {
  position: relative;
  width: 25.0769230769%;
  margin: 19rem 0 0 5.5rem;
  cursor: pointer;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-click02 {
    width: 20.375%;
    margin: 12.5vw 0 0 6.25%;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-click02 {
    margin: 150px 0 0 50px;
  }
}
.room-item.neboby .room-item-click02::before {
  content: "";
  position: absolute;
  left: 1.226993865%;
  top: 0;
  display: block;
  width: 93.8650306748%;
  aspect-ratio: 153/64;
  background-image: url(../images/character/room_img04_click.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: none;
  transform-origin: center bottom;
  transition: 0.3s ease;
  animation: room-anime05 1.5s infinite;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-click02::before {
    transform: scale(0.75);
  }
}
.room-item.neboby .room-item-click03 {
  position: relative;
  width: 64.3076923077%;
  margin: 21rem 0 0 0.5rem;
  cursor: pointer;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-click03 {
    width: 44.25%;
    margin: 9.1666666667vw 0 0 8.75%;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-click03 {
    margin: 110px 0 0 70px;
  }
}
.room-item.neboby .room-item-click03::before {
  content: "";
  position: absolute;
  left: 21.5311004785%;
  top: 0;
  display: block;
  width: 36.6028708134%;
  aspect-ratio: 153/64;
  background-image: url(../images/character/room_img05_click.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: none;
  transform-origin: center bottom;
  transition: 0.3s ease;
  animation: room-anime05 1.5s infinite;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-click03::before {
    transform: scale(0.8858);
  }
}
.room-item.neboby .room-item-alarm {
  position: absolute;
  right: 0;
  top: -2.5rem;
  display: block;
  width: 17.3846153846%;
  margin: 0;
  transform-origin: center center;
  transition: 0.3s ease;
  animation: room-anime03 0.8s infinite;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-alarm {
    right: 1.875%;
    top: -0.5833333333vw;
    width: 14.125%;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-alarm {
    right: 15px;
    top: -7px;
  }
}
.room-item.neboby .room-item-yellow {
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0;
  display: block;
  width: 100vw;
  height: 69rem;
  background-color: #fff9c0;
  z-index: -4;
}
@media screen and (min-width: 768px) {
  .room-item.neboby .room-item-yellow {
    height: 45.8333333333vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.neboby .room-item-yellow {
    height: 550px;
  }
}
.room-item.neboby .room-item-yellow::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2.4rem;
  display: block;
  width: 100%;
  height: 2.6rem;
  background-image: url(../images/common/shape_wave03.svg);
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 100%;
  transform: scale(1, 1);
  z-index: -2;
}
.room-item.neboby .room-item-yellow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2.4rem;
  display: block;
  width: 100%;
  height: 2.6rem;
  background-image: url(../images/common/shape_wave03.svg);
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 100%;
  transform: scale(1, -1);
  z-index: -2;
}
.room-item.kokemaru {
  padding-top: 11rem;
}
@media screen and (min-width: 768px) {
  .room-item.kokemaru {
    padding-top: 9.1666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item.kokemaru {
    padding-top: 110px;
  }
}
.room-item.kokemaru .room-item-img {
  width: 25.8461538462%;
  transform-origin: center center;
  transition: 0.3s ease;
  animation: room-anime03 0.8s infinite;
}
@media screen and (min-width: 768px) {
  .room-item.kokemaru .room-item-img {
    width: 21%;
  }
}
.room-item.kokemaru .room-item-text > dt {
  background-image: url(../images/character/ttl_bg02.png);
}
.room-item.kokemaru .room-item-profile > dt {
  background-image: url(../images/character/ttl_bg02.png);
}
.room-item-img {
  position: relative;
  margin: 0 auto;
}
.room-item-text {
  position: relative;
  width: 100%;
}
.room-item-text > dt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 61.8461538462%;
  aspect-ratio: 402/84;
  margin: 4rem auto 2rem auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .room-item-text > dt {
    width: 50.25%;
    margin: 3.3333333333vw auto 1.6666666667vw auto;
  }
}
@media screen and (min-width: 1200px) {
  .room-item-text > dt {
    margin: 40px auto 20px auto;
  }
}
.room-item-text > dt > span {
  color: #ffffff;
  font-size: 4.2rem;
  font-weight: 700;
  transform: translateY(-0.05em);
}
@media screen and (min-width: 768px) {
  .room-item-text > dt > span {
    font-size: 3.5vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item-text > dt > span {
    font-size: 42px;
  }
}
.room-item-text > dd {
  position: relative;
  width: 100%;
  text-align: center;
}
.room-item-text > dd > span {
  font-size: 2.8rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .room-item-text > dd > span {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item-text > dd > span {
    font-size: 20px;
  }
}
.room-item-profile {
  position: relative;
  width: 100%;
  margin: 0;
}
.room-item-profile > dt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 46.7692307692%;
  aspect-ratio: 402/84;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .room-item-profile > dt {
    width: 28.5%;
  }
}
.room-item-profile > dt > span {
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: 700;
  transform: translateY(-0.05em);
}
@media screen and (min-width: 768px) {
  .room-item-profile > dt > span {
    font-size: 2vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item-profile > dt > span {
    font-size: 24px;
  }
}
.room-item-profile > dd {
  position: relative;
  width: 92.3076923077%;
  margin: -4.4rem auto 0 auto;
  padding: 6rem 0 4.8rem 0;
  text-align: center;
  background-image: url(../images/character/room_bg05.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .room-item-profile > dd {
    width: 52.5%;
    margin: -2.75vw auto 0 auto;
    padding: 3.75vw 0 3vw 0;
  }
}
@media screen and (min-width: 1200px) {
  .room-item-profile > dd {
    margin: -33px auto 0 auto;
    padding: 45px 0 36px 0;
  }
}
.room-item-profile > dd > span {
  font-size: 2.8rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .room-item-profile > dd > span {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .room-item-profile > dd > span {
    font-size: 20px;
  }
}
.room-detail {
  position: relative;
  width: 100%;
}

.popup-room .popup-inner {
  max-width: 650px;
}
@media screen and (min-width: 768px) {
  .popup-room .popup-inner {
    width: 100%;
  }
}
.popup-room .popup-close {
  right: 6rem;
  top: 0;
  font-size: 10rem;
}
@media screen and (min-width: 768px) {
  .popup-room .popup-close {
    right: 60px;
    font-size: 100px;
  }
}
.popup-room .popup-close:has(+ .popup-list > li#room_id_02.is-active), .popup-room .popup-close:has(+ .popup-list > li#room_id_03.is-active) {
  background-color: #f4853d;
}
.popup-room .popup-list > li {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 0;
  background: none;
}

/* =====================================================================
    download
======================================================================*/
.download {
  position: relative;
  width: 100%;
  margin-top: 48rem;
  padding: 16rem 0 48rem 0;
}
@media screen and (min-width: 768px) {
  .download {
    margin-top: 4rem;
    padding: 16rem 0 29.6rem 0;
  }
}
.download-deco01 {
  position: absolute;
  right: -6rem;
  top: inherit;
  bottom: calc(100% + 4rem);
  display: block;
  width: 48.5rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .download-deco01 {
    right: -6rem;
    top: 3rem;
    bottom: inherit;
    width: 39.6rem;
  }
}
.download-deco02 {
  position: absolute;
  right: 16.1rem;
  top: inherit;
  bottom: calc(100% + 22.2rem);
  display: block;
  width: 33.1rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .download-deco02 {
    right: 13.5rem;
    top: 8.7rem;
    bottom: inherit;
    width: 26.1rem;
  }
}
.download-deco03 {
  position: absolute;
  right: 15.5rem;
  top: inherit;
  bottom: calc(100% - 8rem);
  display: block;
  width: 22rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .download-deco03 {
    right: 23rem;
    top: 0;
    bottom: inherit;
    width: 17.9rem;
  }
}
.download-deco04 {
  position: absolute;
  left: -10.4rem;
  bottom: 6rem;
  display: block;
  width: 53.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .download-deco04 {
    left: -3.2rem;
    bottom: -6rem;
    width: 47rem;
  }
}
.download-deco05 {
  position: absolute;
  left: 12rem;
  bottom: 29.2rem;
  display: block;
  width: 11.3rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .download-deco05 {
    left: 16.4rem;
    bottom: 14.6rem;
    width: 10rem;
  }
}
.download-deco06 {
  position: absolute;
  right: 6.3rem;
  bottom: -24rem;
  display: block;
  width: 52.5rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .download-deco06 {
    right: calc(50% - 50rem);
    bottom: -25rem;
  }
}
.download .sec-ttl .en {
  color: #f4853d;
}
.download-column {
  position: relative;
  width: 100%;
}
.download-wrap {
  position: relative;
  width: 100%;
}
.download-main {
  position: relative;
  width: 100%;
  margin-bottom: 24rem;
}
@media screen and (min-width: 768px) {
  .download-main {
    margin-bottom: 0;
  }
}
.download-subttl01 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 35.6rem;
  aspect-ratio: 356/73;
  margin: 8rem auto 6rem auto;
  background-image: url(../images/character/ttl_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.download-subttl01 > span {
  color: #f4853d;
  font-size: 3.6rem;
  font-weight: 700;
  transform: translateY(-0.05em);
}
.download-subttl02 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 54.5rem;
  aspect-ratio: 545/73;
  margin: 8rem auto 6rem auto;
  background-image: url(../images/character/ttl_bg04.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.download-subttl02 > span {
  color: #ffffff;
  font-size: 3.6rem;
  font-weight: 700;
  transform: translateY(-0.05em);
}
.download-list01 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 -4rem 0;
}
.download-list01 > li {
  width: 32.9230769231%;
  margin: 0 0 4rem 7.3846153846%;
}
@media screen and (min-width: 768px) {
  .download-list01 > li {
    width: 21.4%;
    margin: 0 0 4rem 4.8% !important;
  }
}
.download-list01 > li:nth-child(2n+1) {
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .download-list01 > li:nth-child(4n+1) {
    margin-left: 0 !important;
  }
}
.download-list01 > li > a {
  display: block;
  width: 100%;
}
.download-list02 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 -4rem 0;
}
.download-list02 > li {
  width: 27.6923076923%;
  margin: 0 0 4rem 5.5384615385%;
}
@media screen and (min-width: 768px) {
  .download-list02 > li {
    width: 18%;
    margin: 0 0 4rem 3.6% !important;
  }
}
.download-list02 > li:nth-child(3n+1) {
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .download-list02 > li:nth-child(4n+1) {
    margin-left: 0 !important;
  }
}
.download-list02 > li > a {
  display: block;
  width: 100%;
}
.download-text {
  position: relative;
  width: 100%;
}
.download-text > p {
  width: 100%;
  margin-top: 1em;
  font-size: 2.8rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .download-text > p {
    font-size: 1.6666666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .download-text > p {
    font-size: 20px;
  }
}
.download-text > p:first-child {
  margin-top: 0;
}
.download-text > p strong {
  font-weight: 900;
}
.download-note {
  position: relative;
  width: 100%;
  margin-top: 4rem;
}
.download-note > li {
  padding-left: 1em;
  font-size: 2.4rem;
  line-height: 1.7;
  text-indent: -1em;
}
@media screen and (min-width: 768px) {
  .download-note > li {
    font-size: 1.4166666667vw;
  }
}
@media screen and (min-width: 1200px) {
  .download-note > li {
    font-size: 17px;
  }
}

/* =====================================================================
    animation
======================================================================*/
.scroll_anime_target {
  transform: translateY(4rem);
  transition: 1s ease-in-out;
  opacity: 0;
}
.scroll_anime_target.is-appear {
  transform: translateY(0);
  opacity: 1;
}

@keyframes room-anime01 {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
@keyframes room-anime02 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes room-anime03 {
  0% {
    transform: translateX(0) rotate(4deg);
  }
  5% {
    transform: translateX(-4px) rotate(0deg);
  }
  10% {
    transform: translateX(0) rotate(4deg);
  }
  15% {
    transform: translateX(-4px) rotate(0deg);
  }
  20% {
    transform: translateX(0) rotate(4deg);
  }
  25% {
    transform: translateX(-4px) rotate(0deg);
  }
  30% {
    transform: translateX(0) rotate(4deg);
  }
  100% {
    transform: translateX(0) rotate(4deg);
  }
}
@keyframes room-anime04 {
  0% {
    top: 5.4824561404%;
  }
  50% {
    top: calc(5.4824561404% - 1rem);
  }
  100% {
    top: 5.4824561404%;
  }
}
@keyframes room-anime05 {
  0% {
    top: 0;
  }
  50% {
    top: -1rem;
  }
  100% {
    top: 0;
  }
}/*# sourceMappingURL=character.css.map */