@charset "UTF-8";

/* ===================================
	File Name   : thispage.css
	Description : For LP styles.
	Editor      : Bface Saeki
	Last Editor : Bface Nakamura
	
	Update Description :
	[2025/05/08] 体系図画像内のロゴへリンク付与
	[2025/04/28] 体系図画像内の要素へリンク付与
	[2025/04/17] 新規作成
====================================== */

/*========== Style Contents ==========

  1. Redefinition
	2. Share Elements
  3. Section Styles

====================================== */



/*===== 1. Redefinition  =====*/
body { font-size: 1.6em;}

section { margin-bottom: 5rem;}

h1 {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	min-height: 25rem;
	margin: 0 auto;
	padding: 2rem;
	box-sizing: border-box;
	background: url("../img/bg-title02.png") no-repeat right top / auto 100%, url("../img/bg-title.jpg") no-repeat center / cover;
	font-family: "Noto Serif JP", serif;
	&::after { display: none;}
	span {
		width: 100%;
		max-width: 120rem;
    margin: 0 auto;
		padding: 0 40rem 0 0;
		font-weight: 700;
		font-size: 2.2rem;
		line-height: 1.3;
		font-feature-settings: "palt";
		&::after { display: none;}
		em {
			display: block;
			margin-bottom: 1rem;
			font-weight: 700;
			font-size: 3.8rem;
		}
		b {
			position: relative;
			z-index: 1;
			&::before {
				position: absolute;
				bottom: -15%;
				z-index: -1;
				width: 100%;
				height: 50%;
				background: linear-gradient( to left, transparent 0%, #fff605 15%, #fff605 85%, transparent 100%);
				opacity: .75;
				content: "";
			}
		}
	}
}

article {
	max-width: 120rem;
	margin: 5rem auto 6rem;
	padding: 0 4rem;
	img {
		width: 100%;
		max-width: 64rem;
		height: auto;
		max-height: 100%;
		padding: .5rem;
		background: #fff;
		box-sizing: border-box;
		outline: 1px solid #ccc;
		vertical-align: bottom;
	}
}

div:not(.h3TitleStyle01) a[target="_blank"]::after { display: none;}

@media (max-width: 768px) {
	html { font-size: calc(100vw / 76.8 * 2.048);}
	section { margin-bottom: 4rem;}
	h1 {
		width: 100%;
		background: url("../img/bg-title.jpg") no-repeat center / cover;
		letter-spacing: 0;
		span {
			align-items: center;
			padding: 0;
			font-size: 2rem;
			line-height: 1.4;
			text-align: center;
			em {
				margin-bottom: 2rem;
				font-size: 2.8rem;
			}
			b {
				display: inline-block;
				margin: .25rem 0 .5rem;
			}
		}
	}
	article {
		margin: 3rem 0;
		padding: 0 2rem;
	}
}

@media (max-width: 640px) { html { font-size: calc(100vw / 64 * 1.7067);}}
@media (max-width: 480px) { html { font-size: calc(100vw / 48 * 1.28);}}
@media (max-width: 375px) { html { font-size: calc(100vw / 37.5 * 1);}}
@media (max-width: 360px) { html { font-size: calc(100vw / 36);}}
@media (max-width: 320px) { html { font-size: calc(100vw / 32);}}


/*===== 2. Share Elements  =====*/
a.button {
	display: inline-block;
	border: 1px solid #fa0;
	border-radius: 10rem;
	background: #fa0;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1;
	padding: 1rem 4rem 1.25rem;
	color: #fff;
	text-align: center;
	&::before {
		position: absolute;
		top: 50%;
		right: 1.5rem;
		width: 1rem;
		height: 1rem;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		border-color: currentColor;
		transform: translateY(-50%) rotate(45deg);
		content: "";
	}
	@media (hover: hover){
		&:hover {
			opacity: 1;
			background: #fff;
			color: #fa0;
			&::after {
				border-color: #fa0;
			}
		}
	}
}
a.box {
	display: block;
	width: 80%;
	max-width: 64rem;
	margin: 0 auto;
	border: 1px solid #c00;
	background: #c00;
	font-size: 1.8rem;
	line-height: 1;
	padding: 2rem;
	color: #fff;
	text-align: center;
	&::after {
		position: absolute;
		top: 50%;
		right: 1.5rem;
		width: 1rem;
		height: 1rem;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		border-color: currentColor;
		transform: translateY(-50%) rotate(45deg);
		content: "";
	}
	@media (hover: hover){
		&:hover {
			opacity: 1;
			background: #fff;
			color: #c00;
			&::after {
				border-color: #c00;
			}
		}
	}
}

@media (max-width: 768px) {
	a.button {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding: 1rem 2rem 1.25rem;
	}
}


/*===== 3. Section Styles  =====*/
article {
	> div {
		display: grid;
		grid-template-columns: 1fr 48rem;
		align-items: flex-start;
		gap: 0 4rem;
		margin: 0 auto 4rem;
		h2 {
			grid-column: 1/2;
			grid-row: 1/2;
			margin: 1rem 0;
			padding: 0 0 2rem;
			border-bottom: 1px solid #ccc;
			background: none;
			color: #333;
			font-size: 3.2rem;
			line-height: 1.2;
			text-align: left;
		}
		div {
			grid-column: 1/2;
			grid-row: 2/3;
			p {
				font-weight: bold;
				font-size: 1.8rem;
				&:first-child {
					margin-bottom: 1.5rem;
				}
			}
			ul { margin-bottom: 1.5rem;
				li:not(:last-child) { margin-bottom: .5rem;}
			}
		}
		figure {
			grid-column: 2/3;
			grid-row: 1/3;
		}
	}
	> figure {
		margin-bottom: 5rem;
		padding: 2rem;
		background: #ddeefd;
		text-align: center;
		em {
			display: block;
			margin-bottom: 2rem;
			color: #0079bb;
			font-weight: bold;
			font-size: 2.6rem;
		}
		> div { 
			position: relative;
			max-width: 102.4rem;
			margin: 0 auto;
			> img { 
				position: relative;
				max-width: 102.4rem;
			}
			div {
				position: absolute;
				top: .5rem;  
				left: .5rem;
				width: calc(100% - 1rem);
				aspect-ratio: 16 / 9;
				a {
					position: absolute;
					&:first-of-type {
						top: 15.2%;
						left: 2.7%;
						width: 22.8%;
					}
					&:nth-of-type(2) {
						top: 30.5%;
						left: 4.7%;
						width: 19.53%;
					}
					&:nth-of-type(3) {
						top: 42.5%;
						left: 2.7%;
						width: 18.2%;
					}
					&:nth-of-type(4) {
						top: 58%;
						left: 4.7%;
						width: 15.09%;
					}
					&:nth-of-type(5) {
						top: 70%;
						left: 2.7%;
						width: 21.1%;
					}
					&:nth-of-type(6) {
						top: 88.5%;
						left: 4.7%;
						width: 18.22%;
					}
					&:nth-of-type(7) {
						top: 24.5%;
						left: 65.2%;
						width: 7.9%;
					}
					&:nth-of-type(8) {
						top: 43.5%;
						left: 66.5%;
						width: 11.53%;
					}
					&:nth-of-type(9) {
						top: 52.2%;
						left: 65.2%;
						width: 18.1%;
					}
					&:last-of-type {
						top: 64.5%;
						left: 66.5%;
						width: 11.53%;
					}
					img { 
						display: block;
						padding: 0;
						background: transparent;
						outline: initial;
					}
					&[target="_blank"]::after { content: none !important;}
				}
			}
		}
		figcaption {
			margin-top: 1rem;
			font-weight: bold;
			font-size: 1.4rem;
			line-height: 1.8;
			span {
				color: #c00;
				font-size: 1.6rem;
			}
		}
	}
	
	#introduce {
		ul {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
			li {
				display: grid;
				grid-template-columns: 12rem 1fr;
				grid-auto-rows: min-content;
				align-items: center;
				gap: 1rem;
				padding: 1rem;
				background: #ebebeb;
				> h3 {
					grid-column: 1/3;
					padding-bottom: 1rem;
					border-bottom: 1px dotted #999;
					font-weight: bold;
					font-size: 1.4rem;
					em {
						display: block;
						font-size: 1.6rem;
					}
				}
				> p {
					grid-column: 1/3;
					margin: 0 0 .5rem;
				}
				div {
					grid-column: 2/3;
					grid-row: 3/4;
					display: flex;
					flex-direction: column;
					gap: .5rem;
					font-size: 1.4rem;
					p {
						display: flex;
						align-items: center;
						span {
							display: inline-block;
							min-width: 9rem;
							margin-right: .5rem;
							padding: .25rem;
							background: #333;
							color: #fff;
							text-align: center;
						}
						a {
							color: #1a61a1;
							word-break: break-all;
							@media (hover: hover){
								&:hover {
									color: #00a0e9;
									opacity: 1;
								}
							}
						}
					}
				}
				figure {
					grid-column: 1/2;
					grid-row: 3/4;
				}
			}
		}
	}

	#information {
		em {
			display: block;
			margin-bottom: 1.5rem;
			padding: 1rem 2rem;
			background: #0079bb;
			color: #fff;
			font-weight: bold;
			font-size: 2rem;
		}
		.column {
			display: flex;
			gap: 4rem;
			margin-bottom: 2rem;
			div {
				flex: 1;
				h3 {
					margin: 1rem 0;
					padding-left: 1em;
					text-indent: -1em;
					font-weight: bold;
					font-size: 2rem;
				}
				h4 {
					margin: 1rem 0;
					font-weight: bold;
					font-size: 1.8rem;
				}
				p:not(:last-child) { margin-bottom: 2rem;}
				dl {
					display: grid;
					grid-template-columns: auto auto auto auto;
					align-items: center;
					grid-column-gap: 1rem;
					margin-bottom: 3rem;
					font-weight: bold;
					dt {
						min-width: 8rem;
						padding: .5rem 1rem;
						border: 1px solid #fff;
						background: #333;
						color: #fff;
						text-align: center;
					}
					dd {
						&:first-of-type { margin-right: 1rem;}
					}
				}
			}
			figure {
				width: 32rem;
				margin: 0 auto;
			}
		}
	}
}

