/*----- nav -----*/
nav {
	position: relative;
	width: 230px;
	font-size: 1.6em;
}

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.disabled a {
	pointer-events: none;
	cursor: default;
	color: rgb(197, 197, 197);
	background: url(../img/common_deco03.svg) left .2rem center no-repeat rgb(238, 238, 238);
}

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: var(--colorbase-);
	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: 100%;
	overflow: scroll; */
	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;
}

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

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

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%;
	font-size: 1.5rem;
	color: rgb(255, 255, 255);
	text-decoration: none;
	transition: .2s ease-out;
	transition-property: background, color;
	text-align: center;
}

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

nav ul.main li {
	display: flex;
	list-style: none;
	position: relative;
}

nav ul.main li a {
	position: relative;
	box-sizing: border-box;
	display: block;
	padding: .8rem 1.6rem;
	margin: 2.5px 10px;
	width: 100%;
	min-height: 41.96px;
	font-size: 1em;
	/* background-color: rgb(100, 155, 205); */
	background-color: rgb(115, 145, 200);
	background: url("../img/menu_deco_white.svg") left 0.4rem center no-repeat rgb(143, 137, 227);
	background-size: 6px 10px;
	/*box-shadow:0 0 3px rgba(0,0,0,.3);*/
	color: rgba(255, 255, 255, 1.00);
	line-height: 1.4;
	text-decoration: none;
	transition: .2s ease-out;
	transition-property: background, border-bottom, color;
	overflow: hidden;
}

