@charset "utf-8";
/*
* Noto Sans Japanese (japanese) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format('opentype');
 }
/* Reset
--------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {outline:none;}
img {vertical-align:bottom; image-rendering: -webkit-optimize-contrast;}

/* --------------------------------------------- */


body {
	font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	line-height:1.6em;
	color:#000;
	-webkit-text-size-adjust: none;
}
strong {font-weight:bold;}
a:link, a:visited { color:#000; text-decoration:underline}
a:hover, a:active { color:#008BD5; text-decoration:underline}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom:1em;
}
table tr td,
table tr th {
	
	padding: 3px 6px;
}

.navi {
	width:100%;
}
header {
    background: #008BD5;
}
#header {
	width:1024px;
	margin:0 auto;
	padding:15px 0;
}
#header .logo {
	width:316px;
	float:left;
}
#header .link {
	float:right;
}
#header .link a {
	display: inline-block;
	background: #fff;
	color: #F7931E;
	font-weight: bold;
	padding: 6px 16px;
	font-size: 14px;
	margin: 15px 0 5px 15px;
	transition: .2s ease-out;
    position: relative;
    z-index: 2;
    border-radius: 20px;
  overflow: hidden;
  border: 2px solid #008BD5;
	text-decoration: none;
}
#header .link a:hover {
	text-decoration: none;
}
#header .link a::before,
#header .link a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
#header .link a,
#header .link a::before,
#header .link a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#header .link a:hover {
    color: #fff;
    background: #F7931E;
}
#header .link a.adjoin:hover {
  color: #111;
}
#header .link a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#header .link a:hover::after {
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  background: #F7931E;
}
nav#nav {
	margin:0 auto;
	position: relative;
	background: #008BD5;
	border-top: 1px solid #fff;
}
#navi {
	clear:both;
	width:1024px;
	margin:0 auto;
}
#navi ul li {
	display:block;
	float:left;
	position: relative;
	width: 13.4%;
	text-align: center;
}
#navi ul li.home {
	width: 6.2%;
}
#navi ul li:last-child {
	border:none;
}
#navi ul li a {
	display:block;
	font-size: 15px;
	color:#FFF;
	background: #008BD5;
	padding: 18px 0 15px;
	font-weight: bold;
	position: relative;
	transition: .2s ease-out;
}
#navi ul.dl-menu > li > a {
  position: relative;
  text-decoration: none;
}
#navi ul.dl-menu > li > a:hover {
    color: #008BD5;
    background: #fff;
}
#navi ul li a.active{
	background: #fff;
	color: #008BD5;
	text-decoration: none;
}
#navi ul li a.active:hover {
	color: #fff;
}
#navi li ul {
	display:none;
	position: absolute;
	top: 57px;
	left: -25%;
	padding:0;
	width: 150%;
	z-index:100;
	box-shadow:0 4px 6px rgba(0,0,0,0.2);
	transition: .2s ease-out;
}
#navi li ul.show {
	display:block;
    animation-name: fadedown;
    animation-duration: .25s;
}
@keyframes fadedown {
0% {
    opacity: 0;
    transform: translateY(-20px);
}
65% {
    opacity: 0;
    transform: translateY(-10px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
#navi li ul li {
	float:none;
	margin: 0;
	border: none;
	width: 100%;
	display: block;
}
#navi li ul li a {
	display: block;
	text-indent:0;
     color: #008BD5;
	background: #fff;
	padding:6px 0;
	height:auto;
	font-size:12px;
}
#navi li ul li a:hover {
  color: #008BD5;
  text-decoration:none;
}
#navi li ul li a {
  position: relative;
  display: block;
  text-decoration: none;
}
#navi li ul li a::after {
  position: absolute;
  bottom: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #008BD5;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
#navi li ul li a:hover::after {
  transform: scale(1, 1);
}
.fixed {
    position: fixed !important;
	 width:100%;
    top: -5px;
    z-index: 900 !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.wrapper {
	width:1024px;
	margin:0 auto;
	position:relative;
}
#main {
	margin:0 auto 20px;
	clear:both;
	background:#fff;
	background:rgba(255,255,255,0.65);
	border:1px solid #fff;
	border-radius:5px;
}
#main h2 {
	font-size:20px;
	margin-bottom:1em;
	line-height:1.5;
	font-weight: bold;
    padding: 8px 0;
}
#main h3 {
	font-size: 18px;
	font-weight: bold;
}
#main p {
	margin-bottom:1em;
}
#main img {
	max-width: 100%;
}

/*-------------------------FOOTER-----------------------*/

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}
footer {
	background:#fff;
}

