/* topImgWrap */

.topImgWrap{
	background-image: url(../img/guide/main.jpg);
}

.topImgWrap>.topimgBox>h2{
	width: 400px;
}

/* conditionWrap */

.conditionWrap{
	margin-bottom: 45px;
}

.conditionTable{
	width: 100%;
	border: 1px solid #999;
}

.conditionTable>.left{
	width: 20%;
	background: #E6E6E6;
}

.conditionTable>.left>li{
	font-size: 14px;
	width: 100%;
	text-align: center;
	padding: 24px 0;
	border-top: 1px dotted #666;
}

.conditionTable>.left>li:first-child{
	border-top: none;
}

.conditionTable>.right{
	width: 80%;
}

.conditionTable>.right>li{
	font-size: 14px;
	width: 100%;
	padding: 24px 40px;
	border-top: 1px dotted #666;
}

.conditionTable>.right>li:first-child{
	border-top: none;
}

/* flowWrap */

.flowWrap{
	margin-bottom: 45px;
}

.flowWrap>dl{
	width: 100%;
	margin-bottom: 10px;
}

.flowWrap>dl>dt{
	width: 33%;
	min-height:95px;
	background-image: url(../img/guide/triangle.png);
	background-repeat: no-repeat;
	background-position: 50% 70%;
}

.flowWrap>dl:last-child>dt{
	background-image:none;
	min-height:30px;
}

.flowWrap>dl>dd{
	width: 67%;
	font-size: 14px;
	padding: 0 1em;
}

.flowWrap>dl>dt>p{
	width: 100%;
	background: #367330;
	color: #FFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: .5em 1em;
	font-size: 14px;
}

.flowWrap>dl>dd>ul{
	list-style:inside disc;
}

/* costWrap */

.costWrap{
	margin-bottom: 25px;
}

.costWrap.mb{
	margin-bottom: 55px;
}

.costWrap>.title{
	font-size: 18px;
}

.costTable{
	width: 100%;
	border: 1px solid #999;
}

.costTable>.left{
	width: 25%;
	background: #E6E6E6;
}

.costTable>.left>li{
	font-size: 14px;
	width: 100%;
	text-align: center;
	border-top: 1px dotted #666;
}

.costTable>.left>li>p{
	padding: .5em 0;
}

.costTable>.left>li:first-child{
	border-top: none;
}

.costTable>.left>li>div{
	width: 50%;
}

.costTable>.left>li>div:first-child{
	border-right: 1px dotted #666;
}

.costTable>.left>li>div>ul>li{
	border-top: 1px dotted #666;
}

.costTable>.left>li>div>ul>li>p{
	padding: .5em;
}

.costTable>.left>li>div>ul>li:first-child{
	border-top: none;
}

.costTable>.right{
	width: 75%;
}

.costTable>.right>li{
	font-size: 14px;
	width: 100%;
	border-top: 1px dotted #666;
}

.costTable>.right>li>div:first-child{
	width: 33%;
	border-right: 1px dotted #666;
	text-align: center;
}

.costTable>.right>li>div>p{
	padding: .5em;
}

.costTable>.right>li>div>ul>li>p{
	border-top: 1px dotted #666;
	padding: .5em;
}

.costTable>.right>li>div>ul>li:first-child>p{
	border-top: none;
}

.costTable>.right>li>div:last-child{
	width: 67%;
}

.costTable>.left p.line2{
	padding: 1em 0;
}

.costTable>.left p.line4{
	padding: 4em 0;
}

.costTable>.right p.line2{
	padding: 1em  .5em;
}

.costTable>.right>li:first-child{
	border-top: none;
}

