body {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
.container {
	width: 980px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.col-12{
	webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}
.col-7{
	webkit-box-flex: 0;
	-ms-flex: 0 0 55.333%;
	flex: 0 0 55.333%;
	max-width: 55.333%;
	padding-right: 15px;
	padding-left: 15px;
}
.col-6{
	webkit-box-flex: 0;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	padding-right: 15px;
	padding-left: 15px;
}
.col-5{
	webkit-box-flex: 0;
	-ms-flex: 0 0 44.667%;
	flex: 0 0 44.667%;
	max-width: 44.667%;
	padding-right: 15px;
	padding-left: 15px;
}
.col-4{
	webkit-box-flex: 0;
	-ms-flex: 0 0 33.33333%;
	flex: 0 0 33.33333%;
	max-width: 33.33333%;
	padding-right: 15px;
	padding-left: 15px;
}
/*既存CSSをリセット*/
.suiteproWrap h2,.suiteproWrap h3,.suiteproWrap h4{
	margin:0;
	padding:0;
}
sup{
	font-size:60%;
}
@media (max-width: 768px) {
	img{
		width:100%;
	}
	.container{
		width:540px;
	}
	.col-7,.col-6,.col-5,.col-4{
		webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 15px;
		padding-left: 15px;
	}
	.d-none {
		display: none !important;
	}
}
@media (max-width: 540px) {
	.container{
		width:100%;
	}
}
/* 一番上
---------------------------------------- */
.promotion.home{
	background:#f5f5f5;
	padding:50px 0;
}
.promotion{
	background:#d6eaec;
	padding:50px 0;
}
.promotion h1{
	margin:0;
	text-align:left;
	margin-bottom:20px;
}
.promotion p{
	margin-bottom:20px;
}
.promotion .read{
	font-size:20px;
	margin-bottom:10px;
	font-weight:bold;
}
.promotion .note{
	font-size:12px;
}
.promotion .btn a{
	cursor: pointer;
	font-size: 18pt;
	padding: 15px 20px;
	border-radius: 10px;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	background:#215968;
	font-weight:bold;
	border-radius:10px;
}
.promotion .btn a{
	color:#fff;
}
.promotion .btn a:hover{
	background:#338a9f;
}
@media (max-width: 768px) {
	.promotion .btn{
		text-align:center;
	}
}
@media (max-width: 540px) {
	.promotion .read{
		font-size:18px;
	}
	.promotion .btn a{
		font-size:14px;
	}

}
/* リード文
---------------------------------------- */
.readArea{
	padding:30px 0;
	text-align:center;
	color:#215968;
	font-size:20px;
}
.readArea .large{
	font-size:26px;
	font-weight:bold;
	margin-top:10px;
}

@media (max-width: 540px) {
	.readArea{
		font-size:18px;
	}
	.readArea .large{
		font-size:20px;
	}
}
/* 3つの理由
---------------------------------------- */
.threeReasons{
	background:#ebf1de;
	padding:50px 0;
	text-align:center;
}
.threeReasons h2{
	margin-bottom:30px;
}
.threeReasons .read{
	max-width:874px;
	font-size:18px;
	color:#205967;
	text-align:left;
	margin: 0 auto 30px;
}
.threeReasons .row p{
	text-align:left;
	padding:20px 20px 0;
}
@media (max-width: 768px) {
	.threeReasons .row img{
		width:50%;
	}
}

@media (max-width: 540px) {
	.threeReasons{
		padding:50px 0 30px;
	}
	.threeReasons .row img{
		width:80%;
	}
	.threeReasons .read{
		font-size:18px;
	}
	.threeReasons .row p{
		padding:20px;
	}
}

/* WebARENA SuitePR V4 標準機能
---------------------------------------- */
.standardFeature{
	background:#215968;
	padding:50px 0;
	text-align:center;
}
.standardFeature h2{
	color:#fff;
	font-size:30px;
	font-weight:bold;
}
.standardFeature .imgArea{
	margin:20px auto;
}
.standardFeature p{
	color:#fff;
}
.standardFeature p a{
	color:#FFC51E;
	text-decoration:underline;
}
@media (max-width: 540px) {
	.standardFeature h2{
		font-size:22px;
	}
}
/* SuitePRO V4の料金
---------------------------------------- */
.sp_chart{
	background: #f5f5f5;
	padding: 50px 0;
}
.sp_chart_outer {
	width: 982px;
	margin: 0 auto;
}
.sp_chart h2 {
	font-size:30px;
	text-align:center;
	font-weight:bold;
	margin-bottom:20px;
	color:#205967;
}
.sp_chart table {
	border:2px solid  #c1c1c1;
}
.sp_chart table th,.sp_chart table td{
	padding:0;
	margin:0;
	border: 2px solid #c1c1c1;
}
.sp_chart table thead th img{
	vertical-align:middle;
}
.sp_chart table tbody th{
	background: #185661;
	border-bottom: 2px solid #c1c1c1;
	text-align: left;
	padding: 0 0 0 10px;
	font-weight: bold;
	color: #fff;
	vertical-align:middle;
}
.sp_chart table tbody td{
	padding:15px;
	background:#fff;
}
.sp_chart .sp_marker {
	background: #ffc71e;
}
.sp_chart .red {
	color: #FF0000 !important;
}
.sp_chart .fs20 {
	font-size: 1.25rem !important;
}
.sp_chart .bold, .sp_chart .fwB {
	font-weight: bold !important;
}
.sp_chart .fs28 {
	font-size: 1.75rem !important;
}
.sp_chart .fs21 {
	font-size: 1.3125rem !important;
}
.sp_chart .dpb {
	display: block;
	text-align: center;
}
.sp_chart .fs12 {
	font-size: 0.75rem !important;
}
.sp_chart .sp_chart_notes {
	margin: 5px 0 0 0;
	font-size: 10px;
}
@media (max-width: 768px) {
	.sp_chart_outer {
		width: auto;
		margin: 0 15px;
	}
	.sp_chart .scrollOuter {
		position: relative;
	}

	.sp_chart .scrollOuterPrice {
		height: 390px;
	}
	.sp_chart .scrollOuter::after {
		background: linear-gradient(to right, rgba(245,245,245,0), rgba(245,245,245,1));
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 23px;
	}

	.sp_chart .scrollInner {
		left: 0;
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.sp_chart .scrollInner .sp_chart_inner {
		width: 1000px;
		transform-origin: left top;
		transform: scale(.7);
		white-space: nowrap;
	}

	.sp_chart .scrollInner .sp_chart_inner table {
		margin-right: 50px;
	}
	
	.menuImg img{
		width:80%;
	}
}
.sp_chart table tr th.recommend02 {
	position: relative;
}
.sp_chart table tr th.recommend02::after{
	content: url(/content/dam/nttcom/hq/jp/business/lp/s1/images/suitepro/label.png);
	position: absolute;
	top: -4px;
	left:-55px;
	padding: 0;
	line-height: 1;
}
.sp_chart .btn{
	text-align:center;
	margin-top:20px;
}
.sp_chart .btn a{
	cursor: pointer;
	font-size: 18pt;
	padding: 15px 20px;
	border-radius: 10px;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	background:#215968;
	font-weight:bold;
	border-radius:10px;
}
.sp_chart .btn a{
	color:#fff;
}
.sp_chart .btn a:hover{
	background:#338a9f;
}
@media (max-width: 540px) {
	.sp_chart .btn a{
		font-size:14px;
	}
	.sp_chart h2{
		font-size:22px;
	}
}

/* WebARENA SuitePR V4 基本スペック
---------------------------------------- */
.spec{
	padding: 50px 0;
}
.spec h2{
	text-align:center;
	margin-bottom:20px;
	font-weight:bold;
	font-size:30px;
	color:#205967;
}
.spec table{
	width:900px;
	margin:0 auto 20px;
}
.spec table th{
	font-weight:bold;
	color:#0c4d58;
	background:#f5f5f5;
}
.spec table td{
	background:#fff;
}
.spec .note{
	width:900px;
	margin:0 auto;
}
@media (max-width: 768px) {
	.spec table,.spec .note{
		width:100%;
	}
}
@media (max-width: 540px) {
	.spec h2{
		font-size:22px;
	}
}
/* 構築例
---------------------------------------- */
.example01{
	padding: 50px 0;
	background:#31859c;
}
.example02{
	padding: 50px 0;
	background:#215968;
}
.example01 h2,.example02 h2{
	color:#fff;
	text-align:center;
	margin-bottom:20px;
	font-weight:bold;
	font-size:30px;
	line-height:1.5;
}
.exampleBox{
	background:#fff;
	border-radius:10px;
	width:1000px;
	margin:0 auto;
	padding:45px;
}
.exampleBox .exampleRead{
	font-size:20px;
	margin-bottom:20px;
}
.exampleBox .exampleImg{
	text-align:center;
	margin-bottom:20px;
}
.exampleBox table{
	width:100%;
}
.exampleBox table th{
	color: #0c4d58;
	font-weight:bold;
	background:#f5f5f5;
	text-align:center;
}
.exampleBox table td{
	line-height:1.5;
}
.exampleBox  h3{
	font-size:20px;
	margin-bottom:20px;
	font-weight:bold;
}
.exampleBox  .red{
	color:#ff0000;
}
.exampleBox .note {
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.wp70 {
	width: 70% !important;
}
.wp25 {
	width: 25% !important;
}
.wp15 {
	width: 15% !important;
}
@media (max-width: 768px) {
	.exampleBox{
		width:100%;
	}
	.exampleBox .scrollOuter {
		position: relative;
		height: 300px;
	}
	.example02 .exampleBox .scrollOuter {
		height: 260px;
	}
	.exampleBox .scrollOuter::after {
		background: linear-gradient(to right, rgba(245,245,245,0), rgba(245,245,245,1));
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 23px;
	}

	.exampleBox .scrollInner {
		left: 0;
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.exampleBox .scrollInner .exampleBox_inner {
		width: 1000px;
		transform-origin: left top;
		transform: scale(.7);
		white-space: nowrap;
	}

	.exampleBox .scrollInner .exampleBox_inner table {
		margin-right: 50px;
	}
	.exampleBox .note{
		font-size:14px;
	}
}
@media (max-width: 540px) {
	.exampleBox{
		padding:20px;
	}
	.example01 h2,.example02 h2{
		font-size:22px;
	}
	.exampleBox .exampleRead{
		font-size:16px;
	}
	.exampleBox  h3{
		font-size:18px;
	}
}
/* description
---------------------------------------- */
.description{
	padding: 50px 0 20px;
	background:#f5f5f5;
	text-align:center;
}
.description h2{
	margin-bottom:30px;
}
.description h3{
	font-weight:bold;
	font-size:26px;
	margin-bottom:20px;
}
.description p{
	font-size:20px;
	width:874px;
	margin:0 auto 30px;
	text-align:left;
}
@media (max-width: 768px) {
	.description{
		width:100%;
	}
	.description h3{
		font-size:24px;
	text-align:left;
	}
	.description p{
		width:100%;
		font-size:18px;
	}
}
/* closing
---------------------------------------- */
.closing{
	padding: 50px 0 20px;
}
.closing p{
	font-size:12px;
	margin-bottom:130px;
}
@media (max-width: 768px) {
	.closing p{
		margin-bottom:50px;
	}
}