@charset 'UTF-8';

/*

    Base

*/

/*  color  */
:root {
	--gakuen-color: #005bab;
	--gakuen-half-color: #ccdeee;
	--gakuen-quarter-color: #e5eef6;
	--gakuen-light-color: #f2f7fb;
	--asahi-color: #ef8200;
	--asahi-half-color: #f7c07f;
	--asahi-quarter-color: #fdf2e5;
	--asahi-light-color: #fef9f2;
	--yamakita-color: #00a53c;
	--yamakita-half-color: #7fd29d;
	--yamakita-quarter-color: #e5f6eb;
	--yamakita-light-color: #f2faf5;
	--warning-color: #DC143C;
}
body.group {
	--main-color: var(--gakuen-color);
	--half-color: var(--gakuen-half-color);
	--quarter-color: var(--gakuen-quarter-color);
	--light-color: var(--gakuen-light-color);
}
body.gakuen {
	--main-color: var(--gakuen-color);
	--half-color: var(--gakuen-half-color);
	--quarter-color: var(--gakuen-quarter-color);
	--light-color: var(--gakuen-light-color);
}
body.asahi {
	--main-color: var(--asahi-color);
	--half-color: var(--asahi-half-color);
	--quarter-color: var(--asahi-quarter-color);
	--light-color: var(--asahi-light-color);
}
body.yamakita {
	--main-color: var(--yamakita-color);
	--half-color: var(--yamakita-half-color);
	--quarter-color: var(--yamakita-quarter-color);
	--light-color: var(--yamakita-light-color);
}

/*  webkit  */
body {
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
}
img {
	-webkit-touch-callout: none;
}
input[type=password], input[type=text], input[type=email], input[type=number], input[type=date], button, textarea {
	max-width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
}

/*  font  */
html { font-size: 8px;}
@media screen and (min-width: 768px) { html { font-size: 10px;}}
body {
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #333333;
}
a {
	color: var(--main-color);
	transition: all 0.1s linear;
}
a:hover   { opacity: 0.7;}

/*  size color  */
body { font-size: 1.5rem;}
h1 { font-size: 3.1rem;}
h2 { font-size: 2.6rem;}
h3 { font-size: 2.1rem;}

/*  common  */
.global ul,
.global li,
.global p {
	margin: 0;
	list-style: none;
}
.global a {
	text-decoration: none;
	color: inherit;
}

/*  max width  */
body img,
body iframe {
	max-width: 100%;
}

/*  placeholder  */
::placeholder {
	font-size: 1.4rem;
	color: #999999;
}

/*  material icons  */
.material-icons {
	margin-right: 0.25em;
	font-size: 1.25em;
	vertical-align: middle;
}

/*  container  */
div.container {
	margin: 2em 0;
	padding: 0 1em;
}
div.container.full {
	margin: 0;
	padding: 0;
}
@media screen and (min-width: 768px) {
	div.container {
		margin: 0 auto;
		box-sizing: border-box;
	}
	div.container.wide {
		width: 1200px;
	}
	div.container.medium {
		width: 960px;
	}
	div.container.narrow {
		width: 640px;
	}
	div.container.thin {
		width: 480px;
	}
}





/*

    Header

*/

/*  layout  */
body {
	padding-top: 45px;
}
header.global {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}
header.global .sitetop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	border-top: 1px solid;
	border-image: linear-gradient(to right, var(--gakuen-half-color), var(--asahi-half-color), var(--yamakita-half-color)) 1;
	z-index: 9997;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
header.global nav.global {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9998;
}
@media screen and (min-width: 768px) {
	body {
		padding-top: 65px;
	}
}

/*  sitetop  */
header.global .sitetop {
	margin: 0;
	padding: 0;
}
header.global .sitetop a {
	display: block;
	width: fit-content;
}
header.global .sitetop a img {
	display: block;
	height: 29px;
	margin: 8px;
}
header.global .sitetop.group {
	display: flex;
	align-items: center;
	justify-content: center;
}
header.global .sitetop.group a img {
	height: 15px;
	margin: 15px 0 15px 8px;
}
@media screen and (min-width: 768px) {
	header.global .sitetop a img {
		height: 45px;
		margin: 10px;
	}
	header.global .sitetop.group {
		justify-content: flex-start;
	}
	header.global .sitetop.group a img {
		height: 35px;
		margin: 15px;
	}
}

/*  nav.global  */
header.global nav.global ul {
	display: flex;
	height: 45px;
	align-items: center;
}
header.global nav.global ul li {
	display: none;
}
header.global nav.global ul li.menu {
	display: block;
}
@media screen and (min-width: 768px) {
	header.global nav.global ul {
		height: 65px;
	}
	header.global nav.global ul li {
		display: block;
	}
	header.global nav.global ul li a {
		display: block;
		padding: 15px 20px;
		font-size: 1.3rem;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: bold;
	}
}

/*  nav.global > li.menu  */
header.global nav.global ul li.menu {
	padding: 15px 15px 10px;
}
header.global nav.global ul li.menu a,
header.global nav.global ul li.menu a span {
	display: inline-block;
	transition: all 0.3s;
	box-sizing: border-box;
}
header.global nav.global ul li.menu a {
	position: relative;
	width: 30px;
	height: 20px;
	padding: 0;
	cursor: pointer;
}
header.global nav.global ul li.menu a:hover {
	opacity: 1;
}
header.global nav.global ul li.menu a span {
	position: absolute;
	left: 0;
	width: 30px;
	height: 1px;
	background-color: #333333;
	border-radius: 2px;
}
header.global nav.global ul li.menu a span:nth-of-type(1) { top: 0;}
header.global nav.global ul li.menu a span:nth-of-type(2) { top: 10px;}
header.global nav.global ul li.menu a span:nth-of-type(3) { bottom: 0;}
header.global nav.global ul li.menu a.open span:nth-of-type(1) {
	height: 2px;
	-webkit-transform: translateY(9px) rotate(-45deg);
	transform: translateY(9px) rotate(-45deg);
}
header.global nav.global ul li.menu a.open span:nth-of-type(2) {
	opacity: 0;
}
header.global nav.global ul li.menu a.open span:nth-of-type(3) {
	height: 2px;
	-webkit-transform: translateY(-9px) rotate(45deg);
	transform: translateY(-9px) rotate(45deg);
}

/*  nav.full  */
header.global nav.full {
	display: none;
	position: fixed;
	align-items: stretch;
	top: 45px;
	left: 0;
	width: 100%;
	height: calc(100% - 45px);
	padding: 15px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	overflow: auto;
	box-sizing: border-box;
	z-index: 9999;
}
header.global nav.full > ul > li {
	border-left: 1px #666666 dotted;
}
header.global nav.full ul ul {
	margin: 0 0 1em;
	padding: 15px;
}
header.global nav.full ul ul li {
	padding: 0.25em 0;
}
header.global nav.full ul ul li a {
	display: flex;
	align-items: center;
	color: #333333;
}
header.global nav.full ul ul li a:before {
	content: '-';
	margin-right: 0.5em;
}
header.global nav.full ul ul li.menu1 {
	margin-bottom: 0.5em;
}
header.global nav.full ul ul li.menu1 a {
	font-weight: bold;
}
header.global nav.full ul ul li.menu1 a:before {
	content: none;
}
@media screen and (min-width: 768px) {
	header.global nav.full {
		top: 65px;
		height: auto;
	}
	header.global nav.full > ul {
		display: flex;
		gap: 15px;
	}
	header.global nav.full > ul > li {
		width: 100%;
	}
	header.global nav.full > ul > li:first-child {
		border: none;
	}

}

