@charset "utf-8";

/* Main Visual
------------------------------------------------------------ */
#mv{
	position:relative;
	width:100%;
	height:306px;
	padding-top:45px;
	text-align:center;
	background:#fff url(/img/ss/products/sensor/sensorbasics/main_bg_01.gif) no-repeat center top;
}

#mv .lead {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:10px 0;
	color:#fff;
	background:url(/img/ss/products/sensor/sensorbasics/main_bg_02.png) repeat left top;
}

#mv .lead .inner{
	display: inline-block;
	max-width: 960px;
}

.page_title .balloon {
	display: inline-block;
	font-size: 28px;
	padding: 12px;
	background-color: #fff;
	border: 4px solid #000;
	line-height: 1.2;
	position: relative;
	margin-bottom: 30px;
  }

.page_title .balloon::after, .page_title .balloon::before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -26px;
	border-top: 26px solid #222;
	border-right: 16px solid transparent;
	border-left: 16px solid transparent;
}

.page_title .balloon::after {
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	bottom: -18px;
	border-top: 18px solid #fff;
}

.page_title .page_title_inner {
	display: flex;
	flex-direction: column;
	line-height: 1.5;
	color: #000;
}

.page_title .lead_text {
	font-size: 24px;
}

.page_title .title_text {
	font-size: 12px;
	font-weight: normal;
}

@media screen and (max-width: 640px) {
  .page_title .page_title_inner {
    margin-bottom: 30px;
  }  
}

/*sp*/
.mv_sp {
	display:none;
}



/* Main contents
------------------------------------------------------------ */
/* ==============================
outline setting
============================== */
#contents_wrap{
	width:100%;
	background:#ededed;
}

#main_contents {
	width:960px;
	margin:0 auto;
	padding:20px 0 40px;
}

.contents {
	background:#fff;
}

.contents ul {
	padding: 5% 7% 0;
}


.contents li {
	margin-bottom:3px;
	padding-left:15px;
}

.contents a {
	color:#454545 !important;
}

/* headline */
#main_contents h2 {
	margin-bottom:10px;
	padding: 20px 0 10px 50px;
}

#main_contents h3 {
	position:relative;
	text-align:center;
}

#main_contents h3 a{
	display: block;
	padding:18px 0;
	font-size: 20px;
	font-weight: normal;
}

#main_contents h3 a:link,
#main_contents h3 a:visited,
#main_contents h3 a:hover,
#main_contents h3 a:focus,
#main_contents h3 a:active{
	text-decoration: none;
}

#main_contents h3 a:hover,
#main_contents h3 a:focus{
	color: #7E7E7E !important;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

/* ==============================
sec01
============================== */
#sec01 h2 {
	background:url(/img/ss/products/sensor/sensorbasics/index_h2_bg_01.gif) no-repeat left center;
	font-size: 24px;
}

#sec01 h2 a:link,
#sec01 h2 a:visited,
#sec01 h2 a:hover,
#sec01 h2 a:focus,
#sec01 h2 a:active{
	color: #292929;
	text-decoration: none;
}

#sec01 h2 a:hover,
#sec01 h2 a:focus{
	color: #979797;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}


#sec01 .contents {
	background: none;
}

#sec01 .contents .item {
	float:left;
	width: 320px;
}

#sec01 .contents .inner {
	position: relative;
	padding-top: 5px;
	padding-bottom:20px;
	border-right:1px solid #d2d2d2;
	background: #fff;
}

#sec01 .contents .inner:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: -1px;
	height: 5px;
	background: #eab800;
}

#sec01 .contents .inner li {
	background:url(/img/ss/products/sensor/sensorbasics/index_icon_arrow_01.gif) no-repeat left 6px;
}

#sec01 .contents .item .spacer {
	margin-bottom: 10px;
}

/* third box */
#sec01 .contents .item:nth-child(3n) .inner {
	border-right: 1px solid #fff;
}

#sec01 .list_ttl {
	padding-left:0;
}

#sec01 h4 {
	font-size:12px;
	font-weight:normal;
	padding:2px 0 0 5px;
	background:#e5e5e5;
}

/* ==============================
sec02
============================== */
#sec02{width: 640px;}

#sec02 h2 {
	display: table;
	background:url(/img/ss/products/sensor/sensorbasics/index_h2_bg_02.gif) no-repeat left center;
	font-size: 24px;
}

#sec02 h2 a{
	display: table-cell;
	vertical-align: middle;
}

#sec02 h2 a:link,
#sec02 h2 a:visited,
#sec02 h2 a:hover,
#sec02 h2 a:focus,
#sec02 h2 a:active{
	color: #292929;
	text-decoration: none;
}

#sec02 h2 a:hover,
#sec02 h2 a:focus{
	color: #979797;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#sec02 .contents .item {
	float:left;
	width:320px;
}

#sec02 .contents .inner {
	position: relative;
	padding-top: 5px;
	padding-bottom:20px;
	border-right:1px solid #d2d2d2;
}

#sec02 .contents .inner:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: -1px;
	height: 5px;
	background: #006eae;
}

#sec02 .contents .item:last-child .inner {
	border-right: 1px solid #fff;
}

