@charset "UTF-8";
/* =========================================================
contents
========================================================= */
#contents {
	padding: 0 0 3em;
}
/* =========================================================
mv
========================================================= */
#mv {
	background: url(/img/mv-photo.jpg) no-repeat center / cover;
	position: relative;
	padding: 0 0 37%;
}
#mv h1 {
	font-size: 165%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -110px;
	margin-top: -110px;
	font-weight: normal;
	line-height: 1.6;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	color: #fff;
	padding: 56px 0 0 0;
	background: linear-gradient(135deg, #005e9c 10%, #00A0C1 90%);
}
#mv h1 span {}
#mv .name {
	background: #fff;
	border-radius: 20px;
	position: absolute;
	top: 50%;
}
#mv .name:nth-of-type(1) {
	margin-top: 130px;
	right: 50%;
	margin-right: -500px;
	width: 320px;
}
#mv .name span {
	font-size: 80%;
	padding: 0 0 0 1em;
}
/* =========================================================
special
========================================================= */
#special {}
#special .bnr {
	padding: 1.0em 0 0;
	display: inline-block;
}
#special .bnr a {
	display: block;
}
/* =========================================================
intro-fb
========================================================= */
.intro-fb {
	padding: 0 0 5em;
	width: 880px;
}
.intro-fb:after {
	content: "";
	display: block;
	clear: both;
}
/* =========================================================
intro
========================================================= */
#intro {
	width: 50%;
	float: left;
	padding: 5em 0 0 0;
}
#intro h2 {
	color: #005e9c;
	font-size: 145%;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-align: justify;
}
#intro .lead {
	text-align: justify;
	font-size: 90%;
	width: 400px;
	margin: 0;
	padding: 2em 0 5em;
	line-height: 2;
}
#intro .btn {}
#intro .btn a {
	margin: 0;
}
/* =========================================================
fb
========================================================= */
#fb {
	width: 400px;
	float: right;
	text-align: justify;
	padding: 1.5em 0 0;
}
#fb h2 {
	font-size: 100%;
	padding: 1em 0 1em 36px;
	background: url(/common/img/fb-icon.svg) no-repeat left center / 24px auto
}
#fb h2 a {}
/* =========================================================
outline
========================================================= */
#outline {}
#outline h2 {
	width: 980px;
	color: #005e9c;
	font-size: 145%;
	font-weight: bold;
	padding: 3em 0 2em;
	letter-spacing: 0.2em;
	border-width: 2px 0 0 0;
	border-style: solid;
	border-image: linear-gradient(to right, #005e9c, rgba(0, 161, 171, 1)) 1 100%;
	border-image-slice: 1;
}
#outline .list {
	padding: 0 0 6em;
}
#outline .list ul {
	width: 780px;
}
#outline .list ul:after {
	content: "";
	display: block;
	clear: both;
}
#outline .list ul li {
	width: 33.3333%;
	float: left;
}
#outline .list ul li a {
	display: block;
}
#outline .list ul li a span {
	display: block;
}
#outline .list ul li a .photo {
	position: relative;
	width: 226px;
	height: 226px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#outline .list ul li a .photo::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
#outline .list ul li a .name {
	padding: 1.5em 0 3em;
}
#outline .list ul li a:hover .photo::before {
	border: 10px solid rgb(0 94 156 / 80%);
	transition: border 0.2s ease;
}
@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	/*============================
#mv
============================*/
	#mv {
		padding: 0 0 64%;
		margin-bottom: 63px;
	}
	#mv h1 {
		font-size: 90%;
		position: absolute;
		bottom: -63px;
		left: 19px;
		top: initial;
		/* left: initial; */
		margin-left: initial;
		margin-top: initial;
		font-weight: normal;
		line-height: 1.6;
		width: 120px;
		height: 120px;
		/* aspect-ratio: 1/1; */
		border-radius: 50%;
		color: #fff;
		padding: 0;
		display: flex;
		background: linear-gradient(135deg, #005e9c 10%, #00A0C1 90%);
		align-items: center;
		justify-content: center;
		font-feature-settings: "palt";
	}
	#mv .name {
		background: #fff;
		border-radius: 20px;
		position: absolute;
		top: 50%;
		font-feature-settings: "palt";
		letter-spacing: 0.1em;
	}
	#mv .name:nth-of-type(1) {
		margin-top: initial;
		left: initial;
		margin-left: initial;
		width: auto;
		top: initial;
		font-size: 100%;
		padding: 8px 22px;
		border-radius: calc(1px / 0);
		bottom: 5%;
		right: 4%;
		margin-right: initial;
		line-height: 1.2;
	}
	#mv .name span {
		display: block;
		padding: 0;
		margin-top: 0.5em;
		font-size: 65%;
	}
	/*============================
#special
============================*/
	#special {
		width: 90%;
	}
	#special .bnr {}
	.intro-fb {
		width: 90%;
		padding: 0 0 0em;
	}
	/*============================
#intro
============================*/
	.intro-fb #intro {
		padding: 2em 0 0 0;
		width: 100%;
	}
	.intro-fb #intro h2 {
		font-size: 140%;
		letter-spacing: 0;
		line-height: 1.8;
	}
	.intro-fb #intro h2 a {}
	.intro-fb #intro .lead {
		width: auto;
		padding: 1em 0 2em;
		font-size: 100%;
		font-feature-settings: "palt";
		line-height: 1.8;
	}
	.intro-fb #intro .btn {
		margin: 0 auto;
		text-align: center;
	}
	.intro-fb #intro .btn a {
		margin: 0 auto;
		font-size: 100%;
	}
	/*============================
#fb
============================*/
	.intro-fb #fb {
		width: 100%;
		margin: 0 auto;
		padding: 3em 0 0;
	}
	.intro-fb #fb h2 {}
	.intro-fb #fb h2 a {}
	.intro-fb #fb .likebox {}
	.intro-fb #fb .likebox .fb-page {
		width: 100%;
	}
	.intro-fb #fb .likebox .fb-page span {
		width: 100% !important;
	}
	.intro-fb #fb .likebox .fb-page .fb-xfbml-parse-ignore {}
	.fb_iframe_widget_fluid span {
		width: 100% !important;
	}
	.fb_iframe_widget iframe {
		width: 100% !important;
	}
	/*============================
#outline
============================*/
	#outline {
		padding: 5em 0 0 0;
	}
	#outline h2 {
		width: auto;
		color: #005e9c;
		font-size: 125%;
		font-weight: bold;
		padding: 4em 0 1em;
		letter-spacing: 0.2em;
		border-width: 2px 0 0 0;
		border-style: solid;
		border-image: linear-gradient(to right, #005e9c, rgba(0, 161, 171, 1)) 1 100%;
		border-image-slice: 1;
		font-size: 140%;
		letter-spacing: 0;
	}
	#outline .list {
		width: 90%;
	}
	#outline .list ul {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20px 4%;
	}
	#outline .list ul li {
		width: 48%;
		float: initial;
		margin: 0;
	}
	#outline .list ul li a {}
	#outline .list ul li a span {}
	#outline .list ul li a .photo {
		width: auto;
		aspect-ratio: 1/1;
		height: initial;
	}
	#outline .list ul li a .name {
		font-size: 90%;
		padding: 1em 0 0;
		letter-spacing: 0;
	}
}
@media screen and (min-width: 769px) {
	.sp {
		display: none;
	}
}