@keyframes bganim {
0% {
	transform: scale(1);
	}
50% {
	transform: scale(2);
	}
100% {
	transform: scale(1);
	}
}

body{
overflow-x: hidden;
}

section{
position: relative;
}

#security > .content > p:first-child,
#service > .content > p:first-child,
#flow > .content > p:first-child,
#qanda > .content > p:first-child,
#contact > .content > p:first-child,
#incident article > p:first-child,
#incident-other .content > p:first-child{
position: absolute;
z-index: 10;
color: transparent;
line-height: 1;
font-family: 'lotus-eden';
font-size: min(12.5vw, 240px);
font-weight: 300;
opacity: 0.3;
-webkit-text-stroke-width:1.5px;
text-stroke-width:1.5px;
}

section h2{
position: relative;
z-index: 20;
margin-bottom: 1.5em;
font-size: 5rem;
font-weight: 900;
text-align: center;
}

section h3{
font-weight: 900;
}

section li h3,
section li h4{
margin-bottom: 0.6em;
font-size: 2.1rem;
font-weight: 900;
text-align: center;
}

section li p,
section article p{
font-size: 2rem;
text-align: justify;
}

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

#security > .content > p:first-child,
#service > .content > p:first-child,
#flow > .content > p:first-child,
#qanda > .content > p:first-child,
#contact > .content > p:first-child,
#incident article > p:first-child,
#incident-other .content > p:first-child{
font-size: 13rem;
-webkit-text-stroke-width:1px;
text-stroke-width:1px;
}

section h2{
font-size: 6.2rem;
}

section li h3,
section li h4{
font-size: 4rem;
}

section li p,
section article p{
font-size: var(--sp-dffs);
}

}

/**
MV
**/

#mv{
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100%;
height: calc(100vh - 90px);
}

#mv::after{
content: "";
position: fixed;
z-index: 1;
display: block;
background-color: #fff;
background-image: url(../images/home/circle-bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
width: 100%;
height: 100%;
animation:bganim 60s ease-in-out infinite;
}


#mv h1{
position: relative;
z-index: 10;
color: #333;
margin: 0.4em 0 0.8em 0;
line-height: 1.2;
font-size: 5.5rem;
font-weight:900;
text-align:center;
}

h1 strong{
color:var(--ch-red);
font-weight:900;
}

#mv p{
position: relative;
z-index: 10;
}


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

#mv{
background-size: 100% 80%;
height: calc(100vh - 15.128vw);
}

#mv h1{
line-height: 1.4;
font-size: 6.2rem;
}

#mv img{
width: 33vw;
}

}



#security{
position: relative;
z-index: 10;
background-image: url(../images/home/security-bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: var(--min-50);
}

#security .content > p:first-child{
top: 11rem;
right: 0;
left: 0;
text-shadow: none;
width: 100%;
margin: auto;
text-align: center;
-webkit-text-stroke-color:#fff;
text-stroke-color:#fff;
}

#security .content{
max-width: 1500px;
padding: 17rem 0 13rem 0;
margin: auto;
}

#security h2{
color: var(--ch-red);
}

#security .content > p{
color: #fff;
text-shadow: 0 0 3px rgba(0,0,0,1);
font-size: 2.5rem;
text-align: center;
}

#security ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin:2em 0 7rem 0;
font-size: 1.8rem;
list-style: none;
}


#security li{
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--ch-dred);
width: 22.6%;
height: 20.581em;
padding:3em 1.5em 3em 1.5em;
}

#security li ::selection{
background-color:var(--bc-black);
}

#security li:nth-child(1),
#security li:nth-child(2){
transform: skewY(5deg);
}

#security li:nth-child(3),
#security li:nth-child(4){
transform: skewY(-5deg);
}

#security li:nth-child(1) h3,
#security li:nth-child(1) p,
#security li:nth-child(2) h3,
#security li:nth-child(2) p{
transform: skewY(-5deg);
}

#security li:nth-child(3) h3,
#security li:nth-child(3) p,
#security li:nth-child(4) h3,
#security li:nth-child(4) p{
transform: skewY(5deg);
}

#security li:nth-child(2),
#security li:nth-child(3){
margin-top: 2.2%;
}


#security li h3,
#security li p{
color:#fff;
}


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

#security{
padding:0 var(--min-50) var(--min-50);
}


#security .content{
padding: 17rem 0 7rem 0;
}

#security .content > p:first-child{
top:10vw;
}

#security h2{
margin-bottom: 0.5em;
}

#security ul{
font-size: var(--sp-dffs);
}

