@charset "UTF-8";

/* ===================================
	File Name   : thispage.css
	Description : For LP styles.
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2026/01/19] 要素追加に伴う改修
	[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: 3rem;}

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 {
	#intro {
		display: grid;
		grid-template-columns: 2fr 3fr;
		align-items: center;
		gap: 0 4rem;
		overflow: hidden;
		margin: 0 auto 4rem;
		h2 {
			grid-column: 2/3;
			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;
		}
		> ul {
			grid-column: 1/2;
			grid-row: 1/3;
			li:not(:last-child) { margin-bottom: 1.5rem;}
			a {
				display: block;
				padding: 1rem 2.5rem 1rem 1rem;
				border: 1px solid transparent;
				background: #ddeefd;
				font-weight: bold;
				&::after {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 1rem;
					width: 1.5rem;
					height: 1rem;
					margin: auto;
					background: currentColor;
					clip-path: polygon(0 0, 100% 0, 50% 100%);
					content:"";
				}
				@media (hover: hover){
					&:hover {
						border: 1px solid #0079bb;
						background: #fff;
						color: #0079bb;
						opacity: 1;	
					}
				}
			}
		}
		> div {
			grid-column: 2/3;
			grid-row: 2/3;
			display: flex;
			align-items: center;
			width: 100%;
			padding-right: 20rem;
			div {
				flex: 1;
				p:first-child {
					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;}
				}
				a.button {
					margin-bottom: 1rem;
					+ p a {
						position: relative;
						padding-right: 1.5rem;
						font-weight: bold;
						&::after {
							position: absolute;
							top: 0;
							bottom: 0;
							right: 0;
							width: 1.5rem;
							height: 1rem;
							margin: auto;
							background: currentColor;
							clip-path: polygon(0 0, 100% 0, 50% 100%);
							content:"";
						}
					}
				}
			}
			figure {
				width: 100%;
				max-width: 18rem;
				padding-left: 1rem;
				img {
					padding: 0;
					outline: 0;
				}
			}
		}
	}

	#tips {
		display: grid;
		grid-template-columns: 11rem 1fr;
		grid-auto-flow: column;
		align-items: center;
		column-gap: 2rem;
		margin-bottom: 4rem;
		p {
			grid-column: 2/3;
			position: relative;
			padding: 1.5rem;
			border-radius: 1rem;
			border-bottom: 5px solid #ecdcb6;
			background: #feedc3;
			&::before {
				position: absolute;
				top: 50%;
				left: -2rem;
				z-index: -1;
				width: 4rem;
				height: 4rem;
				background: #feedc3;
				clip-path: polygon(0 50%, 100% 0, 100% 100%);
				transform: translateY(-50%);
				content: "";
			}
			b {
				color: #c00;
				font-weight: bold;
			}
		}
		figure {
			grid-column: 1/2;
			img {
				padding: 0;
				outline: 0;
			}
		}
	}

	#strongPoint {
		> div {
			display: flex;
			gap: 1rem;
			margin-bottom: 2rem;
			padding-bottom: 1rem;
			border-bottom: 1px solid #0079bb;
			h3 {
				padding: 2rem;
				background: #0079bb;
				color: #fff;
				font-weight: bold;
				font-size: 2rem;
				line-height: 1.2;
				text-align: center;
				place-content: center;
				b {
					display: block;
					font-size: 2.6rem;
				}
			}
			ol {
				flex: 1;
				line-height: 1.2;
				li {
					display: flex;
					gap: 1rem;
					margin: 1rem 0;
					counter-increment: num;
					&:not(:last-child) {
						padding-bottom: 1rem;
						border-bottom: 1px dotted #999;
					}
					&::before {
						color: #0079bb;
						font-weight: bold;
						font-size: 1.8rem;
						line-height: 1;
						content: "0" counter(num);
					}
				}
			}
		}
		> figure {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: 3rem;
			div {
				display: flex;
				align-items: center;
				span {
					z-index: 2;
					order: 1;
					width: 14rem;
					aspect-ratio: 1/1;
					img {
						overflow: hidden;
						padding: 0;
						border-radius: 100%;
						outline: none;
					}
				}
				figcaption {
					flex: 1;
					order: 2;
					margin-left: -4rem;
					min-width: calc(25rem - 4rem);
					padding: 1.5rem 5.5rem 1.5rem 6.5rem;
					border: 2px solid #0079bb;
					border-radius: 10rem;
					background: #fff;
					font-weight: bold;
					text-align: center;
					em {
						display: block;
						font-size: 2rem;
					}
				}
			}
		}
	}

	.images {
		max-width: 102.4rem;
		margin: 0 auto 3rem;
		img {
			max-width: none;
			padding: 0;
			outline: none;
		}
		table {
			margin-top: 1rem;
			font-size: 1.2rem;
			text-align: left;
			th {
				position: relative;
				white-space: nowrap;
				padding: 0 2rem 1rem 0;
				&::before {
					position: absolute;
					top: .7em;
					left: 0;
					z-index: -1;
					width: 100%;
					height: 1px;
					border-top: 1px dotted #999;
					content:"";
				}
				span {
					display: inline-block;
					padding: 0 1rem 0 1rem;
					background: #fff;
				}
			}
			td { padding: 0 1rem 1rem;}
		}
	}

	#seminar {
		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;
			}
		}
	}
}

@media (max-width: 768px) {
	article {
		#intro {
			grid-template-columns: auto;
			gap: 0 2rem;
			margin: 0 auto 3rem;
			h2 {
				grid-column: 1/2;
				margin: 0 0 2rem;
				padding: 0;
				border: none;
				font-size: 2.2rem;
				text-align: center;
			}
			> ul {
				grid-column: 1/2;
				grid-row: auto;
			}
			> div {
				grid-column: 1/2;
				grid-row: auto;
				flex-direction: column;
				width: auto;
				padding: 0;
				div {
					order: 1;
					display: block;
				}
				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 {
					width: 40%;
					max-width: none;
					margin: 2rem 0;
					padding-left: 0;
				}
			}
			> figure {
				grid-column: auto;
				grid-row: 2/3;
				margin-bottom: 2rem;
			}
		}

		#tips {
			grid-template-columns: auto;
			grid-template-rows: auto auto;
			column-gap: 0;
			row-gap: 1rem;
			margin-bottom: 3rem;
			p {
				grid-row: 2/3;
				grid-column: 1/2;
				&::before {
					position: absolute;
					top: 1px;
					left: inherit;
					right: 2rem;
					clip-path: polygon(0 0, 100% 100%, 40% 100%);
					transform: translateY(-100%);
				}
			}
			figure {
				grid-row: 1/2;
				width: 18rem;
				margin: 0 auto;
			}
		}

		#strongPoint {
			> div {
				display: block;
				margin-bottom: 3rem;
				padding-bottom: 0;
				border-bottom: 0;
				h3 {
					padding: 1rem;
					font-size: 2rem;
					b {
						display: inline;
						font-size: 2rem;
					}
				}
			}
			> figure {
				gap: 2rem;
				flex-direction: column;
				align-items: stretch;
				div {
					flex: 1;
					span {
						width: 8rem;
					}
					figcaption {
						flex: 1;
						min-width: 0;
						padding: 1.5rem 3.5rem 1.5rem 4.5rem;
						border: 2px solid #0079bb;
					}
				}
			}
		}

		.images {
			table {
				margin-top: 1rem;
				font-size: 1.2rem;
				text-align: left;
				th {
					display: block;
					padding: 0 0 .5rem;
					font-weight: bold;
					&::before {
						display: none;
					}
					span {
						display: block;
						padding: 0
					}
				}
				td {
					display: block;
					padding: 0 0 1rem;
				}
			}
		}

		#seminar {
			margin-bottom: 3rem;
			em { font-size: 1.8rem;}
			figcaption {
				text-align: left;
				margin-top: 1.5rem;
			}
		}
	}
}