/*  div.heading  */
header.global div.heading {
	margin-bottom: 2em;
	padding: 2em;
	background-color: var(--main-color);
	color: #ffffff;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	box-sizing: border-box;
}
header.global div.heading div.text .title {
	font-size: 3.6rem;
	font-family: 'fot-udkakugoc80-pro', sans-serif;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
header.global div.heading div.text .subtitle {
	font-size: 3.2rem;
	font-family: 'din-condensed', sans-serif;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
header.global div.heading nav.breadcrumbs {
	position: relative;
	display: block;
	width: fit-content;
	margin-top: 0.75em;
	background-color: rgba(255,255,255,0.15);
	border-radius: 999px;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 1.3rem;
}
header.global div.heading nav.breadcrumbs ol {
	display: inline;
	margin: 0;
	padding: 0 2em;
	white-space: nowrap;
	line-height: 2;
}
header.global div.heading nav.breadcrumbs ol li {
	display: inline;
}
header.global div.heading nav.breadcrumbs ol li:before {
	content: '/';
	margin: 0 0.5em 0 0.5em;
}
header.global div.heading nav.breadcrumbs ol li:first-child:before {
	content: none;
}
header.global div.heading:before {
	display: block;
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	width: 100%;
	font-family: 'din-condensed', sans-serif;
	color: transparent;
	font-size: 3.0rem;
	opacity: 0.1;
	white-space: pre;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #ffffff;
	line-height: 1;
	text-align: right;
}
body.gakuen header.global div.heading:before { content: 'KASHIMA EDUCATIONAL GROUP\AKASHIMA GAKUEN HIGH SCHOOL';}
body.asahi header.global div.heading:before { content: 'KASHIMA EDUCATIONAL GROUP\AKASHIMA asahi HIGH SCHOOL';}
body.yamakita header.global div.heading:before { content: 'KASHIMA EDUCATIONAL GROUP\AKASHIMA yamakita HIGH SCHOOL';}
@media screen and (min-width: 768px) {
	header.global div.heading {
		display: flex;
		align-items: flex-start;
		padding: 3em 4em;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
	}
	header.global div.heading div.text .title {
		max-width: 50vw;
		font-size: 6.5rem;
	}
	header.global div.heading div.text .subtitle {
		max-width: 50vw;
		font-size: 5.5rem;
	}
	header.global div.heading nav.breadcrumbs {
		margin-left: 2em;
	}
	header.global div.heading:before {
		bottom: 0.25em;
		font-size: 6.8rem;
	}
}





/*

    Sns

*/

/*  layout  */
aside.sns {
	margin-top: 3em;
	padding: 1em;
	background-color: #f6f6f6;
}
aside.sns ul {
	display: flex;
	justify-content: center;
	margin: 0;
	list-style: none;
}
aside.sns ul li {
	max-width: 32px;
}
aside.sns ul li img {
	display: block;
}





/*

    Banners

*/

/*  layout  */
aside.banners {
	padding: 2em;
	background-color: #f2f2f2;
}
@media screen and (min-width: 768px) {
	aside.banners {
		padding: 3em 4em;
	}
}

/*  list  */
aside.banners ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
}
aside.banners ul li {
	width: 50%;
	margin: 0;
	list-style: none;
}
aside.banners ul li a {
	display: block;
	padding: 0.5em;
}
@media screen and (min-width: 768px) {
	aside.banners ul li {
		width: 20%;
	}
}





/*

    Floating

*/

/*  layout  */
aside.shortcut {
	position: fixed;
	right: 0;
	bottom: 60px;
	width: 40px;
	z-index: 9996;
}
aside.shortcut ul,
aside.shortcut ul li {
	margin: 0;
	list-style: none;
}





/*

    Group

*/

/*  layout  */
aside.group {
	margin: 0;
	position: relative;
	padding: 2em;
	overflow: hidden;
}
aside.group:before {
	content: 'KASHIMA EDUCATION GROUP';
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 0.125em 0.125em 0;
	font-family: 'din-condensed', sans-serif;
	color: #f6f6f6;
	font-size: 10.0rem;
	line-height: 1;
	white-space: nowrap;
	transform-origin: right bottom;
	transform: rotate(-90deg) translateX(100%);
	z-index: -1;
}
@media screen and (min-width: 768px) {
	aside.group {
		display: flex;
		justify-content: space-between;
		padding: 3em 4em;
	}
	aside.group:before {
		transform: none;
		left: 0.125em;
		margin: 0;
		font-size: 17.0rem;
		letter-spacing: -3px;
	}
}

/*  schools  */






/*

    Footer

*/

/*  layout  */
footer.global {
	padding: 2em;
	background-color: #383838;
}
footer.global div.links div.group {
	display: flex;
	align-items: flex-start;
}
@media screen and (min-width: 768px) {
	footer.global {
		padding: 3.5em 4em;
	}
	footer.global div.links {
		display: flex;
		justify-content: space-between;
	}
}

/*  common  */
footer.global img {
	vertical-align: bottom;
}

/*  group  */
footer.global div.links div.group > a {
	display: block;
	flex-shrink: 0;
	margin: 0 auto;
}
footer.global div.links div.group > a > img {
	width: 90px;
	margin: 1em;
}
footer.global div.links div.group ul.sitemap {
	margin: 0.5em 0;
}
footer.global div.links div.group ul.sitemap li ul li a {
	color: #ffffff;
}
footer.global div.links div.group ul.sitemap li ul li a:before {
	content: '- ';
}
footer.global div.links div.group ul.sitemap li ul li.menu1 {
	font-weight: bold;
}
footer.global div.links div.group ul.sitemap li ul li.menu1 a:before {
	content: none;
}
@media screen and (min-width: 768px) {
	footer.global div.links div.group > a > img {
		width: 130px;
	}
	footer.global div.links div.group ul.sitemap {
		display: flex;
		gap: 1em;
	}
}

/*  contact  */
footer.global div.links div.contact a {
	display: block;
	min-width: 18em;
	margin: 1em 0;
	line-height: 3;
	border: 1px #ffffff solid;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	border-radius: 5em;
}
footer.global div.links div.contact a:hover {
	background-color: #ffffff;
	color: #383838;
	opacity: 1;
}

/*  banners  */
footer.global ul.banners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}
footer.global ul.banners li {
	width: 50%;
}
footer.global ul.banners li a {
	display: block;
	padding: 0.5em;
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	footer.global ul.banners {
		margin-left: 0.75em;
		justify-content: flex-start;
	}
	footer.global ul.banners li {
		width: auto;
		margin: 0.5em;
	}
	footer.global ul.banners li a {
		width: 225px;
		padding: 0;
	}
}

/*  copyright  */
footer.global div.copyright {
	color: #ffffff;
}
footer.global div.copyright p {
	margin-top: 2em;
	font-size: 1.3rem;
	font-weight: bold;
}





/*

    Message

*/

/*  layout  */
#message {
	display: flex;
	align-items: center;
	margin: 1em;
	padding: 0.5em 1em;
	color: #ffffff;
	border-radius: 3px;
	animation: failure 10s linear both;
}
#message.success { background-color: #8fc31f;}
#message.failure { background-color: #ea545d;}
#message p {
	margin: 0 0 0 0.75em;
}
@media screen and (min-width: 768px) {
	#message {
		max-width: 1200px;
		margin: 1em auto;
	}
}
@keyframes failure {
	0% { opacity: 1;}
	2% { opacity: 1;}
	5% { opacity: 0.3;}
	12% { opacity: 1;}
	95% { opacity: 1;}
	100% { opacity: 0;}
}





/*

    Common

*/

/*  fonts  */
@font-face {
  font-family: 'Sign Painter';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/SignPainter.woff2') format('woff2');
}

/*  headings  */
#contents h2 {
	position: relative;
	margin: 2em 0 1em;
	padding-bottom: 0.25em;
	border-bottom: 1px var(--main-color) solid;
}
#contents h2:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -1px;
	left: 1.5em;
	width: 15px;
	height: 15px;
	border-right: 1px var(--main-color) solid;
	border-bottom: 1px var(--main-color) solid;
	background-color: #ffffff;
	transform: rotate(45deg);
	transform-origin: left bottom;
}
#contents h3 {
	margin: 1em 0 0.5em;
	color: var(--main-color);
}
#contents div.plain h2 {
	text-align: center;
	border: none;
}
#contents div.plain h2:after {
	content: none;
}
#contents div.plain + div.subtitle p {
	margin: -1.25em 0 0;
	text-align: center;
	color: var(--main-color);
	font-family: 'Sign Painter', serif;
	font-size: 3.0rem;
}
#contents div.lead h2 {
	margin-top: 3em;
	text-align: center;
	border: none;
}
#contents div.lead h2:after {
	content: none;
}
#contents div.lead + div.subtitle p {
	position: relative;
	margin: -1.85em 0 0;
	text-align: center;
	color: var(--quarter-color);
	font-family: 'Sign Painter', serif;
	font-size: 6.0rem;
	z-index: -1;
}
#contents div.lead p.description {
	margin: 2em 0;
	text-align: center;
	line-height: 2;
}
@media screen and (min-width: 768px) {
	#contents h2 {
		margin: 4em 0 2em;
	}
	#contents h3 {
		margin: 2em 0 1em;
	}
	#contents div.plain + div.subtitle p {
		margin: -2em 0 0;
	}
	#contents div.lead h2 {
		margin-top: 5em;
	}
	#contents div.lead + div.subtitle p {
		margin: -1.75em 0 0;
		font-size: 12.0rem;
	}
	#contents div.lead p.description {
		margin: 4em 0;
	}
}

/*  banner  */
span.banner {
	display: block;
	height: 0;
	padding-top: 22.22%;
	background-color: #f2f2f2;
	background-position: center center;
	background-size: cover;
}

/*  help  */
span.help {
	margin: 0 0.25em;
	text-decoration: underline dashed;
	position: relative;
	cursor: pointer;
}
span.help:after {
	content: '\e0c6';
	font-family: 'Material Symbols Rounded';
	color: inherit;
}
span.help small.tooltip {
	display: inline-block;
	position: absolute;
	bottom: 2em;
	left: 50%;
	width: 20em;
	padding: 0.5em;
	transform: translateX(-50%);
	font-size: 1.1rem;
	line-height: 1.3;
	background: rgba(0,0,0,0.8);
	color: #ffffff;
	opacity: 0;
	visibility: hidden;
	border-radius: 5px;
	transition: 0.3s ease-in;
}
span.help:hover small.tooltip {
	opacity: 1;
	visibility: visible;
}
h1 span.help,
h2 span.help,
h3 span.help {
	margin: 0;
	text-decoration: none;
	cursor: auto;
}
h1 span.help:after,
h2 span.help:after,
h3 span.help:after {
	content: none;
}
h1 span.help:hover small.tooltip,
h2 span.help:hover small.tooltip,
h3 span.help:hover small.tooltip {
	opacity: 0;
	visibility: hidden;
}


