@charset "utf-8";
:root{
	--font-got:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

/* INITIALIZE ********************************************************* */
*,*:after,*:before{ font-weight:inherit;font-size:inherit;margin:0;padding:0;box-sizing:border-box;}
table{ border-collapse:collapse;border-spacing:0; }
th{ text-align:left; }
ul,ol{ list-style-type:none; }
img{ border:0;vertical-align:top;line-height:1; }

/* FONT COSTORMIZE **************************************************** */
div,blockquote,ul,dl,table,th,td,h2,h3,h4{ line-break:strict; }
strong,b,strong *,b *{ font-weight:bold;font-style:normal; }
figure{ margin:0; }
input,select,textarea{ font-size:100%; }
input,select{ vertical-align:middle; }
body{
	font-size:min(4vw,16px);
	font-weight:500;
	font-family:"Noto Serif JP","游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS Mincho", serif;
	background:#fff;
	color:#333;
	overflow-x:hidden;
}
a{
	color:#06f;
	@media(any-hover:hover){
		&:hover{
			color:#39f;
		}
	}
}
/* Base layout *********** */
html{
	scroll-behavior:smooth;
}
html,body{
	scroll-padding-top:100px;
	@media(min-width:1024px){
		scroll-padding-top:60px;
	}
}
.main{
	padding-top:110px;
	@media(min-width:1024px){
		padding-top:60px;
	}
}
img{
	width:100%;
	height:auto;
}

/* header */
.header{
	position:fixed;
	z-index:90;
	top:0;
	left:0;
	width:100%;
	height:60px;
}
.header__inner{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	background:#fff;
	height:100%;
	& a{
		display:block;
		text-decoration:none;
		color:#000;
	}
	.header__logo{
		width:min(20vw, 110px);
		height:100%;
			display:flex;
			align-items:center;
			margin-inline:2%;
		}
	.header__title{
		font-size:min(3.6vw,20px);
		font-weight:600;
		letter-spacing:.1em;
	}
}
.header__nav{
	width:100%;
	font-size:12px;
	font-family:var(--font-got);
	& ul{
		position:absolute;
		top:60px;left:0;z-index:-1;
		display:flex;
		justify-content:space-between;
		width:100%;
		background:#eee;
		border-bottom:solid 1px #ccc;
		box-shadow:0 5px 5px rgba(0,0,0,.2);
		@media(max-width:1023px){
			transition:transform .6s;
			.is-down &{
				transform:translateY(-100%);
			}
		}
		& li{
			width:20%;
			&:not(:last-child){
				border-right:solid 1px #ccc;
			}
			& a{
				position:relative;
				display:block;
				height:50px;
				padding:1.1em 0;
				text-align:center;
				font-weight:500;
				color:#000;
				&:before{
					content:"";
					position:absolute;
					bottom:.8em;
					left:calc(50% - .25em);
					width:.5em;
					aspect-ratio:1 / 1;
					transform:rotate(135deg);
					border-top:1.5px solid #666;
					border-right:1.5px solid #666;
				}
			}
		}
	}
	.contact{
		position:fixed;
		top:0;right:0;z-index:10;
		& a{
			display:block;
			width:100px;
			height:60px;
			padding:11px 0 0 40px;
			font-family:var(--font-got);
			background:#c55e1a url(../images/icon_mail.svg) no-repeat 8px center / auto 56%;
			color:#fff;
			text-align:center;
			font-size:11px;
			@media(any-hover:hover){
				transition:filter .5s;
				&:hover{
					filter:brightness(1.2);
				}
			}
			@media(min-width:768px){
				width:120px;
				font-size:12px;
			}
			@media(min-width:1024px){
				background-position:14px center;
			}
		}		
	}
}
@media(min-width:1024px){
	.header{
		height:60px;
		box-shadow:0 5px 5px rgba(0,0,0,.2);
		.header__title{
			font-size:min(2vw,24px);
		}
	}
	.header__nav{
		font-size:min(4vw,14px);
		width:auto;
		height:100%;
		& ul{
			top:auto;left:auto;right:120px;z-index:2;
			width:auto;
			height:100%;
			background:none;
			border:none;
			box-shadow:none;
			transform:none;
			& li{
				width:auto;
				padding:0;
				&:not(:last-child){
					border:none;
				}
				& a{
					margin:0;
					height:100%;
					white-space:nowrap;
					padding:1em 1.5em;
					transition:background-color .5s,color .5s;
					@media(any-hover:hover){
						&:hover{
							background:rgba(0,53,116,.05);
							color:#003574;
						}
					}
				}
			}
		}
	}
}

/* common */
.container{
	width:min(100%,1280px);
	margin-inline:auto;
	padding:min(5%,20px) 4%;/*min(5%,20px);*/
	@media(min-width:768px){
		padding-inline:3%;
	}
}
.title01{
		margin-block:8%;
		text-align:center;
		font-weight:600;
	& i{
		display:inline-block;
		padding:5px;
		letter-spacing:.1em;
		font-style:normal;
		font-size:min(8vw,3em);
	}
}
.title02{
	margin-block:4% 4%;
	font-size:min(5vw,1.6em);
	font-weight:600;
	letter-spacing:.1em;
	@media(min-width:1024px){
		text-align:center;
	}
}
.btn01{
	position:relative;
	display:inline-block;
	width:min(80%,14em);
	height:3em;
	line-height:2.7em;
	background:#c55e1a;
	border-radius:2em;
	font-size:1.4em;
	color:#fff;
	text-decoration:none;
	@media(any-hover:hover){
		transition:filter .5s;
		&:hover{
			color:#fff;
			filter:brightness(1.2);
		}
	}
}
.btn02{
	display:inline-block;
	padding:1.5em .8em 1.5em 2.2em;
	background-color:#666;
	background-repeat:no-repeat;
	background-position:.7em center;
	background-size:1.5em auto;
	font-family:var(--font-got);
	text-decoration:none;
	font-size:.85em;
	line-height:1;
	color:#fff;
	@media(min-width:768px){
		padding-block:1em;
	}
	@media(any-hover:hover){
		transition:background-color .3s;
		&:hover{
			background-color:#333;
			color:#fff;
		}
	}
}

.imgbox{
	display:grid;
	gap:10px;
	width:100%;
	grid-template-columns:repeat(2, 1fr);
	& li{
		grid-column:span 1;
		& img{
			display:block;
			object-fit:cover;
		}
	}
}
.caution{
	& li, & > p{
		position:relative;
		padding-left:1.1em;
		&:before{
			content:"※";
			display:inline;
			position:absolute;
			top:0;left:0;
		}
	}
}
.text-small{
	font-size:.85rem;
}
.flex01{
	@media(min-width:768px){
		display:flex;
		justify-content:space-between;
		& > div,.flex-box{
			width:48%;
		}
	}
}
.flex02{
	@media(min-width:768px){
		display:flex;
		justify-content:space-between;
		& > div,.flex-box{
			width:48%;
		}
	}
}
.telno{
	display:inline-block;
	padding:.2em .8em;
	font-size:2.5em;
	font-family:Arial,sans-serif;
	color:#e9a67f;
	text-decoration:none;
	@media(pointer:fine){
		pointer-events:none; 
		color:#e9a67f;
	}
}
.overlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	z-index:80;
	width:1440px;
	height:100vh;
	background:rgba(0,0,0,.8);
}
.is-overlayActive{
	display:block;
	visibility:hidden;
	opacity:0;
}


