@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
/* {outline: 1px solid magenta;}*/
:root{
	--black: rgba(31,31,31,1);
	--purple: rgba(73,50,112,1);
	--purple10: rgba(73,50,112,0.1);
	--purple50: rgba(73,50,112,0.5);
	--red: rgba(177,47,75,1);
	--gold: rgba(164,131,86,1);
	--gold10: rgba(164,131,86,0.1);
	--gold50: rgba(164,131,86,0.5);
	--rmjweb: rgba(186,161,116,1);
	--gray: #353831;
    --silk: #F6F7EB;
	--mark: #ede6ae;
}
* {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-feature-settings: "palt"
}
.en{
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
:root { --anchor-offset: 100px; }
:where([id]) { scroll-margin-top: var(--anchor-offset); }
html { scroll-behavior: smooth; }

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,button{
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.6;
}
small{
	font-size: clamp(12px, 1.1vw, 14px);
	line-height: 1.3;
}
li{
	line-height: 1.5;
}
p{
	line-height: 1.6;
	margin: 0 0 1em;
}
p:last-child{
	margin-bottom: 0;
}
body {
	position: relative;
	width: 100%;
}
mark{
	background: linear-gradient(180deg, transparent 0%, transparent 80%, var(--mark) 80%, var(--mark) 100%);
	color: var(--red);
	font-weight: 700;
}
.wrapper{
	width: 90%;
	margin-inline: auto !important;
}
.wrap{
	width: 95%;
	max-width: 1480px;
	margin-inline: auto !important;
}
.shadow{
	filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}
.btn{
	display: flex;
	cursor: pointer;
    align-items: initial !important;
}
.btn b{
	color: var(--black);
	border: 1px solid var(--black);
	border-radius: 3em 0 0 3em;
	padding: 0.5em 0.7em 0.6em 1.2em;
	display: flex;
    align-items: center;
	font-size: clamp(12px, 1.1vw, 14px);
	transition: 0.2s all ease;
}
.btn:after{
	content: "→";
	border-radius: 0 3em 3em 0;
	color: var(--black);
	border: 1px solid var(--black);
	display: flex;
	align-items: center;
	border-left: 1px solid #fff;
	padding: 0 0.8em 0 0.5em;
	transition: 0.2s all ease;
}
.btn:hover b,
.btn:hover:after,
.btn:hover:before{
	color: #fff !important;
	background: var(--red);
	border: 1px solid var(--red) !important;
}
.btn:hover:before,
.btn:hover b{
	border-right: 1px solid #fff !important;
}
.page-h3{
	position: relative;
	text-align: center;
}
.page-h3 span{
	display: inline-block;
	color: var(--red);
	font-weight: 900;
	font-size: clamp(24px, 2.1vw, 38px);
	line-height: 1.2;
	position: relative;
	width: auto;
	background: #fff;
	z-index: 1;
}
.page-h3 small{
	display: block;
	line-height: 1.2;
	font-size: clamp(13px, 1.2vw, 16px);
}
.page-h3:before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var(--red);
	position: absolute;
	top: calc(50% + 0.5em);
}
.page-h4{
	position: relative;
}
.page-h4 span{
	display: block;
	color: var(--purple);
	font-weight: 900;
	font-size: clamp(22px, 4vw, 28px);
	line-height: 1.3;
	position: relative;
	z-index: 1;
}
.page-h4 span br{
	display: none;
}
.page-h4:before{
	content: "";
	position: absolute;
	top: 50%;
	height: 2px;
	background: var(--purple);

	left: 0;
	transform: translateY(-50%);
	right: calc((100% - 1480px) / 2 + 1480px);
}
@media (max-width: 1480px) {
	.page-h4::before {
		display: none;
	}
}
@media screen and (max-width: 980px) {
	.page-h4 span br{
		display: block;
	}
}
@media screen and (max-width: 680px) {
	.page-h3{
		text-align: center;
	}
}
@media screen and (max-width: 480px) {

}