/*  button  */
button,
a.button,
div.be-item.button a,
div.be-item.buttons a {
	display: inline-block;
	margin: 0.5em 0.25em 0.125em 0;
	padding: 0.5em 3em;
	border: 1px var(--main-color) solid;
	background-color: var(--main-color);
	color: #ffffff;
	font-family: sans-serif;
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.5;
	border-radius: 10em;
	opacity: 1;
	cursor: pointer;
}
button:after,
a.button:after,
div.be-item.button a:after,
div.be-item.buttons a:after {
	content: '';
	display: inline-block;
	width: 1.5em;
	height: 0.5em;
	margin-left: 0.5em;
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
	transform: skewX(45deg);
	vertical-align: 2px;
}
button.back:after,
a.button.back:after,
div.be-item.button.back a:after,
div.be-item.buttons.back a:after {
	content: none;
}
button.back:before,
a.button.back:before,
div.be-item.button.back a:before,
div.be-item.buttons.back a:before {
	content: '';
	display: inline-block;
	width: 1.5em;
	height: 0.5em;
	margin-right: 0.5em;
	border-bottom: 1px #ffffff solid;
	border-left: 1px #ffffff solid;
	transform: skewX(-45deg);
	vertical-align: 2px;
}
button:hover,
a.button:hover,
div.be-item.buttons a:hover,
div.be-item.button a:hover,
button.light,
a.button.light,
div.be-item.buttons.light a,
div.be-item.button.light a {
	background-color: transparent;
	color: var(--main-color);
}
button:hover:after,
a.button:hover:after,
div.be-item.buttons a:hover:after,
div.be-item.button a:hover:after,
button.light:after,
a.button.light:after,
div.be-item.buttons.light a:after,
div.be-item.button.light a:after,
button:hover:before,
a.button:hover:before,
div.be-item.buttons a:hover:before,
div.be-item.button a:hover:before,
button.light:before,
a.button.light:before,
div.be-item.buttons.light a:before,
div.be-item.button.light a:before {
	border-color: var(--main-color);
}
button.light:hover,
a.button.light:hover,
div.be-item.buttons.light a:hover,
div.be-item.button.light a:hover {
	background-color: var(--main-color);
	color: #ffffff;
}
button.light:hover:after,
a.button.light:hover:after,
div.be-item.buttons.light a:hover:after,
div.be-item.button.light a:hover:after,
button.light:hover:before,
a.button.light:hover:before,
div.be-item.buttons.light a:hover:before,
div.be-item.button.light a:hover:before {
	border-color: #ffffff;
}
button.monochrome,
a.button.monochrome,
div.be-item.buttons.monochrome a,
div.be-item.button.monochrome a {
	border-color: #666666;
	color: #333333;
	background-color: #ffffff;
}
button.monochrome:before,
a.button.monochrome:before,
div.be-item.buttons.monochrome a:before,
div.be-item.button.monochrome a:before,
button.monochrome:after,
a.button.monochrome:after,
div.be-item.buttons.monochrome a:after,
div.be-item.button.monochrome a:after {
	border-color: #333333;
}
button.monochrome:hover:before,
a.button.monochrome:hover:before,
div.be-item.buttons.monochrome a:hover:before,
div.be-item.button.monochrome a:hover:before,
button.monochrome:hover:after,
a.button.monochrome:hover:after,
div.be-item.buttons.monochrome a:hover:after,
div.be-item.button.monochrome a:hover:after {
	border-color: #ffffff;
}
button.monochrome:hover,
a.button.monochrome:hover,
div.be-item.buttons.monochrome a:hover,
div.be-item.button.monochrome a:hover {
	color: #ffffff;
	background-color: #666666;
}
button.plain:after,
a.button.plain:after,
div.be-item.button.plain a:after,
div.be-item.buttons.plain a:after {
	content: none;
}
button.xsmall,
a.button.xsmall,
div.be-item.buttons.xsmall a,
div.be-item.button.xsmall a {
	padding: 0 0.5em;
	font-size: 1.1rem;
}
button.small,
a.button.small,
div.be-item.button.small a {
	padding: 0.125em 1.5em;
	font-size: 1.3rem;
}
button.large,
a.button.large,
div.be-item.buttons.large a,
div.be-item.button.large a {
	padding: 0.75em 5em;
	font-size: 1.7rem;
}
button.xlarge,
a.button.xlarge,
div.be-item.buttons.xlarge a,
div.be-item.button.xlarge a {
	display: block;
	padding: 0.75em 5em;
	font-size: 1.9rem;
}
@media screen and (min-width: 768px) {
	button.xlarge,
	a.button.xlarge,
	div.be-item.buttons.xlarge a,
	div.be-item.button.xlarge a {
		display: inline-block;
		padding: 0.75em 15em;
		font-size: larger;
	}
}

/*  nav.buttons  */
nav.buttons {
	margin: 2em 0;
	text-align: center;
}

/*  p  */
#contents p {
	line-height: 1.75;
}

/*  p.notfound  */
#contents p.notfound {
	margin-bottom: 4em;
	text-align: center;
}

/*  .note  */
#contents .note {
	font-size: 1.3rem;
	color: #666666;
}

/*  ul  */
#contents ul li {
	display: flex;
	align-items: center;
	margin: 0.5em 0;
	list-style: none;
	line-height: 1.5;
}
#contents ul li:before {
	content: '';
	display: block;
	width: 5px;
	height: 2px;
	margin-right: 0.5em;
	background-color: var(--main-color);
}

/*  ul.check  */
#contents ul.check li:before {
	width: 0.75em;
	height: 0.35em;
	border-left: 2px #8fc31f solid;
	border-bottom: 2px #8fc31f solid;
	background: none;
	transform: rotate(-45deg);
}

/*  ol  */
#contents ol {
	list-style: none;
	counter-reset: number;
}
#contents ol li {
	display: flex;
	align-items: center;
	margin: 0.5em 0;
	list-style: none;
	line-height: 1.5;
}
#contents ol li:before {
	counter-increment: number;
	content: counter(number);
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.25em;
	border: 1px var(--main-color) solid;
	border-radius: 1.5em;
	color: var(--main-color);
	font-family: 'din-condensed', sans-serif;
	text-align: center;
}

/*  table  */
#contents table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 5px;
}
#contents table th,
#contents table td {
	padding: 0.5em 1em;
	border: none;
	background-color: var(--light-color);
}
#contents table th {
	background-color: var(--main-color);
	color: #ffffff;
}
#contents table.light th {
	background-color: var(--half-color);
	color: var(--main-color);
}

/*  time  */
#contents time {
	font-family: 'Sign Painter', serif;
	color: var(--main-color);
	font-size: 1.8rem;
}

/*  label  */
#contents span.label {
	display: inline-block;
	margin: 0 0.125em;
	padding: 0 0.5em;
	background-color: var(--main-color);
	border: 1px var(--main-color) solid;
	color: #ffffff;
	font-size: 1.1rem;
	border-radius: 3em;
}
#contents span.label.light {
	background-color: #ffffff;
	color: var(--main-color);
}

/*  nav.page  */
#contents nav.page {
	display: flex;
	justify-content: center;
}
#contents nav.page ol {
	display: flex;
	justify-content: center;
	margin: 1em 0;
	border: 1px #cccccc solid;
	border-radius: 3px;
	overflow: hidden;
}
#contents nav.page ol li {
	margin: 0;
	list-style: none;
	border-left: 1px #cccccc solid;
}
#contents nav.page ol li:before {
	content: none;
}
#contents nav.page ol li:first-child {
	border: none;
}
#contents nav.page ol li a {
	display: block;
	padding: 0.5em 1em;
	background-color: #ffffff;
	color: var(--main-color);
}
#contents nav.page ol li span {
	display: block;
	padding: 0.5em 1em;
}
#contents nav.page ol li.current a {
	color: #ffffff;
	background-color: var(--main-color);
}

/*  ul.informations  */
#contents ul.informations {
	border-top: 1px #666666 dotted;
}
#contents ul.informations li:before {
	content: none;
}
#contents ul.informations li {
	list-style: none;
	margin: 0;
	padding: 1em 0;
	border-bottom: 1px #666666 dotted;
}
#contents ul.informations li a {
	display: flex;
	align-items: center;
	color: #333333;
}
#contents ul.informations li a span.labels {
	flex-shrink: 0;
	margin-right: 1em;
}
#contents ul.informations li a span.labels span.label {
	margin: 0;
	border-radius: 3px;
}
#contents ul.informations li a time {
	flex-shrink: 0;
	margin-right: 1em;
}
#contents ul.informations li a span.campus {
	margin-right: 1em;
	color: #666666;
	font-size: 1.3rem;
}

/*  ul.articles  */
#contents ul.articles {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 1em -1em;
}
#contents ul.articles li:before {
	content: none;
}
#contents ul.articles li {
	width: 50%;
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}
#contents ul.articles li a {
	display: block;
	width: 100%;
	color: inherit;
}
#contents ul.articles li a span.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 66.67%;
	margin-bottom: 0.5em;
	background-size: cover;
	background-position: center center;
	border-radius: 15px;
}
#contents ul.articles li a span.meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#contents ul.articles li a span.meta time {
	margin-right: 0.5em;
}
#contents ul.articles li a span.meta span.campus {
	font-size: 1.2rem;
	color: #666666;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
#contents ul.articles li a span.label {
	margin-bottom: 0.5em;
	border-radius: 3px;
}
#contents ul.articles li a span.title {
	display: -webkit-box;
	height: 3em;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
@media screen and (min-width: 768px) {
	#contents ul.articles li {
		width: 25%;
	}
}

/*  ul.campus-voices  */
#contents ul.campus-voices li {
	margin: 1.5em 0;
}
#contents ul.campus-voices li:before {
	content: none;
}
#contents ul.campus-voices li a {
	display: flex;
	align-items: flex-start;
	width: 100%;
	padding: 1.5em;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	color: #666666;
	border-radius: 10px;
}
#contents ul.campus-voices li a span.thumbnail {
	display: block;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	margin-right: 1.5em;
	background-size: cover;
	background-position: center center;
	border-radius: 100%;
}
#contents ul.campus-voices li a strong {
	display: block;
	margin-bottom: 0.25em;
	color: #333333;
}

/*  ul.students  */
@media screen and (min-width: 768px) {
	#contents ul.students {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	#contents ul.students li {
		width: 50%;
		padding: 0 1.5em;
		box-sizing: border-box;
	}
	#contents ul.students li a {
		padding: 2em;
	}
	#contents ul.students li a span.thumbnail {
		width: 80px;
		height: 80px;
	}
}

/*  ul.teachers  */
@media screen and (max-width: 767px) {
	#contents ul.teachers li a {
		display: block;
	}
	#contents ul.teachers li a span.thumbnail {
		width: 120px;
		height: 120px;
		margin: 1em auto 1.5em;
	}
	#contents ul.teachers li a span.text strong {
		font-size: larger;
		text-align: center;
	}
}
@media screen and (min-width: 768px) {
	#contents ul.teachers li {
		margin: 2em 0;
	}
	#contents ul.teachers li a span.thumbnail {
		width: 200px;
		height: 200px;
		margin-right: 2em;
	}
	#contents ul.teachers li a span.text strong {
		font-size: larger;
		margin-top: 0.5em;
	}
}

/*  ul.campus-post-categories  */
#contents ul.campus-post-categories {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2em 0 3em;
}
#contents ul.campus-post-categories li {
	margin: 0;
}
#contents ul.campus-post-categories li:before {
	content: none;
}
#contents ul.campus-post-categories li a.button {
	margin-left: 3px;
	margin-right: 3px;
	border-radius: 3px;
}

