@charset "utf-8";

/* ----------------------------------------------------
  LoadingのためのCSS
---------------------------------------------------- */
/* Loading背景画面設定　*/
#splash {
  background:#fff;
	position: fixed;/*fixedで全面に固定*/
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
	width:300px;
}

/*========= SVG操作手書き風にするためのCSS ===============*/

#mask .st0{
    fill:none;
    stroke:#fff;
    stroke-width:90;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}


/* ----------------------------------------------------
  swiper
---------------------------------------------------- */
.swiper-wrapper img{margin: 0 auto;}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 0px!important;}
@media print, screen and (min-width: 1200px) {
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
		bottom: 10px!important;
	}
}

@media only screen and (max-width: 767px)  {
.swiper-wrapper, .slide-img { height: 60vh;}
.slide-img > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
	}
}

@media print, screen and (min-width: 768px){
.slide-img img{
  object-fit: cover;
  height: 80vh;
	width: 100vw;
	}
}

@media print, screen and (min-width: 1200px){
.slide-img img{
  object-fit: cover;
  height: 100vh;
	width: 100vw;
	}
}

.swiper-wrap {
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  overflow: hidden;
}

@keyframes zoom-in {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom-in 10s linear 0s 1 normal both;  
}

.slide-text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3vw;
  font-family: serif;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000;
  color: #fff;
  transform: translate(-50%,-50%);
}

.swiper-button-next,
.swiper-button-prev{z-index: 200!important; position: absolute!important;}

.overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

#mainimage {position: relative;}

/* #mainimage h2
------------------------------ */
@media only screen and (max-width: 767px)  {
#mainimage h2{
  position: absolute;
	z-index: 100;
	left: 5%;
	right:5%;
	bottom: 2%;
  transition-duration: 300ms;  
	}	
}
@media print, screen and (min-width: 768px){
#mainimage h2{
  position: absolute;
	z-index: 100;
	left: 8%;
	right:8%;
	bottom: 4%;
  transition-duration: 300ms;  
	}	
}
@media print, screen and (min-width: 992px){
#mainimage h2{
	left: 5%;
	right:15%;
	bottom: 5%;
	}
}
@media print, screen and (min-width: 1200px){
#mainimage h2{
	left: 3%;
	right:25%;
	bottom: 7%;
	}
}

/* #mainimage p
------------------------------ */
@media only screen and (max-width: 767px)  {
#mainimage p{
  position: absolute;
	z-index: 9;
	right:10%;
  bottom:30%;
  max-width: 200px;
  transition-duration: 300ms;  
	}	
}
@media print, screen and (min-width: 768px){
#mainimage p{
  position: absolute;
	z-index: 9;
	right:10%;
  bottom:35%;
  max-width: 300px;
  transition-duration: 300ms;  
	}	
}
@media print, screen and (min-width: 992px){
#mainimage p{
	top: 15%;
	left: 68%;
	right:5%;
  max-width: 400px;   
	}
}
@media print, screen and (min-width: 1200px){
#mainimage p{
	top: 15%;
	left: 65%;
	right:5%;
  max-width: 500px;   
	}
}


/* ----------------------------------------------------
  h2
---------------------------------------------------- */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}	

/* 左寄せ　背景画像あり　文字アニメーション
---------------------------------------------------- */
.h2_midasi_01_bgimg {
  position: relative;
  color: white;
  z-index: 0;
  overflow: hidden;
  background: url("../images/h2.jpg") no-repeat scroll 50% 0% / cover;  
}
.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  z-index: -1;
}
.h2_midasi_01{
	padding:90px 0 40px 0;
	text-align: center;
	color: #222;
}
@media print, screen and (min-width: 768px) {.h2_midasi_01{padding:120px 0 80px 0;}}
@media print, screen and (min-width: 992px) {.h2_midasi_01{padding:150px 0 90px 0;}}
@media print, screen and (min-width:1200px) {.h2_midasi_01{padding:140px 0 80px 0;}}

.h2_midasi_01 p{
	font-size: 40px;
	line-height:50px;
	letter-spacing:4px;
  font-weight: 600;
  transition-duration: 300ms;
	}
.h2_midasi_01 h2{
	font-size: 18px;
	letter-spacing:2px;
  transition-duration: 300ms;
}
@media print, screen and (min-width: 768px) {
.h2_midasi_01 p{
	font-size: 55px;
	line-height:65px;
	letter-spacing:3px;  
	}
.h2_midasi_01 h2{
	font-size: 22px;
	letter-spacing:5px;
	}
}
@media print, screen and (min-width: 992px) {
.h2_midasi_01 p{
	font-size: 65px;
	line-height:75px;
	}
.h2_midasi_01 h2{
	font-size: 25px;
	}
}
@media print, screen and (min-width: 1200px) {
.h2_midasi_01 p{
	font-size: 75px;
	line-height:90px;
	}
}
@media print, screen and (min-width: 1400px) {
.h2_midasi_01 p{
	font-size: 90px;
	line-height:100px;
	}
}