/* ===============================================
	guide
=============================================== */

#wrap {
background: url(../img/guide/contetitbg.jpg) no-repeat center 115px;
}

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

	#wrap {
	background: none;
	}
}

/* about
------------------------------------------------*/
#about {
text-align: center;
}

#about .secTit {
font-size: 28px;
color: #917E70;
margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
	#about {
	text-align: left;
	margin-bottom: 20px;
	}
	
	#about .secTit {
  text-align: left;
	font-size: 20px;
	margin-bottom: 10px;
	}

}

/* pgNav
------------------------------------------------*/
.pgNav {
margin: 0 0 30px;
}
.pgNav ul {
list-style: none;
margin: 0;
padding: 0;
letter-spacing: -1em;
font-size: 0;
}

.pgNav li {
letter-spacing: normal;
font-size: 14px;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: top;
margin: 0 0 0 0.45%;
padding: 0;
width: 33.0%;
height: 320px;
text-align: center;
}

.pgNav li:first-child {
margin-left: 0;
}

.pgNav01 {
background: url(../img/guide/pgnavbg_01.jpg) no-repeat center center;
}
.pgNav02 {
background: url(../img/guide/pgnavbg_02.jpg) no-repeat center center;
}
.pgNav03 {
background: url(../img/guide/pgnavbg_03.jpg) no-repeat center center;
}

.pgNav a {
color: #FFF;
display: block;
text-decoration: none;
margin: 70px auto;
padding: 30px 0;
width: 200px;
background-color: rgba(69,40,10,0.8);
box-shadow: 0 6px 6px -6px #333;
}
.pgNav a:hover {
background-color: rgba(28,106,97,0.8);
}

.pgNav a .num {
display: block;
font-size: 30px;
}

.pgNav a .tit {
font-size: 20px;
padding: 5px 0 0;
}
.pgNav a i {
display: block;
margin: 0;
padding: 5px 0 0;
}

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

	.pgNav {
	margin-bottom: 10px;
	}
	.pgNav li {
	margin: 0;
	width: 33.3%;
	height: auto;
	}
	
	.pgNav01,.pgNav02,.pgNav03 {
	background-size: cover;
	}
	
	.pgNav a {
	margin: 20px 9px;
	padding: 15px 0;
	width: auto;
	}

	.pgNav a .num {
	font-size: 26px;
	}

	.pgNav a .tit {
	font-size: 13px;
	}
	
}

/* concept
------------------------------------------------*/
#concept .read {
margin-bottom: 30px;
text-align: center;
}

.cctSecItem {
padding: 20px 0 0;
text-align: center;
}

.cctSecItem .secTit {
font-size: 22px;
margin-bottom: 30px;
}
.cctSecItem .secTit strong {
color: #694F3E;
display: inline-block;
border-top: 1px dotted #694F3E;
border-bottom: 1px dotted #694F3E;
padding: 5px;
}

.cctSec {
display: inline-block;
width: 33%;
margin: 0 auto 20px;
padding: 20px 0 0;
vertical-align: top;
}

#trialplan.cctSec {
width: 62%;
}

.cctSecImg {
width: 160px;
margin: 0 auto 15px;
}
.cctSecImg img {
width: 100%;
height: auto;
}

.cctSec h3 {
color: #694F3E;
text-align: center;
font-size: 18px;
line-height: 1.4;
}

.cctSec p {
margin: 0 15px;
text-align: left;
}


@media only screen and (max-width: 767px) {
	#concept .read {
	margin-bottom: 10px;
	text-align: left;
	}
	#concept .read br,
	.cctSec p br {
	display: none;
	}
	
	.cctSecItem .secTit {
	font-size: 20px;
	margin-bottom: 15px;
	}

	.cctSec,
	#trialplan.cctSec {
	display: block;
	width: 100%;
	margin: 0 auto 10px;
	padding-top: 10px;
	}
	
	.cctSecImg {
	width: 120px;
	}
	.cctSec p {
	margin: 0;
	}


}

/* flow
------------------------------------------------*/
#flow .read {
text-align: center;
margin-bottom: 10px;
}

/* flowSec */
ol#flowSec {
list-style: none;
margin: 0;
padding: 0;
}

ol#flowSec li {
desplay: block;
overflow: hidden;
text-align: center;
}

.flowBox {
background:url(../img/common/str_gry.png) repeat 0 0;
background-size: 24px 24px;
margin: 10px 0;
padding: 5px;
}

.flowBoxWht {
background-color: #FFF;
padding: 25px 30px;
overflow: hidden;
text-align: left;
}

.flowTxt {
float: left;
width: 240px;
}

.flowNum {
text-align: left;
}
.flowNum .num {
color: #917E70;
display: block;
font-size: 34px;
}
.flowNum strong {
display: block;
font-size: 24px;
}

.flowSuppl {
font-size: 13px;
}

.flowImg {
float: right;
width: 620px;
}
.flowImg img {
width: 100%;
height: auto;
}

#flowSec li i.fa-caret-down {
text-align: center;
font-size: 32px;
color: #917E70;
}


#flowSec .listNotes {
padding: 15px 0 0;
}

#flowSec .listNotes ul {
background-color: #E9D7D7;
list-style: disc;
list-style-type: disc;
margin: 0;
padding: 10px 10px 5px 18px;
overflow: hidden;
}

#flowSec .listNotes ul li {
text-align: left;
margin: 0 0 5px;
padding: 0;
}



@media only screen and (max-width: 767px) {
	#flow .read {
	text-align: left;
	}

	.flowBox {
	margin: 0;
	padding: 3px;
	}
	.flowBoxWht {
	padding: 18px 12px;
	}

	.flowTxt {
	float: none;
	width: auto;
	margin-bottom: 12px;
	}

	.flowNum {
	text-align: center;
	}
	.flowNum .num {
	font-size: 30px;
	}
	.flowNum strong {
	font-size: 22px;
	}

	.flowImg {
	float: none;
	width: 100%;
	}

}

/* faq */

.faq {
clear: both;
padding: 25px 0 0;
}
.faqTit {
font-size: 16px;
color: #1C6A61;
margin: 0 0 10px;
}

.faq dl {
font-size: 13px;
border: 1px dotted #1C6A61;
margin: 0 0 10px;
padding: 12px;
}

.faq dl:last-child {
margin-bottom: 0;
}

.faq dt {
margin-bottom: 5px;
}

.faq dd {
color: #1C6A61;
}

/* items
------------------------------------------------*/
#items {
margin-bottom: 40px;
overflow: auto;
}

#items dl {
margin: 0;
padding: 20px 0 0;
}


#items dt {
float: left;
display: inline-block;
font-size: 16px;
margin: 0 20px 10px 0;
padding: 0 0 5px;
border-bottom: 1px dotted #333;
width: 220px;
}

#items dd {
display: block;
margin: 0 0 5px 240px;
padding: 0;
}
#items dd p {
margin: 0 0 5px;
padding: 0;
}
#items dd ul {
margin: 0;
padding: 5px 0 0 18px;
}
#items dd li {
margin: 0 0 5px;
padding: 0;
}

.itemMemo p {
color: #917E70;
font-size: 12px;
}


@media only screen and (max-width: 767px) {
	#items dt {
	float: none;
	margin: 0 0 10px;
	width: auto;
	}

	#items dd {
	margin: 0 0 5px;
	}
}