:root{
--ch-blue:#0053CF;
--ch-red:#f14116;
--ch-dred:#f0542c;
--ch-black:#252323;
--bc-black:#2c2a2a;
--bc-gray:#efefef;
--bc-lgray:#f8f8f8;
--min-50:min(2.60416vw, 50px);
--min-100:min(5.2083vw, 100px);
--sp-dffs:3.6rem;
--sp-lgfs:4.1rem;
}


html{
font-size:min(0.63172vw, 10px);
}

body{
line-height: 1.8;
font-family: 'lotus-eden', 'Noto Sans JP', sans-serif;
font-feature-settings: "palt" 1;
}

p{
font-weight: 500;
}

body > input[type='checkbox']{
display: none;
}

::selection{
color: #fff;
background-color:var(--ch-dred);
}

@media screen and (max-width:900px){
html{
font-size: 1vw;
}
}

#header{
position: sticky;
z-index: 1000;
top: 0;
overflow: hidden;
height: 90px;
}

#header::after{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.8);
backdrop-filter: blur(7px);
width: 100%;
height: 100%;
}

#header .content{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1920px;
height: 100%;
margin: auto;
padding: 0 0 0 15px;
}

#header h1{
margin-right:auto;
padding: 15px 0;
}

#header h1 img{
height: 60px;
}

#header .content > nav {
z-index: 10;
position: relative;
display: flex;
align-items: center;
}


#header .content > nav > ul{
display: flex;
align-items: center;
height: 6rem;
font-size: 1.5rem;
list-style: none;
}

#header li{
margin-right: 3em;
font-weight: 700;
}


#header li:last-child{
margin:0;
}

#header a{
transition: all 0.3s ease-in-out;
}

#header li a:link,
#header li a:visited{
color: #000;
text-decoration-color: rgba(0,0,0,0);
}

#header a:hover{
color:var(--ch-blue);
text-decoration-color: var(--ch-blue);
}

#header .contact-btn{
order: 2;
margin-left: auto;
font-size: 1.8rem;
}

#header .content > .contact-btn{
height: 100%;
}

#header .content > .contact-btn a{
display: flex;
align-items: center;
height: 100%;
padding-right: 60px;
margin-right: -13px;
transform: skewX(-15deg);
}

#header .content > .contact-btn a:link,
#header .content > .contact-btn a:visited{
background-color: var(--ch-red);
text-decoration-color: var(--ch-red);
}

#header .content > .contact-btn a:hover{
background-color: var(--bc-black);
color: #fff;
text-decoration-color: #fff;
}

#header .content > .contact-btn span{
display: block;
transform: skewX(15deg);
}

#header .content > .contact-btn span:first-child img{
height: 2.5rem;
margin-right: 0.3em;
padding-bottom: 0.3em;
vertical-align: middle;
}

#header nav .contact-btn a{
}

#header nav .contact-btn a:link,
#header nav .contact-btn a:visited{
}

#header nav .contact-btn a:hover,
#header nav .contact-btn a:active{
background-color: var(--ch-dred);
color: #fff;
text-decoration-color: #fff;
}

#header label{
position: relative;
z-index: 200;
display: none;
background-color: var(--bc-black);
width: 15vw;
height: 15vw;
}

#header label span{
position: absolute;
left: 20%;
background-color:#fff;
width: 60%;
height: 2px;
transition: all 0.3s ease-in-out;
}

#header label span:nth-child(1){
top: 35%;
}
#header label span:nth-child(2){
top: 50%;
}
#header label span:nth-child(3){
top: 65%;
}


input:checked + #header label span:nth-child(1){
top:50%;
transform: rotate(45deg);
}

input:checked + #header label span:nth-child(2){
opacity: 0;
}

input:checked + #header label span:nth-child(3){
top:50%;
transform: rotate(-45deg);
}



#header .sp{
position: fixed;
top: 0;
left: -100%;
display: none;
background-color:var(--bc-black);
width: 50%;
height: 100%;
padding: 25vw 5vw 10vw 5vw;
transition: all 0.3s ease-in-out;
opacity: 0;
}

#header .sp{
display: block;
text-align: center;
}

#header .sp .logo{
width: 20vw;
margin: 0 auto 10vw auto;
}

#header .sp .logo img{
width: 100%;
height: auto;
}

#header .sp ul{
display: inline-block;
margin-bottom: 5vw;
line-height: 1;
font-size: 3rem;
list-style: none;
}

#header .sp ul a{
display: block;
padding:1em 0;
}

#header .sp ul a:link,
#header .sp ul a:visited{
color: #fff;
}

