﻿ @charset "utf-8";

#tano-main-area h2.tano-h2-type-01{
	clear: both;
	text-align: left;
	margin: 60px 0 5px 0;
	padding: 0 ;
	font-size: 28px;
	font-weight: bold;
	line-height: 1em;
	color: #333;
}
#tano-main-area h2.tano-h2 span{
	display: block;
	padding: 7px 0 5px 30px;
	position: relative;
}
#tano-main-area h2.tano-h2 span:before{
	content: "■";
	position: absolute;
	width: 1em;
	height: 1em;
	left: 0;
	top:calc(50% - 0.5em);
	font-size: 34px;
}
#tano-main-area h3.tano-h3,
#tano-main-area #section04 h3.box-head{
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin: 40px 0 10px 0;
	padding: 0;
}
#tano-main-area h4.tano-h4{
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	color: #333;
	margin: 20px 0 10px;
	padding: 0 0 0 15px;
	border-left: solid 2px #4891dc;
}
#tano-main-area .tano-jin-text-01{
	font-size: 14px;
}
#tano-main-area .red{
	color: red;
}
#tano-main-area #section02 .box-head,
#tano-main-area #section03 .box-head,
#tano-main-area #section04 .box-head{
	font-size: 16px;
	font-weight: 600;
}
#tano-main-area #section04 h3.box-head{
	background: #dee6fd;
	border-bottom: solid 1px #5c8dcb;
	border-left: solid 5px #5c8dcb;
	padding: 5px 15px;
	margin: 20px 0 10px 0;
}
/*-----------------------------------------
	.box-list-3
-------------------------------------------*/
#tano-main-area .box-list-3{
	display: flex;
	border-left: solid 1px #ededed;
	margin: 15px auto 20px;
}
#tano-main-area .box-list-3 li{
	width: calc((100% - 4px) / 3);
	display: flex;
	justify-content: center;
	border-right: solid 1px #ededed;
}
#tano-main-area .box-list-3 li .box-inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 5px 25px;
	margin: 0;
}
#tano-main-area .box-list-3 li .box-img{
	text-align: center;
	margin: 0 auto;
}
#tano-main-area .box-list-3 li a{
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #333;
	display: block;
	padding: 8px 25px;
	border: solid 1px #333;
	position: relative;
}
#tano-main-area .box-list-3 li a:hover{
	color:#333;
	background: #fff;
}
#tano-main-area .box-list-3 li a:before{
	content: "";
	width: 8px;
	height: 10px;
	background: url(arrow-w-out.png) no-repeat;
	position: absolute;
	color: #444;
	right: 8px;
	top: calc(50% - 5px);
}
#tano-main-area .box-list-3 li a:hover:before{
	background-image: url(arrow-g-out.png);
}
#tano-main-area .box-list-3 li .box-head{
	margin: 15px 0 5px 0;
	text-align: center;
}
#tano-main-area .box-list-3 li .box-text{
	margin: 0 0 10px 0;
}
#tano-main-area #section04 .box-list-3{
	flex-wrap: wrap;
	border-top: solid 1px #ededed;
}
#tano-main-area #section04 .box-list-3 li{
	border-bottom: solid 1px #ededed;
}
#tano-main-area #section04 .box-list-3 li .box-img{
	margin-top: 15px;
}
#tano-main-area #section04 .box-list-3 li .box-inner .box-head{
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	padding: 0;
	margin: 10px 0 5px;
}
#tano-main-area #section04 .box-list-3 li .box-inner .box-text{
	flex: 1;
}
/*-----------------------------------------
	.nav-page-top
-------------------------------------------*/
#tano-main-area .nav-page-top{
	margin-top: 10px;
}
#tano-main-area .nav-page-top ul{
	display: flex;
}
#tano-main-area .nav-page-top ul li{
	width: 25%;
	display: flex;
	justify-content: center;
	align-content: stretch;
}
#tano-main-area .nav-page-top ul li a{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	line-height: 1.25em;
	color: #333;
	border: solid 1px #999;
	padding: 15px 0 20px;
	margin: 0 5px;
	position: relative;
}
#tano-main-area .nav-page-top ul li a:before{
	content: "";
	width: 10px;
	height: 8px;
	background: url(arrow-g.png) no-repeat;
	position: absolute;
	color: #444;
	bottom: 8px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#tano-main-area .nav-page-top ul li a:hover{
	background: #f7feff;
}
#tano-main-area .nav-page-top ul li a:hover:before{
	bottom: 5px;
}
/*-----------------------------------------
	#section01
-------------------------------------------*/
#tano-main-area #section01 h3.tano-h3{
	padding: 5px 15px;
	position: relative;
}
#tano-main-area #section01-01,
#tano-main-area #section01-02,
#tano-main-area #section01-03,
#tano-main-area #section01-04,
#tano-main-area #section01-05,
#tano-main-area #section01-06,
#tano-main-area #section01-07,
#tano-main-area #section01-08{
	background: #dff0f3;
	border-bottom: solid 1px #04aacd;
	border-left: solid 5px #04aacd;
}
#tano-main-area #section01-09,
#tano-main-area #section01-10,
#tano-main-area #section01-11,
#tano-main-area #section01-12,
#tano-main-area #section01-13,
#tano-main-area #section01-14,
#tano-main-area #section01-15,
#tano-main-area #section01-16{
	background: #ffecde;
	border-bottom: solid 1px #f37b22;
	border-left: solid 5px #f37b22;
}
#tano-main-area #section01-01:before,
#tano-main-area #section01-02:before,
#tano-main-area #section01-03:before,
#tano-main-area #section01-04:before,
#tano-main-area #section01-05:before,
#tano-main-area #section01-06:before,
#tano-main-area #section01-07:before,
#tano-main-area #section01-08:before{
	content: "種類";
	background: #04aacd;
}
#tano-main-area #section01-09:before,
#tano-main-area #section01-10:before,
#tano-main-area #section01-11:before,
#tano-main-area #section01-12:before,
#tano-main-area #section01-13:before,
#tano-main-area #section01-14:before,
#tano-main-area #section01-15:before,
#tano-main-area #section01-16:before{
	content: "機能";
	background: #f37b22;
}
#tano-main-area #section01 h3.tano-h3:before{
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	position: absolute;
	right: 10px;
	top: 3px;
	padding: 3px 10px 2px;
	margin:5px;
	color:#fff;
	border-radius: 30px;
}
#tano-main-area #section01-01:before,
#tano-main-area #section01-02:before,
#tano-main-area #section01-03:before,
#tano-main-area #section01-04:before,
#tano-main-area #section01-05:before,
#tano-main-area #section01-06:before,
#tano-main-area #section01-07:before,
#tano-main-area #section01-08:before{
	content: "種類";
	background: #04aacd;
}
#tano-main-area #section01-09:before,
#tano-main-area #section01-10:before,
#tano-main-area #section01-11:before,
#tano-main-area #section01-12:before,
#tano-main-area #section01-13:before,
#tano-main-area #section01-14:before,
#tano-main-area #section01-15:before,
#tano-main-area #section01-16:before{
	content: "機能";
	background: #f37b22;
}
#tano-main-area #section01 .box-head{
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	line-height: 1em;
	margin: 0 auto;
	padding: 5px 0 3px;
	display:block;
}
#tano-main-area #section01 .box-head span{
	display: inline-block;
	padding: 0 10px;
	line-height: 1.25em;
}

