@charset "utf-8";

div.ttl {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	padding: 0;
}
div.ttl .logo {
	position: absolute;
	left: 1em;
	top: 1em;
	width: 15vw;
	max-width: 200px;
}
div.ttl h1 img {
	max-width: 100%;
	padding: 3em 1.5em 0;
}
div.ttl small { font-size: 0.8em; }

div.hBOX {
	text-align: left;
	padding: 2em;
	display: grid;
	grid-gap: 0;
	grid-template-columns: 4fr 1fr;
}
div.hBOX div { grid-column: 2 / 3; grid-row: 1 / 3; }
div.hBOX h3 { grid-column: 1 / 2; grid-row: 1 / 2; }
div.hBOX p { grid-column: 1 / 2; grid-row: 2 / 3; }
div.hBOX h3 {
	color: #d2216c;
	font-size: 1.5em;
	font-weight: bold;
}
div.hBOX p { padding: 1em 0 0; }

.redTXT { color: #e23a3b; }
.bluTXT { color: #3a5ee2; }

@media all and (max-width: 736px) {
	div.ttl h1 { margin-top: 0; }
	div.ttl .logo {
		left: 50%;
		margin-left: -10vw;
		width: 20vw;
	}
	.spyt {
		position: relative;
		width: 100%;
		padding-bottom: 56.35%;
		height: 0;
		overflow: hidden;
		float: left;
	}
	.spyt iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	div.hBOX div { grid-column: 1 / 3; grid-row: 3 / 4; text-align: center; padding: 1em 0 0; }
	div.hBOX h3 { grid-column: 1 / 3; grid-row: 1 / 2; }
	div.hBOX p { grid-column: 1 / 3; grid-row: 2 / 3; }
}