@media (max-width: 768px) {
	article {
		> div {
			grid-template-columns: auto;
			gap: 0 2rem;
			margin: 0 auto 3rem;
			h2 {
				margin: 0 0 2rem;
				padding: 0;
				border: none;
				font-size: 2.2rem;
				text-align: center;
			}
			div {
				grid-row: 3/4;
				p:first-child {
					font-weight: normal;
					font-size: 1.6rem;
					text-align: center;
				}
				p:last-child {
					display: block;
					margin: 0 auto;
					font-weight: bold;
					line-height: 1.4;
					text-align: center;
				}
				ul { margin-bottom: 2rem;}
			}
			figure {
				grid-column: auto;
				grid-row: 2/3;
				margin-bottom: 2rem;
			}
		}
		> figure {
			margin-bottom: 3rem;
			em { font-size: 1.8rem;}
			figcaption {
				text-align: left;
				margin-top: 1.5rem;
			}
		}
		
		#introduce {
			ul {
				grid-template-columns: auto;
				li {
					display: block;
					padding: 1.5rem;
					> h3 {
						margin-bottom: 1rem;
					}
					> p {
						margin: 0 0 2rem;
						font-size: 1.4rem;
					}
					div {
						gap: 1rem;
						margin-bottom: 2rem;
						font-size: 1.2rem;
						p {
							span {
								min-width: 7rem;
							}
						}
					}
				}
			}
		}
	
		#information {
			em {
				margin-bottom: 1.5rem;
				padding: 1rem;
				font-size: 1.8rem;
			}
			.column {
				flex-direction: column;
				gap: 2rem;
				div {
					h3 {
						font-size: 1.8rem;
					}
					h4 {
						font-size: 1.6rem;
					}
					p:not(:last-child) { margin-bottom: 1.5rem;}
					dl {
						display: block;
						margin-bottom: 2rem;
						dt {
							margin-bottom: 1rem;
						}
						dd {
							margin: 0 1rem 1.5rem;
						}
					}
				}
			}
		}
	}
}