@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------
   index setting
------------------------------------------------------- */


/* user:
--------------------------------------------*/

#user {
	padding: 0 2%;
	margin-bottom: 1rem;
}

#user > ul {
	margin: -50px auto 0;
	border-top: 4px solid #bd3e27;
	font-size: 1.1rem;
}

#user > ul > li > a {
	padding: 1rem;
	font-size: 1rem;
}

#user > ul > li > a img {
	display: block;
	margin: 0 auto 10px;
	height: 35px;
}


#user > ul > li:after {
	top: 3rem;
	height: 2rem;
	width: 1px;
}

@media screen and (max-width: 767px) {
	#user {
		padding: 0;
	}
	#user > ul {
		margin: 0 auto;
		border-top: 3px solid #bd3e27;
		font-size: 1rem;
	}
	#user > ul > li > a {
		padding: 1rem 0.3rem;
	}
	    
}


/*---- important ----*/

#important ul {
	padding: 1rem 1rem 0.3rem;
}

#important ul li::before{
	top: 0.5rem;	
	width: 9px;	
	height: 9px;	
}	

/*---- museums ----*/	

#museums .clm4 section a {	
	padding: 0.5rem 5px 0.4rem 30px;	
}

#museums .clm4 section a::before{	
	top: 1rem;	
	left: 8px;	
	width: 8px;	
	height: 8px;	
}

#museums .clm4 section h3 img.ncm_logo {
	margin: 5px 0;
	max-width: 140px;
}
@media screen and (max-width: 767px) {
	#museums .clm4 section h3 img.ncm_logo {
		max-width: 120px;
	}
}
	
/* basic :
--------------------------------------------*/


/*---- section ----*/

main > section {
	padding-bottom: 1rem;
}

/*---- h2 ----*/

main > section > h2 {
	padding: 4rem 1rem 8rem;
	font-size: 1.2rem;
}

main > section > h2:before {
	top: 1.5rem;
	width: 3px;
	height: 20px;
}

main .outline {
	margin: -7rem 0 0;
}


/*---- lnk ----*/

main p.lnk2 {
	text-align: center;
	margin: 2rem 1rem!important;
	padding: 0!important;
}

main .lnk1 {
	margin: 1rem;
}

main .lnk1 a {
	min-width: 14rem;
}




/* museums :
--------------------------------------------*/

/*---- lead ----*/

#museums .outline > p {
	padding: 1.5rem 2% 0.5rem;
	font-size: 1rem;
}

#museums .map {
	width: 20px;
}

/*---- topics ----*/

main #topics .lnk2 {
	margin: 0 1rem 2rem!important;
}


/*---- museums ----*/


#museums .clm4 section ul {
	display: block;
	padding: 0.5rem;
}

#museums .clm4 section li,
html[lang="en"] #museums section li {
	width: 100%;
}
#museums .clm4 section li:last-child,
html[lang="en"] #museums section li:last-child {
	margin: 10px 0 0;
	width: 100%;
}

#museums .clm4 section:nth-child(8) li:last-child {
	margin: 0;
}

#museums .clm4 section h3 {
	padding: 0.5rem 0.3rem;
	font-size: 1.1rem;
}

#museums .clm4 section h3 img {
	display: block;
}

#museums .clm4 section:nth-child(1) h3 img {width: 90px;}
#museums .clm4 section:nth-child(3) h3 img {width: 100px;}
#museums .clm4 section:nth-child(4) h3 img {width: 45px;}
#museums .clm4 section:nth-child(5) h3 img {width: 60px;}
#museums .clm4 section:nth-child(6) h3 img {width: 45px;}
#museums .clm4 section:nth-child(7) h3 img {width: 40px;}
#museums .clm4 section:nth-child(8) h3 img {width: 40px;}