/*  ul.pickup  */
#contents ul.pickup {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 1em -1em;
	padding: 0 0.75em;
}
#contents ul.pickup li:before {
	content: none;
}
#contents ul.pickup li {
	width: 50%;
	margin: 0;
	padding: 0.75em;
	box-sizing: border-box;
}
#contents ul.pickup li a {
	display: block;
	width: 100%;
	padding: 1em;
	color: inherit;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
}
#contents ul.pickup li:has(a:hover) {
	box-shadow: none;
}
#contents ul.pickup li a:hover {
	opacity: 1;
	transform: translate(3px, 3px);
}
#contents ul.pickup li a span.thumbnail {
	display: block;
	width: calc(100% + 2em);
	height: 0;
	padding-bottom: 66.67%;
	margin: -1em -1em 0.5em;
	background-size: cover;
	background-position: center center;
}
#contents ul.pickup li a span.meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#contents ul.pickup li a span.meta time {
	margin-right: 0.5em;
}
#contents ul.pickup li a span.meta span.campus {
	font-size: 1.2rem;
	color: #666666;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
#contents ul.pickup li a span.title {
	display: -webkit-box;
	height: 3em;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
body.toppage.gakuen #contents div.container.pickup ul.pickup li a span.thumbnail { background-image: url('../images/exterior-gakuen.jpg');}
body.toppage.asahi #contents div.container.pickup ul.pickup li a span.thumbnail { background-image: url('../images/exterior-asahi.jpg');}
body.toppage.yamakita #contents div.container.pickup ul.pickup li a span.thumbnail { background-image: url('../images/exterior-yamakita.jpg');}
@media screen and (min-width: 768px) {
	#contents ul.pickup li {
		width: 20%;
		padding: 1em;
	}
}

/*  article.post  */
#contents article.post header {
	position: relative;
	margin: 2em 0;
	padding-bottom: 0.75em;
	border-bottom: 1px var(--main-color) solid;
}
#contents article.post header:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -1px;
	left: 1.5em;
	width: 15px;
	height: 15px;
	border-right: 1px var(--main-color) solid;
	border-bottom: 1px var(--main-color) solid;
	background-color: #ffffff;
	transform: rotate(45deg);
	transform-origin: left bottom;
}
#contents article.post header time {
	margin-right: 0.5em;
	font-size: 2.5rem;
}
#contents article.post header a.button {
	border-radius: 3px;
}
#contents article.post p.back {
	margin-top: 3em;
}

/*  article.campus-voice  */
#contents article.campus-voice {
	padding-top: 0.125em;
}
#contents article.campus-voice header {
	display: flex;
	align-items: center;
}
#contents article.campus-voice header span.image {
	width: 120px;
	height: 120px;
	margin-right: 2em;
	margin-bottom: 1em;
	background-position: center center;
	background-size: cover;
	border-radius: 60px;
}
#contents article.campus-voice header div.text {
	font-size: larger;
}
#contents article.campus-voice header div.text strong {
	display: block;
}
#contents article.campus-voice header div.text h1 {
	font-size: 2.1rem;
	margin-bottom: 0.75em;
}
#contents article.campus-voice dl.qa {
	margin: 3em 0 0;
}
#contents article.campus-voice dl.qa dt {
	display: flex;
	align-items: center;
}
#contents article.campus-voice dl.qa dt:before {
	content: 'Q';
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	background-color: var(--main-color);
	color: #ffffff;
	text-align: center;
	line-height: 1.5em;
	border-radius: 1em;
}
#contents article.campus-voice dl.qa dd {
	margin: 0;
	padding: 0.5em 0 2em;
}

/*  ul.suggest  */
#contents ul.suggest {
	display: none;
	position: absolute;
	width: 100%;
	max-width: 360px;
	margin: 0.5em 0;
	background-color: #ffffff;
	border: 1px #333333 solid;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	z-index: 9;
}
#contents ul.suggest:has(.selected) {
	position: static;
	margin: 0.25em 0;
	border-radius: 5em;
}
#contents ul.suggest li:before {
	content: none;
}
#contents ul.suggest li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.5em;
	border-bottom: 1px #cccccc solid;
	cursor: pointer;
}
#contents ul.suggest li.selected {
	border: none;
	line-height: 2.5em;
	padding: 0 1em;
	font-size: 1.7rem;
}
#contents ul.suggest li.type {
	background-color: var(--light-color);
	color: var(--main-color);
	cursor: default;
}
#contents ul.suggest li.zipcode span.name {
	white-space: nowrap;
}
#contents ul.suggest li span.address {
	margin-left: 1em;
	font-size: 1.2rem;
	color: #666666;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*  div.features  */
#contents div.features div.item img {
	width: 100%;
}
#contents div.features div.item div.text span.number {
	float: left;
	margin-right: 3.5rem;
	font-family: 'Sign Painter', sans-serif;
	color: var(--main-color);
	font-size: 10.0rem;
	line-height: 1;
}
#contents div.features div.item div.text {
	padding: 1em 1em 3em;
}
#contents div.features div.item div.text h2 {
	margin: 0;
	padding: 0.5em 0 0;
	border: none;
	line-height: 1.25;
}
#contents div.features div.item div.text h2:after {
	content: none;
}
#contents div.features div.item div.text p.subtitle {
	margin: 0.125em 0 0;
	font-size: 1.8rem;
	font-weight: bold;
}
#contents div.features div.item div.text p.content {
	clear: both;
}
@media screen and (min-width: 768px) {
	#contents div.features div.item {
		display: flex;
		align-items: flex-start;
		margin: 6em 0;
	}
	#contents div.features div.item img {
		width: 47%;
	}
	#contents div.features div.item div.text {
		width: 53%;
		box-sizing: border-box;
	}
	#contents div.features div.item:nth-child(odd) {
		flex-direction: row-reverse;
	}
	#contents div.features div.item:nth-child(odd) img {
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
	}
	#contents div.features div.item:nth-child(even) img {
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
	}
	#contents div.features div.item:nth-child(odd) div.text {
		padding: 0 5em 3em 2em;
	}
	#contents div.features div.item:nth-child(even) div.text {
		padding: 0 2em 3em 5em;
	}
	#contents div.features div.item:nth-child(odd) div.text p.content {
		margin-left: 10em;
	}
	#contents div.features div.item:nth-child(even) div.text p.content {
		margin-right: 10em;
	}
}

/*  div.shortcuts  */
#contents div.shortcuts div.item div.header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 3em 0 1em;
}
#contents div.shortcuts div.item div.header h2 {
	margin: 0;
	padding: 0;
	border: none;
}
#contents div.shortcuts div.item div.header h2:after {
	content: none;
}
#contents div.shortcuts div.item div.header h2 span.subtitle {
	display: block;
	font-family: 'Sign Painter', serif;
	color: var(--main-color);
	font-weight: normal;
}
#contents div.shortcuts div.item div.header a {
	margin-left: 1em;
	font-size: 1.3rem;
	color: #333333;
	border-color: #333333;
}
#contents div.shortcuts div.item div.header a:hover {
	background-color: #333333;
	color: #ffffff;
}
#contents div.shortcuts div.item img {
	display: block;
	border-radius: 20px;
}
#contents div.shortcuts div.item p {
	font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
	#contents div.shortcuts {
		display: flex;
		flex-wrap: wrap;
	}
	#contents div.shortcuts div.item {
		width: 50%;
		box-sizing: border-box;
	}
	#contents div.shortcuts div.item:nth-child(odd) {
		padding-right: 2.75em;
	}
	#contents div.shortcuts div.item:nth-child(even) {
		padding-left: 2.75em;
	}
}

/*  ul.schools  */
ul.schools,
ul.schools li {
	margin: 0;
	list-style: none;
}
ul.schools li {
	width: 100%;
}
ul.schools li:before {
	content: none !important;
}
ul.schools a.school {
	display: block;
	position: relative;
	width: 100%;
	margin-top: 50px;
	padding: 0 1em;
	text-align: right;
}
ul.schools a.school:hover span.image {
	transform: scale(1.1);
}
ul.schools a.school span.image {
	display: block;
	width: 100%;
	padding-top: 66.66%;
	border-radius: 10px;
	background-size: cover;
	background-position: center center;
	transition: all .2s ease-out;
}
ul.schools a.school span.logo {
	display: block;
	position: absolute;
	left: 10%;
	top: -12%;
	width: 80%;
}
ul.schools a.school span.logo img {
	filter: drop-shadow(0px 1px 1px #ffffff);
}
ul.schools a.school span.button {
	display: inline-block;
	position: relative;
	top: -1em;
	margin: 0 1em 0;
	padding: 0.5em 2em;
	background-color: #ffffff;
	border: 2px var(--main-color) solid;
	border-radius: 3em;
	font-weight: bold;
	font-size: 1.3rem;
}
ul.schools a.school.gakuen span.button { color: var(--gakuen-color); border-color: var(--gakuen-color);}
ul.schools a.school.asahi span.button { color: var(--asahi-color); border-color: var(--asahi-color);}
ul.schools a.school.yamakita span.button { color: var(--yamakita-color); border-color: var(--yamakita-color);}
@media screen and (min-width: 768px) {
	ul.schools {
		display: flex;
		gap: 4em;
	}
}

/*  dl.facilities  */
dl.facilities dt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.5em 0 0;
	padding: 0.25em 0.75em 0.25em 0.5em;
	background-color: var(--light-color);
	color: var(--main-color);
	cursor: pointer;
}
dl.facilities dt:after {
	content: '';
	width: 0.5em;
	height: 0.5em;
	border-right: 2px var(--main-color) solid;
	border-bottom: 2px var(--main-color) solid;
	transform: rotate(45deg);
}
dl.facilities dt.open:after {
	transform: rotate(-135deg);
}
dl.facilities dd {
	display: none;
	margin: 0;
	padding: 0.5em;
}
dl.facilities dd ul {
	margin: 0;
}
dl.facilities dd ul li {
	margin: 0;
	padding: 0.25em 0;
	list-style: none;
}

/*  form.campus-search  */
#contents form.campus-search input[type=text] {
	width: 100%;
	line-height: 2.5em;
	padding: 0 1em;
	border: 1px #999999 solid;
	background-color: rgba(255,255,255,0.8);
	border-radius: 5em;
}
#contents form.campus-search button {
	display: flex;
	align-items: center;
	margin: 0 auto;
}
#contents form.campus-search label {
	display: block;
	padding: 0.25em 0;
}
#contents form.campus-search button,
#contents form.campus-search .button {
	display: flex;
	padding-left: 1em;
	padding-right: 2em;
}
#contents form.campus-search button span.icon,
#contents form.campus-search .button span.icon {
	margin-right: 0.25em;
	font-size: 2.4rem;
	width: 1em;
}
#contents form.campus-search button span.text,
#contents form.campus-search .button span.text {
	display: block;
	width: 100%;
	text-align: center;
}
#contents div.campus-search dl {
	margin: 0;
}
#contents div.campus-search dl dt {
	display: flex;
	align-items: center;
	margin-bottom: 0.5em;
}
#contents div.campus-search dl dt span.icon {
	margin-right: 0.25em;
	font-size: 2.4rem;
	color: var(--main-color);
}
#contents div.campus-search dl dd {
	position: relative;
	margin: 0;
	padding: 0.5em 0 1em;
}

