@charset "UTF-8";
/*
Theme Name: Theme R Plus Hirakata
Author: 株式会社 t-image
Author URI: https://www.t-image2014.org/
Description: 株式会社 WIS様のWordPressテーマ
*/

/*ここから
color:#191919;
*/

/*ここから汎用*/

.box{
    height: 100vh;
	padding: 80px 0 40px;
}
.pagenation{
    padding: 20px;
    position: fixed;
    right: 0;
    top: 50%;
}
.pagenation li{
    list-style-type: none;
    margin-bottom: 20px;
}
.pagenation a{
    display: block;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    border: 1px solid #333;
	position:relative;
}
.pagenation a:hover{
	cursor:pointer;
}
.pagenation a:hover::before{
	cursor:pointer;
	content: " ";
    border-radius: 50%;
	height:8px;
    width: 8px;
	background-color:#9CC813;
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.pagenation a.active::before{
	content: " ";
    border-radius: 50%;
	height:8px;
    width: 8px;
	background-color:#333;
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.fw-500{
	font-weight:500;
}
.fc-red{
	color:#FF0000!important;
}
.heading-black {
    color: #fff;
    padding: 8px 40px;
    margin: 40px 0;
    font-size: 1.2rem;
    font-weight: 300;
    background-image: url(img/heading-black.gif);
    background-repeat: no-repeat;
    background-size: 100%, cover;
    background-position: center;
}
	.heading-black.heading-black-case{
		margin: 20px 16px 60px;
	}
.heading-white {
    color: #191919;
    padding: 8px 0 8px 40px;
    margin: 40px 0 20px;
    font-size: 1.4rem;
    font-weight: 500;
}

.bb-gray {
    border-bottom: 1px solid #dfdfdf;
}

.wf-sawarabimincho {
    font-family: "Sawarabi Mincho" !important;
}

.title-subpage {
    font-size: 1.6em !important;
    text-align: center !important;
    font-weight: 300 !important;
	line-height: 40px;
}

.container-a {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    box-sizing: border-box;
    padding: 0 40px;
}

.container-a:nth-of-type(odd) {
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
}

.container-a>.item-a:first-of-type {
    width: 70%;
    box-sizing: border-box;
    padding: 0 40px 0 0;
}

.container-a:nth-of-type(odd)>.item-a:first-of-type {
    padding: 0 0 0 40px;
}

.container-a>.item-a:last-of-type {
    width: 30%;
}

.container-a>.item-a:last-of-type img {
    width: 100%;
}

.container-b {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    box-sizing: border-box;
    padding: 40px 0;
}

.container-b>.item-b {
    width: 30%;
}

.container-b>.item-b>p {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.container-b>.item-b img {
    width: 100%;
}

.container-c {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    box-sizing: border-box;
    padding: 60px 0 80px;
}

.container-c>.item-c {
    width: 30%;
    text-align: center;
}

.container-c>.item-c i {
    font-size: 2.6rem;
    color: #4c4c4c;
}

.container-c>.item-c>p {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.container-d {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    box-sizing: border-box;
    padding: 60px 0 80px;
}

.container-d>.item-d:first-of-type {
    width: 54%;
}

.container-d>.item-d:last-of-type {
    width: 42%;
}

.container-d>.item-d img {
    width: 100%;
}

.circle {
    width: 260px;
    height: 260px;
    background-size: 260px 260px;
    border-radius: 50%;
    position: relative;
}

.circle>p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.6rem;
    font-weight: 900;
    white-space: nowrap;
}

.circle-blue {
    background-color: #54b2c1;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #57b9c6), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #57b9c6), color-stop(.75, #57b9c6), color-stop(.75, transparent), to(transparent));
    -webkit-background-size: 7px 7px;
}

.circle-blue>p {
    text-shadow: 2px 2px 0 #2c7d8a, -2px 2px 0 #2c7d8a, 2px -2px 0 #2c7d8a, -2px -2px 0 #2c7d8a;
}

.circle-red {
    background-color: #db7b78;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #e68484), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #e68484), color-stop(.75, #e68484), color-stop(.75, transparent), to(transparent));
    -webkit-background-size: 7px 7px;
}

.circle-red>p {
    text-shadow: 2px 2px 0 #ae4e4b, -2px 2px 0 #ae4e4b, 2px -2px 0 #ae4e4b, -2px -2px 0 #ae4e4b;
}

.circle-yellow {
    background-color: #d5b878;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #e3c385), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #e3c385), color-stop(.75, #e3c385), color-stop(.75, transparent), to(transparent));
    -webkit-background-size: 7px 7px;
}

.circle-yellow>p {
    text-shadow: 2px 2px 0 #a98c4c, -2px 2px 0 #a98c4c, 2px -2px 0 #a98c4c, -2px -2px 0 #a98c4c;
}

.table-a {
    text-align: center;
    width: auto;
    margin: 60px auto;
}

.table-a th,
.table-a td {
    border: 1px solid #000;
    padding: 4px 20px;
}

.table-a th {
    background-color: #f0f0f0;
}

.box-black {
    padding: 40px;
    border: 1px solid #000;
    margin-bottom: 40px;
}
.br-sp{
	display:none;
}
/*ここまで汎用*/

/*ここからパンくず*/

.breadcrumbs {
    padding: 8px 0;
    background-color: #000;
}

#breadcrumbs {
    color: #fff;
    max-width: 1024px;
    margin: 0 auto;
}

#breadcrumbs a,
#breadcrumbs span {
    color: #fff !important;
}

/*ここまでパンくず*/

/*ここからページネーション*/

.pagination {
    text-align: center;
    margin: 20px 0;
    width: 100%;
}

.wp-pagenavi a,
.wp-pagenavi span {
    color: #444456;
    border: none;
    border-bottom: 2px solid #e5e5e5;
}

.wp-pagenavi a:hover {
    border-bottom: 2px solid #149ACC;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    color: #149ACC;
}

.wp-pagenavi span.current {
    border-bottom: 2px solid #149ACC;
    color: #444456;
    font-weight: 500;
}

.wp-pagenavi a,
.wp-pagenavi span {
    padding: 4px 12px;
    margin: 0 2px;
}

/*ここまでページネーション*/

body {
	font-family: "Sawarabi Mincho";
    font-weight: 200;
    color: #191919;
	line-height:28px;
	letter-spacing: 2px;
}

.click-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.pc-none {
    display: none;
}

.layer-black {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.inner {
    max-width: 1024px;
    margin: 0 auto;
}

.tc {
    text-align: center;
}

.tl {
    text-align: left;
}

.tr {
    text-align: right;
}

.container-form {
    display: flex;
    display: -webkit-flex;
}

.container-form>a,
.container-form>button {
    margin-right: 8px;
}

.btn-cv {
    display: inline-block;
    font-size: 1.0rem;
    padding: 8px 140px;
    text-decoration: none;
    background-color: #000;
    color: #fff;
    border: solid 1px #000;
    transition: .4s;
    white-space: nowrap;
	font-family: "Sawarabi Gothic";
}

.btn-cv:hover {
    background-color: #fff;
    border: solid 1px #000;
    color: #000;
}

.btn-cv.btn-secondary {
    background-color: #fff;
    border: solid 1px #000;
    color: #000 !important;
	font-family: "Sawarabi Gothic";
}

.btn-cv.btn-secondary:hover {
    border: solid 1px #00a8ff;
    background-color: #00a8ff;
    color: #fff !important;
}

.container-form button {
    white-space: nowrap;
	font-family: "Sawarabi Gothic";
}

p.card-header {
    text-align: center;
    font-size: 2.0rem;
    margin: 20px auto;
}

/*ここまで全般の設定*/

#header {
    position: relative;
}
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
#header h1.logo {
    max-width: 1024px;
    margin: 0 auto;
}