#tano-main-area #section01 div ul{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	padding: 5px;
}
#tano-main-area #section01 div ul li{
	display: flex;
	width: calc(100% / 4);
}
#tano-main-area #section01 div ul li a{
	width: 100%;
	display: flex;
	flex-direction: column;
	color: #333;
	text-decoration: none;
	padding: 10px 5px 20px;
	margin: 3px;
	border:solid 1px #fff;
	background: #fff;
	position: relative;
}
#tano-main-area #section01 div ul li a:before{
	content: "";
	width: 10px;
	height: 8px;
	background: url(arrow-g.png) no-repeat;
	position: absolute;
	color: #444;
	bottom: 8px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#tano-main-area #section01 div ul li a .box-top{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.25em;
	display: block;
	margin: 10px 0 5px;
}
#tano-main-area #section01 div ul li a .box-btn-text{
	font-size: 12px;
	text-align: center;
	display: block;
}
#tano-main-area #section01 div ul li a .box-btn-img{
	text-align: center;
	margin: 0 auto;
}
#tano-main-area #section01 div ul li a .box-btn-img,
#tano-main-area #section01 div ul li a .box-btn-img img{
	width: 180px;
	height: 109px;
}
#tano-main-area #section01 .box-list-type{
	margin-top: 10px;
}
#tano-main-area #section01 .box-list-type .box-head{
	background: #04aacd;
}
#tano-main-area #section01 .box-list-type ul{
	background: #dff0f3;
}
#tano-main-area #section01 .box-list-type ul li a:hover{
	border-color:#04aacd;
}
#tano-main-area #section01 .box-list-type ul li a:hover .box-top{
	color:#04aacd;
}
#tano-main-area #section01 .box-list-type ul li a:hover:before{
	background-image: url(arrow-b.png);
}
#tano-main-area #section01 .box-list-function{
	margin-top: 10px;
}
#tano-main-area #section01 .box-list-function .box-head{
	background: #f37b22;
}
#tano-main-area #section01 .box-list-function ul{
	background: #ffecde;
}
#tano-main-area #section01 .box-list-function ul li a:hover{
	border-color:#f37b22;
}
#tano-main-area #section01 .box-list-function ul li a:hover .box-top{
	color: #f37b22;
}
#tano-main-area #section01 .box-list-function ul li a:hover:before{
	background-image: url(arrow-o.png);
}
#tano-main-area .box-link-btn,
#tano-main-area .box-link-btn .box-link-btn-inner{
	display: flex;
	justify-content: center;
	align-items: center;
}
#tano-main-area .box-link-btn p{
	margin: 0;
	padding: 0 10px 0 0 ;
	font-size: 16px;
	font-weight: 600;
}
#tano-main-area .box-link-btn .box-link-btn-inner a{
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #333;
	display: block;
	padding: 8px 25px;
	margin: 0 10px;
	border: solid 1px #333;
	position: relative;
}
#tano-main-area .box-link-btn .box-link-btn-inner a:hover{
	color:#333;
	background: #fff;
}
#tano-main-area .box-link-btn .box-link-btn-inner a:before{
	content: "";
	width: 8px;
	height: 10px;
	background: url(arrow-w-out.png) no-repeat;
	position: absolute;
	color: #444;
	right: 8px;
	top: calc(50% - 5px);
}
#tano-main-area .box-link-btn .box-link-btn-inner a:hover:before{
	background-image: url(arrow-g-out.png);
}
/*-----------------------------------------
	#section03
-------------------------------------------*/
#tano-main-area #section03 .box-head{
	margin: 15px 0;
	font-weight: normal;
}
#tano-main-area #section03 .box-head span{
	display: block;
	font-weight: 600;
}
/*-----------------------------------------
	#section04
-------------------------------------------*/
#tano-main-area .box-list-selector{
	display: flex;
	border-left: solid 1px #ededed;
	margin: 15px auto 20px;
}
#tano-main-area .box-list-selector li{
	width: calc(100% / 2);
	text-align: center;
	border: solid 1px #ededed;
	corder-width:1px 1px 1px 0;
}
#tano-main-area .box-list-selector-inner{
	padding: 5px 25px;
}
#tano-main-area .box-list-selector li .box-img{
	margin-top: 15px;
}
#tano-main-area .box-list-selector li .box-head{
	margin: 10px 0 5px;
}
#tano-main-area .box-list-selector li .box-text{
	text-align: left;
	display: flex;
	justify-content: center;
}
#tano-main-area .box-list-selector li .box-text p{
	display: inline-block;
	margin: 0 0 10px;
}
#tano-main-area .box-list-selector li .box-text p span{
	font-weight: bold;
}
/*-----------------------------------------
	.link_list_calculator
-------------------------------------------*/
#tano-main-area .link_list_calculator_head{
	font-size: 20px;
	font-weight: 600;
	margin: 40px 0 15px 0;
	padding: 0 0 0 5px;
	border-bottom: solid 1px #444;
}
#tano-main-area .link_list_calculator ul{
	display: flex;
	justify-content: center;
}
#tano-main-area .link_list_calculator ul li{
	margin-right: 10px;
}
/*-----------------------------------------
	.spec-table-01
-------------------------------------------*/
#tano-main-area .spec-table-01 {
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin: 10px 0 0;
}
#tano-main-area .spec-table-01 tr th {
	border: 1px solid #CCC;
	padding: 2px 5px;
	vertical-align: middle;
	background: #eee;
	width: 125px;
}
#tano-main-area .spec-table-01 tr td {
	border: 1px solid #CCC;
	vertical-align: middle;
	padding: 2px 5px;
	width: 315px;
}
#tano-main-area .tano-item-detail-box-4 .spec-table-01 tr th{
	width: 6em;
}
/*-----------------------------------------
	.tano-item-detail-box-inner
-------------------------------------------*/
#tano-main-area .tano-item-detail-box-2 .tano-item-detail .tano-item-detail-center img,
#tano-main-area .tano-item-detail-box-3 .tano-item-detail .tano-item-detail-center img,
#tano-main-area .tano-item-detail-box-4 .tano-item-detail .tano-item-detail-center img{
	border:0;
}
#tano-main-area .tano-detail-area{
	font-size:12px;
}