@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

#main {
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position: center top;
}


/*----------------
  タイトル
----------------*/

.voice-area {
	width: 100%;
	height: 600px;
	max-width: 1000px;
	text-align: center;
	padding-top: 210px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}
.voice-contents {
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.top-img {
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
.top-img img {
	pointer-events: none;
    /* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

/* ここから時間差フェードインアニメーション */
/* 0.5秒間かけてフェードイン */
.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 1秒間かけてフェードイン */
.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeIn1s {
	0% {
	transform: translateY(40px) scale(0.8);
	opacity: 0;
	}
	40% {
	transform: scale(1.05);
	}
	60%, 80% {
	transform: scale(1.0);
	}
	50%, 70% {
	transform: scale(0.95);
	}
	40%, 100% {
	opacity: 1;
	}
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 1500ms;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}
@keyframes fadeIn1500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 2.5秒間かけてフェードイン */
.fadeIn2500ms  {
    animation-name: fadeIn2500ms;
    animation-delay: 2500ms;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}
@keyframes fadeIn2500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}



/*----------------
  ボタン
----------------*/

.col_3 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.col_3 > div {
	width: 33.3333%;
  cursor: pointer;
}

.col_3 > div img {
  height: auto;
  transition: transform .6s ease;
  width: 100%;
}


/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {}



/* ====================================
	1025
===================================== */

@media screen and (min-width: 1025px) {

}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width < 768px) {
	
	#main {
		background-image: url(../images/bg_sp.png);
		background-size: 100% auto;
	}
	.voice-area {
		height: auto;
		padding-top: 40%;
	}
	.col_3 {
		margin-top: 90%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
	.col_3 > div {
		width: 50%;
		cursor: pointer;
	}
	
	/* ここから時間差フェードインアニメーション */
	/* 4秒間かけてフェードイン */
	.fadeIn-2-0s {
		animation-name: fadeIn-2-0s;
		animation-delay: 3200ms;
		animation-duration: 0.6s;
		animation-fill-mode: forwards;
		transform: translateY(-50px);
		opacity: 0;
	}
	@keyframes fadeIn-2-0s {
		0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
		}
		100% {
		transform: translateY(0) scale(1.0);
		}
		80%, 100% {
		opacity: 1;
		}
	}
	/* 3.5秒間かけてフェードイン */
	.fadeIn-2-500ms {
		animation-name: fadeIn-2-500ms;
		animation-delay: 3500ms;
		animation-duration: 0.6s;
		animation-fill-mode: forwards;
		transform: translateY(-50px);
		opacity: 0;
	}
	@keyframes fadeIn-2-500ms {
		0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
		}
		100% {
		transform: translateY(0) scale(1.0);
		}
		80%, 100% {
		opacity: 1;
		}
	}
	/* 3.8秒間かけてフェードイン */
	.fadeIn-2-1s {
		animation-name: fadeIn-2-1s;
		animation-delay: 3800ms;
		animation-duration: 0.6s;
		animation-fill-mode: forwards;
		transform: translateY(-50px);
		opacity: 0;
	}
	@keyframes fadeIn-2-1s {
		0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
		}
		100% {
		transform: translateY(0) scale(1.0);
		}
		80%, 100% {
		opacity: 1;
		}
	}
	.button-area {
		margin-left: 20px;
		margin-right: -10px;
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {
	.col_3 {
		width: 98%;
		text-align: center;
		margin-top: 25%;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
	.col_3 > div:hover img {
	  transform: scale(1.1);
	}
	
	/* ここから時間差フェードインアニメーション */
	/* 0秒間かけてフェードイン */
	.fadeInAnime0ms {
		animation-name: fadeIn-2-0s;
	}
	.fadeIn-2-0s {
		animation-delay: 0s;
		animation-duration: 0.6s;
		animation-fill-mode: forwards;
		transform: translateY(-50px);
		opacity: 0;
	}
	@keyframes fadeIn-2-0s {
		0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
		}
		100% {
		transform: translateY(0) scale(1.0);
		}
		80%, 100% {
		opacity: 1;
		}
	}
	/* 0.3秒間かけてフェードイン */
	.fadeInAnime500ms {
		animation-name: fadeIn-2-500ms;
	}
	.fadeIn-2-500ms {
		animation-delay: 300ms;
		animation-duration: 0.6s;
		animation-fill-mode: forwards;
		transform: translateY(-50px);
		opacity: 0;
	}
	@keyframes fadeIn-2-500ms {
		0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
		}
		100% {
		transform: translateY(0) scale(1.0);
		}
		80%, 100% {
		opacity: 1;
		}
	}
	/* 0.6秒間かけてフェードイン */
	.fadeInAnime1s {
		animation-name: fadeIn-2-1s;
	}
	.fadeIn-2-1s {
		animation-delay: 600ms;
		animation-duration: 0.6s;
		animation-fill-mode: forwards;
		transform: translateY(-50px);
		opacity: 0;
	}
	@keyframes fadeIn-2-1s {
		0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
		}
		100% {
		transform: translateY(0) scale(1.0);
		}
		80%, 100% {
		opacity: 1;
		}
	}
}

/* ====================================
	タブレット専用スタイル（768px～1080px）
===================================== */
@media screen and (768px <=width < 1080px) {

}