@charset "UTF-8";


#news, #foreword, #concept, #staff, #map{border-top:1px solid rgb(0, 200, 230); padding:2em 0;}

.column{color: rgb(100,100,100); column-width: 20em;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	
	-moz-column-gap: 3em;
	-webkit-column-gap: 3em;
	column-gap: 3em;
	
	-moz-column-rule: dotted rgb(0, 200, 230) 1px;
	-webkit-column-rule: dotted rgb(0, 200, 230) 1px;
	column-rule: dotted rgb(0, 200, 230) 1px;
}

/****************************************************/
/********************** LOGO ***********************/
/****************************************************/

#logo{width:100%; background-repeat:no-repeat; background-position: 50% 45%; background-size:contain; position:relative; z-index:999;}
.svg #logo{background-image:url(../img/logo.svg)}
.no-svg #logo{background-image:url(../img/logo.png)}

#entBt{position: absolute; width: 50px; height:50px; left:50%; bottom: 1em; margin-left: -25px; cursor: pointer;}
.svg #entBt{background-image:url(../img/entBt.svg)}
.no-svg #entBt{background-image:url(../img/entBt.png)}

/****************************************************/
/******************* CONTENTS *********************/
/****************************************************/

.blueBack{background-color:rgb(0, 200, 230); padding:2em 0;
	box-shadow:0px 0px 20px rgba(0,0,0,0.5);
	-moz-box-shadow:0px 0px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.5);
}

.description{color:rgb(0, 200, 230); font-family: Noto-M; font-size:1.2em; line-height:200%;}
.description p{margin-bottom:0.5em;}

/********************* HEADLINE *********************/
#news .list
{
	width: calc(50% - 2rem);
	float:left;
}
#news #fbFrame
{
	width: calc(50% - 2rem);
	float:right;

	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-align-items: center;
	align-items: center;
}
#fbFrame{height: 450px; background-color: rgb(240,240,240); position:relative;}
#news .list-1{float: left; width: 8em; color: rgb(100,100,100);}
#news .list-2{float: left; font-family: Noto-M; color: rgb(100,100,100);}
#news .clearfix{padding:0.5em 0; margin-bottom: .5em;}
#news .bt{border-top:1px solid rgb(230,230,230);}


#fbFrame .loader
{
	position: absolute;
	width: 30px; /*ローディングアイコンの横サイズ*/
	height: 30px; /*ローディングアイコンの縦サイズ*/
	border-radius: 50%;  /*CSS3で円を書く*/
	border: 5px solid rgb(0, 200, 230);  /*円に○の白枠をつける*/
	border-right-color: transparent; /*円の右にC状の空きをつける*/
	
	top: 50%;
	left: 50%;
	margin-top:-30px;
	margin-left:-30px; 

	animation: spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}
@keyframes spin
{
	0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
	50%  { transform: rotate(180deg); opacity: 1.0; } /*50%の時は透明度なし*/
	100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/
}

/********************* CONCEPT *********************/

#mainContents h3, #map h3, #staff h3, #infoContents h3{font-weight:normal; font-family: Noto-M; color: rgb(0, 200, 230); margin:3em 0 2em 0; font-size:1.2em; line-height:100%;}
#infoContents h3{margin-top:1em;}
#mainContents .contents{border-left: 3rem solid rgb(0, 200, 230); padding-left:3em; margin-left: -3rem;}

/********************** PROGRAM *********************/

