@charset "utf-8";
/*
Theme Name: spe-template
*/


/*全体の設定
---------------------------------------------------------------------------*/
html,body,#container {height: 100%;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}

body{
	margin: 0 auto;
	padding: 0px;
	height: 100%;
	color: hsla(0,0%,15%,1.00);
	line-height: 1em;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho", "M PLUS 1p", "sans-serif", "serif","游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ";
	background: #fff; 
}

html{
	overflow-x: hidden;
}

a{color:#000;text-decoration:none;}
a:hover{color:#464646;text-decoration:underline;}
a.wh{color:#fff;text-decoration:none;}
a.wh:hover{color:#fff;text-decoration:none;}
a.rd{color:red;text-decoration:none;}
a.rd:hover{color:red;text-decoration:none;}

/*ヘッダー
---------------------------------------------------------------------------*/
header {
	position: relative;
	z-index: 20;
	width: 100%;
	height: 85px;
	top:0px;
	left:0px;
	text-align: right;
}	
header#h-top {
	background-color:rgba(255,255,255,0.7);	/*背景色*/
}	
header#h-sub {
	background-color:#1b1464;	/*背景色*/
}	
#logo{
	position: relative;
	z-index: 40;
	left:0;
	top:0;
}
.logo1 {
    position: absolute;
	z-index: 40;
	height:65px;
    left: 15px;
    top: 10px;
}
.logo1-1024{
	display: none;	
	}
	
.logo2 {
    position: absolute;
	z-index: 40;
	height:45px;
    left: 110px;
    top: 20px;
}




/*メインメニュー
---------------------------------------------------------------------------*/
#menubar{}
#menubar ul{
		top: 50px;
	    margin-right: 10px
}
#menubar ul li {
    display: inline-block;
    margin-right: 30px;
	margin-top: 40px;
	color:#fff;	
	font-family: 'Kosugi Maru', sans-serif;
}
#menubar ul li a {
	color:#fff;	
	font-weight: 400;
	text-decoration: none ;
}
#menubar ul li a:hover {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ED1C24;
	color: #ED1C24;
}
header#h-top #menubar ul li a{
	color:#000;	
}	
header#h-top #menubar ul li a:hover{
	color:#000;	
}

/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

@media screen and (max-width:1110px){
#menubar-s {display: block;}
#menu{display: none;}
#nav_toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    height: 32px;
    cursor: pointer;
	}
#nav_toggle div {position: relative;width: 36px;}
#nav_toggle span {
    width: 100%;
    height: 3px;
    left: 0;
    display: block;
    background: red;
    position: absolute;
    transition: transform .6s ease-in-out, top .5s ease;
	}
	#nav_toggle span:nth-child(1) {top: 0;}
	#nav_toggle span:nth-child(2) {top: 14px;}
	#nav_toggle span:nth-child(3) {top: 28px;}
	#nav_toggle span:hover span:nth-child(1) {top: 4px;}
	#nav_toggle span:hover span:nth-child(3) {top: 23px;}
.open {}
 .open #nav-toggle span {    background: #fff;    }
    .open #nav_toggle:nth-child(1) {top: 15px;transform: rotate(45deg);}
    .open #nav_toggle:nth-child(2) {top: 15px;width: 0;left: 50%;}
    .open #nav_toggle:nth-child(3) {top: 15px;transform: rotate(-45deg);}

/* z-index */
#nav_toggle {z-index: 1000;}
.smenu-logo{
	text-align: center;
	padding: 10px
}
.smenu-logo img{
	height:150px;
}
#gloval-nav {
    background: #1b1464;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    display: flex;
    visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    font-size: 23px;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
}
	#gloval-nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    transition: color .6s ease;
}
    #gloval-nav a:hover {color: red;}  
	#gloval-nav ul {list-style: none;}
	#gloval-nav li {
		padding:15px;
      opacity: 0;
      transform: translateX(200px);
      transition:  transform .6s ease, opacity .2s ease;
	font-family: 'Kosugi Maru', sans-serif;
	}
    #gloval-nav li:nth-child(2) {transition-delay: .15s;}
       #gloval-nav li:nth-child(3) {transition-delay: .3s;}
       #gloval-nav li:nth-child(4) {transition-delay: .45s;}
       #gloval-nav li:nth-child(5) {transition-delay: .6s;}
       #gloval-nav li:nth-child(6) {transition-delay: .75s;}
       #gloval-nav li:nth-child(7) {transition-delay: .9s;}