/*HEADER*/
.header{
	padding: 1em;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10;
	background: #fff;
}
.header-h1 a{
	display: flex;
	align-items: flex-end;
}
.header-h1 span{
	width: clamp(85px, 6em, 120px);
	margin-right: 0.5em;
}
.header-h1 small{
	color: var(--purple);
	font-weight: 700;
	font-size: clamp(11px, 1.1vw, 14px);
	line-height: 1.2;
}
.header-h1 small br{
	display: none;
}
.header-h1 b{
	display: block;
	font-size: clamp(11px, 1.1vw, 14px);
	color: var(--red);
	font-weight: 700;
}
.trigar{
	display: none;
}
.gnav{
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
.gnav-a{
	color: var(--black);
	font-size: clamp(12px, 1.1vw, 14px);
	padding: 0 1em;
	line-height: 1.3;
	text-align: center;
}
.gnav-a:hover{
	color: var(--red);
}
.gnav-contact b{
	color: #fff;
	background: var(--purple);
	border: 1px solid var(--purple);
}
.gnav-contact:after{
	color: #fff;
	background: var(--purple);
	border: 1px solid var(--purple);
    border-left: 1px solid #fff;
}
.gnav-contact:hover b{
	background: var(--red);
    border: 1px solid var(--red);
}
.gnav-contact:hover:after{
	background: var(--red);
    border: 1px solid var(--red);
    border-left: 1px solid #fff;
}
@media screen and (max-width: 1080px) {
	.header-h1 small br{
		display: block;
	}
}
@media screen and (max-width: 980px) {
	.header-h1 small br{
		display: none;
	}
    .trigar{
        display: block;
        position: relative;
        cursor: pointer;
		width: 40px;
        height: 25px;
		margin-left: 1em;
        z-index: 1000;
    }
	.trigar span{
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--purple);
        transition: 0.3s ease;
	}
    .trigar.clicked span{
        background: #fff;
    }
    .trigar span:nth-of-type(1) {
        top: 0;
    }
    .trigar span:nth-of-type(2) {
        top: 11px;
    }
    .trigar span:nth-of-type(3) {
        top: 22px;
    }
    .trigar.clicked span:nth-of-type(1) {
        transform: rotate(405deg);
        top: 11px;
    }
    .trigar.clicked span:nth-of-type(2) {
        opacity: 0;
    }
    .trigar.clicked span:nth-of-type(3) {
        transform: rotate(-405deg);
        top: 11px;
    }
	.gnav{
		position: fixed;
		top: 0;
		right: -100%;
		height: 100vh;
		width: 20em;
		transition: 0.3s all ease;
		padding: 6em 0;
		background: var(--purple);
		flex-direction: column;
		justify-content: flex-start;
        z-index: 999;
	}
	.gnav.clicked{
		right: 0 !important;
	}
	.gnav a{
		display: block;
		text-align: left;
		padding: 1.5em;
		color: #fff;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		font-size: 16px;
	}
	.gnav a br{
		display: none;
	}
	.gnav a:hover,
	.gnav a.current{
		background: rgba(255,255,255,0.2);
		color: #fff;
	}
	.gnav-contact{
		display: flex !important;
		justify-content: center;
		background: var(--gold);
		width: 90%;
		margin: 1em auto;
		border: 1px solid rgba(255,255,255,0.5) !important;
	}
	.gnav-contact b{
		border-radius: 0;
		padding: 0;
		font-size: 16px;
		background: transparent;
        border: none;
	}
	.gnav-contact:after{
		border-radius: 0;
		background: transparent;
		border-left: none;
		padding: 0;
		margin-left: 1em;
        border: none;
	}
	.gnav-contact:hover:after{
		background: transparent;
        border: none;
	}
	.gnav-contact:hover{
		background: var(--red);
        border: none;
	}
}
@media screen and (max-width: 480px) {
	.header{
		padding: 0.5em;
		align-items: center;
	}
	.header-h1 small br{
		display: block;
	}
}

/*FOOTER BTN*/
.footer-btn{
	width: 20em;
	justify-content: center;
	margin: 0 auto 5em;
	font-size: clamp(18px, 2vw, 24px) !important;
}
.footer-btn b,
.footer-btn:after{
	color: #fff;
	font-size: clamp(18px, 2vw, 24px) !important;
	background: var(--red);
	border: 1px solid var(--red);
}
.footer-btn b{
	border-right: 1px solid #fff;
}
.footer-btn:hover b,
.footer-btn:hover:after{
	background: var(--purple);
	border: 1px solid var(--purple);
}
.footer-btn:hover b{
	border-right: 1px solid #fff;
}

@media screen and (max-width: 480px) {
	.footer-btn{
		margin: 0 auto 3em;
	}
}

/*FOOTER*/
.footer{
	background: url("../img/footer_bk.webp") left center / cover no-repeat;
	position: relative;
}
.footer:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--black);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.3;
	z-index: 0;
}
.footer-wrap{
	text-align: right;
	position: relative;
	z-index: 1;
}
.footer-logo{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 0 0 0 auto;
}
.footer-logo img{
	width: clamp(100px, 10vw, 150px);
	filter: brightness(0) invert(1);
}
.footer-logo small{
	display: block;
	line-height: 1.3;
	font-size: clamp(13px, 1.2vw, 16px);
	font-weight: 700;
	color: #fff;
	margin-left: 1em;
}
.footer-address{
	margin: 1em 0 0 auto;
	color: #fff;
}
.footer-address a{
	color: #fff;
	font-weight: 700;
	font-size: 110%;
}
.footer-nav{
	background: var(--purple50);
	position: relative;
	z-index: 2;
	padding: 2em 5%;
}
.footer-copy,
.footer-nav_a{
	display: inline-block;
	padding: 0 1em;
	line-height: 1;
	color: #fff;
	font-size: clamp(12px, 1.1vw, 14px);
}
.footer-nav_a{
    border-right: 1px solid #fff;
}
.footer-nav_a:hover{
    color: var(--gold);
}
@media screen and (max-width: 480px) {
	.footer:after{
		opacity: 0.5;
	}
    .footer-nav_a{
        border-right: none;
    }
	.footer-copy{
		display: block;
		margin-top: 0.5em;
	}
}

/*TOTOP*/
#totop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 99999;
	width: 4em;
	height: 4em;
	background: url("../img/totop.png") center center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: 0.3s all opacity;
}
#totop.is-visible { 
	opacity: 1; 
	pointer-events: auto; 
}
#totop:hover{
	transform: scale(1.2,1.2);
	background: url("../img/totop_hover.png") center center / contain no-repeat;
}
@media screen and (max-width: 980px) {
	#totop {
		right: 0.5em;
	}
}
@media screen and (max-width: 680px) {
	#totop {
		width: 3em;
		height: 3em;
	}
}