/*  ul.tab  */
#contents ul.tab {
	display: flex;
	background-color: #eeeeee;
	border-radius: 3em;
}
#contents ul.tab li:before {
	content: none;
}
#contents ul.tab li {
	display: block;
	width: 25%;
	margin: 0;
}
#contents ul.tab li a {
	display: block;
	padding: 1em 0;
	color: #666666;
	text-align: center;
	line-height: 1;
	border-radius: 3em;
}
#contents ul.tab li.current a {
	background-color: var(--main-color);
	color: #ffffff;
}

/*  ul.options  */
#contents ul.options li {
	display: block;
	margin: 2em 0;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	overflow: hidden;
}
#contents ul.options li:before {
	content: none;
}
#contents ul.options li span.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 66.66%;
	background-size: cover;
	background-position: center center;
	background-color: #cccccc;
}
#contents ul.options li div.item {
	padding: 1.5em;
}
#contents ul.options li div.item strong {
	display: block;
	margin: 0;
	font-size: 2.1rem;
}
#contents ul.options li div.item span.description {
	line-height: 2;
}
#contents ul.options li div.item a.button {
	display: block;
	margin-top: 1em;
	padding-left: 0;
	padding-right: 0;
	border-radius: 3px;
}
@media screen and (min-width: 768px) {
	#contents ul.options li {
		display: flex;
		align-items: flex-start;
		margin: 4em 0;
		border-radius: 30px;
	}
	#contents ul.options li span.thumbnail {
		width: 25%;
		padding-top: 25%;
	}
	#contents ul.options li div.item {
		width: 75%;
		padding: 3em;
		box-sizing: border-box;
	}
	#contents ul.options li div.item span.description {
		display: block;
		margin: 1em 0;
	}
	#contents ul.options li div.item a.button {
		display: inline-block;
		padding-left: 3em;
		padding-right: 3em;
	}
}

/*  ul.magazines  */
#contents ul.magazines li {
	display: block;
	margin: 0;
	padding: 1.5em;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 10px;
}
#contents ul.magazines li:before {
	content: none;
}
#contents ul.magazines li a.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 141.41%;
	background-size: cover;
	background-position: center center;
}
#contents ul.magazines li strong {
	display: block;
	margin: 0.5em 0;
}
#contents ul.magazines li a.button {
	display: block;
	border-radius: 3px;
}
@media screen and (min-width: 768px) {
	#contents ul.magazines {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 3em;
	}
	#contents ul.magazines li {
		width: 30%;
		box-sizing: border-box;
	}
}

/*  ul.oneword  */
#contents ul.oneword li {
	display: block;
	margin: 0;
	padding: 1.5em;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 10px;
}
#contents ul.oneword li:before {
	content: none;
}
#contents ul.oneword li a.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 120%;
	background-size: cover;
	background-position: center center;
}
#contents ul.oneword li strong {
	display: block;
	margin: 0.5em 0;
}
#contents ul.oneword li a.button {
	display: block;
	border-radius: 3px;
}
@media screen and (min-width: 768px) {
	#contents ul.oneword {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 3em;
	}
	#contents ul.oneword li {
		width: 30%;
		box-sizing: border-box;
	}
}





/*

    Block editor

*/

/*  image  */
div.container div.be-item a img {
	display: block;
	margin: 0 auto;
	border-radius: 15px;
}

/*  images  */
div.container div.be-item.images {
	display: flex;
	flex-wrap: wrap;
	margin: 0.75% -0.75%;
}
div.container div.be-item.images a {
	display: block;
	width: 50%;
	padding: 0.75%;
	box-sizing: border-box;
}
div.container div.be-item.images.large a {
	width: 100%;
}
@media screen and (min-width: 768px) {
	div.container div.be-item.images a { width: 25%;}
	div.container div.be-item.images.small a { width: 20%;}
	div.container div.be-item.images.large a { width: 33.33%;}
}

/*  imagetext  */
div.container div.be-item div.imagetext img {
	display: block;
	max-width: 60%;
	margin: 1em auto 2em;
}
div.container div.be-item div.imagetext p {
	margin-top: 0.25em;
}
@media screen and (min-width: 768px) {
	div.container div.be-item div.imagetext {
		overflow: hidden;
	}
	div.container div.be-item div.imagetext p {
		margin-top: 0;
	}
	div.container div.be-item div.imagetext.left img {
		float: left;
		max-width: 50%;
		margin: 0 3em 3em 0;
	}
	div.container div.be-item div.imagetext.right img {
		float: right;
		max-width: 50%;
		margin: 0 0 3em 3em;
	}
}

/*  buttons  */
div.container div.be-item.buttons {
	text-align: center;
}

/*  strong  */
div.container div.be-item.strong {
	margin: 1em 0;
	padding: 1.5em 1.75em;
	background-color: var(--main-color);
	color: #ffffff;
	border-radius: 20px;
}
div.container div.be-item.strong *:first-child { margin-top: 0;}
div.container div.be-item.strong *:last-child { margin-bottom: 0;}

/*  em  */
div.container div.be-item.em {
	margin: 1em 0;
	padding: 1.5em 1.75em;
	background-color: var(--half-color);
	border-radius: 20px;
}
div.container div.be-item.em *:first-child { margin-top: 0;}
div.container div.be-item.em *:last-child { margin-bottom: 0;}

/*  note  */
div.container div.be-item.note {
	margin: 1em 0;
	padding: 1.5em 1.75em;
	background-color: #f2f2f2;
	border-radius: 20px;
}
div.container div.be-item.note *:first-child { margin-top: 0;}
div.container div.be-item.note *:last-child { margin-bottom: 0;}





/*

    Quill

*/

/*  video  */
iframe.ql-video {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}
@media screen and (min-width: 768px) {
	iframe.ql-video {
		display: block;
		width: 70%;
		margin: 0 auto;
	}
}





/*

    Mailform

*/

/*  layout  */
div.mailform form dl {
	border: 1px var(--half-color) solid;
}
div.mailform form dl dt {
	padding: 0.75em;
	background-color: var(--light-color);
}
div.mailform form dl dd {
	margin: 0;
	padding: 0.75em;
	border-top: 1px var(--half-color) solid;
}
@media screen and (min-width: 768px) {
	div.mailform form dl {
		display: flex;
		flex-wrap: wrap;
	}
	div.mailform form dl dt {
		width: 20em;
		box-sizing: border-box;
		border-top: 1px var(--half-color) solid;
	}
	div.mailform form dl dd {
		width: calc(100% - 20em);
		margin: 0;
		box-sizing: border-box;
	}
	div.mailform form dl dt:first-of-type,
	div.mailform form dl dd:first-of-type {
		border: none;
	}
}

/*  label  */
div.mailform form dl dt em {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0 0.5em;
	background-color: var(--main-color);
	color: #ffffff;
	font-size: 1.1rem;
	font-style: normal;
	font-weight: bold;
	border-radius: 3px;
}
div.mailform form dl dt em.optional {
	background-color: #999999;
}

/*  common item  */
div.mailform form dl dd h4 {
	margin-bottom: 0.5em;
}
div.mailform form dl dd label {
	display: inline-block;
	padding: 0.25em 0;
	margin-right: 1em;
	white-space: nowrap;
}
div.mailform form dl dd input[type=text],
div.mailform form dl dd textarea,
div.mailform form dl dd select,
div.mailform form dl dd select option,
div.mailform form dl dd input[type=date],
div.mailform form dl dd input[type=datetime-local],
div.mailform form dl dd input[type=number],
div.mailform form dl dd input[type=email] {
	width: 100%;
	height: 2.5em;
	line-height: 2.5;
	border-radius: 3px;
	background-color: #ffffff;
}
div.mailform form dl dd textarea {
	height: auto;
	padding: 0.5em;
	min-height: 4em;
	line-height: 1.5;
}
div.mailform form dl dd select,
div.mailform form dl dd input[type=date],
div.mailform form dl dd input[type=datetime-local],
div.mailform form dl dd input[type=number] {
	width: auto;
}
div.mailform form dl dd input[name=phone] { width: 18em;}
div.mailform form dl dd input[name=phone_mobile] { width: 18em;}
div.mailform form dl dd input[name=zip1] { width: 5em;}
div.mailform form dl dd input[name=zip2] { width: 8em;}
div.mailform form dl dd input[name=address1] { width: 16em;}
div.mailform form dl dd input[name=age] { width: 5em;}
div.mailform form dl dd input[name$=_other] { width: 16em;}
div.mailform form dl dd textarea[name=message] { height: 8em;}
div.mailform form dl dd textarea[name=question] { height: 8em;}
#contents div.mailform form dl dd div.school-selector span.label,
#contents div.mailform form dl dd div.date-selector span.label {
	padding: 0.25em 1em;
	margin: 0.5em 0.5em 0.5em 0;
	font-size: 1.5rem;
	border-radius: 3px;
	border-color: #cccccc;
	color: #333333;
}
div.mailform form dl dd div.date-selector div.date {
	border: 1px #cccccc solid;
	padding: 1em;
	margin: 0.75em 0 0;
	border-radius: 3px;
}
div.mailform form dl dd div.date-selector div.date.no1 {
	margin-top: 0;
}

