@charset "utf-8";

/* ===

SUPPORT PAGE STYLE

Last Updated: 2014/07/30 (WATANABE)
======================================= */

/* ===============================

	COMMON

=============================== */

.cnts-support { margin-bottom: 0 ;}

.cnts-support ul {
	margin-bottom: 20px;
}

.cnts-support ul li {
	margin-bottom: 10px;
	list-style: disc !important;
	margin-left: 20px;
}

.cnts-support ul.menu-btn {
	margin-top: 20px;
}

.cnts-support ul.menu-btn li {
	list-style: none !important;
	margin-left: 0 !important;
}

.cnts-support ul.menu-btn li:last-child {
	margin-bottom: 0px;
}



span.notes { font-size: x-small; line-height: 1em;}

/* ===============================

	/support/index.html

=============================== */

.support-box {
	margin-bottom: 40px;
}

.support-box table {
	width: 100%;
}

.support-box table th,
.support-box table td {
	vertical-align: middle;
	padding: 10px;
	border: 2px solid #cccccc;
	line-height: 1.25em;
}

.support-box table th {
	text-align: center;
	color: #ffffff;
	background: #999999;
	font-weight: normal;
}


.support-box h3 {
	margin-bottom: 10px;
	font-size: 20px;
	color: #2f2f2f;
	line-height: 1.25em;
}

/* ===============================

	/support/cooperation.html

=============================== */

.example {
	padding: 20px;
	background: #ecf0f7;
}

.example dl {
	padding: 0px;
	margin-bottom: 10px;
}

.example dl dt {
	clear: both;
	float: left;
	width: 150px;
	margin-bottom: 10px;
	font-weight: bold;
	background: #c7d2e6;
	display: block;
	line-height: 20px;
	padding: 5px;
}

.example dl dd {
	float: left;
	width: 390px;
	margin-bottom: 10px;
	background: #ffffff;
	line-height: 20px;
	padding: 5px;
}


.example-box {
	margin-bottom: 20px;
}

.example-box h4 {
	padding-left: 30px;
	background: url(../images/support/cooperation_icon_check.png) left center no-repeat;
	font-size: 15px;
	margin-bottom: 5px;
	height: 30px;
	line-height: 30px;
}

.example-box h5 {
	font-weight: normal;
	margin-bottom: 10px;
	line-height: 1.5em;
}


/* ===============================

	/support/security.html

=============================== */


#firewall ul {
	padding-left: 110px;
	background: url(../images/support/secutiy_icon_firewall.jpg) left center no-repeat;
}

#firewall ul li {
	line-height: 1.5em;
}



#organization div { 
	padding-left: 110px;
	background: url(../images/support/secutiy_icon_organization.jpg) left top no-repeat;
}

#organization h4 {
	font-size: 15px;
	margin-bottom: 5px;
}

#pmark p {
	padding-left: 110px;
	height: 240px;
	background: url(../images/support/secutiy_icon_pmark.jpg) left center no-repeat;
}


#ssl p {
	padding-left: 110px;
	height: 80px;
	background: url(../images/support/secutiy_icon_security.jpg) left center no-repeat;
}


/* ===============================

	/support/support.html

=============================== */

#page-support #support dl {
	padding: 20px;
	margin-bottom: 20px;
} 

#page-support #support dl dt {
	font-weight: bold;
}

#page-support #support dl dt,
#page-support #support dl dd {
	margin-bottom: 10px;
	line-height: 1.5em;
}
#page-support #support dl dd:last-child {
	margin-bottom: 0;
}

#page-support #support dl.support-list {
	background: #ffffff;
	border: 1px dotted #456bac;	
}
#page-support #support dl.support-list dd {
	padding-left: 30px;
	background: url(../images/support/cooperation_icon_check.png) left center no-repeat;
	min-height: 20px;
}
<<<<<<< .mine
#page-support #support div.support-list {
	background: #ffffff;
	border: 1px dotted #456bac;	
	padding: 20px;
	margin-bottom: 20px;
}
#page-support #support div.support-list .cportal {
	margin-bottom: 10px;
	line-height: 1.5em;
	font-weight: bold;
}
=======
#page-support #support div.support-list {
	background: #ffffff;
	border: 1px dotted #456bac;	
	padding: 20px;
	margin-bottom: 20px;
}
#page-support #support div.support-list .cportal {
	margin-bottom: 10px;
	line-height: 1.5em;
	font-weight: bold;
}
#page-support #support div.support-list .cportal-img {
	margin: 0;
}
#page-support #support div.support-list .cportal-img img {
	vertical-align: top;
	margin-right: 20px; 
}
>>>>>>> .r128
#page-support #support .support-inquiry dl {
	padding: 0;
	margin-bottom: 10px;
	text-align: center;
}