/* open */
.open { overflow: hidden;}
 .open #gloval-nav {visibility: visible;opacity: 1;}
 .open #gloval-nav li {
    opacity: 1;
    transform: translateX(0);
    transition:  transform 1s ease, opacity .9s ease;
  }
}

@media screen and (max-width:1024px){
header#h-top {background-color:none;}
header#h-sub {}	
	
#logo{
	position: relative;
	z-index: 40;
	left:0;
	top:0;
}
header#h-sub .logo1 {display: none;}	
header#h-sub .logo1-1024 {
	display:block;
    position: absolute;
	z-index: 40;
	height:70px;
    left: 5px;
    top: 5px;
	fill:#fff;
	color:#fff;
}
.logo2 {
    position: absolute;
	z-index: 40;
	height:45px;
    left: 110px;
    top: 20px;
	fill:#fff;
}	
}

@media screen and (max-width:600px){
#logo{
	position: relative;
	z-index: 40;
	left:0;
	top:0;
}
.logo1 {display: none;}	
.logo1-1024,header#h-sub .logo1-1024 {
	display:block;
    position: absolute;
	z-index: 40;
	height:50px;
    left: 5px;
    top: 5px;
	fill:#fff;
	color:#fff;
}
.logo2 {
    position: absolute;
	z-index: 40;
	height:30px;
    left: 110px;
    top: 10px;
	fill:#fff;
}
header {height:60px;}
header#h-top {background:none;}	
#nav_toggle {
    position: fixed;
    top: 15px;
    right: 10px;
    height: 32px;
    cursor: pointer;
	}
}

@media screen and (max-width:500px){
#logo{
	position: relative;
	z-index: 40;
}
.logo1-1024 {}
.logo2 {display:none;}
}

@media screen and (max-width:480px){
	.smenu-logo img{height:100px;}
	#gloval-nav li {padding:10px 0;font-size:14px;}
	#gloval-nav a {padding: 0;}
}


/*トップページのメイン画像
---------------------------------------------------------------------------*/

#topimg {
	position: relative;
	overflow: hidden;
	height:100vh;
	z-index: 10;
	top:-85px;
	width: auto;
	text-align: center;
	background-image: url(images/mv.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center top;
	background-color: #E6E6E6;
}
	
/* ----- 背景用の動画ファイル ----- */
#bg-video{
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 background: url('images/mv.jpg') no-repeat;
 background-size: cover;
}
/* ----- 背景の上に表示させたいコンテンツ ----- */
.header-title{
 position: relative; /*必ず必要*/
 z-index: 2; /*必ず必要*/
 width: 50%;
 justify-content: center;
 align-items: center;
 text-align:center;
 margin: auto;
}
	
#toptxt {
	padding-top:85px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
	width: 100%;
	height: 100%;
	z-index: 20;
}
.toptxt1 {
	text-align: center;
	color: #fff;	/*文字色*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
	width: 70%;		/*幅*/
	z-index: 20;
	animation-name: toptxt1;	/*アニメーションのキーフレーム（下）で指定しているkeyframesの名前（move-h1）*/
	animation-duration: 4s;	/*アニメーションの実行時間。0.5秒。*/
	animation-delay: 1.5s;		/*1.5秒遅れて開始させる*/	
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
}
	/*アニメーションのキーフレーム*/
@keyframes toptxt1 {
0% {
 opacity: 0;	/*透明度0%*/
}
100% {
 opacity: 1;	/*透明度100%*/
}
}

.toptxt2 {
	text-align: center;
	z-index: 20;
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
	animation-name: toptxt-anime2;
	animation-duration: 2.5s;	/*アニメーションの実行時間。0.5秒。*/
	animation-delay: 3.0s;		/*1.5秒遅れて開始させる*/
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
}
 @keyframes toptxt-anime2 {/*タイプライターライクなアニメーション*/
0% {
 opacity: 0;	/*透明度0%*/
}
50% {
 opacity: 1;	/*透明度0%*/
}
100% {
 opacity: 1;	/*透明度100%*/
}
}


.startbtn {
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 2;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: #FFFFFF;
    padding: 70px 0 0;
}
.startbtn span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb 1.5s infinite;
    animation: sdb 1.5s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

.top-banner1 {
	position: absolute;
	bottom: 40px;
	right: 30px;
	margin: auto;
	z-index: 20;
	width:250px;
}
.top-banner2 {
	position: absolute;
	bottom: 65px;
	right: 5px;
	margin: auto;
	z-index: 30;
	width:120px;
    -webkit-animation: click 1.5s infinite;
    animation: click 1.5s infinite;
}
 @keyframes click {/*タイプライターライクなアニメーション*/
0% {
 opacity: 1;	/*透明度0%*/
}
50% {
 opacity: 1;	/*透明度0%*/
}	 
100% {
 opacity: 0;	/*透明度0%*/
}
}	

