@charset "utf-8";

/*-----------------------------------------------
	index
-----------------------------------------------*/
/* secHero */
.secHero{
	background: url(../img/howto/bgHero_sp.jpg) center bottom / 100% auto no-repeat #F5F4F0;
	margin-top: 20px;
	padding-bottom: 335px;
}
.secHero .boxTxt{
	width: 92.79%;
	max-width: 340px;
	margin: 0 auto;
}
.secHero .boxTxt .tit{
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	padding-top: 60px;
	letter-spacing: 2px;
}
.secHero .boxTxt .num{
	text-align: center;
	margin-top: 20px;
}
.secHero .boxTxt .txt{
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	margin-top: 10px;
	letter-spacing: -0.5px;
}
.secHero .boxTxt .txt .brWideSp{
	display: none;
}
.imgConcept{
	width:77.72%;
	margin:30px auto;
}
@media only screen and (min-width:375px){
	.secHero .boxTxt .txt .brWideSp{
		display: inline;
	}
}
@media only screen and (min-width:768px){
	.secHero{
		background: url(../img/howto/bgHero.jpg) center top / 100% auto no-repeat #FFF;
		padding: 57.03% 0 0;
		margin-top: 18px;
	}
	.secHero .boxTxt{
		width: 100%;
		max-width: none;
	}
	.secHero .boxTxt .tit{
		font-size: 24px;
		padding-top: 0;
		letter-spacing: 2.5px;
	}
	.secHero .boxTxt .num{
		margin-top: 30px;
	}
	.secHero .boxTxt .txt{
		font-size: 16px;
		line-height: 40px;
		margin-top: 36px;
		letter-spacing: 1px;
	}
	.secHero .boxTxt .txt .brWideSp{
		display: none;
	}
	.imgConcept{
		width:740px;
		margin:90px auto;
	}
}

/* secMenu */
.secMenu{
	font-size: 0;
}
.secMenu li{
	display: inline-block;
	width: calc(33.33% - 0.67px);
	margin-right: 1.005px;
}
.secMenu li:last-child{
	margin-right: 0;
}
.secMenu li a{
	display: block;
	height: 150px;
	background: #F7F7F7;
	font-size: 14px;
	color: #000;
	text-align: center;
	text-decoration: none;
	line-height: 29px;
	padding-top: 27px;
	position: relative;
}
.secMenu li a::after{
	content: "";
	width: 12px;
	height: 7px;
	background: url(../img/howto/imgMenu.gif) center top / cover no-repeat;
	position: absolute;
	bottom: 34px;
	left: calc(50% - 6px);
}
.secMenu li a .inner{
	display: inline-block;
	vertical-align: top;
	border-bottom: 1px solid #3D3D3D;
}
@media only screen and (min-width:768px){
	.secMenu{
		margin-top: 103px;
	}
	.secMenu li{
		width: 32.03%;
		margin-right: 1.955%;
	}
	.secMenu li a{
		height: 130px;
		font-size: 16px;
		line-height: 29px;
		padding-top: 52px;
	}
	.secMenu li a::after{
		display: none;
	}
}

