@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
初期設定
****************************************************************************************************/
.pcOnly {
	display: block;
}
img.pcOnly,
span.pcOnly,
i.pcOnly {
	display: inline;
}
.spOnly {
	display: none;
}

html,body{
	text-align: center;
	font-family : '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'HGS明朝E', 'メイリオ', 'Meiryo', 'ＭＳ Ｐ明朝', 'MS PMincho', serif ;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt" 1;
	scroll-padding-top: 100px;
	background: #150102;
	font-size: 15px;
	min-width: 1300px;
}

* {
	box-sizing: border-box;
}
img {
	vertical-align: top;
}
a {
	color: #000;
	text-decoration: none;
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	transition: opacity 300ms;
}
a:hover {
	opacity: .5;
}



/****************************************************************************************************
wayp
****************************************************************************************************/

.wayp {
	opacity:0;
	-webkit-transform: translate(0, 0) scale(1.05);
	transform: translate(0, 0) scale(1.05);
	-webkit-transition: opacity 1000ms, transform 500ms ease-out;
	transition: opacity 1000ms, transform 500ms ease-out;
}
.wayp.active {
	opacity:1;
	-webkit-transform: translate(0, 0) scale(1.0);
	transform: translate(0, 0) scale(1.0);
}
.fade {
	opacity:0;
	-webkit-transition: opacity 1000ms;
	transition: opacity 1000ms;
}
.fade.active {
	opacity:1;
}
.slide-down {
	opacity:0;
	-webkit-transform: translate(-30px, 0);
	transform: translate(-30px, 0);
	-webkit-transition: opacity 1000ms, transform 1000ms ease-out;
	transition: opacity 1000ms, transform 1000ms ease-out;
}
.slide-up {
	opacity:0;
	-webkit-transform: translate(30px, 0);
	transform: translate(30px, 0);
	-webkit-transition: opacity 1000ms, transform 1000ms ease-out;
	transition: opacity 1000ms, transform 1000ms ease-out;
}
.slide-in {
	opacity:0;
	-webkit-transform: translate(-100px, 0);
	transform: translate(-100px, 0);
	-webkit-transition: opacity 1000ms, transform 500ms ease-out;
	transition: opacity 1000ms, transform 500ms ease-out;
}
.slide-in2 {
	opacity:0;
	-webkit-transform: translate(100px, 0);
	transform: translate(100px, 0);
	-webkit-transition: opacity 1000ms, transform 500ms ease-out;
	transition: opacity 1000ms, transform 500ms ease-out;
}
.slide-down.active,
.slide-up.active,
.slide-in.active,
.slide-in2.active {
	opacity:1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.delay1 { transition-delay: 100ms; }
.delay2 { transition-delay: 200ms; }
.delay3 { transition-delay: 300ms; }
.delay4 { transition-delay: 400ms; }
.delay5 { transition-delay: 500ms; }
.delay6 { transition-delay: 600ms; }
.delay7 { transition-delay: 700ms; }
.delay8 { transition-delay: 800ms; }
.delay9 { transition-delay: 900ms; }
.delay10 { transition-delay: 1000ms; }



/****************************************************************************************************
header
****************************************************************************************************/
#header {
	position: absolute;
	left:0;
	top:0;
	padding: 40px;
	z-index:2000;
}



/****************************************************************************************************
main
****************************************************************************************************/
#main {
	position: relative;
}
.main-img {
	position: relative;
}
.main-img .logo {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	padding-top: 86px;
	z-index: 10;
}
.main-img .logo::before {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 65px;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	background: #FFF;
	opacity: .2;
}
.main-img .logo div {
	opacity: .2;
}
.main-img .logo h1,
.main-img .logo p {
	margin-top: 26px;
	color: #FFF;
	font-size: 2.4rem;
	font-weight: normal;
	letter-spacing: 0.15em;
}
#main2.main-img .logo::before,
#main4.main-img .logo::before {
	opacity: .8;
}
#main2.main-img .logo div,
#main4.main-img .logo div {
	opacity: .8;
}
#main1.main-img .logo h1,
#main1.main-img .logo p,
#main3.main-img .logo h1,
#main3.main-img .logo p {
	background: linear-gradient(180deg, #C8BB9B 0%, #958C60 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main-img figure img {
	object-fit: cover;
	width: 100%;
	height: 100vh;
}

