@charset "UTF-8";

/* companyBlc ------------------*/
#companyBlc .bgArea{
background:url(../img/top/bg01.jpg) no-repeat center center;
background-size:cover;
padding-bottom:240px;
}

#companyBlc .bgArea .txtCatch{
font-size:160%;
color:#fff;
text-align:center;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.4);
letter-spacing:0.1em;
}

#companyBlc .list{
margin-top:-18.5%;
}

#companyBlc .list .imgBlc.img01{
background-image:url(../img/top/img01.jpg);
}

#companyBlc .list .imgBlc.img02{
background-image:url(../img/top/img02.jpg);
}

#companyBlc .list .imgBlc.img03{
background-image:url(../img/top/img03.jpg);
}

#companyBlc .btn{
margin-top:7%;
}

/* workBlc ------------------*/
#workBlc .workList{
position:relative;
}

#workBlc .workList .catchBlc{
width:100%;
color:#fff;
text-align:center;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.4);
padding:0 2%;
position:absolute;
bottom:40%;
left:0;
z-index:4;
box-sizing:border-box;
}

#workBlc .workList .catchBlc > .ttl{
font-size:240%;
color:#fff;
display:inline-block;
position:relative;
}

#workBlc .workList .catchBlc > .ttl:after{
content:"";
background-color:rgba(255,255,255,0.7);
width:100%;
height:1px;
position:absolute;
bottom:0;
left:0;
-webkit-box-shadow:0px 0px 4px 1px rgba(255,255,255,0.4);
-moz-box-shadow:0px 0px 4px 1px rgba(255,255,255,0.4);
box-shadow:0px 0px 4px 1px rgba(255,255,255,0.4);
}

#workBlc .workList .list{
display: flex;
justify-content: center;
}

#workBlc .workList .list > div{

}

#workBlc .workList a{
text-decoration:none;
}

/*
#workBlc .workList .imgBlc{
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
padding-top:163%;
}

#workBlc .workList .imgBlc.img01{
background-image:url(../img/top/work_img01.jpg);
}

#workBlc .workList .imgBlc.img02{
background-image:url(../img/top/work_img02.jpg);
}

#workBlc .workList .imgBlc.img03{
background-image:url(../img/top/work_img03.jpg);
}
*/

#workBlc .workList .txtBlc{
padding:2% 7%;
}

#workBlc .workList .txtBlc .subj{
color:#0f4b89;
font-size:140%;
}

#workBlc .workList .txtBlc .txt{
font-size:120%;
line-height:1.8;
}

#workBlc .btn{
margin-top:7%;
}


/* informationBlc ------------------*/
#informationBlc .bgArea{
position: relative;
background:url(../img/top/bg02.jpg) no-repeat center center;
background-size:cover;
padding-bottom:240px;
}

#informationBlc .bgArea:before {
content: "";
background-color: #000;
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;
transition: all 200ms ease-in-out;
}

#informationBlc .bgArea .txtCatch{
font-size:160%;
color:#fff;
text-align:center;
text-shadow:1px 1px 2px rgba(0, 0, 0, 0.4);
letter-spacing:0.1em;
padding:4% 0;
}

#informationBlc .list{
margin-top:-18.5%;
}

#informationBlc .list .imgBlc.img01{
background-image:url(../img/top/information_img01.jpg);
}

#informationBlc .list .imgBlc.img02{
background-image:url(../img/top/information_img02.jpg);
}

#informationBlc .list .imgBlc.img03{
background-image:url(../img/top/information_img03.jpg);
}

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

@media screen and (max-width: 1000px) {
/* companyBlc ------------------*/
#companyBlc .bgArea{
padding-bottom:20%;
}

/* informationBlc ------------------*/
#informationBlc .bgArea{
padding-bottom:20%;
}
}

@media screen and (max-width: 767px) {
/* companyBlc ------------------*/
#companyBlc .bgArea .txtCatch{
font-size:120%;
}

/* workBlc ------------------*/
#workBlc .workList .catchBlc{
bottom: 55%;
}

#workBlc .workList .catchBlc > .ttl{
font-size:180%;
}

#workBlc .workList .txtBlc{
font-size: 90%;
}

#workBlc .workList .txtBlc .subj{
font-size:130%;
}

#workBlc .workList .txtBlc .txt{
font-size:110%;
}

/* informationBlc ------------------*/
#informationBlc .bgArea .txtCatch{
font-size:120%;
}
}

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

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

.twinBtn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.twinBtn > div {
  width: 49%;
}

@media screen and (max-width: 480px) {
  .twinBtn {
    display: block;
  }
  .twinBtn > div {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}