/*----- nav -----*/
*,
*::after,
*::before {
	box-sizing: border-box;
}

.nav_area {
	box-sizing: border-box;
	padding: 10px 10px;
	width: 230px;
	background:rgb(50, 70, 121);
}

nav {
	margin-bottom: 30px;
}

nav ul.main {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
}

nav ul.main li {
	margin-bottom: 7px;
	list-style: none;
}

nav ul.main li:last-child {
	margin-bottom: 0;
}

nav ul.main li a {
	position: relative;
	box-sizing: border-box;
	display: block;
	padding: .55em .5em;
	background: url(../img/menu_deco_yellow.svg) 1px center no-repeat rgb(255, 255, 255);
	background-size: 6px auto;
	font-size: 1rem;
	color: rgb(60, 60, 60);
	line-height: 1.4;
	text-decoration: none;
	transition: .2s ease-out;
	transition-property: background, border, color, box-shadow;
	border: 1px solid rgba(0, 0, 0, 0);
}
nav ul.main li a.mypage{
	color: rgb(60, 60, 60);
	background-color: rgb(255, 242, 58);
	background-image: url(../img/menu_deco_black.svg);
	border: 2px solid white;
	line-height: 1.3;
}
nav ul.main li a.emphasis {
	background-image: none;
	background-color: rgb(255, 255, 0);
	box-shadow: 0 0 4px rgba(0, 0, 0, .3);
	color: rgb(250, 80, 80);
}

nav ul.main li a.bg_blue {
	background-image: none;
	background-color: rgb(142, 184, 255);
	box-shadow: 0 0 4px rgba(0, 0, 0, .3);
}

/*新規ページを作成したら↓に新規ページのクラス名を追加
　例） .（クラス名）　nav ul.main li a.(クラス名)*/
.home nav ul.main li a.home,
.message nav ul.main li a.message,
.overview nav ul.main li a.overview,
.program nav ul.main li a.program,
.syllabus nav ul.main li a.syllabus,
.guidance nav ul.main li a.guidance,
.information nav ul.main li a.information,
.abstract nav ul.main li a.abstract,
.instruction nav ul.main li a.instruction,
.registration nav ul.main li a.registration,
.nursery nav ul.main li a.nursery,
.sponsors nav ul.main li a.sponsors,
.stay nav ul.main li a.stay,
.shimin nav ul.main li a.shimin,.special-project nav ul.main li a.special-project,
.related-meetings nav ul.main li a.related-meetings,
.poster-flyer nav ul.main li a.poster-flyer,
.contact nav ul.main li a.contact,
.link nav ul.main li a.link,
nav ul.main li a.current,
nav ul.main li:not(.banner) a:hover {
	/* background-image: url(../img/menu_deco_white.svg); */
	background-position: 200px center, center;
	background-color: rgb(66, 128, 252);
	color: rgba(255, 255, 255, 1);
	/* border: 1px solid white; */
	font-weight: 500;
	background-repeat: no-repeat;
}
nav ul.main li a.mypage:hover {
	background-image: url(../img/menu_deco_yellow.svg);
}
nav ul.main li a.close {
	background-image: none;
	background-color: rgb(206, 210, 213);
	color: rgb(255, 255, 255);
}

nav ul.main li a.emphasis {
	background-image: none;
	background-color: rgb(255, 255, 0);
	box-shadow: 0 0 4px rgba(0, 0, 0, .3);
	color: rgb(250, 80, 80);
}

nav ul.main li a.new::after {
	content: "NEW";
	font-size: .875rem;
	font-weight: 700;
	color: rgb(250, 80, 80);
}

.nav_area .period {
	margin: 15px auto;
	line-height: 1.5;
	border: solid 2px rgb(207, 0, 14);
	border-radius: 5px;
	text-align: center;
}

.nav_area .period .title {
	box-sizing: border-box;
	margin: 0;
	padding: .4em .8em;
	background: rgb(234, 56, 27);
	color: rgb(255, 255, 255);
	font-size: .875rem;
	font-weight: 500;
}

.nav_area .period .date {
	box-sizing: border-box;
	margin: 0;
	padding: .6em .8em;
	background: rgb(255, 255, 255);
	color: inherit;
	font-size: .875rem;
	font-weight: 700;
}