@media screen and (max-width:480px){
	.toptxt1 {width:90%;}
}


/*フッター
---------------------------------------------------------------------------*/
footer{
	background-color:#1b1464;
	color:#fff;
}
.footer-wrap{
	width:1024px;
	margin:0 auto;
	padding:0 20px;
	background-image: url(images/spe-logo-red.svg);
	background-size: 300px;
	background-repeat: no-repeat;
	background-position:right bottom;
}
#footer-menu{padding:40px 0;}
#footer-menu ul{}
#footer-menu ul li{	
	display: inline-block;
	padding:0 10px;
	color:#fff;
	border-right:1px solid #fff;
}
#footer-menu ul li:first-child{padding:0 10px 0 0;}
#footer-menu ul li:last-child{border-right:none;}
#footer-menu ul li a{color:#fff;}
#footer-menu ul li a:hover{color:#fff;text-decoration: underline;}
.footer-logo{
	width:500px;
	margin-top: 40px;
	padding-bottom: 10px;
	border-bottom:2px solid #fff;
}
.footer-logo img{width:300px;}
.footer-address{margin-bottom:40px;}
.footer-address dl{
	width:100%;
	padding:10px 0;
	margin:0 0 30px 0;
	font-size: 13px;
	line-height: 1.5em;
	border-spacing : 10px 15px;
}
.footer-address dd{
	color:#fff;
	padding:0 10px;
	margin:10px 0;
	text-align: left;
	font-weight: 300;
	display: block;
	width: 120px;
	clear: left;
	float: left;
}
.footer-address dt{
	border-left:2px dotted #fff;
	padding:0 10px;
	color:#fff;
	text-align: left;
	display: block;
	margin:10px 0;
	width: calc(80% - 120px);
	float: left;
}
.footer-address dt a{
	color:#fff;
}
.footer-address dt a{
	
}
BR.clear{clear: left;}

#copyright{
	clear: left;
	background-color: red;
	color:#fff;
	padding:10px;
	text-align: center;
	font-size:12px;
}

@media screen and (max-width:1024px) {
	#footer-menu{display:none;}
.footer-wrap{
	width:100%;
	margin:0 auto;
	padding:40px 20px 0 20px;
	background-image: url(images/spe-logo-red.svg);
	background-size: 200px;
	background-repeat: no-repeat;
	background-position:right bottom;
}
.footer-logo{
	width:100%;
	margin-top: 40px;
	padding-bottom: 10px;
	border-bottom:2px solid #fff;
}
.footer-logo img{width:300px;}
}
@media screen and (max-width:450px) {
.footer-wrap{
	padding:30px 10px 0 10px;
	background-image: url(images/spe-logo-red.svg);
	background-size: 200px;
	background-repeat: no-repeat;
	background-position:right bottom;
}
.footer-logo img{width:90%;}

	
.footer-address dl{
}
.footer-address dd{
	width:100%;
	float: none;
}
.footer-address dt{
	width:100%;
	float: none;
	border-left:none;
	padding-bottom:10px;
	font-size:12px;
}	
#copyright{font-size:10px;}
}

/*ベース
---------------------------------------------------------------------------*/
main{margin-bottom:50px;}

