@charset "utf-8";
/* CSS Document */

html {
	font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

div,ul,li,h1,h2,h3 {
	box-sizing: border-box;
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
  Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/


@media screen and (max-width: 736px) {
#SMP------------------------{}

	#main {
        padding-top:8px;
		background-image: url(../image/works/main.jpg);
		background-size: cover;
		background-position-x: center;
    }
    #main .inner {
        position:relative;
        width:100%;
        height: 150px;
    }
	#main .inner .sp_title{
        width:100%;
        position:absolute;
        bottom:0px;
        left:0px;
		padding: 5px 4%;
		font-size: 24px;
		font-family: serif;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.4);
    }
	
	
	/*サーチボックス*/
	
	#search {
		margin-top: 0rem;
		margin-bottom: 0rem;
		padding: 0.5rem 0;
	}
	#exsample {
		padding-top: 2.5rem;
		/*margin-bottom: 1rem;*/
	}
	
	#search h2 {
		margin: 0rem;
		font-size: 20px;
	}
	
	
	/*サーチボックス*/
	.search_content_item {
		margin: 0 0px 2px;
		padding:5px 0 0;
	}
	.search_content_item ul.inner_search {
		width: 100%;
		padding: 2px 2% 0px;
		margin: 0 auto;
	}
    
	.search_content_item .inner_tab {
		width: 11%;
		padding: 10px 0px;
        font-size: 10px;
		line-height:2em;
        float:left;
		margin: 0;
        text-align:left;
		color:#000;
	}
	ul.inner_search li {
		display: inline-block;
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 6px;
		margin-right: 6px;
		border-radius: 8px;
		float: left;
		text-align: center;
		position: relative;
        font-size: 9px;
	}
	ul.inner_search li .search_inner input,
	ul.inner_search li .search_inner label{
		width: 100%;
	}
	
	ul.inner_search li {
		width: calc( (94% - 35px ) / 3);
	}
	ul.inner_search li:nth-child(3n) {
		margin-right:0;
	}
	ul.inner_search li,
	ul.inner_search li .search_inner input,
	ul.inner_search li .search_inner label{
        height:35px;
	}
	ul.inner_search li .search_inner label{
        padding-top: 8px;
		font-size: 12px;
        font-family: "游ゴシック", "YuGothic","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	}
	
	
	.inner_tab_theme {
		height:40px!important;
	}
	.inner_tab_reform {
		height:calc(35px * 2 + 6px)!important;
	}
	ul.inner_search.reform li {
		width: calc( (94% - 18px ) / 4);
		/*width: calc( (100% - 16px ) / 3 );*/
	}
	ul.inner_search.reform li .search_inner label{
        padding: 6px 0 2px;
	}
	ul.inner_search.reform li:nth-child(1) .search_inner label,
	ul.inner_search.reform li:nth-child(5) .search_inner label,
	ul.inner_search.reform li:nth-child(6) .search_inner label,
	ul.inner_search.reform li:nth-child(8) .search_inner label{
        padding: 10px 0;
	}
	
	ul.inner_search.reform li:nth-child(3n+1):nth-last-child(-n+4),
	ul.inner_search.reform li:nth-child(3n+1):nth-last-child(-n+4) ~ li{
		margin-bottom: 0;
	}
	
	ul.inner_search li a {
		display: block;
		text-decoration: none;
		font-family: "メイリオ", Meiryo;
		color: #000;
	}
	
	/*ul.inner_search.category li a {
		padding-top: 30px;
	}*/
	ul.inner_search.reform li {
		padding-top: 35px;
	}
    ul.inner_search.category li .search_inner,
    ul.inner_search.reform li {
        position: relative;
    }
	
	ul.inner_search.category li .search_inner:before
	ul.inner_search.reform li:before {
		content: '';
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		margin-right: 10px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -15px;
	}
	ul.inner_search.reform li:before {
		top: 10px;
	}
	
	
	ul.inner_search.reform li a {
	}
	
	ul.inner_search.reform li a:before {
		position: absolute;
		content: "";
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		top: -10px;
		left: 50%;
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			-o-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	ul.inner_search.reform li .search_inner input,
	ul.inner_search.category li .search_inner input{
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
        display:block;
        z-index:1;
	}
	ul.inner_search li .search_inner input{
        display:none;
	}
	ul.inner_search li .search_inner a{
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
        display:block;
        z-index:2;
	}
    
	ul.inner_search li .search_inner label{
        position:absolute;
        box-sizing:border-box;
        top:0px;
        left:0px;
        right:0px;
        display:block;
        line-height: 1.5;
        z-index:0;
	}
	
	/* サーチボックス end */
	
	/* 検索結果ボックス */
	#exsample {
		min-height:292px;
	}
	.exsample_wrapper {
		display: flex;
		flex-wrap: wrap;
	}
	
	.exsample_item {
		width: 49%;
		font-family: "メイリオ", Meiryo;
		margin:0 0.5% 15px;
	}
	
	.exsample_item .top_image {
		height: 150px;
		width: 100%;
		background-size: cover;
		background-position-x: center;
    	background-position-y: center;
		background-repeat: no-repeat;
		position: relative;
	}
	
	.exsample_item .top_image h3 {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.47);
		padding: 10px 10px;
		color: #fff;
		position: absolute;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 1;
	}
	
	.exsample_item .btm_detail {
		min-height: 100px;
		background-color: #f3f3f3;
		padding: 10px 3% 10px;
		position: relative;
        font-size: 12px;
	}
	
	.exsample_item a  {
		text-decoration: none;
		color: #000;
	}
	
	.exsample_item .btm_detail:after {
		position: absolute;
		content: "";
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		width: 10px;
		height: 20px;
		background-image : url(../image/works/arrow_bk.png);
		right: 10px;
		top: 50%;
			-moz-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
    .exsample_item .btm_detail p {
        width: 90%!important;
    }
	
	.exsample_item .btm_detail span {
		display: block;
	}
	
	.exsample_item .btm_detail p {
		margin: 8px 0 0 0;
	}
	
	/* 検索結果ボックス end */
	
	/*result2 全国事例リンク*/
	.result2 {
		width:100%;
		margin:0px auto 5rem;
	}
	.result2 img  {
        width: 100%;
        height: auto;
    }
	/*result2 全国事例リンク*/
	
	/*　ページャー　*/
	#pager {
		margin-top: 3rem;
		margin-bottom: 5rem;
	}
	
	#pager ul.pager {
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	#pager ul.pager li {
		display: inline-block;
		padding: 12px 15px;
		background-color: #e9e9e9;
		margin-right: 10px;
		line-height: 1;
	}
	
	#pager ul.pager li.current {
		background-color: #0075c1;
		color: #fff;
	} 
	/*　ページャー end　*/
    #rotate {
        margin: 25px 0;
    }
	#rotate ul.banners{
		width:92%;
        margin:0 auto 0;
	}
	#rotate ul.banners li:nth-child(2n){
        margin-right:0px;
	}

    .pankuzu {
        width:96%;
        margin:0 auto;
		padding: 0px 2% 0px;
        text-align:right;
        font-size: 10px;
    }
    .noitem {
        padding-top:130px;
		font-size:12px;
    }
	.search-box_category_all {
		margin-top:-14VW!important;
	}
	.search-box_category_all ul{
		width:96%!important;
	}
	.search-box_category_all li {
		float:right!important;
	}
	
    .list_item {
        position:relative;
        height: 188px;
    }
    .list_item .top_image{
        position:absolute;
        top: 0;
        left: 0;
        z-index:0;
      animation: image-switch-animation 10s infinite;

      animation-delay: 2.5s;
    }
    .list_item .top_image_overlay{
        position:absolute;
        top: 0;
        left: 0;
        z-index:1;
      animation: image-switch-animation 10s infinite;
      animation-delay: 7.5s;
    }

    @keyframes image-switch-animation {
      0%{ opacity: 1;}
      33%{ opacity: 0;}
      66%{ opacity: 0;}
      100%{ opacity: 1;}
    }
    .exsample_item p {
        position:absolute;
        bottom: 0;
        left: 0;
      width: 100%;
    }
}

