@charset "UTF-8";

/*

フィールドプラスの紹介サイトに訪問いただきありがとうございます。
フィールドプラスを運営する株式会社エス・ケイはスマートフォン・モバイルアプリの開発企業ですが
ホームページのデザイン・制作も承ります。
ご用命の際はエス・ケイWebサイトのお問い合わせフォームまたは下記の電話番号よりご連絡ください。

■エス・ケイ企業サイト お問い合わせフォーム
https://secure.dataholdings.jp/esukei/contact/

■電話でのお問い合わせ
株式会社エス・ケイ
西日本事業本部
〒461-0002
愛知県名古屋市東区代官町35番16号 第一富士ビル2F
TEL：052-937-0217

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~####################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~####################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~####################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~####################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~####################~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~##########~~~~~~~~~~~~~~~~##~~~###############~~~~~~##########~~~~~~#####~~~~~~~~#####~~#####~~~~~~~~~#####~~###############~~#####~~
~~~~~~~~~~~~##########~~~~~~~~~~~~~#####~~~###############~~~~##############~~~~#####~~~~~~~~#####~~#####~~~~~~~#####~~~~###############~~#####~~
~~~~~~~~~~~~##########~~~~~~~~~~########~~~#####~~~~~~~~~~~~#####~~~~~~~~#####~~#####~~~~~~~~#####~~#####~~~~~#####~~~~~~#####~~~~~~~~~~~~#####~~
~~~~~~~~~~~~##########~~~~~~~###########~~~#####~~~~~~~~~~~~#####~~~~~~~~#####~~#####~~~~~~~~#####~~#####~~~#####~~~~~~~~#####~~~~~~~~~~~~#####~~
~~~~~~~~~~~~##########~~~~##############~~~###############~~~~######~~~~~~~~~~~~#####~~~~~~~~#####~~#####~#####~~~~~~~~~~###############~~#####~~
~~~~~~~~~~~~##########~#################~~~###############~~~~~~#######~~~~~~~~~#####~~~~~~~~#####~~##########~~~~~~~~~~~###############~~#####~~
~~####################~~~~##############~~~#####~~~~~~~~~~~~~~~~~~~~#######~~~~~#####~~~~~~~~#####~~#####~#####~~~~~~~~~~#####~~~~~~~~~~~~#####~~
~~####################~~~~~~~###########~~~#####~~~~~~~~~~~~#####~~~~~~~~#####~~#####~~~~~~~~#####~~#####~~~#####~~~~~~~~#####~~~~~~~~~~~~#####~~
~~####################~~~~~~~~~~########~~~#####~~~~~~~~~~~~#####~~~~~~~~#####~~#####~~~~~~~~#####~~#####~~~~~#####~~~~~~#####~~~~~~~~~~~~#####~~
~~####################~~~~~~~~~~~~~#####~~~###############~~~~##############~~~~~~##############~~~~#####~~~~~~~#####~~~~###############~~#####~~
~~####################~~~~~~~~~~~~~~~~##~~~###############~~~~~~##########~~~~~~~~~~##########~~~~~~#####~~~~~~~~~#####~~###############~~#####~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* ==========================================================================
   Common
   ========================================================================== */

/* Reset
-------------------------------------------------- */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, address, img,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, main, article, section, aside {
	margin: 0;
	padding: 0;
	}
.showing-section {
	box-sizing: border-box;
}
/* Clearfix
-------------------------------------------------- */

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
	}
.clearfix:after {
	clear: both;
	}
.clearfix {
	zoom: 1;
	}

/* Layout
-------------------------------------------------- */

html {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	}
body {
	background: #fff;
	font: 16px/1.5em 'Noto Sans Japanese', "ヒラギノ角ゴ Pro w3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	line-height: 1.8em;
	-webkit-text-size-adjust: 100%;
	min-width: 1200px;
	/* overflow-x: hidden; */
	}

#container {
	overflow-x: hidden;
	}

.wrap {
	position: relative;
	box-sizing: border-box;
	max-width: 2000px;
	min-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
	}

.side-space {
	position: relative;
	height: 100%;
	margin: 0 60px;
	}

/* header
-------------------------------------------------- */

