@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	font-family: 'Noto Serif JP', serif;
}

header {
	display: flex;
	justify-content: center;
}

a {
	color: #000000;
	text-decoration: none;
}

nav ul {
	display: flex;
	justify-content: space-between;
	width: 17em;
	padding: 0;
	margin-top: 32px;
}

li {
	list-style-type: none;
}

nav ul li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    border-bottom: solid 2px transparent;
    padding-bottom: 10px;
}
nav ul li a::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #c99a47;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}
nav ul li a:hover::after {
    transform: scale(1, 1);
}

h1 {
	text-align: center;
	margin: 0;
    position: relative;
    z-index: 1;
}
h2 {
	letter-spacing: 0.2em;
	margin: 2em 0;
}
h3 {
	letter-spacing: 0.2em;
}

#top_ctr {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
    padding-bottom: 50px;
}
#top_box {
	display: flex;
}
#top_box div {
	width: 50%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#greeting_box p {
	line-height: 1.75;
    letter-spacing: 1px;
}

#org_area {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-position: center bottom;
	background-repeat: no-repeat;
    box-shadow: 0 -50px 20px rgba(255,255,255,1);
}

#mov_area {
	display: flex;
	justify-content: center;
}
#mov_area div:last-child img {
	transition-duration: 0.3s;
}
#mov_area div:last-child img:hover {
	filter: saturate(200%);
	transition-duration: 0.3s;
}

#info_ctr {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.info_box {
	background-color: #f8f8f8;
	border: 1px solid #e6e6e6;
}
.info_box h3 {
	line-height: 2;
	border-bottom: 1px solid #000000;
}
.info_box ul {
	padding: 0;
}
.info_box ul li {
	line-height: 2;
}
.info_box caption {
    padding: 5px;
    text-align: left;
    font-weight: 700;
    font-size: .9em;
}
.info_box th {
    text-align: right;
    font-weight: 100;
}
.info_box th,
.info_box td {
    padding: 5px;
}
#contact_box p span {
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#bnr_area {
	display: flex;
	justify-content: center;
}
#bnr_area .img_wrap img {
	width: 100%;
	display: block;
	transition-duration: 0.3s;
}
#bnr_area .img_wrap img:hover {
	transform: scale(1.1);
	transition-duration: 0.3s;
}

footer {
	margin: 1em auto;
}
footer ul {
	display: flex;
	justify-content: space-between;
	width: 17em;
	padding: 0;
}

/*SP版*/
@media screen and (max-width: 750px) {
	.display_pc {
		display: none;
	}
	
	h1 img {
		max-width: 344px;
		width: 100%;
	}

	#top_ctr {
		background-image: url("../image/top_bg_sp.png");
		margin-top: -20px;
	}

	#top_box {
		max-width: 420px;
		width: 100%;
		margin-top: 50px;
		margin-bottom: 40px;
	}
	#top_box div:first-child img {
		max-width: 219px;
		width: 95%;
	}
	#top_box div:last-child img {
		max-width: 194px;
		width: 90%;
    	padding-right: 5%;
	}

	#greeting_box {
		max-width: 420px;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	#org_area {
		height: 480px;
		background-image: url("../image/org_bg_sp.png");
		padding-left: 20px;
		padding-right: 20px;
	}
	#org_area img {
		max-width: 397px;
		width: 100%;
	}
	
	#mov_area img {
		max-width: 240px;
		width: 100%;
	}
	
	.info_box {
		max-width: 418px;
		width: 100%;
		margin-bottom: 10px;
	}
	.info_box h3 {
		margin: 15px 15px auto;
	}
	.info_box ol,
	.info_box ul {
		margin: 0.5em 15px 15px;
		padding: 0;
	}	
	.info_box:last-child {
		margin-bottom: 35px;
	}
	#contact_box {
		max-width: 420px;
		width: 100%;
	}
	#contact_box p {
		margin: 10px 0 10px 15px;
	}

	#bnr_area .img_wrap {
		overflow: hidden;
		max-width: 240px;
		max-height: 100px;
	}
	
	footer {
		display: flex;
		justify-content: center;
	}
	footer div {
		max-width: 420px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/*PC版*/
@media screen and (min-width: 751px) {
	.display_sp {
		display: none;
	}
	
	nav {
		max-width: 1000px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	nav ul {
		margin-bottom: 0;
	}
	
	h1 img {
		max-width: 976px;
		width: 100%;
	}
	
	h2 {
		font-size: 2em;
	}

	#top_ctr {
		background-image: url("../image/top_bg_pc.png");
		margin-top: -40px;
	}

	#top_box {
		max-width: 1000px;
		width: 100%;
		margin-top: 100px;
		margin-bottom: 50px;
	}
	#top_box div:first-child img {
		max-width: 448px;
		width: 100%;
	}
	#top_box div:last-child {
		justify-content: center;
	}
	#top_box div:last-child img {
		max-width: 420px;
		width: 100%;
	}

	#greeting_box {
		max-width: 600px;
		width: 100%;
	}

	#org_area {
		height: 904px;
		justify-content: center;
		background-image: url("../image/org_bg_pc.png");
	}
	#org_area img {
		max-width: 560px;
		width: 100%;
	}
	
	#mov_area img {
		max-width: 680px;
		width: 100%;
	}
	
	.info_box {
		max-width: 998px;
		width: 100%;
		margin-bottom: 25px;
	}
	.info_box h3 {
		margin: 30px 30px auto;
	}
	.info_box ul {
		margin: 0.5em 30px 30px;
		padding: 0;
	}	
	.info_box:last-child {
		margin-bottom: 80px;
	}
	#contact_box {
		max-width: 1000px;
		width: 100%;
		margin-bottom: 25px;
	}
	#contact_box p {
		margin-left: 30px;
	}

	#bnr_area .img_wrap {
		overflow: hidden;
		max-width: 680px;
		max-height: 280px;
	}
	
	footer {
		display: flex;
		justify-content: center;
	}
	footer div {
		max-width: 1000px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	footer img {
		align-self: flex-start;
	}
}

/* 効果ここから */

.effect-fade {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1.5s;
}

.effect-fade.effect-scroll {
    opacity: 1;
    transform: translate(0, 0);
}

.effect-fade2 {
    opacity: 0;
    transition: all 2s;
}

.effect-fade2.effect-scroll {
    opacity: 1;
}

/* 効果ここまで */


.more {
	display: none;
}
