@charset "utf-8";

@media screen and (max-width: 767px){
  .tablet{
    display: none !important;
  }
  .video-container{
    display: none !important;
  }
  .spSlider{
    overflow: hidden;
    width: 100%;
  }
  .mvLabel{
    position: absolute;
    top: 50%;
    margin-top: -115px;
    left: 50%;
    margin-left: -162px;
    z-index: 9999;
  }
  
  #concept{
    padding: 10px 10px;
    text-align: center;
    color: #211713;
  }
  .conceptTtl{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .conceptRead{
    font-size: 18px;
    line-height: 140%;
    margin-bottom: 10px;
  }
  
  .bgTtl{
    font-size: 18px;
    padding: 10px;
    text-align: center;
    color: #FFF;
    line-height: 100%;
  }
  .topContentsInner{
    padding: 30px 10px 30px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
  }
  .topLinkBtn{
    float: left;
    width: 31.33%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 20px;
    transition: 0.3s;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    margin: 1%;
  }
  .topLinkBtn a{
    color: #FFF;
    font-size: 14px;
    text-decoration: none;
    margin: 5px;
  }
  .topLinkBtn a .qa{
    color: #FFF;
    font-size: 28px;
  }
  .topLinkBtn a .comming{
    color: #E50011;
    font-size: 12px;
    display: block;
    position: absolute;
    bottom: 7px;
    text-align: center;
    font-weight: bold;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    line-height: 120%;
  }
  .topLinkBtn a .comming02{
    color: #699ce8;;
    font-size: 12px;
    display: block;
    position: absolute;
    bottom: 17px;
    text-align: center;
    font-weight: bold;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    line-height: 120%;
  }
  
  /* big project */
  #bigproject{
    color: #211713;
  }
  #bigproject .bgTtl{
    background: #122A88;
  }
  .bigTop{
    background: url("../img/bg_big_sp.jpg") no-repeat top center;
    background-size: cover;
  }
  .bigArea{
    float: right;
    width: 100%;
    max-width: 100%;
  }
  .bigArea h3,.bigLeft h3,.bigRight h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 140%;
    margin-bottom: 10px;
    padding-left: 5px;
  }
  .bigArea h3 span,.bigLeft h3 span,.bigRight h3 span{
    font-size: 12px;
    display: block;
    font-weight: bold;
    height: 26px;
  }
  #bigproject .topLinkBtn{
    background: rgba(0,94,174,0.8);
  }
  #bigproject .topLinkBtn:hover{
    background: rgba(0,94,174,1);
  }
  .bigBottom{
    background: url("../img/bg_big02_sp.jpg") no-repeat top center;
    background-size: cover;
  }
  .bigLeft{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
  #bigproject .bigLeft .topLinkBtn{
    background: rgba(19,174,103,0.8);
  }
  #bigproject .bigLeft .topLinkBtn:hover{
    background: rgba(19,174,103,1);
  }
  .bigRight{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
  }
  #bigproject .bigRight .topLinkBtn{
    background: rgba(64,61,149,0.8);
  }
  #bigproject .bigRight .topLinkBtn:hover{
    background: rgba(64,61,149,1);
  }
  .contentsBottom{
    padding: 20px;
    text-align: center;
  }
  .contentsBottom img{
    width: 35px;
  }
  
  /* renovation */
  #renovation{
    color: #211713;
  }
  #renovation .bgTtl{
    background: #F18C2C;
  }
  #renovation .topContentsInner{
    padding-bottom: 30px;
  }
  .renoTop{
    background: url("../img/bg_reno_sp.jpg") no-repeat top center;
    background-size: cover;
  }
  .renoLeft{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
  #renovation .renoLeft .topLinkBtn{
    background: rgba(243,152,0,0.8);
  }
  #renovation .renoLeft .topLinkBtn:hover{
    background: rgba(243,152,0,1);
  }
  .renoRight{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  #renovation .renoRight .topLinkBtn{
    background: rgba(234,102,161,0.8);
  }
  #renovation .renoRight .topLinkBtn:hover{
    background: rgba(234,102,161,1);
  }
  .renoLeft h3,.renoRight h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 140%;
    margin-bottom: 10px;
    padding-left: 5px;
  }
  .renoLeft h3 span,.renoRight h3 span{
    font-size: 12px;
    display: block;
    font-weight: bold;
    height: 26px;
  }
  
  /* company */
  #company{
    color: #211713;
  }
  #company .bgTtl{
    background: #C9A063;
  }
  #company .topContentsInner{
  }
  .cpLeft h3,.cpRight h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 140%;
    margin-bottom: 10px;
    padding-left: 5px;
  }
  .cpLeft h3 span,.cpRight h3 span{
    font-size: 12px;
    display: block;
    font-weight: bold;
    height: 26px;
  }
  #company .topLinkBtn{
    background: rgba(0,94,174,0.8);
  }
  #company .topLinkBtn:hover{
    background: rgba(0,94,174,1);
  }
  .cpBottom{
    background: url("../img/bg_campany_sp.jpg") no-repeat top center;
    background-size: cover;
  }
  .cpLeft{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
  #company .cpLeft .topLinkBtn{
    background: rgba(127,79,33,0.8);
  }
  #company .cpLeft .topLinkBtn:hover{
    background: rgba(127,79,33,1);
  }
  .cpRight{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
  #company .cpRight .topLinkBtn{
    background: rgba(127,79,33,0.8);
  }
  #company .cpRight .topLinkBtn:hover{
    background: rgba(127,79,33,1);
  }
  
}
@media print, screen and (min-width: 768px){
  #mv{
    text-align: center;
  }
  #youtubeMovie {
    margin: 0 auto;
    width: 100%;
    max-width: 1920px; /* 最大の横幅 */
    max-height: 800px;
    overflow: hidden;
  }
  .video-container{
    overflow: hidden;
  }
  .movie_box {
    padding-top: 55.15%;
    position: relative;
    width: 100%;
  }
  .movie_boxiframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 102%;
  }
  .mvLabel{
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -350px;
    z-index: 9999;
  }
  body{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
  }
  .tablet{
    display: none;
  }
  .pc{
    display: block;
  }
  #concept{
    padding: 30px;
    text-align: center;
    color: #211713;
  }
  .conceptTtl{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .conceptRead{
    font-size: 28px;
    line-height: 140%;
  }
  
  .bgTtl{
    font-size: 21px;
    padding: 10px;
    text-align: center;
    color: #FFF;
    line-height: 100%;
  }
  .topContentsInner{
    padding: 80px 0 50px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
  }
  .topLinkBtn{
    float: left;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: 0.3s;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
  }
  .topLinkBtn a{
    color: #FFF;
    font-size: 22px;
    text-decoration: none;
  }
  .topLinkBtn a .qa{
    color: #FFF;
    font-size: 36px;
  }
  .topLinkBtn a .comming{
    color: #E50011;
    font-size: 14px;
    display: block;
    position: absolute;
    bottom: 35px;
    text-align: center;
    font-weight: bold;
    width: 100px;
    left: 50%;
    margin-left: -50px;
  }
  .topLinkBtn a .comming02{
    color: #fff;
    font-size: 14px;
    display: block;
    position: absolute;
    bottom: 55px;
    text-align: center;
    font-weight: bold;
    width: 100px;
    left: 50%;
    margin-left: -50px;
  }
  
  /* big project */
  #bigproject{
    color: #211713;
  }
  #bigproject .bgTtl{
    background: #122A88;
  }
  .bigTop{
    background: url("../img/bg_big.jpg") no-repeat top center;
    background-size: cover;
    height:800px;
  }
  .bigArea{
    float: right;
    width: 100%;
    max-width: 640px;
  }
  .bigArea h3,.bigLeft h3,.bigRight h3{
    font-size: 38px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 30px;
  }
  .bigArea h3 span,.bigLeft h3 span,.bigRight h3 span{
    font-size: 18px;
    display: block;
    font-weight: bold;
  }
  #bigproject .topLinkBtn{
    background: rgba(0,94,174,0.8);
  }
  #bigproject .topLinkBtn:hover{
    background: rgba(0,94,174,1);
  }
  .topLinkBtn:nth-child(3n){
    margin-right:0;
  }
  .bigBottom{
    background: url("../img/bg_big02.jpg") no-repeat top center;
    background-size: cover;
    height:800px;
  }
  .bigLeft{
    float: left;
    width: 54%;
    max-width: 520px;
  }
  #bigproject .bigLeft .topLinkBtn{
    background: rgba(19,174,103,0.8);
  }
  #bigproject .bigLeft .topLinkBtn:hover{
    background: rgba(19,174,103,1);
  }
  .bigRight{
    float: right;
    width: 48%;
    max-width: 420px;
  }
  #bigproject .bigRight .topLinkBtn{
    background: rgba(64,61,149,0.8);
  }
  #bigproject .bigRight .topLinkBtn:hover{
    background: rgba(64,61,149,1);
  }
  #bigproject .bigRight .topLinkBtn{
    margin-right: 0;
    margin-left: 20px;
  }
  #bigproject .bigRight .topLinkBtn:nth-child(1),#bigproject .bigRight .topLinkBtn:nth-child(3){
    margin-left: 0;
  }
  .contentsBottom{
    padding: 30px;
    text-align: center;
  }
  
  
  /* renovation */
  #renovation{
    color: #211713;
  }
  #renovation .bgTtl{
    background: #F18C2C;
  }
  #renovation .topContentsInner{
    padding-bottom: 30px;
  }
  .renoTop{
    background: url("../img/bg_reno.jpg") no-repeat top center;
    background-size: cover;
    height:800px;
  }
  .renoLeft{
    float: left;
    width: 54%;
    max-width: 520px;
  }
  #renovation .renoLeft .topLinkBtn{
    background: rgba(243,152,0,0.8);
  }
  #renovation .renoLeft .topLinkBtn:hover{
    background: rgba(243,152,0,1);
  }
  .renoRight{
    float: right;
    width: 48%;
    max-width: 420px;
    margin-top: 350px;
  }
  #renovation .renoRight .topLinkBtn{
    background: rgba(234,102,161,0.8);
  }
  #renovation .renoRight .topLinkBtn:hover{
    background: rgba(234,102,161,1);
  }
  #renovation .renoRight .topLinkBtn{
    margin-right: 0;
    margin-left: 20px;
  }
  #renovation .renoRight .topLinkBtn:nth-child(1){
    margin-left: 0px;
  }
  .renoLeft h3,.renoRight h3{
    font-size: 38px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 30px;
  }
  .renoLeft h3 span,.renoRight h3 span{
    font-size: 18px;
    display: block;
    font-weight: bold;
  }
  
  /* company */
  #company{
    color: #211713;
  }
  #company .bgTtl{
    background: #C9A063;
  }
  #company .topContentsInner{
    padding-bottom: 550px;
  }
  .cpLeft h3,.cpRight h3{
    font-size: 38px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 30px;
  }
  .cpLeft h3 span,.cpRight h3 span{
    font-size: 18px;
    display: block;
    font-weight: bold;
  }
  #company .topLinkBtn{
    background: rgba(0,94,174,0.8);
  }
  #company .topLinkBtn:hover{
    background: rgba(0,94,174,1);
  }
  .topLinkBtn:nth-child(3n){
    margin-right:0;
  }
  .cpBottom{
    background: url("../img/bg_campany.jpg") no-repeat top center;
    background-size: cover;
    height:800px;
  }
  .cpLeft{
    float: left;
    width: 54%;
    max-width: 520px;
  }
  #company .cpLeft .topLinkBtn{
    background: rgba(127,79,33,0.8);
  }
  #company .cpLeft .topLinkBtn:hover{
    background: rgba(127,79,33,1);
  }
  .cpRight{
    float: right;
    width: 48%;
    max-width: 420px;
  }
  #company .cpRight .topLinkBtn{
    background: rgba(127,79,33,0.8);
  }
  #company .cpRight .topLinkBtn:hover{
    background: rgba(127,79,33,1);
  }
  #company .cpRight .topLinkBtn{
    margin-right: 0;
    margin-left: 20px;
  }
  #company .cpRight .topLinkBtn:nth-child(1),#company .cpRight .topLinkBtn:nth-child(3){
    margin-left: 0;
  }

}

@media screen and (max-width: 1200px){
  .tablet{
    display: block;
  }
  .pc{
    display: none;
  }
}