#social {
	display:none;
	margin-bottom: 20px;
}
#social ul {
	list-style:none;
	margin:0;
}
#social ul li {
	display:inline-block;
	margin-right:5px;
	margin-bottom:5px;
	vertical-align:bottom;
	overflow:hidden;
	line-height:1;
}
#social ul li:last-child {
	margin-right:0;
}
.fb_iframe_widget > span,
.fb_iframe_widget > span > iframe {
  vertical-align: bottom !important;
  height:22px !important;
}
#profile {
	width: 100%;
	padding: 25px 0;
	background: #f3f3f3;
	text-align: center;
	font-size: 13px;
	border-top: 1px solid #ddd;
}
#profile table td {
	text-align: center;
}
#profile  i {
	color: #008BD5;
}
#info {
	border-top: 1px solid #ddd;
	text-align: center;
	padding:25px 0;
}
#info h3 {
    display: inline-block;
}
#info h3 img {
    vertical-align: bottom;
    margin: 10px 20px 10px 0;
}
#info p {
    display: inline-block;
    text-align: left;
}
#footerWrapper {
	border-top: 1px solid #ddd;
	padding:30px 0 60px;
}
.link{
    float: right;
}
.copyright {
	font-size:13px;
    float: left;
}
.sns {display:none;}
.aligncenter {text-align:center}
#pagetop {
	clear:both;
	width:30px;
	position:fixed;
	margin:0 0 0;
	right:20px;
	bottom:20px;
}
#pagetop a {
	display: block;
	background: rgba(0,0,0,0.2);
	color: #fff;
	text-align: center;
	padding: 3px 0;
}


div.btn {
	text-align: center;
	margin-bottom: 20px;
}
div.btn a {
	background: #008BD5;
	display: inline-block;
	color: #fff;
	padding: 10px 25px;
	font-size: 18px;
	text-decoration:none;
	margin:10px 5px 10px;
}
div.btn a:hover {
	text-decoration: none;
	opacity: 0.7;
}
.detail {
    text-align: right;
}
.detail a {
    display: inline-block;
    background: #008BD5;
    color: #fff;
    border-radius: 6px;
    padding: 5px 2em;
    position: relative;
}
.detail a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content:"\f054";
    font-size: 10px;
    position: absolute;
    left: 10px;
}
.detail a:hover {
    text-decoration: none;
    background: #006499;
}
.m10 {margin-bottom:10px !important;}
.m20 {margin-bottom:20px !important;}
.m30 {margin-bottom:30px !important;}
.m40 {margin-bottom:40px !important;}
.m60 {margin-bottom:60px !important;}
.m80 {margin-bottom:60px !important;}
/* Clearing Floats
--------------------------------------------- */
.clear {
	clear:both;

}
#main:after,
.block:after,
.clearfix:after {
	clear:both;
	content:' ';
	display:block;
	font-size:0;
	line-height:0;
	visibility:hidden;
	width:0;
	height:0
}
#kens-web-copyrights {display:none}
.simplebox {
	cursor: pointer;
}


#bottom-pc {
	width:40px;
	position:fixed;
	right: 0;
	top: 180px;
	z-index: 300;
    background: #fff;
}
#bottom-pc li {
	margin-bottom: -1px;
	box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
#bottom-pc li img {max-width: 100%;}
#bottom-pc ul li a {
	display: block;
	width:100%;
	box-sizing:border-box;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	padding: 15px 12px;
	writing-mode: tb-rl;
	text-align: center;
	line-height: 1;
	border: 1px solid #fff;
	text-decoration: none;
}
#bottom-pc ul li.line a {
	width:100%;
	padding:0;
}
#bottom-pc ul li.line a img {
	width:100%;
}
#bottom-pc ul li a:hover {
	text-decoration: none;
	opacity: 0.8;
}
#bottom-pc ul li.oc a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content:"\f073";
	font-weight: 400;
	margin-bottom: 5px;
}
#bottom-pc ul li.req  a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content:"\f15c";
	font-weight: 400;
	margin-bottom: 5px;
}
#bottom-pc ul li.acc  a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content:"\f5a0";
	margin-bottom: 5px;
}
#bottom-pc ul li.oc a {
	background: #008CD6;
}
#bottom-pc ul li.req a {
	background: #ED6C00;
}
#bottom-pc ul li.acc a {
	background: #00903B;
}
#bottom-sp {
	display: none;
}