#header h1.logo img {
    position: absolute;
    top: 40px;
    left: 14%;
    width: 300px;
}

#header p.leading {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 2.4rem;
    line-height: 2.4;
	letter-spacing: 12px;
    text-align: center;
    transform: translateY(-50%);
    text-shadow: 1px 2px 3px grey;
}

/*ここからサブヘッダー*/

.container-header-top-sub {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}

.item-header-top-sub img {
    width: 180px;
    height: auto;
}

.item-header-top-sub>p {
    font-size: 1.0rem;
}

.item-header-top-sub>p>span {
    font-size: 2.0rem;
    font-weight: 300;
}
.item-header-top-sub>p>span a{
color:#191919;
}
#header-sub {
    height: 200px;
    background-image: url(img/hero-sub-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.inner-header-sub {
    max-width: 1024px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}

#header-sub p.leading {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
    font-size: 2.4rem;
    text-align: left;
	    line-height: 56px;
}

/*ここまでサブヘッダー*/

nav {
    transition: .3s;
    height: 60px;
	background: #000000;
    transition: .3s;
}

.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
}

.is-hide {
    transform: translateY(-100%);
}

/*ここからinfo*/

.title-info {
    font-size: 2.0rem;
    font-weight: 400;
    margin-bottom: 12px;
}

