@charset "UTF-8";

picture.shutter{
	position: fixed;
	inset: 0;
	z-index: 10010;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 1s ease,
		transform 1.2s cubic-bezier(.77,0,.18,1);

	pointer-events: none;

	img{
		display: block;
		width: 320px;
		height: 320px;
	}
}

picture.shutter.is-open {
	opacity: 1;
	transform: translateY(-100%);
}
main {
	background: url(/images/top/main.jpg);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 70dvh;
	margin: 0 auto;
	padding: 58px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;

	.inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		.catch{
			color: var(--colorW);
			line-height: 1.8em;
			text-align: center;
			padding: 0 20px 0 0;

			h3{
				border: 1px solid var(--colorW);
				font-size: var(--fonr18--22);
				width: fit-content;
				margin: 0 auto;
				padding: 5px 20px;
			}
			h2{
				border-bottom: 1px solid var(--colorW);
				font-size: var(--font50-60);
				margin: 30px 0 40px;
				padding: 0 0 30px;
			}
			h4{
				font-family: var(--font03);
				font-size: var(--font50-60);
			}
		}
	}
}
.contents{
	.title{
		width: 100%;
		margin: 0 auto 50px;
		position: relative;

		h2{
			background: var(--colorBack);
			font-family: var(--font02);
			font-size: var(--font24-27);
			width: fit-content;
			margin: 0 auto;
			padding: 10px 50px;
			position: relative;
			z-index: 1;
		}

		&:before{
			content: "";
			background: var(--colorB);
			height: 1px;
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0,-50%);
		}
	}
	.whitebox{
		background: var(--colorW);
		border: 2px solid var(--colorB);
		border-radius: 6px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
		max-width: var(--width03);
		width: 100%;
		margin: 30px auto 20px;
		padding: 10px 20px;
	}
	.linksbutton{
		background: #F0DBB8;
		background: linear-gradient(120deg, rgba(240, 219, 184, 1) 0%, rgba(174, 134, 49, 1) 100%);
		box-shadow: 2px 2px 8px 0 #ccc;
		border-radius: 6px;
		color: #fff;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180px;
		height: 40px;

		&:hover{
			background: #F0DBB8;
			background: linear-gradient(120deg, rgba(240, 219, 184, 1) 0%, rgba(96, 56, 19, 1) 100%);
		}
	}
}
#grandmenu{
	.inner{
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto 5%;

		a{
			width: calc(100% / 3);
			height: calc(85vw / 3);
			position: relative;

			&:nth-child(1){
				background:url(/images/top/grandmenu01.jpg);
				background-size: cover;
				background-position: center;
			}

			&:nth-child(2){
				background:url(/images/top/grandmenu02.jpg);
				background-size: cover;
				background-position: center;
			}

			&:nth-child(3){
				background:url(/images/top/grandmenu03.jpg);
				background-size: cover;
				background-position: center;
			}

			h3{
				background: var(--colorB);
				color: var(--colorW);
				writing-mode: vertical-rl;
  				text-orientation: upright;
				display: flex;
				height: 100%;
				padding: 20px 10px;
			}
		}

	}
}
#feature{
	.inner{
		max-width: var(--width01);
		width: 95%;
		margin: 0 auto;

		div.feature{
			background: var(--colorW);
			border: 1px solid var(--colorB);
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto 30px;

			dl{
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;
				width: 55%;

				dt{
					border-bottom: 1px solid var(--colorB);
					font-size: var(--font20-24);
					line-height: 1.4em;
					position: relative;
					display: flex;
					align-items: center;

					&:before{
						content:"";
						position: absolute;
						left: 0;
						transform: translate(0,-50%);
					}
				}
				dd{
					padding: 10px 20px;
				}
			}
			
			picture{
				width: 45%;
				max-height: 270px;
				overflow: hidden;

				img{
					height: 100%;
					object-fit: cover;
				}
			}

			&.feature01 {
				dt{
					padding: 0 0 20px 150px;

					&:before{
						content:"";
						background: url(/images/common/icon_feature01.svg);
						background-size:100%;
						background-repeat: no-repeat;
						width: 90px;
						height: 35px;
						top:30%;
						left: 20px;
					}
				}
			}
			&.feature02 {
				dl{
					order: 2;
					dt{
						padding: 20px 0 20px 80px;

						&:before{
							content:"";
							background: url(/images/common/icon_feature02.svg);
							background-size:100%;
							background-repeat: no-repeat;
							width: 36px;
							height: 35px;
							top: 50%;
							left: 20px;
						}
					}
				}
				picture{
					order: 1;
				}
			}
		}
		
	}
}
#news{
	.inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1%;
		max-width: var(--width03);
		margin: 0 auto 5%;

		a{
			width: calc(90% / 4);
			height: calc(90% / 4);
			overflow: hidden;
			
			picture{
				display: block;
				width: 100%;
				height: 240px;
				
				img{
					height: 100%;
					object-fit: cover;
				}
			}
		}

		.instagram-item {
			position: relative;
			display: block;
			overflow: hidden;
		}

		.instagram-item picture {
			display: block;
		}

		.instagram-item img {
			width: 100%;
			display: block;
		}

		.instagram-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0,0,0,0.7);

			color: #fff;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			padding: 20px;

			opacity: 0;
			transition: opacity .3s ease;
		}

		.instagram-item:hover .instagram-overlay {
			opacity: 1;
		}

		.instagram-caption {
			font-size: 14px;
			line-height: 1.6;
			margin-bottom: 10px;

			overflow: hidden;

			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			line-clamp: 3;
		}

		.instagram-like {
			font-size: 16px;
			font-weight: bold;
		}
	}
	.bottom{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		h3{
			width: 100%;
			margin: 0 auto 20px;

			span{
				border-bottom: 1px solid var(--colorB);
				display: block;
				width: fit-content;
				margin: 0 auto;
				position: relative;
			}
		}
		a{
			width: 30px;
            margin: 0 10px;
		}
	}
}
#guide{
	background: var(--colorBack);
	padding: 50px 0 20px;
	position: relative;
	position: sticky;
  	top: 0;
	z-index: 1;

	h2{
		font-family: var(--font02);
		font-size: var(--font24-27);
		text-align: center;
		width: 100%;
		margin: 0 auto 5%;
	}

	.inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2%;
		max-width: var(--width03);
		width:95%;
		margin: 0 auto 5%;
		padding: 0;

		a{
			border: 1px solid var(--colorB);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: calc(94%  / 4);
			margin: 0 0 0;
			padding: 10px;

			img{
				width: 90%;
			}
			span{
				font-size: 0.7rem;
			}
		}
	}

	.bottom{
		max-width: var(--width03);
		width:95%;
		margin: 0 auto 5%;
		padding: 0;

		h3{
			border-bottom: 1px solid var(--colorB);
			text-align: center;
			width: 100%;
			margin: 0 auto 20px;
			padding: 0 0 20px;
		}
		p{
			text-align: center;
			width: 100%;
			margin: 0 auto 20px;
		}
		ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: start;
			width: 90%;
			margin: 0 auto;

			li{
				padding: 0 10px;
				img{
					width: 90%;
					
				}
			}
		}
	}
}
#access{
	background: var(--colorBack);
	padding: 50px 0 5%;
	position: relative;
	position: sticky;
  	top: 0;
    z-index: 2;

	.title{
		margin: 0 auto 20px;
	}

	p{
		text-align: center;
		width: 100%;
		margin: 20px auto 50px;
	}

	iframe{
		width: 100%;
		height: 580px;
	}
}