/*  error  */
div.mailform form dl dd.error input[type=text],
div.mailform form dl dd.error textarea,
div.mailform form dl dd.error select,
div.mailform form dl dd.error select option,
div.mailform form dl dd.error input[type=date],
div.mailform form dl dd.error input[type=datetime-local],
div.mailform form dl dd.error input[type=number],
div.mailform form dl dd.error input[type=email],
div.mailform form dl dd.error > div:has(input[type=checkbox]),
div.mailform form dl dd.error > div:has(input[type=radio]) {
	border: 1px var(--warning-color) solid;
}
div.mailform form dl dd.error > div:has(input[type=checkbox]),
div.mailform form dl dd.error > div:has(input[type=radio]) {
	padding: 0.25em 0.5em;
	border-radius: 3px;
}
div.mailform dd.error p.message {
	margin: 0.25em 0;
	color: var(--warning-color);
	font-size: smaller;
}
div.mailform dd.error div.date-selector div.date input,
div.mailform dd.error div.date-selector div.date select {
	border-color: #cccccc;
}
div.mailform dd.error div.date-selector div.date:has(.error) {
	border: 1px var(--warning-color) solid;
}

/*  address  */
div.mailform dd.address input.zip1 {
	width: 5em;
}
div.mailform dd.address input.zip2 {
	width: 8em;
}
div.mailform dd.address input.pref {
	width: 8em;
}





/*

    Voices

*/

/*  layout  */
#contents div.voices {
	position: relative;
	margin: 2em 0;
}

/*  list  */
#contents div.voices ul {
	white-space: nowrap;
	font-size: 0;
	text-align: center;
	overflow: hidden;
}
#contents div.voices ul li {
	display: inline-block;
	padding: 0 0.5em;
	font-size: 1.8rem;
	box-sizing: border-box;
}
#contents div.voices ul li:before {
	content: none;
}
#contents div.voices ul li span.baloon {
	display: none;
}
#contents div.voices ul li a {
}
#contents div.voices ul li img {
	height: 40vh;
}

/*  navigation  */
#contents div.voices nav a {
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	margin-top: calc(20vh - 20px);
	background-color: rgba(255,255,255,0.8);
	border-radius: 20px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
#contents div.voices nav a.prev { left: 1em;}
#contents div.voices nav a.next { right: 1em;}
#contents div.voices nav a:after {
	content: '';
	display: block;
	position: absolute;
	top: 16px;
	left: 16px;
	width: 8px;
	height: 8px;
	border-top: 2px var(--main-color) solid;
	border-right: 2px var(--main-color) solid;
	transform: rotate(-135deg);
}
#contents div.voices nav a.next:after {
	left: 14px;
	transform: rotate(45deg);
}





/*

    Voice

*/

/*  layout  */
#contents article.voice div.text {
	padding: 2em 2em 0;
	background-color: #ffffff;
	border-radius: 30px;
	box-sizing: border-box;
	filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.15));
}
#contents article.voice div.text:after {
	content: '';
	display: block;
	position: relative;
	left: 1em;
	bottom: -9px;
	width: 18px;
	height: 18px;
	background-color: #ffffff;
	transform: scaleX(0.8) rotate(45deg);
}
#contents article.voice p.back {
	margin-top: 3em;
	text-align: center;
}
@media screen and (min-width: 768px) {
	#contents article.voice {
		display: flex;
		align-items: flex-start;
		flex-direction: row-reverse;
		flex-wrap: wrap;
	}
	#contents article.voice div.text {
		width: 60%;
		margin-top: 5%;
	}
	#contents article.voice div.image {
		width: 40%;
	}
	#contents article.voice nav.article,
	#contents article.voice p.back {
		width: 100%;
	}
	#contents article.voice div.text:after {
		width: 32px;
		height: 32px;
		left: calc(-2em - 16px);
		bottom: 3em;
		background-color: #ffffff;
		transform: scaleY(0.6) rotate(45deg);
	}
}

/*  text  */
#contents article.voice div.text p.name strong {
	margin-right: 0.25em;
	font-size: 2.1rem;
	color: var(--main-color);
}

/*  image  */
#contents article.voice div.image img {
	display: block;
	height: 50vh;
	margin: 3em auto 2em;
}
@media screen and (min-width: 768px) {
	#contents article.voice div.image img {
		height: 80vh;
	}
}

/*  navigation  */
#contents article.voice nav.article ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
#contents article.voice nav.article ul li:before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-right: 1.0em;
	background-color: #666666;
}
#contents article.voice nav.article ul li:first-child {
	margin-right: 1.0em;
}
#contents article.voice nav.article ul li:first-child:before {
	content: none;
}
#contents article.voice nav.article ul li a {
	color: #cccccc;
}
#contents article.voice nav.article ul li a[href] {
	color: #666666;
}
#contents article.voice nav.article ul li:first-child a:before,
#contents article.voice nav.article ul li:last-child a:after {
	content: '';
	display: inline-block;
	width: 1.5em;
	height: 0.5em;
	margin-left: 0.5em;
	background: none;
	border-bottom: 1px #cccccc solid;
	border-left: 1px #cccccc solid;
	transform: skewX(-45deg);
	vertical-align: 2px;
}
#contents article.voice nav.article ul li:last-child a:after {
	border-left: none;
	border-bottom: 1px #cccccc solid;
	border-right: 1px #cccccc solid;
	transform: skewX(45deg);
}
#contents article.voice nav.article ul li:first-child a[href]:before,
#contents article.voice nav.article ul li:last-child a[href]:after {
	border-color: #666666;
}





/*

    Campus list

*/

/*  layout  */
#contents div.campus-list {
	padding: 0 1em;
}
#contents div.campus-list div.conditions form {
	display: none;
	margin-bottom: 2em;
	padding: 0.5em 1em;
	background-color: #eeeeee;
	border-radius: 10px;
}
#contents div.campus-list div.conditions form button {
	display: none;
}
#contents div.campus-list div.conditions div.search-open {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: 1em auto 2em;
	padding: 0.75em 3em;
	background-color: #eeeeee;
	text-align: center;
	border-radius: 5px;
}
#contents div.campus-list div.conditions div.search-open span {
	margin-left: 0.25em;
	color: #666666;
}
@media screen and (min-width: 768px) {
	#contents div.campus-list {
		display: flex;
		justify-content: space-between;
		padding: 1em 3em;
	}
	#contents div.campus-list div.conditions {
		width: 20%;
	}
	#contents div.campus-list div.list {
		width: 80%;
		padding-left: 3em;
		box-sizing: border-box;
	}
	#contents div.campus-list div.conditions div.search-open {
		display: none;
	}
	#contents div.campus-list div.conditions form {
		display: block;
		padding: 0;
		background-color: transparent;
	}
}

/*  search  */
#contents div.campus-list div.conditions form dl dt {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1em;
	color: var(--main-color);
	font-size: larger;
}
#contents div.campus-list div.conditions form dl {
	margin-bottom: 2em;
}
#contents div.campus-list div.conditions form dl dd {
	margin-right: 1em;
}
@media screen and (min-width: 768px) {
	#contents div.campus-list div.conditions form dl {
		margin-bottom: 3em;
		padding: 1.5em;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}
	#contents div.campus-list div.conditions form dl dd {
		margin: 1.5em 0 0;
		padding-top: 1em;
		border-top: 1px #eeeeee solid;
	}
	#contents div.campus-list div.conditions form dl dd:first-of-type {
		margin: 0;
		padding: 0;
		border: none;
	}
}

/*  tab  */
#contents div.campus-list ul.tab {
	width: 100%;
}
#contents div.campus-list ul.tab li {
	width: 50%;
}
@media screen and (min-width: 768px) {
	#contents div.campus-list ul.tab {
		width: 50%;
	}
}

/*  list  */
#contents ul.campuses {
	margin: 3em 0;
}
#contents ul.campuses li {
	display: none;
}
#contents ul.campuses li.visible {
	display: block;
}
#contents ul.campuses li.notfound {
	display: block;
	padding: 2em;
	text-align: center;
}
#contents ul.campuses li:before {
	content: none;
}
#contents ul.campuses > li {
	margin: 3em 0;
	background-color: #ffffff;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	overflow: hidden;
}
#contents ul.campuses > li a.image {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 66.66%;
	background-color: #eeeeee;
	background-size: cover;
	background-position: center center;
}
#contents ul.campuses li div.information {
	padding: 1em 1.5em;
}
#contents ul.campuses li div.information a {
	display: block;
	color: inherit;
}
#contents ul.campuses li div.information a span.message {
	display: block;
	font-weight: bold;
	color: var(--main-color);
}
#contents ul.campuses li div.information a strong {
	display: block;
	font-size: 2.1rem;
}
#contents ul.campuses li div.information a span.location {
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	color: #666666;
}
#contents ul.campuses li div.information a span.location.address {
	margin-top: 1em;
}
#contents ul.campuses li div.information a span.location span.icon {
	margin-right: 0.25em;
	font-size: 1.8rem;
	color: var(--main-color);
}
#contents ul.campuses li div.information a span.tags {
	display: block;
}
#contents ul.campuses li div.information a span.tags.styles {
	margin-top: 1em;
}
#contents ul.campuses li div.information a span.tags span.label {
	margin: 0 0.5em 0.5em 0;
	border-color: #999999;
	border-radius: 3px;
	color: #666666;
	font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
	#contents ul.campuses li.visible {
		display: flex;
		align-items: stretch;
	}
	#contents ul.campuses li a.image {
		width: 35%;
		height: auto;
		padding: 0;
	}
}





/*

    Campus search

*/

/*  layout  */
#contents div.campus-search {
	margin: 3em 0;
	padding: 2em;
	background-color: #ffffff;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 30px;
}
#contents div.campus-search form dl {
	margin-bottom: 2em;
}
#contents div.campus-search form dl dd {
	margin: 0;
	padding: 0;
	border: none;
}
@media screen and (min-width: 768px) {
	#contents div.campus-search {
		display: flex;
		flex-wrap: wrap;
		margin: 5em 0;
		padding: 3em;
	}
	#contents div.campus-search h2 {
		width: 60%;
	}
	#contents div.campus-search > p {
		width: 40%;
	}
	#contents div.campus-search form {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
		margin: 3em 0 0;
	}
	#contents div.campus-search form dl {
		width: 25%;
		padding-right: 2em;
		box-sizing: border-box;
	}
	#contents div.campus-search form dl:nth-of-type(1) { width: 25%;}
	#contents div.campus-search form dl:nth-of-type(2) { width: 16%;}
	#contents div.campus-search form dl:nth-of-type(3) { width: 26%;}
	#contents div.campus-search form dl:nth-of-type(4) { width: 23%;}
	#contents div.campus-search form div.submit {
		display: block;
		width: 100%;
		margin-top: 2em;
		text-align: center;
	}
	#contents div.campus-search form div.submit button {
		width: 20em;
		text-align: center;
	}
}