/* gotop */
.gotop-btn{
	position:fixed;
	bottom:24px;right:24px;
	z-index:999;
	width:48px;
	height:48px;
	background-color:rgba(0, 0, 0, 0.6);
	border-radius:0;
	cursor:pointer;
	transition:background-color .3s, opacity .3s;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
	animation:fadeIn linear both;
	animation-timeline:scroll();
	animation-range:0px 300px;
	&:after{
		content:"";
		width:0;
		height:0;
		border-left:6px solid transparent;
		border-right:6px solid transparent;
		border-bottom:8px solid #ffffff;
		margin-top:-2px;
	}
	@media(any-hover:hover){
		&:hover{
		background-color:rgba(0, 0, 0, 0.8);
		}
	}
}
@keyframes fadeIn{
	from{ opacity:0; visibility:hidden; }
	to{ opacity:1; visibility:visible; }
}


/* top */
.top{
	background-image:linear-gradient(
		rgba(255, 255, 255, 0.7), 
		rgba(255, 255, 255, 0.7)
    ), 
	url(../images/top_bg.webp);
	background-size:contain;
	background-position:center top;
	background-repeat:no-repeat;
	.top__title{
		padding:3%;
		text-align:center;
		font-size:1.75em;
		font-weight:600;
		letter-spacing:.1em;
		color:#444;
	}
	.container{
		padding:0;
	}
}
@media(min-width:600px){
	.top{
		.container{
			padding:0 min(5%,20px) min(5%,20px);
		}
	}
}
.lead{
	background:#986a4e;
	color:#fff;
	.title{
		margin-block:0 .5em;
		font-size:min(5vw,1.5em);
	}
	.flex-box{
		margin-block:min(5%,20px);
	}
	.imgbox{
		margin-block:5% 0;
		& li{
			position:relative;
			&.size01{
				grid-column:span 2;
			}
		}
		& p{
			position:absolute;
			bottom:0;
			width:100%;
			padding:.3em;
			background:rgba(0,0,0,.5);
			text-align:right;
			font-size:13px;
			line-height:1;
			color:#fff;
		}

	}
	@media(min-width:600px){
		.imgbox{
			grid-template-columns:repeat(3, 1fr);
			gap:min(.6vw,8px);
		}
		.imgbox.op01{
			 grid-template-columns:2.06fr 1fr;
			& li{
				&.size01{
					grid-column:1;
					grid-row:span 2;
				}
				&.size02{
					grid-column:2;
					grid-row:1;
				}
				&.size03{
					grid-column:2;
					grid-row:2;	
				}
			}
		}	
	}
	@media(min-width:768px){
		.container{
			.flex-box{
				position:relative;
				padding-bottom:23%;
			}
			.title{
				font-size:min(2.1vw,22px);
			}
			.title + p{
				font-size:min(1.5vw,14px);
			}
			.imgbox{
				position:absolute;
				width:100%;
				bottom:0;left:0;
				& p{
					font-size:min(1.3vw,12px);
					&.op01{
						letter-spacing:-2px;
					}
				}
			}
		}
	}
}

