/* CSS Document */
@import url("wp_styles.css");
@import url("reset.css");
@import url("common.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;}

.wp-block-flexible-table-block-table{ margin: 30px 0;}
.wp-block-flexible-table-block-table table{
	margin: 0;
	border: none !important;
    background-color: var(--bg-main);
}
.is-scroll-on-mobile table{ min-width: 640px;}

.wp-block-flexible-table-block-table table tr{ border-bottom: 1px solid #adadad !important;}
.wp-block-flexible-table-block-table table tr:last-child{ border-bottom: none !important;}

.wp-block-flexible-table-block-table table th,
.wp-block-flexible-table-block-table table td{
	border: none !important;
	border-right: 1px solid #adadad !important;
	background-color: inherit !important;
}
.wp-block-flexible-table-block-table table tr th:last-child,
.wp-block-flexible-table-block-table table tr td:last-child{
	border-right: none !important;
}
.wp-block-flexible-table-block-table table th{
	background-color: rgba(var(--c-main-rgb), 0.1) !important;
}

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

/* 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;
}

@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;
	word-break: break-all;
}
.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: calc(100vw - 40px);
		padding-right: 0;
		margin-bottom: 20px;
	}
	.contents h2{ padding: 0 0 20px 0;}
}


/* .side
---------------------------------------------------------- */
.side {
	position: sticky;
	top: calc(120px + 5%);
	align-self: start;
	grid-column: 2/3;
	border-radius: 10px;

	/* ▼▼▼ ここを変更・追加 ▼▼▼ */
	
	/* 1. 元の overflow: hidden; を変更または削除 */
	/* hiddenだとスクロールバーが出ないので auto にします */
	overflow-y: auto; 
	
	/* 2. 高さを画面内に収める制限を追加 */
	/* 計算式: 100vh(画面全体の高さ) - 上の余白(約140px) - 下の余白(20px) */
	max-height: calc(100vh - 160px);
	
	/* (オプション) スクロールバーのデザインを少し綺麗にする */
	scrollbar-width: thin; /* Firefox用 */
	scrollbar-color: var(--c-main) var(--bg-main); /* Firefox用 */
}

/* Chrome, Safari, Edge用のスクロールバーカスタマイズ（任意） */
.side::-webkit-scrollbar {
	width: 8px;
}
.side::-webkit-scrollbar-track {
	background: var(--bg-main);
	border-radius: 10px;
}
.side::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 10px;
}
.side::-webkit-scrollbar-thumb:hover {
	background-color: var(--c-main);
}

.side nav ul{
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

.side nav ul li{
	margin: 0;
	list-style: none;
}
.side nav ul li a{
	position: relative;
	display: block;
	padding: 10px 10px 10px 3rem;
	color: var(--t-main);
	text-decoration: none;
}
.side nav ul li a::before{
	content: '';
	position: absolute;
	left: 15px;
	top: 16px;
	width: 20px;
	height: 20px;
	background: no-repeat center / contain;
	transition: 0.2s ease-out;
}
.side nav ul li a:hover::before{ left: 18px;}

/* 親 */
.side nav > ul{
	background-color: var(--c-main);
}
.side nav > ul > li > a{
	background-color: var(--c-main);
	color: #fff;
}
.side nav > ul > li > a:hover{ background-color: rgba(0,0,0,0.1);}
.side nav > ul > li > a::before{ background-image: url(../img/arrow01_w.svg);}

/* 子 */
.side nav ul li > ul{ background-color: var(--bg-main);}
.side nav ul li > ul li a::before{ background-image: url(../img/arrow02_g.svg);}
.side nav ul li > ul li a:hover{
	background-color: rgba( var(--c-main-rgb), 0.05);
	color: var(--c-main);
}

/* pulldown */
.side .pulldown {
	cursor: pointer;
	position: relative;
	padding: 10px 10px 10px 3rem;
	color: var(--t-main);
	font-weight: bold;
	transition: 0.2s ease-out;
}
.side .pulldown::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 16px;
	width: 20px;
	height: 20px;
	background: url(../img/arrow01_g.svg) no-repeat center / contain; 
	transition: transform 0.3s ease; /* 回転アニメーション */
}

.side .pulldown.is-open,
.side .pulldown:hover {
	background-color: rgba( var(--c-main-rgb), 0.05);
	color: var(--c-main);
}
.side .pulldown:last-child.is-open { border-bottom: none;}

.side .pulldown.is-open::before { transform: rotate(90deg);}

.side nav .pulldown > ul {
	display: none;
	margin: 10px 0 0 0;
	background-color: inherit;
	border-radius: 10px;
}

.side nav ul .pulldown > ul li a {
	padding: 5px 5px 5px 2rem;
	font-size: 0.9em;
	background-image: none;
}
.side nav ul .pulldown > ul li a::before {
	top: 10px;
	left: 0;
	transform: scale(0.8);
}
.side nav ul .pulldown > ul li a:hover{
	background-color: none !important;
	text-decoration: underline;
}
.side nav ul .pulldown > ul li a:hover::before{ left: 5px;}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.side {
		position: static;
		top: auto;
		left: auto;
		z-index: auto;
		width: 100%;
		grid-column: auto;
		max-height: none;
	}
	.side nav ul li a::before,
	.side .pulldown::before{ top: 11px;}
}


