@charset "UTF-8";
/* CSS Document */

/* フォトで切り替えの場合
https://global-web-design.com/1829/
https://zenn.dev/ohtasoji/articles/16b7391074bcdb
 */
.img-box{
  width: 100%;
  height: 46vw;
  max-height: 630px;
  overflow: hidden;
  position: relative;
}
.img-box .top_photo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46vw;
  max-height: 630px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  animation-name: fade;
/* 3秒×5枚＋3秒 */
  animation-duration: 18s;
/* ループ */
  animation-iteration-count: infinite;
}

@keyframes fade {
 0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
/* 拡大 
https://zero-plus.io/media/transform-elements-with-transform/
*/
    transform: scale(1.2);
  }
  100%{
    opacity: 0;
/* スマホメニューより下 */
    z-index: 0;
}
}

.img-box .top_photo:nth-of-type(1){
	background-image: url(../../image/top_photo1.jpg);
	animation-delay: 0s;
}
.img-box .top_photo:nth-of-type(2){
	background-image: url(../../image/top_photo2.jpg);
	animation-delay: 3s;
}
.img-box .top_photo:nth-of-type(3){
	background-image: url(../../image/top_photo3.jpg);
	animation-delay: 6s;
}
.img-box .top_photo:nth-of-type(4){
	background-image: url(../../image/top_photo4.jpg);
	animation-delay: 9s;
}
.img-box .top_photo:nth-of-type(5){
	background-image: url(../../image/top_photo5.jpg);
	animation-delay: 12s;
}
.img-box .top_photo:nth-of-type(4){
	background-image: url(../../image/top_photo6.jpg);
	animation-delay: 9s;
}
.img-box .top_photo:nth-of-type(5){
	background-image: url(../../image/top_photo7.jpg);
	animation-delay: 12s;
}
/* ここまで */


/* mp4でアップの場合 */
.top_movie{
	width: 100%;
	max-width: 1400px;/* 最大1400px */
	height: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
}
/* youtubeでアップの場合 */
.video_long {
     position: relative;
     height: 0;
     padding: 0px 0 56.25%;/*アスペクト比 16:9の場合の縦幅*/
     overflow: hidden;
}
.video_long iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
/* ローディングアニメーション */
.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	-webkit-transform-origin: center;
			transform-origin: center;
	width: 120px;
	height: 120px;
}
 
/* Loading テキスト */
.spinner span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	font-size: 12px;
}
/* 1番目のアニメーションの場合 */
.spinner.type1 {
	border-radius: 50%;
	border-width: 8px;
	border-style: solid;
	border-color: #fff rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12);
/* ローディング要素のアニメーションを指定 */
	-webkit-animation: spinner1_1 1.5s infinite linear forwards;
			animation: spinner1_1 1.5s infinite linear forwards;
}
.spinner.type1 span {
/* Loading テキストのアニメーションを指定 */
	animation: spinner_loading_text 1.5s infinite linear forwards reverse;
}
     
/* ローディング要素のアニメーション内容 */
@-webkit-keyframes spinner1_1 {
0% {
	-webkit-transform: translate(-50%, -50%) rotate(0);
			transform: translate(-50%, -50%) rotate(0);
}
100% {
	-webkit-transform: translate(-50%, -50%) rotate(360deg);
			transform: translate(-50%, -50%) rotate(360deg);
}
}
     
@keyframes spinner1_1 {
0% {
	-webkit-transform: translate(-50%, -50%) rotate(0);
			transform: translate(-50%, -50%) rotate(0);
}
100% {
	-webkit-transform: translate(-50%, -50%) rotate(360deg);
			transform: translate(-50%, -50%) rotate(360deg);
}
}
     
/* Loading テキストのアニメーション内容 */
@-webkit-keyframes spinner_loading_text {
0% {
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) rotate(0deg);
			transform: translate(-50%, -50%) rotate(0deg);
}
50% {
	opacity: 0;
	-webkit-transform: translate(-50%, -50%) rotate(180deg);
			transform: translate(-50%, -50%) rotate(180deg);
}
100% {
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) rotate(360deg);
			transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spinner_loading_text {
0% {
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) rotate(0deg);
			transform: translate(-50%, -50%) rotate(0deg);
}
50% {
	opacity: 0;
	-webkit-transform: translate(-50%, -50%) rotate(180deg);
			transform: translate(-50%, -50%) rotate(180deg);
}
100% {
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) rotate(360deg);
			transform: translate(-50%, -50%) rotate(360deg);
}
}

.box{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      -webkit-transition: all 1.2s ease; /* 1.2秒でフェードアウト */
              transition: all 1.2s ease;
      color: #fff; /* ローディングアニメーションカラー */
      background-color: #333; /* 背景カラー */
 }
/* ローディング表示を消すための定義 */
.box.loaded{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
}

/* ローディングここまで */

/* safariではローディングを表示しない */
_::-webkit-full-page-media, _:future, :root .box {
 display: none;
}