@charset "UTF-8";
/* CSS Document */

#hero {
position: relative;
width: 100%;
}
#hero .copy {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#hero .copy > div {
position: absolute;
}
#topCopy h1 {
color: #c30d23;
font-weight: bold;
font-style: oblique;
font-family: "Cantarell", Arial, Helvetica, "sans-serif";
}
#topCopy p {
display: block;
}
.btn{
background: #111;
}
.btn a{
background-color: #fff;
color: #111;
display: block;
text-align: center;
font-weight: 600;
width: 60%;
padding: 5px;
}
#blog .btn,
#contact .btn{
border: 1px solid #111;
}
/*---------------
#works
---------------*/
#works ul {
margin: 0 auto;
}
#works ul li {
position: relative;
padding: 20px 30px;
}
#works ul li:nth-child(1) {
background: url("../images/service1.webp") no-repeat center;
background-size: cover;
}
#works ul li:nth-child(2) {
background: url("../images/service2.webp") no-repeat center;
background-size: cover;
}
#works ul li:nth-child(3) {
background: url("../images/service3.webp") no-repeat center;
background-size: cover;
}
#works ul li:before {
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
background: #111;
opacity: 0.7;
width: 100%;
height: 100%;
}
#works ul li a {
color: #fff;
}
#works ul li h4 {
position: relative;
font-weight: 600;
}
#works ul li p {
position: relative;
padding: 10px;
background: rgba(195,13,35,0.50);
}
/*---------------
#voice
---------------*/
#voice a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border: 1px solid #C30D23;
}
#voice a img:first-of-type{
border-radius: 50%;
width: 20%;
}
#voice a img.good{
position: absolute;
}
#voice a div h4{
text-align: center;
border-bottom: 1px solid #C30D23;
padding-bottom: 5px;
margin-bottom: 3px;
}
#voice a div span{
display: block;
text-align: center;
color: #C30D23;
}
/*---------------
#about
---------------*/
#about{
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fff;
}
#about:before,
#about:after{
display: block;
content: "";
position: absolute;
}
#about:before{
top: 0;
left: 0;
}
#about:after{
bottom: 0;
right: 0;
}
#about > div{
justify-content: space-between;
align-items: center;
}
#about h2 div {
font-weight: 600;
color: #000;
}
#about h2 span {
display: block;
}
/*---------------
#blog
---------------*/
#blog{
justify-content: space-between;
}
#blog h2 div {
font-weight: 600;
margin-bottom: 30px;
}
#blog ul li time{
padding: 5px 0;
}
#blog ul li h3{
padding-bottom: 5px;
}
/*---------------
#contact
---------------*/
#contact h2 div {
text-align: center;
font-weight: 600;
color: #C30D23;
}
#contact h2 div span{
display: block;
font-weight: 600;
color: #fff;
background-color: #C30D23;
padding: 10px 0;
}
#contact .inner{
position: relative;
background-image: url("../images/contact.webp");
background-repeat: no-repeat;
background-position: right;
}
#contact .inner > div{
position: absolute;
background: #fff;
}
#contact .inner > div h3{
font-weight: 600;
font-size: 2.0rem;
padding-bottom: 10px;
}
#contact .inner > div ul{
display: flex;
margin-bottom: 20px;
}
#contact .inner > div ul li i{
font-size: 3.0rem;
padding-right: 15px;
transition: .3s;
}
#contact .inner > div ul li i:hover{
color: #777;
transition: .3s;
}	

@media (max-width: 560px){
#voice,#about,#blog,#news  {
padding: 40px 0;
}
#hero {
height: 100vh;
}
#hero .slider img{
object-fit: cover;
width: auto;
height: 100vh;
}
#hero .copy{
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
}
#hero .copy div{
bottom: 10vh;
left: 5%;
}
#topCopy h1 {
font-size: 9vw;
padding-bottom: 20px;
}
#topCopy p {
font-size: 1.3rem;
padding-top: 10px;
color: #fff;
}
.btn{
width: 200px;
margin: 0 auto;
}
/*---------------
#works
---------------*/
#works ul.df{
width: 90%;
}
#works ul.df li {
margin-top: 20px;
}
#works ul.df li h4 {
padding-bottom: 10px;
}
/*---------------
#voice
---------------*/
#voice a{		
width: 80%;
padding: 15px 0;
}
#voice a img:first-of-type{
margin-right: 10px;
}
#voice a img.good{
top: -25px;
right: -25px;
width: 20%;
}
#voice a div h4{
font-size: 1.8rem;
}
#voice a div span{
font-size: 1.4rem;
}	
/*---------------
#about
---------------*/
#about{
background-image: url("../images/about_sp.webp");
}
#about h2 {
margin-bottom: 30px;
}
#about:before{
border-left: 50px solid #fff;
border-bottom: 70px solid transparent;
}
#about:after{
border-left: 50px solid transparent;
border-bottom: 70px solid #fff;
}
#about h2 div {
font-size: 3.0rem;
}
#about h2 span {
font-size: 1.4rem;
border-top: 5px solid #000;
padding-top: 7px;
}
/*---------------
#blog
---------------*/
#blog h2 div {
font-size: 3.0rem;
border-bottom: 5px solid #111;
}
#blog ul li {
padding-bottom: 20px;
}
#blog ul li:last-of-type{
padding-bottom: 0;
}
#blog ul li time{
font-size: 1.0rem;
}
#blog ul li h3{
font-size: 1.4rem;
}
#blog .btn{
margin: 20px auto 0;
}
/*---------------
#contact
---------------*/
#contact h2 div {
font-size: 3.0rem;
}
#contact h2 div span{
font-size: 1.8rem;
margin-top: 5px;
}
#contact .inner{
height: 50vh;
background-size: contain;
}
#contact .inner > div{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: calc(80% - 30px) ;
padding: 60px 0 60px 30px;
box-shadow: 10px 10px #C30D23;
}
}