#programContainer{}
#programContainer .listTitle{font-family: Noto-M; font-size:1em; color: rgb(0, 200, 230); margin:2.5em 0 1.5em 0; padding:.1em 0 .1em .6em; border-left:5px solid; line-height:100%;}
#programContainer .listTitle p{font-size:0.9em; font-family: Noto-DL; color:rgb(50, 50, 50); margin-top: 1em;}
#programContainer .program{background-color: rgb(225, 245, 255);}
/*#programContainer .clearfix{width:100%; background-color: rgb(200, 240, 255);}*/
#programContainer .list-1{color: rgb(100,100,100); padding:0.5em 1em; float:left; width:10em;}
#programContainer .list-2{color: rgb(100,100,100); padding:0.5em 1em; float:left;}
#programContainer hr{border-width:0px; border-bottom:0.1em solid rgb(255,255,255);}
#programContainer .sub
{
	color: rgb(0, 140, 180); padding:0.5em 0.5em 0.5em 1.2em; margin-left:1em; display:block;
	background-repeat:no-repeat;
	background-position:0;
/*	background-position: 0 .8em\0;  IE */
}
#programContainer a.sub:hover
{
	color:rgb(0,200,230);
	text-decoration: none;
	outline:none;
	transition: background .2s linear 0, color .2s linear 0;
}

.svg #programContainer .sub{background-image: url(../img/subDirWhite.svg);}
#programContainer .subDesc{position:relative; height:0; overflow:hidden;}
#programContainer .subDesc div{padding:0em 1em .5em 2em; color:rgb(100,100,100);}

/*********************** TEL ***********************/

#tel{margin:3em 0; padding:2em; 
	color:rgb(255,255,255); font-family: Noto-M; font-size:1.2em; line-height:200%;
	background-color:rgb(0, 200, 230);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	
	-webkit-tap-highlight-color:rgb(255,255,255);
}
.tel{margin-top:1.5em;}
.tel .telNum{font-size:1.2em; letter-spacing: .1em; color: white;}
.notice{font-size:0.8em; color:rgb(100,100,100); line-height:150%; margin-top:1.5em;}

/****************************************************/
/************************ STAFF ***********************/
/****************************************************/

.staffCate{margin:1em 0;}

.staff{padding-left:0.5em;}
#staff p{margin-bottom:0.5em;}
#staff .sub{color: rgb(0, 140, 180); padding:0.5em 0.5em 0.5em 1.2em;
	background-repeat:no-repeat; background-position: 0;
	background-position:0;
/*	background-position: 0 .65em\0;  IE*/
}
#staff a.sub:hover{
	color:rgb(0,200,230);
	text-decoration: none;
	outline:none;
	transition: background .2s linear 0, color .2s linear 0;
}
.svg #staff .sub{background-image: url(../img/subDirWhite.svg);}

#staff a.sub span{font-size: .8em;}

#staff .subDesc{position:relative; height:0; overflow:hidden;}
#staff .subDesc .contents{padding:0em 1em .5em 2em;}
#staff .subDesc .staffDesc{padding:0em 1em 1em 1em; color:rgb(100,100,100); font-size:.9em;}
.staffDesc .profile{max-width:450px;}
#staff .subDesc .listTitle{margin-top:.5em;}

.saffMoreInfoContainer{margin-top:.75em; margin-bottom:.75em; position:relative;}
.staffMoreInfo{position:relative; height:0; overflow:hidden;}
.saffMoreInfoContainer a.closeBt{position:absolute; top :10px; right: 10px; height:12px; width:12px;}
.staffMoreInfoBt{cursor:pointer; display:block; text-align: center;
	border:1px solid;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
}

#staff td{vertical-align:top;}
#staff .list{line-height:130%; padding:.5em; border:1px solid rgb(230,230,230); font-size:0.9em;}
#staff .list .listTitle{color:rgb(0, 200, 230); margin-top:1em; padding-bottom:.5em; border-bottom:1px solid rgb(230,230,230);}
#staff .list-1{color: rgb(100,100,100); padding:0.25em 1em 0.25em 0.5em; white-space: nowrap;}
#staff .list-2{color: rgb(100,100,100); padding:0.25em 0.5em 0.25em 0em;}

/****************************************************/
/********************* DIRECTOR *********************/
/****************************************************/

