@charset "UTF-8";

@media screen and (min-width: 1000px) {

	main{
		width : 100%;
		height : auto;
		padding-top : 80px;
	}
	
	.topImg{
		position: relative; /* 親要素にrelative */
	}
	
	.topImg h1{
		position: absolute; /* 重ねたい子要素にabsolute */
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		-webkit-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		transform: translate(-50%,-50%); /* センター寄せの修正 */
		color: #fff;
	}

	.topImg img{
		width : 90%;
		margin : 0 5%;
		display: block;
		box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
	}

	/* フェードイン */
	/* 下から上にフェードイン */
	.fadeInUp {
		animation-name: fadeInUp; /* キーフレームアニメーションを指定 */
		animation-duration: 1.5s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		transform: translateY(50px);
		opacity: 0;
	}
	@keyframes fadeInUp {
		0% {
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* フェードイン */
	.fadeIn {
		animation-name: fadeIn; /* キーフレームアニメーションを指定 */
		animation-delay: 0.5s; /* アニメーションの開始時間の遅延 */
		animation-duration: 1s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		opacity: 0;
	}
	@keyframes fadeIn {
		0% {
		}
		100% {
			opacity: 1;
		}
	}

	.wrap1{
		width : 100%;
		height : auto;
		margin : -100px auto 0 auto;
		padding : 160px 0 60px 0;
		background-color :#E8ECEF;
	}

	.container1{
		width :50% ;
		min-width :800px ;
		margin : 30px auto 0 auto;
	}
	

	.container1 p:first-child{
		line-height : 1.8;

	}

	.container1 p{
		line-height : 1.8;
		margin-top : 15px;
	}
	
	.wrap2{
		width :100% ;
		margin : 0 auto;
		padding : 60px 0;
		text-align : center;
	}
	
	/* 表 */
	.tablebox{
		width : 50%;
		min-width :800px ;
		margin : 30px auto ;
	}
		
	table{
		width : 100%;
		margin : 0 auto;
	}
	
	table,th,td{
		border: none;
		border-collapse : collapse;
	}
	
	th{
		border-bottom: 3px solid #CFD3D6;
		border-right: 20px solid #fff;
	}

	td{
		border-bottom: 1px solid #CFD3D6;
	}
	
	th,td{
		text-align:left;
		padding : 10px;
		white-space: nowrap;
		line-height : 1.8;
	}

	.item{
		width : 30%;
	}
	
	.content{
		width : 70%;
	}

	.wrap3{
		width :100% ;
		margin : 0 auto;
		padding : 60px 0;
		background-color :#E8ECEF;
	}

	.spText{
		display : none;
	}

	.click{
		pointer-events: none;
		width : 85%;
		margin : 30px auto 0 auto;
		text-align : center;
	}
	
	.click img{
		width : 100%;
		display: block;
	}
}
	
/* ==================== */
/*        スマホ        */
/* ==================== */

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

	main{
		width : 100%;
		height : auto;
		margin : 0 auto;
		padding-top : 60px;
	}
	
	.topImg{
		position: relative; /* 親要素にrelative */
	}
	
	.topImg h1{
		position: absolute; /* 重ねたい子要素にabsolute */
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		-webkit-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		transform: translate(-50%,-50%); /* センター寄せの修正 */
		color: #fff;
	}

	.topImg img{
		width: 100%;
		height: 200px;
		object-fit: cover;
		margin : 0 auto;
		display: block;
		box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
	}

	/* フェードイン */
	.fadeIn {
		animation-name: fadeIn; /* キーフレームアニメーションを指定 */
		animation-duration: 1.5s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		opacity: 0;
	}
	@keyframes fadeIn {
		0% {
		}
		100% {
			opacity: 1;
		}
	}

		/* 支部長あいさつ */
	.wrap1{
		width : 100%;
		margin : 0 auto;
		padding: 30px 0;
		background-color :#E8ECEF;
	}

	
	.container1 {
		width : 94%;
		max-width : 600px;
		padding: 0 3%;
		margin : 30px auto 0 auto;
	}
	
	.container1 p:first-child{
		line-height : 1.8;

	}

	.container1 p{
		line-height : 1.8;
		margin-top : 15px;
	}
	
	/* 相模原支部 概要 */
	.wrap2{
		width : 100%;
		margin : 0 auto;
		padding: 30px 0;
	}

	/* 表 */
	.tablebox{
		width : 94%;
		margin : 30px auto 0 auto;
		overflow: auto;
		}
		
	table{
		width : 100%;
		max-width : 600px;
		margin : 0 auto;
	}
	
	table,th,td{
		border: none;
		border-collapse : collapse;
	}
	
	th{
		display: block;
		background-color :#E8ECEF;
	}
	
	td{
		display: block;
	}

	th,td{
		text-align:left;
		padding : 10px;
		line-height : 1.8;
		white-space: nowrap; /* 改行禁止 */
	}

	.item{
		width : 100%;
	}
	
	.content{
		width : 100%;
	}
	
	/* 組織図 */
	.wrap3{
		width : 100%;
		margin : 0 auto;
		padding : 30px 0;
		background-color :#E8ECEF;
	}
	
		/* 組織図の画像を拡大 */
	.click{
		width : 90%;
		max-width : 600px;
		padding: 0 5%;
		margin : 30px auto 0 auto;
		text-align : center;
	}
	
	.click img{
		width : 100%;
		display: block;
		margin-bottom : 10px
	}
	
	#lightbox .lb-container{
		padding: 3px;
	}
	
	.spText{
		font-size : 0.8em;
	}

}