/* Archive
---------------------------------------------------------- */
.index_menu{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: max(2rem, 30px);
	margin: 50px 0;
}
.index_menu.col2{ grid-template-columns: repeat(2, 1fr);}

.index_menu li{
	margin: 0;
	padding: 0;
	flex-basis: 32%;
	list-style: none;
}
.index_menu li a{
	height: 100%;
	background-color: var(--bg-main);
	overflow: hidden;
	border-radius: 20px;
	color: var(--t-main);
	text-decoration: none;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
}
.index_menu.col2 li a{ align-items: stretch;}
.contents .index_menu li a::after{ display: none !important;}

.index_menu_img{
	width: 60%;
	line-height: 0;
}
.index_menu_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.index_menu_info{
	width: 100%;
	padding: 2.5rem;
}
.index_menu_info p{
	margin: 10px 0 0 0;
	line-height: 1.6;
}
.index_menu_info .index_menu_tit{
	position: relative;
	margin: 0;
	padding-right: 2.5rem;
	font-size: 1.2rem;
	color: var(--c-main);
}
.index_menu.col2 .index_menu_info .index_menu_tit{ font-size: 1.3rem;}

.index_menu_info .index_menu_tit::after{
	content: '';
	position: absolute;
	right: 0;
	top: 0.5rem;
	width: 20px;
	height: 20px;
	background: url(../img/arrow01_g.svg) no-repeat center / contain;
	transition: var(--transition05s);
}
.index_menu a:hover{ background-color: rgba( var(--c-main-rgb), 0.1);}
.index_menu a:hover .index_menu_tit{
	color: var(--t-main);
	text-decoration: none;
}
.index_menu a:hover .index_menu_tit::after{
right: -5px;}

#pageNavi{
	margin: 50px 0;
	padding: 20px 0;
	text-align: center;
}

#pageNavi ul li{
	margin: 0 5px;
	display: inline-block;
	padding: 5px 0;
}

#pageNavi a{
	display: inline-block;
	padding: 6px 10px;
	color: var(--mainColor);
	background-color: #FFFFFF;
	border-radius: 5px;
	text-decoration: none;
}

#pageNavi a:hover{
	background-color: var(--bg-main);
	color: var(--c-main);
	text-decoration: none;
}

#pageNavi .page-numbers.current{
	display: inline-block;
	padding: 6px 10px;
	background-color: var(--c-main);
	border-radius: 5px;
	color: #FFFFFF;
}

.none_detail{ text-align: center;}

@media screen and (max-width: 768px) and (orientation: portrait) {
	.index_menu,
	.index_menu.col2{
		grid-template-columns: repeat(1, 1fr);
		gap: 15px;
		margin: 20px 0;
	}
	.index_menu_info{ padding: 20px;}
	.index_menu_info .index_menu_tit{ font-size: 1.1rem !important;}
}


/* 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;}


/* research
---------------------------------------------------------- */
.news_list.column{
	grid-template-columns: 1fr 1fr;
}
.news_list.column a{
	position: relative !important;
	display: block;
}
.news_list.column a::after{
	position: absolute;
	top: 5px;
	right: 5px;
	width: 24px !important;
    height: 24px !important;
	background-color: #fff !important;
    border-radius: 50% !important;
    background-size: 60% !important;
}
.news_list.column a img{
	width: 100%;
	aspect-ratio: 5 /3;
}

.news_list.column figcaption{ font-size: 1rem;}


/* 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;}
}