* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background-color: #d0a7ec; 
    font-family: Arial, Meiryo,"文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;}

a {
  font-size: 1rem; }

p {
  line-height: 180%;
  letter-spacing: 1px; }

ul {
  margin-bottom: 0; }

.container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0; }

.popup {
  cursor: pointer; }

#wrap {
  background-image: url("../img/big_bg.png");
  background-position: 50% 0;
  background-repeat: no-repeat; }

.pmy-auto {
  margin: 0 auto; }

img {
  width: 100%;
  height: auto;
  display: block; }

.d-block {
  display: block; }

.p-3 {
  padding: 1rem; }

.p-5 {
  padding: 2rem; }

.pb-3 {
  padding-bottom: 1rem; }

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.py-5 {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.px-3 {
  padding: 0 1rem; }

.mt-3 {
  margin-top: 1rem; }

.mt-4 {
  margin-top: 1.5rem; }

.mt-5 {
  margin-top: 2rem; }

.mb-4 {
  margin-bottom: 2rem !important; }

.mb-5 {
  margin-bottom: 5rem !important; }

ul {
  font-size: 0; }

header nav li {
  width: calc(100% / 3);
  display: inline-block; }

section {
  max-width: 768px;
  margin: 0 auto;
  position: relative; }

.section-mini {
  padding: 0 50px; }

.bg-white {
  background: rgba(255, 255, 255, 0.7); }

.dialog {
  border: 3px solid #d0a7ec; }

.rounded {
  border-radius: 1rem; }
.pbwrap{
  position: relative;
  max-width:350px;
  margin: auto;
  
}

@media screen and (max-width:768px){
  @keyframes wave{
  0%{
    transform:translate(0) ;
  }
  100%{
    transform: translateY(10px);
  }
}
  .pbwrap:before,.pbwrap:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 100px;
    background-image: url('../img/B_tag.png');
    background-repeat: no-repeat;
    animation:wave 1.5s infinite alternate linear;
  }
  .pbwrap:after{
    left: auto;
    right: -45px;
    top: 120px;
    background-image: url('../img/J_tag.png');

    
  }
}

  
.youtube-wrapper {
  max-width: 480px;
  margin: 0 auto;
  position: relative; }
  .youtube-wrapper .wrapper-mask {
    position: absolute;
    top: 10px;
    left: -35px;
    width: calc(100% + 67px);
    height: 100%;
    display: block;
    background-size: contain;
    background-image: url("../img/tvc_fram.png");
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none; }
  .youtube-wrapper iframe {
    padding: 1px 4px;
    width: 100%;
    position: relative;
    height: 262px; }

.overflow-hidden {
  overflow: hidden; }

.row {
  font-size: 0; }
  .row > div {
    display: inline-block; }
  .row .col-6 {
    width: calc(100% / 2); }

.stroy-paper {
  color: #c24a63;
  width: 420px;
  height: 400px;
  background-image: url("../img/scroll_story.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: relative; }
  .stroy-paper .story-boy {
    position: absolute;
    right: -120px;
    top: 50px;
    width: 170px; }

.swipImgwrapper {
  overflow: hidden;
  padding: 7px;
  background-color: #a57fcb;
  border-radius: 0 2.5rem 0 0; }
  .swipImgwrapper img {
    height: 250px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0 2rem 0 0;
/*
    -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4)); 
*/
}


.swiper-container {
  position: relative; }
  .swiper-container .swipNav.swiper-next {
      top:130px;
    right: 20px;
    z-index: 10;
    background-image: url("../img/arrorw_white_R.png"); }
  .swiper-container .swipNav.swiper-prev {
      top:130px;
    left: 20px;
    z-index: 10;
    background-image: url("../img/arrorw_white_L.png"); }

.swipTitle {
  padding: 1rem;
  height: 100px;
  background-color: #a57fcb;
  background: url("../img/sliderTitlebg.png");
  background-size: cover;
  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;
/*
  -webkit-box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.3); 
*/
}
  .swipTitle p {
    color: #fff;
    font-size: 1.5rem;
    line-height: 120%;
    text-align: center;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    position: relative; }
    .swipTitle p:before {
      position: absolute;
      content: ">";
      top: 50%;
      left: -20px;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      text-shadow: 0 0 0;
      color: #a57fcb; }

.swipNav {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 30px;
  height: 30px;
  background-size: cover;
  cursor: pointer; }
  .swipNav.swiper-next {
    right: 10px; }
    .swipNav.swiper-next:hover {
      background-image: url("../img/arrorw_hover_R.png") !important; }
    .swipNav.swiper-next.purple {
      background-image: url("../img/arrorw_purple_R.png"); }
    .swipNav.swiper-next.pink {
      background-image: url("../img/arrorw_pink_R.png"); }
  .swipNav.swiper-prev {
    left: 10px; }
    .swipNav.swiper-prev:hover {
      background-image: url("../img/arrorw_hover_L.png") !important; }
    .swipNav.swiper-prev.purple {
      background-image: url("../img/arrorw_purple_L.png"); }
    .swipNav.swiper-prev.pink {
      background-image: url("../img/arrorw_pink_L.png"); }

.swiper-wrapper.pink .swipImgwrapper {
  padding: 10px;
  background-color: #ee89a1; }
  .swiper-wrapper.pink .swipImgwrapper .swipImgwrapper {
    background-color: #ee89a1; }

.swiper-wrapper.pink .swipTitle {
  background: url("../img/popup_fram.png");
  border-radius: 0 0 2rem 2rem; }
  .swiper-wrapper.pink .swipTitle p:before {
    color: #ee89a1; }

/* --- 0203 add start --- */
.carousel-control-prev-icon {
	background-image: url("../img/arrorw_hover_L.png");
	zoom:2;
}
.carousel-control-next-icon {
	background-image: url("../img/arrorw_hover_R.png");
	zoom:2;
}
.carousel-control-prev {
	margin-left:-50px;
}
.carousel-control-next {
	margin-right:-50px;
}
/* --- 0203 add end --- */

.slider3 {
  max-width: 450px !important; }
  
.coupon > * {
  display: inline-block;
  vertical-align: top; }

.coupon a {
  margin: 0;
padding: 0;
bottom: 0;}

.coupon img {
    margin: 0;
padding: 0;
   }
.buy-ticket{
    position: fixed;
    top: 100px;
    right: 0px;
    z-index: 5;
    padding: 1rem; 
}
.menu {
    
  position: fixed;
  top: 280px;
  right: 0;
  z-index: 5;
  cursor: pointer;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s; }
  @media screen and (max-width: 768px) {
    .menu {
      right: -192px; } } /* 0203修改 25%>30%*/
  .menu.active {
    right: 0; }
  .menu .menu-arrow {
    position: absolute;
    left: -30px;
    top: 10%;
    width: 30px;
    height: 120px;
    -webkit-box-shadow: 0px 0px 25px #ee89a1;
    box-shadow: 0px 0px 25px #ee89a1;
    border-radius: 1rem 0 0 1rem;
}
    .menu .menu-arrow .arrow-b {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 30px 0 30px 15px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); }
  .menu .buy-ticket {
    }
  .menu .menu-area {
    padding: 1rem 0;
    background-color: rgba(202, 164, 228, 0.8);
    border: 2px solid #f8c8ef;
    border-radius: 1rem 0 0 1rem; }

.menu .menu-area .text {
    padding: 0px 2.1rem;
}
  .menu ul li {
    text-align: center;
    display: block; }
    .menu ul li:after {
      content: "";
      display: block;
      width: 100%;
      height: 5px;
      background: url("../img/hline.png") no-repeat 50% 50%; }
    .menu ul li:last-child:after {
      display: none; }
    .menu ul li a {
      padding: 0.5rem;
      display: block;
      color: #fff;
      text-decoration: none;
      letter-spacing: 2px; }
    .menu ul li.active a, .menu ul li:hover a {
      color: #8b61cb; }
  .menu .icons {
    font-size: 0; }
    .menu .icons .icon {
      display: inline-block;
      padding: 4px;
      width: calc(100% / 3);
      position: relative; }
      .menu .icons .icon img {
        width: 50%;
        text-align: center;
        margin: 0 auto; }
      .menu .icons .icon:nth-child(2n):before, .menu .icons .icon:nth-child(2n):after {
        content: "";
        height: 30px;
        width: 2px;
        display: block;
        position: absolute;
        top: 0;
        background: url("../img/v_line.png") no-repeat 50% 50%; }
      .menu .icons .icon:nth-child(2n):before {
        left: -4px; }
      .menu .icons .icon:nth-child(2n):after {
        right: 4px; }

.modal {
  background-color: rgba(255, 211, 231, 0.8); }
  .modal .modal-dialog {
    max-width: 600px; }
  .modal .modal-header {
    padding: 0; }
  .modal .modal-body {
    padding: 20px;
    background-color: #fff; }
    .modal .modal-body p {
      font-size: 1rem; }
      .modal .modal-body p.pink {
        color: #ffacbe; }
      .modal .modal-body p.purple {
        color: #a57fcb; }
  .modal .close {
    position: absolute;
    top: 0;
    right: -70px;
    color: #ee89a1;
    font-size: 50px; }

.scrollbar {
  max-height: 400px;
  overflow-y: scroll; }

.scrollbar::-webkit-scrollbar {
  width: 10px; }

.scrollbar::-webkit-scrollbar-track {
  background-color: rgba(255, 168, 227, 0.4);
  border-radius: 5px; }

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #ffa8e3;
  border-radius: 5px;
  outline: 1px solid slategrey; }

@media screen and (max-width:768px){
    .modal .modal-body p{font-size: 1.3rem;}
}
body {
  scrollbar-base-color: orange;
  scrollbar-arrow-color: green;
  scrollbar-DarkShadow-Color: blue; }