.title-info span {
    font-size: 1.0rem;
    font-weight: 300;
}

.container-info {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.item-info {
    padding: 60px 28px 0px;
    box-sizing: border-box;
    background-color: #eeeeee;
}

.container-info .item-info:first-of-type {
    width: 65%;
}

.box-card {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-wrap: wrap;
}

.box-card>.card {
    position: relative;
    width: 200px;
    box-sizing: border-box;
    overflow: hidden;
}

.box-card>.card:nth-of-type(1) {
    margin-left: 0;
}

.box-card>.card:nth-of-type(2) {
    margin: 0 4px;
}

.box-card>.card:nth-of-type(3) {
    margin-right: 0;
}

.card-title {
	padding:8px 12px;
    font-size: 1.0rem;
    background-color: #8e8e8e;
    margin-bottom: 4px;
}

.card-img img {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

a.click-ui:hover+div.card-img img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.card-img {
    width: 100%;
    height: 141px;
    position: relative;
    overflow: hidden;
}

.card-more {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    padding: 4px 12px;
}

.card-more span {
    color: #fff;
    font-size: 0.8rem;
}

.card-excerpt {
    font-size: 0.8rem;
    border-bottom: 1px solid #bebebe;
    padding: 8px 0 12px;
}

.card-date {
    color: #bebebe;
    font-size: 0.8rem;
    margin-bottom: 40px;
}

.div-btn-link.div-btn-link-event {
    text-align: right;
}

.div-btn-link-event .btn-link>span {
    background-color: #fff;
    border: none;
    color: #000;
	font-family: "Sawarabi Gothic";
    -webkit-transition: all .3s;
    transition: all .3s;
}

.div-btn-link-event .btn-link>span:hover {
    background-color: #000;
    color: #fff;
}

.container-info .item-info:last-of-type {
    width: 34%;
}

.box-list {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-wrap: wrap;
}

.box-list>.list {
    position: relative;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-wrap: wrap;
}

.list-img img {
    width: 100%;
}

.list-img {
    width: 36%;
}

.list-summary {
    width: 64%;
    box-sizing: border-box;
    padding: 0 0 0 12px;
}

.list-date {
    font-size: 0.8rem;
}

.list-title {
    font-size: 0.9rem;
    line-height: 1.0;
    font-weight: 400;
}

.list-excerpt {
    font-size: 0.8rem;
    padding: 4px 0;
    line-height: 1.0;
}

.div-btn-link.div-btn-link-news {
    text-align: center;
}

.div-btn-link-news .btn-link>span {
    background-color: #fff;
    border: none;
    color: #000;
	font-family: "Sawarabi Gothic";
    -webkit-transition: all .3s;
    transition: all .3s;
}

.div-btn-link-news .btn-link>span:hover {
    background-color: #000;
    color: #fff;
}

/*ここまでinfo*/

/*ここからabout*/

#about {
    background-image: url(./img/section-about.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: 0 auto;
}

.inner-about {
    padding: 20px 0;
}

h2.title-about {
    font-size: 2.0rem;
    margin-bottom: 32px;
	line-height: 40px;
}

.container-about {
    display: flex;
    display: -webkit-flex;
	flex-direction:column;
    color: #fff;
}

.container-about .item-about:first-of-type {
    width: 80%;
	margin:40px auto;
    z-index: 10;
	text-align:center;
	font-size: 0.8rem;
}

.container-about .item-about:last-of-type {
    width: 100%;
    z-index: 10;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-wrap: wrap;
}

.div-btn-link {
    margin: 20px auto;
}

.btn-link>span {
    border: 1px #fff solid;
    padding: 12px 40px;
    display: inline-block;
	font-family: "Sawarabi Gothic";
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn-link>span:hover {
    background-color: #fff;
    color: #000;
}

.btn-link {
    color: #fff;
}

.container-about .item-about:last-of-type .div-btn-link:last-of-type {
    margin: 20px auto 0;
}

/*ここまでabout*/

/*ここからconcept*/

#concept {
    background-color:#000;
    position: relative;
    margin: 0 auto;
}

.inner-concept {
    padding: 32px 0 80px;
	color:#fff;
	text-align: center;
}

h2.title-concept {
    font-size: 2.0rem;
    margin-bottom: 32px;
}

.container-concept {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin: 20px auto;
}

.item-concept {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.item-concept>p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 10;
    font-size: 1.6rem;
    width: 100%;
    text-align: center;
}

.item-concept img {
    width: 100%;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    overflow: hidden;
}

a.click-ui:hover+img.item-concept-img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

/*ここまでconcept*/

/*ここからcontact*/

#contact {
    background-image: url(./img/section-contact.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
}

.inner-contact {
    padding: 80px 0;
}

.board {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 40px 60px;
    text-align: center;
}

h2.title-contact {
    font-size: 2.0rem;
    margin-bottom: 32px;
}

.container-contact {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
}

.item-contact {
    margin: 0 28px;
}

.inner-contact .board>p {
    margin-bottom: 20px;
}

.div-btn-link-contact .btn-link>span {
    border: 1px #000 solid;
    color: #000;
	font-family: "Sawarabi Gothic";
    -webkit-transition: all .3s;
    transition: all .3s;
}

.div-btn-link-contact .btn-link>span:hover {
    background-color: #000;
    color: #fff;
}

.text-company {
    font-size: 1.2rem;
}

.text-company-tel {
    font-size: 2.0rem;
}
.text-company-tel a{
    color:#191919;
}
.text-company-address {
    font-size: 1.0rem;
}

.formrun {
    background-color: #eeeeee;
}

.formrun-system-show {
    color: red;
}

/*ここまでcontact*/

/*ここから施工事例*/

#case {
    background-color: #e5e5e5;
}

.inner-case {
    padding: 80px 0;
}

h2.title-case {
    line-height: 0.8;
    font-size: 2.0rem;
    margin-bottom: 32px;
    text-align: center;
}

.title-case span {
    font-size: 1.0rem;
    font-weight: 300;
}
.box-album-case {
    position: relative;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	    overflow: hidden;
}

.album-case {
    position: relative;
    width: 240px;
    height: 240px;
    margin-bottom: 40px;
    box-sizing: border-box;
	border:8px solid #efefef;
	    overflow: hidden;
}
.album-case:hover{
		border:8px solid #9cc813;
}
.album-case-img {
    overflow: hidden;
    width: 224px;
    height: 224px;
}

.album-case-img-effect {
    position: relative;
    width: 224px;
    height: 224px;
    transition-duration: 0.3s;
}
.album-case:hover .album-case-img{
    transform: scale(1.1);
}
.album-case:hover .album-case-img>.album-case-img-effect {
    transform: scale(1.1);
}

.album-case-img-effect:before {
    content: "";
    position: absolute;
    width: 224px;
    height: 224px;
    background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
    /* 円形グラデーション */
    transition-duration: 0.3s;
    opacity: 0;
    /* 見えないように透過しておく */
}

.album-case:hover .album-case-img>.album-case-img-effect:before {
    opacity: 1;
    /* マウスオーバーで可視化 */
}

.album-case-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    /* 見えないように透過しておく */
    text-align: left;
    font-size: 0.8rem;
    line-height: 1;
	color:#fff;
	width:72%;
}