/* -----------------------------------
   3階層プルダウン用（後から ul を追加すれば動作）
   例：
   <li>
     <a href="#">親</a>
     <ul>
       <li>
         <a href="#">子</a>
         <ul>
           <li><a href="#">孫</a></li>
         </ul>
       </li>
     </ul>
   </li>
----------------------------------- */
nav ul.main li>ul {
	position: absolute;
	top: 0;
	left: calc(100% - 6px);
	margin: 0;
	padding: 8px 8px 8px 6px;
	width: 240px;
	background: rgba(233, 89, 119, .6);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateX(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 300;
}

nav ul.main li:hover>ul,
nav ul.main li:focus-within>ul {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

nav ul.main li>ul li {
	display: block;
	margin: 0;
	width: 100%;
}

nav ul.main li>ul li a {
	display: block;
	margin: 0 0 6px;
	padding: .7rem 1.2rem;
	min-height: auto;
	font-size: .95em;
	background: rgb(143, 137, 227);
	background-image: none;
	border-radius: 4px;
	color: rgba(255, 255, 255, 1);
}

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

/* 第3階層は第2階層の右側に展開 */
nav ul.main li>ul li>ul {
	top: -8px;
	left: calc(100% - 4px);
	background: rgba(237, 108, 0, .6);
}

/* 下位階層ホバー時の色味を少し明るく */
nav ul.main li>ul li a:hover,
nav ul.main li>ul li a:focus {
	background: rgb(233, 89, 119);
	color: rgba(255, 255, 255, 1);
}

/*新規ページを作成したら↓に新規ページのクラス名を追加
　例） .（クラス名）　nav ul.main li a.(クラス名)*/
.home nav ul.main li a.home,
.message nav ul.main li a.message,

/*.message-en nav ul.main li a.message-en,*/

.english-page nav ul.main li a.english-page,

.overview nav ul.main li a.overview,
.program nav ul.main li a.program,
.guide nav ul.main li a.guide,


.for-presenters nav ul.main li a.for-presenters,



.information nav ul.main li a.information,
.info1 nav ul.main li a.info1,
.info2 nav ul.main li a.info2,
.info4 nav ul.main li a.info4,
.meet-and-greet nav ul.main li a.meet-and-greet,


.features nav ul.main li a.features,
.pal nav ul.main li a.pal,
.registration nav ul.main li a.registration,
.information-for-the-day nav ul.main li a.information-for-the-day,


.information-for-participants nav ul.main li a.information-for-participants,

.ondemando nav ul.main li a.ondemando,

.abstract nav ul.main li a.abstract,
.exchange-meeting nav ul.main li a.exchange-meeting,


.shimin nav ul.main li a.shimin,


.sponsors nav ul.main li a.sponsors,
.crossroads-of-life nav ul.main li a.crossroads-of-life,

.regarding-credit-application nav ul.main li a.regarding-credit-application,

.access nav ul.main li a.access,
.stay nav ul.main li a.stay,

.posters-and-flyers nav ul.main li a.posters-and-flyers,


.participation-with-children nav ul.main li a.participation-with-children,


.public-events nav ul.main li a.public-events,

.childcare-room nav ul.main li a.childcare-room,

.kids-planning nav ul.main li a.kids-planning,

.exploration-day nav ul.main li a.exploration-day,

.to-our-corporate-sponsors nav ul.main li a.to-our-corporate-sponsors,


nav ul.main li a.current,
nav ul.main li a:hover {
	background-color: rgb(237, 108, 0);
	background: url("../img/menu_deco_after.svg") left .2rem center no-repeat rgb(233, 89, 119);
	background-position: right 1rem center;
	background-size: 6px 10px;
	color: rgba(255, 255, 255, 1.00);
	/* font-weight: 700; */
}

nav ul.main li a:hover::before,
nav ul.main li a.current::before {
	left: .2rem;
}

nav ul li.banner {
	margin-top: 20px;
	/* padding: 0 16px; */
}

nav ul li.banner.poster {
	padding: 10px;
	display: block;
}

nav ul li.banner.poster p {
	font-size: 0.875em;
	margin: 0;
	text-align: center;
	/* border: 1px solid rgb(255, 0, 0); */
	/* color: rgb(255, 0, 0); */
	font-weight: 400;
	border-bottom: none;
	line-height: 1.3;
	background-color: white;
	width: 100%;
}

nav ul li.banner a {
	height: auto;
	background: url("../img/menu_deco_white.svg") left 0.4rem center no-repeat rgba(0, 171, 175, .0);
}

nav ul li.banner+.banner {
	margin-top: 5px;
}

nav ul li.banner a {
	padding: 0;
	border-bottom: none;
	line-height: 0;
	text-align: center;
	transition: opacity .2s ease-out;
}

nav ul li.banner.poster a {
	line-height: 1.6em;
	background-image: none;
	margin: 0;
}

/* nav ul li.banner.poster a img{
	border: 1px solid red;
	border-top: none;
} */
nav ul li.banner a img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 1px solid rgb(100, 155, 205);
}

nav ul li.banner a img.exclusively-for-kawanozaidan {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	background: rgb(255, 255, 255);
	border: none;
}


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

nav ul li.banner a:hover {
	background: none;
	border-bottom: none;
	opacity: .5;
}
/* aタグそのものの透過を強制的に戻す */
nav ul li.banner a:hover:has(img.exclusively-for-kawanozaidan) {
    opacity: 1 !important;
}

nav ul li.banner.poster a:hover {
	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 li.banner a:hover::after,
nav ul li.banner a::after {
	content: none;
}

.jp-en {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 10px;
	width: 90%;
	max-width: 220px;
	margin: 10px auto;
	padding: 0;
}

.jp-en li {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
}

.jp-en li a {
	width: 100%;
	height: auto;
}

.jp-en button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	padding: 2px;
	border: 2px solid rgb(100, 155, 205);
	width: 100%;
	font-size: 1em;
	line-height: 1.5;
	border-radius: 10px;
	box-shadow: 2px 2px 4px gray;
}

.jp-en li.current button {
	background-color: rgb(100, 155, 205);
	color: white;
}

.jp-en li a:hover button {
	box-shadow: none;
}

/*-----------------------------------
-----------------------------------
	メディアクエリ
-----------------------------------
-----------------------------------*/
/*--960px--*/
@media screen and (max-width:960px) {
	/*--nav--*/
	/* nav{
		width:190px;
	}
	nav ul li a{
		padding:1.6em 1em!important;
		font-size: 1.1rem!important;
	} */
}

/*--800px--*/
@media screen and (max-width:800px) {

	/*--nav--*/
	.jp-en button {
		color: white;
	}

	nav.main {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
	}

	nav .sp_nav {
		box-sizing: border-box;
		position: fixed;
		display: block;
		right: -110%;
		top: 0;
		padding: 66px 12px 16px;
		width: 100%;
		height: 100dvh;
		overflow-y: auto;
		overflow-x: hidden;
		/* background:rgba(243, 87, 160, .8); */
		background: rgba(0, 0, 0, 0.5);
		transition: right .3s ease-out;
		z-index: 1500;
	}

	nav ul.sub {
		position: relative;
		display: flex;
		top: auto;
		right: auto;
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		width: 100%;
		background: none;
		box-shadow: none;
		text-align: center;
		z-index: 100;
	}

	nav ul.sub li {
		box-sizing: border-box;
		border: none;
		list-style: none;
		margin: 0 0 10px 0;
		width: 49%;
	}

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

	nav ul.main {
		position: relative;
		display: block;
		top: auto;
		right: auto;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		width: 100%;
		box-shadow: none;
		text-align: center;
		z-index: 100;
	}

	nav ul.main li {
		box-sizing: border-box;
		border: none;
		list-style: none;
		margin: 0 0 10px 0;
		width: 100%;
		max-height: none;
		display: block;
	}

	nav ul.main li a {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		line-height: 1.2;
		font-size: 2rem !important;
		text-align: left;
		min-height: 44px;
		margin: 0;
		padding: .9rem 1.2rem;
	}

	/* スマホでは階層を縦展開（押しやすさ優先） */
	nav ul.main li>ul,
	nav ul.main li>ul li>ul {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		margin-top: 4px;
		padding: 6px 6px 2px;
		border-radius: 6px;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: rgba(26, 48, 90, .40);
	}

	nav ul.main li>ul li a {
		margin: 0 0 4px;
		font-size: 1.7rem !important;
		padding: .7rem 1rem;
		background-position: left .5rem center;
	}

	/* 第2階層は少し字下げ */
	nav ul.main li>ul li {
		padding-left: 8px;
	}

	/* 第3階層はさらに字下げ */
	nav ul.main li>ul li>ul li {
		padding-left: 10px;
	}

	/* バナーは通常メニューより余白を作る */
	nav ul.main li.banner {
		margin-top: 14px;
	}

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

	nav #sp_menu_button+label {
		display: block;
	}

	/*---- cheked ----*/
	nav #sp_menu_button:checked+label+.sp_nav {
		right: 0;
	}

	/*---- cheked ----*/
	nav #sp_menu_button:checked~.sp_nav .close_field {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0);
		z-index: 50;
	}

	nav ul.main li a.current::after {
		content: none;
	}

}

/*--800px--*/
@media screen and (max-width: 800px) {
    nav #sp_menu_button:checked ~ .sp_nav .close_field {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .3);
        z-index: 50;
    }
}


/*--600px--*/
@media screen and (max-width:600px) {

	/*--nav--*/
	nav #sp_menu_button+label {
		top: 5px;
		right: 10px;
	}

	nav ul p.abstract_note {
		display: none;
	}
}

/*--400px--*/
@media screen and (max-width:400px) {

	/*--nav--*/
	nav #sp_menu_button+label {
		top: 5px;
		right: 10px;
	}

}