@media screen and (min-width: 737px) {
#PC------------------------{}
    
    .menu__single .menu__second-level {
        background-color: rgba(0,117,194,1);
		font-size:12px;
    }

  	#main {
        height:400px;
		background-image: url(../image/works/main.jpg);
		background-size: cover;
		background-position-x: center;
        background-position-y: bottom -60px;
    }
    #main .inner {
		position: relative;
        width:1200px;
        height:400px;
    }

    #main .inner .title{
		position: absolute;
        top:116px;
        left:0px;
    }
	
	/*サーチボックス*/
	
	#search{
		margin-top: 3rem;
		margin-bottom: 0;
	}
	#exsample {
		padding-top: 5rem;
		/*margin-bottom: 2rem;*/
		min-height:400px;
	}
	
	/*サーチボックス*/
	.search_content_item {
		/*height: 50px;*/
        clear: both;
	}
	
	.search_content_item.visible {
		display: block;
	}
	
	.search_content_item .inner_tab {
        float:left;
        width:80px;
		height: 62px;
		padding: 12px 0px;
		margin: 0;
        text-align:left;
        font-size: 28px;
		color:#000;
	}
	.search_content_item ul.inner_search {
        /*float:left;*/
        width:1010px;
		padding: 12px 20px;
		margin: 0;
	}
	
	ul.inner_search.category li,
	ul.inner_search.theme li {
		display: inline-block;
        height:36px;
		background-color: #fff;
		text-align: center;
		padding: 0px 0px;
		border-radius: 8px;
		margin-right: 16px;
		margin-bottom: 16px;
		float: left;
		box-sizing: border-box;
	}
	
	ul.inner_search.reform li {
        position: relative;
		display: inline-block;
        height:50px;
		background-color: #fff;
		padding: 0px;
		box-sizing: border-box;
		margin-bottom: 16px;
		margin-right: 16px;
		border-radius: 8px;
		float: left;
		text-align: center;
	}
	ul.inner_search.reform li .search_inner,
	ul.inner_search.theme li .search_inner{
		position: relative;
        height:50px;
        line-height: 50px;
	}
	ul.inner_search.theme li:last-child .search_inner label {
        line-height: 1.15em;
        padding-top: 0.8em;
    }
	ul.inner_search.category li .search_inner{
		position: relative;
        height:36px;
        line-height: 36px;
	}
	ul.inner_search.reform li .search_inner label,
	ul.inner_search.theme li .search_inner label,
	ul.inner_search.category li .search_inner label{
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
        display:block;
        height:36px;
        line-height: 36px;
        z-index:0;
		cursor: pointer;
	}
	ul.inner_search.reform li .search_inner input,
	ul.inner_search.theme li .search_inner input,
	ul.inner_search.category li .search_inner input{
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
        display:block;
        height:50px;
        line-height: 50px;
        z-index:1;
	}
	ul.inner_search.category li .search_inner label,
	ul.inner_search.category li .search_inner input,
	ul.inner_search.theme li .search_inner label,
	ul.inner_search.theme li .search_inner input{
        box-sizing:border-box;
        height:36px;
        line-height: 36px;
	}
	ul.inner_search li,
	ul.inner_search li .search_inner label,
	ul.inner_search li .search_inner input{
		width: 150px;
	}
	
	ul.inner_search li,
	ul.inner_search li ~ li {
		margin-bottom: 0;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	}
	
	ul.inner_search li a {
		display: block;
		text-decoration: none;
		font-family: "メイリオ", Meiryo;
		color: #000;
	}
	
	ul.inner_search.category li input:before,
	ul.inner_search.reform li a:before {
		content: '';
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		margin-right: 10px;
	}
	
	
	ul.inner_search.category li,
	ul.inner_search.theme li,
	ul.inner_search.reform li {
		position: relative;
	}
	
	ul.inner_search.category li:before,
	ul.inner_search.theme li:before {
		position: absolute;
		content: "";
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		top: 50%;
		left: 10px;
			-moz-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
		transform: translateY(-50%);
        z-index: 1;
	}
	ul.inner_search.reform li:before {
		position: absolute;
		content: "";
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;

		top: 50%;
		left: 8px;
			-moz-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
		transform: translateY(-50%);
        z-index: 1;
	}
	
	/* サーチボックス end */
	
	/* 検索結果ボックス */
	.exsample_wrapper {
		display: flex;
		flex-wrap: wrap;
	}
	
	.exsample_item {
		width: calc((100% - 30px) / 4);
		margin: 0 10px 10px 0px;
		font-family: "メイリオ", Meiryo;
	}
	
	.exsample_item:nth-child(4n) {
		margin-right: 0;
	}
	
	.exsample_item .top_image {
		height: 292px;
		width: 100%;
		background-size: cover;
		background-position-x: center;
    	background-position-y: center;
		background-repeat: no-repeat;
		position: relative;
	}
	
	.exsample_item .top_image h3 {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.47);
		padding: 18px 10px;
		color: #fff;
		position: absolute;
		box-sizing: border-box;
		font-size: 18px;
		line-height: 1;
	}
	
	.exsample_item .btm_detail {
		min-height: 120px;
		background-color: #f3f3f3;
		padding: 12px 38px 12px 12px;
		position: relative;
        font-size: 14px;
	}
	
	.exsample_item a  {
		text-decoration: none;
		color: #000;
	}
	
	.exsample_item .btm_detail:after {
		position: absolute;
		content: "";
		display: inline-block;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		width: 15px;
		height: 30px;
		background-image : url(../image/works/arrow_bk.png);
		right: 10px;
		top: 50%;
			-moz-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.exsample_item .btm_detail span {
		display: block;
	}
	
	.exsample_item .btm_detail p {
		margin: 8px 0 0 0;
	}
	
	/* 検索結果ボックス end */
	
	/*result2 全国事例リンク*/
	.result2 {
        box-sizing:border-box;
		width:1200px;
		height:274px;
		margin:0px auto ;
	}
	/*result2 全国事例リンク*/
	
	/*　ページャー　*/
	#pager {
		margin-top: 3rem;
		margin-bottom: 5rem;
	}
	
	#pager ul.pager {
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	#pager ul.pager li {
		display: inline-block;
		padding: 12px 15px;
		background-color: #e9e9e9;
		margin-right: 10px;
		line-height: 1;
	}
	
	#pager ul.pager li.current {
		background-color: #0075c1;
		color: #fff;
	} 
	/*　ページャー end　*/
    
	
	.return {
        margin-top: 5rem!important;
    }
    .noitem {
        padding-top:100px;
    }
	
	.search-box_category_all {
		margin-top:-70px;
	}
	.search-box_category_all ul{
		width:600px!important;
	}
	.search-box_category_all li {
		float:right!important;
	}
	
    .list_item {
        position:relative;
        height: 333px;
    }
    .list_item .top_image{
        position:absolute;
        top: 0;
        left: 0;
        z-index:0;
    }
    .list_item .top_image_overlay{
        position:absolute;
        top: 0;
        left: 0;
        z-index:1;
    }
    .list_item a .top_image_overlay{
        transition:0.5s;
    }
    .list_item a:hover .top_image_overlay{
        opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
    }
    .exsample_item p {
        position:absolute;
        bottom: 0;
        left: 0;
      width: 100%;
    }
}

