@charset "UTF-8";

/* ! CSSの構成 とは ================================================== 

とは
解決すること
働き方改革
  
-------------------------------------------------- */
main {
  color: #fff;
  background: #36BFFF;
}
main > .container {
    max-width: 1080px;
}
main .container > section .h1_ttl {
  margin: 160px 0 50px;
}
main .container > section:first-of-type .h1_ttl{
  margin-top: 60px;
}
.h2_ttl {
  margin: 160px 0 12px;
}

@media screen and (max-width: 480px){
  main .container > section .h1_ttl {
  margin: 100px 0 50px;
}
}



/* ! とは ================================================== */
.explain {
  font: 600 16px/2em 'noto sans japanese';
  text-align: center;
}

.explain .tech_path {
  color: #fff;
  font-size: 130%;
  text-decoration: underline;
}

.explain .tech_path:hover {
  opacity: 0.8;
}


/* 特徴リスト */
.list_feature {
  margin: 80px auto 0;
}
.list_feature .img {
  width: 100px;
  height: 100px;
  background: blue;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: block;
  margin: 0 auto;
}
.list_feature li:nth-of-type(1) .img { background: url(../img/about/img_about_01.png);}
.list_feature li:nth-of-type(2) .img { background: url(../img/about/img_about_02.png);}
.list_feature li:nth-of-type(3) .img { background: url(../img/about/img_about_03.png);}
.list_feature li:nth-of-type(4) .img { background: url(../img/about/img_about_04.png);}


.list_feature .text {
  width: 100%;
  margin: 16px 0 0;
}
.list_feature .text p {
  font: 700 20px/1em 'noto sans japanese';
  text-align: center;
} 

@media screen and (max-width: 920px){
.list_feature .text p {
  font: 700 16px/1em 'noto sans japanese';
}
}
@media screen and (max-width: 768px){
  .list_feature .text p {
    font: 700 14px/1em 'noto sans japanese';
  }
}

@media screen and (max-width: 560px){
  .list_feature .img {
  width: 80px;
  height: 80px;
  }
  .explain {
    font: 600 13px/2em 'noto sans japanese';
    text-align: left;
  }
  
}



/* ! 解決すること ================================================== */
.about_resolve .img {
  max-width: 800px;
  margin: 0 auto 60px;
}
.about_resolve .ttl {
  font: 900 20px/1.4em 'noto sans japanese';
  margin: 0 0 16px;
}
.about_resolve .ttl.large {
  font-size: 24px;
  text-align: center;
}
.about_resolve p {
  font: 600 16px/1.6em 'noto sans japanese';
}

@media screen and (max-width: 560px){
  .about_resolve p {
  font: 600 14px/1.6em 'noto sans japanese';
}

}


/* ! 働き方改革 ================================================== */
.about_work .img {
  width: 100%;
  padding-top: 56.25%;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 0 20px;
}
.about_work li:nth-of-type(1) .img { background: url(../img/about/img_work_01.jpg);}
.about_work li:nth-of-type(2) .img { background: url(../img/about/img_work_02.jpg);}
.about_work li:nth-of-type(3) .img { background: url(../img/about/img_work_03.jpg);}

.about_work .ttl {
  font: 900 24px/1.4em 'noto sans japanese';
  margin: 0 0 12px;
  }

.about_work .list li {
  padding: 8px 0;
}
.about_work .list p {
  font: 600 16px/1.2em 'noto sans japanese';
}

@media screen and (max-width: 768px){
  .about_work .list li {
    padding: 5px 0;
  }
  
}
@media screen and (max-width: 540px){
  .about_work .ttl {
    font: 700 20px/1.4em 'noto sans japanese';
    margin: 0 0 10px;
  }
  .about_work .list p {
    font: 600 14px/1.2em 'noto sans japanese';
  }
}

/* ! リテック ================================================== */
.top_new_tech{
  background: #1D608C;
  margin: 70px 0 -100px;
  padding: 30px 0 50px;
}
.top_new_tech .h2_ttl{
  margin: 0 0 30px;
  color: white;
}