@charset "utf-8";
/*-----------------------------------------------------

	csr.css
  csr用CSS

------------------------------------------------------*/

#subMenu ul{
	padding: 0 0 10px 0;
}

#subMenu li{
	display: inline;
}

	#subMenu li a{
		padding: .5em 0 .5em 3em;
		background: url(../../common/images/circle.png) no-repeat 1.5em center;
		font-size: .9em;
		text-decoration: underline;
		color: #333;
	}

	#subMenu li a:hover,#subMenu li a.current{
		font-weight: bold;
		color: #33a;
		text-decoration: none;
	}

/*-----------------------------------------------------
	#csr
-----------------------------------------------------*/

#content #base #csr h1{
	width: 773px;
	background: url(../images/tit_csr.png) no-repeat;
}

#content.multiColumn #base #csr h1{
	width: 619px;
	background: url(../images/tit_csr_multi.png) no-repeat;
}

	.lead{
		width: 577px;
		height: 41px;
		margin: 15px auto;
		background: url(../images/lead.png) no-repeat;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

				.lead em{	
					color: #1057b8;
					font-style: normal;
				}

			#details{
				width: 620px;
				margin: 0 auto;
				padding: 15px;
				overflow: hidden;
			}

				#details ul{
					position: relative;
					left: 50%;
					display:flex;
				}

					#details ul li{
						position: relative;
						left: -50%;
						float: left;
						width: 31.2%;
						margin: 1%;
					}

						#details ul li a{
							display: block;
							position: relative;
							height: 100%;		
							border: solid 1px #ddd;
							line-height: 1.3;
							color: #333;
							font-size: .8em;
							text-decoration: none;
						}

						#details ul li a:hover{
							border: solid 2px #089ce8;
						}

						#details ul li .csr_exam{
							margin: 0 0 15px .4em;
							padding: .2em 0 .2em .5em;
							border-left: solid 5px #4859b3;
							color: #3272c9;
							font-weight: bold;
						}

						#details ul li .csr_abst{
							padding: .5em 1em;
						}

						#details ul li img{
							width: 100%;
							height: auto;
						}

						#details ul li .tri{
							display: block;
							position: absolute;
							right: 1px;
							bottom: 1px;
							width: 0;
							height: 0;
							border-bottom: solid 15px #4859b3;
							border-left: solid 15px transparent;
						}


			#activity{
				position: relative;
				margin: 30px auto 0 auto;
			}
			
			#activity h3 {
				width: 222px;
				font-size: 0.7em;
				text-align: left;
			}
			