#staff .subDesc .director{padding:1em 0em .5em; color:rgb(100,100,100); font-size:.9em; border-bottom: 1px solid rgb(0,200,230);}
#staff .subDesc .photo{margin-top:0.5em;}
#staff .subDesc .photo img{height:250px;}
#staff .director .profile{max-width: 450px; float: left;}
#staff .director #twitterFrame{float: right; width:300px; border:1px solid rgb(240, 240, 240); margin-bottom:2em;}
#staff .director .showMoreContainer,
#infoContents .showMoreContainer
{
	margin-top:1em;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#staff .director .saffMoreInfoContainer{margin-bottom:2em; margin-top:1em;}

a.showMoreInfo, a.showMoreInfoClick
{
	display:block;
	width:100px; height:100px;
	text-indent:-9999px;
	background-repeat:no-repeat;
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}
a.showMoreInfo:hover
{
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* IE 8 */
}
.svg a.showMoreInfo{background-image:url(../img/moreInfoBt.svg)}
.no-svg a.showMoreInfo{background-image:url(../img/moreInfoBt.png)}

.showMoreContainer div{display:block; width:98px; height:98px;cursor:pointer; margin-bottom:5px;}
.svg .showMoreContainer div{background-image:url(../img/moreInfoBt.svg)}
.no-svg .showMoreContainer div{background-image:url(../img/moreInfoBt.png)}

.showMoreContainer #bookBt{display:block; background-position:0px 0px; cursor:pointer; margin-left:0px;}
.showMoreContainer #bookBt a.showMoreInfo{background-position: -100px 0px;}
.showMoreContainer #bookBt-click{display:block; background-position:-100px 0px; cursor:pointer;}
.showMoreContainer #bookBt-click a.showMoreInfo{background-position: 0 0px;	}
.showMoreContainer #bookBt-click a.showMoreInfo:hover{opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);	/* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */}

.showMoreContainer #monographBt{display:block; background-position:0px -100px; cursor:pointer;}
.showMoreContainer #monographBt a.showMoreInfo{background-position: -100px -100px;}
 .showMoreContainer #monographBt-click{display:block; background-position:-100px -100px; cursor:pointer;}
.showMoreContainer #monographBt-click a.showMoreInfo{background-position: 0 -100px;}
.showMoreContainer #monographBt-click a.showMoreInfo:hover{opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);	/* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */}

.showMoreContainer #seminarBt{display:block; background-position:0px -200px; cursor:pointer;}
.showMoreContainer #seminarBt a.showMoreInfo{background-position: -100px -200px;}
.showMoreContainer #seminarBt-click{display:block; background-position:-100px -200px; cursor:pointer;}
.showMoreContainer #seminarBt-click a.showMoreInfo{background-position: 0px -200px;}
.showMoreContainer #seminarBt-click a.showMoreInfo:hover{opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);	/* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */}

.showMoreContainer #mediaBt{display:block; background-position:0px -300px; cursor:pointer;}
.showMoreContainer #mediaBt a.showMoreInfo{background-position: -100px -300px;}
.showMoreContainer #mediaBt-click{display:block; background-position:-100px -300px; cursor:pointer;}
.showMoreContainer #mediaBt-click a.showMoreInfo{background-position: 0px -300px;}
.showMoreContainer #mediaBt-click a.showMoreInfo:hover{opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);	/* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */}

#infoContents .showMoreContainer #monographBt, #infoContents .showMoreContainer #seminarBt, #infoContents .showMoreContainer #mediaBt {margin-left:19px;}
#infoContents .showMoreContainer #monographBt-click, #infoContents .showMoreContainer #seminarBt-click, #infoContents .showMoreContainer #mediaBt-click{margin-left:19px;}


/******************* MORE INFO *********************/

#infoContents{position:fixed; top:0px; left:0px; width:100%; background-color: rgb(255, 255, 255); z-index:9900; color: rgb(100,100,100);}
.infoContainer{ background-color: rgb(255, 255, 255);}

.InfoImg{width:250px; height:250px; background-image: url(../img/loading.gif); background-repeat:no-repeat; background-position: 50% 50%; text-align:center;}

#infoContents
{
	padding: 4em 2rem;
	box-sizing: border-box;
}
.infoContainer, #infoContents .container, #infoContents .container_relative, #infoContents .contents_area{width: 100%; max-width: 650px; padding:0;}

a.linkBt
{
	margin-left: .5em;
	font-family: Noto-M;
	font-size:0.8em;
	text-align:center;
	line-height:0px;
	padding:0.1em .5em;
	display:inline;
/*	padding-bottom: 0px\0;  IE */

	color: rgb(255, 255, 255); 
	background-color: rgb(0,200,230);
	border: 1px solid rgb(0,200,230);
	
	text-decoration: none;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
}

a.linkBt:hover
{
	color:rgb(0,200,230);
	background-color: rgb(255,255,255);

	text-decoration: none;
	outline:none;
	transition: background .2s linear 0, color .2s linear 0;
}

table.list
{
	font-size:0.8em;
	color: rgb(100,100,100);
	width:100%;
}

/******************* BOOK *********************/

.infoCate{margin-top: 1em; margin-bottom: 1em; }
.infoCateContainer{margin-bottom:2em;}
.infoCateContainer .bookPhoto{width:200px; text-align:center; float:left;}
.infoCateContainer .InfoImg img
{
	max-width:200px;
	box-shadow:0px 0px 10px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1);
}
.infoCateContainer .bookInfo{max-width:400px; float:right;}
.infoCateContainer .bookInfo .infoTitle{font-size:1em; font-family: Noto-M;}
.infoCateContainer .bookInfo .infoSub{font-size:.8em; line-height:150%; margin-top:.5em;}
.infoCateContainer .bookInfo p{font-size:.8em; line-height:150%; margin-bottom:1em; margin-top:1em;}

