*{margin:0;padding:0;box-sizing:border-box;font-family:"Noto Sans JP",sans-serif;font-optical-sizing:auto;font-style:normal}
body{overflow-x:hidden}
p{font-size:14px;letter-spacing:3px;line-height:25px}
main{max-width:1280px;margin:0 auto}
header{height:80px;width:calc(100vw - 40px);max-width:1280px;margin:0 auto;align-items:center;display:flex;justify-content:space-between}
header a{text-decoration:none}
.header .header-logo{align-items:center;height:40px}
.header .header-logo img{height:40px}
.header .header-contact{display:flex;width:300px;height:60px;background-color:#F83737;border-radius:30px;text-align:center;align-items:center;color:#fff;font-size:24px;letter-spacing:5px;justify-content:center;border:2px solid #F83737;transition:.3s}
.header .header-contact:hover{background-color:#fff;color:#F83737}
.main-hero{height:80vh;width:100%;margin:0 auto}
.main-hero .hero-glid{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.main-hero .hero-text{display:flex;flex-flow:column;margin-left:20px;z-index:100}
.main-hero .hero-text h2{font-size:60px;letter-spacing:10px;margin-bottom:20px;white-space:nowrap}
.main-hero .hero-img{display:grid;grid-template-columns:1fr}
.main-hero .hero-img .hero-img-1{margin:50px 0 0 auto;position:relative}
.main-hero .hero-img .hero-img-1::after{content:"";position:absolute;width:150px;height:150px;background-color:#F83737;top:-30px;left:-220px}
.main-hero .hero-img .hero-img-2{position:relative}
.main-hero .hero-img .hero-img-2::after{content:"";position:absolute;width:150px;height:150px;background-color:#F83737;bottom:-30px;left:500px}
.message{padding-top:200px;width:calc(100% - 50px);margin:0 auto}
.message h2{font-size:36px}
.message p{padding:50px;font-size:20px;line-height:50px}
.message .message-kubo{padding:0;text-align:right}
.about{margin-top:200px}
.about .about1{display:flex;justify-content:space-between;width:calc(100% - 50px);margin:0 auto}
.about .about1 .about1-text h2{margin-bottom:20px;font-size:36px}
.about .about1 .about1-img{margin-top:20px}
.about .about1 .about1-img img{width:100%}
.about .about2{width:calc(100% - 50px);margin:200px auto}
.about .about2 h2{font-size:36px}
.about .about2 .scope{width:calc(100% - 20px);margin:0 auto;height:200px;background-color:#F83737;border-radius:15px;margin-top:30px;display:flex;align-items:center}
.about .about2 .scope p{color:#fff;margin-left:100px}
.about .about3{margin-bottom:50px}
.about .about3 .about3-bg{width:100%;background-color:#F83737;border-radius:0 100px 0 0;position:relative}
.about .about3 .about3-bg::after{content:"";height:100%;width:1000px;background-color:#F83737;position:absolute;top:0;right:100%}
.about .about3 .about3-bg .about-cards{display:grid;grid-template-columns:1fr 1fr 1fr;padding-top:100px;padding-bottom:100px}
.about .about3 .about3-bg .about-card{text-align:center}
.about .about3 .about3-bg .about-card p{margin-bottom:50px}
.about .about3 .about3-bg .about-card img{max-width:300px;width:calc(100% - 50px)}
.about .about-link{width:300px;margin:0 50px 0 auto}
.about .about-link a{text-decoration:none;display:flex;width:300px;height:60px;background-color:#F83737;border-radius:30px;text-align:center;align-items:center;color:#fff;font-size:24px;letter-spacing:5px;justify-content:center;border:2px solid #F83737;transition:.3s}
.about .about-link a:hover{background-color:#fff;color:#F83737}
.works{margin-top:200px;width:calc(100% - 50px);margin:200px auto}
.works h2{font-size:36px}
.works .works-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:50px}
.works .works-card{width:100%;height:420px;margin:0 auto;text-align:center;border-radius:15px;border:3px solid #F83737;cursor:pointer;transition:.3s}
.works .works-card:hover{background-color:#F83737}
.works .works-card img{width:calc(100% - 50px);margin-top:25px;max-width:500px}
.works .works-card h3{font-size:24px;margin-top:25px}
.qa{margin-top:200px}
.qa h2{margin-bottom:100px;font-size:36px}
.qa .qa-item{margin-bottom:30px}
.qa .qa-block{width:calc(100% - 50px);margin:0 auto;background-color:#F83737;height:80px;border-radius:40px;display:flex;color:#fff;align-items:center;cursor:pointer}
.qa .qa-block span{font-size:30px;margin-right:30px;margin-left:70px}
.qa .qa-block p{font-size:24px}
.qa .qa-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;border-radius:0 0 20px 20px;padding:0 70px}
.qa .qa-answer p{font-size:20px;color:#333;padding:20px 0}
.qa .qa-item.active .qa-answer{max-height:1000px;padding:0 70px 20px}
footer{margin-top:100px;width:100vw;height:500px;background-color:#F83737;border-radius:0 100px 0 0;padding-top:100px}
footer .footer-content{width:calc(100% - 20px);margin:0 auto;max-width:1280px}
footer .footer-logo{margin-bottom:50px}
footer .footer-logo img{width:354px}
footer .footer-text{color:#fff}

/* media queries */
@media (max-width:900px){
  header{height:50px}
  .header .header-logo{height:20px}
  .header .header-logo img{height:20px}
  .header .header-contact{height:40px;width:200px;font-size:18px}
  .main-hero .hero-text h2{font-size:40px}
  .works .works-cards{grid-template-columns:1fr}
  .works .works-card{height:500px}
  .qa .qa-block span{font-size:20px;margin-left:10px;margin-right:10px}
  .qa .qa-answer p{font-size:16px}
}
@media (max-width:700px){
  .main-hero .hero-glid{grid-template-columns:1fr}
  .main-hero .hero-text{order:2}
  .about .about2 .scope p{margin-left:20px}
}
@media (max-width:500px){
  .header .header-logo{height:15px}
  .header .header-logo img{height:15px}
  .header .header-contact{height:30px;width:150px;font-size:14px}
  .main-hero .hero-text h2{font-size:22px}
  .main-hero .hero-img .hero-img-1 img{width:250px}
  .main-hero .hero-img .hero-img-2 img{width:200px}
  .main-hero .hero-img .hero-img-2::after{width:70px;height:70px;left:220px}
  .message p{padding:10px;font-size:16px}
  .about .about3 .about3-bg .about-cards{grid-template-columns:1fr}
  .qa .qa-block p{font-size:16px}
  .qa .qa-answer{padding:0 35px}
  .qa .qa-item.active .qa-answer{padding:0 35px 20px}
}