@charset "UTF-8";

.beige{
	background-color:#e0d8d8;
}

.third-wrapper{
	background-color:#fafaf5;
}

.first-wrapper p, .second-wrapper p, .third-wrapper p, .tencho-box p{
	font-size:1.3rem;
	margin-bottom:15px;
}

.first-wrapper p:last-of-type, .second-wrapper p:last-of-type, .third-wrapper p:last-of-type{
	margin-bottom:0;
}

.small-p{
	font-size:1.1rem!important;
}

.first-wrapper{
	width:800px;
	margin:-10px auto 0;
	padding:0 0 40px;
	box-sizing: border-box;
}

.shop-icon{
	width:130px;
	position:relative;
	top:80px;
	right:30px;
	z-index:2;
}

.flex-big-wrapper, .top-flex, .two-photo, .tencho-box{
	width:800px;
	margin:auto;
	display:flex;
	justify-content: space-between;
	height: auto;
	flex-wrap: wrap;
}

.flex-big-wrapper{
	align-items: flex-start;
	gap:40px 30px;
}

.top-flex, .tencho-box{
	align-items: center;
}

.title{
	width:700px;
	margin:50px auto;
	padding:20px 0;
}

.top-flex .flex-img, .tencho-img{
	width:35%;
}

.top-flex .flex-caption, .tencho-box .box-caption{
	width:60%;
}

.flex-caption a{
	display:block;
	font-size:1.2rem;
	font-weight:bold;
	text-decoration: underline;
	margin-top:10px;
}

.flex-caption a:hover{
	color:#666;
	transition:.5s;
}

.tencho-box .box-caption .icon{
	width:40%;
	margin-bottom:15px;
}

.second-wrapper{
	box-sizing: border-box;
	padding:40px 0 60px;
	margin:50px 0 0;
}

.first-wrapper .flex-big-wrapper .flex-img, .image-box, .two-photo img, .third-wrapper .tate-box, .third-wrapper .tall-image-box{
	width:calc(100% / 2 - 15px);
}

.third-wrapper .tate-box .image-box{
	width:100%!important;
}

.box-caption{
	box-sizing: border-box;
	padding:15px 10px;
}

.box-caption h2{
	font-size:1.5rem;
	color:#364f72;
	margin-bottom:5px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
}

.third-wrapper{
	box-sizing: border-box;
	padding:60px 0;
}

.third-wrapper .flex-big-wrapper{
	margin-top:50px;
}

.f_img{
	width:600px;
	margin:0 auto 30px;
}

.tencho-box{
	margin:10px auto 60px;
	box-sizing: border-box;
	padding:10px 0 60px;
}

.frames-big{
	padding:50px 0 30px;
}

.pre-box{
	padding-top:50px;
}

/*タブレット*/
@media screen and (max-width: 768px){
	
	.first-wrapper, .flex-big-wrapper, .top-flex, .two-photo{
		width:650px;
	}
	
	.title, .tencho-box, .frames-big{
		width:600px;
	}
	
	.top-flex{
		display:block;
	}
	
	.top-flex .flex-img{
		width:45%;
		margin:0 auto 20px;
	}
	
	.top-flex .flex-caption{
		width:100%;
	}
	
	.frames-big{
		margin:10px auto;
		padding-bottom:40px!important;
	}
	
	.f_img{
		width:500px;
	}
}

/*スマホ*/
@media screen and (max-width:640px){

	.first-wrapper, .title, .flex-big-wrapper, .top-flex, .two-photo{
		width:320px;
	}
	
	
	.first-wrapper .flex-big-wrapper .flex-img:first-of-type{
		margin-bottom:15px;
	}
	
	.top-flex .flex-caption{
		margin-top:20px;
	}
	
	.shop-icon{
		width:80px;
		top:40px;
		right:20px;
	}
	
	.shop-icon, .first-wrapper .flex-big-wrapper{
		margin-top:-10px;
	}
	
	.title{
		margin:30px auto;
	}
	
	.flex-big-wrapper, .top-flex, .two-photo, .tencho-box{
		display:block;
	}
	
	.first-wrapper .flex-big-wrapper .flex-img, .image-box, .two-photo img, .third-wrapper .tate-box, .third-wrapper .tall-image-box, .tencho-box, .frames-big, .f_img, .tencho-box .box-caption{
		width:100%;
	}
	
	.top-flex .flex-img, .tencho-img{
		width:90%;
		margin:auto;
	}
	
	.image-box, .image-big-box, .tall-image-box{
		margin-bottom:30px;
	}
	
	.tencho-box .box-caption .icon{
		width:60%;
		margin:15px 0;
	}
	

}

/* CSS Document */