@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi&display=swap');
:root{
	--black: rgba(31,31,31,1);
	--red: rgba(215,0,0,1);
    --red10: rgba(215,0,0,0.1);
	--green: rgba(30,113,3,1);
    --green10: rgba(30,113,3,0.1);
	--orange: rgba(245,145,0,1);
    --orange10: rgba(245,145,0,0.1);
	--purple: rgba(107,0,142,1);
    --purple10: rgba(107,0,142,0.1);
    --grass: rgba(136,165,65,1);
    --grass10: rgba(136,165,65,0.1);
    --beige: #f0d06e;
    --yellow: rgba(248,188,0,1);
    --yellow10: rgba(248,188,0,0.1);
	--footer: #85b06e;
    --line: #07b53b;
	--cream: #f4f2ed;
}
* {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-style: normal;
	color: var(--black);
}
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.8vw, 17px);
	line-height: 1.6;
}
.kaisei{
	font-family: "Kaisei HarunoUmi", serif;
	font-weight: 400;
	font-style: normal;
}
small{
	font-size: clamp(13px, 1.1vw, 16px);
	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%;
}
/*
body:before,
body:after {
	content: "";
	position: fixed;
	top: 0;
	width: clamp(110px, 20vw, 400px);
	height: clamp(110px, 20vw, 400px);
	pointer-events: none;
	z-index: 999;
}
body:before{
	left: 0;
	background: url("../img/header.webp") top left / contain no-repeat;
	background-size: 100%;
}
body:after{
	right: 0;
	background: url("../img/header.png") top left / contain no-repeat;
	background-size: 100%;
	transform: scaleX(-1);
}
*/
.wrapper{
	width: 90%;
	margin-inline: auto !important;
}
.wrap{
	width: 90%;
	max-width: 1480px;
	margin-inline: auto !important;
}
main{
    padding: 2em 0 0 0;
}
.shoku{color: var(--red);}
.hin{color: var(--green);}
.oo{color: var(--orange);}
.ee{color: var(--purple);}
.em{color: var(--grass);}
.shadow{
	filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}
.btn{
	width: 7em;
	height: 7em;
	border-radius: 50%;
	background: #eee;
	line-height: 1.1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 0.5em;
	font-family: "Kaisei HarunoUmi", serif;
	color: #fff;
	margin: 0 auto;
	font-size: clamp(18px, 2vw, 24px);
}
.page-h3,
.page-h3 span{
	font-size: clamp(34px, 3.7vw, 48px);
	line-height: 1.2;
	font-family: "Kaisei HarunoUmi", serif;
}
.page-h3 small{
	display: block;
	font-size: clamp(16px, 1.4vw, 24px) !important;
	font-family: "Kaisei HarunoUmi", serif;
	line-height: 1;
}
.page-h3 small span{
	font-size: clamp(16px, 1.4vw, 24px) !important;
	font-family: "Kaisei HarunoUmi", serif;
}
@media screen and (max-width: 780px) {

}
@media screen and (max-width: 480px) {
    main{
        padding: 1em 0 0 0;
    }
}

/*HEADER*/
.header{
	padding: 1em;
}
.header-h1_a,
.header-h1_a span{
	font-family: "Kaisei HarunoUmi", serif;
	font-style: normal;
	font-size: clamp(28px, 6vw, 68px);
}
.gnav{
	position: sticky;
    top: 0;
	left: 0;
	width: 100%l
}
.gnav-a{
	display: inline-block;
	font-family: "Kaisei HarunoUmi", serif;
	font-style: normal;
	font-size: clamp(14px, 2.4vw, 24px);
	padding: 0 1em;
	line-height: 1;
	border-right: 1px solid var(--black);
}
.gnav-a:last-child{
	border-right: none;
}
.gnav-a:hover{
	color: var(--red);
}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 480px) {
	.gnav-a{
		padding: 0 0.5em;
	}
}


/*FOOTER*/
footer {
    position: relative;
    text-align: center;
    background: var(--cream);
    overflow: hidden;
}
.term + footer,
.frontbites + footer,
.contact + footer,
.case-archive + footer,
.oem + footer{
    background: #fff;
}
footer:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    inset: 0 0 auto 0;
    height: 70vw;
    background: var(--grass);
    clip-path: ellipse(120% 70vw at 50% 100%);
    z-index: 1;
}
.footer-nav{
    padding: 3em 0 100px;
    position: relative;
    z-index: 2;
}
.footer-copy,
.footer-nav a{
	display: inline-block;
	padding: 0 1em;
	line-height: 1em;
	color: #fff;
	font-size: clamp(12px, 1.1vw, 14px);
}
.footer-nav a{
    border-right: 1px solid #fff;
}
.footer-nav a:hover{
    color: var(--yellow);
}
.footer p{
    margin: 0.5em auto 0;
}
.footer p br{
    display: none;
}
.footer p small{
    display: inline-block;
    color: #fff;
    background: rgba(255,255,255,0.2);
    line-height: 1.4;
    padding: 0.3em 1em;
}
@media screen and (max-width: 580px) {
    .footer-copy{
        display: block;
    }
    .footer-nav a{
        margin-bottom: 1em;
    }
    .footer-nav a:last-of-type{
        border-right: none;
    }
    .footer p{
        margin: 1em auto 0;
        background: rgba(255,255,255,0.2);
    }
    .footer p br{
        display: block;
    }
    .footer p small{
        background: none;
        padding: 0.5em 0.3em;
    }
}


/*CV*/
.cv{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 1em 0 0;
    text-align: center;
    background: transparent;
    overflow: hidden;
}
.cv:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    inset: 0 0 auto 0;
    height: 70vw;
    background: var(--grass);
    clip-path: ellipse(100% 70vw at 50% 100%);
    z-index: 1;
}
.cv-p{
    width: 100%;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: clamp(12px, 1.1vw, 14px);
    margin: 0.5em 0;
    line-height: 1.2;
    z-index: 2;
}
.cv-p:before,
.cv-p:after{
    display: inline-block;
    content: "/";
    color: #fff;
}
.cv-p:before{
    transform: scale(1, -1);
    vertical-align: 0.2em;
    padding-right: 0.2em;
}
.cv-p br{
    display: none;
}
.cv-nav{
    display: flex;
    justify-content: center;
    padding-bottom: 1em;
}
.cv a{
    width: clamp(24px, 4vw, 30px);
    margin: 0 1em;
    position: relative;
    z-index: 2;
}
.cv-insta:hover{
    filter: brightness(0) saturate(100%) invert(29%) sepia(77%) saturate(2930%) hue-rotate(312deg) brightness(96%) contrast(92%);
}
.cv-fb:hover{
    filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(2544%) hue-rotate(198deg) brightness(96%) contrast(94%);
}
.cv-x:hover{
    filter: brightness(0) saturate(100%);
}
.cv-mail:hover{
    filter: brightness(0) saturate(100%) invert(14%) sepia(93%) saturate(7489%) hue-rotate(1deg) brightness(102%) contrast(118%);
}
@media screen and (max-width: 480px) {
    .cv a{
        margin: 0 0.7em;
    }
    .cv-p:before,
    .cv-p:after{
        display: none;
    }
}


/*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;
	}
}