@charset "UTF-8";
/* ------------------------------*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; }

html {
  font-size: 62.5%;
  -webkit-touch-callout: none;
  -webkit-user-select: none; }

body {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Zen Maru Gothic','Avenir Next', 'Avenir', 'Segoe UI', 'Verdana', 'Helvetica Neue', 'Helvetica', "Sawarabi Gothic", 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: normal;
  letter-spacing: 0.1rem;
  line-height: 2.3rem;
  -webkit-text-size-adjust: none;
  color: #333; }
  body.fixed {
    position: fixed; }

@media screen and (min-width: 640px) {
  html {
    font-size: 100%; } }
div, dl, dt, dd, ul, ol, li, code, form, fieldset, input, textarea, p, blockquote, th, td, h1, h2, h3, h4, h5, h6, a {
  font-size: 100%;
  font-size: 16px;
  border: 0;
  margin: 0;
  padding: 0;
  font-weight: normal; }

@media screen and (min-width: 640px) {
  div, dl, dt, dd, ul, ol, li, code, form, fieldset, input, textarea, p, blockquote, th, td, h1, h2, h3, h4, h5, h6, a {
    font-size: 100%;
    font-size: 1.6rem; } }
ul {
  list-style-type: none; }

a {
  cursor: pointer;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
  color: #FF4B7C;
  font-weight: 600;
  text-decoration: underline; }
  a:hover, a:active {
    opacity: 0.9; }
  a.btn {
    background-color: rgba(135, 155, 173, 0.8);
    color: #fff !important;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 8px 12px;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    vertical-align: middle;
  /*-ms-touch-action: manipulation;
	touch-action: manipulation;*/
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent; }

body {
  background-color: #FFFEF6; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: top; }

.cf:after {
  content: "";
  clear: both;
  display: block; }

.pc {
  display: inline !important; }

.mb {
  display: none !important; }

@media screen and (max-width: 640px) {
  .pc {
    display: none !important; }

  .mb {
    display: inline !important; } }
#wrap {
  max-width: 768px;
  min-width: 320px;
  min-height: 90vh;
  height: auto;
  margin: 0 auto;
  padding-top: 60px !important;
  background-color: #fff;
  overflow-x: hidden; }

@media screen and (min-width: 640px) {
  #wrap {
    padding-top: 100px !important; } }
#contents {
  width: 100%;
  -webkit-transfrom: translate3d(0, 0, 0); }

