@charset "UTF-8";


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic ProN', sans-serif}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ページの基本構造 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 左右の余白 */
.cols-inner	{max-width: 950px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;}

/* 上下の余白 */
.header	{padding-top: 15px;
	padding-bottom: 12px;}

.topmsg	{padding-top: 20px;
	padding-bottom: 20px;}

.gaiyou	{padding-top: 40px;
	padding-bottom: 8px;}

.description　{padding-top: 40px;
	padding-bottom: 8px;}

.footer	{padding-top: 10px;
	padding-bottom: 8px;}

/* 背景色 */
.header	{background-color: #000000;}

.topic	{background-color: #FFFFFF;}

.footer	{background-color: #000000;}


/* 段組み */
@media (min-width: 400px) {

	/* ヘッダー2段組 */
	.header .col	{float: left;}
	.header .col + .col	{float: right;}

	/* フッター4段組み */
	.footer .col	{float: left;
		width: 22%;
		margin-left: 2%;}



	/* 概要3段組み */
	.gaiyou .col	{float: left;
		width: 30%;
		margin-left: 4%;}

	/* 説明1段組み */
	.description .col	{float: center;}
	.header .col + .col	{float: center;}
	

}

@media (min-width: 400px) and (max-width: 767px) {

	/* 概要2段組み */
	.gaiyou .col	{float: left;
		width: 48%;
		margin-left: 4%;}

	.gaiyou .col:first-child + .col + .col	{clear: both;
		margin-left: 0;}

}

.cols .col:first-child	{margin-left: 0;}

.cols:after	{content: "";
	display: block;
	clear: both}




/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* サイト名 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.logo h1	{margin: 0;
	line-height: 1;}

.logo h1 a	{color: #000;
	text-decoration: none;}

.logo span	{width: 90px;
	height: 20px;
	background-image: url(https://www.profield.jp/image/logo.png);
	background-size: 100% 100%;
	background-position: 0% 0%;
	display: inline-block;
	text-indent: -9999px;}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ナビゲーションメニュー */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.menu ul	{margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
	list-style: none;}

.menu li a	{display: block;
	padding: 3px 15px;
	color: #ffffff;
	text-decoration: none;}

.menu li a:hover	{background-color: #eee;}


@media (max-width: 400px) {
	.menu	{display: none}

	.menubtn	{padding: 6px 12px;
		border: solid 1px #aaaaaa;
		border-radius: 5px;
		background-color: #ffffff;
		position: absolute;
		top: 20px;
		right: 15px;
		cursor: pointer}

	.menubtn:hover	{background-color: #ddd}

	.menubtn:focus	{outline: none}

	.menubtn i	{color: #888888;
		font-size: 18px}

	.menubtn span	{display: inline-block;
		text-indent: -9999px}
}


@media (min-width: 400px) {
	.menu	{display: block !important;}

	.menu li	{float: left;}

	.menu ul:after	{content: "";
		display: block;
		clear: both;}

	.menubtn	{display: none}

}




/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー画像 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.photo	{width: 100%;
	height: 270px;
	background-image: url(img/header.jpg);
	background-size: cover;
	background-position: 80% 20%;}

@media (max-width: 400px) {
	.photo	{height: 256px;
		background-image: url(img/header-s.jpg);
		background-position: 80% 40%;}
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* トピック */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.topic article	{padding-bottom: 15px;}

.topic a	{color: #000;
		text-decoration: none;}
.topic a:hover	{color: #2E58FF;
		 opacity: 0.8}

.topic p	{margin-top: 15px;
	margin-bottom: 0;
	font-size: 11px}


@media (max-width: 400px) {
	.topic .snap	{margin-bottom: 10px;}
	.topic h1	{margin-bottom: 3px;}
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 概要 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.gaiyou article	{padding-bottom: 15px;}

.gaiyou a	{color: #000;
		text-decoration: none;}
.gaiyou a:hover	{color: #2E58FF;
		 opacity: 0.8}

.gaiyou .snap	{width: 100%;
	height: 120px;
	margin-bottom: 20px;
	background-position: 50% 50%;
	background-size: cover;}


.gaiyou h1	{margin: 0.5em 0;
  padding: 0.2em 0 0.1em 1em;
  border-bottom: 1px dotted #F66;
  border-left: 10px solid #F66;
  font-size: 15px;
  font-weight: bold;
  color: #808080;
	}


.gaiyou p	{margin-top: 0;
	margin-bottom: 0;
	font-size: 12px}


@media (max-width: 400px) {
	.gaiyou .snap	{margin-bottom: 10px;}
	.gaiyou h1	{margin-bottom: 3px;}
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 説明 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.description article	{padding-top: 15px;
			padding-bottom: 15px;}

.description a	{color: #000;
		text-decoration: none;}
.description a:hover	{color: #2E58FF;
		 opacity: 0.8}

/*
.description image { display: none; }
*/


.description h1	{margin-left:15px;
  padding: 0.2em 0 0.1em 1em;
  border-bottom: 1px dotted #F66;
  border-left: 10px solid #F66;
  font-size: 15px;
  font-weight: bold;
  color: #808080;
	}


.description h2	{
	margin-top:30px;
	margin-bottom:15px;
	margin-left:45px;	
	font-size: 15px;}

.description h3	{
	margin-top:30px;
	margin-bottom:15px;
	margin-left:45px;	
	font-size: 15px;
	font-weight: bold;
  	color: #369;
	}

.description p	{
	margin-right:30px;
	margin-left:60px;	
	font-size: 12px;}

@media (max-width: 640px) {
    #snap {
        width: auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 導入事例テーブル */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.introduction{
  width:70%;
  border: 2px solid #ccc;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}
 
.introduction th{
  padding: 6px 8px 5px;
  border-top: solid 1px #ffffff;
  width: 15%;
  overflow: hidden;
  color: #13131e;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
  background-color: #eeece4;
}
 
.introduction td{
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
  color: #595960;
  font-style: normal;
  font-size: 12px;
  background-color: #ffffff;
  border-top: dotted 1px #e0dccc;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}
 
@media (max-width: 400px){
.introduction th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
  border-radius: 3px;
}
.introduction td{
  display: list-item;
  margin: 0 auto;
  width: 80%;
  border-top: none !important;
}
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* OS対応等テーブル */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
table{
	width:85%;
	border-collapse:collapse;
	border-spacing:0;
	border:1px solid #ccc;
	padding:0;
	margin-right : auto;
	margin-left : auto
}

table tr{
	border:1px solid #ddd;
	font-size: 12px;
	padding:2px;
}

table th, table td{
	padding:5px;
	font-size: 12px;
	text-align:center;
}

table th{
	font-size:12px;
	letter-spacing:1px;
}

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

	table{
		border:0;
	}

	table thead{
		display:none;
	}

	table tr{
		margin-bottom:10px;
		display:block;
		border-bottom:2px solid #ddd;
	}

	table td{
		display:block;
		text-align:right;
		font-size:13px;
		border-bottom:1px dotted #ccc;
	}

	table td:last-child{
		border-bottom:0;
	}

	table td:before {
		content:attr(data-label);
		float:left;
		font-weight: bold;
	}
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 動画 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.video {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* コピーライト */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.copyright p	{margin: 0;
	color: #CCC;
	font-size: 12px;}




/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.footer article	{padding-bottom: 30px;}

.footer a	{color: #ccc;
		text-decoration: none;}
.footer a:hover	{color: #2E58FF;
		 opacity: 0.8}

.footer h1	{
  font-size: 12px;
  font-weight: bold;
  color: #ccc;
	}

.footer p	{margin: 0;
	color: #CCC;
	font-size: 11px;}


@media (max-width: 400px) {
	.gaiyou .snap	{margin-bottom: 10px;}
	.gaiyou h1	{margin-bottom: 3px;}
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* TOPに戻る */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 0px;
  width: 35px;
  height: 32px;
  background-color: #7D98BA;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}