#security li{
width: auto;
height: auto;
padding:1.3em;
}

#security li:nth-child(1),
#security li:nth-child(3){
transform: skewY(2deg);
}
#security li:nth-child(2),
#security li:nth-child(4){
transform: skewY(-2deg);
}

#security li:nth-child(1) h3,
#security li:nth-child(1) p,
#security li:nth-child(3) h3,
#security li:nth-child(3) p{
transform: skewY(-2deg);
}

#security li:nth-child(2) h3,
#security li:nth-child(2) p,
#security li:nth-child(4) h3,
#security li:nth-child(4) p{
transform: skewY(2deg);
}

#security li:nth-child(1),
#security li:nth-child(2),
#security li:nth-child(3){
margin-bottom:var(--min-50);
}

#security li:nth-child(2),
#security li:nth-child(3){
margin-top: 0%;
}

#security .content > p{
font-size: var(--sp-lgfs);
text-align: justify;
}

#security p br{
display: none;
}

}

/**
INCIDENT
**/

#incident{
position: relative;
z-index: 11;
background-color: var(--ch-dred);
padding: var(--min-50);
}

#incident::after{
content: "";
position: absolute;
z-index: 10;
bottom: calc(-7vw + 1px);
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
height:0;
border-top:7vw solid var(--ch-dred);
border-right:50vw solid transparent;
border-left:50vw solid transparent;
}

#incident article:not(:last-child) .content{
position: relative;
z-index: 20;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1500px;
margin: auto;
padding: min(10.1467vw, 200px) 0 0 0;
}

#incident article:nth-of-type(2).content{
padding:var(--min-50) 0 min(10.1467vw, 200px) 0;
}

#incident article{
padding:var(--min-50) var(--min-100) var(--min-100);
}

#incident article:first-child{
position: relative;
background-color: var(--bc-gray);
margin-bottom: min(31.875vw, 612px);
}

#incident article:nth-of-type(2){
position: relative;
background-color: var(--ch-dred);
padding:0 var(--min-100) calc(var(--min-100) * 1.5) var(--min-100);
margin-bottom: var(--min-100);
}

#incident article:nth-of-type(2)::selection{
background-color:var(--bc-black);
}

#incident article:first-child > p:first-child{
top: var(--min-100);
right: var(--min-100);
-webkit-text-stroke-color: #999;
text-stroke-color: #999;
}

#incident article:nth-of-type(2)> p:first-child{
bottom:0;
left: var(--min-50);
-webkit-text-stroke-color: #fff;
text-stroke-color: #fff;
}


#incident h2{
text-align: left;
}

#incident h3{
margin-bottom: 0.7em;
font-size: 3.7rem;
}

#incident h3 br{
display: none;
}

#incident .content > div:first-child{
width: 60%;
}

#incident .content > div:nth-child(2){
width: 40%;
text-align: center;
}

#incident .content > div:nth-child(2) img{
box-shadow: 2rem 2rem 2rem rgba(0,0,0,0.2);
max-width: 100%;
height: auto;
transform: perspective(min(31.25vw, 600px)) rotateY(-27deg);
}

#incident .content > div:last-child{
width: 100%;
}

#incident .content p{
text-align: justify;
}

#incident .content div:first-child p{
margin-bottom: 2em;
}


#incident .content p + p{
margin-top: 0.7em;
}

#incident .notice{
position: relative;
height: min(33.9583vw, 652px);
margin-top: max(-31.875vw, -612px);
}

#incident .notice::before{
content:"";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: var(--bc-gray);
display: block;
width: 100%;
height: min(31.875vw, 612px);
margin: max(-14.948vw, -287px) auto 0 auto;
transform: skewY(-12.5deg);
transform-origin:center;
}

#incident .notice p{
position: absolute;
display: flex;
top: 0;
right: 0;
left: 0;
bottom: 0;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--bc-black);
color: #fff;
width: min(24.5833vw, 472px);
height: min(24.5833vw, 472px);
margin:auto;
font-size: 3.6rem;
font-weight: 900;
transform: rotate(32.5deg);
transform-origin:center;
}

#incident .notice p span{
display: inline-block;
text-align: center;
transform: rotate(-32.5deg);
}



#incident article:last-child{
position: relative;
background-color: var(--bc-gray);
margin-bottom: var(--min-100);
padding: var(--min-100);
}

#incident article:last-child .content{
padding: 0;
}

#incident article:last-child h2 span,
#incident article:last-child h3 span,
#incident article:last-child h4 span,
#incident article:last-child p span{
display: inline-block;
background-color: #fff;
}