sup {
  font-size: 1.2rem;
  line-height: 1.5rem;
  display: block;
  margin: 15px auto;
  color: #888; }

video {
  width: 100%;
  display: block; }

.ad {
  width: 100%; }

/*--- pager ---*/
.pager {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  justify-content: -webkit-space-between;
  width: 85%;
  margin: 10px auto 0;
  gap: 0 10px;
  gap: -webkit-0 10px; }

/* ---- header-new --------------------------------*/
.header {
  max-width: 768px;
  min-width: 320px;
  width: 100%;
  position: fixed !important;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  text-align: center;
  z-index: 10;
  background-image: url(/image/site/a_bg_head.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-color: transparent;
  height: auto;
  -js-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 10px 0; }
  .header.white {
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 3px 0 8px rgba(200, 200, 200, 0.3); }
  .header h1 {
    margin-left: 2%;
    padding: 0;
    font-size: 1rem;
    line-height: 0;
    text-align: left;
    padding: 0;
    width: 32%; }
    .header h1 a {
      display: inline-block; }
    .header h1 img {
      height: auto;
      width: 100%;
      max-width: 100%;
      transition: all .5s;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s; }
  .header .menu {
    cursor: pointer;
    position: relative; }
  .header .header_right {
    width: 45%;
    margin-left: auto;
    margin-right: 8px;
    text-align: right;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
    .header .header_right p, .header .header_right a {
      display: inline-block; }
    .header .header_right img {
      display: block; }
    .header .header_right .header_menu {
      position: absolute;
      right: 0;
      top: 0; }
    .header .header_right .header_close {
      position: absolute;
      right: 0;
      top: 0;
      display: none;
      z-index: 10; }
    .header .header_right .fav {
      margin-right: 5px; }
  .header .header_right_size {
    width: 20%; }
  .header .btn_regist {
    position: absolute;
    top: 0px;
    right: 3%;
    max-width: 70%;
    top: 45%;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    transform: translate(0%, -50%); }
    .header .btn_regist a {
      background-color: #FF4B7C;
      color: #fff;
      padding: 6px 14px;
      line-height: 100%;
      font-weight: normal;
      text-decoration: none;
      border-radius: 16px;
      display: inline-block; }

@media screen and (min-width: 640px) {
  .header .btn_regist a {
    font-size: 1.3rem; }
    .header .btn_regist a.btn_regist_login {
      margin-left: 10px; } }
.header_nav {
  width: 100%;
  max-width: 768px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.99);
  color: #333;
  font-weight: normal;
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  z-index: 9; }

/*nav*/
.header_menu_waku {
  width: 100%;
  height: 100%;
  margin: 0 auto 2.8rem auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 3rem; }
  .header_menu_waku::-webkit-scrollbar {
    width: 5px; }
  .header_menu_waku::-webkit-scrollbar-thumb {
    background-color: rgba(255, 205, 226, 0.5);
    border-radius: 3px; }
  .header_menu_waku::-webkit-scrollbar-track {
    background-color: transparent; }
  .header_menu_waku a {
    display: block;
    text-decoration: none;
    font-weight: normal;
    color: #4d4d4d; }
  .header_menu_waku .header_menu_main {
    margin-bottom: 1.5rem;
    margin: 2rem auto; }
    .header_menu_waku .header_menu_main a.menu {
      padding: 0.5rem 5% 0.5rem 12%;
      font-size: 1.5rem;
      position: relative;
      width: 100%;
      cursor: pointer;
      color: #4d4d4d;
      font-weight: 600; }
      .header_menu_waku .header_menu_main a.menu:before {
        position: absolute;
        content: '';
        border-top: 2px solid #FF4B7C;
        top: 1.6rem;
        left: 0;
        width: 8%; }
      .header_menu_waku .header_menu_main a.menu.active, .header_menu_waku .header_menu_main a.menu:hover, .header_menu_waku .header_menu_main a.menu:active {
        color: #fff; }
      .header_menu_waku .header_menu_main a.menu.active span, .header_menu_waku .header_menu_main a.menu:hover span, .header_menu_waku .header_menu_main a.menu:active span {
        background-color: #FF4B7C;
        margin-left: -15%;
        padding: 2px 8px 2px 15%; }

/*pet*/
.header_menu_instructor {
  width: 85%;
  margin: 2rem auto;
  -js-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }
  .header_menu_instructor li {
    width: 30%;
    margin-right: 5%; }
    .header_menu_instructor li a, .header_menu_instructor li img {
      display: block;
      width: 100%; }
    .header_menu_instructor li:last-child {
      margin-right: 0; }

/* ------------------------ pet_common ---------------------------------*/
.relative {
  position: relative; }

.absolute {
  position: absolute;
  top: 0;
  left: 0; }

.fade {
  opacity: 0;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -ms-transition: all 500ms; }

.fadein {
  opacity: 1; }

.more_btn {
  width: 100%;
  margin: 0 auto;
  text-align: right;
  padding: 3rem 0; }
  .more_btn a {
    background-color: #FF4B7C;
    display: block;
    width: 70%;
    padding: 1rem;
    line-height: 100%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-indent: 2rem; }

/*heading*/
.txt_heading {
  font-weight: 900;
  font-size: 2.3rem;
  position: relative;
  text-align: center;
  margin: 2vh auto 5vh; }
  .txt_heading span {
    font-family: 'ab-tombo-bold', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    display: block; }
  .txt_heading:before {
    position: absolute;
    bottom: -15px;
    left: calc(50% - 25px);
    width: 50px;
    height: auto;
    content: '';
    border-bottom: 2px solid #2BD2FF;
    border-image: linear-gradient(to right, #FA8BFF 0%, #2BD2FF 50%, #30D578 100%);
    border-image: -moz-linear-gradient(to right, #FA8BFF 0%, #2BD2FF 50%, #30D578 100%);
    border-image: -webkit-linear-gradient(to right, #FA8BFF 0%, #2BD2FF 50%, #30D578 100%);
    border-image-repeat: round;
    border-image-slice: 1; }

.txt_heading.favorite {
  margin-bottom: 3vh; }
  .txt_heading.favorite:before {
    display: none; }

.btn_more {
  width: 58%;
  text-align: center;
  margin: 2vh auto;
  padding: 1rem 0;
  border-radius: 40px;
  background: #FF4B7C; }
  .btn_more a {
    display: block;
    font-weight: normal;
    font-size: 1.5rem;
    color: #fff !important;
    text-decoration: none; }

.headline h3 {
  color: #808080;
  font-size: 1.8rem;
  width: 100%;
  margin: 3.5rem auto;
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  text-align: center;
  font-weight: 600; }
  .headline h3 span {
    display: inline-block;
    border-bottom: 3px solid #f9ced4;
    padding-bottom: 1rem;
    margin: 0.5rem auto;
    position: relative; }
    .headline h3 span:before, .headline h3 span:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%); }
    .headline h3 span:before {
      border: solid 14px transparent;
      border-top: solid 14px #f9ced4; }
    .headline h3 span:after {
      border: solid 14px transparent;
      border-top: solid 14px #fff;
      margin-top: -5px; }
.headline.margin h3 {
  margin: 4rem auto 2rem auto; }

@media screen and (max-width: 320px) {
  .headline h3 {
    font-size: 1.6rem; } }
.fav_button {
  bottom: 3vh;
  margin-left: auto;
  width: 25%;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  background-image: url(../image/site/fav_off.png);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: 0.3s;
  outline: none;
  position: absolute; }
  .fav_button img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 100%;
    display: block; }
  .fav_button.off {
    background-image: url(../image/site/fav_off.png) !important; }
  .fav_button.on {
    background-image: url(../image/site/fav_on.png) !important; }

/*------ movie list ------*/
.main_contents {
  width: 95%;
  margin: 0 auto; }

.movie_list, .room_list {
  margin-top: 3vh; }

.movie_list a, .room_list a {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  width: 100%;
  height: 100%;
  color: #222222;
  text-decoration: none; }

.movie_list a .list_img, .room_list a .list_img {
  position: relative;
  width: 40%;
  height: 100%; }

.movie_list a .list_img .fav_button, .room_list a .list_img .fav_button {
  bottom: 1vh;
  right: 1vw; }

.movie_list a .detail, .room_list a .detail {
  width: 58%;
  position: relative; }

.movie_list a .detail .icon_new, .room_list a .detail .icon_new {
  font-weight: bold; }

.movie_list a .detail .icon_new span, .room_list a .detail .icon_new span {
  color: #222222;
  padding: 0 5px 2px;
  background: #FFF500; }

.movie_list a .detail .ttl, .room_list a .detail .ttl {
  font-weight: bold;
  font-size: 1.6rem;
  margin-top: 5px; }

.movie_list .room_title {
  font-weight: normal;
  background: #E0F9FE;
  padding: 10px;
  border-radius: 5px; }

.movie_title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-top: 5px; }

.room_title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-top: 10px; }

@media screen and (min-width: 640px) {
  .movie_title,
  .room_title {
    position: static;
    text-overflow: inherit;
    overflow: auto;
    white-space: normal;
    overflow: hidden; } }
.not-item-his {
  padding: 20px;
  background: #FCFCEA; }

/*------ column list ------*/
.column_list {
  margin-top: 3vh; }
  .column_list a {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #222222;
    text-decoration: none; }
    .column_list a .list_img {
      position: relative;
      width: 30%; }
      .column_list a .list_img .fav_button {
        width: 40%;
        bottom: 0;
        right: 1vw; }
    .column_list a .img {
      border-radius: 50%;
      object-fit: cover;
      object-position: 50% 50%; }
    .column_list a .detail {
      width: 68%; }
      .column_list a .detail .icon_new {
        font-weight: bold; }
        .column_list a .detail .icon_new span {
          color: #222222;
          padding: 0 5px 2px;
          background: #FFF500; }
      .column_list a .detail span {
        color: #ffffff;
        padding: 2px 4px; }
        .column_list a .detail span.icon_trouble {
          background: #58C7F8; }
        .column_list a .detail span.icon_trivia {
          background: #30D578; }
      .column_list a .detail .ttl {
        font-weight: bold;
        font-size: 1.6rem;
        margin-top: 5px; }

/**/
.movie_mylist__sort {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  margin: 2vh auto; }
  .movie_mylist__sort li {
    width: 50%;
    text-align: center;
    padding: .5rem;
    background-color: #C3C3C3;
    border-bottom: 3px solid #FF4B7C; }
    .movie_mylist__sort li a {
      display: block;
      text-decoration: none;
      color: #222222; }
  .movie_mylist__sort .selected {
    background-color: #FF4B7C; }
    .movie_mylist__sort .selected a {
      color: #fff; }

.list_not {
  text-align: center;
  padding: 20px;
  background: #FCFCEA; }
  .list_not span {
    font-weight: bold; }
  .list_not .lets_tap_img {
    width: 50%;
    text-align: center;
    margin: 10px auto; }