@charset "utf-8";

	
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
news
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

header {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../img/bg_01.jpg');
}

	header a.instagram {
		display: block;
		width: 36px;
		position: absolute;
		left: 36px;
		top: calc(50% - 20px);
	}
	
	header a.instagram:hover {
		opacity: 0.5;
	}
	
	
		header a.instagram > img {
			width: 100%;
		}
	

div#title_menu {
	height: 100vh;
	min-height: 550px;
	z-index: 5;
	box-sizing: border-box;
	padding: 20vh 0 0;
	display: flex;
	//flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: column;
}

	div#title_menu > img.message {
		display: block;
		width: calc(100% - 100px);
		max-width: 470px;
		margin: 0 auto;
	}
	
	div#title_menu > h1 {
		display: block;
		width: calc(100% - 20px);
		max-width: 640px;
		margin: 0 auto;
	}
	
		div#title_menu > h1 > img {
			width: 100%;
		}
	
	div#title_menu > a {
		display: block;
		width: calc(100% - 20px);
		max-width: 32px;
		margin: 75px auto 25px;
	}
	
		div#title_menu > a > img {
			width: 100%;
		}

/*
	header h1 {
		box-sizing: border-box;
		width: 240px;
		height: 240px;
		position: absolute;
		left: calc(50% - 120px);
		top: calc(50% - 120px);
	}
	
		header h1 > p {
			display: none;
		}
		
		header h1 > img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
*/
@media screen and (max-width:1080px){
	header a.instagram {
		width: 30px;
		left: 30px;
		top: 30px;
	}
}



/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ハンバーガーメニューアイコン
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
header #menu_button {
	position: absolute;
	right: 50px;
	top: calc(50% - 38px);
	display: block;
	width: calc(100% - 40px);
	max-width: 120px;
	padding: 10px 0 5px 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size: 0.7em;
	text-indent.0.1em;
	z-index: 8;
}

	header #menu_button p {
		margin: 15px 0 0 0;
	}
	
	header #menu_button p.active::after {
		content: '閉じる';
		display: inline;
	}
	header #menu_button p.close::before {
		content: '開く';
		display: inline;
	}

.menu-trigger,
.menu-trigger span {
	display: block;
	transition: all .4s;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}
.menu-trigger {
	position: relative;
	width: 76px;
	height: 24px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
}

.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 11px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}

.menu-trigger span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #fff;
	transition: all .4s;
}

.menu-trigger.active {
	width: 36px;
}

