/* ******************************************************************
 *	File name		: top.css
 *	Summary			: css base
 * ******************************************************************
 */


:root {
	--fontsize-p:1.2rem;
	--fontsize-p-sp:1.0rem;
	--fontsize-mini:0.8rem;
	--fontsize-strong:1.48rem;
}



/* -----------------------------------------------------------------
   main_img
----------------------------------------------------------------- */

#main_img{
	position:relative;
	margin:0px auto;
	width:1170px;
	max-width:100%;
	height:560px;
	padding:90px 25px 0;
	z-index:10;
	transition-duration:0.5s;
	}
	#main_img p{
		position:absolute;
		right:40px;
		top:110px;
		font-family:"Manrope", sans-serif;
		font-weight:200;
		font-style:italic;
		font-size:3.2rem;
		text-align:left;
		line-height:1.27;
		color:#51AEC8;
	}
	#main_img h2{
		position:absolute;
		top:325px;
		left:30px;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:700;
		font-size:3.7rem;
		text-align:left;
		line-height:1.3;
		letter-spacing:1px;
		color:#51AEC8;
	}
	#main_img #mi_logo{
		position:absolute;
		top:380px;
		right:20px;
		width:590px;
		max-width:100%;
}

/* --- responsive --- */
@media screen and (max-width:1200px){
	#main_img{
		position:relative;
		margin:0px auto;
		width:1170px;
		height:auto;
		padding:90px 25px 0;
		text-align:center;
		z-index:10;
		transition-duration:0.5s;
		}
		#main_img p{
			position:relative;
			right:0px;
			top:0px;
			margin:0 auto 30px;
			font-size:2.7rem;
			text-align:center;
		}
		#main_img h2{
			position:relative;
			top:0px;
			left:0px;
			margin:0 auto 30px;
			text-align:center;
		}
		#main_img #mi_logo{
			position:relative;
			top:0px;
			right:0px;
			margin:0 auto 30px;
	}
}
@media screen and (max-width:767px){
	#main_img p{
		font-size:7.0vw;
	}
	#main_img h2{
		font-size:9.0vw;
	}
}

/* -----------------------------------------------------------------
   second_box
----------------------------------------------------------------- */

.second_box{
	position:relative;
	width:100%;
	margin:140px 0 50px;
	padding:0 0 0 340px;
	}
	.second_box h3{
		display:inline-block;
		position:absolute;
		top:0px;
		left:0px;
		padding-left:20px;
		font-weight:600;
		font-size:1.5rem;
		text-align:left;
/*		color:#51AEC8;*/
		color:#060B6F;
		border-left:7px solid #060B6F;
		line-height:1.35;
	}
	.second_box h3 + div{
		position:relative;
	}
	.second_box p{
		position:relative;
		margin:0 0 10px;
		font-weight:bold;
		font-size:var(--fontsize-p);
		line-height:1.75;
	}
	.second_box *{
		text-align:justify;
}

/* --- responsive --- */
@media screen and (max-width:1000px){
	.second_box{
		margin:80px 0 50px;
		padding:0 0 0 0px;
		text-align:left;
		}
		.second_box h3{
			position:relative;
			margin:0 0 20px;
		}
		.second_box h3 + div{
			position:relative;
		}
		.second_box p{
			position:relative;
			margin:0 0 10px;
			font-size:var(--fontsize-p-sp);
			line-height:1.75;
		}
		.second_box *{
			text-align:justify;
	}
}


/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

section{
	position:relative;
	}
	section *{
		color:#0B248E;
	}
	section h2{
		position:relative;
	}
	section h3{
		position:relative;
	}
	section h2 + p,
	section h2 + div,
	section h2 + #news_list,
	section h2 + address{
		position:relative;
		width:100%;
		padding-left:340px;
		text-align:left;
	}

