@charset "UTF-8";

/* 基本設定 ////////////////////////////////////////////// */
.clearfix::after { content: ""; display: block; clear: both; }

/* フォント設定 ////////////////////////////////////////////// */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
.w100{ font-weight:400; } .w200{ font-weight:400; } .w300{ font-weight:400; } .w400{ font-weight:400; }
.w500{ font-weight:500; } .w600{ font-weight:600; } .w700{ font-weight:700; } .w800{ font-weight:800; }
/*見出し*/
 .copy_blue{ color:#32A0F0; font-size:30px; line-height:1.4em; font-weight:400; }
 .copy_white{ color:#FFF; font-size:30px; line-height:1.4em; font-weight:400; }
/*本文*/
.sentence_black{ color:#000; font-size:16px; line-height:2em; font-weight:400; }
.sentence_white{ color:#FFF; font-size:15px; line-height:2em; font-weight:400; }

/*メインカラー ==================================================
黒に近い紺色 100% --- #00507D;
青色 100% --- #32A0F0;
青色 10%下地用 --- #EAF5FD;
青色 50%罫線用 --- #98CFF7;
フッターの薄い青下地 --- #D2F0FF;
*/



/* body ////////////////////////////////////////////// */
body { font-family: 'Noto Sans JP', sans-serif; font-size:16px; line-height:1.8em; }

/* その他 ////////////////////////////////////////////// */
#loading{ width:100%; height:100vh; z-index:999; background:#000; text-align:center; vertical-align:middle; }
#loading img { position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
body > section { display:none; }
.goTop{ position:fixed; width:47px; height:47px; background:url(../img/common/goTop.png); bottom: 8em; right: 3em; z-index:2; }

/* header ////////////////////////////////////////////// */
#header{ width:100%; height:50px; background:#FFF; }
#header #logomark{ width:36px; height:36px; background:url(../img/common/logomark.jpg); background-size:36px 36px; position:absolute; top:8px; left:16px; }
#header #logotype{ width:100px; height:34px; background:url(../img/common/logotype.jpg); background-size:100px 34px; position:absolute; top:8px; left:60px; }
#header #border{ width:10px; height:34px; border-left:1px solid #32A0F0; opacity:0.5; position:absolute; top:8px; left:176px; }
#header p{ font-size:18px; line-height:50px; color:#32A0F0; font-weight:400; font-feature-settings:"palt"; letter-spacing:3px; margin-left:198px; }
#header #mail{ width:106px; height:50px; background:url(../img/common/mail.jpg); background-size:106px 50px; position:absolute; top:0; right:0; }

/* keyV ////////////////////////////////////////////// */
#keyV{ overflow:hidden; position:relative; }
#keyV h1{ margin-bottom:5px; }
#keyV .detail{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); min-height:600px; }
#keyV .scroll{ /*display: none;*/ position:absolute; bottom:10px; right:10px; margin-left:-40px; }
#keyV #time{ font-size:8px; color:#FFF; letter-spacing:10px; transform:rotate(-90deg); position:absolute; left:-110px; top:210px; }

/* info ////////////////////////////////////////////// */
#info{
	background:#EAF5FD;
}
.con_info{
	padding: 80px 0 100px;
}
#info h2{
	margin-bottom: 1.8em;
	color: #32a0f0;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.4em;
	letter-spacing: .1em;
	text-align: center;
}
.list_info{
	margin-bottom: 2.4em;
}
.list_info li{
	margin-bottom: .8em;
	padding-bottom: .8em;
	border-bottom: 1px dotted #ccc;
}
.list_info a{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	color:#32a0f0;
	text-decoration: none;
}
.list_info .info_date{
	width: 6em;
}
.list_info .info_ttl{
	width: calc(100% - 18em);
}
.list_info .info_tag{
	width: 10em;
  background: #fff;
	border: 1px solid #32a0f0;
	text-align: center;
	transform: scale(0.8);
}
.list_info a:hover .info_ttl{
	text-decoration: underline;
}
#info .btn{
	display: block;
	width: 15em;
	position: relative;
	margin: 0 auto;
	padding: .5em;
  background: #fff;
	border: 1px solid #32a0f0;
	border-radius: 2em;
	color:#32a0f0;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
}
#info .btn::after{
	content: "";
	display: block;
	width: .6em;
	height: .6em;
	position: absolute;
	top: .9em;
	right: 1.5em;
	border-top: 1px solid #32a0f0;
	border-right: 1px solid #32a0f0;
	transform: rotate(45deg);
}