.album-case:hover .album-case-img>.album-case-img-effect>.album-case-caption {
    opacity: 1;
    /* マウスオーバーで可視化 */
}
.places-name{
	padding:2px 12px;
	background-color:#e5e5e5;
	color:#000000;
}
.album-case-title{
	margin-top:12px;
}
.n2-active{
	border:2px solid #000;
}
/*ここまでアルバム*/
/*ここからアルバムindex*/

.box-album {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-wrap: wrap;
}

.box-album>.album {
    position: relative;
    width: 240px;
    box-sizing: border-box;
    margin: 10px;
}

.box-album>.album:nth-of-type(4n) {
    margin-right: 0;
}

.box-album>.album:nth-of-type(4n+1) {
    margin-left: 0;
}

.album .album-img {
    width: 240px;
    height: 100%;
}

.album .album-img img {
    width: 240px;
    height: 100%;
}

.box-album>.album .caption-black {
    display: inline-block;
    font-size: 0.9rem;
    color: #fff;
	font-family: "Sawarabi Gothic";
    background-color: #000;
    padding: 8px 20px;
    position: absolute;
    /* 絶対位置指定 */
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.box-album>.album .mask-black {
    width: 100%;
    height: 100%;
    position: absolute;
    /* 絶対位置指定 */
    top: 0;
    left: 0;
    opacity: 0;
    /* マスクを表示しない */
    background-color: rgba(0, 0, 0, 0.5);
    /* マスクは半透明 */
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.box-album>.album:hover .mask-black {
    opacity: 1;
    /* マスクを表示する */
}

/*ここまでアルバムindex*/

.div-btn-link.div-btn-link-case {
    text-align: center;
}

.div-btn-link-case .btn-link>span {
    background-color: #fff;
    border: none;
    color: #000;
	font-family: "Sawarabi Gothic";
    -webkit-transition: all .3s;
    transition: all .3s;
}

.div-btn-link-case .btn-link>span:hover {
    background-color: #000;
    color: #fff;
}

.inner-single-case {
    padding: 60px;
}

/*ここから表示ページ*/
.case-subtitle{
	margin-top: 40px;
    margin-bottom: 120px;
}
.case-point {
    border-bottom: 8px solid #eeeeee;
    font-size: 1.6rem;
	padding-bottom: 4px;
	margin-bottom: 16px;
}
.case-point img{
    height: 28px;
    margin-right: 8px;
}
.case-each {
    padding: 40px 0;
    border-bottom: 2px solid #efefef;
	display: flex;
	display:-webkit-flex;
	align-items: flex-start;
	-webkit-align-items: flex-start;
}
.number-in-circle {
	font-size: 1.0rem;
    border-radius: 50%;
    padding: 2px 10px;
    color: #fff;
    background-color: #393939;
	margin-right:20px;
}
/*ここから次の記事*/
/*--------------------------------
PREV NEXT
---------------------------------*/
#prev_next{
width:100%;
margin: 36px 0 24px;
padding:0;
display: flex;
display:-webkit-flex;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	    align-items: flex-start;
	    -webkit-align-items: flex-start;
}
.container-post{
	padding:10px 10px;
	display: flex;
	display:-webkit-flex;
	background-color: #efefef;
}
.container-post.reverse{
flex-direction:row-reverse;
-webkit-flex-direction:row-reverse;
}
.item-post{
	position:relative;
}
.back-home{
	white-space:nowrap;
	    font-size: 0.9rem;
}
#prev_next  #prev, #prev_next  #next{
width:49%;
position:relative;
text-decoration:none;
}
#prev_next #prev p, #prev_next #next p{
font-size: 0.8rem;
line-height:1.5;
}