.exsample_item .btm_detail p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.search-box_label {
    font-weight: bold;
}
.is-hide {
    display: none;
}
.inner_search_btn input[type="radio"] + label,
.inner_search_btn input[type="checkbox"] + label {
    background-color: rgba(255,255,255,1.0);/*白50%*/
    color:#333;
    border-radius: 8px;
}
.inner_search_btn input[type="radio"]:checked + label,
.inner_search_btn input[type="checkbox"]:checked + label {
    background-color: rgba(0,117,194,1.0);/*白50%*/
    color:#FFF;
    border-radius: 8px;
}
.inner_search_btn input {
    position: absolute;
    top: 0;
    left:0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.exsample_item p {
text-align:center;
padding:5px 0 15px;
}
#exsample {
padding-bottom: 5rem;
}

.noitem {
	width:100%;
    /*display: none;*/
    text-align: center;
	padding-top:100px;
}
@media screen and (max-width: 736px) {
#SMP------------------------{}
    #spheader .rogo01 {
        width: 260px!important;
    }
    .pankuzu {
		display: none;
    }
	
	.subfooter {
		padding:8VW 0;
		margin:0 auto 0rem;
	}
	.subfooter .inner{
        width:92%;
	}
	.subfooter .inner ul li{
        width:100%;
		margin-bottom:4VW;
	}
	.subfooter .inner ul li img{
        width:100%;
		height:auto;
	}
	.subfooter .inner ul li a,
	.return a{
        width:100%;
		height:60px;
		font-size:18px;
		line-height:60px;
        background:url("../image/works/arrow_w.png") right 15px center no-repeat;
	}
	.subfooter .inner ul li:last-child{
		margin:0px 0% 0 13%;
		height:20.0VW;
		width:87%;
	}
	
	.return {
        width:92%;
		height:60px;
		margin:0 auto 5rem;
	}
}

