@charset "UTF-8";
h2{
	color: #eb3c00;
	font-weight: bold;
	font-size: 50px;
	margin: 20px;
}
section{
	margin-bottom: 100px;
}
header section{
	margin: 0;
}
.mv-area{
	width: 100%;
	margin: 60px auto 20px;
	background-color: #f2572e;
}
.mv{
    text-align: center;
}
.pc{
	display: block;
}
.sp{
	display: none;
}

.icon-sp{
	display: none;
}
.mv .pc img{
	max-width: 100%;
}

.breadcrumbs{
	margin: 0;
	position: relative;
}
.p-common-breadcrumbs {
    bottom: 50px;
    right: 0;
    letter-spacing: -.4em;
    top: 10px;
	text-align: right;
}
.lead{
	width: 960px;
	margin: 30px auto 80px;
	text-align: center;
	font-size: 20px;
}
.lead .small{
	text-align: left;
	font-size: 16px;
}

.p-vps-bg--light{
	background-color: #fff;
}
.main{
	width: 960px;
	margin: 0 auto;
	background-color: #fff;
	text-align: center;
}
.contents-area{
	text-align: center;
	background-color: #c9e8ff;
	padding: 50px 20px;
}
.contents-area h2{
	width: 960px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 45px;
}
.contents-area .icon-pc{
	width: 960px;
	margin: 0 auto;
	display: flex;
}
.contents-area ul li{
	margin: 15px;
}
.contents-area ul li a:hover{
	opacity: 0.8;
}
.box{
	width: 80%;
	border: solid 4px #f2572e;
	border-radius: 10px;
	padding: 40px 20px 60px;
	margin: 50px auto 10px;
}
.box img{
	width: 90%;
}
h3 {
	font-size: 22px;
	font-weight: bold;
	margin: 20px 0;
}
.left-text{
	width: 85%;
    margin: 10px auto;
	text-align: left;
	word-break: break-all;
}
.trial-conditions{
	width: 95%;
    margin: 50px auto;
}
.trial-conditions-p{
	line-height: 1.5;
	text-align: left;
	margin-bottom: 30px;
}
.trial-conditions-p li{
	margin-bottom: 20px;
}

.try-text{
	width: 95%;
	font-size: 25px;
	margin: 50px auto 0;
	word-break: keep-all;
}

.try-text span{
	font-size: 34px;
	font-weight: bold;
	color: #eb3c00;
}
.box2{
	background-color: #eef6f6;
	padding: 50px 20px;
	width: 90%;
	margin: 0 auto 50px;
}
.box2 p{
	text-align: left;
	margin: 0 auto;
}
.box2-text{
	width: 95%;
	margin: 0 auto;
}
.box2-text table{
	width: 100%;
    margin: 20px auto;
}

.p-plan-list-item__price-caption{
	background-color: #eb3c00;
}
.c-bg--white{
	color: #eb3c00;
    font-size: 15px;
    text-align: left;
}
.box2-text table td{
	color: #eb3c00;
	margin-top: 20px;
}

.graph{
	width: 95%;
	margin: 30px auto;
}
.graph .trial-conditions-title{
	font-weight: bold;
	background-color: #c9e8ff;
	padding: 15px 20px;;
	text-align: center;
}
.graph .trial-conditions-text{
	background-color: #fff;
	padding: 20px;
	text-align: center;
}
#office04 h3{
	margin-top: 70px;
}