section h2{
	display:inline-block;
	position:absolute;
	left:0px;
	text-align:center;
	width:200px;
	margin:0 0 40px;
	font-weight:bold;
	font-size:2.0rem;
	line-height:1.5;
	color:#060B6F;
	}
	section h2::after{
		content:" ";
		display:block;
		position:relative;
		width:50px;
		height:35px;
		margin:0 auto;
		background:url(../../image/base/section_h2.png) no-repeat center center;
		background-size:contain;
}
section#news h2{
	font-size:2.7rem;
}

/* --- responsive --- */
@media screen and (max-width:1000px){
	section h2 + p,
	section h2 + div,
	section h2 + #news_list,
	section h2 + address{
		padding-left:0px;
	}

	section h2{
		position:relative;
	}
}

/* -----------------------------------------------------------------
   section:avtive;
----------------------------------------------------------------- */

section{
	transition:0.8s ease-in-out;
	transform:translateY(30px);
	opacity:0;
}
section.active{
	transform:translateY(0px);
	opacity:1;
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news_list{
	position:relative;
	padding:40px 0 0;
	z-index:1110;
	}
	#news_list ul{
		margin:0 0 0px;
		list-style:none;
	}
	#news_list ul li{
		margin:0 0 20px;
		font-weight:bold;
		font-size:0.84rem;
		list-style:none;
		color:#0B248E;
	}
	#news_list ul li a{
		font-weight:inherit;
		font-size:inherit;
		color:inherit;
		}
		#news_list ul li a:hover{
			text-decoration:none;
			color:#51AEC8;
	}
	#news_list ul li .date{
		display:block;
		margin:0 0 5px;
		font-weight:bold;
		font-size:inherit;
		font-size:1.03rem;
		color:#0B248E;
		}
		#news_list ul li.new .date::after{
			content:"New";
			display:inline-block;
			margin:0 0 0 15px;
			padding:1px 10px;
			font-weight:bold;
			font-size:1.0rem;
			background:#0B248E;
			line-height:1;
			color:#FFF;
	}
	#news_list ul li a:hover .date{
		color:#51AEC8;
		}
		#news_list ul li a:hover.new .date::after{
			background:#51AEC8;
	}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news_list{
		padding:0px 0 0;
	}
}

/* -----------------------------------------------------------------
   mission
----------------------------------------------------------------- */

#mission{
	margin:0 auto 240px;
}
#mission h2 + div{
	margin:0 0 130px;
}
#mission h2 + div p{
	margin:0px !important;
	font-weight:bold;
	font-size:var(--fontsize-strong);
	line-height:1.75;
}

#mission p{
	margin:0 0 35px;
	font-weight:bold;
	font-size:1.12rem;
	text-align:justify;
	line-height:1.75;
	}
	#mission p:last-child{
		margin:0 0 0px;
}

#greeting_lr{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	flex-direction: row-reverse;
	}
	#greeting_lr #og_chief{
		width:200px;
	}
	#greeting_lr > p{
		margin:0 0 30px !important;
		width:calc(100% - 277px);
	}
	#greeting_lr #og_chief{
		text-align:left;
		font-size:var(--fontsize-min);
		line-height:1.35;
	}
	#greeting_lr #og_chief img{
		margin:0 0 7px;
	}
	#greeting_lr #og_chief p{
		font-size:0.80rem;
		text-align:left;
	}
	#greeting_lr #og_chief span{
		display:inline-block;
		margin:7px 0 0;
		font-weight:bold;
		font-size:1.2rem;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#mission{
		margin:0 auto 100px;
	}
	#mission p{
		font-size:0.90rem;
	}
	#mission h2 + div p{
		font-size:1.0rem;
	}
	#greeting_lr p{
		margin:0 0 30px !important;
		font-size:0.90rem;
		width:100%;
	}
	#greeting_lr #og_chief{
		width:100%;
		text-align:center !important;
	}
	#greeting_lr #og_chief{
		width:100%;
		text-align:left;
		font-size:0.80rem;
		line-height:1.35;
	}
	#greeting_lr #og_chief img{
		margin:0 auto 7px;
	}
	#greeting_lr #og_chief p{
		text-align:center !important;
	}
	#greeting_lr #og_chief span{
		margin:2px 0 10px;
	}
}