.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(20px) scale(0);
}
.menu-trigger.active span:nth-of-type(2) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2)::after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-20px) scale(0);
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
サイドメニュー
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
header nav > div {
	position: fixed;
	top: 0;
	right: -400px;
	display: block;
	width: 100%;
	max-width: 400px;
	height: 100vh;
	box-sizing: border-box;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 7;
}

	header nav > div > div {
		height: 100vh;
		background-color: rgba(0,0,0,0.65);
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	
	header nav > div > div > div {
		padding: 40px 0 60px 0;
		height: 100vh;
		max-height: 700px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}
	
	header nav p {
		width: 100%;
		line-height: 1.5em;
		display: flex;
		align-items: center;
		padding: 0 0 0 60px;
		box-sizing: border-box;
	}
	
	header nav a {
		color: #fff;
		font-size: 1.1em;
	}
	
	header nav p.contact {
		padding: 0;
		justify-content: center;
	}
	
		header nav p.contact a {
			display: block;
			width: 100%;
			padding: 60px 10px;
			text-align: center;
			background-color: #237d26;
			box-sizing: border-box;
			transition: 0.2s;
		}
		
		header nav p.contact a:hover {
			background-color: #fff;
			color: #237d26;
			text-decoration: none;
		}
	
.nav_menu_1.active {
	animation: nav_animation_1_1 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	right: 0;
}

	.nav_menu_1.active p {
		animation: nav_animation_2 1.2s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		opacity: 1.0;
	} 

@keyframes nav_animation_1_1 {
	0% {
		right: -400px;
	}
	60% {
		right: 0;
	}
}


@keyframes nav_animation_2 {
	0% {
		opacity: 0.0;
	}
	50% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

.nav_menu_1.close {
	animation: nav_animation_3_1 1.2s ;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	right: -400px;
}

	.nav_menu_1.close p {
		animation: nav_animation_4 1.2s ;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		opacity: 0;
	}


@keyframes nav_animation_3_1 {
	0% {
		right: 0;
	}
	50% {
		right: 0;
	}
	100% {
		right: -400px;
	}
}
@keyframes nav_animation_4 {
	0% {
		opacity: 1.0;
	}
	60% {
		opacity: 0.0;
	}
}

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

header nav > div {
	max-width: 300px;
}

	header nav a {
		font-size: 1.0em;
	}

	header nav p {
		padding: 0 0 0 30px;
	}

		header nav p.contact a {
			padding: 40px 10px;
		}

.nav_menu_1.active {
	right: 0;
}
@keyframes nav_animation_1_1 {
	0% {
		right: -300px;
	}
	60% {
		right: 0;
	}
}
@keyframes nav_animation_3_1 {
	0% {
		right: 0;
	}
	50% {
		right: 0;
	}
	100% {
		right: -300px;
	}
}

}

@media screen and (max-width: 600px) {
	header #menu_button {
		right: 30px;
		top: 30px;
		max-width: 60px;
	}
	
	.menu-trigger {
		width: 60px;
	}
	
	a#insta_button {
		width: 30px;
		top: 30px;
		left: 30px;
	}
}

@media screen and (max-width: 500px) {
	header #menu_button {
		right: 20px;
		top: 20px;
		max-width: 40px;
	}
	
	.menu-trigger {
		width: 40px;
	}
}

ul#slider_button {
	position:absolute;
	left:0;
	bottom:20px;
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	align-items: center;
	width: 100%;
}

		ul#slider_button > li > a {
			display:block;
			width:50px;
			height:3px;
			background-color:rgba(255,255,255,0.4);
			margin:0 2px;
		}
		
		ul#slider_button > li > a.active {
			background-color:#fff;
		}
		
		ul#slider_button > li > a#slide_prev,
		ul#slider_button > li > a#slide_next {
			width: 26px;
			height: 15px;
			box-sizing: border-box;
			background: none;
			border-style: solid;
		}
		
		ul#slider_button > li > a#slide_prev {
			border-width: 9px 26px 9px 0;
			border-color: transparent #fff transparent transparent;
			margin: 0 15px 0 0;
		}
		
		ul#slider_button > li > a#slide_next {
			border-width: 9px 0 9px 26px;
			border-color: transparent transparent transparent #fff;
			margin: 0 0 0 15px;
		}

@media screen and (max-width: 1080px) {
	header h1 {
		width: 200px;
		height: 200px;
		left: calc(50% - 100px);
		top: calc(50% - 100px);
		background-size: 200px auto;
	}
}

@media screen and (max-width: 750px) {
	header h1 {
		width: 160px;
		height: 160px;
		left: calc(50% - 80px);
		top: calc(50% - 80px);
		background-size: 160px auto;
	}
}

@media screen and (max-width: 640px) {
		ul#slider_button > li > a {
			width:30px;
		}
}

@media screen and (max-width: 400px) {
	ul#slider_button {
		display: none;
	}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