/* access */
.access{
	background:#ecdfd4;
	color:#000;
	.flex-box{
		margin-bottom:5%;
	}
	.title01{
		color:#7f4f21;
	}
	.access__info{
		container-type:inline-size;
		width:100%;
		margin-bottom:2em;
		color:#000;
		.access__line{
			padding:.3em;
			line-height:1;
			background:rgba(0,0,0,.1);
			font-size:.9em;
		}
		& b{
			padding-inline:.1em;
			font-size:2em;
			color:#a40000;
		}
		& br{
			display:none;
		}
		.access__step{
			font-size:1.125em;
			@container(min-width:440px){
				display:inline-block;
				padding-right:1em;
			}
		}
		.access__dist{
			display:inline-block;
			font-size:.875em;
		}
		.access__main{
			margin-left:.5rem;
			border-bottom:solid 1px #666;
			font-weight:600;
		}
		.access__sub{
			margin-left:.5rem;
			padding:0 0 .5em 0;
			font-size:.875em;
			font-weight:600;
			& + .access__sub{
				border-top:dotted 1px #666;
			}
			.access__text{
				margin-top:1em;
				font-size:0.9em;
			}
			& b{
				color:#7f4f21;
			}
			
		}
	}
	@media(min-width:768px){
		.flex01{
			flex-direction:row-reverse;
			justify-content:center;
			& figure{
				width:min(60%,590px);
				margin-left:30px;
			}
			& > div{
				flex:1;
				font-size:min(1.6vw,16px);
			}
		}
	}
}