#header .sp li{
margin-right: 0;
}

#header .sp  .contact-btn a:link,
#header .sp  .contact-btn a:visited{
background-color: var(--ch-dred);
text-decoration-color: var(--ch-dred);
}

#header .sp  .contact-btn a:hover,
#header .sp  .contact-btn a:active{
background-color:#fff;
color: var(--ch-dred);
text-decoration-color:var(--ch-dred);
}

#header .sp .contact-btn{
margin:0 0 2rem 0;
}


#header .sp address{
color: #fff;
font-size: 2.5rem;
text-align: center;
}

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

#header{
overflow: visible;
height: auto;
padding: 0;
}

#header .content{
justify-content: space-between;
flex-wrap: wrap;
width: auto;
max-width: initial;
padding: 0;
}

#header h1{
display: flex;
align-items: center;
order: 2;
margin-right:0;
padding:0;
}

#header h1 img{
width: auto;
height:9vw;
}

#header .content > nav{
order: 1;
}

#header .content > nav > ul{
display: none;
}

#header label{
display: block;
margin:0;
}

#header li{
margin-right: 1em;
}

#header .contact-btn{
font-size: 3rem;
}

#header .content > .contact-btn{
order: 3;
margin: 0;
font-size:2.7rem;
}

#header .content > .contact-btn{
height: 15vw;
}

#header .content > .contact-btn a{
margin-right: 0;
padding:0 1.853em;
}

#header .content > .contact-btn a,
#header .content > .contact-btn span{
transform: skewX(0);
padding-top: 0;
}

#header .content > .contact-btn span:last-child{
display: none;
}


#header .content > .contact-btn span:first-child{
display: inline-block;
}

#header .content > .contact-btn span:first-child img{
height: 5vw;
padding: 0;
margin: 0;
vertical-align: middle;
}

#header .content > .contact-btn a:hover{
background-color:var(--ch-dred);
color:#fff;
text-decoration-color:var(--ch-dred);
}

#header .content > .contact-btn a:active{
background-color: var(--bc-black);
color: #fff;
text-decoration-color: #fff;
}

input:checked + #header .sp{
left: 0;
opacity: 1;
}


}


/**
CTA
**/

.cta{
position: relative;
z-index: 10;
display: flex;
flex-wrap: wrap;
background-image: url(../images/home/cta-bg.webp);
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
height: min(18.75vw, 360px);
}

.cta div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
}

.cta div:nth-of-type(1){
background-color: rgba(160,40,15,0.9);
}

.cta div:nth-of-type(2){
background-color: rgba(32,24,24,0.7);
}

.cta h2{
color: #fff;
line-height: 1.4;
font-size: 4.5rem;
text-align: center;
}


.contact-btn{
line-height: 1;
font-size:2.8rem;
font-weight:900;
}

.contact-btn a{
display: inline-block;
background-color: var(--ch-red);
padding: 1em 3em 0.8em 3em;
text-align: center;
transition: all 0.2s ease-in-out;
}

.contact-btn a:link,
.contact-btn a:visited{
color: #fff;
text-decoration-color: var(--ch-red);
}

.contact-btn a:hover{
background-color:#fff;
color: var(--ch-red);
}

.cta div:last-child{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--bc-black);
width: min(7.581vw, 120px);
height: min(7.581vw, 120px);
margin: auto;
transform: rotate(45deg);
}

.cta div:last-child img{
width: auto;
height: 66.67%;
margin-top: -3%;
transform: rotate(-45deg);
}

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

.cta{
flex-direction: column;
background-size: cover;
background-attachment:unset;
background-position: right 10%;
height: 50vw;
}

.cta div{
width: 100%;
height: 50%;
}

.cta h2{
padding-bottom: 1em;
font-size: 4rem;
}

.cta h2 br{
display: none;
}

.cta div:nth-child(1){
background-color: rgba(32,24,24,0.8);
height: 60%;
}
.cta div:nth-child(2){
background-color: rgba(32,24,24,0.8);
height: 40%;
}

.cta div:last-child{
width: 10vw;
height: 10vw;
}

}




/**
FOOTER
**/

#footer{
position: relative;
z-index: 10;
background-color: #fff;
padding: 13rem 0 13rem 0;
}

#footer h1,
#footer p{
text-align: center;
}

#footer h1{
margin-bottom: 3rem;
}

#footer p{
font-size: 1.4rem;
}

#copyright{
background-color: #fff;
padding-bottom: 2rem;
font-size: 1.4rem;
text-align: center;
}

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

#footer p{
font-size: 2.2rem;
}

#copyright{
font-size: 2.2rem;
}

}