.pc_block {
    display: inline-block;
}
.sp_block {
    display: none;
}
@media screen and (max-width : 640px) {
	.pc_block {
	    display: none;
	}
    .sp_block {
        display: inline-block;
    }
}
@media only screen and (max-width: 767px) {
	#bottom-pc {display: none;}
	#bottom-sp {
		display: block;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	#bottom-sp ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#bottom-sp ul li {
		display: block;
	}
	#bottom-sp ul li a {
		display: block;
		text-align: center;
		padding: 8px 0;
		font-size: 14px;
		color: #fff;
		text-decoration: none;
	}
	#bottom-sp ul li.oc,
	#bottom-sp ul li.req,
	#bottom-sp ul li.acc {
		width:30%;
	}
	#bottom-sp ul li.oc,
	#bottom-sp ul li.oc a {
		background: #008CD6;
	}
	#bottom-sp ul li.req,
	#bottom-sp ul li.req a {
		background: #ED6C00;
	}
	#bottom-sp ul li.acc,
	#bottom-sp ul li.acc a {
		background: #00903B;
	}
	#bottom-sp ul li.line {
		background:#00C300;
	}
	#bottom-sp ul li.line a {
		padding:0;
	}
	#bottom-sp ul li a i {
		font-size: 18px;
	}
	#bottom-sp ul li img {
		width:100%;
		max-width: 42px;
		vertical-align: bottom;
	}
}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 640px) {
	body {
        font-size: 14px;
	}

    .wrapper {
        padding: 0 10px;
        width: auto;
    }
	#header {
		width:auto;
		margin:0 auto;
		padding:15px 10px;
	}
	#header .logo {
		width:70%;
		float:left;
		margin:0 auto;
	}
	#header .link {
		display: none;
	}
	#header .logo img,
	#header .tel img{max-width:100%;}
	#header .project {
		width:45%;
		float:right;
		margin-left:0;
	}
	#header .project img {width:100%;}
	#header .headerNavi {
		display:none;
	}
	
	nav#nav {
		width: 100%;
		margin:0 auto;
		padding: 0;
		position: relative;
		border-top:none;
	}
	#navi {
		clear:both;
		width:auto;
		margin:0 auto;
		padding: 0;
		position: relative;
	}
	#navi ul li.home {
		width: auto;
	}
	#navi ul li {
		display:block;
		float:none;
		position: relative;
		width: auto;
	}
	#navi ul li:last-child {
		border:none;
	}
	#navi ul li a {
		display:block;
		text-indent:0;
		overflow:hidden;
		height:auto;
		color:#fff;
		background: #008BD5;
		font-size:16px;
		padding:12px 16px;
		text-align:left;
		border-bottom:none;
		font-weight:normal;
		
	}

	#navi ul.dl-menu > li > a:hover,
	#navi ul li a.active{
		background: #008BD5;
		color: #FFF;
		text-decoration: none;
	}
	#navi ul.dl-menu>li.nv1>a:after,
	#navi ul.dl-menu>li.nv5>a:after {
		line-height: 18px;
		color: #fff;
    	position: absolute;
		left:95%;
		top:20%;
		margin-left: 0;
	}
	#navi ul.dl-menu>li>a {
		
		border-top:1px solid #fff;
	}
	#navi ul li a:hover {
		text-decoration:none;
	}
	#navi ul li.nv0,
	#navi ul li.nv1,
	#navi ul li.nv2,
	#navi ul li.nv3,
	#navi ul li.nv4,
	#navi ul li.nv5,
	#navi ul li.nv6 {
		width:auto;
	}
	.submenu {
	  display: none;
	}
	#navi ul.dl-menu > li > a.js-menu:after {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f067";
		color: #fff;
		 display: block;
    	position: absolute;
		left:95%;
		top:20%;
		text-align:right;
		font-size:11px;
	}
	#navi ul.dl-menu > li > a.js-menu.on:after {
		content: "\f068";
	}
	#navi li ul {
		position: static;
		top: 80px;
		left: 0px;
		padding:0;
		width: auto;
		background: #008BD5;
		z-index: auto;
		border-radius:0;
		box-shadow:none;
		padding-bottom:10px;
	}
	#navi li ul li {
		float:none;
		margin: 0;
		width: auto;
		border: none;
		padding:0;
	}
	#navi li ul li a {
		display: block;
		overflow: auto;
		text-indent:0;
		position: relative;
		padding: 6px 0 6px 30px;
		height:auto;
		font-size:14px;
        color: #fff;
		background: #008BD5;
		font-weight:normal;
	}
/*-----footer----*/
    #info {
        padding:15px 0;
    }
    #info h3 img {
        width: 240px;
        margin: 10px 0;
    }
	#footerWrapper {
		width:auto;
		margin:0 auto;
		padding:15px 0 60px;
	}
    #profile {
        font-size: 12px;
    }
	#profile table td {
		display: inline-block;
		padding: 5px 0;
		width: 50%;
	}
	#profile table td img {
		max-width: 100%;
	}
	.copyright {
		width:auto;
		float:none;
		font-size:11px;
		text-align: center;
	}
	.sns {
		display: block;
		margin-bottom: 5px;
	}
	.sns li {
		display: inline-block;
	}
	.sns li img {
		width: 48px;
	}

	#social {
		display:block;
		padding: 0 10px;
	}
	#social ul {
		text-align:center;
	}
	#pagetop {
		display: none;
		clear:both;
		width:8%;
		position:fixed;
		margin:0 0 0;
		right:0;
		bottom:0;
	}
	#pagetop a {
		display: block;
		background: rgba(0,0,0,0.6);
		color: #fff;
		text-align: center;
		padding: 12px 0;
		font-size: 12px;
		line-height: 1;
	}

}