#anchor {
	position: absolute;
	left: calc(50%);
	top: calc(50%);
	transform: translate(-50%,-50%);
	z-index: 1000;
}
#anchor ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 14px 15px;
	width: 690px;
	margin: auto;
}
#anchor ul + ul {
	margin-top: 15px;
}



/****************************************************************************************************
contents
****************************************************************************************************/
#contents {
	padding: 80px 0 120px 0;
	background-image: linear-gradient(90deg, #150102 0%, #37271E 50%, #150102 100%);
}
#sec-ttl {
	margin-bottom: 40px;
	padding-bottom: 40px;
	color: #FFF;
	background: url(../img/bar.png) no-repeat center bottom;
	background-size: 400px 3px;
}
#sec-ttl h2 {
	font-size: 3.066rem;
	letter-spacing: 0.2em;
}
#sec-ttl div {
	margin-top: 0.8em;
	font-size: 1.066rem;
	letter-spacing: 0.2em;
}

#bukken-list {
	width: 1280px;
	margin: auto;
}
.bukken {
	position: relative;
	padding: 60px 50px 50px 50px;
	background: #FFF;
	text-align: left;
}
.bukken + .bukken {
	margin-top: 70px;
}
.area {
	position: absolute;
	left: 0;
	top: 0;
}
.bukken-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 30px;
}
.bukken-info {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 25px;
}
.bukken-text h3 {
	font-size: 1.6rem;
}
.bukken-text p {
	margin-top: 10px;
	font-size: 0.933rem;
	line-height: 1.5;
}
.bukken-text dl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 6px;
	margin-top: 12px;
	font-size: 0.866rem;
	line-height: 1.5;
}
.bukken-text dl + dl {
	margin-top: 4px;
}
.bukken-text dl dt {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 60px;
	border: 1px solid rgba(146,117,81,.5);
	color: #937652;
}
.bukken-btn {
	margin-top: 20px;
}
.bukken-btn ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 7px;
}
.bukken-btn ul li a {
	display: block;
	box-shadow: 3px 3px 4px rgba(0,0,0,.25);
}
.bukken-img {
	margin-top: 20px;
}
.bukken-right {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.bukken-plan {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.bukken-plan a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background: #F5F4F5;
	box-shadow:
		inset 5px 5px 5px rgba(0,0,0,.1),
		inset -5px -5px 5px rgba(0,0,0,.1);
}



/****************************************************************************************************
footer
****************************************************************************************************/
#footer {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 25px 50px;
	background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(150,101,70,1) 100%);
	text-align: left;
}
#copyright {
	flex: 1;
	font-size: 0.8rem;
}