/* location */
.location{
	background:#ecdfd4;
	color:#000;
	.container{
		overflow:hidden;
		padding-top:0;
	}
	.location__map{
		margin-top:.5em;
		& img{
			border:solid 1px #666;
		}
	}
	.location__gmap-btn{
		text-align:right;
		padding-bottom:5%;
		.btn02{
			padding-inline:2.2em .8em;
			background-image:url(../images/icon_location.svg);	
		}
	}
	.location__photo{
		container-type:inline-size;
		width:100%;
		.imgbox{
			@container(min-width:600px){
				grid-template-columns:repeat(3, 1fr);
				gap:min(.6vw,8px);
			}
			& p{
				padding:.2em 0 .5em;
				font-size:13px;
				line-height:1;
				&.op01{
					letter-spacing:-1.5px;
				}
			}
		}
	}
	.location__list{
		.title{
			margin:.5em 0 .2em;
			font-size:1.125em;
			font-weight:600;
			color:#7f4f21;
		}
		& dl{
			margin-bottom:5%;
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
			border-top:solid 1px rgba(0,0,0,.3);
			font-size:15px;
			line-height:1.1;
			& dt{
				width:53.5%;
				padding:.5em 5px .5em 0;
				border-bottom:solid 1px rgba(0,0,0,.1);
				font-weight:600;
			}
			& dd{
				width:46%;
				padding:.5em 0;
				border-bottom:solid 1px rgba(0,0,0,.1);
				white-space:nowrap;
				text-align:right;
				& span:first-child{
					display:inline-block;
					width:2.1em;
					text-align:right;
				}
				& span:nth-child(2){
					display:inline-block;
					width:4.8em;
					text-align:right;
				}
			}
		}
	}
	.flex01 > div{
		margin-bottom:min(12%,50px);
	}
	@media(min-width:768px){
		.flex01{
			.flex-box:first-child{
				width:min(56%,700px);
				margin-right:3%;
			}
			.location__list{
				flex:1;
			}
		}
	}
}


/* plan */
.plan{
	.title01{
		color:#b28247;
	}
}
.plan__floorlist{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	.floor{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		align-items:flex-start;
		width:100%;
		margin-bottom:min(10%,80px);
		& dl{
			width:100%;
			margin-bottom:1em;
			& dt{
				width:100%;
				height:2.6em;
				margin:5% 0 3%;
				background:#171c61;
				border-top:solid 1px #171c61;
				border-bottom:solid 1px #171c61;
				color:#171c61;
				line-height:1.2;
				.type{
					display:inline-block;
					width:32%;
					height:100%;
					background:#fff;
					padding-top:.1em;
					text-align:center;
					& b{
						padding-right:.05em;
						font-size:1.75em;
					}
				}
				.room{
					display:inline-block;
					width:64%;
					padding-top:.1em;
					text-align:center;
					font-size:1.1em;
					color:#fff;
					& b{
						font-size:1.5em;
						font-weight:400;
					}
					& small{
						font-size:max(9px,.6em);
					}
				}
			}
			& dd{
				margin-left:34%;
				line-height:1.5;
				& b{
					font-size:1.5em;
					font-weight:400;
				}
			}
		}
		& figure{
			position:relative;
			width:min(70%,300px);
			margin:0 auto 10%;
			border:solid 1px #ccc;
			transition:opacity .5s ease;
			cursor:pointer;
			&:after{
				content:"";
				display:block;
				position:absolute;
				right:0;
				bottom:0;
				z-index:1;
				width:min(10vw,2.5em);
				aspect-ratio:1 / 1;
				background:rgba(0,0,0,.7) url(../images/icon_zoom.svg) no-repeat 0 0 / 100%;
				padding:3%;
				border-radius:0;
				border:none;
				pointer-events:none;
			}
			& img{
				padding:2% 6%;
			}
			@media(any-hover:hover){
				&:hover{
					opacity:0.7;
				}
			}
		}
		.vr{
			width:min(100%,500px);
			margin-inline:auto;
			text-align:center;
			& > p{
				margin-inline:auto;
				width:70px;
				opacity:.6;
			}
			& iframe{
				width:100%;
				height:auto;
				aspect-ratio:16 / 9;
				margin-block:.5em;
				/*border:solid 1px #ccc;*/
				@media(min-width:768px){
					aspect-ratio:4 / 3;
				}
			}
			.btn02{
				padding-left:2.7em;
				background-image:url(../images/enlarge2.svg);
			}
		}
		@media(min-width:768px){
			width:48%;
			& dl{
				margin-bottom:0;
				min-height:10.5em;
				& dd{
					margin-left:0;
				}
			}
			& figure{
				width:48%;
				margin:0;
			}
			.vr{
				width:48%;
			}

		}
	}
}

