@charset "utf-8";

/*===================================================================
	implementation.htm
===================================================================*/

#tabletpos_implementation a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
#tabletpos_implementation .detailSectionInner {
	width: 930px;
	padding: 15px;
	margin: 0 auto;
	background: #448fd8;
}
.tabletpos_localnav {
	margin: 0 auto;
	padding: 0px 15px;
	text-align: center;
}
.tabletpos_localnav_footer {
	padding: 65px 15px 40px;
}
.tabletpos_localnav li {
	position: relative;
	display: inline-block;
	width: 208px;
	height: 42px;
	margin-right: 8px;
}
.tabletpos_localnav li:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
.tabletpos_localnav li a{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	line-height: 42px;
    box-sizing: border-box;
}
.tabletpos_localnav li a:hover{
	text-decoration: none;
	opacity: .7;
}
.tabletpos_localnav .current a{
	position: relative;
	opacity: .7;
}
.tabletpos_localnav .nav01 a{
	font-size: 11px;
	color: #4D4D8E;
	background: #fff;
}
.tabletpos_localnav .nav02 a{
	background: #588FD2;
}
.tabletpos_localnav .nav03 a{
	background: #F2A33A;
}
.tabletpos_localnav .nav04 a{
	background: #52A17B;
}

.cnt01 {
	text-align: center;
	padding: 0 0 30px;
}
.cnt01_box {
	position: relative;
}
.cnt01_text{
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 1.7;
}
.cnt01_btn {
	width: 120px;
	height: 120px;
}
.btn_left {
	position: absolute;
	right: 122px;
	top: 0;
}
.btn_right {
	position: absolute;
	right: -8px;
	top: 0;
}
.cnt01_btn a{
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 100%;
	font-weight: bold;
	background: #fff;
    border-radius: 50%;
}
.cnt01_btn a:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15px;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #448fd8 transparent transparent transparent;
}
.cnt01_btn a:hover{
	color: #005AB4;
	text-decoration: none;
}

.cnt02 {
	padding: 30px;
	margin: 0 0 15px;
	margin-bottom: 15px;
	background: #fff;
}
.cnt02_title {
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 0 20px;
}
.cnt02_title span {
	display: flex;
    align-items: center;
    justify-content: center;
	width: 35px;
	height: 35px;
	font-size: 25px;
	color: #fff;
	background: #448FD8;
	margin: 0 10px 5px 0;
}
.cnt02_text{
	font-size: 16px;
	text-align: center;
	margin: 0 0 20px;
}
.cnt02_btn a {
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #84B5E2;
	padding: 30px 30px 30px 8.2%;
	box-shadow: 2px 2px 0px rgba(1, 98, 166, 1);
}
.cnt02_btn a:hover {
	text-decoration: none;
	opacity: .7;
}
.cnt02_btn a span{
	position: relative;
	font-size: 14px;
	padding: 0 20px 0 0;
	margin: 0 0 0 50px;
}
.cnt02_btn a span:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #fff;
}