/* navi ////////////////////////////////////////////// */
.navi{
	position:fixed;
	width:131px;
	top:50px;
	left:0px;
	z-index:1;
}
.navi a{
	display: block;
	padding: .7em 1em;
	color: #333;
	line-height: 1;
	text-decoration: none;
}
.navi a.img{
	margin: .7em 0;
	padding: 0em;
}
.navi a.img img{
	max-width: 100%;
	vertical-align: top;
}
.navi_info{}
.navi_about{}
.navi_products{}
.navi_service{}
.navi_company{}
.navi_contact{}

/* メインコンテンツ ////////////////////////////////////////////// */
#main-container{ width:100%; height:auto; background:#FF0; }
.bg_blue{ width:100%; background:#32A0F0; }
.bg_white{ width:100%; background:#FFFFFF; }
.wrapper{ width:1000px; height:auto; margin:0 auto; }

/* about ================== */
.con_about{ width:1000px; /*height:520px;*/ /*background:#FFF*/; margin:0 auto; position:relative; }
/*キャプション*/
.con_about .cap_about{ width:160px; height:42px; position:absolute; top:0; right:0; }
/*見出し*/
.con_about .copy_about{ margin-top:100px; }
/*本文*/
.con_about .sentence_about{ margin-top:60px; margin-bottom: 100px;}


/* products ================== */
.con_products{ width:100%; height:auto; background:#32A0F0; padding-bottom:100px; margin:0 auto; position:relative; }
/*キャプション*/
.con_products .cap_products{ width:160px; height:42px; position:absolute; top:0; right:0; }
/*見出し*/
.con_products .copy_products{ margin-top:100px; }
/*アイテム*/
.con_products .item_products{ width:1000px; height:auto; /*background:#ee0;*/ margin-top:50px; text-align:left; line-height:1.8em; text-align:justify; }
.con_products .item_products a{ color:#FFF; }
.con_products .item_products img{ max-width: 100%; }
.con_products .item_products a:hover { animation: flash ease-out 0.5s; }
@-webkit-keyframes flash {
	0% { opacity:0;}
	100% { opacity:1;}
}
@keyframes flash {
	0% { opacity:0;}
	100% { opacity:1;}
}


/* service ================== */
.con_service{ width:100%; height:auto; background:#FFF; padding-bottom:80px; margin:0 auto; position:relative; }
/*キャプション*/
.con_service .cap_service{ width:160px; height:42px; position:absolute; top:0; right:0; }
/*見出し*/
.con_service .copy_service{ margin-top:100px; }
/*アイテム*/
.con_service .wrapper{ /*background:#ee0;*/ margin-top:50px; }
.con_service .item_L{ width:470px; height:auto; text-align:left; line-height:1.8em; text-align:justify; float:left; }
.con_service .item_R{ width:470px; height:auto; text-align:left; line-height:1.8em; text-align:justify; float:right; }
.con_service .midashi{ color:#32A0F0; font-size:21px; line-height:1.4em; display:inline-block; padding:8px 0 0 0; }
.con_service a:hover img{ animation: flash ease-out 0.5s; }


/* company ================== */
.con_company{ width:100%; height:auto; background:#32A0F0; padding-bottom:120px; margin:0 auto; position:relative; }
/*キャプション*/
.con_company .cap_company{ width:160px; height:42px; position:absolute; top:0; right:0; }
/*見出し*/
.con_company .copy_company{ margin-top:100px; }
/*会社の写真*/
.con_company .wrapper{ /*background:#ee0;*/ margin-top:50px; }
.con_company .item_L{ width:490px; height:219px; float:left; }
.con_company .item_R{ width:490px; height:219px; float:right; }
/*会社概要*/
.con_company .gaiyou{ color:#FFF; font-weight:400;line-height:2em; }
.con_company .gaiyou .g_wrapper:first-child{ margin-top:20px; }
.con_company .gaiyou .g_wrapper{ border-bottom:solid 1px #99D0F9; padding:20px 0; }
.con_company .gaiyou .g_wrapper a{ color:#FFF; }
.con_company .L_koumoku{ float:left; width:200px; }
.con_company .R_naiyou{ float:left; }
.con_company .aisatsu{ color:#FFF; font-weight:400;line-height:2em; margin-top:20px; }
.con_company .a_photo{ width:306; height:392px; float:left; }
.con_company .a_coment{ width:680px; height:392px; float:right; padding-top:36px; }
.con_company .a_catch{ font-size:28px; }
.con_company .gaiyou dl{display: flex; flex-wrap: wrap;}
.con_company .gaiyou dl dt{width: 6em;}
.con_company .gaiyou dl dd{width: calc(100% - 6em);}
.con_company .isms{ padding-top:20px; text-align: center; }
.con_company .isms img{ width:280px; }

/*会社の写真*/
.con_company .pictures{ padding-top:50px;}
.con_company .pictures li{ float:left; width:235px; margin:0 20px 20px 0;}
.con_company .pictures li:nth-child(4n){ margin-right:0;}
.con_company .pictures img{ width:100%; vertical-align:top;}
/*代表・取締役の写真*/
.con_company .board_member{
	padding-top:50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.con_company .board_member .member{width:230px;margin: 0 2em;}
.con_company .board_member .prof_img{ position:relative; left:50%; width:230px; height:230px; margin:0 0 10px -115px; border-radius:50%; overflow:hidden; }
.con_company .board_member img{ width:100%;}
.con_company .board_member .prof_txt{ color:#fff; text-align:center;}
.con_company .board_member .prof_txt .title{ display:block; line-height:1.5; }
.con_company .board_member .prof_txt .name{ display:block; font-size:128%; }

/* contact ================== */
.con_contact{ width:100%; height:auto; background:#FFF; padding-bottom:80px; margin:0 auto; position:relative; }
/*キャプション*/
.con_contact .cap_contact{ width:160px; height:42px; position:absolute; top:0; right:0; }
/*見出し*/
.con_contact .copy_contact{ margin-top:100px; }

/*#form =====================*/
.con_contact #form{ width:555px; height:auto; background:#FFF; margin:50px auto; position:relative; }
.con_contact #form input, textarea{ font-size:20px; box-sizing:border-box; border: 1px solid #999; }
.con_contact #form .wrapper{ margin-bottom:10px; }
.con_contact #form p{ font-size:14px; color:#FFF; padding:0 20px; font-weight:400; }
/*左の項目*/
.con_contact #form dt{ width:134px; height:50px; line-height:50px; background:#32A0F0; float:left; margin-right:6px; }
.con_contact #form dt.area{ height:200px; }
/*右の入力枠*/
.con_contact #form .form{ width:415px; height:50px; font-size:14px; line-height:50px; background:#FFF; float:left; padding:0 20px; border-radius:0px; }
.con_contact #form .content{ width:415px; height:200px; line-height:1.6em; background:#FFF; float:left; padding:20px; }
/*最初から入ってる文字*/
.con_contact #form .form::-webkit-input-placeholder{ color:#aaa; font-size:14px; }
.con_contact #form .form::-moz-input-placeholder{ color:#aaa; font-size:14px; }
.con_contact #form .form::-ms-input-placeholder{ color:#aaa; font-size:14px; }
/* ボタン */
.con_contact #form .buttonWrapper{ width:100%; text-align:center; margin-top:40px; }
.con_contact #form button{ width:330px; height:80px; line-height:80px; color:#FFF; background:#00507D; font-size:28px; font-weight:400; border-radius:40px; }
.con_contact #form .p_disable{ opacity:0.2; cursor:default; }
.con_contact #form .pointer{ cursor:pointer; }
/* プルダウンのブラウザごとの標準を全部消す */
.con_contact #form select{ outline:none; text-indent: 0.01px; text-overflow:''; background:none transparent; vertical-align:middle; font-size:14px; -webkit-appearance:button; -moz-appearance:button; appearance:button; }
.con_contact #form select::-ms-expand { display:none; }
.con_contact #form select:-moz-focusring { color:transparent; text-shadow:0 0 0 #828c9a; }
.con_contact #form select option{ background-color:#fff; color:#333; }
/* カウント */
.con_contact #form .count{  width:96px; height:96px; border-radius:50%; line-height:96px; font-size:16px; background:#32A0F0; color:#FFF; position:absolute; top:-30px; right:-140px; }
.con_contact #form .count .nokori{  font-size:14px; font-weight:400; position:absolute; top:-30px; left:34px; }
.con_contact #form .count .koumoku{ font-size:14px; font-weight:400; position:absolute; top:30px; left:34px; }
.con_contact #form .count strong{ font-size:38px; font-weight:500; position:absolute; top:0px; left:36px; }
.con_contact #form .count.p_complete{ background-color:#14a08c; }
.con_contact #form .count.p_complete span{ display: none; }
.con_contact #form .count.p_complete strong{ position:absolute; top:0px; left:16px; }
/* 入力後のチェックマーク */
.m_icon_check{ opacity:0; display:inline-block; background:url(../img/contact/icon_check.png) 0 0 no-repeat; width:16px; height:13px; margin:18px 0 0 8px; }
.m_icon_check.p_complete{ opacity:1; -webkit-animation:key3 0.3s forwards; animation:key3 0.3s forwards; } /*アニメーション部分は作動せず。。*/
/* エラーテキスト */
.con_contact #form .error_text p{ text-align:center; color:#F00; font-size:16px; font-weight:400; }




/*.footer
//////////////////////////////////////////////////////////////*/
.footer{ width:100%; height:auto; /*background:#eee;*/ font-weight:400; }
.footer .usuaoArea{ width:100%; height:152px; background:#D2F0FF; text-align:left; }
.footer .usuaoAreaWrapper{ width:860px; height:100%; /*background:#F0D2FF;*/ margin:0 auto; }
/* 左：ロゴ+キャッチ */
.footer .usuaoArea .logoCon{ width:280px; color:#32A0F0; /*background:#F0FFD2;*/ float:left; margin-top:38px; margin-right:20px; }
.footer .usuaoArea .logoCon p{ font-size:14px; line-height:0; padding-left:2px; }
/* 中央：SNS */
.footer .sns_wrapper{ width:233px; height:112px; /*background:#C08182;*/ float:left; margin-top:20px; border:1px solid #98CFF7; border-top-style:none; border-bottom-style:none; }
.footer .sns_wrapper img{ padding-top:40px; }
.footer .sns1{ width:34px; height:35px; float:left; padding-left:39px; }
.footer .sns2{ width:34px; height:35px; float:left; padding-left:25px; }
.footer .sns3{ width:34px; height:35px; float:left; padding-left:25px; }
/* 右：etc */
.footer .etc_wrapper{ font-size:12px; color:#32A0F0; line-height:152px; margin-left:30px; }
.footer .etc_wrapper a{ color:#32A0F0; }
.footer .privacy{ /*background:#ee0;*/ float:left; margin-left:30px; }
.footer .kiyaku{  /*background:#e00;*/ float:left;  margin-left:30px; }
/* コピーライト */
.footer .copyrightCon{ width:100%; height:46px; background:#32A0F0; font-size:12px; color:#FFF; line-height:46px; text-align:center; letter-spacing:10px; }