/* -----------------------------------------------------------------
   nano_terrace
----------------------------------------------------------------- */

figure#nano_terrace{
	position:relative;
	margin:0 auto 210px;
	z-index:100;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	figure#nano_terrace{
		position:relative;
		margin:0 auto 100px;
		z-index:100;
	}
}

/* -----------------------------------------------------------------
   organization
----------------------------------------------------------------- */

#organization h2 + p{
	margin:0 0 50px;
	font-weight:bold;
	font-size:1.4rem;
	text-align:justify;
	line-height:1.75;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#organization h2 + p{
		font-size:1.1rem;
	}
}

/* -----------------------------------------------------------------
   Global_Coalition
----------------------------------------------------------------- */

#Global_Coalition{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	}
	#Global_Coalition h4{
		position:relative;
		width:100%;
		margin:0 0 50px;
		font-size:1.8rem;
		font-weight:bold;
	}
	#Global_Coalition > p{
		width:calc(100% - 270px);
		margin:0 0 35px;
		font-size:1.05rem;
		line-height:1.9 !important;
	}
	#Global_Coalition #gc_leader{
		width:200px;
		margin:0 0 35px;
	}
	#Global_Coalition #gc_leader p{
		font-size:0.80rem;
		text-align:left;
	}
	#Global_Coalition #gc_leader img{
		margin:0 0 7px;
	}
	#Global_Coalition figure{
		position:relative;
		margin:0px 0 0;
	}
	#Global_Coalition #gc_leader span{
		display:inline-block;
		margin:7px 0 0;
		font-weight:bold;
		font-size:1.2rem;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#Global_Coalition{
		display:block;
		}
		#Global_Coalition h4{
			margin:0 0 30px;
			font-size:1.4rem;
		}
		#Global_Coalition p{
			width:100%;
			margin:0 0 35px;
			font-size:1.05rem;
			line-height:1.9 !important;
		}
		#Global_Coalition #gc_leader{
			width:100%;
			margin:0 0 35px;
			text-align:center;
		}
		#Global_Coalition #gc_leader p{
			font-size:0.80rem;
			text-align:center;
		}
		#Global_Coalition #gc_leader img{
			margin:0 0 7px;
		}
		#Global_Coalition figure{
			position:relative;
			margin:0px 0 0;
		}
		#Global_Coalition #gc_leader span{
			display:inline-block;
			margin:7px 0 0;
			font-weight:bold;
			font-size:1.2rem;
	}
}

/* -----------------------------------------------------------------
   link_box
----------------------------------------------------------------- */

.link_box{
	position:relative;
	z-index:1100;
}
.link_box ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	}
	.link_box ul li{
		width:48%;
		margin:0 0 30px;
	}
	.link_box ul li a{
		transition-duration:0.5s;
		opacity:1;
	}
	.link_box ul li a:hover{
		opacity:0.7;
}

/* -----------------------------------------------------------------
   contact
----------------------------------------------------------------- */

#contact address *{
	font-weight:inherit;
	font-size:inherit;
}
#contact address p{
	font-weight:bold;
	font-size:1.3rem;
	line-height:1.75;
}
#contact address p strong{
	display:inline-block;
	margin:0 0 20px;
	font-weight:bold;
	font-size:1.8rem;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#contact address p{
		font-size:0.9rem;
		text-align:center;
	}
	#contact address p strong{
		text-align:center;
		font-size:1.2rem;
	}
}

/* -----------------------------------------------------------------
   maglass
----------------------------------------------------------------- */

.maglass{
	position:relative;
	}
	.maglass::after{
		content:" ";
		position:absolute;
		right:0px;
		bottom:-40px;
		width:40px;
		height:40px;
		background:url(../../image/base/maglass.png) no-repeat 0 0;
		background-size:cover;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	.maglass{
		pointer-events:none;
	}
	.maglass::after{
		display:none;
	}
}