@charset "utf-8";
@font-face {
	font-family: 'notosans';
	src: url('../font/notosans.woff') format('woff');
 }
@font-face {
	font-family: 'oswald';
	src: url('../font/oswald.woff') format('woff');
 }
:root{
	--black: rgba(31,31,31,1);
	--black10: rgba(31,31,31,0.1);
	--black20: rgba(31,31,31,0.2);
	--black30: rgba(31,31,31,0.3);
	--black50: rgba(31,31,31,0.5);
	--black70: rgba(31,31,31,0.7);
    --red: rgba(183,43,36,1);
    --yellow: rgba(231,222,86,1);
    --gray: rgba(188,187,188,1);
	--gray30: rgba(188,187,188,0.3);
	--gray20: rgba(188,187,188,0.2);
	--blue: rgba(19,69,128,1);
	--blue10: rgba(19,69,128,0.1);
	--blue20: rgba(19,69,128,0.2);
}
* {
	font-family: "notosans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	color: var(--black);
}
.en{
	font-family: "oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
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(15px, 1.3vw, 18px);
	line-height: 1.6;
}
small{
	font-size: clamp(12px, 1.1vw, 13px);
	line-height: 1.3;
}
li{
	line-height: 1.5;
}
p{
	line-height: 1.6;
	margin: 0 0 1em;
}
p:last-child{
	margin-bottom: 0;
}
.wrapper{
	width: 90%;
	margin-inline: auto !important;
}
.wrap{
	width: 90%;
	max-width: 1480px;
	margin-inline: auto !important;
}
.shadow{
	filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5));
}
.btn{
	background: var(--red);
	color: #fff;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	padding: 0.5em 1.5em 0.5em 1.5em;
	border-radius: 4em;
	filter: drop-shadow(0 3px 2px rgba(0,0,0,0.3));
	font-size: clamp(16px, 1.3vw, 18px);
	display: inline-block;
    margin-bottom: 5px;
	cursor: pointer;
}
.btn.yellow{
	background: var(--yellow);
	color: var(--black);
}
.btn:hover{
	background: var(--yellow);
	color: var(--black);
}
.btn.yellow:hover{
	background: var(--red);
	color: #fff;
}
.title-h3{
	text-align: center;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	position: relative;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
.title-h3:before{
	content: "";
	display: block;
	width: 1.7em;
	height: 0.5em;
	margin: 0 auto;
	background: url("../img/h3_yellow.svg") no-repeat;
	background-size: contain;
}
.title-h3.red:before{
	background: url("../img/h3_red.svg") no-repeat;
	background-size: contain;
}
.title-h3 small{
	display: block;
	font-size: clamp(16px, 1.4vw, 18px);
}
.title-h4{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.title-h4 b{
	font-size: clamp(24px, 4vw, 38px);
	padding: 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
}
.title-h4:before,
.title-h4:after{
	content: "";
	display: block;
	flex: 1;
	height: 1px;
	background: var(--black);
}
.title-h5{
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 700;
}
@media screen and (max-width: 780px) {

}
@media screen and (max-width: 480px) {

}

/*HEADER*/
.header{
    width: 100%;
	position: sticky;
	top: 0;
    z-index: 999;
	display: flex;
	justify-content: space-between;
    align-items: flex-end;
	transition: all 0.2s ease;
	padding: 1em;
	background: #fff;
}
.header-nav{
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.header-h1{
	width: clamp(280px, 30vw, 450px);
	text-align: right;
	margin-right: 1em;
}
.header-h1 small{
	display: block;
	font-size: clamp(10.9px, 1.16vw, 17.4px);
	letter-spacing: 0.1em;
	margin-bottom: 0.1em;
}
.header-gnav a{
	display: inline-block;
	padding: 0 1em;
	border-right: 1px solid var(--black);
	line-height: 1;
	position: relative;
	font-size: clamp(16px, 1.3vw, 18px);
}
.header-gnav a:after{
	content: "";
	display: block;
	width: 3em;
	height: 3px;
	background: #fff;
	position: absolute;
	bottom: -0.7em;
	left: 50%;
	transform: translateX(-50%);
}
.header-gnav a:last-of-type{
	border-right: none;
}
.header-gnav a.current,
.header-gnav a:hover{
	color: var(--red);
}
.header-gnav a:hover:after{
	background: var(--red);
}
.header-cv{
	display: inline-block;
	background: var(--yellow);
	border-radius: 3em;
	line-height: 0.7;
	padding: 0.8em 0;
	width: 8em;
	text-align: center;
	font-weight: 700;
	font-size: clamp(16px, 1.3vw, 18px);
}
.header-cv:hover{
	background: var(--red);
	color: #fff;
}
.header-trigar{
	display: none;
}
@media screen and (max-width: 1280px) {
	.header-h1 small{
		margin-bottom: 0.3em;
	}
	.header-cv{
		width: 7em;
	}
	.header-gnav a{
		padding: 0 0.5em;
	}
}
@media screen and (max-width: 980px) {
	.header{
		align-items: center;
	}
    .header-trigar{
        display: block;
        position: relative;
        cursor: pointer;
		width: 40px;
        height: 25px;
		margin-left: 1em;
    }
	.header-trigar span{
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--red);
        transition: 0.3s ease;
	}
    .header-trigar.clicked span{
        background: #fff;
    }
    .header-trigar span:nth-of-type(1) {
        top: 0;
    }
    .header-trigar span:nth-of-type(2) {
        top: 11px;
    }
    .header-trigar span:nth-of-type(3) {
        top: 22px;
    }
    .header-trigar.clicked span:nth-of-type(1) {
        transform: rotate(405deg);
        top: 11px;
    }
    .header-trigar.clicked span:nth-of-type(2) {
        opacity: 0;
    }
    .header-trigar.clicked span:nth-of-type(3) {
        transform: rotate(-405deg);
        top: 11px;
    }
	.header-gnav{
		position: fixed;
		top: 0;
		right: -100%;
		height: 100vh;
		width: 20em;
		transition: 0.3s all ease;
		padding: 5em 0;
	}
	.header-gnav.clicked{
		background: var(--red);
		right: 0;
	}
	.header-gnav a{
		display: block;
		padding: 1.5em;
		color: #fff;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	.header-gnav a:hover,
	.header-gnav a.current{
		background: rgba(255,255,255,0.2);
		color: #fff;
	}
	.header-gnav a:after{
		display: none;
	}
}
@media screen and (max-width: 480px) {
	.header-cv{
		display: none;
	}
}

/*FOOTER*/
.footer-content{
	background: url("../img/footer.jpg") no-repeat center left;
	background-size: cover;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	padding: 10vw;
}
.footer-content:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.footer-item{
	position: relative;
	z-index: 1;
}
.footer-tel{
	display: flex;
	justify-content: center;
	text-align: center;
}
.footer-tel_p{
	color: #fff;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 21px);
	margin-bottom: 0.1em;
}
.footer-tel_a{
	background: #fff;
	line-height: 0.7;
	padding: 0.5em 0;
	width: 9em;
	display: inline-block;
	font-size: clamp(18px, 3vw, 28px);
	border-radius: 4em;
	margin: 0 5px;
	font-weight: 900;
}
.footer-tel_a small{
	font-weight: 700;
	display: inline-block;
	vertical-align: 0.05em;
	font-size: clamp(16px, 1.4vw, 18px);
}
.footer-tel_a:hover{
	background: var(--red);
	color: #fff;
}
.footer-tel_a:hover small{
	color: #fff;
}
.footer-open_hour{
	text-align: center;
	color: #fff;
	padding: 0.2em;
	font-size: clamp(16px, 1.5vw, 21px);
	font-weight: 700;
}
.footer-contact{
	background: var(--yellow);
	display: inline-block;
	line-height: 0.7;
	padding: 1em 0;
	width: 19em;
	border-radius: 4em;
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 700;
	margin-top: 0.5em;
}
.footer-contact:hover{
	background: var(--red);
	color: #fff;
}
@media screen and (max-width: 980px) {
	.footer-content{
		justify-content: center;
	}
}

.footer{
	padding: 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-logo{
	width: clamp(250px, 30vw, 340px);
	text-align: right;
	margin-right: 1em;
}
.footer-logo small{
	display: block;
	font-size: clamp(10.8px, 1.2vw, 12px);
	letter-spacing: 0.1em;
	margin-bottom: 0.1em;
}
.foote-nav{
	flex: 1;
	text-align: right;
}
.foote-nav a{
	font-size: clamp(13px, 1.1vw, 14px);
	margin-right: 1em;
}
.foote-nav a:hover{
	color: var(--red);
}
@media screen and (max-width: 980px) {
	.footer-logo{
		text-align: left;
	}
	.footer-logo small{
		letter-spacing: 0;
        margin-bottom: 0.5em;
        text-align: center;
	}
}
@media screen and (max-width: 680px) {
	.footer{
		display: block;
	}
	.footer-logo{
		margin: 1em auto;
	}
	.foote-nav{
		text-align: center;
	}
	.foote-nav a{
		margin: 0 0.5em;
	}
}



/*TOTOP*/
#totop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 99999;
}
#totop i{
    font-size: clamp(38px, 4vw, 54px);
    color: var(--gold);
}
#totop:hover{
	transform: scale(1.2,1.2)
}
#totop:hover i{
	transform: scale(1.1,1.1)
}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 680px) {
	#totop {
		bottom: 2em;
		right: 0.5em;
	}
}