.inner{
	width:100%;
	padding:30px 0;
}
.inner.works{
	padding:0 0 80px 0;
}
.inner.gray{
 background-color:#DDDDDD;
}
.inner.head{
		width:100%;
	margin:0 auto;
	 border-bottom:2px solid #1b1464;
	padding:50px 0;
	background-image: url(images/mv.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center center;
}

.contents{width:1024px;margin:0 auto;overflow:hidden;}

.contents.about{
	width:100%;
	margin:0 auto;
	background: url('images/bg-about.jpg') no-repeat;
	background-size: cover;
	padding:50px 0;
}
.contents.insta{
	padding:40px 0;
}
.contents.info{
	padding:30px 0;
}
.contents.recruit{
	width:80%;
}
.contents.sub{

}
h2{
	font-size: 32px;
	letter-spacing: 0.2em;
	border-bottom:1px solid red;
	line-height: 1.5em;
	text-align: center;
	max-width:300px;
	margin:0 auto;
	color:red;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
	font-weight: 500;
}
h2.about{
	max-width:400px;
}
p.sub{
	padding-top:5px;
	font-size: 14px;
	letter-spacing: 0.2em;
	border-bottom:none;
	line-height: 1.5em;
	text-align: center;
	max-width:300px;
	margin:0 auto;
	color:#000;
	font-weight: 500;
}
h2.head{
	max-width:400px;
	border-bottom:none;
}
h2.sub-ttl{
	font-size: 32px;
	letter-spacing: 0.2em;
	border-bottom:1px solid red;
	line-height: 1.5em;
	text-align: left;
	max-width:100%;
	margin:0 auto;
	color:red;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
	font-weight: 500;
	padding:10px;
	margin-bottom:30px;
}

.pankuzu{
	padding:0;
	font-size:12px;
	text-align:left;
}
.link-box{
	text-align: center;
	color:white;
	background-color:red;
	font-weight: 700;
	width:300px;
	padding:20px;
	margin:0 auto;
	font-size:22px;
}
.link-box a {color:#fff;}
.link-box a:hover {text-decoration:none;}

/*スクロールで表示系*/
.slideConts {
  margin: 40px auto;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.slideContsL {
  background-color: lightpink;
  transform: translate(-800px, 0);
}
.slideContsR {
  background-color: lightblue;
  transform: translate(800px, 0);
}
.slideContsL.show {
  transform: translate(-50px, 0) !important;
}
.slideContsR.show {
  transform: translate(50px, 0) !important;
}


@media screen and (max-width:1024px){
.inner{
	width:100%;
	padding:20px 0;
}
.inner.head{
		width:100%;
	margin:0 auto;
	 border-bottom:2px solid #1b1464;
	padding:20px 0;
	margin-bottom:0;
}
.contents{width:100%;margin:0 auto;padding:0 10px;}
	
h2{
	font-size: 22px;
}	
h2.sub-ttl{	
	font-size: 22px;
}	
}


/*トップ - WORKS
---------------------------------------------------------------------------*/
*, *:before, *:after {
	box-sizing: border-box;
}

.top-works{
	width:100%;
	overflow: hidden;
	margin-top:20px;
}
.top-works-wrap{
	margin:40px 20px 0 20px;
	width: calc(50% - 40px); 
	float:left;
	border:7px solid #000;
}
.top-works-wrap div{
	position:relative;
	width:100%;
	height:270px;
	background: url('images/works1.jpg') no-repeat;
	background-size: cover;
	background-position:center center;
}
.top-works-wrap.second div{
	position:relative;
	background: url('images/works2.jpg') no-repeat;
	background-size: cover;
}
.top-works-wrap.second div p , .top-works-wrap div p{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:270px;
	z-index:10;
}
.top-works-wrap.second div p:hover , .top-works-wrap div p:hover{
	background-color:blue;
	opacity:0.3;
}
.top-works-ttl{
	position:absolute;
	top:-20px;
	left:15px;
	width:40px;
	text-align: center;
	background-color: #000;
	padding:20px 0 20px 3px;
	font-size:22px;
	letter-spacing: 0.2em;
	line-height: inherit;
	z-index:20;
	color:#fff;
}

@media screen and (max-width:800px){
	.top-works-wrap{
	margin:40px 0;
	width: 100%; 
	float:none;
	border:7px solid #000;
}
}

/*トップ - INSTA
---------------------------------------------------------------------------*/
.top-insta{
	background-color: red;
	color:#fff;
	width:170px;
	padding:5px 10px;
	text-align: center;
	margin-left:60px;
	margin-bottom:20px;
	font-family: "Sawarabi Mincho";
}
.insta-pickup-pc{
	width:100%;
}
.insta-pickup-smp{
	width:100%;
	display:none;
}

@media screen and (max-width:1024px){
.insta-pickup-pc{
	padding:0 10px;
}
}

@media screen and (max-width:700px){
.insta-pickup-pc{
	display:none;
}
.insta-pickup-smp{
	display:block;
	padding:0 10px;
}
}


/*トップ - ABOUT US
---------------------------------------------------------------------------*/
.top-about-txt-wrap{
	width:70%;
	padding:40px;
	margin:0 auto;
	margin-top:40px;
	margin-bottom:40px;
	background-color: rgba(255,255,255,0.55);
	
}
.top-about-txt1{
	font-size:2vw;
	color:red;
	font-weight: 500;
	line-height: 1.8em;
	padding:0 40px;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
}
.top-about-txt2{
	width:80%;
	margin:0 auto;
	font-size:16px;
	font-weight: 500;
	line-height: 1.8em;
	padding:30px 0;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
}
p.right{
	text-align: right;
	padding:10px 0;
}

.top-about-link{
	width:200px;
	background-color: rgba(255,0,4,0.86);
	padding:10px 20px;
	color:#fff;
	letter-spacing: 0.1em;
	margin:0 auto;
	text-align: center;
	margin-top:20px;
	margin-bottom:20px;
}
.top-about-link:hover{
	background-color: rgba(0,18,107,0.78);
	transition: 0.5s ;
}

.top-about-banner{
	padding:40px 0;
}
.top-about-banner img{
	margin:10px 0;
	width:100%;
}
@media screen and (max-width:800px){
.top-about-txt-wrap{
	width:calc(100% - 40px);
		margin:0 auto;
		padding:40px 10px;
	margin-top:40px;
}
.top-about-txt1{
	font-size:3.5vw;
	padding:0 30px;
}
.top-about-txt2{
	font-size:16px;
}
.top-about-banner{
	padding:40px 0 20px 0;
	overflow:hidden;
}
.top-about-banner img{
	margin:10px 0;
}	
}

@media screen and (max-width:500px){
.top-about-txt-wrap{
	width:calc(100% - 40px);
		margin:0 auto;
		padding:40px 10px;
	margin-top:40px;
}
.top-about-txt1{
	font-size:3.5vw;
	padding:0 30px;
}
.top-about-txt2{
	width:100%;
	padding:30px 30px 0 30px;
	font-size:12px;
}	
}	

@media screen and (max-width:400px){
.top-about-txt-wrap{
	width:calc(100% - 40px);
	margin:0 auto;
	padding:40px 10px;
	margin-top:40px;
}
.top-about-txt1{
	font-size:4.5vw;
	padding:0 15px;
}
.top-about-txt2{
	width:100%;
	padding:30px 15px 0 15px;
	font-size:12px;
}	
}	

/*トップ - INFO
---------------------------------------------------------------------------*/
.info-menu{
	padding:20px;
}
ul#newsList{
	margin:0 0 15px;
	padding:3px 10px 10px;
}
ul#newsList li{
	font-size:13px;
	margin:0;
	padding:12px 0px;
	margin-bottom:3px;
	border-bottom:1px dotted #000;
	list-style-type:none;
}
.up_ymd{
   padding: 5px 10px;
    color: red;
    font-size: 14px;
	font-weight: 700;
    margin: 5px 5px 0px 0px;
    font-weight: bold;
}
.top-info-link{
	text-align: right;
	color:red;
	font-weight: 700;
	padding-right:20px;
}

@media screen and (max-width:1024px) {
.top-info-link{
	padding-right:20px;
}
}
@media screen and (max-width:550px) {
.up_ymd{display:block;width:100%;padding:0 0 5px 0;
}
.title{width:100%;display:block;line-height:1.5em;}
ul#newsList li{
	padding:8px 0px;
}
}