/*  heading  */
#contents div.campus-search h2 {
	margin: 0;
	padding: 0;
	border: none;
}
#contents div.campus-search h2 span.subtitle {
	display: block;
	margin: -0.1em 0 -0.2em;
	font-family: 'Sign Painter', serif;
	font-weight: normal;
	color: var(--main-color);
	font-size: 6.0rem;
	line-height: 1;
}
#contents div.campus-search h2:after {
	content: none;
}
@media screen and (min-width: 768px) {
	#contents div.campus-search h2 span.subtitle {
		margin-bottom: -0.15em;
		font-size: 9.0rem;
	}
}

/*  form  */
#contents div.campus-search form dl:first-of-type {
	padding: 2.5em 0;
	background-image: url('../images/japan-map.png');
	background-size: contain;
	background-position: right bottom;
}
@media screen and (min-width: 768px) {
	#contents div.campus-search form dl:first-of-type {
		padding: 0 0 5em;
	}
}

/*  search map  */
div.map.areas {
	position: relative;
	width: 300px;
	height: 300px;
	background-image: url('../images/japan-map.png');
	background-size: cover;
}
div.map.areas a {
	position: absolute;
	display: none;
}
div.map.areas a:nth-child(1) { display: inline-block; left: 0%; top: 0%;}
div.map.areas a:nth-child(2) { display: inline-block; right: 10%; bottom: 25%;}
div.map.areas a:nth-child(3) { display: inline-block; right: 5%; top: 8%;}
div.map.areas a:nth-child(4) { display: inline-block; right: 15%; top: 35%;}
div.map.areas a:nth-child(5) { display: inline-block; right: 32%; bottom: 18%;}
div.map.areas a:nth-child(6) { display: inline-block; right: 35%; top: 50%;}
div.map.areas a:nth-child(7) { display: inline-block; right: 35%; top: 60%;}
div.map.areas a:nth-child(8) { display: inline-block; left: 20%; top: 68%;}
div.map.areas a:nth-child(9) { display: inline-block; left: 5%; top: 60%;}
div.map.areas a:nth-child(10) { display: inline-block; left: 15%; bottom: 13%;}
div.map.areas a:nth-child(11) { display: inline-block; left: 5%; bottom: 5%;}
div.map.areas a:nth-child(12) { display: inline-block; right: 10%; bottom: 0%;}
div.map.areas a:nth-child(13) { display: inline-block; left: 0%; top: 10%;}
div.map.areas a:nth-child(14) { display: inline-block; left: 0%; top: 17%;}
@media screen and (min-width: 768px) {
	div.map.areas {
		width: 480px;
		height: 480px;
	}
}

/*  map  */
#contents div.campus-list ul.tab li a {
	cursor: pointer;
}
#contents div.campus-list div.map {
	height: 360px;
	padding: 6em 0;
	background-color: #eeeeee;
	text-align: center;
	border-radius: 20px;
}





/*

    Campus detail

*/

/*  header  */
#contents article.campus header {
	text-align: center;
}
#contents article.campus header p.message {
	margin: 0;
	font-size: 1.6rem;
	color: var(--main-color);
	font-weight: bold;
}
#contents article.campus header p.contact span.item {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 2;
}
#contents article.campus header p.contact span.item a {
	margin: 0 0 0 0.5em;
}
#contents article.campus header p.contact span.item span.icon {
	color: var(--main-color);
	margin-right: 0.25em;
	font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
	#contents article.campus header p.contact {
		display: flex;
		justify-content: center;
		gap: 2em;
		margin-top: 2em;
	}
}

/*  images  */
#contents article.campus div.images {
	padding-bottom: 1em;
}
#contents article.campus div.images span.image {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 66.66%;
	background-position: center center;
	background-size: cover;
	border-radius: 10px;
}
#contents article.campus div.images ul li:before {
	content: none;
}
#contents article.campus div.images div.sns {
	margin: 3em 0;
	text-align: center;
}
#contents article.campus div.images div.sns h3 {
	color: #666666;
	font-size: medium;
}
#contents article.campus div.images div.sns p img {
	width: 32px;
	margin: 0 0.5em;
}
#contents article.campus div.images ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2em -1em 1em;
}
#contents article.campus div.images ul li {
	display: block;
	width: 50%;
	padding: 0.25em 1em;
	box-sizing: border-box;
	text-align: center;
}
#contents article.campus div.images ul li span.image {
	margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
	#contents article.campus div.images {
		padding-bottom: 3em;
	}
	#contents article.campus div.images span.image {
		padding-top: 30%;
		border-radius: 30px;
	}
	#contents article.campus div.images ul {
		margin: 0 -2em;
	}
	#contents article.campus div.images ul li {
		width: 33.33%;
		padding: 1em 2em;
	}
	#contents article.campus div.images ul li span.image {
		padding-top: 66.66%;
	}
}

/*  courses  */
#contents article.campus section.courses {
	position: relative;
	padding: 0.125em 0 5em;
	background-color: var(--light-color);
	z-index: 0;
}
#contents article.campus section.courses ul {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}
#contents article.campus section.courses ul li {
	justify-content: center;
	min-width: 5em;
	margin: 0.5em;
	padding: 1em 2em;
	background-color: #ffffff;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}
#contents article.campus section.courses ul li:before {
	content: none;
}

/*  contact  */
#contents section.contact {
	position: relative;
	margin: 3em 0 -3em;
	padding: 0.125em 0 1em;
	background-color: var(--light-color);
	z-index: 0;
}
#contents section.contact div.item {
	padding: 1.5em 2em;
	margin-bottom: 2em;
	background-color: #ffffff;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
}
#contents section.contact div.item h3 {
	margin: 0;
	color: #333333;
}
#contents section.contact div.item.access iframe {
	width: 100%;
	height: 240px;
}
#contents section.contact div.item.access a.button {
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
}
#contents section.contact div.item.basic ul {
	margin: 0;
}
#contents section.contact div.item.basic ul li {
	align-items: flex-start;
	margin: 1em 0 0;
}
#contents section.contact div.item.basic ul li:before {
	content: none;
}
#contents section.contact div.item.basic ul li span.icon {
	margin-right: 0.5em;
	color: var(--main-color);
	font-size: 2.1rem;
}
#contents section.contact div.forms a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 1em;
	font-size: 2.4rem;
	border-radius: 10px;
	box-sizing: border-box;
}
#contents section.contact div.forms a.button span.icon {
	margin-right: 0.5em;
	font-size: 3.2rem;
}
@media screen and (min-width: 768px) {
	#contents section.contact div.container {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	#contents section.contact div.container div.access {
		width: calc(50% - 1.5em);
		box-sizing: border-box;
	}
	#contents section.contact div.container div.contact {
		width: calc(50% - 1.5em);
		box-sizing: border-box;
	}
}





/*

    School Main visual

*/

/*  layout  */
#contents div.school-mv {
	position: relative;
	background-color: var(--main-color);
	background-size: cover;
	background-position: center top;
	overflow: hidden;
}
body.gakuen #contents div.school-mv { background-image: url('../images/gakuen/mv.jpg');}
body.asahi #contents div.school-mv { background-image: url('../images/asahi/mv.jpg');}

/*  slider  */
#contents div.school-mv div.slider {
	position: relative;
	padding: 12vh 0 3vh;
	overflow: hidden;
	z-index: 1;
}
#contents div.school-mv div.slider ul {
	white-space: nowrap;
	font-size: 0;
}
#contents div.school-mv div.slider ul li:before {
	content: none;
}
#contents div.school-mv div.slider ul li {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	font-size: 1.5rem;
}
#contents div.school-mv div.slider ul li a {
	position: relative;
	display: flex;
	align-items: center;
	height: 60vh;
}
#contents div.school-mv div.slider ul li a:hover {
	opacity: 1;
}
#contents div.school-mv div.slider ul li a img {
	height: 30vh;
}
#contents div.school-mv div.slider ul li a img.other {
	display: none;
	position: absolute;
	left: 50%;
	max-width: none;
	transform: translate(-50%, 0);
	z-index: 8;
}
@media screen and (min-width: 768px) {
	#contents div.school-mv div.slider ul li a {
		height: 80vh;
	}
	#contents div.school-mv div.slider ul li a img {
		height: 40vh;
	}
}

/*  slider balloon  */
#contents div.school-mv div.slider p.balloon {
	display: none;
	position: absolute;
	top: 30px;
	right: 30px;
	width: fit-content;
	margin: 0;
	padding: 0.5em;
	background-color: #ffffff;
	font-family: 'Noto Sans JP';
	font-weight: bold;
	line-height: 1.25;
	border-radius: 5px;
	letter-spacing: 0.125em;
}
#contents div.school-mv div.slider p.balloon:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -15px;
	width: 30px;
	height: 30px;
	background-color: #ffffff;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	border-radius: 5px;
	z-index: -1;
}
#contents div.school-mv div.slider p.balloon.center {
	top: calc(12vh + 1em);
}
#contents div.school-mv div.slider p.balloon.main {
	top: calc(12vh - 2em);
}
#contents div.school-mv div.slider p.balloon.sub {
	top: calc(12vh + 4em);
}

/*  group  */
#contents div.school-mv p.group {
	position: absolute;
	bottom: 0.5rem;
	left: 1rem;
	margin: 0;
	font-family: 'din-condensed', sans-serif;
	color: transparent;
	font-size: 11.0rem;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #ffffff;
	line-height: 1;
	text-align: left;
	opacity: 0.1;
	letter-spacing: -0.25rem;
}
@media screen and (min-width: 768px) {
	#contents div.school-mv p.group {
		top: 0.75em;
		font-size: 14.0rem;
		white-space: nowrap;
	}
}