#page-support #support .support-inquiry dl dt {
	clear: both;
	float: left;
	text-align: center;
	width: 100px;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
	background: #456bac;
	display: block;
	line-height: 25px;
	padding: 5px;
	border: 2px solid #456bac;
}

#page-support #support .support-inquiry dl dd {
	float: left;
	width: 200px;
	margin-bottom: 10px;
	background: #ffffff;
	line-height: 25px;
	padding: 5px;
	font-size: 15px;
	font-weight: bold;
	border: 2px solid #456bac;
	background: url(../images/price/requirement_arrow.gif) left center no-repeat;
}

#page-support #support .support-inquiry h4 {
	height: 25px;
	font-size: 18px;
	line-height: 25px;
	padding-left: 30px;
	margin-bottom: 10px;
	color: #456bac;
}

#page-support #support .support-inquiry .tel {
	background: url(../images/support/support_icon_tel.png) left center no-repeat;
}

#page-support #support .support-inquiry .mail {
	background: url(../images/support/support_icon_mail.png) left center no-repeat;
}
	
/* 20140513�NjL */

.example-customize {
	padding: 20px;
	background: #ecf0f7;
}

.example-customize dl {
	padding: 0px;
	margin-bottom: 5px;
}

.example-customize dl dt {
	clear: both;
	float: left;
	width: 150px;
	height: 80px;
	margin-bottom: 10px;
	font-weight: bold;
	background: #c7d2e6;
	display: block;
	line-height: 20px;
	padding: 5px;
}

.example-customize dl dd {
	float: left;
	width: 390px;
	height: 80px;
	margin-bottom: 10px;
	background: #ffffff;
	line-height: 20px;
	padding: 5px;
}

.example-customize dl dt.h40 {
	clear: both;
	float: left;
	width: 150px;
	height: 40px;
	margin-bottom: 10px;
	font-weight: bold;
	background: #c7d2e6;
	display: block;
	line-height: 20px;
	padding: 5px;
}

.example-customize dl dd.h40  {
	float: left;
	width: 390px;
	height: 40px;
	margin-bottom: 10px;
	background: #ffffff;
	line-height: 20px;
	padding: 5px;
}

.example-customize .example-box {
	margin-bottom: 20px;
}

.example-customize .example-box h4 {
	padding-left: 30px;
	background: url(../images/support/cooperation_icon_check.png) left center no-repeat;
	font-size: 15px;
	margin-bottom: 5px;
	height: 30px;
	line-height: 30px;
}

.example-customize .example-box h5 {
	font-weight: bold;
	margin-bottom: 10px;
}

.example-customize .example-box-inner {
	background: #FFF;
	border: 2px solid #2f2f2f;
	padding: 10px;
	box-shadow: rgba(0,0,0,0.25) 2px 2px 0px 0px;
}

.example-customize .example-box-inner p {
	margin-bottom: 0.5em;
}

.example-customize .example-box-inner ul {
	margin-bottom: 0;
	line-height: 1.5;
}

/* ===============================

	/support/customize.html

=============================== */

.customize-image {
	margin-bottom: 0;
}

.customize-image p {
	margin-bottom: 0;
}

.customize-image span {
	margin-bottom: 10px;
	display: block;
}

.customize-example-image {
	width: 200px;
	border: 2px dotted #456bac!important;
	border-radius: 5px;
	padding: 8px!important;
}

.customize-image ul {
	position: relative;
	margin-bottom: 0;
}

.customize-image ul li {
	float: left;
	list-style-type: none!important;
	margin-left: 0!important;
}

/* ===============================

	/support/guidelines.html

=============================== */
.guidelines-list { 
	background: #ecf0f7;
	padding: 15px;
	margin-bottom: 20px;
}