#header {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	background: rgb(140,195,75); /* IE8以下用 */
	background: rgba(140,195,75,0.8);
	width: 100%;
	/* height: 120px; */height: 170px;
	transition: .3s;
	}
	#header #phone-bar {
		height: 50px;
		background: rgba(0,0,0,.3);
		font-size: 18px;
		font-weight: bold;
		line-height: 50px;
		color: #fff;
		}
		#header #phone-bar p span.small {
			font-size: 12px;
			}
		#header #phone-bar #to-form {
			position: absolute;
			top: 0;
			right: 20px;
			}
			#header #phone-bar #to-form a {
				color: #fff;
				text-decoration: none;
				}
	#header #logo a {
		position: absolute;
		top: 30px;
		background: url(../img/common/logo.png);
		width: 320px;
		height: 0;
		padding-top: 60px;
		overflow: hidden;
		display: block;
		}
	#header input {
		position: absolute;
		top: 35px;
		right: 60px;
		}
		.no-js #header input#nav-btn {
			display: none;
			}
	#header button {
		position: absolute;
		top: 35px;
		right: 20px;
		height: 50px;
		background: none;
		padding: 0;
		border: none;
		font-size: 18px;
		}
		#header button a {
			color: #fff;
			text-decoration: none;
			}
		#header button span {
			margin: -5px 0 0 10px;
			vertical-align: middle;
			}


/* footer
-------------------------------------------------- */

#footer {
	background: rgb(245, 245, 245);
	padding: 100px 0;
	text-align: center;
	}
	#footer p#slogan {
		margin-bottom: 45px;
		color: rgb(120,120,120);
		font-size: 18px;
		line-height: 2.2em;
		letter-spacing: 3px;
	}
	#footer p#name {
		margin: 20px 0 10px 0;
		font-size: 22px;
		font-weight: bold;
		}
	#footer a {
		font-size: 18px;
		}

	#footer #sns {
		display: none;
		width: 400px;
		margin: 40px auto;
		}
		/* IE7以下またはJavaScript無効時は「display:none;」解除 */
		html.lteie7 #footer #sns,
		html.no-js #footer #sns {
			display: none;
			}
		#footer #sns #twitter-btn {
			float: left;
			margin: 7px 0 0 65px;
			}
		#footer #sns #facebook-btn {
			float: left;
			margin: 0 20px;
			}
		#footer #sns #google-btn {
			float: left;
			margin-top: 7px;
			}
	#footer #copyright {
		margin-top: 50px;
		}

/* お問い合わせボタン */
#contact-btn a {
	z-index: 10;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 50px;
	background: rgb(30, 160, 190); /* IE8以下用 */
	background: rgba(30, 160, 190, 0.8);
	width: 360px;
	margin: auto;
	padding: 20px 0;
	line-height: 1.3em;
	border-radius: 100px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	}
	#contact-btn a:hover {
		background: rgb(50, 85, 135); /* IE8以下用 */
		background: rgba(50, 85, 135, 0.8);
		}
	#contact-btn a span {
		font-size: 12px;
		font-weight: normal;
		}

/* ページトップへボタン */
#pagetop-btn a {
	z-index: 10;
	position: fixed;
	right: 50px;
	bottom: 50px;
	background: rgb(140,195,75); /* IE8以下用 */
	background: rgba(140,195,75,.8);
	width: 60px;
	height: 60px;
	border-radius: 100px;
	text-align: center;
	}
	#pagetop-btn a:hover {
		background: rgb(110,145,75); /* IE8以下用 */
		background: rgba(110,145,75,.8);
		}
	#pagetop-btn a img {
		padding-top: 10px;
		}

/* global navigation
-------------------------------------------------- */

#nav {
	z-index: 210;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	background: rgb(110,145,75); /* IE8以下用 */
	background: rgba(110,145,75,.8);
	width: 430px;
	height: 100%;
	}
	#nav ul {
		width: 550px;
		margin: 50px;
		}
		#nav ul li {
			list-style: none;
			opacity: 0.7;
			}
			#nav ul li a {
				color: #fff;
				font-size: 24px;
				font-weight: bold;
				line-height: 3em;
				text-decoration: none;
				}
				#nav ul li a:hover {
					text-decoration: underline;
					}
			#nav ul li {
				padding-left: 65px;
				
			}
			#nav ul li#nav-section2 {background: url(../img/home/section2/h2-icon.svg) no-repeat left center;letter-spacing: 0;background-size: 50px 50px;}
			#nav ul li#nav-section3 {background: url(../img/home/section3/h2-icon.svg) no-repeat left center;}
			#nav ul li#nav-section4 {background: url(../img/home/section4/h2-icon.svg) no-repeat left center;}
			#nav ul li#nav-section5 {background: url(../img/home/section5/h2-icon.svg) no-repeat left center;}
			#nav ul li#nav-section6 {background: url(../img/home/section6/h2-icon.svg) no-repeat left center;}
			#nav ul li#nav-section7 {background: url(../img/home/section7/h2-icon.svg) no-repeat left center;}
			#nav ul li#nav-section8 {background: url(../img/home/section8/h2-icon.svg) no-repeat left center;}
			#nav ul li#nav-last {
				background: url(../img/home/nav/close.png) no-repeat left center;
				margin-top: 50px;
			}

