@charset "UTF-8";
/* CSS Document */
h1 {
	background-image: url("../images/agora/houmon/houmon_h1_bg.jpg");
}
h1 span {
	background-image: url("../images/agora/houmon/houmon_h1.png");
}
/*230727追記*/
ul#GlobalNav > li:nth-of-type(4) > a {
	color: #3e8d9e !important;
	font-weight: 700;
}
#HoumonIndex {
	position: relative;
	display: flex;
	align-content: stretch;
	justify-content: flex-start;
	flex-flow: wrap;
	gap: 1em;
	width: 83.33vw;
	max-width: 1000px;
	margin: 2em auto;
}
#HoumonIndex .HoumonMenuBox {
	display: block;
	width: calc(100% / 3 - 2em / 3);
	border: solid 1px #3e8d9e;
	position: relative;
}
#HoumonIndex .HoumonMenuBox a {
	text-decoration: none;
}
#HoumonIndex .HoumonMenuBox figure {
	width: 100%;
	margin: 0;
}
#HoumonIndex .HoumonMenuBox figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 2/1;
	object-fit: cover;
}
#HoumonIndex .HoumonMenuBox figure figcaption {
	text-align: center;
	padding: 0.25em 0.5em 0.5em;
}
#HoumonIndex .HoumonMenuBox .NewRibbon {
	display: inline-block;
	position: absolute;
	top: -0.5em;
	left: 0.5em;
	margin: 0;
	padding: 0.75em 0.5em 0.5em;
	z-index: 2;
	text-align: center;
	color: white;
	font-size: 80%;
	background: #f2992b;
}
#HoumonIndex .HoumonMenuBox .NewRibbon::before {
	position: absolute;
	content: '';
	content: "";
	top: 0;
	right: -0.5em;
	width: 0.5em;
	height: 1em;
	background: linear-gradient(to bottom left, transparent 50%, #e85707 50%) no-repeat top left / 100% 50%;
}
#HoumonIndex .HoumonMenuBox .NewRibbon::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	height: 0.75em;
	width: 100%;
	background: linear-gradient(to bottom left, #f2992b 50%, transparent 50%) top left/ 50% 100% no-repeat, linear-gradient(to bottom right, #f2992b 50%, transparent 50%) top right / 50% 100% no-repeat;
}
.ContentsBlock {
	display: block;
	width: 83.33vw;
	max-width: 1000px;
	margin: 2em auto;
	clear: both;
	overflow: hidden;
}
.ContentsBlock h2 {
	margin: 0 auto 1em;
}
.VideoArea {
	width: 100%;
	margin: 0 auto;
}
.VideoArea a {
	display: block;
	position: relative;
}
.VideoArea a::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../images/global/icn_video_play.png") no-repeat center center;
	background-size: 20% auto;
}

/* 追加 */
.VideoAreaTop {
	width: 100%;
	margin: 0 auto;
}
.VideoAreaTop a {
	display: block;
	position: relative;
}
.VideoAreaTop a::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../images/global/icn_video_play_txt.png") no-repeat center center;
	background-size: 100% auto;
}
/* 追加 */

#Interviewee {
	font-size: 120%;
	line-height: 150%;
}
#Title {
	font-size: 200%;
	line-height: 150%;
	font-weight: 700;
	color: #3e8d9e;
	margin: 1em 0 0.5em;
}
#SubTitle {
	font-size: 150%;
	line-height: 150%;
	color: #3e8d9e;
	margin: 0 0 1em;
}
#LeadParagraph {
	padding-bottom: 1em;
	border-bottom: solid 1px #c6c6ca;
}
figure {
	margin: 1em auto 2em;
}
figure.FloatRight {
	float: right;
	clear: right;
	margin: 0 0 1em 2em;
}
figure.FloatLeft {
	float: left;
	clear: left;
	margin: 0 2em 1em 0;
}
figure.Land {
	width: 33.33vw;
	max-width: 400px;
}
figure.Land img {
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
}
figure.Port {
	width: 25vw;
	max-width: 300px;
}
figure.Port img {
	width: 100%;
	height: auto;
	aspect-ratio: 3/4;
	object-fit: cover;
}
figure figcaption {
	text-align: center;
	font-size: 80%;
	line-height: 120%;
	color: #666666;
}
/*関連情報*/
#ProdArea {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-flow: wrap;
	gap: 1em;
	border-top: solid 1px #c6c6ca;
}
#ProdArea h3, #Related h3 {
	width: 100%;
	flex-shrink: 0;
	text-align: center;
	margin: 1em auto 0;
}
#ProdArea .ProdBox {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "ProdName ProdName""ProdPhoto Outline";
	position: relative;
	border: solid 1px #3e8d9e;
	padding: 0.5em;
	color: #000000;
	text-decoration: none;
}
#ProdArea .ProdBox .ProdName {
	grid-area: ProdName;
	text-align: center;
	padding-bottom: 0.5em;
}
#ProdArea .ProdBox .ProdPhoto {
	grid-area: ProdPhoto;
	padding-right: 0.5em;
}
#ProdArea .ProdBox .ProdPhoto img {
	width: 12.5vw;
	max-width: 150px;
	height: 12.5vw;
	max-height: 150px;
	object-fit: contain;
}
#ProdArea .ProdBox .Outline {
	grid-area: Outline;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 2em;
	font-size: 80%;
	line-height: 150%;
}
#ProdArea .ProdBox .LinkText {
	position: absolute;
	right: 1em;
	bottom: 0.5em;
	font-size: 80%;
	line-height: 150%;
}
#Related {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: wrap;
	gap: 1em;
	border-top: solid 1px #c6c6ca;
}
/*埋め込みmp4*/
.VideoBox {
	width: 100%;
	height: auto;
}
.VideoBox video {
	width: 100%;
}
/*タブレット*/
@media screen and (max-width:1199px) {}
/*スマホ*/
@media screen and (max-width: 767px) {
	#HoumonIndex .HoumonMenuBox {
		width: calc(100% / 2 - 1em);
	}
	#ProdArea .ProdBox .ProdPhoto img {
		width: 30vmin;
		max-width: 30vmin;
		height: 30vmin;
		max-height: 30vmin;
		object-fit: contain;
	}
	@media screen and (max-aspect-ratio: 11/10) {
		/* 縦向きの場合のスタイル */
		/*230726*/
		h1 {
			background-position: right 30% center;
		}
		#HoumonIndex .HoumonMenuBox {
			width: 100%;
		}
		figure.FloatRight, figure.FloatLeft {
			float: none;
			clear: both;
			margin: 1em 0;
		}
		figure.Land {
			width: 100%;
			max-width:  100%;
		}
		figure.Port {
			width: 100%;
			max-width:  100%;
		}
		figure figcaption {
			padding-bottom: 1.5em;
		}
	}
	@media screen and (min-aspect-ratio: 11/10) {
		/* 横向きの場合のスタイル */
	}
}