/*----- nav -----*/
.nav_area {
    background:rgba(0,32,96,.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

nav{
	position:relative;
	width:230px;
}
nav ul.main li a.emphasis{
	background-image: none;
	background-color: rgb(112,48,160);
	box-shadow: 0 0 4px rgba(0,0,0,.3);
	color: rgb(255,255,255);
}
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.new::after{
	content:"NEW";
	font-size:1.4rem;
	font-weight:700;
	color:rgb(236, 59, 68);
	padding-left: 10px;
}
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(112,48,160);
	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;
	}
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: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:1.5rem;
	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(178,141,79);
}
nav ul.main{
	box-sizing:border-box;
	margin:0;
	padding:20px 10px;
	width:100%;
}
nav ul.main li{
	display:flex;
	list-style:none;
	margin-bottom:4px;
}
nav ul.main li a{
	position:relative;
	box-sizing:border-box;
	display:block;
	padding:.7em .6em;
	width:100%;
	font-size:1.5rem;
	background:url(../img/common_deco02.svg) left .2rem center no-repeat rgb(255,255,255);
	box-shadow:0 0 3px rgba(0,0,0,.3);
	color:rgb(60,60,60);
	line-height:1.4;
	text-decoration:none;
	transition:.2s ease-out;
	transition-property:background,border-bottom,color;
	overflow:hidden;
}



/*新規ページを作成したら↓に新規ページのクラス名を追加
　例） .（クラス名）　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,
.sponsorship nav ul.main li a.sponsorship,
.cfa nav ul.main li a.cfa,
.registration nav ul.main li a.registration,
.program nav ul.main li a.program,
.ondemand nav ul.main li a.ondemand,
.participants nav ul.main li a.participants,
.speakers nav ul.main li a.speakers,
.accommodation nav ul.main li a.accommodation,
.access nav ul.main li a.access,
.links nav ul.main li a.links,

nav ul.main li a:hover,
nav ul.main li a.current{
	background:url(../img/common_deco01.svg) left .2rem center no-repeat rgb(112,48,160);
	background-position:right 1rem center;
	color:rgb(255,255,255);
	text-shadow:0 0 2px rgba(0,0,0,.5);
}
nav ul.main li a:hover::before,
nav ul.main li a.current::before{
	left:.2rem;
}
nav ul li.banner:not(.video){
	/*margin-top:20px;*/
	margin-top:-80px;
}
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 a img{
	width:100%;
	vertical-align:bottom;
}
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;
}

nav ul li.banner.video{
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
}
nav ul li.banner.video p{
	color:rgb(0, 32, 96);
	margin:-10px 0 10px;
}


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.external::after{
	content:"";
	display:inline-block;
	background:url(../img/icon_external_black.svg) center center no-repeat;
	background-size:cover;
	width:.8em;
	height:.8em;
	margin-left:.5em;
	transition:background .2s ease-out;
}
	nav ul li a.external:hover::after{
		content:"";
		display:inline-block;
		background:url(../img/icon_external_white.svg) center center no-repeat;
		background-size:cover;
	}



/*----- SNSロゴエリア -----*/
.sns-logo_area-wrap{
	justify-content:center;
	margin:0;
	margin-top:1em;
	width:fit-content;
	list-style:none;
}
.sns-logo_area-wrap .twitter-tweet {
	width: 250px !important; /* 元の幅 */
	max-width: 250px !important; /* 元の幅 */
	min-width: 0 !important;
	transform: scale(0.84); /* 0.84 倍に縮小 */
	transform-origin: top left; /* 縮小の基点を左上に設定 */
	overflow: hidden !important;
}

/*--960px--*/
@media screen and (max-width:960px){
/*--SNSロゴエリア--*/
	.sns-logo_area-wrap .twitter-tweet {
		transform: scale(0.68); /* 0.68 倍に縮小 */
	}
}
/*--800px--*/
@media screen and (max-width:800px){
/*--SNSロゴエリア--*/
	.sns-logo_area-wrap{
		width:100% !important;
	}

	.sns-logo_area-wrap .twitter-tweet {
		width: 250px !important; /* 元の幅 */
		max-width: 250px !important; /* 元の幅 */
		min-width: 0 !important;
		transform: scale(1); /* 0.84 倍に縮小 */
		transform-origin: top left; /* 縮小の基点を左上に設定 */
		overflow: hidden !important;
	}
	.banner{
		width:100% !important;
	}
}

/*.sns-logo_area-wrap .sns-logo_area{
	padding:0;
	width:60px;
}
.sns-logo_area-wrap .sns-logo_area a{
	padding:0;
	transition:opacity .2s ease-out;
}
.sns-logo_area-wrap .sns-logo_area a:hover{
	opacity:.6;
}
.sns-logo_area-wrap .sns-logo_area img{
	width:100%;
	vertical-align:bottom;
}*/


/* 動画とテキストをまとめるラッパー */
  .player-wrapper {
    width: 100%;
    max-width: 800px; /* 動画の最大幅と合わせる */
    margin: 0 auto 20px; /* ページ内での上下マージンと、左右の中央揃え */
  }

  /* 動画コンテナのスタイル */
  .video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
    background-color: #000;
  }

  /* video要素のスタイル */
  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* 説明テキストのスタイル */
  .video-caption {
    margin: 8px 0 0 0; /* 動画のすぐ下に配置し、少しだけ上にマージンを設ける */
    text-align: center;
    line-height: 1.2;
    font-size: 12.5px;
    color: rgb(0, 32, 96);
  }
  

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

/*--800px--*/
@media screen and (max-width:800px){
/*--nav--*/
	nav.main{
		position:fixed;
		top:0;
		right:0;
		z-index:100;
	}
	nav .sp_nav{
		box-sizing:border-box;
		position:fixed;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		right:-110%;
		padding:20px 10px;
		width:100%;
		height: 100%;
		overflow: scroll;
		background:rgba(0,0,0,.65);
		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:flex;
		top:auto;
		right:auto;
		box-sizing:border-box;
		flex-wrap:wrap;
		justify-content:space-between;
		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:49%;
	}
	nav ul.main li a{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		align-content:center;
		line-height:1.2;
	}
	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,.3);
			z-index:50;
		}

	nav ul li.banner.video{
		width:100% !important;
	}

	nav ul li.banner:not(.video){
	/*margin-top:20px;*/
	margin-top:0;
}
}

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