#nav-overlay {
	z-index: 200;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/* loading
-------------------------------------------------- */

#loading {
	z-index: 300;
	position: fixed;
	background: rgb(140,195,75);
	width: 100%;
	height: 100%;
	}
	#loading img {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		}
	.no-js #loading {
		display: none;
		}


/* Alert
-------------------------------------------------- */

.alert_js,
.alert_ie {
	display: none;
	position: fixed;
	width: 100%;
	background: rgb(50, 85, 135);
	color: #fff;
	font-size: 12px;
	line-height: 25px;
	text-align: center;
	border-bottom: solid 1px #fff;
	z-index: 1000;
	}

.no-js .alert_js,
.lteie7 .alert_ie {
	display: block;
	}

.alert_js,
.alert_ie {
	bottom: 0;
	}

.no-js.lteie7 .alert_ie {
	bottom: 26px;
	}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

/* section1：ヒーローイメージ
-------------------------------------------------- */

body.sub-page #section1 {
	background: rgb(155, 225, 240);
	}

	body.sub-page #main-bg.normal {
		position: relative;
		overflow: hidden;
		/* height: 200px; */height: 250px;
		}
		body.sub-page #main-bg.normal:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		background: url("../img/home/section1/main-bg.jpg") no-repeat center center;
		background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-ms-background-size: cover;
		}

/* ==========================================================================
   style set
   ========================================================================== */

/* font style
-------------------------------------------------- */

h2 {
	padding: 0 0 5px 60px;
	color: rgb(140,195,75);
	font-size: 50px;
	line-height: 80px;
	}

h3,
.subtitle {
	margin-bottom: 30px;
	color: rgb(120,120,120);
	font-size: 24px;
	line-height: 1.8em;
	}
	.subtitle {
		font-weight: bold;	
		}
		.subtitle sup,
		.subtitle small {
			font-size: 0.7em;
			}
		
h4 {
	background: rgb(140,195,75);
	padding: 20px;
	color: #fff;
	font-size: 26px;
	}

h5 {
	font-size: 26px;
	}

a {
	color: rgb(40, 128, 185);
	}

::selection {
	background: rgb(80, 115, 150);
	color: #fff;
	}
	::-moz-selection {
		background: rgb(80, 115, 150);
		color: #fff;
		}

br.lg,
br.sm,
br.xs {
	display: none;
	}

.red-txt {color: #e74c3c; }
.blue-txt {color: rgb(50, 190, 220);}

/* プッシュボタンスタイルセット
-------------------------------------------------- */

div.push_btn {
	width: 400px;
	height: 65px;
	margin: 0 auto;
	}
	/* aタグ用スタイル */
	div.push_btn a {
		display: block;
		text-decoration: none;
		text-align: center;
		color: #333;
		}
	/* inputタグ用スタイル */
	div.push_btn input {
		border: none;
		outline: none;
		}
	/* aタグ、inputタグ共有スタイル */
	div.push_btn a,
	div.push_btn input {
		width:100%;
		position: relative;
		background: #e6e6e6;
		border-bottom: 3px solid #c8c8c8;
		transition: none;
			-webkit-transition: none;
		line-height: 65px;
		font-size: 20px;
		font-weight: bold;
		border-radius: 10px;
		}
		div.push_btn a:hover,
		div.push_btn input:hover {
			top: -2px;
			border-width: 5px;
			}
		div.push_btn a:active,
		div.push_btn input:active {
			opacity: 0.8;
			top: 3px;
			border-bottom: none;
			}
	/* 赤色 */
	div.push_btn .red {
		background: #e74c3c;
		border-color: #c0392b;
		color: #fff;
		}
	/* 黄色 */
	div.push_btn .yellow {
		background: #f1c40f;
		border-color: #f39c12;
		color: #fff;
		}
	/* 青色 */
	div.push_btn .blue {
		background: #3498db;
		border-color: #2980b9;
		color: #fff;
		}
	/* 緑色 */
	div.push_btn .green {
		background: #2ecc71;
		border-color: #27ae60;
		color: #fff;
		}


/* Margin
-------------------------------------------------- */

.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}