#incident article:last-child h3{
margin-bottom: 0.7em;
font-size: 3.7rem;
}

#incident article:last-child h4{
margin:1em 0 0.4em 0;
font-size: 3rem;
}

#incident article:last-child p{
margin: 1em 0;
}

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


#incident h2{
margin-bottom: 1em;
}

#incident h3{
font-size: 5.2rem;
}

#incident h3 br{
display: block;
}

#incident article:first-child{
padding-bottom: 10vw;
}
#incident article:nth-of-type(2){
padding-top: 5vw;
}

#incident article .content{
padding: 7rem 0;
}

#incident .content > div:first-child{
width: 100%;
}

#incident .content div:first-child p{
margin-bottom: var(--min-100);
}

#incident .content > div:nth-child(2){
width: 100%;
margin-bottom: var(--min-100);
}

#incident .content > div:nth-child(2) img{
max-width: 100%;
height: auto;
transform: perspective(min(31.25vw, 600px)) rotateY(0);
}


#incident .notice p{
width: 34vw;
height: 34vw;
font-size: 2.95rem;
}

#incident article:last-child h2{
margin-bottom: 1em;
}

#incident article:last-child h3{
font-size: 5.2rem;
}

#incident article:last-child h4{
font-size: 4.2rem;
}


}


/**
INSURANCE
**/

#insurance{
position: relative;
z-index: 10;
background-color: #574C45;
padding:calc(var(--min-100) + var(--min-50)) var(--min-100) var(--min-50);
}

#insurance .content{
max-width: 1500px;
padding: 8rem 0 8rem 0;
margin: auto;
}

#insurance h2{
color: #fff;
}

#insurance p{
color: #fff;
font-size: 2rem;
text-align: center;
}

#insurance p + p{
margin-top: 1em;
}

#insurance p img{
width: auto;
height:min(9.4445vw, 85px);
margin: 0 0.5em;
}

#insurance a:first-child img{
}

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

#insurance p{
font-size: var(--sp-lgfs);
text-align: justify;
}

#insurance p:last-child{
text-align: center;
}

}



/**
SERVICE
**/

#service{
position: relative;
z-index: 10;
background-image: url(../images/home/service-bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: var(--min-50);
}

#service .content > p:first-child{
top: 11rem;
right: 0;
left: 0;
text-shadow: none;
width: 100%;
margin: auto;
text-align: center;
-webkit-text-stroke-color:#fff;
text-stroke-color:#fff;
}


#service .content{
max-width: 1500px;
padding: 17rem 0 13rem 0;
margin: auto;
}

#service h2{
color: var(--ch-red);
}

#service h3{
color: #fff;
margin-bottom: 1em;
font-size: 4rem;
text-align: center;
}

#service p{
color: #fff;
text-shadow: 0 0 3px rgba(0,0,0,1);
}

#service ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 10rem 0;
font-size: 1.8rem;
list-style: none;
}

#service li{
background-color: var(--bc-black);
border: 1px solid var(--ch-red);
width: 22.6%;
height: min(20.4217vw, 339px);
padding:1.6em 1.5em 2em 1.5em;
}

#service h4{
color: var(--ch-red);
}

#service h4 br{
display: none;
}

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


#service .content{
padding:17rem 0 7rem 0;
}

#service .content > p:first-child{
top:10vw;
}

#service h2{
margin-bottom: 0.5em;
}

#service h4{
line-height: 1.4;
}

#service h4 br{
display: block;
}


#service ul{
font-size: var(--sp-dffs);
}

#service li{
width: 46vw;
height: auto;
padding:2em 1.3em 2em 1.3em;
}

#service li:nth-child(1),
#service li:nth-child(2){
margin-bottom: 3.2vw;
}

#service li:nth-child(2),
#service li:nth-child(3){
margin-top: 0%;
}

}


#qanda{
position: relative;
z-index: 10;
background-color: #232323;
padding:var(--min-50) var(--min-100);
}

#qanda .content > p:first-child{
top: 11rem;
right: 0;
left: 0;
text-shadow: none;
width: 100%;
margin: auto;
text-align: center;
-webkit-text-stroke-color:#fff;
text-stroke-color:#fff;
}


#qanda .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1500px;
padding: 17rem 0 13rem 0;
margin: auto;
}

#qanda h2{
color: var(--ch-red);
width: 100%;
}

