@charset "UTF-8";
/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	
	#sd_content{
		background: url("../img/culture/bg.jpg") repeat-y top center;
		background-size: 100% auto;
		padding-bottom: 170px;
	}

		#sd_content .h2{
			margin-bottom: 0;
		}	
		#sd_content .h3{
			margin-top: 70px;
			line-height: 1.5;
		}
		#sd_content .lead{
			font-size: 115%;
			text-align: center;
			margin-top: 35px;
			font-weight: bold;
		}
	
	#sd_content .sec{
		margin-top: 90px;
	}
	
	#photogallery{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		flex-wrap: wrap;
	}
		#photogallery:after{
			display: none;
		}
		#photogallery img{
			width: 100%;
		}
			#photogallery li{
				width: 325px;
				margin-right: 15px;
				cursor: pointer;
			}
			
				#photogallery li:nth-of-type(3){
					margin-right: 0;
				}
				#photogallery li:nth-of-type(n + 4){
					margin-top: 80px;
				}
				#photogallery li:nth-of-type(3n){
					transform: rotate(5deg);
				}
				#photogallery li:nth-of-type(2n){
					transform: rotate(0);
				}
				#photogallery li:nth-of-type(4n){
					transform: rotate(-5deg);
				}
	
	#photogallery li a{
		display: block;
		position: relative;
		background: url("../img/culture/photo_fl.png") no-repeat center;
		background-size: cover;
		padding: 17px 30px 70px;
		transition: 0.4s ease-out;
	}
			#photogallery li a:hover{
				transform: translateY(-10px);
			}
	
	.sec .cap{
		text-align: right;
		margin-top: 40px;
	}
	
	
	
	footer{
		margin-top: 0;
	}
	

	/* modal
	-------------------*/
	.modal {
		display: none;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
		.modal__bg {
			background: rgba( 0, 156, 229,0.9);
			height: 100vh;
			position: absolute;
			width: 100%;
		}
			.modal__content {
				left: 50%;
				position: absolute;
				top: 50%;
				-webkit-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
				width: 80%;
				max-width: 840px;
				font-size: 115%;
				max-height: 80%;
				overflow-y: scroll;
				-ms-overflow-style: none;
				scrollbar-width: none;				
				font-weight: bold;
				padding-bottom: 92px;
			}
			.modal__content::-webkit-scrollbar {
				display:none;
			}
				.modal__content .modal__inn {
					position: relative;					
					border: 4px solid #fff;
					border-bottom: none;
					border-radius: 10px 10px 0 0;					
					box-sizing: border-box;
				}
						/* 枠線
						--------------------*/
						.modal__content .modal__inn:before,
						.modal__content .modal__inn:after{
							content: '';
							display: block;
							position: absolute;		
							height: 60px;
							bottom: -60px;
							border-bottom:4px solid #fff;
						}
						.modal__content .modal__inn:before{
							width: calc(100% - 325px);
							border-left:4px solid #fff;
							border-radius: 0 0 0 10px;
							left: -4px;
						}
						.modal__content .modal__inn:after{
							border-right:4px solid #fff;
							border-radius: 0 0 10px 0;
							width: 60px;
							right: -4px;
						}
						
					.modal__content .modal_box {
						padding: 60px 60px 0;
						color: #fff;
					}
						.modal__content .modal__inn .modal_box:before,
						.modal__content .modal__inn .modal_box:after{
							content: '';
							display: block;
							position: absolute;
						}
						.modal__content .modal__inn .modal_box:before{
							background: url("../img/culture/bal.svg") no-repeat center;
							background-size: cover;
							width: 96px;
							height: 26px;
							bottom: -82px;
							left: calc(100% - 326px);
						}
						.modal__content .modal__inn .modal_box:after{
							background: url("../img/culture/icon.png") no-repeat center;
							background-size: cover;
							width: 142px;
							height: 175px;
							bottom: -92px;
							right: 73px;
						}
						.modal__content .modal__inn .modal_box.fe:after{
							background: url("../img/culture/icon2.png") no-repeat center;
							background-size: cover;
						}
	
							.modal__content .modal_box h4 {
								font-size: 34px;
								font-weight: bold;
								letter-spacing: 2px;								
							}
							.modal__content .modal_box .txt {
								line-height: 1.8;
								margin-top: 30px;
								text-align: justify;
							}
							.modal__content .modal_box .prof{
								margin-top: 20px;
								font-size: 14px;
								line-height: 1.5;						
							}
							.modal__content .modal_box .prof .name{
								font-size: 16px;
								margin-bottom: 5px;
							}
			.modal__content .js-modal-close {
				width: 60px;
				height: 60px;
				position: absolute;
				top: -1px;
				right: 0;
				cursor: pointer;
				transition: 0.4s;
				background-color: #fff;
				border-radius: 0 5px 0 0;
			}
				.modal__content .js-modal-close:before,
				.modal__content .js-modal-close:after{
					content: '';
					display: block;
					position: absolute;
					height: 2px;
					width: 40px;
					background-color: #009ce5;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					transition: 0.4s;
				}
					.modal__content .js-modal-close:hover{
						background-color: transparent;
					}
				.modal__content .js-modal-close:before{
					transform: rotate(45deg);
				}
				.modal__content .js-modal-close:after{
					transform: rotate(135deg);
				}
					.modal__content .js-modal-close:hover:before,
					.modal__content .js-modal-close:hover:after{
						background-color: #fff;
					}
				.modal__content .js-modal-close:hover:before{
					transform: rotate(225deg);
				}
				.modal__content .js-modal-close:hover:after{
					transform: rotate(315deg);
				}

	
	.of_h {
		overflow: hidden;
	}

	
	
	


}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	#sd_content{
		background: url("../img/culture/bg.jpg") repeat-y top center;
		background-size: 100% auto;
		padding-bottom: 45px;
	}

		#sd_content .h2{
			margin-bottom: 0;
			background-color: #fff;
		}	
		#sd_content .h3{
			font-size: 158%;
			color: #009CE5;
			text-align: center;
			margin-top: 35px;
		}
		#sd_content .lead{
			margin-top: 25px;
			font-weight: bold;
		}
	
	#sd_content .sec{
		margin-top: 35px;
	}
	
	#photogallery{
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		flex-wrap: wrap;
	}
		#photogallery:after{
			display: none;
		}
		#photogallery img{
			width: 100%;
		}
			#photogallery li{
				max-width: 325px;
				width: 90%;
				margin: 0 auto;				
			}
				#photogallery li+li{
					margin-top: 20px;
				}
				#photogallery li:nth-of-type(2n){
					transform: rotate(5deg);
				}
				#photogallery li:nth-of-type(3n){
					transform: rotate(0);
				}
				#photogallery li:nth-of-type(4n){
					transform: rotate(-5deg);
				}
			
	
	#photogallery li a{
		display: block;
		position: relative;
		background: url("../img/culture/photo_fl.png") no-repeat center;
		background-size: cover;
		padding: 5.2308% 9.23% 21.5385%;
	}
	
	.sec .cap{
		text-align: right;
		margin-top: 20px;
	}
	
	
	footer{
		margin-top: 0;
	}
	

	/* modal
	-------------------*/
	.modal {
		display: none;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
		.modal__bg {
			background: rgba( 0, 156, 229,0.9);
			height: 100vh;
			position: absolute;
			width: 100%;
		}
			.modal__content {
				left: 50%;
				position: absolute;
				top: 50%;
				-webkit-transform: translate(-50%,-50%);
				transform: translate(-50%,-50%);
				width: 90%;
				max-width: 840px;
				max-height: 60%;
				overflow-y: scroll;
				-ms-overflow-style: none;
				scrollbar-width: none;
				font-weight: bold;
			}
			.modal__content::-webkit-scrollbar {
				display:none;
			}
				.modal__content .modal__inn {
					position: relative;					
					border: 4px solid #fff;
					border-bottom: none;
					border-radius: 10px 10px 0 0;					
					box-sizing: border-box;
				}
						/* 枠線
						--------------------*/
						.modal__content .modal__inn:before,
						.modal__content .modal__inn:after{
							content: '';
							display: block;
							position: absolute;		
							height: 30px;
							bottom: -30px;
							border-bottom:4px solid #fff;
						}
						.modal__content .modal__inn:before{
							width: 30px;
							border-left:4px solid #fff;
							border-radius: 0 0 0 10px;
							left: -4px;
						}
						.modal__content .modal__inn:after{
							border-right:4px solid #fff;
							border-radius: 0 0 10px 0;
							width: 30px;
							right: -4px;
						}
						
					.modal__content .modal_box {
						padding: 30px 30px 0;
						color: #fff;
					}
						.modal__content .modal__inn .modal_box:before,
						.modal__content .modal__inn .modal_box:after{
							content: '';
							display: block;
							position: absolute;
						}
						.modal__content .modal__inn .modal_box:before{
							background: url("../img/culture/bal.svg") no-repeat center;
							background-size: cover;
							width: 96px;
							height: 26px;
							bottom: -52px;
							left: 29px;
						}
						.modal__content .modal__inn .modal_box:after{
							background: url("../img/culture/icon.png") no-repeat center;
							background-size: cover;
							width: 37vw;
							height: 45.5986vw;
							bottom: -40vw;
							right: 34px;
						}
						.modal__content .modal__inn .modal_box.fe:after{
							background: url("../img/culture/icon2.png") no-repeat center;
							background-size: cover;
						}
	
							.modal__content .modal_box h4 {
								font-size: 158%;
								font-weight: bold;
								line-height: 1.5;							
							}
							.modal__content .modal_box .txt {
								line-height: 1.8;
								margin-top: 20px;
								text-align: justify;
							}
							.modal__content .modal_box .prof{
								margin-top: 10px;
								font-size: 12px;
								line-height: 1.5;						
							}
							.modal__content .modal_box .prof .name{
								font-size: 14px;
								margin-bottom: 5px;
							}
			.modal__content .js-modal-close {
				width: 40px;
				height: 40px;
				position: absolute;
				top: -1px;
				right: 0;
				cursor: pointer;
				transition: 0.4s;
				background-color: #fff;
				border-radius: 0 5px 0 0;
			}
				.modal__content .js-modal-close:before,
				.modal__content .js-modal-close:after{
					content: '';
					display: block;
					position: absolute;
					height: 2px;
					width: 30px;
					background-color: #009ce5;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					transition: 0.4s;
				}
				.modal__content .js-modal-close:before{
					transform: rotate(45deg);
				}
				.modal__content .js-modal-close:after{
					transform: rotate(135deg);
				}
				.modal__content .js-modal-close:hover:before{
					transform: rotate(225deg);
				}
				.modal__content .js-modal-close:hover:after{
					transform: rotate(315deg);
				}

	
	.of_h {
		overflow: hidden;
	}



}