.bookContainer{margin-bottom:2em;}
.bookContainer .InfoImg{float: left;}

a.directorLinkBt
{
	font-family: Noto-M;
	font-size:0.8em;
	text-align:center;
	padding:0.1em 1em; 
	
	margin-top:.5em; display:block;

	color:rgb(0,200,230);
	background-color: rgb(255,255,255);

	border: 1px solid rgb(0,200,230);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;	
}

a.directorLinkBt:hover
{
	color: rgb(255, 255, 255); 
	background-color: rgb(0,200,230);

	text-decoration: none;
	outline:none;
	transition: background .2s linear 0, color .2s linear 0;
}

p.photoLink{margin-top:.5em;}

.bookInfo .list tr{border-top:1px solid rgb(255,255,255);}
.bookInfo .list td{padding: .25em .5em; background-color: rgb(245,245,245);}
.bookInfo table{margin-bottom: 1em;}

/******************* SEMINAR *********************/

.seminarContainer .list tr{border-bottom:1px solid rgb(255, 255, 255);}
.seminarContainer .list td{padding: .5em 1em; background-color: rgb(225, 245, 255);}
.seminarContainer .list .list-1{margin-right:1em; min-width:3em;}

.seminarContainer .InfoImg
{
	width:auto; height:auto; min-width:100px; min-height:100px;
	float:left; margin-right:1em; margin-bottom: 1em;
}

.seminarContainer{margin-bottom:2em;}
.seminarContainer .infoTitle{font-family: Noto-M; font-size:1em; color: rgb(0, 200, 230); margin:2.5em 0 1.5em 0; padding:.1em 0 .1em .6em; border-left:5px solid; line-height:120%;}
.seminarContainer .infoSub{font-size: 0.8em; line-height: 150%; margin-bottom: .8em;}

/******************* MONOGRAPH *********************/

.monograph{margin:1em 0;}
.monograph .list{margin-bottom:1em; }
.monograph .listTitle{float: left; max-width:200px; margin-bottom:2em; color:black; padding-top:.9em;}
.monograph .listContents{float: right; max-width:450px; padding-top:1em;}
.monograph .infoTitle{font-size:1em; font-family: Noto-M; padding-left: 1.5em; background-repeat:no-repeat; 
	background-position:0 .3em;
/*	background-position: 0 .2em\0;  IE */
}
.svg .monograph .infoTitle{background-image: url(../img/hashDir.svg);}
.no-svg .monograph .infoTitle{background-image: url(../img/hashDir.png);}
.monograph .infoSub{font-size: 0.8em; line-height: 150%; padding-left:2em; padding-bottom:1em; border-bottom:1px solid rgba(0,200,230,.2);}

