/* CSS Document */
@import url("reset.css");
@import url("common_en.css");


/* WP
---------------------------------------------------------- */
.wp-block-columns{ margin: 20px 0;}

.wp-block-column > h3:first-child{ margin-top: 0;}
.wp-block-column > p:first-child{ margin-top: 0;}

.wp-block-image img{ border-radius: 10px;}

.wp-block-table{ max-width: 100vw;}
.wp-block-table thead{ border-bottom: 1px solid #adadad;}

@media screen and (max-width: 768px) {
	.wp-block-column{ padding: 10px 0;}
	.info_list dl{ flex-wrap: wrap;}
}


/* front-page
---------------------------------------------------------- */
.inrto{
	position: relative;
	margin: 50px 0 0;
	padding: 20px 0;
	height: calc(100vh - 100px);
	max-height: 860px;
	background-color: var(--bg-main);
	overflow: hidden;
}

.mv{
	position: relative;
	height: 100%;
}
.mv_img{
	position: relative;
	z-index: 0;
	width: 76%;
	height: 100%;
	margin: 0;
	border-radius: 0 20px 20px 0;
	overflow: hidden;
}
.mv_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(105%) contrast(90%) hue-rotate(10deg);
}

.mv_txt{
	position: absolute;
	bottom: 10%;
	right: 0;
	width: 800px;
	height: 80%;
	max-width: 80%;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-around;
	display: flex;
}

.mv_copy{ padding: 0 5vw 0 0;}
.mv_copy img{
	width: 400px;
	height: auto;
	-webkit-filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 5px #ffffff);
	filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 5px #ffffff);
}

.about{
	margin:0 auto 30px;
	padding: 50px 0;
}

@media screen and (max-width: 780px) and  (orientation: portrait) {
	.inrto{
		height: 55vh;
		margin: 0;
		padding: 0;
	}
	.mv{
		position: relative;
		display: block;
	}
	.mv_img{
		width: 100%;
		border-radius: 0;
	}
	.mv_txt{ max-width: 90%;}
	.mv_copy{
		width: 50%;
		max-width: 240px;
	}
	.mv_copy img{ min-width: auto;}
}


/* h1
---------------------------------------------------------- */
.h1_hanger{
	position: relative;
	width: 98vw;
	height: 25vh;
	max-height: 180px;
	margin: 0 0 0 2vw;
	padding-left: 10vw;
	overflow: hidden;
	align-items: center;
	border-radius: 9999px 0 0 9999px;
}
.h1_hanger::before,
.h1_hanger::after{
	content: '';
	position: absolute;
}
.h1_hanger::before{
	z-index: -2;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: var(--mainBgColor);
}
.h1_hanger::after{
	z-index: -1;
	width: 50%;
	height: 100vh;
	background: url(../img/bg01.svg) no-repeat right 30px bottom -50px / contain;
	/* background-attachment: fixed; */
	-ms-filter: blur(10px);
	filter: blur(10px);
	bottom: 0;
	right: -10px;
	opacity: 0;
	transition: var(--transition08s);
	animation-fill-mode: forwards;
}
.h1_hanger.is-animated::after {
	right: 0;
	opacity: 1;
}

h1{
	font-size: 2.3rem;
	font-weight: 700;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.h1_hanger{
		height: 12vh;
		margin: 60px 0 0 2vw;
	}
	h1{ font-size: 1.6rem;}
	.h1_hanger::after{
		width: 40%;
		-ms-filter: blur(5px);
		filter: blur(5px);
		background-position: right bottom 0;
	}
}


/* bread_crumb
---------------------------------------------------------- */
.bread_crumb{
	width: 100%;
	margin: max(3vh, 20px) auto;
}
.bread_crumb ul{
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}
.bread_crumb ul li{
	position: relative;
	margin: 0 10px 0 0;
	padding: 0 0 0 25px;
	font-size: 0.9rem;
	list-style: none;
}

.bread_crumb ul li a{ color: var(--c-main);}