#sec02 .contents li {
	background:url(/img/ss/products/sensor/sensorbasics/index_icon_arrow_02.gif) no-repeat left 6px;
}

#sec02 .contents .btn {
	clear:both;
	width: 260px;
	margin: 0 auto;
	padding-top:10px;
	text-align:center;
}

#sec02 .contents .btn a{
	display: block;
	padding: 7px 0;
	background: #006EAE;
	color: #fff !important;
	font-size: 16px;
	line-height: 1.3;
}
#sec02 .contents .btn a:link,
#sec02 .contents .btn a:visited,
#sec02 .contents .btn a:hover,
#sec02 .contents .btn a:focus,
#sec02 .contents .btn a:active{
	text-decoration: none;
}

#sec02 .contents .btn a:hover,
#sec02 .contents .btn a:focus{
	background: #4D99C6;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#sec02 .contents .btn a .inner{
	display: inline-block;
	position: relative;
	max-width: 200px;
}

#sec02 .contents .btn a .inner:before{
	display: block;
	position: absolute;
	top: 50%;
	left: -18px;
	width: 6px;
	height: 10px;
	margin: -5px 0 0;
	background:url(/img/ss/products/sensor/sensorbasics/index_icon_arrow_05.gif) no-repeat left center;
	content: "";
}

/* ==============================
sec03
============================== */
#sec03 h2 {
	background:url(/img/ss/products/sensor/sensorbasics/index_h2_bg_03.gif) no-repeat left center;
	font-size: 24px;
}

#sec03 h2 a:link,
#sec03 h2 a:visited,
#sec03 h2 a:hover,
#sec03 h2 a:focus,
#sec03 h2 a:active{
	color: #292929;
	text-decoration: none;
}

#sec03 h2 a:hover,
#sec03 h2 a:focus{
	color: #979797;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#sec03 .contents {
	border-top:5px solid #d8356f;
}

#sec03 .contents .inner {
	border-right: 1px solid #d2d2d2;
}

#sec03 .contents li {
	background:url(/img/ss/products/sensor/sensorbasics/index_icon_arrow_03.gif) no-repeat left 6px;
}

/* ==============================
sec04
============================== */
#sec04 h2 {
	background:url(/img/ss/products/sensor/sensorbasics/index_h2_bg_04.gif) no-repeat left center;
	font-size: 24px;
}

#sec04 h2 a:link,
#sec04 h2 a:visited,
#sec04 h2 a:hover,
#sec04 h2 a:focus,
#sec04 h2 a:active{
	color: #292929;
	text-decoration: none;
}

#sec04 h2 a:hover,
#sec04 h2 a:focus{
	color: #979797;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#sec04 .contents {
	border-top:5px solid #548740;
}

#sec04 .contents .inner {
	border-right:1px solid #d2d2d2;
}

#sec04 .contents li {
	background:url(/img/ss/products/sensor/sensorbasics/index_icon_arrow_04.gif) no-repeat left 6px;
}

/* ==============================
sec05
============================== */
#sec05 h2 {
    background: url(/img/ss/products/sensor/sensorbasics/index_h2_bg_05.gif) no-repeat left center;
    font-size: 24px;
}

#sec05 h2 a:link,
#sec05 h2 a:visited,
#sec05 h2 a:hover,
#sec05 h2 a:focus,
#sec05 h2 a:active{
	color: #292929;
	text-decoration: none;
}

#sec05 h2 a:hover,
#sec05 h2 a:focus{
	color: #979797;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

#sec05 .contents {
    border-top: 5px solid #eb9300;
}

#sec05 .contents li {
	background:url(/img/ss/products/sensor/sensorbasics/index_icon_arrow_06.gif) no-repeat left 6px;
}

/* ==============================
sec01～4　other setting
============================== */
#sec02, #sec03, #sec04, #sec05 {
	float:left;
}
#sec03, #sec04, #sec05 {
	width: 320px;
}

#sec02 .contents,
#sec03 .contents,
#sec04 .contents {
	background:#fff;
}

#sec03 .contents .inner,
#sec04 .contents .inner,
#sec05 .contents .inner {
	padding-bottom: 20px;
}



/* Nav
------------------------------------------------------------ */
#nav_pc, #nav_sp {
	display:none; /* PC hide */
}










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

/* Main visual　SP
------------------------------------------------------------ */
#mv{
	position:static;
	height:auto;
	padding-top:5%;
	background:#fff url(/img/ss/products/sensor/sensorbasics/sp_main_bg.gif) no-repeat left top;
	background-size:100%;
}

#mv .lead {
	position:static;
	left:auto;
	bottom:auto;
	width:94%;
	padding:3%;
	font-size:20px;
	text-align:left;
}

.mv_sp {
	display:block;
	width:62%;
	margin:0 auto 4.5%;
}

.mv_sp img {
	width:100%;
}

.mv_pc {
	display:none;
}



/* Main contents　SP
------------------------------------------------------------ */
#main_contents {
	display:none; /*SP Hide*/
}



/* Nav　SP
------------------------------------------------------------ */
#nav_sp {
	display:block; /* SP Display */
}

}