#prev_next #prev{
}
#prev_next #prev_title, #prev_next #next_title{
position: absolute;
bottom: 8px;
font-size: 0.8rem;
background:#000; 
text-align: center;
padding:3px;
color:#fff;
}
#prev_next #next_title{
right:0;
}
#prev_next #prev_no, #prev_next #next_no{
width: 50%;
padding:10px;
}
#prev_next_home{
margin:0 auto;
width: 140px;
text-align:center;	
}
#prev_next_home i{
color:#222;
margin:10px auto ;
font-size:32px;
}
/*-- ここまで --*/
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
	.post-around-title{
		display:none;
	}
	.container-post {
    flex-direction: column!important;
	-webkit-flex-direction: column!important;
}
#prev_next #prev_title, #prev_next #next_title{
position: static;
bottom: 0;
padding:4px;
display: block;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*-- ここから --*/
/*--------------------------------------
768px PREV NEXT
--------------------------------------*/
#prev_next #prev, #prev_next #prev::before, #prev_next #prev::after,
#prev_next #next, #prev_next #next::before, #prev_next #next::after {	
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
#prev_next #prev_title, #prev_next #next_title{
padding:0px 8px;
	white-space: nowrap;
}
#prev_next #next_title{
	right:0;
}
#prev_next #prev img{
margin-right:10px
}
#prev_next #next img{
margin-left: 10px;
}
/*-- ここまで --*/
}
/*ここまで前の記事*/
/*ここまで表示ページ*/
.card-wide {
    width: 500px;
	margin:0 auto;
	position:relative;
	display:flex;
	display:-webkit-flex;
	background-color:#efefef;
	padding: 10px 10px;
	box-sizing:border-box;
}
.for-sp {
	display:none;
}
.card-wide-img{
	width:100px;
	height:100px;
	padding-right:10px;
}
.card-wide-img img{
	width:100px;
	height:100px;
	
}
.card-wide-title {
    font-weight: 600;
    font-family: "Sawarabi Gothic";
}
.card-wide-date {
    color: rgba(0,0,0,0.6);
}
.back-case{
	margin:40px auto 60px;
}
/*ここまで施工事例*/