@media screen and (min-width: 737px) {
#PC------------------------{}
    
    .pankuzu {
        width:1200px;
		padding: 5px 0;
        font-size: 12px;
    }
    #navi > ul > li:nth-child(2) {
        background-color: #3391ce;
    }
	
	.subfooter {
		padding:50px 0;
		margin:0 auto 5rem;
	}
	.subfooter .inner{
        width:1200px;
		height:86px;
	}
	.subfooter .inner ul li{
		float:left;
        width:380px;
		margin-right:22px;
	}
	.subfooter .inner ul li a{
        width:380px;
		height:86px;
		font-size:18px;
		line-height:86px;
        background:url("../image/works/arrow_w.png") right 15px center no-repeat;
		background-size:2.5%;
	}
	.subfooter .inner ul li:last-child{
		margin-right:0px;
	}
	.subfooter .inner ul li:last-child a{
		pointer-events: none;
	}
	
	.return {
		width:380px;
		height:86px;
		margin:0 auto 5rem;
	}
	.return a{
        width:380px;
		height:86px;
		font-size:18px;
		line-height:86px;
        background:url("../image/works/arrow_w.png") right 15px center no-repeat;
	}
}
@media screen and (min-width: 737px) and (max-width: 969px){
#TABLET------------------------{}
	body, #header #navi {
        min-width: auto;
    }
	.inner,
	#navi > ul,
	#navi > ul > li a,
    .works_detail .pankuzu,
	#footer-middle,
	footer .inner,
	.subfooter .inner ul li a {
        width: 100%;
    }
	#navi > ul > li{
        width: calc(100% / 6);
        font-size: 11px;
    }
	.subfooter .inner {
        width: 96%;
		padding:0 2%;
    }
	.subfooter .inner ul {
        width: 100%;
    }
	.subfooter .inner ul li {
        width: 23%;
        margin-right: 2%;
    }
	.subfooter .inner ul li:last-child {
        width: 50%;
        margin-right: 0;
    }
	.subfooter .inner ul li img {
        width: 100%;
        height:auto;
    }
}

	
.subfooter {
    width:100%;
    background-color: #666;
}
.subfooter .inner{
    margin:0 auto;
}
.return a,
.subfooter .inner ul li a{
    display:block;
    background-color: #0075c2;
    text-align: center;
    font-weight:bold;
    color:#FFF;
    text-decoration: none;
    font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","游ゴシック", "YuGothic","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.subfooter .inner ul li a:hover{
    background-color: #1886cf;
}
.subfooter .inner ul li:last-child a{
    background:none;
    background-color: transparent;
}
.subfooter .inner ul li:nth-child(2) a{
    background-color: #ff6600;
}
.subfooter .inner ul li:nth-child(2) a:hover{
    background-color: #ff822f;
}

.pankuzu {
    margin:0 auto;
    text-align:left;
}
.pankuzu a,
.pankuzu span {
    background:url(../image/reader_header.gif) center left no-repeat;
    padding-left:8px;
    margin-left: -5px;
    color:#000;
	font-size:11px;
}