/*事業紹介
---------------------------------------------------------------------------*/
.works{	padding:0 10px;
	line-height:1.5em}
.works img{
	margin-bottom:20px;
}
.works-list{width:70%;margin:0 auto;padding:20px 0;}
.works-list li{padding:15px;margin-bottom:10px;background-color:red;color:#fff;}
p.works-list-ttl{color:red;text-align:center;font-size:24px;padding:10px;letter-spacing:0.2em;font-weight:bold;margin-top:30px;}

@media screen and (max-width:800px){
	.works{	padding:0;}
	.works-list{width:100%;margin:0 auto;padding:20px 0;}
}


/*会社紹介
---------------------------------------------------------------------------*/
.company{
	text-align:center;
	padding:0 10px;
	line-height:1.5em;
}
.company img{width:70%; margin:10px 0;}

.masters{
	text-align:center;
	padding:0 10px;
	line-height:1.5em;
	overflow:hidden;
}
.masters img{width:50%;float:left;margin-bottom:10px;}
.company p{text-align:left;}

.company-profile{width: 100%;border-spacing : 10px 8px;border-collapse : separate ;}
.company-profile tr{}
.company-profile th,
.company-profile td {
padding: 20px;
margin:0;
color:#1e0f00;
font-size:18px;
	font-weight:700;
	line-height:1.5em;
	letter-spacing:0.1em;
}
.company-profile th {
font-weight: bold;
	letter-spacing:0.2em;
	border-bottom:2px dotted #1e0f00;
	border-top:2px dotted #1e0f00;
background-color:#eee;
}
.company-profile td {
	border-bottom:2px dotted #1e0f00;
	border-top:2px dotted #1e0f00;
}

.company-profile1{
	width:100%;
}
.company-profile1 dd,.company-profile1 dt{

}
.company-profile1 dt{
	width:30%;
	display: block;
clear: left;
float: left;
	letter-spacing:0.2em;
	padding:20px;
	margin:5px 0;
	color:#1e0f00;
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	letter-spacing:0.1em;
	background-color:#eee;
	border-bottom:2px dotted #1e0f00;
	border-top:2px dotted #1e0f00;
}
.company-profile1 dd{
display: block;
float: left;
	width:calc(70% - 10px);
	padding:20px;
	margin:5px 0 5px 10px;
	color:#1e0f00;
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	letter-spacing:0.1em;
	border-bottom:2px dotted #1e0f00;
	border-top:2px dotted #1e0f00;
}

.company-access{overflow:hidden;width:100%;padding-bottom:30px;}
.company-access1{width:40%;float:left;padding-right:20px;}
.company-access2{width:60%;float:left;}
.company-access1 p{line-height:1.5em;}
.access-name{border-bottom:1px dotted #000;padding:10px 0;font-size:22px;}
.access-txt{padding:10px 0;}
.menseki{background-color:#eee;padding:15px;font-size:90%;}

@media screen and (max-width:900px){
.company img{width:90%; margin:10px 0;}
.company-access1{width:100%;float:none;padding-right:0px;padding-bottom:10px;}
.company-access2{width:100%;float:none;}
.company-profile1 dt{width:100%;float:none;text-align:center;font-size:14px;}
.company-profile1 dd{width:100%;float:none;border-top:none;border-bottom:none;font-size:14px;text-align:center;}
}

@media screen and (max-width:600px) {
.company{padding:0 5px;}
.company img{width:100%; margin:10px 0;}
.access-name{font-size:20px;}	
}

/*プライバシーポリシー
---------------------------------------------------------------------------*/
.pp{width:100%;padding:10px;line-height:1.5em;}
.pp p{line-height:1.5em;}

/*お問い合わせフォーム
---------------------------------------------------------------------------*/
/* Contact Form7 */
 
.contact7 {
	max-width: 100%;
	margin:0 auto;
	box-sizing: border-box;
}
.contact7 dd {
	margin: 0 0 30px 0;
}
.contact7 dt {
	font-weight: normal;
	margin:10px 0;
	font-weight:700;
}
 
/* 必須マーク */
.contact7 .must {
	color: red;
}
.btn_contact7 {
	text-align: center;
}
.btn_contact7 input {
	margin:20px 0;
	width: 50%;
	background-color: red;
	color: #FFF;
	padding:10px;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid red;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
.btn_contact7 input:hover {
	background-color: #FFF;
	color: red; 
}
.screen-reader-response{display:none;}
input[type=text]{
	padding:10px;
	font-size: 95%;
	width:100%;
    border: 1px solid #ccc;
    background: #fff;
}
input[type=email]{
	padding:10px;
	font-size: 95%;
	width:100%;
    border: 1px solid #ccc;
    background: #fff;
}
input[type=tel]{
	padding:10px;
	font-size: 95%;
	width:100%;
    border: 1px solid #ccc;
    background: #fff;
}
textarea{
	width:100%;
	padding:10px;
	font-size: 95%;
    border: 1px solid #ccc;
    background: #fff;
}
@media screen and (min-width: 800px){
	.contact7 {
	max-width: 100%;
	margin:0 auto;
	box-sizing: border-box;
}
}
@media screen and (max-width: 500px) {
	.btn_contact7 input {
	margin:20px 0;
	width: 80%;
	background-color: red;
	color: #FFF;
	padding:10px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid red;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
}
	
/*Single topic
---------------------------------------------------------------------------*/
.info-topic-wrap{
padding-bottom:50px;	
}

#topics-wrap{
	margin-bottom:20px;
}
#topics-wrap div.topics{
	border: 2px solid #1b1464;
	overflow: hidden;
	margin-bottom: 10px;
	width:100%;
	padding:0 20px 10px 20px;
}
p.single-post-category{
	background-color: #1b1464;
	padding:5px;
	text-align: center;
	font-size: 13px;
	color:#fff;
	width:170px;
	margin-top:15px;
}
.single-post-category a{
	color:#fff;
}
.single-post-ttl{
	font-size:16px;
	font-weight: 700;
	line-height: 1.7em;
	border-bottom: 2px solid #1b1464;
	padding-bottom:5px;
}
.single-post-txt{
	line-height: 1.7em;
	font-size:15px;
	padding:15px 0;
}
.topics p{
	line-height: 1.7em;
	font-size:15px;
	padding:15px 0;
}
.topics img{
	padding:15px 0;
}
.single-post-wrap{
	position: relative;
	width:100%;
	height:20px;
}
.single-post-date{
	font-weight: 700;
	font-size:12px;
	letter-spacing: 0.5em;
	color:red;
	position: absolute;
	right:0px;
	top:10px;
}
.snsbutton{
	padding:15px 0;
}

@media screen and (max-width: 480px){
#topics-wrap div.topics{
	overflow: hidden;
	border:none;
	border-top: 2px solid #1b1464;
	border-bottom: 2px solid #1b1464;
	margin-bottom: 10px;
	width:100%;
	padding:0;
}	
p.single-post-category{
margin-bottom:10px;
}
.single-post-txt{
	line-height: 1.7em;
	padding:15px 0;
}
}



/*前の記事へ 次の記事へ
---------------------------------------------------------------------------*/
div.navigation{
	width:100%;
	margin:0 auto;
	text-align:center;
	padding-top:15px;
}
span.previous-entries{
	font-weight:bold;
}
span.next-entries{
	font-weight:bold;	
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.nav-previous{
	font-weight:bold;	
}
.nav-next{
	font-weight:bold;	
}	
	

/*施工事例アーカイブ
---------------------------------------------------------------------------*/
#works-archive {
	margin: 0;
	width:100%;
	margin:10px 0;
}

#works-archive > div.works-archive-wrap{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
#works-archive > div.works-archive-wrap > div{
	width: 33.3%;
	padding: 10px;
	margin-bottom:10px;
	position:relative;
	background-color:#eee;
	border-left:3px solid #fff;
	border-right:3px solid #fff;
}
.works-archive-photo{width:100%;height:200px;}
.works-archive-photo p{width:100%;height:200px;}
.works-archive-photo p:hover{width:100%;height:200px;background-color:blue;opacity:0.3;}
.works-archive-ttl{font-weight:600;padding:8px 0 5px 0;line-height:1.5em;}
.works-archive-date{padding-bottom:10px;color:#aaa;font-size:80%;}

span.newMark{
	position:absolute;
	z-index:20;
	background-color:red;
	color:#fff;
	opacity:0.9;
	padding:7px;
	margin-left:15px;
	margin-top:10px;
	font-size:80%;
}
@media screen and (max-width: 750px) {
	#works-archive > div.works-archive-wrap > div{
		width: 50%;
	}
}
@media screen and (max-width: 500px) {
	#works-archive > div.works-archive-wrap > div{
		width: 100%;
	}
}