.cnt03{
	padding: 30px;
	margin: 0 0 15px;
	background: #fff;
}
.cnt03_title {
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 0 20px;
}
.cnt03_title span {
	display: flex;
    align-items: center;
    justify-content: center;
	width: 35px;
	height: 35px;
	font-size: 25px;
	color: #fff;
	background: #448FD8;
	margin: 0 10px 5px 0;
}
.cnt03_text{
	font-size: 16px;
	text-align: center;
	margin: 0 0 50px;
}
.cnt03_point{
	width: 782px;
	font-size: 20px;
	padding: 0 0 5px;
	margin: 0 auto 30px;
	border-bottom: 1px solid #A9AAC2;
}
.cnt03_thumb{
	text-align: center;
}
.cnt03_thumb img{
	margin: 0 auto;
}
.cnt03_message{
	font-size: 25px;
	text-align: center;
	margin: 0 0 50px;
}
.cnt03_list01 h4{
	display: flex;
    justify-content: center;
    flex-direction: column;
	min-height: 110px;
	font-size: 16px;
	color: #fff;
	background: #84B5E2;
	text-align: center;
	padding: 15px;
    box-sizing: border-box;
}
.cnt03_list01 h4 span{
	display: block;
	font-size: 18px;
	margin: 0 0 5px;
}
.cnt03_lan{
	display: flex;
    justify-content: center;
    margin: 0 0 50px;
}
.cnt03_lan li{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 20px;	
}
.cnt03_lan li img{
	margin: 0 0 10px;
}
.cnt03_title02{
	font-size: 30px;
	text-align: center;
	padding: 0 0 15px;
}
.cnt03_btn a {
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #84B5E2;
	padding: 30px 30px 30px 8.2%;
	box-shadow: 2px 2px 0px rgba(1, 98, 166, 1);
}
.cnt03_btn a:hover {
	text-decoration: none;
	opacity: .7;
}
.cnt03_btn a span{
	position: relative;
	font-size: 14px;
	padding: 0 20px 0 0;
	margin: 0 0 0 50px;
}
.cnt03_btn a span:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #fff;
}
.cnt03_txt01 {
	width: 782px;
	margin: 0 auto;
	text-align: left;
	font-size: 15px;
	color: #666;
	line-height: 1.8em;
}
.cnt03_list01 {
	width: 782px;
	margin: 0 auto;
	padding-bottom: 15px;
}
.cnt03_list01 li {
	position: relative;
	float: left;
	width: 366px;
	color: #666;
	font-size: 15px;
	text-align: left;
}
.cnt03_list01 li:before{
	content: "";
	position: absolute;
	top: -35px;
	left: 0;
	right: 0;
	width: 16px;
	height: 16px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	margin: 0 auto;
    box-sizing: border-box;
    transform: rotate(45deg);
}
.cnt03_list01 li.last {
	float: right;
}
.cnt03_list01 li p {
	margin-top: 8px;
}
.cnt03_product {
	padding: 20px 30px 30px;
	border: 2px solid #448fd8;
}
.cnt03_list {
	display: flex;
    justify-content: space-between;
}
.cnt03_list li {
	width: 49%;
	background: #76b6e6;
	padding: 15px;
    box-sizing: border-box;
}
.cnt03_list li img{
	max-width: 100%;
	height: auto;
}
.cnt03_list li h3 {
	font-size: 30px;
	color: #fff;
	text-align: center;
}
.cnt03_list li p {
	color: #fff;
	text-align: center;
}
.cnt03_list li a{
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
	width: 230px;
	height: 42px;
	font-weight: bold;
	color: #333;
	background: #fff;
	margin: 15px auto;
}
.cnt03_list li a:before{
	content: "";
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #333;
}
.cnt03_list li a:hover{
	text-decoration: none;
}
.cnt03_reccomend {
	display: flex;
	margin: 30px 0;
}
.cnt03_reccomend h3{
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
	width: 200px;
	font-size: 20px;
	color: #76B6E6;
	border: 2px solid #76B6E6;
    border-radius: 10px;
	padding: 15px;
	margin: 0 30px 0 0;
    box-sizing: border-box;
}
.cnt03_reccomend h3:before{
	content: "";
	position: absolute;
	top: 0;
	right: -20px;
	bottom: 0;
	width: 22px;
	height: 20px;
	background: url(../images/implementation/icon_arow.png);
    background-size: cover;
	margin: auto;
}
.cnt03_reccomend ul li {
	flex: 1;    	
}
.cnt03_reccomend ul li:before {
	content: "・";
}