news
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#news {
	padding: 25px 0;
	box-sizing: border-box;
	background-color: #ccc;
}

	section#news > div {
		width: 100%;
		max-width: 540px;
		margin: 0 auto;
		border-right: 1px #000 solid;
		border-left: 1px #000 solid;
		box-sizing: border-box;
		padding: 0 0 30px;
	}


	section#news h2 {
		font-size: 2.2em;
		text-align: center;
		margin: 0 auto 60px auto;
	}
	
		section#news h2 > p {
			font-size: 0.5em;
			letter-spacing: 0.05em;
		}
		
	section#news > div > p {
		margin: 40px auto 0;
		padding: 0 0 40px;
		text-align: center;
	}
	
	section#news dl {
		width: calc(100% - 20px);
		max-width: 400px;
		margin: 20px auto 0 auto;
		display: flex;
		flex-wrap: wrap;
		font-size:1.1em;
		letter-spacing: 0.05em;
	}
	
		section#news dl dt {
			font-weight: normal;
			width: 120px;
			text-align: center;
		}
		
		section#news dl dd {
			width: calc(100% - 120px);
		}
		
			section#news dl dd a {
				font-weight: normal;
			}

@media screen and (max-width:400px){
	section#news h2 {
		margin: 0 auto 40px auto;
	}
	
	section#news dl {
		font-size: 1.0em;
	}
	
		section#news dl dt,
		section#news dl dd {
			width: 100%;
			text-align : left;
		}
	
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
menu
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#menu {
	background-color: #ccc;
}

	section#menu > div {
		width: 100%;
		max-width: 1620px;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		max-width: 1620px;
		justify-content: center;
	}

		section#menu > div > a {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: 33.3333%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			min-height: 415px;
			transition: 0.1s;
			color: #fff;
			text-decoration: none;
			font-size: 2.8em;
			text-align: center;
			letter-spacing: 0.05em;
			text-indent: 0.05em;
		}
		
		section#menu > div > a:hover {
			opacity: 0.5;
		}
		
		section#menu > div > a:nth-child(1) {
			width: 100%;
			background-image: url('../img/index_04.jpg');
			flex-direction: column;
			margin: 0 0 70px;
		}
		
			section#menu > div > a > p {
				width: 100%;
				margin: 20px 0;
			}
			
			section#menu > div > a > p:first-child {
				margin: 0;
			}
			
			section#menu > div > a > p:last-child {
				font-size: 1.3em;
				margin: 0;
			}
			
				section#menu > div > a > p > br.sp {
					display: none;
				}
			
			
		
		
		section#menu > div > a:nth-child(2) {
			background-image: url('../img/index_01.jpg');
		}
		
		section#menu > div > a:nth-child(3) {
			width: calc(100% - 66.6666%);
			background-image: url('../img/index_05.jpg');
		}
		
		section#menu > div > a:nth-child(4) {
			background-image: url('../img/index_02.jpg');
		}
		
		
		
			section#menu > div > a > img {
				width: calc(100% - 20px);
				max-width: 380px;
			}
	

@media screen and (max-width:800px){
				section#menu > div > a > p > br.sp {
					display: inline;
				}
}

@media screen and (max-width:750px){
		section#menu > div > a:nth-child(1),
		section#menu > div > a:nth-child(2),
		section#menu > div > a:nth-child(3),
		section#menu > div > a:nth-child(4) {
			width: 50%;
			min-height: 250px;
			font-size: 2.0em;
			margin: 0;
		}
		
		section#menu > div > a:nth-child(1) {
			font-size: 1.4em;
		}
		
			section#menu > div > a > img {
				max-width: 200px;
			}
}

@media screen and (max-width:550px){
		section#menu > div > a:nth-child(1),
		section#menu > div > a:nth-child(2),
		section#menu > div > a:nth-child(3),
		section#menu > div > a:nth-child(4) {
			width: 100%;
		}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
access
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

section#access {
	padding: 65px 0 0;
	box-sizing: border-box;
	background-color: #ccc;
}

	section#access > div {
		width: calc(100% - 20px);
		max-width: 640px;
		margin: 0 auto;
	}


	section#access h2 {
		font-size: 2.2em;
		text-align: center;
		margin: 0 auto 60px auto;
	}
	
	section#access p {
		margin: 15px auto;
	}

section#access > #map {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 800px;
	margin: 85px auto 0;
}