@media screen and (max-width: 768px) {
	main{
		background: url(/images/top/main_sp.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		height: 70dvh;
		overflow: hidden;

		.catch{
			margin: 0 0 20px;
			padding: 0;

			h2{
				margin: 20px 0 20px;
				padding: 0 0 20px;
			}
		}

		picture{
			width: 36%;
			img{
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.contents{
		.title{
			margin: 0 auto 30px;
		}
	}

	#grandmenu{
		margin: 0 0 30px;
		padding: 20px 0 0;

		.inner{
			margin: 0 auto 0;
			
			a{
				width: 100%;
				height: 42vw;
			
				h3{
					font-size: 0.9rem;
					writing-mode: unset;
					text-orientation:unset;
					width: 50%;
					height: unset;
					padding: 10px 20px;
				}
			}
		}
	}

	#feature{
		padding: 0;

		.inner{
			width: 100%;

			div.feature{
				/* border-top: none; */
				border-right: none;
				border-left: none;
				margin: 0 auto 30px;

				dl{
					width: 100%;
				}
				picture{
					width: 100%;
				}

				&.feature01 {
					dt{
						padding: 20px 20px 20px 130px;

						&:before{
							top:50%;
						}
					}
				}
				&.feature02 {
					dl{
						order: 1;

						dt{
							padding: 20px 20px 20px 70px;
						}
					}
					picture{
						order: 2;
					}
				}

			}
		}

	}

	#news{
		padding: 40px 0;

		.inner{
			a{
				width: calc(90% / 2);
            	height: calc(90% / 2);
				margin: 0 0 10px;
			}
		}

		.bottom{
			h3{
				span{
					font-size: 0.9rem;
					padding: 0 0 10px;
				}
			}
		}
	}

	#guide{
		position: relative;
		.inner{
			a{
				width: calc(94% / 2);
				margin: 0 0 15px;
			}
		}
		.bottom{
			ul{
				li{
					width: calc(100% / 4);
				}
			}
		}
	}
	#access{
		position: relative;
		iframe{
			height: 480px;
		}
	}
}