@media screen and (max-width: 767px) {
	#museums .clm4 section {margin-right: 3%!important;width: 48.5%!important;}
	#museums .clm4 section:nth-child(even) {margin-right: 0!important;}
	
	#museums .clm4 section:nth-child(1) h3 img {width: 55px;}
	#museums .clm4 section:nth-child(3) h3 img {width: 65px;}
	#museums .clm4 section:nth-child(4) h3 img {width: 30px;}
	#museums .clm4 section:nth-child(5) h3 img {width: 35px;}
	#museums .clm4 section:nth-child(6) h3 img {width: 30px;}
	#museums .clm4 section:nth-child(7) h3 img {width: 28px;}
	#museums .clm4 section:nth-child(8) h3 img {width: 28px;}
}


/* support :
--------------------------------------------*/

/*---- lead ----*/

#support .outline > p {
	padding: 2rem 2% 1.5rem;
	font-size: 1rem;
}

html[lang="en"] #support .outline > p {
	padding: 2rem 2% 2rem;
}

#support .clm2 div::after{
	top: 35%;
	right: 16px;
	bottom: 10px;
	width: 20px;
	height: 20px;
}

/*---- banner ----*/
@media screen and (max-width: 767px) {
	#support .clm2 a {
		width: 100%;
	}

	#support .clm2 div::after{
		top: 35%;
		right: 16px;
		bottom: 12px;
		width: 18px;
		height: 18px;
	}
	#support .clm2 a h3 {
		font-size: 1.2rem;
		margin: 1rem 1rem 0.5rem;
	}
	#support .clm2 a p,
	html[lang="en"] #support .clm2 a p {
		margin: 0 1rem 1rem;
		font-size: 1rem;
	}
	#support .clm2 a#crowdfunding {
		padding-bottom: 0;
	}
	#support .clm2 a#crowdfunding div {
		position: relative;
	}
	
	#support .clm2 a#crowdfunding div img {
		padding: 1.5rem;
	}
}



/* about :
--------------------------------------------*/

main #about h2 {padding: 4rem 1rem 6rem;}

/*---- lead ----*/


#about .outline > p {
	padding: 2rem 2% 1.5rem;
	font-size: 1rem;
}

#about .clm3 a {width:  48.5%;}

@media screen and (max-width: 767px) {
	#about .clm3 a {
		width: 100%;
		padding: 1.5rem 1.5rem 1.5rem 2.5rem;
		margin-bottom: 1.5rem;
	}
}


/* service :
--------------------------------------------*/

#service.outline {
	padding: 2rem 1rem 1rem;
}

#service .clm2 a::after{
	top: 38%;
	right: 10px;
	width: 15px;
	height: 15px;
}
	
#service .clm2 li a {	
	padding: 1.5rem 2rem 1.5rem 1rem;
}

#service .clm2 li:first-child a {
	padding: 0.9rem 5rem 0.9rem 1rem;
}

@media screen and (max-width: 767px) {
	#service 	li {
		width: 100%;
	}
}

/* search :
--------------------------------------------*/

#about + #search {
	margin-top: 2rem;
}

#search .outline {
	margin: 0 auto;
	padding: 2rem 2% 1rem;
}



/*---- banner ----*/

#search .clm2 a {
	padding: 1.5rem 1rem 0.5rem 90px;
	background-position: left 25px top 23px;
	background-size: 40px;
	margin-bottom: 1rem;
}

#search .clm2 a.jps {
	padding: 1.5rem 1rem 0.5rem 90px;
	background-size: 60px;
}

#search .clm2 a img.icon {
	top: 15px;
	right: 5px;
	width: 1.2rem;
}

@media screen and (max-width: 767px) {
	#search .clm2 a:nth-child(1) {order: 1;}
	#search .clm2 a:nth-child(2) {order: 3;}
	#search .clm2 a:nth-child(3) {order: 2;}
	#search .clm2 a:nth-child(4) {order: 4;}
	
	#search .clm2 a {
		width: 100%;
		background-position: left 25px top 25px;
	}
	#search .clm2 a.jps {
		background-position: left 20px top 25px;
	}
	
	#search .clm2 a h2 {
		padding-right: 30px;
		font-size: 1.2rem;
		margin-bottom: 0.5rem;
	}
}