/* secTit */
.secTit{
	height: 130px;
	line-height: 130px;
	background: url(../img/howto/bgTit01.jpg) center top / cover no-repeat;
	color: #FFF;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}
.secTit.tit02{
	background-image: url(../img/howto/bgTit02.jpg);
	margin-top: 75px;
}
.secTit.tit03{
	background-image: url(../img/howto/bgTit03.jpg);
	margin-top: 75px;
}
@media only screen and (min-width:768px){
	.secTit{
		height: 400px;
		line-height: 400px;
		font-size: 26px;
		margin-top: 50px;
		letter-spacing: 3px;
	}
	.secTit.tit02,
	.secTit.tit03{
		margin-top: 115px;
	}
}

/* secItem */
.secItem{
	margin-top: 50px;
}
.secItem .boxItemTit{
	background: #F7F7F7;
	padding: 18px 3.125% 18px calc(3.125% + 43px);
	position: relative;
}
.secItem .boxItemTit .num{
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	background: #A08E75;
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	position: absolute;
	top: 18px;
	left: 3.125%;
}
.secItem .boxItemTit .tit{
	font-size: 16px;
	line-height: 32px;
	font-weight: 500;
	letter-spacing: 0.75px;
}
.secItem .itemWrapper{
	width: 92.79%;
	margin: 0 auto;
}
.secItem .txtItem{
	font-size: 14px;
	line-height: 24px;
	margin-top: 15px;
}
@media only screen and (min-width:768px){
	.secItem{
		margin-top: 80px;
	}
	.secItem .boxItemTit{
		padding: 28px 30px 28px 76px;
		position: relative;
	}
	.secItem .boxItemTit .num{
		top: 28px;
		left: 30px;
	}
	.secItem .boxItemTit .tit{
		font-size: 19px;
		letter-spacing: 1.5px;
	}
	.secItem .itemWrapper{
		width: 95.32%;
	}
	.secItem .txtItem{
		font-size: 16px;
		line-height: 34px;
		margin-top: 32px;
		letter-spacing: 1px;
	}
}

/* secItem01 */
.secItem01{
	margin-top: 0;
}
.secItem01 .img{
	margin-top: 25px;
}
@media only screen and (min-width:768px){
	.secItem01{
		margin-top: 80px;
	}
	.secItem01 .img{
		width: 600px;
		margin: 41px auto 0;
	}
}

/* secItem02 */
.secItem02 .boxList{
	margin-top: 25px;
}
.secItem02 .boxList li{
	display: table;
	width: 100%;
	margin-bottom: 25px;
}
.secItem02 .boxList li:last-child{
	margin-bottom: 0;
}
.secItem02 .boxList li .img{
	display: table-cell;
	width: 100px;
}
.secItem02 .boxList li .boxTxt{
	display: table-cell;
	vertical-align: middle;
	padding-left: 14px;
}
.secItem02 .boxList li .boxTxt .tit{
	font-size: 15px;
	font-weight: 500;
	color: #837259;
}
.secItem02 .boxList li .boxTxt .txt{
	font-size: 14px;
	line-height: 22px;
	margin-top: 10px;
	letter-spacing: -0.5px;
}
@media only screen and (min-width:768px){
	.secItem02 .boxList{
		margin-top: 40px;
		font-size: 0;
	}
	.secItem02 .boxList li{
		display: inline-block;
		width: 28.77%;
		margin: 0 6.845% 0 0;
	}
	.secItem02 .boxList li:last-child{
		margin-right: 0;
	}
	.secItem02 .boxList li .img{
		display: block;
		width: 180px;
		margin: 0 auto;
	}
	.secItem02 .boxList li .boxTxt{
		display: block;
		padding: 0;
	}
	.secItem02 .boxList li .boxTxt .tit{
		font-size: 18px;
		margin-top: 27px;
		text-align: center;
	}
	.secItem02 .boxList li .boxTxt .txt{
		font-size: 16px;
		line-height: 30px;
		margin-top: 17px;
	}
}

/* secItem03 */
.secItem03 .img{
	width: 77.72%;
	margin: 20px auto 0;
}
.secItem03 .txtBottom{
	font-size: 14px;
	line-height: 24px;
	color: #635645;
	text-align: center;
	margin-top: 18px;
	letter-spacing: -0.5px;
}
@media only screen and (min-width:768px){
	.secItem03 .img{
		width: 400px;
		margin-top: 40px;
	}
	.secItem03 .txtBottom{
		font-size: 16px;
		line-height: 34px;
		margin-top: 27px;
	}
}

/* secItem04 */
.secItem04{
	margin-top: 0;
}
.secItem04 .boxItemTit .num{
	background: #81CABB;
}
.secItem04 .boxProject .tit{
	width: 95.85%;
	margin: 0 auto;
	font-size: 15px;
	color: #FFF;
	line-height: 56px;
	background: #81CABB;
	text-align: center;
	border-radius: 32px;
	margin-top: 25px;
	letter-spacing: 1px;
}
.secItem04 .boxProject .txtItem{
	margin-top: 23px;
}
.secItem04 .img{
	margin-top: 25px;
}
@media only screen and (min-width:375px){
	.secItem04 .boxProject .tit{
		font-size: 16px;
	}
}
@media only screen and (min-width:768px){
	.secItem04{
		margin-top: 80px;
	}
	.secItem04 .boxProject .tit{
		font-size: 18px;
		line-height: 70px;
		border-radius: 35px;
		margin-top: 40px;
		letter-spacing: 1.5px;
	}
	.secItem04 .boxProject .txtItem{
		margin-top: 36px;
	}
	.secItem04 .img{
		width: 600px;
		margin: 41px auto 0;
	}
}

/* secItem05 */
.secItem05 .boxItemTit .num{
	background: #81CABB;
}
.secItem05 .titList{
	width: 95.85%;
	margin: 0 auto;
	font-size: 15px;
	color: #FFF;
	line-height: 56px;
	background: #81CABB;
	text-align: center;
	border-radius: 32px;
	margin-top: 25px;
}
@media only screen and (min-width:375px){
	.secItem05 .titList{
		font-size: 16px;
	}
}
@media only screen and (min-width:768px){
	.secItem05 .titList{
		font-size: 18px;
		line-height: 70px;
		border-radius: 35px;
		margin-top: 40px;
		letter-spacing: 0.5px;
	}
}

/* secItemList */
.secItemList{
	width: 83.16%;
	margin: 30px auto 0;
	font-size: 0;
}
.secItemList li{
	display: inline-block;
	vertical-align: top;
	width: 43.75%;
	margin: 0 12.5% 18px 0;
}
.secItemList li:nth-child(2n){
	margin-right: 0;
}
.secItemList li:nth-last-child(-n+2){
	margin-bottom: 0;
}
.secItemList li .txt{
	font-size: 15px;
	line-height: 22px;
	margin-top: 10px;
	text-align: center;
}
@media only screen and (min-width:768px){
	.secItemList{
		width: 1020px;
		margin-top: 45px;
	}
	.secItemList li,
	.secItemList li:nth-child(2n),
	.secItemList li:nth-last-child(-n+2){
		width: 180px;
		margin: 0 100px 0 0;
	}
	.secItemList li:last-child{
		margin-right: 0;
	}
	.secItemList li .txt{
		font-size: 16px;
		line-height: 24px;
		margin-top: 15px;
	}
	.secItemList.item2{
		width: 460px;
	}
}

/* secItem06 */
.secItem06{
	margin-top: 44px;
}
.secItem06 .boxItemTit .num{
	background: #81CABB;
}
.secItem06 .img01{
	margin-top: 25px;
}
@media only screen and (min-width:768px){
	.secItem06{
		margin-top: 80px;
	}
	.secItem06 .img01{
		width: 600px;
		margin: 41px auto 0;
	}
}

/* secItem07 */
.secItem07{
	margin-top: 0;
}
.secItem07 .boxItemTit .num{
	background: #F4AA9E;
}
.secItem07 .txtPoint{
	background: #F7F7F7;
	color: #900;
	letter-spacing: -0.5px;
	padding: 18px 5.96%;
}
.secItem07 .txtPoint .num{
	margin: 0 -3px;
}
.secItem07 .txtItem:last-child{
	margin-top: 20px;
	letter-spacing: -0.3px;
}
@media only screen and (min-width:768px){
	.secItem07{
		margin-top: 80px;
	}
	.secItem07 .txtPoint{
		letter-spacing: 0.5px;
		padding: 27px 5.96%;
	}
	.secItem07 .txtItem:last-child{
		margin-top: 40px;
		letter-spacing: 1px;
	}
}

/* secSiteList */
.secSiteList{
	background: #F8F7EF;
	margin-top: 30px;
	counter-reset: number 0;
	padding-bottom: 37px;
}
.secSiteList .tit{
	font-weight: 500;
	color: #577214;
	font-size: 16px;
	text-align: center;
	padding-top: 40px;
}
.secSiteList .boxList{
	width: 90.16%;
	margin: 25px auto 0;
}
.secSiteList .boxList li{
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 6px;
	padding-left: 20px;
	position: relative;
}
.secSiteList .boxList li:last-child{
	margin-bottom: 0;
}
.secSiteList .boxList li::before{
	counter-increment: number 1;
	content: counter(number) ". ";
	color: #577214;
	font-weight: 500;
	position: absolute;
	top: 0;
	left: 0;
}
@media only screen and (min-width:768px){
	.secSiteList{
		margin-top: 45px;
		padding-bottom: 60px;
	}
	.secSiteList .tit{
		font-size: 19px;
		padding-top: 60px;
	}
	.secSiteList .boxList{
		margin-top: 40px;
	}
	.secSiteList .boxList li{
		font-size: 16px;
		line-height: 32px;
		margin-bottom: 9px;
		padding-left: 25px;
	}
}

/* secItem08 */
.secItem08 .boxItemTit .num{
	background: #F4AA9E;
}
.secItem08 .btn a{
	display: block;
	width: 77.72%;
	max-width: 300px;
	height: 70px;
	line-height: 70px;
	text-decoration: none;
	background: #53504B;
	color: #FFF;
	font-size: 15px;
	text-align: center;
	margin: 25px auto 0;
	border-radius: 3px;
	letter-spacing: 1px;
}
@media only screen and (min-width:768px){
	.secItem08 .btn a{
		width: 375px;
		max-width: none;
		height: 90px;
		line-height: 90px;
		font-size: 18px;
		margin-top: 40px;
		letter-spacing: 2px;
	}
}

/* secItem09 */
.secItem09 .boxList{
	display: table;
	width: 100%;
	margin-top: 25px;
}
.secItem09 .boxList li{
	display: table-cell;
	width: 33.33%;
	height: 100px;
	border-right: 4px solid #FFF;
	vertical-align: middle;
	background: #F7F7F7;
	font-size: 14px;
	line-height: 1.71;
	color: #900;
	text-align: center;
}
.secItem09 .boxList li:last-child{
	border-right: none;
}
.secItem09 .btn a{
	margin-top: 29px;
}
@media only screen and (min-width:768px){
	.secItem09 .boxList{
		margin-top: 35px;
	}
	.secItem09 .boxList li{
		border-right: 6px solid #FFF;
		font-size: 16px;
		letter-spacing: 0.5px;
	}
	.secItem09 .btn a{
		margin-top: 40px;
	}
}