@charset "shift_jis"; 

/*********************************************************
共通設定*/


/**************
見出し
***************/
/*サイト名*/
h1{ margin-bottom:10px;}
	h1 img{margin:auto;}
/*ヘッダー日時*/
h2{
	text-align:center;
	color:#035a85;
	font-weight:bold;
	}
h2 > span{display:inline-block;}
/*タイトル*/
h3{
	color:#1997d2;
	font-size:1.4em;
	line-height:1.5em;
	font-weight:bold;
	}
/*サブタイトル*/
h4{
	clear:both;
	background:#1997d2;
	color:#ffffff;
	padding:10px;
	font-size:1.2em;
	line-height:1.5em;
	}


@media only screen and (max-width:1240px){
}
@media only screen and (max-width: 768px){
	h1{ margin-bottom:5px;}
}
@media only screen and (max-width: 480px){
}

/**************
共通
***************/
.contents,
.contents980{
	clear:both;
	padding:40px 0;
}
@media only screen and (max-width:1240px){
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 480px){
	.contents,
	.contents980{padding:20px 0;}
}

.fixedBtn{
	position:fixed;
	/*bottom:60px;チャットボットとかぶる*/
	bottom:210px;
	right:0;
	max-width:160px;
	background:rgba(255,255,255,0.5);
	text-align:center;
	padding:10px 10px 5px 10px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
	border:#1b95d4 solid 1px;
	line-height:0;
	z-index:99;
}
.fixedBtn img{ margin:0 auto 5px;}
.fixedBtn iframe{ margin:0 auto 5px;}
.fixedBtn dt{ margin-bottom:5px;}
.fixedBtn dd{ display:inline-block;}
.fixedBtn dd img{max-width:45px; vertical-align:bottom;}

@media only screen and (max-width: 480px){
	.fixedBtn{ width:60px; padding:5px; bottom:120px;}
}

/**************
一覧ページ
***************/
.eventList{
	clear:both;
	border-bottom:#cccccc solid 1px;
	padding:20px 30px 20px 20px;
	}
.eventList > a{
	display:block;
	position:relative;
	text-decoration:none;
	color:#333333;
	margin:-20px -30px -20px -20px;
	padding:20px 30px 20px 20px;
	}
.eventList > a:before{
	position:absolute;
	bottom: 50%;
	right:1%;
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
	font-family:FontAwesome;
	content:"\f054";
	font-size:30px;
	color:#1997d2;
	}
.eventList > a:hover,
.eventList > a:active{
	background:#FFFFE6;
}
.eventList > a:hover:before,
.eventList > a:active:before{
	color:#cc0000;
}
.eventListPhoto{
	float:left;
	width:18%;
	margin-right:2%;
	}
.eventListPhoto img{
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	behavior: url(border-radius.htc); /* IE */
	}

.eventListTxt{
	position:relative;
	float:left;
	width:80%;
	}
.eventListTxt dt{
	font-weight:bold;
	margin-bottom:5px;
	}
.eventListTxt dd.document{
	position:absolute;
	right:-30px;
	top:0;
	width:23%;
}


@media only screen and (max-width: 768px){
	.eventList{ padding:10px 30px 10px 10px;}
	.eventList a{
		margin:-10px -30px -10px -10px;
		padding:10px 30px 10px 10px;}
	.eventListPhoto{width:23%;}
	.eventListTxt{width:75%;}
	.eventListTxt dd.document{
		position:relative;
		width:100%;
		left:0;
		right:inherit;
	}

}


.introVideo{ clear:both;}
.introVideo > *{
	background:#e0eaf6;
	margin-bottom:10px;
	}
.introVideo a{
	display:flex;
	position:relative;
	height:100%;
	text-decoration:none;
	color:#333;
	padding:20px;
	}
.introVideo p{
	flex-shrink: 0;
	width:200px;
	}
.introVideo dl{
	flex-shrink: 0;
	width:calc(100% - 200px);
	padding-left:20px;
	}