/*  catch  */
#contents div.school-mv p.catch {
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 100%;
	margin: 0;
	color: #ffffff;
	font-family: 'fot-udkakugoc80-pro', sans-serif;
	font-size: 3.4rem;
	text-align: center;
	line-height: 1.25;
	letter-spacing: 0.05em;
}
#contents div.school-mv p.catch strong {
	font-size: 4.4rem;
}
#contents div.school-mv p.catch span.sub {
	font-size: 3.2rem;
}
@media screen and (min-width: 768px) {
	#contents div.school-mv p.catch {
		top: 0.75em;
		left: 1em;
		text-align: left;
		font-size: 4.8rem;
		line-height: 1.15;
	}
	#contents div.school-mv p.catch strong {
		font-size: 7.2rem;
	}
	#contents div.school-mv p.catch span.sub {
		font-size: 3.6rem;
	}
}





/*

    School top

*/

/*  message  */
body.toppage #contents div.container.message {
	position: relative;
	margin-top: -2em;
}
body.toppage #contents div.container.message ul {
	display: flex;
	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	padding: 0.75em;
	background-color: color-mix(in sRGB, var(--main-color) 90%, black);
	list-style: none;
	border-radius: 5em;
}
body.toppage #contents div.container.message ul li {
	margin: 0;
	padding: 0;
}
body.toppage #contents div.container.message ul li:before {
	content: none;
}
body.toppage #contents div.container.message ul li a {
	display: block;
	padding: 0 0.75em;
	color: #ffffff;
	border-left: 1px #ffffff solid;
	text-align: center;
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
}
body.toppage #contents div.container.message ul li:first-child a {
	border: none;
}
@media screen and (min-width: 768px) {
	body.toppage #contents div.container.message ul li a {
		padding: 0.25em 5em;
		font-size: 1.8rem;
	}
}

/*  pickup  */
body.toppage #contents div.container.pickup {
	position: relative;
	margin-top: 2em;
}
body.toppage #contents div.container.pickup ul.pickup {
	justify-content: center;
}
@media screen and (min-width: 768px) {
	body.toppage #contents div.container.pickup ul.pickup li:nth-child(6) {
		display: none;
	}
}

/*  news  */
body.toppage #contents div.container.news h3 {
	color: #333333;
}
@media screen and (min-width: 768px) {
	body.toppage #contents div.container.news div.information {
		display: flex;
	}
	body.toppage #contents div.container.news div.information h3 {
		margin-top: 0;
	}
	body.toppage #contents div.container.news div.information div.school {
		width: 50%;
		padding-right: 3em;
		box-sizing: border-box;
		border-right: 1px #cccccc solid;
	}
	body.toppage #contents div.container.news div.information div.campus {
		width: 50%;
		padding-left: 3em;
		box-sizing: border-box;
	}
}

/*  blog  */
@media screen and (min-width: 768px) {
	body.toppage #contents ul.articles li {
		width: 20%;
	}
}




/*

    Group top

*/

/*  common  */
#group-top h2 {
	position: relative;
	margin: 4em 0 0;
	padding: 0;
	border: none;
	line-height: 1;
}
#group-top h2:after {
	content: none;
}
#group-top h2 span {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	margin-bottom: -0.2em;
	font-family: 'Din Condensed', sans-serif;
	font-size: 10.0rem;
	color: #f2f2f2;
	line-height: 1;
	white-space: nowrap;
	z-index: -1;
}
@media screen and (min-width: 768px) {
	#group-top h2 span {
		font-size: 15.5rem;
	}
}

/*  main visual  */
#group-top {
	padding-top: 0;
}
#group-top div.group-mv {
	position: relative;
	width: 100%;
	height: 0;
	margin: 0 0 3em;
	padding-bottom: 100%;
	background-color: var(--half-color);
	overflow: hidden;
}
div.group-mv video {
	width: 200%;
	margin-left: -50%;
}
div.group-mv img {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	max-width: none;
	height: 100%;
}
#group-top div.group-mv p {
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	margin: 0;
	color: #ffffff;
	font-size: 5.0rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	text-align: right;
	letter-spacing: 0.05em;
	line-height: 1.5;
}
#group-top div.group-mv p span {
	display: block;
}
#group-top div.group-mv p span:last-of-type {
	margin-top: 0.5em;
	font-size: 2.325rem;
}
#group-top div.group-mv p a {
	display: none;
}
@media screen and (min-width: 768px) {
	#group-top div.group-mv {
		margin-bottom: 4em;
		padding-bottom: 53.57%;
	}
	div.group-mv video {
		width: 100%;
		margin: 0;
	}
	div.group-mv img {
		width: 100%;
		height: auto;
	}
	#group-top div.group-mv p {
		text-align: left;
	}
}
@media screen and (min-width: 768px) {
	#group-top div.group-mv p {
		top: 1.5em;
		font-size: 4.5rem;
	}
	#group-top div.group-mv p span:last-of-type {
		margin-top: 0.75em;
		padding-left: 0.175em;
		font-size: 2.0rem;
	}
}
@media screen and (min-width: 960px) {
	#group-top div.group-mv p {
		top: 1.0em;
		font-size: 6.0rem;
	}
	#group-top div.group-mv p span:last-of-type {
		padding-left: 0.175em;
		font-size: 2.8rem;
	}
}
@media screen and (min-width: 1080px) {
	#group-top div.group-mv p a {
		display: block;
		position: relative;
		top: 3em;
		left: 50%;
		width: 8em;
		height: 8em;
		margin-left: -4em;
		border: 1px #ffffff solid;
		line-height: 7em;
		text-align: center;
		font-size: 1.5rem;
		color: #ffffff;
		border-radius: 8em;
	}
	#group-top div.group-mv p a:after {
		content: '';
		display: block;
		position: relative;
		left: 50%;
		top: -2.5em;
		width: 1em;
		height: 1em;
		margin-left: -0.5em;
		border-bottom: 2px #ffffff solid;
		border-right: 2px #ffffff solid;
		transform: rotate(45deg);
	}
	#group-top div.group-mv p a:hover {
		opacity: 1;
	}
}
@media screen and (min-width: 1360px) {
	#group-top div.group-mv p {
		top: 1.0em;
		font-size: 8.0rem;
	}
	#group-top div.group-mv p span:last-of-type {
		padding-left: 0.175em;
		font-size: 3.5rem;
	}
}

/*  group summary  */
div.group-summary div.about {
	margin-bottom: 5em;
	padding: 0 1em;
}
div.group-summary div.about p strong {
	display: block;
	margin-bottom: 0.5em;
	font-size: larger;
}
@media screen and (min-width: 768px) {
	div.group-summary div.about {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
	}
	div.group-summary div.about h2 {
		flex-shrink: 0;
	}
	div.group-summary div.about p {
		width: 45%;
	}
}

/*  group informations  */
#contents div.group-informations h2 {
	margin-right: 1.5rem;
	margin-bottom: 0.5em;
	text-align: right;
}
#contents div.group-informations div.informations {
	margin-left: 1.5em;
	background-color: #F9F9F9;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}
#contents div.group-informations div.informations div.school {
	padding: 2em 2em 1em;
}
#contents div.group-informations div.informations div.school:nth-child(even) {
	background-color: #f2f2f2;
}
#contents div.group-informations div.informations div.school h3 {
	margin: 0;
	color: #333333;
}
#contents div.group-informations div.informations div.school h3 span {
	display: block;
	font-family: 'Din Condensed', serif;
	font-size: 3.0rem;
}
#contents div.group-informations div.informations div.school h3 a.button {
	color: #333333;
	border-color: #333333;
}
#contents div.group-informations div.informations div.school h3 a.button:hover {
	background-color: #333333;
	color: #ffffff;
}
#contents div.group-informations div.informations div.school h3 a.button:after {
	border-color: #333333;
}
#contents div.group-informations div.informations div.school h3 a.button:hover:after {
	border-color: #ffffff;
}
#contents div.group-informations div.informations div.school.gakuen h3 span { color: var(--gakuen-color);}
#contents div.group-informations div.informations div.school.asahi h3 span { color: var(--asahi-color);}
#contents div.group-informations div.informations div.school.yamakita h3 span { color: var(--yamakita-color);}
#contents div.group-informations div.informations div.school.gakuen ul li a time { color: var(--gakuen-color);}
#contents div.group-informations div.informations div.school.asahi ul li a time { color: var(--asahi-color);}
#contents div.group-informations div.informations div.school.yamakita ul li a time { color: var(--yamakita-color);}
#contents div.group-informations div.informations div.school.gakuen ul li a span.label { background-color: var(--gakuen-color);}
#contents div.group-informations div.informations div.school.asahi ul li a span.label { background-color: var(--asahi-color);}
#contents div.group-informations div.informations div.school.yamakita ul li a span.label { background-color: var(--yamakita-color);}
#contents div.group-informations div.informations div.school ul li:before {
	content: none;
}
#contents div.group-informations div.informations div.school ul {
	margin: 2em 0 0;
}
#contents div.group-informations div.informations div.school ul li {
	margin: 0 0 1em;
}
#contents div.group-informations div.informations div.school ul li a {
	display: flex;
	color: #333333;
}
#contents div.group-informations div.informations div.school ul li time {
	flex-shrink: 0;
	font-family: 'Din Condensed', sans-serif;
	margin-bottom: -0.5em;
}
#contents div.group-informations div.informations div.school ul li a span.labels {
	flex-shrink: 0;
	margin: 0 1em;
}
@media screen and (min-width: 768px) {
	#contents div.group-informations h2 {
		margin-top: 6em;
	}
	#contents div.group-informations div.informations {
		margin-left: 6em;
	}
	#contents div.group-informations div.informations div.school {
		display: flex;
		gap: 3em;
		justify-content: space-between;
		padding: 3.5em;
	}
	#contents div.group-informations div.informations div.school ul {
		margin: 0;
	}
	#contents div.group-informations div.informations div.school h3 {
		position: relative;
		flex-shrink: 0;
		padding-bottom: 2em;
	}
	#contents div.group-informations div.informations div.school h3 span {
		font-size: 4.0rem;
	}
	#contents div.group-informations div.informations div.school h3 a {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#contents div.group-informations div.sns {
		width: fit-content;
		text-align: center;
		padding: 0 2em;
	}
	#contents div.group-informations div.sns ul {
		justify-content: center;
		gap: 1em;
	}
	#contents div.group-informations div.sns ul li {
		margin: 0;
	}
	#contents div.group-informations div.sns ul li a img {
		max-width: 45px;
	}
}