/*ここからcompany*/

.inner-company {
    text-align: center;
    padding: 80px 0;
}

.company-img {
    width: 300px;
    margin: 0 auto 40px;
}

.company-img img {
    width: 100%;
}

.inner-company>p {
    margin-bottom: 20px;
}

/*ここまでcompany*/

/*ここからよくある質問*/

.box-black-answer>p:first-of-type>span {
    color: #5b85ff;
    font-size: 1.2rem;
}

.box-black-answer>p:first-of-type {
    background-color: #eeeeee;
    padding: 8px 20px;
    font-size: 1.2rem;
}

.box-black-answer>p:last-of-type>span {
    color: #ff7171;
    font-size: 1.2rem;
}

.box-black-answer>p:last-of-type {
    padding: 8px 20px;
}

.box-black-question p {
    position: relative;
    padding: 12px 8px;
    color: #191919;
}

/*ここまでよくある質問*/

/*ここからfooter*/
.footer-outer{
	    padding-top: 40px;
}
.enter-footer {
    text-align: center;
    margin: 28px auto;
}

.enter-footer a+a {
    border-left: 1px solid #333;
}

.enter-footer>a {
    padding: 4px 16px;
    color: #191919;
}

.footer {
    background-color: #1d1d1d;
}

.inner-footer {
    padding: 80px 0;
}

.container-footer {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.item-footer-img {
    width: 160px;
}

.item-footer-img img {
    width: 100%;
}

.copyright {
    color: #fff;
}

/*ここから下層ページ*/

#company-footer {
    background-color: #ededed;
}

/*ここまでfooter*/

/*ここから記事*/

.main-article {
    margin: 80px auto;
}

.inner.inner-article {
    text-align: left;
    padding: 60px;
    box-sizing: border-box;
    background-color: #fff;
    -webkit-box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
    box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
}

.title-article {
    letter-spacing: 0.1em;
    font-size: 2.0em;
    padding: 0 20px 20px 50px;
    background-image: url(./img/article-m.png);
    background-repeat: no-repeat;
    background-position: center left;
}

.img-article {
    width: 100%;
}

.img-article img {
    width: 100%;
}

.text-article {
    line-height: 2.0rem;
}

.article-cta-text{
	width:52%;
	margin:40px auto 20px;
	text-align:center;
}
.article-cta-btn{
	text-align:center;
	margin:0 auto 60px;
}
.article-cta-btn .article-cta-btn-a>span {
	background-color: #000;
    border: 1px #000 solid;
    color: #fff;
	font-family: "Sawarabi Gothic";
    -webkit-transition: all .3s;
    transition: all .3s;
	    padding: 12px 40px;
    display: inline-block;
}

.article-cta-btn .article-cta-btn-a>span:hover {
    background-color: #fff;
	border: 1px #000 solid;
    color: #000;
}
/*ここまで記事*/

/*ここから固定ページ*/

.main-page {
    margin: 80px auto;
}

.inner.inner-page {
    text-align: left;
    padding: 60px;
    box-sizing: border-box;
    background-color: #fff;
    -webkit-box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
    box-shadow: 8px 0px 32px -4px rgba(0, 0, 0, 0.2);
}

.title-page {
    letter-spacing: 0.1em;
    font-size: 2.0em;
    text-align: center;
}

.text-page {
    line-height: 2.0rem;
}

/*ここまで固定ページ*/

/*ここから下層ページ*/

.main-subpage {
    margin: 80px auto;
}

