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

/*
Theme Name: kitakoumuten
Theme URL:
Description: kitakoumuten
Author: 
Version: 
License: 
License URI: 
*/

/* ---- default ---- */
a{
	text-decoration: none;
	color: #0170c9;
	transition: opacity 0.7s linear;
}
a:hover{
	opacity: 0.7;
}

img{
	vertical-align: middle;
	max-width: 100%;
}

h1,h2,h3,h4,h5{
	margin-bottom: 1rem;
}

h3{
	font-size: 2.5rem;
	text-align: center;
}
h4{
	font-size: 1.75rem;
	text-align: center;
}

/* h style */
.style-b {
	color: #d2792b;/*文字色*/
	padding: 0.5em 0;/*上下の余白*/
	border-top: solid 3px #d2792b;/*上線*/
	border-bottom: solid 3px #d2792b;/*下線*/
}

.color1{color:#0d4b7c;}
.bcolor1{background-color:#0d4b7c;}

.color2{color:#0d4b7c;}
.bcolor2{background-color:#f2f2f2;}

.color3{color:#0d4b7c;}
.bcolor3{background-color:#0d4b7c;}

.gfont1{font-family: 'GFS Didot', serif;}
.gfont2{font-family: "Noto Sans JP"; }


/* 余白 */
.mb1{margin-bottom: 1rem !important;}
.mb2{margin-bottom: 2rem !important;}
.mb3{margin-bottom: 3rem !important;}
.mb4{margin-bottom: 4rem !important;}
.mb5{margin-bottom: 5rem !important;}
.mt2{margin-top:2rem !important;}

.ptb1{padding:1rem 0;}
.ptb2{padding:2rem 0;}
.ptb25{padding: 2.5rem 0;}
.ptb3{padding:3rem 0;}
.ptb4{padding:4rem 0;}
.ptb5{padding:5rem 0;}

.pt5{padding:5rem 0 0;}

/* layout */
.talignC{text-align: center;}
.talignR{text-align: right;}
.talignL{text-align: left;}

.flex{
	
}
.flex li{
	margin-bottom:2rem;
}
.flex li:last-child{
	margin-bottom: 0;
}


html{
	font-size: 75%;/*12px*/
	-webkit-font-smooting:antialiased;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	line-height: 1.5;
}
body{
	opacity: 0;
	transition:opacity 5.0s;
	-moz-transition:opacity 5.0s;
	-webkit-tansition:opacity 5.0s;
}

body.load{
	opacity: 1;
}

.allWrap{
	overflow: hidden;
}

/* ---- header ---- */
header{
	overflow: hidden;
}
.head-wrap{
	
}
.desc-text{
	width:95%;
	margin:0 auto;
	padding:0.25rem 0;
	font-size: 0.875rem;
}
.head-inner{
	width:100%;
	margin:0 auto;
}
.l-head{
	padding:0.5rem 0;
}
.l-head h1{
	margin-bottom:0;
}
.l-head img{
	
}
.l-nav{
	
}



/* ---- global navi ---- */
nav{
	position:absolute;
	z-index: 10000;
	width: 80%;
	height: 100%;
	background: #fff;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	opacity: 0;
}

nav ul{
	width: 90%;
	margin:0 auto;
}

nav ul li{
	border-bottom: 1px solid #e5e5e5;
}

nav ul li span{
	display:block;
}

nav ul li a{
	display:block;
	width:100%;
	color: #262020;
	padding:15px 0;
}

.open #nav-toggle span:nth-child(1){
	top:11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}

.open #nav-toggle span:nth-child(2){
	width: 0;
	left: 50%;
}

.open #nav-toggle span:nth-child(3){
	top:11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}

.open nav{
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	-webkit-transform:tranlateX(800px);
	-moz-transform:tranlateX(800px);
	transform:translateX(800px);
}

#nav-toggle{
	display:block;
	position: absolute;
	right: 12px;
	top: 45px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 9999;
}

#nav-toggle div{
	position:relative;
}

#nav-toggle span{
	display:block;
	position: absolute;
	height: 4px;
	width:100%;
	background: #fff;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1){
	top:0;
}

#nav-toggle span:nth-child(2){
	top:11px;
}

#nav-toggle span:nth-child(3){
	top:22px;
}

