@charset "UTF-8";

/***** デフォルトはスマートフォン *****/
.main_imgBox {
	position: relative;
	height: 200px;
	overflow: hidden;
	position: relative;
}

/* 
.main_logo {
	z-index:12;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:50%;
	text-align: center;
	height:auto;
}
*/
.main_imgM {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	left: 0;
	top: 0;
	-webkit-animation: anime 48s 0s infinite;
	animation: anime 48s 0s infinite;
}

.main_imgM:nth-of-type(2) {
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}

.main_imgM:nth-of-type(3) {
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}

.main_imgM:nth-of-type(4) {
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}

.main_imgM:nth-of-type(5) {
	-webkit-animation-delay: 32s;
	animation-delay: 32s;
}

.main_imgM:nth-of-type(6) {
	-webkit-animation-delay: 40s;
	animation-delay: 40s;
}

@keyframes anime {
	0% {
		opacity: 0;
	}

	/* 要素を透明にする */
	8% {
		opacity: 1;
	}

	17% {
		opacity: 1;
	}

	33% {
		opacity: 0;
		transform: scale(1.2);
		z-index: 9;
	}

	100% {
		opacity: 0
	}
}

@-webkit-keyframes anime {
	0% {
		opacity: 0;
	}

	8% {
		opacity: 1;
	}

	17% {
		opacity: 1;
	}

	25% {
		opacity: 0;
		-webkit-transform: scale(1.2);
		z-index: 9;
	}

	100% {
		opacity: 0
	}
}

.top_topimg {
	position: relative;
}

.top_toptext {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	color: white;
	text-align: center;
	font-size: 4.2vw;
	z-index: 80;
}

.top_section {
	width: 100%;
	padding: 3rem 0;
	text-align: center;
	background-color: var(--back-color);
	background-color: var(--tiffany-blue);
	background: rgba(32, 55, 68, 0.8);
	background: rgba(116, 204, 196, 0.8);
	color: white;
}

/* ---- 背景画像の指定 ----- */
.parallax {
	width: 100%;
	height: 66.7vw;
	/* 画像を３：２で作成した場合の指定 横÷縦✕100を VWで指定*/
	position: sticky;
	/* 要素を固定する */
	top: 0;
	left: 0;
	z-index: -1;
	/* 通常要素より下に表示 */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/*  background-attachment: fixed;   */
	/* iosで＜background-attachment: fixed;＞と＜background-size: cover;＞を同時に適用させようとすると、【fixed】が無効になってしまう。 */
}

.parallax01 {
	background-image: url(../img/top_01.webp);
}

.parallax02 {
	background-image: url(../img/top_02.webp);
}

.parallax03 {
	background-image: url(../img/top_03.webp);
}

.parallax04 {
	background-image: url(../img/top_04.webp);
}

.parallax05 {
	background-image: url(../img/top_05.webp);
}

.parallax06 {
	background-image: url(../img/top_06.webp);
}

.top_text {
	min-height: 30vh;
}

.top_link {
	display: inline-block;
	width: 220px;
	border: 1px solid #333333;
	background-color: white;
	color: #333333;
	padding: 20px 10px;
	;
}

/**==================================================**/
/**=          画面サイズ768px以上の指定              **/
/**==================================================**/
@media screen and (min-width:768px) {
	.main_imgBox {
		height: 900px;
	}
}

/**==================================================**/
/**=          画面サイズ960px以上の指定              **/
/**==================================================**/
@media screen and (min-width:960px) {}