.plan__data{
	margin-bottom:min(12%,50px);
	& figure{
		margin-bottom:7%;
	}
}

.plan__avail{
	container-type:inline-size;
	width:100%;
	margin-bottom:min(12%,50px);
	.title{
		padding:.5em;
		text-align:center;
		background:#171c61;
		font-size:1.125em;
		font-family:var(--font-got);
		letter-spacing:.3em;
		color:#fff;
	}
	.legend{
		padding:.5em 0;
		line-height:1.7;
		font-size:.9em;
		@container(min-width:480px){
			& li{
				display:inline-block;
				padding-right:.5em;	
			}
		}
		& i{
			display:inline-block;
			margin:.3em 0.1em 0 0;
			width:1em;
			height:1em;
			border:solid 1px #999;
			vertical-align:top;
		}
	}
	.c01{
		background:rgba(153,102,0,.5);
	}
	.c02{
		background:rgba(223,224,207,.8);
	}
	.c03{
		background:rgba(255,242,204,1);
	}
	& table{
		width:100%;
		/*table-layout:fixed;*/
		margin-bottom:8%;
		border-collapse:collapse; 
		border:solid 2px #999;
		font-family:Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
		line-height:1;
		& th, & td{
			border:solid 1px #999;
			text-align:center;
			font-size:13px;
		}
		.type{
			& td{
				padding:.5em .2em;
				line-height:1.2;
				& b{
					display:block;
					font-size:1.4em;
					& small{
						padding-left:2px;
						font-size:.7em;
						font-weight:400;
					}
				}
			}
		}
		.room{
			& td{
				border-top-width:2px;
				padding:.5em .2em;
				font-weight:600;
				&:first-child{
					font-size:1em;
					background:#666;
					color:#fff;
				}
			}
		}
		.late{
			& b{
				position:relative;
				color:#c00;
				&:after{
					content:"";
					position:absolute;
					top:calc(50% - 20px);left:calc(50% - 10px);
					display:inline-block;
					width:20px;
					height:40px;
					border:solid rgba(255,0,0,.2);
					border-width:0 8px 8px 0;
					transform:rotate(45deg);
				}
			}
			& i{
				display:block;
				margin-inline:.7em;
				padding-block:.5em;
				font-style:normal;
				@media(width < 420px) or (768px <= width <= 820px){
					margin-inline:0;
				}
				& + i{
					border-top:dotted 1px #999;
				}
			}
		}
	}
}

.plan__photo{
	.imgbox{
		@media(min-width:768px){
			width:75%;
			margin-inline:auto;
			grid-template-columns:repeat(2, 1fr);
			gap:20px;
		}	
	}
	/*
	.gallery{
		display:flex;
		justify-content:center;
		width:100%;
		height:min(40vw,280px);
		gap:3%;
		& li:last-child{
			display:none;
		}
		& img{
			height:100%;
			width:auto;
		}
		@media(min-width:768px){
			height:min(25vw,250px);
			& li:last-child{
				display:block;
			}
		}
		
	}
	*/

}