@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	初期設定
	****************************************************************************************************/
	html,
	body {
		min-width: initial;
		min-width: auto;
		scroll-padding-top: 0;
		font-size: 3.466vw;
	}
	img {
		width:100%;
		height:auto;
	}
	a {
		-webkit-transition:none;
		transition:none;
	}
	a:hover {
		opacity:1;
	}
	.pcOnly,
	img.pcOnly,
	span.pcOnly,
	i.pcOnly {
		display:none;
	}
	.spOnly {
		display:block;
	}
	span.spOnly {
		display:inline;
	}
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	
	.wayp {
		opacity:0;
		-webkit-transform: translate(0, 3vw);
		transform: translate(0, 3vw);
		-webkit-transition: all 700ms ease-out;
		-moz-transition: all 700ms ease-out;
		transition: all 700ms ease-out;
	}
	.slide-down {
		opacity:0;
		-webkit-transform: translate(-3vw, 0);
		transform: translate(-3vw, 0);
		-webkit-transition: all 500ms ease-out;
		transition: all 500ms ease-out;
	}
	.slide-up {
		opacity:0;
		-webkit-transform: translate(3vw, 0);
		transform: translate(3vw, 0);
		-webkit-transition: all 500ms ease-out;
		transition: all 500ms ease-out;
	}
	.slide-in {
		opacity:0;
		-webkit-transform: translate(-10vw, 0);
		transform: translate(-10vw, 0);
		-webkit-transition: opacity 1000ms, transform 500ms ease-out;
		transition: opacity 1000ms, transform 500ms ease-out;
	}
	.slide-in2 {
		opacity:0;
		-webkit-transform: translate(10vw, 0);
		transform: translate(10vw, 0);
		-webkit-transition: opacity 1000ms, transform 500ms ease-out;
		transition: opacity 1000ms, transform 500ms ease-out;
	}
	.delay1 { transition-delay: 100ms; }
	.delay2 { transition-delay: 200ms; }
	.delay3 { transition-delay: 300ms; }
	.delay4 { transition-delay: 400ms; }
	.delay5 { transition-delay: 500ms; }
	.delay6 { transition-delay: 600ms; }
	.delay7 { transition-delay: 700ms; }
	.delay8 { transition-delay: 800ms; }
	.delay9 { transition-delay: 900ms; }
	.delay10 { transition-delay: 1000ms; }
	
	
	
	/****************************************************************************************************
	header
	****************************************************************************************************/
	#header {
		padding: 4vw;
	}
	#wakohre {
		width: 20vw;
	}
	
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	.main-img .logo {
		padding-top: 9vw;
	}
	.main-img .logo::before {
		width: 2vw;
		height: 6vw;
	}
	.main-img .logo div {
		width: 36vw;
		margin: auto;
	}
	.main-img .logo h1,
	.main-img .logo p {
		margin-top: 6vw;
		font-size: 1.6rem;
		letter-spacing: 0;
	}
	
	#anchor {
		width: 100%;
	}
	#anchor ul {
		gap: 2vw;
		width: 100%;
	}
	#anchor ul + ul {
		margin-top: 2vw;
	}
	#anchor ul li {
		width: 45vw;
	}
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#contents {
		padding: 10vw 4vw 10vw 4vw;;
	}
	#sec-ttl {
		margin-bottom: 5vw;
		padding-bottom: 5vw;
		background-size: 50vw 0.5vw;
	}
	#sec-ttl h2 {
		font-size: 2rem;
	}
	#sec-ttl div {
		font-size: 0.866rem;
	}
	
	#bukken-list {
		width: 100%;
	}
	.bukken {
		position: relative;
		padding: 9vw 4vw 4vw 4vw;
	}
	.bukken + .bukken {
		margin-top: 8vw;
	}
	.area img {
		width: auto;
		height: 5vw;
	}
	.bukken-block {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 4vw;
	}
	.bukken-info {
		display: block;
	}
	.bukken-info figure {
		float: right;
		width: 30vw;
		margin-left: 2vw;
	}
	.bukken-text {
	}
	.bukken-text h3 {
		font-size: 1.2rem;
	}
	.bukken-text p {
		margin-top: 2vw;
		font-size: 0.8rem;
	}
	.bukken-text dl {
		margin-top: 3vw;
		font-size: 0.733rem;
	}
	.bukken-text dl + dl {
		margin-top: 1vw;
	}
	.bukken-text dl dt {
		width: 13vw;
	}
	.bukken-text dl dd {
		flex: 1;
	}
	.bukken-btn {
		margin-top: 20px;
	}
	.bukken-btn ul {
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 1vw;
	}
	.bukken-btn ul li {
		width: 41.5vw;
	}
	.bukken-btn ul li a {
		display: block;
		box-shadow: 0.5vw 0.5vw 0.5vw rgba(0,0,0,.25);
	}
	.bukken-img {
		margin-top: 4vw;
	}
	.bukken-plan a {
		box-shadow:
			inset 1vw 1vw 1vw rgba(0,0,0,.1),
			inset -1vw -1vw 1vw rgba(0,0,0,.1);
	}
	
	
	
	/****************************************************************************************************
	footer
	****************************************************************************************************/
	#footer {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 4vw;
		padding: 4vw 4vw;
	}
	#copyright {
		flex: 1;
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		font-size: 0.666rem;
	}
	#wadakohsan {
		width: 40vw;
		margin: auto;
	}
}

@media screen and (max-width: 960px) and (orientation: landscape) {
	
	
	
	/****************************************************************************************************
	float
	****************************************************************************************************/
	#pagetop {
		width: 5vw;
	}
	
	
	
}