@media (min-width: 561px){
.btn a{
top: 0;
left: 0;
transition: .6s;
}
.btn:hover{
background-color: #fff;
transition: .6s;
}
.btn:hover a{
transform: translateX(90px);
background-color: #111;
color: #fff;
transition: .6s;
}
#topCopy p {
font-size: 18px;
font-size: 1.8rem;
padding-top: 20px;
}
/*---------------
#works
---------------*/
#works ul.df, #blog ul.df {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#works ul {
max-width: 1200px;
}
#works ul.df li {
width: calc(33% - 60px);
}
#works ul li p {
font-size: 17px;
font-size: 1.7rem;
}
/*---------------
#voice
---------------*/
#voice a{
width: 340px;
padding: 15px;
}
#voice a img:first-of-type{
margin-right: 20px;
}
#voice a img.good{
top: -35px;
right: -60px;
width: 100px;
}
#voice a div h4{
font-size: 22px;
font-size: 2.2rem;
}
#voice a div span{
font-size: 18px;
font-size: 1.8rem;
}	
/*---------------
#about
---------------*/
#about{
background-image: url("../images/about_pc.webp");
}
#about:before{
border-left: 60px solid #fff;
border-bottom: 120px solid transparent;
}
#about:after{
border-left: 60px solid transparent;
border-bottom: 120px solid #fff;
}
#about h2 div {
font-size: 50px;
font-size: 5.0rem;
}
#about h2 span {
font-size: 16px;
font-size: 1.6rem;
border-top: 8px solid #000;
}	
/*---------------
#blog
---------------*/
#blog{
position: relative;
justify-content: space-between;
}
#blog > div{
width: 30%;
}
#blog h2 div {
font-size: 50px;
font-size: 5.0rem;
border-bottom: 8px solid #111;
}
#blog ul{
width: 65%;
}
#blog ul.df li {
width: 47%;
}
#blog ul li:after{
content: "";
display: block;
width: 0;
border-bottom: 7px solid #BFBFBF;
transition: .3s;
}
#blog ul li:hover:after{
width: 100%;
transition: .3s;
}
#blog ul li time{
font-size: 12px;
font-size: 1.2rem;
}
#blog ul li h3{
font-size: 16px;
font-size: 1.6rem;
}
#blog .btn{
position: absolute;
left: 0;
top: 170px;
}
/*---------------
#contact
---------------*/
#contact h2 div {
font-size: 50px;
font-size: 5.0rem;
}
#contact h2 div span{
font-size: 24px;
font-size: 2.4rem;
margin-top: 10px;
}
#contact .inner{
background-size: 50%;
}
#contact .inner > div{
left: 5%;
box-shadow: 15px 15px #C30D23;
}
}

@media screen and (min-width:561px) and ( max-width:799px) {
.btn{
width: 200px;
}
#voice,#about,#blog,#news {
padding: 60px 0;
}
#hero .copy div {
bottom: 5vh;
left: 5%;
}
#topCopy h1 {
font-size: 4.8rem;
padding-bottom: 24px;
}
#topCopy p {
font-size: 1.6rem;
padding-top: 12px;
}
#blog .btn{
width: 200px;
}
#about h2 {
width: calc(100% - 250px) ;
}
#contact .inner{
height: 430px;
}
#contact .inner > div{
top: 60px;
width: calc(70% - 210px);
padding: 60px 0 60px 90px;
}
}
@media (max-width:799px) {
#hero .copy{
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
}
#hero .copy p{
color: #fff;
}
}
@media (min-width: 800px){
.btn{
width: 250px;
transition: .6s;
}
#voice,#about,#blog,#news {
padding: 60px 0;
}
#hero {
height: 100vh;
}
#hero .slider img{
object-fit: cover;
width: auto;
height: 100vh;
}
#hero .copy {
background: url("../images/mask.svg") no-repeat;
background-size: cover;
}
#hero .copy div {
bottom: 10vh;
left: 7%;
}
#works ul li h4 {
font-size: 20px;
font-size: 2rem;
height: 60px;
padding-bottom: 20px;
}
#works ul li:nth-last-child(-n+2) a h4 {
line-height: 60px;
}
#blog .btn{
width: 250px;
}
#about h2 {
width: calc(100% - 300px) ;
}
#contact .inner{
height: 600px;
}
#contact .inner > div{
top: 150px;
width: calc(70% - 250px);
padding: 60px 0 60px 150px;
}
}

@media screen and (min-width:800px) and ( max-width:1280px) {
#topCopy h1 {
font-size: 50px;
font-size: 5rem;
padding-bottom: 30px;
}
}

@media (min-width: 1281px){
#topCopy h1 {
font-size: 60px;
font-size: 6rem;
padding-bottom: 40px;
}
}