.cnt04{
	padding: 30px;
	background: #fff;
}
.cnt04_title {
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 0 20px;
}
.cnt04_title span {
	display: flex;
    align-items: center;
    justify-content: center;
	width: 35px;
	height: 35px;
	font-size: 25px;
	color: #fff;
	background: #448FD8;
	margin: 0 10px 5px 0;
}
.cnt04_text{
	font-size: 16px;
	text-align: center;
	margin: 0 0 50px;
}
.cnt04_display{
	display: flex;
    justify-content: center;
    margin: 0 0 50px;
}
.cnt04_display li{
	display: flex;
    align-items: center;
    flex-direction: column;
    font-weight: bold;
}
.cnt04_display li img{
	margin: 0 0 15px;
}
.cnt04_point{
	width: 782px;
  font-size: 20px;
  padding: 0 0 5px;
  margin: 0 auto 30px;
  border-bottom: 1px solid #A9AAC2;
}
.cnt04_model{
	display: flex;
    justify-content: center;
}
.cnt04_model li{
	display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 10px;
}
.cnt04_model img{
	margin: 0 0 5px;
}
.cnt04_model h4{
	font-weight: normal;
}
.cnt04_model li p{
	font-size: 16px;
	font-weight: bold;
	color: #458FD8;
}
.cnt04_model li p span{
	font-size: 20px;
	color: #458FD8;
}
.cnt04_txt01 {
	width: 782px;
	margin: 0 auto;
	text-align: left;
	font-size: 15px;
	color: #666;
	line-height: 1.8em;
}
.cnt04_reason{
	width: 712px;
	background: #e8f4ff;
	padding: 30px;
	margin: 30px auto;
}
.cnt04_reason h4{
	font-size: 20px;
	color: #458FD8;
	text-align: center;
	margin: 0 0 20px;
}
.cnt04_reason ul li{
	margin: 0 0 15px;
}
.cnt04_reason ul li span{
	display: block;
	color: #448fd7;
	font-size: 16px;
	font-weight: bold;
}
.cnt04_btn01{
	display: flex;
    justify-content: center;
}
.cnt04_btn01 a{
	display: flex;
    align-items: center;
    justify-content: center;
	width: 300px;
	height: 60px;
	background: #84B5E2;
	margin: 0 15px;
}
.cnt04_btn01 a:hover{
	text-decoration: none;
}
.cnt04_btn01 a span{
	position: relative;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	padding: 0 20px 0 0;
}
.cnt04_btn01 a span:before{
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #fff;
}
.cnt04_description {
	margin: 0 auto 20px;
	width:782px;
}
.cnt04_description dt {
	clear: left;
	float:left;
	text-align:left;
	width:240px;
}
.cnt04_description dt img {
	padding: 10px 0 0 30px;
}
.cnt04_description dt span {
	display:block;
	font-weight: normal;
	padding: 0 0 0 50px;
}
.cnt04_description dd {
	background: #e8f4ff;
	margin: 0 0 0 240px;
	padding: 20px 45px 13px;
}
.cnt04_description dd .txt {
	color: #448fd7;
	font-size:114%;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.cnt04_description dd .img {
	margin: 15px 0 auto 0;
}

.cnt05{
	padding: 50px 0;
}
.cnt05_title{
	font-size: 30px;
	color: #448FD7;
	text-align: center;
}
.cnt05_faq {
	width: 782px;
	color: #666;
	margin: 0 auto;
}
#faq02 {
	padding: 50px 0 0;
	border-top: dashed 1px #666;
}
.cnt05_faq table th,
.cnt05_faq table td {
	padding: 0;
}
.cnt05_faq .question {
	display: flex;
    align-items: center;
	font-size: 17px;
	padding: 15px;
	vertical-align: middle;
}
.cnt05_faq .question span {
	font-size: 40px;
	font-weight: normal;
	color: #448FD7;
}
.cnt05_faq .answer {
	width: 748px;
	padding: 5px 15px 15px; 
	border: 2px solid #448fd8;
}