/* features */
.features{
	background:#ecdfd4;
	color:#000;
	.title01{
		color:#7f4f21;
	}
	.features__cont01{
		.box01, .box02{
			margin-bottom:min(8%,30px);
		}
		.box01 figure{
			margin-bottom:5%;
			& figcaption{
				text-align:right;
				font-size:.85em;
			}
		}
		& dl{
			text-align:center;
			& dt{
				padding-block:.1em;
				background-image:linear-gradient(90deg,transparent,#604c3f 20%,#604c3f 80%,transparent 100%);
				letter-spacing:.1em;
				color:#fff;
			}
			& dd{
				padding-block:.5em .8em;
				& strong{
					font-weight:600;
					color:#a40000;
					&.lg{
						font-size:1.5em;
					}
				}
			}
		}
		@media(min-width:768px){
			.box01{
				width:56%;
			}	
			.box02{	
				width:42%;
				& dd{
					letter-spacing:.1em;
				}
			}
		}
	}
	.features__cont02{
		flex-wrap:wrap;
		align-items:stretch;
		margin-bottom:min(8%,50px);
		& > div{
			margin-bottom:min(5%,25px);
			/*&:nth-child(-n+5){*/
				border-top:dotted 1px #7f4f21;
				padding:min(4%,25px) 2% 0;
			/*}*/
		}
		.title{
			margin-bottom:.5em;
			font-size:1.125em;
			font-weight:600;
			color:#7f4f21;
			&.op01{
				position:relative;
				padding-right:38%;
				min-height:50px;
				& img{
					position:absolute;
					top:0;right:0;
					width:min(35%,260px);
					margin-left:2%;
				}
			}
		}
		.features__equip01{
			.flex{
				display:flex;
				flex-wrap:wrap;
				& p{
					flex:1;
					.op02 &{
						width:100%;
					}
				}
				& figure{
					width:min(36%,130px);
					margin-left:5%;
					.op02 &{
						width:100%;
						margin:0;
						text-align:center;
						& img{
							width:min(90%,360px);
						}
					}
				}
			}
		}	
		.features__equip02{
			& li{
				margin-top:.8em;
				padding:.5em;
				border:solid 1px #7f4f21;
				text-align:center;
			}
		}
		.features__equip03{
			& dl{
				position:relative;
				width:100%;
				height:100%;
				padding:5%;
				background:#fff;

				& dt{
					margin:-3% 0 .3em;
					font-size:1.125em;
					font-weight:500;
					color:#004d86;
				}
				& figure{
					width:min(50%,200px);
					margin:5% auto 0;
				}
				@media(min-width:768px){
					padding-right:30%;
					& figure{
						width:25%;
						position:absolute;
						right:3%;top:50%;
						transform:translateY(-50%);
						margin:0;
					}
				}
			}
		}
	}
}

/* design */
.design{
	.title01{
		color:#b28247;
	}
	padding-bottom:12%;
	.design__catch01{
		letter-spacing:.1em;
		color:#0f5779;
		& span{
			display:inline-block;
			vertical-align:middle;
			&:first-child{
				font-size:min(4vw,2em);
			}
			&:nth-child(2){
				padding-top:.3em;
			}
		}
	}
	.design__catch02{
		display:flex;
		justify-content:center;
		align-items:center;
		gap:5px;
		line-height:1.2;
		margin:.5em 0 1em;
		padding-block:.5em;
		background:#0f5779;
		color:#fff;
		text-align:center;
		font-size:min(4vw,1.25em);
		& span{
			margin-inline:.1em;
		}
		& b{
			display:inline-block;
			vertical-align:middle;
			margin:-.3em 1px 0;
			font-size:1.25em;
			color:#fff100;
		}
		@media(min-width:768px){
			line-height:1;
			& br{
				display:none;
			}
		}
	}
	.design__style{
		& dl{
			margin:3% 0 12% 10%;
			& dt{
				margin-bottom:-.1em;
				text-align:right;
				font-size:2em;
				line-height:1;
				color:#e1d8cb;
			}
			& dd{
				padding:4%;
				background:#e1d8cb;
				text-align:center;
				font-weight:600;
				color:#000;
			}
		}
		@media(min-width:768px){
			display:flex;
			justify-content:space-between;
			align-items:center;
			& figure{
				width:49%;
				margin:auto;
			}
			& dl{
				width:51%;
				margin:auto;
			}
			&.op02{
				flex-direction:row-reverse;
				margin:-3% 0 -3%;
				& dt{
					text-align:left;
				}
			}
		}
	}

}

/* outline */
.outline{
	margin-bottom:8%;
	.title01{
		color:#666;
	}
	& dl{
		display:flex;
		flex-wrap:wrap;
		width:min(100%,800px);
		margin-inline:auto;
		border-top:solid 1px #ccc;
		font-size:.9em;
		& dt{
			width:30%;
			padding:.3em 2%;
			background:#f0f0f0;
			border-bottom:solid 1px #ccc;
		}
		& dd{
			width:70%;
			padding:.3em 2%;
			border-bottom:solid 1px #ccc;
		}
	}
}

/* f-contact */
.f-contact{
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("../images/f-contact_bg.jpg");
	background-size:cover;
	background-position:center;
	.container{
		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
		margin-block:6%;
		padding:1em;
		font-size:min(3.3vw, 16px);
		font-family:var(--font-got);
		line-height:1;
		letter-spacing:.05em;
		color:#fff;
		.f-contact__form,.f-contact__tel{
			width:90%;
			margin:3% 0;
			padding:5%;
			background:rgba(0,0,0,.5);
			text-align:center;
		}
		.f-contact__form{
			& p{
				margin-bottom:1em;
				font-weight:500;
			}
			.btn01{
				padding-left:1.6em;
				&:before{
					position:absolute;
					content:"";
					top:calc(50% - 0.65em);
					left:calc(50% - 4.7em);
					width:1.2em;
					height:1.2em;
					background:url(../images/icon_mail.svg) no-repeat left top / 100%;
				}
			}
		} 
		@media(min-width:768px){
			.f-contact__form, .f-contact__tel{
				width:45%;
				height:200px;
				margin:5% auto;
				padding:50px 0;
			}				
		}
	}
}

/* footer */
.footer{
	.footer__info{
		margin:1em auto 2em;
		width:min(100%,400px);
		border-top:solid 1px #666;
		font-size:.85em;
		& dt{
			margin:-.8em 0 0;
			& span{
				padding-right:.3em;
				background:#fff;
			}
		}
		& dd{
			& img{
				max-width:300px;
				margin-block:.5em;
			}
			& a.link01{
				color:#333;
				text-decoration:none;
				&:before{
					content:"";
					display:inline-block;
					width:1em;
					height:0.8em;
					margin:-.1em .8em 0 0;
					border:1.5px solid currentColor;
					background-color:#fff;
					box-shadow:3px 3px 0 -3px #fff, 3px -3px 0 0 #666;
					vertical-align:middle;
				}
				@media(any-hover:hover){
					&:hover{
						text-decoration:underline;
					}
				}
			}
		}
	}
	.copyright{
		padding:.5em;
		background:#f0f0f0;
		font-size:.85em;
		text-align:center;
	}
}



/* viewer */
.viewer-title{
	font-size:16px;
	color:#fff;
}
.viewer-navbar li{
	width:50px !important;
	height:100px !important;
}
.viewer-navbar li.viewer-active{
	width:50px !important;
	height:100px !important;
}
.viewer-navbar{
	height:auto !important;
}
.viewer-list{
	height:auto;
}
.viewer-button{
	transform:scale(1.2);
}

/* contact */
.contact.container{
	width:min(100%,900px);
	.title01{
		color:#666;
	}
	.contact__info{
		max-width:600px;
		margin:3% auto;
		& p{
			margin-bottom:1em;
		}
		.term{
			text-align:left;
		}
		.go-toppage{
			text-align:center;
			.btn02{
				background-image:url(../images/arrow_left_line.svg);
			}
		}
		@media(min-width:768px){
			text-align:center;
		}
		.contact__tel{
			width:min(90%,600px);
			margin:5% auto;
			padding:3%;
			border:solid 1px #c09b82;
			text-align:center;
			.telno{
				font-size:30px;
			}
		}
	}
}
.form01{
	margin:5% auto;
	padding-top:5%;
	font-family:var(--font-got);
	& form{
		width:100%;
	}
	.form__info{
		margin:3% 0;
		text-align:center;
	}
	.mark-mand{
		display:inline-block;
		line-height:1.4em;
		margin:5px 5px 0 0;
		padding:0 .5em;
		background:#e72;
		text-align:center;
		vertical-align:top;
		font-size:.75em;
		color:#fff;
	}

	.caution01{
		border-bottom:solid 1px #C00;
	}
	.caution02{
		color:#C00;
	}
	& dl{
		width:min(100%,800px);
		margin-inline:auto;
		border-top:solid 1px #ccc;
		& dt{
			position:relative;
			padding:.8em .5em 0;		
			font-weight:bold;
			&.mand:after{
				content:"必須";
				display:inline-block;
				line-height:1.4em;
				margin:5px 0 0 5px;
				padding:0 .5em;
				background:#e72;
				text-align:center;
				vertical-align:top;
				font-size:.75em;
				color:#fff;
			}
		}
		& dd{
			padding:.5em .5em .8em;
			border-bottom:solid 1px #ccc;
			& p{
				margin-bottom:.5em;
			}
		}
	}
	& textarea{
		width:100%;
	}
	& textarea, & input[type="text"], & input[type="email"], & input[type="tel"]{
		border:solid 1px #aaa;
		max-width :100%;
		padding :.5em 2%;
		border :1px solid #ccc;
		border-radius :3px;
		background :#fafafa;
		font-size :100%;
		font-family :inherit;
		appearance :none;
	}
	& input[type="text"]:focus,
	& input[type="email"]:focus,
	& input[type="tel"]:focus,
	& textarea:focus{
		outline:none;
		box-shadow :0px 0px 5px #55ccff;
		background :#fff;
	}
	& input[type="radio"], & input[type="checkbox"]{
		vertical-align:top;
		margin:.32em .5em;
	}
	& label:has(input[type="radio"]:checked),
	& label:has(input[type="checkbox"]:checked){
		background-color:rgb(212, 242, 255);
	}
	& input::placeholder,
	& textarea::placeholder{
		color:#B9A284;
	}
	& small{
		font-size:.85em;
		font-weight:400;
	}
	& label{
		line-height:1.4;
		border:1px solid #ccc;
		border-radius:3px;
		background:#fafafa;
		margin-bottom:.5em;
		padding:.5em;
		&:hover{
			cursor:pointer;
		}
	}
	& .label-l label{
		display:block;
	}
	& .label-m label{
		display:inline-block;
		width:48%;
		margin-right:1%;
	}

	.input_s{
		width :48%;
	}
	.input_m,.input_l{
		width :100%;
	}
	.exp01{
		display:inline-block;
		padding:0 0 .8em;
		font-size:.9em;
	}
	.form__submit{
		margin:5%;
		text-align:center;
		& input{
			border:none;
			font-family :inherit;
		}
	}
	.form__privacy{
		margin:30px auto;
		padding:20px;
		border:1px dotted #999;
		background:#F7FFFF;
		font-weight:400;
		& a{
			color:#003574;
		}
		& p{
			margin-bottom:1em;
		}
	}
	@media(min-width:768px){
		& dl{
			display:flex;
			flex-wrap:wrap;
			& dt{ 
				width:30%;
				padding:.8em 50px .8em 0;
				text-align:right;
				border-bottom:solid 1px #ccc;
				&.mand:after{
					position:absolute;
					top:1.5em;right:0;
					margin:0;
				}
			}
			& dd{
				width:70%;
				padding:.8em 0 .8em 30px;
			}
			.input_s{
				width :38%;
			}
			.input_m{
				width :60%;
			}
			.input_l{
				width :80%;
			}
		}
	}
}

/* for formcheck.js */
#form_error_list{
	display:none;
	width:85%;
	margin:20px auto 10px;
	padding:10px;
	background:#FFF0CC;
	border:solid 1px #F93;
}
#form_error_list_title{
	color:#C00;
}
#form_error_list-item{
	font-weight:bold;
}
.form01 input.form_error_style{
	background:#FFF0CC;
	border:solid 1px #F93;
}
/*
.form_error_style .form_error_style{
	background:#FCC77C;
}
*/
.form_error_tip{
	display:none;
	color:#C00;
}

/* form-confirm | error */
.input_l02{
	display:none;
}
.form-confirm-text01{
	text-align:center;
	margin:50px 0;
}
.form-confirm-error{
	width:85%;
	margin:20px auto;
	padding:10px;
	background:#FFF0CC;
	border:solid 1px #F93;
}
.form-confirm-error ul span{
	font-weight:bold;
}

.form-confirm-list dl{
	background:#EFEFEF;
	border-bottom:1px solid #CCC;
	line-height:1.3;
}
.form-confirm-list dt{
	clear:both;
	float:left;
	width:240px;
	padding:10px 10px 8px;
	border-top:1px solid #CCC;
	font-weight:bold;
}
.form-confirm-list dd{
	margin:0 0 0 240px;
	padding:10px 0 8px 10px;
	background:#FFF;
	border-top:1px solid #CCC;
	word-break:break-all;
}
.form-confirm-back{
	margin:10px 0;
}