@media screen and (min-width: 980px) {
	
	a[href^="tel:"] {color: #00f;}
}

@media screen and (max-width: 980px) {
	
	.topImgWrap{
		background-image: url(../img/guide/main.png);
	}
	
	.contentWrap>p{
		padding: 0 2.5%;
	}
	
	/* conditionWrap */
	
	.conditionTable{
		position: relative;
		width: 95%;
		margin: 0 auto;
	}
	
	.conditionTable>.left>li,
	.conditionTable>.right>li{
		padding: .5em;
	
	}
	
	/* flowWrap */
	
	.flowWrap>dl{
		width: 95%;
		position: relative;
		margin: 0 auto;
		padding-bottom: 40px;
	}
	
	/* costWrap */
	
	.costTable{
		position: relative;
		width: 95%;
		margin: 0 auto;
	}
	
	.costTable:after{
		position: absolute;
		font-family:'FontAwesome';
		content: '\f054';
		width: 1em;
		height: 1.5em;
		font-size: 30px;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		color: rgba(51,51,51,.4);
	}
	
	.costTable>.right{
		overflow-x:auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 縦長の場合 */
@media only screen and (max-width: 980px) and (orientation : portrait) {
	
	/* topImgWrap */
	
	.topImgWrap>.topimgBox>h2{
		width: 60%;
	}
	
	/* conditionWrap */
	
	.conditionTable:after{
		position: absolute;
		font-family:'FontAwesome';
		content: '\f054';
		width: 1em;
		height: 1.5em;
		font-size: 30px;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		color: rgba(51,51,51,.4);
	}
	
	.conditionTable>.left{
		width: 40%;
	}
	
	.conditionTable>.left>li{
		width: 100%;
	}
	
	.conditionTable>.right{
		width: 60%;
		max-width: 60%;
		overflow-x:auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.conditionTable>.right>li{
		width: 240%;
	}

	/* flowWrap */
	
	.flowWrap{
		margin-bottom: 45px;
	}
	
	.flowWrap>dl:after{
		content: '';
		position: absolute;
		bottom: 5px;
		left: 0;
		right: 0;
		margin: auto;
		width: 88px;
		height: 28px;
		background-image: url(../img/guide/triangle.png);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		-webkit-background-size: contain;
		background-size: contain;
	}
	
	.flowWrap>dl:last-child:after{
		width: 0;
		height: 0;
	}
	
	.flowWrap>dl>dt{
		width: 100%;
		min-height:3em;
		background-image: none;
	}
	
	.flowWrap>dl:last-child>dt{
		background-image:none;
		min-height:30px;
	}
	
	.flowWrap>dl>dd{
		width: 100%;
		padding: 0 1em;
	}
	
	.flowWrap>dl>dt>p{
		padding: .5em 1em;
	}
	
	/* costWrap */
	
	.costTable>.left{
		width: 50%;
	}
	
	.costTable>.right{
		width: 50%;
		max-width: 50%;
	}
	
	.costTable.basic>.right>li{
		width: 350%;
	}
	
	.costTable.basic>.right>li>div:first-child{
		width: 20%;
	}
	
	.costTable.basic>.right>li>div:last-child{
		width: 80%;
	}
	
	.costTable.service>.right>li{
		width: 250%;
	}
	
	.costTable.service>.right>li>div:first-child{
		width: 30%;
	}
	
	.costTable.service>.right>li>div:last-child{
		width: 70%;
	}
	
	.costTable.special>.right>li{
		width: 400%;
	}
	
	.costTable.special>.right>li>div:first-child{
		width: 23%;
	}
	
	.costTable.special>.right>li>div:last-child{
		width: 77%;
	}
}

/* 横長の場合 */
@media only screen and (max-width: 980px) and (orientation : landscape) {
	/* topImgWrap */
	
	.topImgWrap>.topimgBox>h2{
		font-size: 20px;
		width: 45%;
	}
	
	/* conditionWrap */
	
	.conditionTable>.left{
		width: 18%;
	}
	
	.conditionTable>.right{
		width: 82%;
		max-width: 82%;
	}

	/* flowWrap */
	
	/* costWrap */
	
	.costTable>.left{
		width: 30%;
	}
	
	.costTable>.right{
		width: 70%;
		max-width: 70%;
	}
	
	.costTable.basic>.right>li{
		width: 150%;
	}
	
	.costTable.basic>.right>li>div:first-child{
		width: 25%;
	}
	
	.costTable.basic>.right>li>div:last-child{
		width: 75%;
	}
	
	.costTable.service>.right>li{
		width: 120%;
	}
	
	.costTable.service>.right>li>div:first-child{
		width: 30%;
	}
	
	.costTable.service>.right>li>div:last-child{
		width: 70%;
	}
	
	.costTable.special>.right>li{
		width: 180%;
	}
	
	.costTable.special>.right>li>div:first-child{
		width: 23%;
	}
	
	.costTable.special>.right>li>div:last-child{
		width: 77%;
	}
}