/*			#activity article.actions div.columns-2:first-of-type figure:first-of-type div h3 {
				padding-bottom: 1.8em;
			}
*/
			.catch img{
				width: 100%;
				height: auto;
			}

			figure{
				margin-top: 20px;
				text-align: center;
			}

				figcaption div{
					position: relative;
					left: 50%;
					float: left;
				}

				figcaption div h3{
					display: block;
					position: relative;
					left: -50%;
					float: left;
					font-size: .8em;
				}
			

			.columns-2 {
				position: relative;
				left: 50%;
				float: left;
				margin: 10px 0 0 0;
			}

			.columns-2 figure{
				position: relative;
				left: -50%;
				float: left;
				width: 240px;
				margin: 10px;
			}

			figure img{
				width: 240px;
				height: auto;
			}
			
			.outerLink{
				position: absolute;
				right: 0;
				top: 0;
				float: left;
				padding: .2em .8em;
				text-align: center;
				font-size: .8em;
				background: #155ae8;
				color: #fff;
				border-radius: .3em;
			}

			.outerLink:hover{
				background: #ff3f7a;
			}

			.outerLink a{
				text-decoration: none;
				color: #fff;
			}


				#reports{
					padding: 25px 15px;
					background: #f8f7d4;
					border: solid 1px #ddd;
				}

				#reports a{
					text-decoration: none;
					color: #333;
				}

				#reports a:hover .tit_report{
					color: #acd;
				}

					#reports dl{
						padding: 15px;
						border-top: dotted 1px #333;
					}

					#reports dl:first-child{
						padding: 0 15px 15px 15px;
						border-top: none;
					}

						#reports .date{
							float: left;
							width: 8em;
							margin-top: .1em;
							padding: .2em;
							background: #089ce8;
							border-radius: .2em;
							font-size: .8em;
							text-align: center;
							line-height: 1;
							color: #fff;
						}

						#reports .tit_report{
							float: left;
							width: 532px;
							padding: 0 0 0 15px;
							font-size: 1.0em;
							font-weight: bold;
							color: #1158a8;
						}

						#reports .pict{
							float: right;
							width: 3em;
							margin-left: 1em;
							padding: .5em;
							background: #000;
							font-size: .7em;
							font-weight: bold;
							color: #fff;
							text-align: center;
							line-height: 1;
							border-radius: .3em;
						}

							#reports .pict.pink{
								background: #ff007e;
							}
							#reports .pict.covalt{
								background: #004eff;
							}
							#reports .pict.yellow{
								background: #ffea00;
								color: #000;
							}

						#reports .overview{
							clear: both;
							padding-top: 15px;
							line-height: 1.5;
							height: 4.5em;
						}

				.btn_more{
					width: 247px;
					height: 42px;
					margin: 25px auto;
				}

				.btn_more a{
					display: block;
					height: 100%;
					background: url(../images/btn_more.png) no-repeat top;
					text-indent: 100%;
					overflow: hidden;
					white-space: nowrap;
				}

				.btn_more a:hover{
					background: url(../images/btn_more.png) no-repeat bottom;
				}


		.catch{
			margin: 0 0 30px 0;
		}
		
		.catch p{
			margin: 15px 0 0 0;
		}

		.catch img{
			width: 100%;
			height: auto;
		}

		.actions .pic{
			float: right;
			width: 155px;
			padding: 0 0 20px 20px;
		}

		.actions .pics{
			margin-bottom: 15px;
			text-align: center;
		}

		.actions .pics figcaption div{
			position: relative;
			left: 50%;
			float: left;
		}

		.actions .pics h3{
			display: block;
			position: relative;
			left: -50%;
			float: left;
			font-size: .8em;
		}

		.actions .txt{
			margin-top: 1em;
			padding-left: 1em;
		}


/*-- 月次活動報告 --*/

	.month{
		padding: 1em 0;
	}

	.report_txt{
		padding: 4% 2%;
		border-top: dotted 1px #000;
	}

		.report_date{
			margin-bottom: 1em;
			text-align: right;
		}

		.report_txt ul{
			padding: 0 0 1em 2.2em;
			font-size: .9em;
			text-indent: -1.2em;
		}


	#backNumlist{
		}

			.btn_tab{
				cursor: pointer;
			}

			#backNumlist .year_knot li{
				border-top: dotted 1px #333;
			}
			#backNumlist .year_knot li:first-child{
				border-top: none;
			}

			#backNumlist .year_knot li a{
				display: block;
				padding: .5em 0 .5em 3em;
				background: url(../../common/images/circle.png) no-repeat 1.5em center;
				font-size: 1em;
				text-decoration: none;
				color: #333;
			}

			#backNumlist .year_knot li a:hover{
				color: #33a;
			}


		.months{
			display: none;
			position:relative;
			margin: 1em 0 0 2em;
			padding: 0;
		}

		.months:before{
			content:"";
	    display:block;
	    width:0;
	    position:absolute;
	    top:-1em;
	    bottom:1em;
	    left:0;
	    border-left:1px solid #333;
		}

			#backNumlist .year_knot li .months li{
				position: relative;
				padding: 0 .5em 0 1em;
				border-top: none;
			}

			#backNumlist .year_knot li .months li a{
				padding: .2em 0;
				background: none;
			}

			#backNumlist .year_knot li .months li:before{
				content:"";
		    display:block;
		    width:8px;
		    height:0;
		    border-top:1px solid #333;
		    position:absolute;
		    top:.8em;
		    left: 0;
			}

			#backNumlist .year_knot li .months li:last-child:before{
		    height: auto;
		    top: .8em; 
		    bottom: 0;
			}



/* additional */

#cook .pic,#golf .pic{
	float: right;
	width: 240px;
}

#cook .txt,#golf .txt{
	float: left;
	width: 520px;
}