/******************* MEDIA *********************/

.media{margin:1em 0;}
.media .list{margin-bottom:1em;}
.media .listTitle{float: left; width:200px; margin-bottom:2em; color:black;}
.media .listContents{float: right; max-width:450px;padding-top:1em; border-top:1px solid rgba(0,200,230,.2);}
.media .infoTitle{font-size:1em; padding-left: 1.5em; background-repeat:no-repeat; padding-bottom:1em; border-bottom:1px solid rgba(0,200,230,.2);
	background-position:0 .3em;
/*	background-position: 0 .2em\0;  IE */
}
.svg .media .infoTitle{background-image: url(../img/hashDir.svg);}
.no-svg .media .infoTitle{background-image: url(../img/hashDir.png);}

.media .infoSub{font-size: 0.8em; line-height: 150%; margin-bottom: .8em;}


/****************************************************/
/************************ MAP ***********************/
/****************************************************/

#map_canvas{height:450px; border: 1px solid rgb(200, 200, 200); 
	margin-top:1em;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#map .sub{color: rgb(0, 140, 180); padding:0.5em 0.5em 0.5em 1.2em;
	background-repeat:no-repeat; background-position: 0;
}
/*#map a.sub:hover{
	color:rgb(0,200,230);
	text-decoration: none;
	outline:none;
	transition: background .2s linear 0, color .2s linear 0;
}*/
.svg #map .sub{background-image: url(../img/subDirWhite.svg);}

#gmapControl{margin-top:1em;}
#gmapControl ul{list-style-type: none}

/*/////////////////////////////////////////////////////////
/////////////////////// portrait ////////////////////////////
/////////////////////////////////////////////////////////*/

@media screen and (orientation : portrait)
{
	.column
	{
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	#mainContents .contents{border-left: 2em solid rgb(0, 200, 230); padding-left:2em; margin-left: -2rem;}
	
	.svg #logo{background-image:url(../img/logo_v.svg)}
	.no-svg #logo{background-image:url(../img/logo_v.png)}
	
	#news .list, #news #fbFrame
	{
		float:none;
	}
	#news .list
	{
		width: 100%;
		margin-bottom:2em; 
	}
	#news #fbFrame
	{
		width: 100%;
		margin-top:2em;
	}
	
	.staffDesc .profile{max-width:400px;}
	#staff .director .profile{max-width: 400px; float: none;}
	#staff .director #twitterFrame{float: none; margin-top:1.5em; max-width:400px;}
	
	.showMoreContainer div{margin-left:0;}

	.InfoImg{width:100%; max-width:450px; text-align:center; margin-bottom:1em;}
	.infoContainer, #infoContents .container, #infoContents .container_relative, #infoContents .contents_area{max-width: 450px; padding:0;}

	#infoContents .showMoreContainer{margin-bottom:1em; padding-right:10px;}
	
	.bookContainer .infoTitle, .bookContainer .infoSub{text-align: center;}
	.infoCateContainer .bookInfo{max-width:400px; float:none; margin-bottom:2em; padding-left:25px;}
	#infoContents .showMoreContainer #monographBt, #infoContents .showMoreContainer #seminarBt, #infoContents .showMoreContainer #mediaBt {margin-left:0px;}
	#infoContents .showMoreContainer #monographBt-click, #infoContents .showMoreContainer #seminarBt-click, #infoContents .showMoreContainer #mediaBt-click{margin-left:0px;}
	
	.description, #programContainer .sub, #tel{font-size:1.0em;}
	
	#gmapControl ul{font-size: 0.9em;}
}

@media screen and (min-width: 400px) and (max-width: 1050px) and (orientation : landscape)
{
	#news .list{width:375px; float:left;}
	.staffDesc .profile{width:430px;}
	#staff .director .profile{width: 430px;}
	.showMoreContainer div{margin-left:10px;}
	.showMoreContainer #bookBt{margin-left:0px;}
}