.introVideo dt{
	font-weight:bold;
	color:#1b95d4;
	margin-bottom:5px;
	line-height:1.3em;
	}
.introVideo dd{
	font-size:0.8em;
	line-height:1.3em;
	}

@media only screen and (max-width: 768px){
	.introVideo a{ padding:10px;}
	.introVideo p{
		flex-shrink: 0;
		width:35%;
		}
	.introVideo dl{
		flex-shrink: 0;
		width:65%;
		padding-left:10px;
		}
}

.project01{
	position:relative;
	}
.project01 p{
	margin-left:40%;
	width:60%;
	}
.project01 dl{
	position:absolute;
	bottom: 50%;
	left:0;
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
	width:50%;
	background:rgba(255,255,255,0.8);
	box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	padding:30px;
	}
.project01 dt{
	font-weight:bold;
	color:#1b95d4;
	font-size:1.4em;
	line-height:1.4em;
	}
.project01 dd a{
	display:inline-block;
	background:#c00;
	padding:10px 20px;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:0.9em;
	line-height:1.3em;
	text-decoration:none;
	}
.project01 dd a:hover,
.project01 dd a:active{
	background-color:#aa0000;
	}
@media only screen and (max-width: 1100px){
	.project01 p{
		margin-left:0;
		width:100%;
		}
	.project01 p img{
		width:100%;
		}
	.project01 dl{
		position:relative;
		bottom:none;
		left:0;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		width:100%;
		padding:30px;
		}
}
@media only screen and (max-width: 768px){
	.project01 dl{ padding:15px;}
}

/**************
ヘッダー
***************/
#header{
	width:100%;
	margin:0;
	clear:both;
	float:none;
	position:relative;
	border-top:#1b95d4 solid 4px;
	border-bottom:#1b95d4 solid 1px;
	background: #ffffff;
	}
#header img{margin:auto;}

#header.h-2021{
	background:#e0eaf6;

	/*background:#e0eaf6 url(../../crickeTRY2021/images/headerBg2021.jpg) center top repeat-x;*/
	}

/*未使用*/
	.h-left{float:left; width:20%;}
	.h-right{float:right; width:20%;}
	.h-center{
		position:absolute;
		bottom: 50%;
		right:50%;
		-webkit-transform: translate(50%,50%);
		-ms-transform: translate(50%,50%);
		transform: translate(50%,50%);
		width:60%;
		text-align:center;
	}

@media only screen and (max-width:1240px){
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 480px){
}

/**************
メニュー
***************/
#nav{
	/*background:#e0eaf6;*/
	background:#1b95d4;
	/*border-bottom:#1b95d4 solid 1px;*/
	}
#nav .inner{
	display:flex;
	align-items:center;
	}
.menu{
	margin-right:auto;
	display:flex;
	align-items:center;
	width:calc(100% - 200px);
	}
.menu p{
	border-right:#ccc solid 1px;
	}
.menu p:first-child{
	border-left:#ccc solid 1px;
	}
.menu a{
	display:block;
	height:100%;
	color:#fff;
	padding:0 10px;
	font-size:0.9em;
	line-height:1.3em;
	}
.menu a:hover,
.menu a:active{
	color:#c00;
	}
.menu p.nav-sns{
	border:none;
	margin:4px 4px 4px auto;
	}
.nav-sns a{padding-right:0;}
.nav-sns img{ max-height:40px;}

#nav .language{
	display:block;
	height:100%;
	margin-left:auto;
	}


@media only screen and (max-width: 768px){
	#nav .inner{display:block;}
	.menu{ width:100%;}
	.menu a{
		padding:0 6px;
		font-size:0.8em;
		line-height:1.3em;
		}
	.menu p.nav-sns{
		border:none;
		margin:4px 0 4px auto;
		}
	.menu p.nav-sns a{ padding:0;}


}