.cnt05_faq .answerTtl {
	display: flex;
    align-items: center;
	font-size: 17px;
	font-weight: bold;
	padding: 15px;	
	vertical-align: middle;
}
.cnt05_faq .answerTtl span {
	font-size: 40px;
	font-weight: normal;
	color: #448FD7;
}
.cnt05_faq .model{
	display: flex;
    justify-content: space-between;
}
.cnt05_faq .model li{
	width: 31%;
}
.cnt05_faq .model li img{
	width: 100%;
	height: auto;
}
.cnt05_faq .model li p{
	font-weight: bold;
	text-align: center;
	margin: 15px 0;
}
.cnt05_faq .model li p small{
	font-weight: normal;
}
.cnt05_faq .cut{
	display: flex;
    justify-content: space-between;	
}
.cnt05_faq .cut li{
	width: 49%;
}
.cnt05_faq .cut li img{
	width: 100%;
	height: auto;
}
.cnt05_faq .cut li p{
	text-align: center;
	font-weight: bold;
	margin: 15px 0;
}
.cnt05_faq .cut li p small{
	font-weight: normal;
}
.cnt05_faq .answerDetail {
	padding: 10px 15px 0;
	font-size: 15px;
}
.cnt05_faq .answerDetail .answerDetailTtl {
	font-weight: bold;
	margin-bottom: 10px;
}
.cnt05_faq .answerDetail p {
	line-height: 1.7em;
}
.cnt05_faq .answerDetail .iLink01 {
	line-height: 1.4em;
	padding-bottom: .2em;
}
.cautionArea {
	width: 698px;
	margin: 0 auto;
}
.cnt05_faq .cautionArea {
	width: 630px;
	margin: 0 auto;
}
.cautionArea {
	padding: 10px 10px 10px 70px;
	border: 2px solid #448fd8;
	background: url(/products/receiptprinter/tabletpos/images/implementation/pos_caution_icn01.jpg) no-repeat 15px center;
	color: #666;
	font-size: 15px;
	text-align: left;
}
.cautionArea dt {
	font-size: 17px;
	font-weight: bold;
}
@media only screen and (max-width: 768px) {
#contents.responsive img{
    width: auto!important;
}
#contents .detailSection{
	padding: 0;
}
#tabletpos_implementation .detailSectionInner{
	width: 100%;
    box-sizing: border-box;
}
.tabletpos_localnav{
	padding: 15px;
}
.tabletpos_localnav li{
	width: 100%;
	margin-right: 0;
	margin-bottom: 10px;
}

.cnt01_text{
	font-size: 18px;
	text-align: left;
	margin: 0 0 30px;
}
.cnt01_btnarea{
	display: flex;
    justify-content: center;
}
.btn_left{
	position: static;
	margin: 0 5px;
}
.btn_right{
	position: static;
	margin: 0 5px;
}

.cnt02{
	padding: 15px;
}
.cnt02_title{
    justify-content: flex-start;
	font-size: 18px;
}
.cnt02_title span{
	width: 30px;
	height: 30px;
	font-size: 18px;
}
.cnt02_text{
	font-size: 14px;
	text-align: left;
}
.cnt02_btn a{
    flex-direction: column;
    font-size: 16px;
    text-indent: 1em;
    text-align: center;
    padding: 15px;
}
.cnt02_btn a span{
	margin: 10px 0 0;
}

.cnt03{
	padding: 15px;
}
.cnt03_title{
    justify-content: flex-start;
	font-size: 18px;
}
.cnt03_title span{
	width: 30px;
	height: 30px;
	font-size: 18px;
}
.cnt03_text{
	font-size: 14px;
	text-align: left;
}
.cnt03_txt01{
	width: 100%;
}
.cnt03_lan li{
	margin: 2px;
}
.cnt03_point{
	width: 100%;
	font-size: 18px;
}
.cnt03_point span{
	display: inline-block;
	font-size: 14px;
}
.cnt03_message{
	text-align: left;
	font-size: 16px;
}
.cnt03_list01{
	width: 100%;
}
.cnt03_list01 li{
	width: 100%;
	margin: 0 0 40px;
}
.cnt03_product{
	padding: 15px;
}
.cnt03_list{
	display: block;
}
.cnt03_list li{
	width: 100%;
	margin: 0 0 15px;
}
.cnt03_list01 li:before{
	top: -30px;
}
.cnt03_list li a{
	width: 100%;
}
.cnt03_reccomend{
	display: block;
}
.cnt03_reccomend h3{
	width: 100%;
	margin: 0 0 30px;
}
.cnt03_reccomend h3:before{
	top: auto;
	right: 0;
	left: 0;
	bottom: -19px;
	transform: rotate(90deg);
	
}
.cnt03_btn a{
    flex-direction: column;
    font-size: 16px;
    text-indent: 1em;
    text-align: center;
    padding: 15px;
}
.cnt03_btn a span{
	margin: 10px 0 0;
}