/* ==========================================================================
   Media Queries
   Width 1200 px〜
   ========================================================================== */

@media only screen and
(min-width : 1200px) {
	br.lg {
		/* display: none; */display: inline;
		}
}

/* ==========================================================================
   Media Queries
   Width 768 〜 1199 px
   ========================================================================== */
@media only screen and
(min-width : 768px) and
(max-width : 1199px) {

	/* ==========================================================================
	   Common
	   ========================================================================== */

	/* Layout
	-------------------------------------------------- */

	body {
		/* min-width: 1200px; */min-width: 768px;
		}
	.wrap {
		/* max-width: 2000px; */max-width: 1199px;
		/* min-width: 1200px; */min-width: 768px;
		/* padding: 0 60px; */padding: 0 20px;
		}

	/* header
	-------------------------------------------------- */

	#header input {
		/* right: 60px; */right: 20px;
		}

	/* footer
	-------------------------------------------------- */

	#footer {
		/* margin-top: 120px; */
		/* padding: 100px 0; */padding: 60px 0;
		}

	/* font style
	-------------------------------------------------- */

	h3,
	.subtitle {
		/* font-size: 24px; */font-size: 20px;
		}
	br.sm {
		/* display: none; */display: inline;
		}
}

/* ==========================================================================
   Media Queries
   Width 〜 767 px
   ========================================================================== */

@media only screen and
(max-width : 767px) {

	/* ==========================================================================
	   Common
	   ========================================================================== */

	/* Layout
	-------------------------------------------------- */

	body {
		/* line-height: 1.8em; */line-height: 2em;
		/* min-width: 1200px; */min-width: 600px;
		/* 追加 */font-size: 20px;
		}
	.wrap {
		/* max-width: 2000px; */max-width: 767px;
		/* min-width: 1200px; */min-width: 600px;
		/* padding: 0 60px; */padding: 0;
		}
	.side-space {
		/* margin: 0 60px; */margin: 0 20px;
		}

	/* header
	-------------------------------------------------- */
	#header #phone-bar {
		/* font-size: 18px; */font-size: 16px;
		/* 追加 */letter-spacing: 0.5px;
		}
		#header #phone-bar p {
			/* 追加 */margin-left: 20px;
		}
		#header #phone-bar span {
			/* font-size: 12px; */font-size: 11px;
			}
	#header #logo a {
		/* 追加 */left: 20px;
		}
	#header input {
		/* right: 60px; */right: 20px;
		}
	#header button {
		/*top: 35px;*/top: 40px;
		/*right: 60px;*/right: 30px;
		/*font-size: 18px;*/font-size: 20px;
		}

	/* footer
	-------------------------------------------------- */

	#footer {
		/* padding: 100px 0; */padding: 60px 0;
		}
	#footer p#slogan {
		/* font-size: 18px; */font-size: 24px;
	}
	/* 追加 */#footer img#footer-logo {
		/* 追加 */width: 300px;
		}
	#footer p#name {
		/* font-size: 22px; */font-size: 30px;
		}
	#footer a {
		/* font-size: 18px; */font-size: 24px;
		}
	#footer #sns #facebook-btn {
		/* margin: 0 20px; */margin: -5px 20px 0 20px;
		}
	#footer #sns #google-btn {
		/* margin-top: 7px; */margin-top: 9px;
		}
	#contact-btn a {
		/* bottom: 60px; */bottom: 30px;
		/* font-size: 20px; */font-size: 16px;
		}
	#pagetop-btn a {
		/* bottom: 75px; */bottom: 30px;
		}

	/* font style
	-------------------------------------------------- */

	h2 {
		/* font-size: 50px; */font-size: 45px;
		/* 追加 */margin-left: 20px;
		}

	br.xs {
		/* display: none; */display: inline;
		}
}