/*施工事例シングル
---------------------------------------------------------------------------*/
.works-single-wrap{
	
}
.works-single-ttl{
	font-size:28px;
	border-bottom:1px solid red;
	padding:15px 0;
	color:red;
}
.works-single-main-wrap{
	width:100%;
	overflow:hidden;
	margin-top:20px;
	margin-bottom:20px;
	background-color:#eee;
}
.works-single-main-wrap1{
	width:60%;
	padding:10px;
	float:left;
}
.works-single-main-wrap2{
	width:40%;
	padding:10px 10px 10px 0;
	float:left;
}
.works-single-date{
	color:#aaa;
	text-align:left;
	padding:10px 0;
}
.works-single-comment{
	width:100%;
	line-height:1.5em;
}
.works-single-comment p.ttl{
	width:100%;
	padding:5px;
	margin-bottom:10px;
	text-align:center;
	background-color:red;
	color:#fff;
}
.works-single-comment p.txt{
	width:100%;
	margin:10px;
}
.works-single-photos{
	font-size:35px;
	border-bottom:1px solid red;
	padding:15px 0;
	color:red;
	margin-bottom:20px;
}
.works-single-subphoto-list{
	margin-top:30px;
}
.works-single-subphoto-wrap{
	width:100%;
	overflow:hidden;
}
.works-single-subphoto-wrap1{
	width:50%;
	padding-right:8px;
	float:left;
	margin-bottom:20px;
}
.works-single-subphoto-wrap2{
	width:50%;
	padding-left:8px;
	float:left;	
	margin-bottom:20px;
}
.works-single-subphoto{
	width:100%;
}
.works-single-caption{
	line-height:1.5em;
	padding:10px 0;
}