.nav_area .period .date .arrow {
	display: inline-block;
	border-width: .45em 0 .45em .8em;
	border-color: rgba(234, 56, 27, 0) rgba(234, 56, 27, 0) rgba(234, 56, 27, 0) rgba(234, 56, 27, 1);
	border-style: solid;
	vertical-align: -10%;
}

nav ul li.disabled a {
	pointer-events: none;
	cursor: default;
	color: rgb(197, 197, 197);
	background: rgb(238, 238, 238);
	box-shadow: none;
}

nav ul li.banner {
	margin-top: 20px;
	box-shadow: 0px 0px 2px rgba(255, 255, 255, 1);
}

nav ul li.banner+.banner {
	margin-top: 10px;
	padding: 5px;
	background-color: rgba(255, 255, 255, .6);
}

nav ul li.banner a {
	padding: 0;
	border-bottom: none;
	line-height: 1.2;
	text-align: center;
	transition: opacity .2s ease-out;
	background-color: transparent;
	font-weight: 700;
}

nav ul li.banner a img {
	width: 100%;

}

nav ul li.banner a img.sp {
	display: none;
	max-width: 230px;
}

nav ul li.banner a:hover img {
	background: none;
	border-bottom: none;
	opacity: .5;
}

nav ul p.abstract_note {
	font-size: 1.2rem;
	line-height: 1.5rem;
	color: rgb(255, 0, 0);
	margin-top: 0.8rem;
}

/* nav ul li a[target="_blank"]::after{
	content:"";
	display:inline-block;
	background:url(../img/icon_external_white.svg) center center no-repeat;
	background-size:cover;
	width:.8em;
	height:.8em;
	margin-left:.5em;
	transition:background .2s ease-out;
}
nav ul li a[target="_blank"]:hover::after{
	content:"";
	display:inline-block;
	background:url(../img/icon_external_black.svg) center center no-repeat;
	background-size:cover;
} */

nav ul.sub {
	box-sizing: border-box;
	margin: 0;
	padding: 10px;
	width: 100%;
	background: rgb(60, 60, 60);
}

nav ul.sub li {
	display: flex;
	list-style: none;
	margin-bottom: 6px;
}

nav ul.sub li:last-child {
	margin-bottom: 0;
}

nav ul.sub li a {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: .7rem 0;
	width: 100%;
	border: solid 1px rgb(255, 255, 255);
	font-size: 1em;
	color: rgb(255, 255, 255);
	text-decoration: none;
	transition: .2s ease-out;
	transition-property: background, color;
	text-align: center;
}

nav ul.sub li a:hover,
nav ul.sub li a.current {
	background: rgb(255, 255, 255);
	color: rgb(35, 47, 59);
}


nav #sp_menu_button {
	display: none;
}

nav #sp_menu_button+label {
	box-sizing: border-box;
	position: fixed;
	top: 18px;
	right: 20px;
	display: none;
	padding: 10px 8px;
	width: 40px;
	background: rgb(58, 76, 101);
	color: rgb(255, 255, 255);
	transition: .2s ease-out;
	transition-property: border-color, box-shadow, transform;
	z-index: 1600;
}

nav #sp_menu_button+label span {
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 3px;
	background: rgb(255, 255, 255);
	transition: .2s ease-out;
	transition-property: width, height, margin, box-shadow, transform;
	overflow: hidden;
}

nav #sp_menu_button+label span:nth-child(1),
nav #sp_menu_button+label span:nth-child(2) {
	margin-bottom: 5px;
}

/*---- cheked ----*/
nav #sp_menu_button:checked+label {
	/*transform:rotate(90deg);*/
	box-shadow: 0 0 8px rgba(255, 255, 255, .45);
}

nav #sp_menu_button:checked+label span:nth-child(2) {
	background: rgba(0, 0, 0, 0);
	width: 20px;
	height: 20px;
	text-shadow: 0 0 8px rgba(255, 255, 255, .6);
}

nav #sp_menu_button:checked+label span:nth-child(2)::before {
	content: "×";
	display: block;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
}

nav #sp_menu_button:checked+label span:nth-child(1),
nav #sp_menu_button:checked+label span:nth-child(2) {
	margin-bottom: 0;
}

nav #sp_menu_button:checked+label span:nth-child(1),
nav #sp_menu_button:checked+label span:nth-child(3) {
	height: 0;
}