.cnt04{
	padding: 15px;
}
.cnt04_title{
    justify-content: flex-start;
	font-size: 18px;
}
.cnt04_title span{
	width: 30px;
	height: 30px;
	font-size: 18px;
}
.cnt04_text{
	font-size: 14px;
	text-align: left;
}
.cnt04_display{
	margin: 0 0 30px;
}
.cnt04_display li{
	font-size: 10px;
	text-align: center;
}
.cnt04_txt01{
	width: 100%;
	font-size: 14px;
}
.cnt04_point{
	margin: 0 0 15px;
	width:100%;
}
.cnt04_model{
    flex-wrap: wrap;
}
.cnt04_model li{
	width: 50%;
	padding: 10px;
	margin: 0;
    box-sizing: border-box;
}
.cnt04_reason{
	width: 100%;
	padding: 15px;
    box-sizing: border-box;
}
.cnt04_btn01{
	display: block;
}
.cnt04_btn01 a{
	width: 100%;
	padding: 10px;
	margin: 0 0 15px;
    box-sizing: border-box;
}
.cnt04_btn01 a span{
	padding: 0 10px 0 0;
}
.cnt04_description{
	width: 100%;
}
.cnt04_description dt{
	float: none;
}
.cnt04_description dd{
	margin: 0;
}
.cnt04_description dt span{
	text-align: center;
	padding: 0 0 10px;
	margin: -20px 0 20px;
}
#contents .cnt04_description dt img{
	display: block;
	width: 70%;
	padding: 0;
	margin: 0 auto;
}
.cnt04_description dt{
	width: 100%;
}
.cnt04_description dd{
	padding: 15px;
}

.cnt05_title{
	font-size: 20px;
}
.cnt05_faq{
	width: 100%;
	padding: 0 10px;
    box-sizing: border-box;
}
.cnt05_faq .question{
    align-items: flex-start;
	font-size: 15px;
}
.cnt05_faq .question span{
	font-size: 20px;
	line-height: 1.2;
}
.cnt05_faq .answer{
	width: 100%;
	padding: 15px;
}
.cnt05_faq .answerTtl{
    align-items: flex-start;
	padding: 0;
	margin: 0 0 15px;
}
.cnt05_faq .answerTtl span{
	font-size: 20px;
	line-height: 1.2;
}
.cnt05_faq .answerDetail{
	padding: 0 0 15px;
}
.cnt05_faq .cautionArea{
	width: 100%;
	padding: 80px 15px 15px;
	background-position: top 15px center;
    box-sizing: border-box;
}
.cnt05_faq .model{
	display: block;
}
.cnt05_faq .model li{
	width: 100%;
	text-align: center;
}
.cnt05_faq .cut{
	display: block;
}
.cnt05_faq .cut li{
	width: 100%;
}

.cautionArea {
	width: 100%;
    box-sizing: border-box;
}
.cnt05_faq .cautionArea {
	width: 100%;
}
.cautionArea {
	padding: 70px 15px 15px;
	background: url(/products/receiptprinter/tabletpos/images/implementation/pos_caution_icn01.jpg) no-repeat center top 15px;
	font-size: 14px;
}
.cautionArea dt {
	text-align: center;
}
}