﻿/*トップページスライダー背景*/
/*.topKv__slidePanel:nth-of-type(1) {
  background-image: url(../img/top/topKv__1.png)
}
.topKv__slidePanel:nth-of-type(2) {
  background-image: url(../img/top/topKv__2.png)
}
.topKv__slidePanel:nth-of-type(3) {
  background-image: url(../img/top/topKv__3.png)
}*/
.topKv__slide img {
	width:100%;
	height:700px;
	object-fit: cover;
}
@media (min-width: 768px){
  .topKv__slide img {
      width:100%;
	  height:510px;
      object-fit: cover;
  }
}
.topKv__copy {
    max-width: 568px;
    width: 100%;
    margin-left: 0;
    margin-right: calc(50% - 532px);
}
@media (min-width: 1132px){
  .topKv__copy {
      margin-left: calc(50% - 532px);
      margin-right: calc(50% - 532px);
  }
}
.topKv__copy::before {
  width: 50vw;
  min-width: 460px;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 1100px){
  .topKv__copy::before {
    position: absolute;
    top: 0;
	left: calc(100% - 52vw);
  }
}

.kv_video{
  position: absolute;
  right: calc((100vw - 1100px) / 2);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  max-width: 500px;
}
@media (max-width: 1100px){
  .kv_video{
    right: 10px;
    width: calc(100vw - 550px);
  }
}
@media (max-width: 768px){
  .kv_video{
    top: auto;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 425px;
  }
}
.video-modal{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
.modal_bg{
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.8);
}
.modal_content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 80%;
  background: #fff;
  padding: 40px;
}
.modal-close{
  cursor: pointer;
}
.modal_content video{
  width: 100%;
  margin-bottom: 20px;
}
.modal_content .modal-close{
  padding: 10px;
  border: 1px solid #000;
}
@media (max-width: 768px){
  .modal_content{
    width: 90%;
    padding: 15px;
  }
}

.button.top-r{
  margin-left: 290px;
}
@media (max-width: 768px){
  .button.top-r{
    margin-left: 230px;
  }
}
@media (max-width: 460px){
  .button.top-r{
    margin-left: auto;
  }
}