/*言語選択*/
.language{
	display:inline-block;
	float:right;
	/*background:#1b95d4;*/
	background:#2f5597;
	color:#1b95d4;
	padding:10px;
	width:200px;
	text-align:center;
}
.language p{
	display:inline-block;
	border-left:#ffffff solid 1px;
	padding-left:4px;
}
.language p:first-child{
	border-left:none;
	padding-left:0;
}
.language a{
	color:#ffffff;
	text-decoration:none;
	padding:0 10px;
}

@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 480px){
	.language{padding:5px; width:auto; max-width:200px;}
	.language a{padding:8px;}
	.language p{font-size:0.8em; line-height:1;}
}



/**************
フッター
***************/
#footer{
	position:relative;
	width:100%;
	margin:0;
	clear:both;
	float:none;
	padding:40px 0;
	background:#1b95d4;
	color:#ffffff;
}
#footer i{
	width:15px;
	text-align:center;
}
#footer a{
	color:#ffffff;
}

.f-cont{
	float:left;
	}
.f-cont2{
	float:right;
	margin-right:40px;
	}
.f-ico {
	display:inline-block;
	margin-right:5px; margin-top:5px;}
.f-ico img{
	display:inline;
	height:40px;
}
.f-line{
	float:right;
	max-width:240px;
}


@media only screen and (max-width:1240px){
}
@media only screen and (max-width: 768px){
	#footer{
		padding:20px 0;
	}
	.f-cont{
		float:none;
		margin-right:0;
		padding-bottom:5px;
		border-bottom:#ffffff solid 1px;
		margin-bottom:5px;
		}
	.f-cont img{
		max-height:60px;
		}
	.f-line{
		float:none;
		max-width:none;
		padding-bottom:5px;
		border-bottom:#ffffff solid 1px;
		margin-bottom:5px;
		}
	.f-line img{
		max-height:60px;
		}
	.f-cont2{
		float:none;
		margin-left:0;
		}
	.f-ico img{
		display:inline;
		height:30px;
	}

}
@media only screen and (max-width: 480px){
	#footer{
		padding:10px 0;
	}

}

/*********************************************************
コンテンツ
*/
/*入門ブック*/
.guide{
	display:inline-block;
	float:right;
	border:#1b95d4 solid 1px;
	border-top:none;
	padding:10px 10px 9px;
	font-size:0.9em;
	margin-right:10px;
}
.guide a{
	text-decoration:none;
	padding:0 4px;
}
@media only screen and (max-width: 480px){
	.guide{padding:5px;font-size:0.8em; float:left; margin-right:0;}
	.guide a{padding:5px 2px;}
}



/**/
.line{
	float:right;
	max-width:40%;
	width:240px;
	margin-left:10px;
	border:#cccccc solid 1px;
}
/**/
.nav{
	float:left;
	text-align:right;
	width : 80% ;
	width : -webkit-calc(100% - 200px) ;
	width : calc(100% - 200px) ;
	padding:5px 10px;
	}
.nav p{
	display:inline-block;
	padding-left:4px;
	vertical-align:middle;
	}
.nav a{
	display:block;
	text-decoration:none;
	color:#333333;
	}
.nav a:hover,
.nav a:active{
	color:#cc0000;
	}
.nav img{max-height:40px;}



@media only screen and (max-width: 768px){
	.nav{
		width : -webkit-calc(100% - 180px) ;
		width : calc(100% - 180px) ;
		}
	.nav img{max-height:30px;}
}
@media only screen and (max-width: 480px){
	.nav{
		padding:2px 5px;
		width : -webkit-calc(100% - 140px) ;
		width : calc(100% - 140px) ;
		}
	.nav p{font-size:0.8em; line-height:1;}
	.nav img{max-height:28px;}

}




/*コンテンツ*/
.topCont{ clear:both;}

.topCont dl{}
.topCont dt{
	color:#1997d2;
	font-size:1.6em;
	line-height:1.5em;
	font-weight:bold;
	}
.topCont dd{}