@media screen and (max-width: 700px) {
.works-single-main-wrap1{
	width:100%;
	float:none;
	margin-bottom:10px;
}
.works-single-main-wrap2{
	width:100%;
	float:none;
	padding-left:0;
}
}

@media screen and (max-width: 600px) {
.works-single-subphoto-wrap1{
	width:100%;
	float:none;
	padding-right:0px;
	margin-bottom:10px;
}
.works-single-subphoto-wrap2{
	width:100%;
	float:none;
	padding-left:0px;
	margin-bottom:20px;
}
}


/*リクルートアーカイブ
---------------------------------------------------------------------------*/

.recruit-bg{
	width:100%;
	margin:0 auto;
	padding:200px 0;
	background-image: url(images/bg-recruit.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: top center;
	position:relative;
}
.recruit-bg div{
	width:60%;
	margin-right:auto;
	text-align:left;
	padding:0 40px;
	font-size:1.5vw;
	color:#fff;
	line-height: 1.8em;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
	position:relative;
	top:-140px;
}
.recruit-bg div h2{
	text-align:left;
	max-width:100%;
	border-bottom:none;
	font-size:2.5vw;
	color:#fff;
	font-weight: 500;
	line-height: 1.8em;
	padding:0;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
}
.recruit-bg div p{
	padding:0 20px;
}

/*ボックス全体*/
.accbox {
    margin:0;
    padding: 0;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
	padding:20px 25px;
    color: #fff;
    font-weight: 500;
    background: red;
    cursor :pointer;
    transition: all 0.5s;
	font-family: "Sawarabi Mincho", "游明朝", "YuMincho";
}

/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 15px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :red;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px 5px;
    background: #fff;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}
.recruit-archive{margin-bottom:0;}

.recruit-archive-ttl{
	width:400px;
	margin:0 auto;
	text-align:center;
	position:relative;
	top:-30px;
	padding:25px;
	font-size:2vw;
	color:#fff;
	background-color:#1b1464;
}

.recruit-tel{text-align:center;width:100%;padding:20px;}
.recruit-tel img{text-align:center;}
.recruit-bg div br{display:none;}

#recruit-archive{
	width:1024px;
	margin:0 auto;
	padding:0 30px 0;
}
#recruit-archive .recruit-topic-wrap{margin:10px 0 0;border:1px solid red;padding:0 10px;}
.recruit-archive dl{padding:10px 0;}
.recruit-archive dl dt{}
.recruit-archive dl dd{}