.guidelines-list ul { 
	margin-bottom: 0;
}

.guidelines-box table {
	width: 100%;
	line-height: 1.5em;
}

.guidelines-box table th {
	background: #456bac;
	border: 2px solid #cccccc;
	padding: 10px;
	vertical-align: middle;
	font-weight: normal;
	color: #ffffff;
}

.guidelines-box table th.level {
	width: 20%
}

.guidelines-box table td {
	border: 2px solid #cccccc;
	padding: 10px;
	vertical-align: middle;
}

.guidelines-box table .high {
	color: #ff0000;
}

.guidelines-box table .middle {
	color: #ff9900;
}

.guidelines-box table .low {
	color: #009900;
}

#page-security .side {
	width: 300px;
	float: right;
}

#page-functionsandsupport .side ul li.menu,
#page-smartphone .side ul li.menu,
#page-customize .side ul li.menu,
#page-cooperation .side ul li.menu,
#page-support .side ul li.menu,
#page-security .side ul li.menu {
	height: auto;
}

#page-functionsandsupport .side ul li.menu p,
#page-smartphone .side ul li.menu p,
#page-customize .side ul li.menu p,
#page-cooperation .side ul li.menu p,
#page-support .side ul li.menu p,
#page-security .side ul li.menu p {
	margin-bottom: 0;
	line-height: 30px;
	background: #efefef;
	padding-left: 35px;
}

#page-functionsandsupport .side ul li.menu p a,
#page-smartphone .side ul li.menu p a,
#page-customize .side ul li.menu p a,
#page-cooperation .side ul li.menu p a,
#page-support .side ul li.menu p a,
#page-security .side ul li.menu p a {
	vertical-align: middle;
	display: block;
	text-decoration: none;
}

/* ===============================

	SP

=============================== */

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

#page-functionsandsupport,
#functions-support,
#page-smartphone,
#smartphone,
#page-customize,
#customize,
#page-cooperation,
#cooperation,
#page-security,
#security,
#page-support,
#support
{
	width: 100%;
	box-sizing:border-box;
}

.contents-two-colomn .main {
	width: 100%;
	float: none;
}

.side {
	display: none;
}

#functions-support h2,
#functions-support h2 img,
#functions-support h3,
#functions-support h3 img,
#smartphone h2,
#smartphone h2 img,
#smartphone h3,
#smartphone h3 img,
#customize h2,
#customize h2 img,
#customize h3,
#customize h3 img,
#cooperation h3,
#cooperation h3 img,
#security  h3,
#security  h3 img,
#support  h3,
#support  h3 img
{
	width: 100%!important;
}

.example dl dt {
	float:none;
	width:100%;
	margin-bottom:0;
}

.example dl dd {
	float:none;
	width:100%;
}
.example-box h4 {
	height:auto;
	line-height:20px;
}
#pmark p {
	height:auto;

}
.cportal-img {
	display:none;
}
}




/* 20170322 �lj� */
/*
section.box-20170322 > div {
	letter-spacing: normal;
}
*/

.box-20170322 h4 {
	margin-top: 10px;
	font-size: 16px;
}

.box-20170322 ol.decimal {
	margin: 5px 0 20px 20px;
	line-height: 1.6;
}

.box-20170322 ol.decimal li {
	list-style: decimal;
}

.box-20170322 p:last-child {
	margin-top: 20px;
	/*
	font-size: 16px;
	*/
}






/*	security_option.html
------------------------------------------------------------------- */
.wrap-20170303 img {
	max-width: 100%;
}

.wrap-20170303 ol {
	line-height: 1.4;
}

.wrap-20170303 h3 {
	padding: 20px 0 8px;
	border-bottom: 2px solid #ccc;
	font-size: 18px;
	font-family: "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "���C���I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", "sans-serif";
}

.wrap-20170303 h4 {
	margin: 20px 0 5px;
	font-size: 14px;
}

.wrap-20170303 .dl-tbl-01 {
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-top: none;
	line-height: 1.4;
}

.wrap-20170303 .dl-tbl-01 > * {
	padding: 10px;
}

.wrap-20170303 .dl-tbl-01 dt {
	border-top: 1px solid #ddd;
	background: #eee;
}

