@charset "UTF-8";

/** TOP Slider **/
.top_photo01 {background-image: url("../img/toppc_img01.jpg");}
.top_photo02 {background-image: url("../img/toppc_img02.jpg");}
.top_photo03 {background-image: url("../img/toppc_img03.jpg");}
.top_photo04 {background-image: url("../img/toppc_img04.jpg");}
.top_photo05 {background-image: url("../img/toppc_img05.jpg");}

#slide {
    position: absolute;
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100%;
}

#slide .photo {
    position: relative;
	background-size: cover;
	background-position: center;
	height: 100%;
	width: 100%;
}

/* JSの秒数に合わせる */
.top_zoom {
    animation: top_zoom_animation 13s;
}

@keyframes top_zoom_animation {
  0% {
    transform: scale(1);
      transform-origin: 50% 50%;
  }
  100% {
    transform: scale(1.1);
      transform-origin: 50% 50%;
  }
}

/** テキストアニメーションここまで **/

.topVideo {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.topVideo .video,
#service video {
    min-height: 100%;
    min-width: 100%;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.top_read{
    display: inline-block;
	width: 100%;
	position: absolute;
	text-align: center;
	font-family: 'Noto Serif JP', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: calc(100vw * 0.015);
    color: #ffffff; /* 他のテキストは白色に設定 */
	text-shadow: 2px 0 2px rgb(0, 0, 0, 1), -2px 0 2px rgb(0, 0, 0, 1), 0 2px 2px rgb(0, 0, 0, 1), 0 -2px 2px rgb(0, 0, 0, 1);
	line-height: 1.5em;
	top: 50%;
	transform: translateY(-50%);
}

.top_read img {
	width: 30vw;
}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1920px) {
/* ------------------------------------------------------ */
.top_read img {
	width: 40vw;
}
}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1336px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1250px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 820px) {
/* ------------------------------------------------------ */
.topVideo {
	height: 100%;
}
}

/* ------------------------------------------------------ */
@media only screen and (max-width : 810px) {
/* ------------------------------------------------------ */
.top_read img {
	width: 70vw;
}

.top_read {
    font-size: calc(100vw * 0.025);
}
}

/* ------------------------------------------------------ */
@media only screen and (max-width : 600px) {
/* ------------------------------------------------------ */

}