@charset "utf-8";

#wrapper{
  background: #000;
  overflow: hidden;
}

.content{
  background: url("../img/theater-top-bg.png") center top no-repeat;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .content{
    background-size: 170%;
  }
}

.slider {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    overflow: hidden;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slider {
      width: 1400px;
      height:733px;
      padding:0;
  }
  .slider img {
      width: 1400px;
      margin:0;
  }
  .slider span {
    display: block;
    width: 539px;
    position: absolute;
    bottom:10px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    overflow: hidden;
    margin:0;
    padding:0;
  }
  .slider span img {
      width: 100%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slider {
      height:100%;
      margin-top:25px;
  }
  .slider img {
      width: 120%;
      position: relative;
      left: 50%;
      transform: translate(-50%);
      -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
  }
  .slider span {
    display: block;
    width: 40%;
    position: absolute;
    bottom:5px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    overflow: hidden;
    margin:0;
    padding:0;
  }
  .slider span img {
      width: 100%;
  }
}

.tabs-box{
  width:1400px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .tabs-box{
    width:1400px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .tabs-box{
    width:100%;
  }
}
/*ベース*/
div.typeA{
  position: relative;
  visibility: clip;
}
div.typeA::after {
}
div.typeA .tabLabel {	/* タブ */
  position: absolute;
	cursor: pointer;
  text-align: center;
  z-index: 9999;
  left:50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  animation: flash 2s linear infinite;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  div.typeA .tabLabel {	/* タブ */
    width:300px;
    padding:10px 0;
    /*top:650px;*/
    top:810px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  div.typeA .tabLabel {	/* タブ */
    width:120px;
    padding:0 0 5px 0;
  }
}
@media screen and ( max-width:428px ) { /* SP：iPhone 12 Pro Max ==================== */
  div.typeA .tabLabel {	/* タブ */
    /*top:265px;*/
    top:320px;
  }
}
@media screen and ( max-width:414px ) { /* SP：iPhone 11 / XR / 11 Pro Max / 6s / 7 / 8 plus ==================== */
  div.typeA .tabLabel {	/* タブ */
    /*top:255px;*/
    top:310px;
  }
}
@media screen and ( max-width:390px ) { /* SP：iPhone 12 / 12 Pro ==================== */
  div.typeA .tabLabel {	/* タブ */
    /*top:245px;*/
    top:295px;
  }
}
@media screen and ( max-width:375px ) { /* SP：iPhone 12 mini / 11 Pro/ X / XS / SE2 / 6s / 7 / 8 ==================== */
  div.typeA .tabLabel {	/* タブ */
    /*top:235px;*/
    top:285px;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .tabLabel img{
    margin-bottom:5px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .tabLabel img{
    height: 7px;
    margin-bottom:5px;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .tab-white{
    margin-left:160px;
  }
  .tab-black{
    margin-left:-160px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .tab-white{
    margin-left:65px;
  }
  .tab-black{
    margin-left:-65px;
  }
}
div.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
div.typeA input {		/* ラジオボタン非表示 */
	display: none;
}
div.typeA .tab-content {	/* 本文 */
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
/*アクティブ設定*/
div.typeA input:checked + .tabLabel {
  position: absolute;
  animation: none;
}
div.typeA input:checked + .tabLabel + .tab-content {
	height: auto;
  display: block;
	overflow: auto;
	transition: .5s opacity;
	opacity: 1;
}
.tab-black{
  background:#000;
  border: 1px solid #5a5a5a;
}
.tab-white{
  background:#fff;
  border: 1px solid #5a5a5a;
}


.theater-area{
  position: relative;
  overflow: hidden;
}

.concept{
  width:100%;
  text-align: center;
  position: absolute;
  left:50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  z-index: 9999;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .concept{
    top:160px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .concept{
    top:50px;
  }
}

/* Slider */
.pv-slider {

}
.slick-slide {
  width:100%;
  overflow: hidden;
}
.slick-slide img {
  height: auto;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);

}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-slide img {
    width: 1920px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slick-slide img {
    width: 130%;
  }
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #fff;
}
.prevArrow,
.nextArrow{
  position: absolute;
  z-index: 1000;
  top: 40%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  cursor: pointer;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .prevArrow{
    left: 20px;
  }
  .nextArrow{
    right: 20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .prevArrow,
  .nextArrow{
    height: 30px;
  }
  .prevArrow{
    left: 10px;
  }
  .nextArrow{
    right: 10px;
  }
}
.slick-dots{
  bottom:none;
  z-index: 9999 !important;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-dots{
    top:600px;
  }
}
@media screen and ( max-width:428px ) { /* SP：iPhone 12 Pro Max ==================== */
  .slick-dots{
    top:165px;
  }
}
@media screen and ( max-width:414px ) { /* SP：iPhone 11 / XR / 11 Pro Max / 6s / 7 / 8 plus ==================== */
  .slick-dots{
    top:160px;
  }
}
@media screen and ( max-width:390px ) { /* SP：iPhone 12 / 12 Pro ==================== */
  .slick-dots{
    top:150px;
  }
}
@media screen and ( max-width:375px ) { /* SP：iPhone 12 mini / 11 Pro/ X / XS / SE2 / 6s / 7 / 8 ==================== */
  .slick-dots{
    top:142px;
  }
}
.slick-dots li button:before{
    font-family: 'slick';
    position: absolute;
    top: 0;
    left: 0;
    content: '•';
    text-align: center;
    line-height: 1.0;
    color: #fff !important;
    width: 20px;
    height: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .slick-dots li button:before{
      font-size: 15px;

  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .slick-dots li button:before{
      font-size: 8px !important;
  }
}
.slick-dots li.slick-active button:before{
    color: #dc0000 !important;
}

.content{
  overflow: hidden;
  text-align: center;
  position: relative;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .content{
    max-width:1920px;
    margin:0 auto;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .content{
    width:100%;
  }
}

.concept-pv{
  background:rgba(0,0,0,0.1);
  box-shadow: 2px 2px 4px;
  margin:0 auto;
}
.concept-pv div{
  background: linear-gradient(to bottom right, rgba(225,225,225,0.5), rgba(200,200,200,0.5), rgba(225,225,225,0), rgba(225,225,225,0), rgba(200,200,200,0.5), rgba(225,225,225,0.5));
	background: -webkit-linear-gradient(top left, rgba(225,225,225,0.5), rgba(200,200,200,0.5), rgba(225,225,225,0), rgba(225,225,225,0), rgba(200,200,200,0.5), rgba(225,225,225,0.5));
	background: -moz-linear-gradient(top left, rgba(225,225,225,0.5), rgba(200,200,200,0.5), rgba(225,225,225,0),rgba(225,225,225,0),  rgba(200,200,200,0.5), rgba(225,225,225,0.5));
	background: -o-linear-gradient(top left, rgba(225,225,225,0.5), rgba(200,200,200,0.5), rgba(225,225,225,0), rgba(225,225,225,0), rgba(200,200,200,0.5), rgba(225,225,225,0.5));
	background: -ms-linear-gradient(top left, rgba(225,225,225,0.5), rgba(200,200,200,0.5), rgba(225,225,225,0), rgba(225,225,225,0), rgba(200,200,200,0.5), rgba(225,225,225,0.5));
  margin:0;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .concept-pv{
    width:620px;
  }
  .concept-pv div{
    padding:10px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .concept-pv{
    width:206px;
  }
  .concept-pv div{
    padding:3px;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .play-movie{
    margin-top:-10px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .play-movie{
    width:150px;
    margin-top:-20px;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .concept-pv div iframe,
  .dummy-pv{
    width:600px;
    height:338px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .concept-pv div iframe,
  .dummy-pv{
    width:200px;
    height:113px;
  }
}

.app_download{
  margin: 400px auto 0;
  background: #fff;
  display: block;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .app_download{
    width: 1000px;
    padding: 10px;
    border: 3px solid #ccc;
    border-radius: 20px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .app_download{
    width: 90%;
    padding: 5px;
    border: 3px solid #ccc;
    border-radius: 10px;
  }
}
.theater_icon{
  float: left;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater_icon {
    width:20%;
  }
  .theater_icon img{
    width:100%;
  }
}
.btn_app_download{
  float: right;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .btn_app_download{
    width:75%;
  }
  .btn_app_download div{
    width:100%;
  }
  .btn_app_download div img{
    width:100%;
  }
}
.btn_app_download ul{
  margin-top: 5px;
}
.btn_app_download ul li{
  float: left;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .btn_app_download ul li{
    margin-left: 10px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .btn_app_download ul li{
    margin-left: 5px;
  }
  .btn_app_download ul li.btn_left{
    width:33%;
  }
  .btn_app_download ul li.btn_right{
    width:60%;
  }
  .btn_app_download ul li img{
    width:100%;
  }
}

.btn_app_download .asterisk{
  width:100%;
}
.btn_app_download .asterisk li{
  float:none;
  text-align: left;
}
.btn_app_download .asterisk .red{
  color:#dc0000;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .btn_app_download .asterisk .red{
    font-size:150%;
    text-align: center !important;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .btn_app_download .asterisk li{
    line-height: 1.2;
    font-size: 80%;
  }
  .btn_app_download .asterisk .red{
    font-size: 80%;
  }
}

.theater-sp-btn{
  text-align: center;
  margin: 15px auto;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .theater-sp-btn{
    width:100%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater-sp-btn{
    width:40%;
  }
  .theater-sp-btn img{
    width:100%;
  }
}


@media screen and ( min-width:640px ) { /* PC ==================== */
  .theater-body{
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater-body img{
    width:120%;
    position: relative;
    left:50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    z-index: 0;
  }
}

p.attention{
  text-align: center;
  margin-top:10px;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  p.attention{
    font-size: 12px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  p.attention{
    font-size: 9px;
  }
}

.theater-w-display,
.theater-b-display{
  text-align: center;
}
.theater-w-display{
  background: url("../img/theater-w-display-bg.jpg") center top no-repeat;
}
.theater-b-display{
  background: url("../img/theater-b-display-bg.jpg") center top no-repeat;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .theater-w-display,
  .theater-b-display{
    padding-bottom: 80px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater-w-display,
  .theater-b-display{
    padding-bottom: 20px;
    background-size: 120%;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .display-copy{
    margin-top:70px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .display-copy{
    margin-top:25px;
    width:90%;
  }
}

.theater-w-display-t01{
  background: url("../img/theater-w-display-t01.png") center top no-repeat;
}
.theater-w-display-t02{
  background: url("../img/theater-w-display-t02.png") center top no-repeat;
}
.theater-w-display-t03{
  background: url("../img/theater-w-display-t03.png") center top no-repeat;
}
.theater-b-display-t01{
  background: url("../img/theater-b-display-t01.png") center top no-repeat;
}
.theater-b-display-t02{
  background: url("../img/theater-b-display-t02.png") center top no-repeat;
}
.theater-b-display-t03{
  background: url("../img/theater-b-display-t03.png") center top no-repeat;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .theater-w-display-t01,
  .theater-w-display-t02,
  .theater-w-display-t03,
  .theater-b-display-t01,
  .theater-b-display-t02,
  .theater-b-display-t03{
    width:100%;
    padding-top: 75px;
    margin-top: 50px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater-w-display-t01,
  .theater-w-display-t02,
  .theater-w-display-t03,
  .theater-b-display-t01,
  .theater-b-display-t02,
  .theater-b-display-t03{
    width:100%;
    background-size: 100%;
    padding-top: 30px;
    margin-top: 15px;
  }
}

.swiper-container-vp {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .swiper-container-vp {
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .swiper-container-vp {
    width:80%;
  }
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .swiper-container {
    width:1032px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .swiper-container {
    width:80%;
  }
  .swiper-container img{
    width:100%;
  }
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  padding-bottom: 20px;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 9999;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .swiper-button-prev,
  .swiper-button-next{
  	top:40%;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .swiper-button-prev,
  .swiper-button-next{
  	top:35%;
  }
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .swiper-button-prev{
  	left:50px;
  }
  .swiper-button-next{
  	right:50px;
  }
  .swiper-button-prev img,
  .swiper-button-next img{
    width:35px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .swiper-button-prev{
  	left:10px;
  }
  .swiper-button-next{
  	right:10px;
  }
  .swiper-button-prev img,
  .swiper-button-next img{
    width:20px;
    fill:#fff;
  }
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled{
	opacity: 0.35;
	cursor: auto;
	pointer-events: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 9999;
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .swiper-pagination {
    margin-bottom:-10px;
  }
}
.swiper-pagination-bullet {
  display: inline-block;
  border-radius: 100%;
  opacity: 1.0;
}
#theater-w ..swiper-pagination-bullet {
  background: #c1b8bc;
}
#theater-b .swiper-pagination-bullet {
  background: #ccc;
}
#theater-w .swiper-pagination-bullet-active{
  background: #000;
}
#theater-b .swiper-pagination-bullet-active{
  background: #ff0000;
}
@media screen and ( min-width:767px ) { /* PC ==================== */
  .swiper-pagination {
    position: relative;
    bottom: 0;
  }
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
  }
}

.product-area{
  text-align: center;
}
.product-w-bg{
  background: url("../img/theater-w-product-bg.jpg") center top no-repeat;
  background-position: bottom;
}
.product-b-bg{
  background: url("../img/theater-b-product-bg.jpg") center top no-repeat;
  background-position: bottom;
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product-w-bg,
  .product-b-bg{
    background-size: 120%;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .theater-manual-btn{
    margin-top:100px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater-manual-btn{
    width:60%;
    margin:30px auto 0;
  }
  .theater-manual-btn img{
    width:100%;
  }
}

@media screen and ( min-width:640px ) { /* PC ==================== */
  .theater-product-title{
    margin-top:70px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .theater-product-title{
    margin-top:30px;
    width:100%;
  }
  .theater-product-title img{
    width:100%;
  }
}

.product{
  margin: 10px auto 0;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .product{
    width:1030px;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product{
    width:90%;
  }
}

.product div{
  position: relative;
  padding:0 !important;
  margin:0 !important;
}
.theater-l-product{
  text-align:center;
  margin:30px auto 0 !important;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product div{
    width:49%;
  }
  .product div img{
    width:100%;
  }
}
.theater-w-product{
  float: left;
}
.theater-b-product{
  float: right;
}
.product div .btn_api{
text-align:center !important;
  position: absolute !important;
  padding:0 !important;
    margin:0 !important;
  left:50% !important;
  transform: translate(-50%, 0) !important;
  -webkit-transform: translate(-50%, 0) !important;
  -ms-transform: translate(-50%, 0) !important;
}
@media screen and ( min-width:640px ) { /* PC ==================== */
  .product div .btn_api{
    bottom:15px !important;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product div .btn_api{
    bottom:-10px !important;
    margin-left:-8px !important;
  }
}

.btn-light{
    display:block;
    background-image:url("../img/btn-ttm-api.jpg");
    background-size:100%;
    background-color: transparent !important;
    border:0 !important;
    color:#000 !important;
    font-weight:bold !important;
    border-radius:0 !important;
}
.btn-light:hover,
.btn-light::visited,
.product div .btn_api::visited{
    background-color: transparent !important;
    border:0 !important;
    color:transparent !important;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
    .btn-light{
     width:235px;
     height:94px;
     line-height:140px !important;
    }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
    .btn-light{
     width:100px;
     height:40px;
     font-size:10px !important;
     line-height:60px !important;
    }
}





@media screen and ( min-width:640px ) { /* PC ==================== */
  .product-area .attention{
    /*padding:554px 0 10px 0;*/
    padding:690px 0 10px 0;
    color:#fff;
  }
}
@media screen and ( max-width:640px ) { /* SP  ==================== */
  .product-area .attention{
    /*padding:120px 0 10px 0;*/
    padding:170px 0 10px 0;
    color:#fff;
  }
}