.wrap-20170303 .dl-tbl-01 dd {
	border-top: 1px solid #ddd;
}

.wrap-20170303 table {
	margin-bottom: 10px;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	line-height: 1.4;
}

.wrap-20170303 table th,
.wrap-20170303 table td {
	border: 1px solid #ddd;
	padding: 10px;
	width: 25%;
	vertical-align: middle;
	text-align: center;
}

.wrap-20170303 table th {
	background: #eee;
	font-weight: normal;
}

.wrap-20170303 table td span {
	margin-left: 5px;
	font-size: 10px;
}

.wrap-20170303 .img-box div + p {
	margin-top: 20px;
	text-align: center;
}

.wrap-20170303 .img-box div p,
.wrap-20170303 .img-box div ul {
	margin-bottom: 10px;
}

.wrap-20170303 ul li > ul {
	margin-top: 10px;
}

/* --- SP ---------- */
@media screen and ( max-width: 768px ) {
	
	.sp-none {
		display: none;
	}
	
}

/* --- PC ---------- */
@media screen and ( min-width: 769px ) {
	
	.pc-none {
		display: none;
	}
	
	.wrap-20170303 .img-box:after {
		content: "";
		clear: both;
		display: block;
	}

	.wrap-20170303 .img-box div,
	.wrap-20170303 .img-box div + p {
		float: left;
	}

	.wrap-20170303 .img-box div {
		margin-right: 2%;
		width: 52%;
	}

	.wrap-20170303 .img-box div + p {
		width: 46%;
	}
	
}

h3.icon_ttl{
	position:relative;
	padding-left: 2em;
	font-size: 135%;
	line-height: 1.672;
	font-weight: normal;
	box-sizing: border-box;
}

h3.icon_ttl:before{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	width: 1.5em;
	height: 100%;
	display: block;
	background-size: 1.5em auto;
	background-repeat: no-repeat;
	background-repeat: no-repeat;
	background-position: left center;
}

h3.icon_ttl:after{
	content: '';
	position: absolute;
	top: calc(50% - 0.25em);
	left: 1.5em;
	border-left-width: 0.25em;
	border-left-style: solid;
	border-top: 0.25em solid transparent;
	border-bottom: 0.25em solid transparent;
}

h3.icon_ttl.green{
	color: #94c449;
	background-color: #f4f9ed;
}

h3.icon_ttl.green:before{
	background-color: #94c449;
}

h3.icon_ttl.green:after{
	border-left-color:#94c449;
}

h3.icon_ttl.green.icon_user:before{
	background-image: url(../images/support/index_h3_ttl_user.gif);
}

h3.icon_ttl.red{
	color: #e85353;
	background-color: #fceeee;
}

h3.icon_ttl.red:before{
	background-color: #e85353;
}

h3.icon_ttl.red:after{
	border-left-color:#e85353;
}

h3.icon_ttl.red.icon_form:before{
	background-image: url(../images/support/index_h3_ttl_form.gif);
}

h3.icon_ttl.yellow{
	color: #ffa030;
	background-color: #fff5ea;
}

h3.icon_ttl.yellow:before{
	background-color: #ffa030;
}

h3.icon_ttl.yellow:after{
	border-left-color:#ffa030;
}

h3.icon_ttl.yellow.icon_enquete:before{
	background-image: url(../images/support/index_h3_ttl_enquete.gif);
}

h3.icon_ttl.blue{
	color: #39b8d5;
	background-color: #ecf8fb;
}

h3.icon_ttl.blue:before{
	background-color: #39b8d5;
}

h3.icon_ttl.blue:after{
	border-left-color:#39b8d5;
}

h3.icon_ttl.blue.icon_mail:before{
	background-image: url(../images/support/index_h3_ttl_mail.gif);
}

h3.icon_ttl.gray{
	color: #666666;
	background-color: #efefef;
}

h3.icon_ttl.gray:before{
	background-color: #666666;
}

h3.icon_ttl.gray:after{
	border-left-color:#666666;
}

h3.icon_ttl.gray.icon_others:before{
	background-image: url(../images/support/index_h3_ttl_others.gif);
}

@media screen and ( min-width: 769px ) {
	h3.icon_ttl{
	font-size: 316%;
	line-height: 1.5;
	}
}