@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');

* {
    box-sizing: border-box;
    color: #222;
	font-size: clamp(16px, 2vw, 21px);
	font-family: "Bellefair", serif;
	font-weight: 400;
	font-style: normal;
}
font{
	font-family: "Bellefair", serif;
}
html{
	font-size: 0.4vw;
	background: linear-gradient(to left, #fff, #e6e6e6);
	scroll-behavior: smooth;
}
body{
	background: 
		url("../img/common/bk_gold.png") no-repeat top center,
		url("../img/common/bk_footer.png") no-repeat bottom center;
	background-size: 100%;
}
p,dt,dd,tr,th,td,li,a,b,em,span,strong,div,img,header,section,article,nav,footer,h1,h2,h3,h4,h5,h6{
	font-size: clamp(16px, 2vw, 21px);
}
.wrapper{
	width: 90%;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wrap{
	width: 90%;
	max-width: 1380px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wrap-small{
	max-width: 680px;
}

:root{
	--black: #222;
	--gold: rgba(167,145,88,1);
	--lgold: rgba(167,145,88,0.5);
	--gray: rgba(85,85,85,1);
	--lgray: rgba(153,153,153,1);
	--red: #ae2430;
}
small{
	font-size: 80%;
}
p{
	line-height: 1.5;
	margin: 0 0 1.7em;
}

/*HEADER*/
.header{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5em;
	transition: 1s all;
	background: transparent;
}
.header-h1{
	opacity: 0;
	transition: 1s all;
	width: 100px;
	height: 100%;
}
.header.sticky{
	position: fixed;
	padding: 0.5em;
	background: #fff;
}
.header.sticky .header-h1{
	opacity: 1;
}
@media screen and (max-width: 780px) {
	.header,
	.header.sticky{
		padding: 0.2em 0.5em !important;
	}
	.header-h1{
		width: 70px;
	}
	.header.sticky{
		background: #fff;
	}
}
/*GNAV*/
.gnav{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.gnav a{
	padding: 0 1em;
	font-size: 16px;
}
.gnav a:hover{
	color: var(--gold);
}
.gnav img{
	height: 21px;
	opacity: 0.5;
}
.gnav-sns{
	padding: 0 0.5em !important;
}
.dnav{
	display: none;
}
@media screen and (max-width: 780px) {
	.gnav{
		display: block;
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100%;
		padding: 2em 0;
		background: var(--gold);
		opacity: 0;
		transition: 0.4s all;
	}
	.gnav.clicked{
		right: 0;
		opacity: 1;
	}
	.gnav a{
		display: block;
		padding: 1.5em 3em !important;
		color: #fff;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.gnav a font{
		color: #fff;
	}
	.gnav a.insta:after{
		content: "instagram";
		font-size: 16px;
		color: rgba(255,255,255,0.7);
	}
	.gnav a.fb:after{
		content: "facebook";
		font-size: 16px;
		color: rgba(255,255,255,0.7);
	}
	.gnav a.ytub:after{
		content: "Youtube";
		font-size: 16px;
		color: rgba(255,255,255,0.7);
	}
	.gnav a:last-child img{
		vertical-align: -0.1em;
	}
	.gnav img {
		opacity: 0.7;
		filter: invert(1);
	}
	.gnav a:hover{
		color: #fff;
		background: rgba(255,255,255,0.2);
	}
	.dnav{
		display: block;
	}
	.dnav-btn {
		display: flex;
		justify-content: center;
		position: relative;
		padding: 15px 5px 31px;
		cursor: pointer;
		z-index: 999;
	}
	.dnav-btn span,
	.dnav-btn span:before,
	.dnav-btn span:after {
		content: '';
		display: block;
		height: 1px;
		width: 40px;
		background: var(--gray);
		position: relative;
		transition: 0.2s;
	}
	.dnav-btn span:before {
		top: 9px;
	}
	.dnav-btn span:after {
		top: 17px;
	}
	.dnav-btn.clicked span {
		background: transparent;
	}
	.dnav-btn.clicked span::before {
		bottom: 0;
		transform: rotate(45deg);
		background: #fff;
	}
	.dnav-btn.clicked span::after {
		display: block;
		top: 8px;
		transform: rotate(-45deg);
		background: #fff;
	}
	.dnav-content {
		display: block;
		width: 100%;
		height: 0;
		position: fixed;
		top: 0;
		right: -100%;
		z-index: 80;
		transition: 0.2s all;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--doblue);
	}
	.dnav-content.open {
		right: 0;
		height: 100%;
	}
	.dnav-a{
		padding: 70px 0;
	}
	.dnav-a .gnav-a{
		display: block;
		padding: 2em;
		color: var(--blue);
		border-bottom: 1px solid var(--white);
		font-size: 110%;
	}
	.dnav-a .gnav-a.current{
		background: rgba(255,255,255,0.1);
	}
	.page .gnav_nmf_a{
		width: 90%;
		margin: 1em auto;
		background: rgba(255,255,255,0.1);
		font-weight: 500;
		font-size: 16px !important;
	}
}
@media screen and (max-width: 680px) {
	.header-h1_a {
		letter-spacing: 0;
	}
	.header-h1_a span{
		letter-spacing: 0.25em;
	}
}

/*FOOTER*/
.footer a,
.footer small{
	display: block;
	font-size: 12px;
	letter-spacing: 2px;
	margin-bottom: 1em;
}
.footer a:hover{
	color: var(--gold);
}
#totop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 99999;
	text-decoration: none !important;
}
#totop i{
    font-size: 28px;
    color: var(--blue);
}
#totop:hover{
	transform: scale(1.2,1.2)
}
#totop:hover i{
	transform: scale(1.1,1.1)
}
@media screen and (max-width: 980px) {
	.footer{
		text-align: center !important;
		justify-content: center;
	}
	.footer-a_inner{
		flex-basis: 100%;
		width: 100%;
		text-align: center !important;
		margin-top: 1em;
	}
}
@media screen and (max-width: 680px) {
	.footer-copy{
		display: block;
		margin: 1em auto;
	}
	#totop {
		bottom: 2em;
		right: 0.5em;
	}
}

.gt_switcher_wrapper{
	position: relative !important;
    top: inherit !important;
    right: inherit !important;
    margin-left: 0.5em !important;
}
.gt_switcher_wrapper select{
	font-size: 14px;
	border: none;
	background: #eee;
	padding: 0.2em;
}
.gt_switcher_wrapper option{
	font-size: 14px;
}
@media screen and (max-width: 680px) {
	.gt_switcher_wrapper{
		width: 100%;
		margin: 1em 0 0 0 !important;
		padding: 1em 3em !important;
	}
	.gt_switcher_wrapper select{
		width: 100%;
	}
	.gt_switcher_wrapper select,
	.gt_switcher_wrapper option{
		font-size: 16px;
	}
}