@charset "UTF-8";

ol, ul{
    list-style:none;
}
/* リセット */
html,body,nav,ul,li {
    margin:0;
    padding:0;
    list-style-type:none;
}
 
/* display:table;ナビゲーション */
#nav02 ul {
    display:table;
    table-layout:fixed;
    width:100%;
}
#nav02 ul li {
    display:table-cell;
    border-right:1px solid #ffffff;
}
#nav02 ul li a {
    display:block;
    padding:0.5em 0;
    color:#ffffff;
    text-align:center;
    text-decoration:none;
    background-color:#826fb0;
}
#nav02 ul li a:hover {
     background-color:#5d4a9c;
}
/* 工事流れ */
#list2 {
    background: #5d4a9c;
    margin: 20px 0px 20px 0;
}
#list2 li a {
    position:relative;
    display:block;
    padding:15px;
    color:#fff;
    font-size: 120%;
    text-decoration:none;
}
#list2 li a:before { /* 矢印 */
    position:absolute;
    top:50%;
    right:10px;
    content:""; /* 空の要素を作成 */
    width:0;
    height:0;
    margin-top:-3px; /* 位置を中心に調整 */
    border-width:5px;
    border-style:solid;
    border-color:transparent;
    border-left-color:#fff; /* 矢印の色 */
}
#list2 li a:after { /* 矢印隠し */
    position:absolute;
    top:50%;
    right:12px;
    content:""; /* 空の要素を作成 */
    width:0;
    height:0;
    margin-top:-3px; /* 位置を中心に調整 */
    border-width:5px;
    border-style:solid;
    border-color:transparent;
    border-left-color:#5d4a9c; /* 矢印の色 */
}


/*Works
---------------------------------------------------------------------------*/
#works_list {
text-align: left;
margin: 0;
}
#works_list ul {
width:100%;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
}
#works_list ul img {
width: 100%;
height: 250px;
object-fit: cover;
display:block;
margin:0;
padding:0;
}
#works p{
margin-top:6px;
text-align:center;
font-size: 100%;
box-sizing: border-box;
}
#works_list ul li {
margin:20px auto 0;
max-width:320px;
width:100%;
background-color:#eee;
}
@media screen and (max-width: 767px) {
#works_list ul {
display:block
}
#works{ padding-bottom:20px; }

#works h2{
background:url("../img/top/works_title.jpg") no-repeat;
padding-top:0;
margin-top:30px;
text-align:center;
font-size:23px;
letter-spacing:5px;
font-family: 'Montserrat', sans-serif;
text-indent: -9999px;
}
#works_list ul img {
height: 200px;
}
}

@media screen and (min-width:768px) {
#works_list ul li {
width: 32%;
margin-right: 2%;
}
#works_list ul li:nth-child(3n) {
margin-right: 0;
}
}

/* ------------------------------------- */
/*	 施工事例の枠　矢印
/* ------------------------------------- */
#works li span{
background-color:#eee;
padding:10px 0 10px 6%;
    position:relative;
    display:block;
    color:#5d4a9c;
    text-decoration:none;
}
#works li a span:before { /* 矢印 */
    position:absolute;
    top:50%;
    right:10px;
    content:""; /* 空の要素を作成 */
    width:0;
    height:0;
    margin-top:-3px; /* 位置を中心に調整 */
    border-width:5px;
    border-style:solid;
    border-color:transparent;
    border-left-color:#5d4a9c; /* 矢印の色 */
}
#works li a span:after { /* 矢印隠し */
    position:absolute;
    top:50%;
    right:12px;
    content:""; /* 空の要素を作成 */
    width:0;
    height:0;
    margin-top:-3px; /* 位置を中心に調整 */
    border-width:5px;
    border-style:solid;
    border-color:transparent;
    border-left-color:#eee; /* 矢印の色 */
}

/* ------------------------------------- */
/*	 resposive320
/* ------------------------------------- */
@media screen and (max-width:740px){
/*スタッフ紹介ページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main_s section.list {
	padding: 30px 0px;
	background: url(../img/page/sen.png) repeat-x bottom;
	margin:0 auto;
overflow:hidden;
width: 95%;
}
/*ボックス内の段落タグ設定*/
#main_s section.list p {
	margin-left: 0;
}
/*ボックス内の写真設定*/
#main_s section.list img {
	float: none;
	background: #fff;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 10px;		/*余白。ここに上の行で設定した背景色が出ます。*/
	width: 90%;
	height: auto;
	margin-bottom: 10px;
}
/*ボックス内のh4タグ設定*/
#main_s section.list h4 {
	margin-left: 0;
	color:#826fb0;
}
}






/* ------------------------------------- */
/*	 resposive741
/* ------------------------------------- */

@media screen and (min-width:741px){
	
#works{ padding-bottom:20px; }

.t_box{ 
padding-top:20px;
width:90%;
}

.t_box h2{
background:url("../img/top/works_title.jpg") no-repeat;
text-indent: -9999px;
margin:0 0 20px 0;
width:235px;
padding-top:10px;
}

/*スタッフ紹介ページ
---------------------------------------------------------------------------*/
/*ボックスの設定*/

#main_s section.list {
	padding: 30px 0px;
	overflow: hidden;
	background: url(../img/page/sen.png) repeat-x bottom;
}
/*ボックス内の段落タグ設定*/
#main_s section.list p {
	padding: 0px;
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main_s section.list img {
	float: left;		/*画像を左へ回り込み*/
	width: 30%;		/*写真の幅*/
	height: auto;	/*写真の高さ*/
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 5px;		/*余白。ここに上の行で設定した背景色が出ます。*/
}
/*ボックス内のh4タグ設定*/
#main_s section.list h4 {
	font-size: 100%;
	color: #fff;	/*文字色*/
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	margin-bottom: 0.5em;
	padding: .8em .75em;
	background-color:#826fb0;
}

#nav02 {
    margin: 0 0px 20px 0;
}

}


/*　slick サムネイルナビゲーション
---------------------------------------------------------------------------*/
.slider-container, .slider-nav-container {
  display: none;
  position: relative;
}
.slider-container.initialized, .slider-nav-container.initialized {
  display: block;
}
.slider-nav-container {
  margin-top: 18px;
	margin-bottom: 50px;
}
.slider {
  overflow: hidden;
	line-height: 0;
  font-size: 0;
}
.slider img{
max-width: 100%;
width: 100%;
height: 50vw;
object-fit: cover;
overflow: hidden;
}
.slider-nav {
  margin: 0;
}
.slider-nav div {
height: auto;
overflow: hidden;
}
.slider-nav .slick-current{
 opacity: 0.3;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  height: 36px;
  margin-top: -18px;  /* 高さの半分だけネガティブマージン */
  color: #aaa;
  line-height: 36px;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;  /* 重要 */
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}
.slick-slide {
  outline: 0;
	-webkit-transform-style: preserve-3d;
}
.slider .slick-slide > img, .slider-nav .slick-slide > img {
  display: block;
  width: 100%;
	overflow: hidden;
	object-fit: cover;
}
.slider .slick-slide > img {
  height:320px;
	overflow: hidden;
}
.slider-nav .slick-slide > img {
  height:75px;
	overflow: hidden;
}
.slider-nav .slick-track {
transform:unset!important;
}

@media screen and (min-width: 768px) {
.slider .slick-slide > img {
  height:500px;
}
.slider-nav .slick-slide > img {
  height:150px;
}
} 
@media screen and (min-width: 1024px) {
.slider .slick-slide > img {
  height:600px;
}
}