/*リクルートsingle*/
.recruit-topic-wrap{width:100%;margin-bottom:30px;}
.recruit-topic-wrap dl{display:table;width:100%;margin-bottom:30px;}
.recruit-topic-wrap dl dt{width:100%;padding:15px;background-color:#eee;}
.recruit-topic-wrap dl dd{width:100%;padding:15px;line-height:1.5em;}
.recruit-date{width:100%;margin-bottom:30px;text-align:right;}
.recruit-date p{color:red;}

@media screen and (max-width: 1200px) {
.contents.recruit{width:90%;}
.recruit-bg div{width:70%;font-size:1.5vw;}
.recruit-bg div h2{font-size:3vw;}
}

@media screen and (max-width: 1024px) {
#recruit-archive{width:100%;margin:0 auto;padding:0 30px 0;}	
.contents.recruit{width:95%;}	
.recruit-bg div{
	width:80%;
	font-size:22px;
	top:-160px;
}
.recruit-bg div h2{
	font-size:38px;
}
.recruit-archive-ttl{
	top:-30px;
	padding:25px;
	font-size:30px;
	color:#fff;
	background-color:#1b1464;
}	
}

@media screen and (max-width: 900px) {
.recruit-bg div{font-size:22px;}
.recruit-bg div h2{font-size:34px;}
}
@media screen and (max-width: 800px) {
.recruit-bg div{width:100%;font-size:22px;}
.recruit-bg div h2{	font-size:32px;}
}
@media screen and (max-width: 650px) {
.recruit-bg div{font-size:20px;padding:0 20px;top:-180px;}
.recruit-bg div h2{	font-size:28px;}
}
@media screen and (max-width: 520px) {
.recruit-bg{padding:80px 0;}
.recruit-bg div{font-size:18px;top:-50px;}
.recruit-bg div h2{font-size:26px;}
.recruit-bg div br{display:block;}
.recruit-bg div p{padding:0;}
.recruit-archive-ttl{
	width:100%;
	top:0;
	padding:25px;
	font-size:30px;
}
#recruit-archive{padding:0;}
#recruit-archive .recruit-topic-wrap{margin:0;border:none;padding:0}
.recruit-tel{padding:0;}
}
@media screen and (max-width: 400px) {
.contents.recruit{width:100%;padding: 0;}
.recruit-tel{padding:0 10px;}
.accbox{padding:10px;}
	.accbox label {padding:20px;}
}



/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	top: 6px;	/*上から6pxの場所に配置*/
}