.inner.inner-subpage {
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.title-subpage {
    letter-spacing: 0.1em;
    font-size: 2.0em;
    text-align: center;
    font-weight: 300;
}

.text-subpage {
    line-height: 2.0rem;
}

.overview-subpage {
    text-align: center;
    margin: 40px auto 20px;
}

.overview-subpage p:first-of-type {
    margin-bottom: 20px;
}

.container-subpage-menu {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin-bottom: 40px;
}

.container-subpage-menu>div+div {
    border-left: 1px solid #858585;
}

.item-subpage-menu {
    width: 25%;
    text-align: center;
}

.item-subpage-menu.item-subpage-menu-3 {
    width: 33.3%;
}

.item-subpage-menu a {
    color: #191919;
}

.tc.img-arrow img {
    width: 200px;
    height: auto;
}

/*ここまで下層ページ*/

/*ここからカテゴリー*/

.title-category {
    letter-spacing: 0.1em;
    font-size: 2.0em;
    text-align: center;
    margin-bottom: 40px;
}

article.article-category .box-card>.card {
    position: relative;
    width: 30%;
    box-sizing: border-box;
    margin: 0 25px;
}

article.article-category .box-card>.card:nth-of-type(3n+1) {
    margin-left: 0;
}

article.article-category .box-card>.card:nth-of-type(3n) {
    margin-right: 0;
}

article.article-category .card-title {
    font-size: 1.0rem;
    background-color: #8e8e8e;
    margin-bottom: 4px;
}

article.article-category .card-img img {
    width: 100%;
}

article.article-category .card-img {
    width: 100%;
    position: relative;
    height: auto;
}

article.article-category .card-more {
    position: absolute;
    bottom: 8px;
    right: 0;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    padding: 4px 12px;
}

article.article-category .card-more span {
    color: #fff;
    font-size: 0.8rem;
}

article.article-category .card-excerpt {
    font-size: 0.8rem;
    border-bottom: 1px solid #bebebe;
    padding: 8px 0 12px;
}

article.article-category .card-date {
    color: #bebebe;
    font-size: 0.8rem;
    margin-bottom: 40px;
}
.card-more{
		font-family: "Sawarabi Gothic";
}
/*ここまでカテゴリー*/

/*ここからnavi*/

.main-nav {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    background-color: #fff;
    height: 100px;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.overlay-black {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/*ヘッダーメニュー*/

#navbutton {
    display: none;
}

.header-nav-top {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-self: flex-end;
    -webkit-align-self: flex-end;
}

.menu {
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    *zoom: 1;
    list-style-type: none;
    position: relative;
    width: 100%;
    height: 60px;
    margin: 0 auto;
    padding: 0;
}

.menu>li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.menu>li {
    border-left: 1px solid #858585;
    border-right: 1px solid #858585;
}

.menu>li+li {
    border-left: 0;
    border-right: 1px solid #858585;
}

.menu>li a {
    display: block;
    color: #fff;
    font-size: calc(71.0% + 0.5vw);
	    transition: all .5s;
	    -webkit-transition: all .5s;
}

.menu>li a:hover {
    color: #000;
	background-color:#fff;
    box-sizing: border-box;
    display: block;
    padding: 0 auto;
    width: 100%;
    margin: 0 auto;
}

.menu>li:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
    box-sizing: border-box;
}

/*ここからサブメニュー*/

ul.sub-menu {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    height: auto;
}

li.menu-item:hover ul.sub-menu {
    top: 40px;
    visibility: visible;
    opacity: 1;
}

ul.sub-menu>li {
    text-align: center;
    height: auto !important;
    border-bottom: 0.5px solid #fff;
}

ul.sub-menu>li>a {
    color: #fff !important;
}

.sub-menu li a {
    font-size: 0.8rem;
    line-height: 1.2;
    /*ここから追加*/
    transition: .2s;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 12px 8px;
}

li.menu-item ul.sub-menu {
    width: 100%;
    background-color: rgba(25, 25, 25, 0.85);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.sub-menu li a:hover {
    transition: .2s;
    background-color: rgba(0, 0, 0, 0.85);
}

.menu>li.menu-item {
    position: relative;
    z-index: 30;
}

/* floatクリア */

.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

/*ここからナビの動き*/

#menu-header-nav li ul li {
    overflow: hidden;
    height: 0;
    transition: .2s;
}

#menu-header-nav li:hover ul li {
    overflow: visible;
    height: 38px;
}

/*ここまでnavi*/

/*ここからコンタクトフォーム*/

.wpcf7 .wpcf7-not-valid {
    background: #ffb6c1;
}