.bread_crumb ul li::before{
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	left: 5px;
	width: 4px;
	height: 4px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.bread_crumb ul li:first-child{ padding: 0;}
.bread_crumb ul li:first-child::before{ display: none;}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.bread_crumb{ display: none;}
}


/* main
---------------------------------------------------------- */
.container{
	/* display: grid;
	grid-template-columns: 1fr 20%; 
	gap: 40px; */
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
	position: relative;
}
.container.index{ grid-template-columns: 1fr;}

.w900{
	max-width: 900px;
	margin: auto;
}

.box{
	margin: 30px auto;
	padding: 10px 30px;
	background-color: var(--bg-main);
	border-radius: 20px;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.container {
		/* gap: 20px; */
		grid-template-columns: 1fr;
		margin: 20px auto;
	}
	.size-sp-cap img { width: 50%;}
}


/* .contents
---------------------------------------------------------- */
/* .contents{ grid-column: 1 / 2;}
.container.index .contents{ grid-column: auto;} */

.contents h2{
	position: relative;
	padding: 0 0 30px 0;
	border-bottom: 2px solid var(--bg-main);
}
.contents h2::before{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 5rem;
	border-bottom: 2px solid var(--c-main);
}
.contents h2:first-child{ margin-top: 0;}

.contents h3{
	position: relative;
	padding: 20px 20px 20px 2rem;
	background-color: var(--bg-main);
	border-radius: 10px;
}
.contents h3::before{
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 1.5rem;
	height: 2px;
	background-color: var(--c-main);
}

.contents h4{
	padding: 20px 0;
	color: var(--c-main);
	border-bottom: 1px solid var(--bg-main);
}

.contents h5{
	position: relative;
	padding: 0;
}
.contents h5::before{
	content: '●';
	color: var(--c-main);
	display: inline-block;
	margin: 0 5px 0 0;
}

.contents ul li > ul{ margin: 0;}
.contents ul li > ul li{ margin: 5px 0 5px 30px;}

.contents a{
	color: var(--c-main);
	text-decoration: underline;
}
.contents a:hover{
	color: var(--t-main);
	text-decoration: none;
}
.contents :not(.wp-block-image) a[target="_blank"]::after,
.contents :not(.wp-block-image) a[href$=".pdf"]::after{
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 0 0 3px;
	background: no-repeat center / contain;
	vertical-align: middle;
}
.contents :not(.wp-block-image) a[target="_blank"]::after{ background-image: url(../img/icon_blank.svg);}
.contents :not(.wp-block-image) a[href$=".pdf"]::after{ background-image: url(../img/icon_pdf.svg);}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.contents {
		flex-basis: auto;
		width: 100%;
		padding-right: 0;
		margin-bottom: 20px;
	}
	.contents h2{ padding: 0 0 20px 0;}
}


/* footer
---------------------------------------------------------- */
footer{ margin: max(5vw, 50px) 0 0 0;}

@media screen and (max-width: 768px) and (orientation: portrait) {
	footer{ margin: 30px 0 0 0;}
}


/* faculty
---------------------------------------------------------- */
.update{
	font-size: 0.9rem;
	text-align: right;
}

.movie_hanger iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}
.movie_hanger p{ margin: 0;}


/* sitemap
---------------------------------------------------------- */
.sitemap_list{
	display: flex;
	flex-wrap: wrap;
}
.sitemap_list li{
	width: calc(100% / 3);
	margin: 0;
	padding: 10px;
	list-style: none;
}
.sitemap_list li a{
	display: block;
	padding: 10px 20px;
	background-color: var(--bg-main);
	border-radius: 10px;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.sitemap_list li{
		width: 100%;
		padding: 4px 0;
	}
}


/* news
---------------------------------------------------------- */
.container.single .contents .date{
	margin: 30px 0;
	text-align: right;
}
.container.single .contents .date .news_cat{ margin-left: 0.7rem;}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.container.single .contents .date{ margin: 20px 0;}
}