.topContTxtL{ float:left; width:60%;}
.topContImgR{ float:right; width:38%;}
.topContImgR img{float:right;}

.topContTxtR{ float:right; width:60%;}
.topContImgL{ float:left; width:38%;}


.btnYellow a,
.btnYellow span{
	display:block;
	text-decoration:none;
	text-align:center;
	background:#ffc000;
	color:#ffffff;
	font-weight:bold;
	padding:10px 0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
	/*順序 横・下・ぼかし・広がり・色*/
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
}
.btnYellow a:hover{	background:#cc9a00;}
.btnYellow a:active{
	-webkit-transform: translate(0,2px);
	-moz-transform: translate(0,2px);
	transform: translate(0,2px);
	background:#cc9a00;
	box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-webkit-box-shadow:none;
}

.btnNavy a,
.btnNavy span{
	display:block;
	text-decoration:none;
	text-align:center;
	background:#2f5597;
	color:#ffffff;
	font-weight:bold;
	padding:10px 0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
	/*順序 横・下・ぼかし・広がり・色*/
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
}
.btnNavy a:hover{	background:#264479;}
.btnNavy a:active{
	-webkit-transform: translate(0,2px);
	-moz-transform: translate(0,2px);
	transform: translate(0,2px);
	background:#264479;
	box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-webkit-box-shadow:none;
}

.btnGreen a,
.btnGreen span{
	display:block;
	text-decoration:none;
	text-align:center;
	background:#363;
	color:#ffffff;
	font-weight:bold;
	padding:10px 0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
	/*順序 横・下・ぼかし・広がり・色*/
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.3);
}
.btnGreen a:hover{	background:#1a3e1a;}
.btnGreen a:active{
	-webkit-transform: translate(0,2px);
	-moz-transform: translate(0,2px);
	transform: translate(0,2px);
	background:#363;
	box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	-webkit-box-shadow:none;
}


.notesWrap{
	clear:both;
	margin-top:20px;
	border:#cccccc solid 1px;
	background:#ffffff;
	padding:20px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	behavior: url(border-radius.htc); /* IE */
}

.photo{position:relative;}
.photoTxt{
	position:absolute;
	bottom:40px;
	left:0;
	width:100%;
	background:rgba(0,0,0,0.5);
	padding:20px 30px;
	font-weight:bold;
	color:#ffffff;
	font-size:2em;
	line-height:1.2em;
	}
.photoTxt span{
	display:block;
	font-size:0.8em;
}

/*youYube*/
.youTube{
	position:relative;
	padding-top:56.25%;
}
.youTube iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}



@media all and (-ms-high-contrast:none){
	.btnYellow a{padding:13px 0 7px;}
	.btnNavy a{padding:13px 0 7px;}
}


@media only screen and (max-width: 768px){

	.topContTxtL,
	.topContImgR,
	.topContTxtR,
	.topContImgL{ float:none; width:100%; margin-bottom:20px;}

	.topContImgR img,
	.topContImgL img{ margin:auto; width:60%; float:none;}
	
	.notesWrap{	margin-top:10px; padding:10px;}
	.photoTxt{
		bottom:10px;
		left:0;
		padding:15px;
		font-size:1.7em;
		line-height:1.2em;
		}

}

@media only screen and (max-width: 480px){
	.photoTxt{
		bottom:0;
		left:0;
		font-size:1.2em;
		line-height:1.2em;
		}

}


/*フェイスブックアルバムボタン*/

.btn_album,
.btn_album a{
	display:block;
	position:relative;
	text-decoration:none;
	color:#fff;
	}
.btn_album span{
	display:block;
	position:absolute;
	bottom: 50%;
	right:50%;
	-webkit-transform: translate(50%,50%);
	-ms-transform: translate(50%,50%);
	transform: translate(50%,50%);
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
	line-height:1.3em;
	width:70%;
	}


@media only screen and (max-width: 480px){
.btn_album span{
	font-size:1em;
	line-height:1.3em;
	}

}