#qanda article{
position: relative;
background-color: var(--bc-black);
border: 1px solid var(--ch-red);
width: 46.667%;
padding:2.4em 2.6em 2.4em 2.6em;
margin-bottom: min(5.208vw, 100px);
font-size: 1.8rem;
}


#qanda article::before{
content: "Q";
position:absolute;
z-index: 10;
top: 1.8em;
left: 1.8em;
display: inline-block;
color:var(--bc-black);
font-weight: 900;
line-height: 1;
font-size: 1.5em;
}

#qanda article::after{
content: "";
position:absolute;
top: 2em;
left: 2em;
display:inline-block;
background-color: var(--ch-dred);
width: 2.7em;
height: 2.7em;
font-size: 1em;
transform: rotate(45deg);
transform-origin: center;
}

#qanda h3{
color: var(--ch-red);
padding-left: 2.7em;
margin-bottom: 0.8em;
font-size: 1.3em;
text-align: justify;
font-weight: 900;
}


#qanda p{
color: #fff;
text-shadow: 0 0 3px rgba(0,0,0,1);
text-align: justify;
}

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

#qanda{
padding:0 var(--min-50) var(--min-50);
}

#qanda .content{
padding:17rem 0 7rem 0;
}

#qanda .content > p:first-child{
top:10vw;
}

#qanda h2{
margin-bottom: 0.5em;
}

#qanda article{
width: auto;
margin-bottom:  var(--min-50);
font-size: var(--sp-dffs);
}

#qanda article:last-child{
margin-bottom:0;
}

}


#contact{
position: relative;
z-index: 10;
background-color: var(--bc-lgray);
padding:var(--min-50) var(--min-100);
}

#contact .content > p:first-child{
top: 11rem;
right: 0;
left: 0;
text-shadow: none;
width: 100%;
margin: auto;
text-align: center;
-webkit-text-stroke-color:var(--ch-red);
text-stroke-color:var(--ch-red);
}

#contact .content{
padding: 17rem 0 13rem 0;
}

#contact h2{
color: var(--ch-red);
width: 100%;
}

#contact p{
font-size: 2rem;
text-align: center;
}

#contact h2 + p{
margin-bottom: 3em;
}

#contact #form{
background-color: #F1EFEF;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 980px;
margin: auto;
padding: 4.4em;
}

#contact .acon{
width: 100%;
}

#contact form{
width: 100%;
}

#contact h3{
width: 100%;
margin-bottom: 0.5em;
font-size: 2.5rem;
text-align: center;
}

#contact #form p{
width: 100%;
}

#contact .acon > :nth-of-type(1) br{
display: none;
}

#contact table{
border-top: 1px solid #ccc;
width: 100%;
font-size: 2.2rem;
}

#contact div + p,
#contact p + form,
#contact table + p,
#contact form p:first-child{
margin-top: 2em;
}


#contact p + table{
margin-top: 1em;
}

#contact tr{
border-bottom: 1px solid #ccc;
}

#contact td,
#contact th{
padding: 1em 1em 0.7em 1em;
}

#contact th{
white-space: nowrap;
}

#contact input,
#contact select,
#contact textarea{
font-size: 1em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
}

#contact input:not([type=radio]),
#contact select,
#contact textarea{
border:1px solid #ccc;
border-radius: 5px;
width: 100%;
padding: 0.3em;
line-height: 1.6;
}


#contact textarea{
min-height: 11.8em;
}

#contact input[type=submit]{
background-color: var(--bc-black);
color: #fff;
border: none;
width: 13em;
padding: 0.5em 0;
font-size: 3rem;
}

.spinner {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
border: 4px var(--bc-black) solid;
border-top: 4px var(--ch-dred) solid;
border-radius: 50%;
width: 40px;
height: 40px;
margin: auto;
animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}

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

#contact{
padding:0 var(--min-50) var(--min-50);
}

#contact .content{
padding:17rem 0 7rem 0;
}

#contact .content > p:first-child{
top:10rem;
}

#contact h2{
margin-bottom: 0.5em;
}

#contact p{
font-size: var(--sp-dffs);
}

#contact #form .thanks,
#contact #form .thanks + p{
text-align: justify;
}

#contact #form .thanks + p br,
#contact #form .thanks br{
display: none;
}

#contact .acon > :nth-of-type(1) br{
display: block;
}

#contact h3{
font-size: var(--sp-lgfs);
}

#contact table{
font-size: var(--sp-dffs);
}

#contact tr,
#contact th,
#contact td{
display: block;
width: 100%;
}

#contact tr{
padding: 1em 0;
}

#contact th,
#contact td{
padding: 0 1em;
}

}