.float{
	overflow:hidden;
	width: 80%;
	margin: 20px auto;
}
.float .float-left{
	float: left;
	width: 45%;
	text-align: left;
}
.float .float-right{
	float: right;
	width: 45%;
	text-align: left;
}
.box3-area{
	margin: 70px 0;
}
.box3{
	margin-bottom: 30px;
	text-align: left;
}
.box3-title01{
	border-bottom: solid 2px #eb3c00;
	padding: 20px 0;
	font-weight: bold;
	color: #eb3c00;	
	background: url("img/op_office/icon_credit.png") left /60px auto no-repeat;
    line-height: 1.3;
    padding-left: 70px;
	font-size: 22px;
}
.box3-title02{
	border-bottom: solid 2px #eb3c00;
	padding: 20px 0;
	font-weight: bold;
	color: #eb3c00;	
	background: url("img/op_office/icon_convenience.png") left /60px auto no-repeat;
    line-height: 1.3;
    padding-left: 70px;
	font-size: 22px;
}
.box3-title03{
	border-bottom: solid 2px #eb3c00;
	padding: 20px 0;
	font-weight: bold;
	color: #eb3c00;	
	background: url("img/op_office/icon_payment.png") left /60px auto no-repeat;
    line-height: 1.3;
    padding-left: 70px;
	font-size: 22px;
}
.box3-title04{
	border-bottom: solid 2px #eb3c00;
	padding: 20px 0;
	font-weight: bold;
	color: #eb3c00;	
	background: url("img/op_office/icon_agreement.png") left /60px auto no-repeat;
    line-height: 1.3;
    padding-left: 70px;
	font-size: 22px;
}
.box3-title05{
	border-bottom: solid 2px #eb3c00;
	padding: 20px 0;
	font-weight: bold;
	color: #eb3c00;	
	background: url("img/op_office/icon_cancel.png") left /60px auto no-repeat;
    line-height: 1.3;
    padding-left: 70px;
	font-size: 22px;
}
.box3-text{
	padding: 20px 10px;

}
.p-common-contact{
	margin: 0;
}	
.icon-sp .left{
	float: left;
	width: 48%;
	margin: 5px auto 0;

}
.icon-sp .right{
	float: right;
	width: 48%;
	margin: 5px auto 0;
}
.icon-sp{
	overflow: hidden;
}
.image01{
	margin-top: 30px;
}


/*  table  layout  template  */

.c-table  {
	width: 830px;
	margin: 0 auto;
    border-collapse:  collapse;
    border:  solid  2px  #c9e8ff;
}

.c-table  th,
.c-table  td  {
    padding:  8px  20px;
	text-align: center;
}
.c-table  th  {
	width: 30%;
	padding:  15px 20px;
    border:  solid  1px  #c9e8ff;
    background-color:  #c9e8ff;
}
.c-table  td  {
    padding:  15px 20px;
	line-height: 1.5;
}


@media screen and (max-width: 48em)
{
.main{
	width: 100%;
    margin: 0 auto;	
}
.main p{
	font-size: 16px;
	margin: 0 auto;
	}
.main p b{
	font-size: 16px;
	}	
h2{
	font-size: 37px;
	line-height: 1.3;
	}
h3{
	line-height: 1.3;
	}	
.pc{
	display: none;
}
.sp{
	display: block;
	width: 100%;
}
.contents-area .icon-pc{
	display: none;
}
.icon-sp{
	display: block;
    width: 80%;
    margin: 20px auto;
}	
.float{
	width: 100%;
    margin: 20px auto 50px;
	
}	
.float .float-left{
	float: none;
	width: 90%;
	margin:  10px auto;
}
.float .float-right{
	float: none;
	width: 90%;	
	margin:  0 auto;	
}
.lead{
	width: 95%;
    margin: 30px auto 80px;
}
.contents-area h2{
	width: 100%;

}

.c-table  {
	width: 90%;
}	
.try-text span{
	font-size: 28px;
}
#office01,#office02,#office03,#office04{
	width: 95%;
	margin: 0 auto 100px;
	}
.box{
	padding: 20px 20px 40px;
	border: solid 2px #f2572e;
	}	

.box3-title01, .box3-title02, .box3-title03, .box3-title04, .box3-title05 {
	line-height: 1.8;
	font-size: 20px;
	}
.trial-conditions-p li {
    font-size: 16px;	
}
.lead-text{
	font-size: 18px;
	}	
	}