@charset "utf-8";


/*---------------------------------------------
  トップページ用CSS
---------------------------------------------*/

._my_top_layout {
}

._my_top_layout_left {
margin-top:20px;
margin-bottom:10px;
}

._my_top_layout_right {
margin-top:20px;
margin-bottom:10px;
padding-left: 15px;
}

@media (min-width: 768px) {
  ._my_top_layout_right {
    padding-left: 0;
  }
}

/* メインメニュー -------------------------------- */
#Scontents {
width: 100%;
margin:0;
padding:0;
background:#fff;
}


#smenu {
margin:5px;
padding:0;
}

#smenu ul{
overflow:hidden;
margin:10px 0 15px 0;
padding:0;
list-style:none;
}

#smenu li{
float:left;
width: 23.0%;
margin-left:3px;
margin-right:3px;
padding:0;
border:1px #F2F2F2 solid;
border-radius: 5px;
}

@media (min-width: 768px) {
  #smenu ul{
    margin-left: 6px;
  }
  #smenu li{
    width: 23.7%;
  }
}

/* TOP動画 -------------------------------- */
._my_top_mv {
  width: 100%;
}
._my_top_mv video {
  position: relative;
  width: 100%;
}

/* 施工例 -------------------------------- */
#ex {
margin:5px 0;
padding:0;
}

#ex h3{
margin:10px 0;
padding:0;
}


#ex ul{
overflow:hidden;
margin:5px 0 5px 3px;
padding:0;
list-style:none;
}

#ex li{
float:left;
width: 30.5%;
margin-left:4px;
margin-right:4px;
padding:0;
min-height: 200px;
}

@media (min-width: 768px) {
  #ex ul{
    margin-left: 9px;
  }
  #ex li{
    width: 31.5%;
  }
}

#ex li img{
margin:0;
}

#ex li p.cat{
margin:2px 0;
padding:0;
font-size:9px;
color:#7A99CC;
}

#ex li p.catt{
margin-bottom:5px;
padding:0;
font-size:12px;
}


/* 最新情報 -------------------------------- */
#News {
margin:10px 0;
padding-bottom:20px;
background:#fff;
}

#News h3{
margin-top: 0;
padding: 5px 0 5px 10px;
border-bottom:1px solid #D6D6D6;
}

#News ul{
margin:10px auto;
padding:0;
list-style:none;
}

#News li{
margin-bottom:10px;
padding:0;
overflow:hidden;
}

#News li p.date{
width:110px;
margin:0 10px 0 10px;
padding:0;
color:#FF9900;
font-size:12px;
}

#News li p.tit{
margin:0 0 0 10px;
padding-left:80px;
font-size:13px;
float:left;
}

@media (min-width: 768px) {
  #News li p.date{
    margin:0 0 0 20px;
    float:left;
  }
  #News li p.tit{
    margin:0;
    float:left;
  }
}


.nico{
background: url(../imgs/news.png)  no-repeat 0 0;
}

.bico{
background: url(../imgs/blog.png)  no-repeat 0 0;
}


/* Instagram ----------------------------- */
#Instagram {
  margin:10px 0;
  background:#fff;
}

#Instagram h3{
  margin-top: 0;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #D6D6D6;
  font-size: 1.35rem;
  font-weight: bold;
  color: #4E5A53;
}

ul.instagram_list {
  margin: 15px;
  padding: 0;
  list-style-type: none;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(4, minmax(50px, 1fr));
}
ul.instagram_list > li > a {
  padding-bottom: 100%;
  position: relative;
  display: block;
  text-decoration: none;
}

ul.instagram_list > li > a > img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  vertical-align: top;
  object-fit: cover;
}
ul.instagram_list > li > a > video {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  vertical-align: top;
  z-index: 1000;
}
ul.instagram_list > li > a > div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.1rem;
  width: 100%;
  color: #000;
  font-size: 0.5rem;
  white-space: nowrap;
  background-color: #FFF;
  opacity: 0.7;
  z-index: 2000;
  overflow: hidden;
}


/* 右サイドバナー ----------------------------- */

#contact {
margin:0 0 10px 0;
background:#fff;
padding:0;
}


#contact h3{
margin:5px;
background:#FF9900;
padding:30px 0;
text-align:center;
}

#contact h3 p{
margin:10px 0;
padding:0;
}

#contact img{
margin-left: auto;
margin-right: auto;
}