.styleE {
  	text-align: center;
    margin-bottom: 0;
    line-height: 1.5;
    letter-spacing: 1.2rem;
    font-weight: normal;
    font-size: 1.25rem;
    opacity: 0;
}

.fade-in{
	transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}

.fade-inR{
	transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}

.fadeList li{
	position:relative;
	margin-bottom:7rem;
}
.fadeList li:last-child{
	margin-bottom:0;
}
.fadeList li a h4{
	color: #262020;
}
.fadeList li a:hover h4{
	color:#0170c9;
	border-bottom: solid 2px #0170c9;
}

.fadeInner{
	overflow: hidden;
	
}
.fadeImg1{
	background-image: url(images/top_fade001.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.fadeImg2{
	background-image: url(images/top_fade002.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.fadeImg3{
	background-image: url(images/top_fade003.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.fadeInner .fadePosi{
	float: left;
	padding: 3rem 9% 2rem 4%;
	margin: -5px 0 -4px;
	-webkit-clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	background:#fff;
	font-size:2rem;
    color: #000;
}
.fadeInner h4{
	margin-bottom:1rem;
	line-height: 1.3;
	border-bottom: solid 2px #262020;
}
.fadePosi p{
	font-size: 0.875rem;
}
.mainVisual{
	
}
.mainVisual{
	position:relative;	
}
.posT{
	position: absolute;
	bottom:0;
	z-index: 9999;
}
.img-bottom-wrap{
	position:relative;
	padding:0 0 5rem 0;
}
.postB{
	position:absolute;
	top: 75%;
  	left: 50%;
  	-webkit-transform: translateY(-50%) translateX(-50%);
  	transform: translateY(-50%) translateX(-50%);
}

.topicsWrap{
	width:90%;
	margin: 0 auto;
}

.topicsWrap .l-flex li .box{
	position: relative;
}
.topicsWrap .l-flex li .box > p{
	padding-bottom: 50px;
}

.topicsWrap .l-flex li{
	border:solid 2px #ccc;
	box-sizing: border-box;
	padding:0.5rem;
	margin-bottom: 3rem;
}
.topicsWrap .l-flex li:last-child{
	margin-bottom: 0;
}

.topicsWrap .l-flex li .box h4{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width:100px;
	height: 100px;
	background:#0d4b7c;
	border: solid 2px #fff;
	box-shadow: 0 0 0 2px #0d4b7c;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
	color: #fff;
}

.topicsWrap .l-flex li .box h4 span{
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
	display: block;
	font-size: 2.2rem;
	letter-spacing: 0.2rem;
	padding:1rem;
	text-align: center;
}

.topicsText{
	width:90%;
	margin:2rem auto 0;
}

.boxText{
	margin-top: 50px;
}

.fade-up {
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}

.infoWrap{
	width:90%;
	margin:0 auto;
	padding:0.5rem;
	background-color: #fff;
}
.infoWrap ul{
	
}
.infoWrap ul li{
	padding:0.5rem 0;
	margin:0 0 1rem;
	border-bottom:dashed 1px #eee;
}
.infoWrap ul li:last-child{
	margin-bottom:0.5rem;
	border:none;
}
.infoWrap ul li a{
	color: #000;
}
.infoWrap ul li a:hover{
	color: #0170c9;
}

/* カテゴリー色分け */
.info{
	padding:0.25rem 0.5rem;
	background-color: #d2792b;
	color: #fff;
}

/* ----------------------------
// page
// --------------------------*/
.page-contents{
	width: 90%;
	margin: 0 auto;
}
.page-visual{
	position: relative;
}
.posi-c{
	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%);
}
.shadow-w{
	text-shadow: 0 0 14px #fff;
}

.greeting{
	margin:0 0 2.5rem;
}

.sv1-table{
	width:100%;
	margin: 0 auto;
	border-collapse: collapse;
	border: solid 1px #ccc;
    box-sizing: border-box;
}
.sv1-table tr{
	
}
.sv1-table th, .sv1-table td{
	padding:0.5rem 1rem;
	
}
.sv1-table th{
	width:30%;
	background-color: #0170c9;
	color: #fff;
	border: dashed 1px #aaa;
}
.sv1-table td{
	width:70%;
}

.sv1-deco{
	border-bottom:dashed 1px #ccc;
}


/* ---- 実績一覧 ---- */
.archive-inner{
	width:90%;
	margin:0 auto;
}
ul.archiveWorkList{
	
}
.archiveWorkList li{
	margin-bottom:2rem;
}

.archiveWorkList li a{
	color:#262020;
	transition:opacity 0.7s linear;
}
.archiveWorkList li a:hover{
	opacity:0.7;
}

.work-title{
	padding: 0.3rem 0;
	font-size: 1.125rem;
}


/* ---- お問合せ ---- */
input, button, textarea, select {
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	color:#666;
}

.contactTableBox{
	width:90%;
	position: relative;
	margin: 0 auto;
	padding-bottom: 2.5rem;
}

.contactTableBox table{
	width:100%;
	margin-bottom: 2rem;
	table-layout: fixed;
	border-collapse: collapse;
}

.contactTableBox tbody th{
	vertical-align: top;
	text-align: left;
}

.contactTableBox td, .contactTableBox th{
	display: list-item;
	font-size: 1rem;
	font-weight: 500;
	padding: 8px 0;
	list-style: none;
}

.rd{
	margin-right: 28px;
	padding: 5px 7px;
	background: #e09496;
	color: #fff;
	font-size: 0.875rem;
	font-weight: bold;
	vertical-align: baseline;
}
.any{
	margin-right: 28px;
	padding: 5px 7px;
	background: #6677B6;
	color: #fff;
	font-size: 0.875rem;
	font-weight: bold;
	vertical-align: baseline;
}
input[type="text"], input[type="email"], input[type="tel"]{
	width:100%;
	box-sizing: border-box;
	border:1px solid #ccc;
	font-family: sans-serif;
	font-size: 1rem;
	padding:0.7rem;
	border-radius: 3px;
	color:#666;
}
input[type="radio"]{
	margin-left: 10px;
}
textarea{
	width:100%;
	min-height: 160px;
	box-sizing: border-box;
	border: solid 1px #ccc;
	font-family: sans-serif;
	font-size: 1rem;
}
.mwform-tel-field input[type="text"], .mwform-zip-field input[type="text"]{
	width:auto !important;
}
.contactTableBox .btn{
	display: block;
    color: #0d4b7c;
    padding: 1.5rem 0;
    transition: all .5s ease;
    z-index: 2;
    position: relative;
	border:solid 2px #5b699f;
	margin:0 auto;
	text-align: center;
	width:100%;
}
input[type="submit"]{
	background:#fff;
	border: none;
}


.buttonC{
  	width:35%;
  	border:2px solid #fff;
	text-align:center;
  	cursor:pointer;
  	position:relative;
	top:0;
	right: 0;
	bottom:0;
	left:0;
  	box-sizing:border-box;
  	overflow:hidden;
  	margin:auto;
}
.effC{
  	width:100%;
	margin:0 auto;
  	height:8rem;
  	left:-550px;
  	background:#5b699f;
  	position:absolute;
  	transition:all .5s ease;
  	z-index:1;
}
.buttonC:hover .effC{
  	left:0;
}
.buttonC:hover .btn{
  	color:#fff;
}

.sendWrap{
	width:90%;
	margin:0 auto;
}

/* google map */
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*-- footer -- */
.l-ft-wrap{
	width:90%;
	margin:0 auto;
}
.ft-left{
	margin-bottom: 2.5rem;
}
.ft-right{
	
}

.ft-nav-wrap{
	
}
.l-ft-nav{
	width:90%;
	margin:0 auto;
	padding:2.5rem 0;
}
.l-ft-nav ul li{
	margin-bottom: 1rem;
}
.l-ft-nav ul li a{
	display:block;
	width:100%;
	color: #fff;
	padding:1.5rem 0;
	position: relative;
  	display: inline-block;
  	text-decoration: none;
}
.l-ft-nav ul li a::after{
	position: absolute;
  	bottom: 1rem;
  	left: 0;
	right: 0;
	margin:auto;
  	content: '';
  	width: 80%;
  	height: 2px;
  	background: #fff;
  	transform: scale(0, 1);
  	transform-origin: right top;
  	transition: transform .3s;
}


.copy-r{
	padding:0.5rem 0;
}


/* ---- category.php ---- */
.cat-pagination{
	width:100%;
}
.cat-pagination ul{
	overflow: hidden;
	display: flex;
	justify-content: center;
	margin:0 auto 2.5rem;
}
.cat-pagination ul li{
	width:10%;
	float: left;
	margin:0 3% 0 0;
	text-align: center;
	border: solid 1px #ccc;
}
.cat-pagination ul li:last-child{
	margin:0;
}
.cat-pagination ul li a{
	display:block;
	padding: 0.85rem 0;
	transition: all 1s linear;
	color:#5b699f;
}
.cat-pagination ul li a:hover{
	background: #5b699f;
	color: #fff;
	opacity: 0.7;
}
.cat-pagination ul li span.dots, .cat-pagination ul li span.current{
	display: block;
	padding: 0.85rem 0;
}
.cat-pagination ul li span.current{
	background:#0d4b7c;
	color: #fff;
}

/* ---- single.php ---- */
.single-wrap{
	width:90%;
	margin:0 auto;
}
.blog-inner{

}
.blog-inner h3{
	font-size: 1.5rem;
}
.infoWrap .date{
	display: inline-block;
    width: 28%;
}
.s-Text{
	
}
.l-thumb{
	width:90%;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.archive-box{
	padding: 1rem;
	border: solid 1px #aaa;
    box-sizing: border-box;
}
.archive-box h3{
	font-size: 1.25rem;
	text-align: left;
	border-bottom:dashed 1px #ccc;
}
.l-visual-box{
	margin-bottom: 1rem;
}


.navigation{
	width: 100%;
    overflow: hidden;
    margin: 0 auto 2rem;
	border-top: 1px solid #d2792b;
}
.navigation > div {
	width:50%;
}
.navigation .prev-st{
	float:left;
	position:relative;
	text-align: left;
}
.next-st{
	float: right;
	position: relative;
	text-align: right;
}

.navigation a{
	display:block;
	padding: 0.6rem 1.9rem;
	border: none;
	color:#4d4d4d;
	transition:opacity 0.7s linear;
}
.navigation a:hover{
	opacity:0.7;
}

.prev-mk{
	position:absolute;
	top:16px;
	color: #eee;
	vertical-align: middle;
	text-decoration: none;
	font-size: 1rem;
}

.prev-mk::before{
	position:absolute;
	top:0;
	bottom:0;
	left:0.15rem;
	margin: auto;
	content: "";
	vertical-align: middle;
	box-sizing: border-box;
	width:17px;
	height: 17px;
	background:#d2792b;
	-webkit-border-radius:50%;
	border-radius: 50%;
}

.prev-mk::after{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	content: "";
	vertical-align: middle;
	left:0.75rem;
	box-sizing: border-box;
	width:7px;
	height: 7px;
	border-top:1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 2px solid #eee;
	border-left:2px solid #eee;
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}

.next-mk{
	position:absolute;
	top:16px;
	right:18px;
	color:#eee;
	vertical-align: middle;
	text-decoration: none;
	font-size: 1rem;
}

.next-mk::before{
	position: absolute;
	top:0;
	bottom: 0;
	left:-0.15rem;
	margin:auto;
	content: "";
	vertical-align: middle;
	box-sizing: border-box;
	width:17px;
	height: 17px;
	background:#d2792b;
	-webkit-border-radius:50%;
	border-radius: 50%;
}

.next-mk::after{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	content: "";
	vertical-align: middle;
	left:0.1rem;
	box-sizing: border-box;
	width:7px;
	height: 7px;
	border-top:1px solid transparent;
	border-right: 2px solid #eee;
	border-bottom: 2px solid #eee;
	border-left:1px solid transparent;
	-ms-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}


/* ---- Clearfix ---- */
.clearfix::after{
	content: " ";
	display:block;
	height: 0;
	clear: both;
}

/**/
#pageloading-wrap {
   background: #fff;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   display: table;
   z-index: 10000;
}
#pageloading-icon {
   display: table-cell;
   vertical-align: middle;
}
.ball-pulse-sync>div, .ball-pulse>div, .ball-scale-random>div, .ball-scale>divF{
	background-color: #466bda !important;
}


.privacy{
	
}
.privacy h3{
	font-size:1.5rem;
	text-align:left;
	margin-bottom:0;
}
.privacy h4{
	font-size:1.25rem;
	text-align:left;
	margin-bottom:0.25rem;
}

.l-4 li{
	flex:0 1 23.5% !important;
}

.sp-op{opacity:1!important;}