.wpcf7 .wpcf7-validation-errors {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.wpcf7 .wpcf7-mail-sent-ok {
    color: #3A87AD;
    background-color: #D9EDF7;
    border: 1px solid #BCE8F1;
}

/*ここからチェックボックス*/

span.wpcf7-list-item {
    margin: 0;
}

.wpcf7-list-item label input[type="checkbox"]+span,
.wpcf7-list-item label input[type="radio"]+span {
    position: relative;
    padding: 0 40px 0 28px;
}

.table-res-form .checkbox-582 label input[type="checkbox"]+span::before {
    border-color: #e5e5e5;
    background-color: #fff;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.table-res-form .checkbox-582 label input[type="checkbox"]:checked+span::before {
    background-color: #616161;
}

.table-res-form label span {
    display: inline-block;
}

.table-res-form label input[type="checkbox"] {
    display: none;
}

.table-res-form label input[type="checkbox"]+span::before,
.table-res-form label input[type="checkbox"]+span::after {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    content: '';
    box-sizing: border-box;
}

.table-res-form label input[type="checkbox"]+span::before {
    z-index: 0;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border: 1px #e5e5e5 solid;
    border-radius: 4px;
}

.table-res-form label input[type="checkbox"]+span::after {
    z-index: 1;
    margin: 5px 8px;
    width: 6px;
    height: 9px;
}

.table-res-form label input[type="checkbox"]:checked+span::before {
    background-color: #616161;
}

.table-res-form label input[type="checkbox"]:checked+span::after {
    border: 2px solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*ここまでチェックボックス*/

/*　ContactForm7のテーブル化レスポンシブ調整　*/

/*テーブルを親要素の幅いっぱいに伸ばす*/

.table-res-form {
    width: 100%;
}

/*thとtd内の余白指定*/

.table-res-form th,
.table-res-form td {
    padding: 1.5em;
    box-sizing: border-box;
}

/*th（項目欄）は30%幅*/

.table-res-form th {
    width: 30%;
    text-align: left;
    vertical-align: top;
}

/*「必須」部分のスタイリング*/

.table-res-form .requied {
    font-size: 0.8em;
    color: #fff;
    background-color: red;
    padding: 4px;
    display: inline-block;
    border-radius: 4px;
    position: absolute;
    right: 0;
}

.th-required {
    position: relative;
}

/*td*/

.table-res-form td {
    width: 70%;
}

/*ここから768px以下の指定*/

@media only screen and (max-width: 768px) {
    /*thとtdをブロック化して幅100％にして、縦積み*/
    .table-res-form th,
    .table-res-form td {
        width: 100%;
        display: block;
    }
    /*th（項目名）欄の不要な余白削除・テキスト左寄せ*/
    .table-res-form th {
        padding-bottom: 0;
        text-align: left;
    }
    /*不要な最終行の左のthを非表示にする*/
    .table-res-form .empty {
        display: none;
    }
}

/*ここまで768px以下の指定---終わり*/

/*ここから入力欄のスタイル指定*/

/*各入力フォームスタイリング*/

.table-res-form input[type="text"],
input[type="email"],
textarea {
    padding: 0.5em;
    margin-bottom: 0.5em;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.section-main-contact .table-res-form input[type="text"],
.section-main-contact input[type="email"],
.section-main-contact textarea {
    border: none;
}

/*入力欄にフォーカスしたら変化*/

.table-res-form input[type="text"]:focus,
textarea:focus {
    background: #EEFFFF;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
}

/*送信ボタンスタイリング*/

.table-res-form input[type="submit"] {
    border: 1px #000 solid;
    padding: 12px 30px;
    color: #000;
    font-weight: bold;
    background-color: #ede8e4;
    -webkit-transition: all .3s;
    transition: all .3s;
}

/*送信ボタン・マウスオーバー時スタイリング*/

.table-res-form input[type="submit"]:hover {
    background: #2c1505;
    box-shadow: none;
    color: #fff;
}

/*ここからコンタクトフォーム*/

/*ここから*/

.mb0 {
    margin-bottom: 0;
}

.mt0 {
    margin-top: 0;
}

.phrase-mb {
    margin-bottom: 20px
}

.list-style-disc {
    list-style-type: disc;
    margin-left: 2.6rem;
    font-size: 1.0rem;
}

.list-style-lower-roman {
    list-style-type: lower-roman;
    margin-left: 2.6rem;
    font-size: 1.0rem;
}

/*ここまで*/

/*ここから404*/

.img-apologise img {
    width: 200px;
}

.img-apologise {
    margin: 60px auto 20px;
}

.title-apologise {
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
}

.text-apologise {
    text-align: center;
    margin-bottom: 60px;
}

/*ここまで404*/