@charset "utf-8";
/*------------------------------------------------------------
	トップページ
------------------------------------------------------------*/
.mainImg {
	margin-bottom: 31px;
	background-image: url(../img/space/main_img.jpg);
}

#main .topBox {
	padding: 0 18px 4px;
	margin-bottom: 52px;
	border: 2px solid #FFD43B;
	border-radius: 10px;
}

#main .topBox .txtBox {
	width: 612px;
	float: left;
}

#main .topBox .txtBox p {
	text-align: justify;
}

#main .topBox .txtBox .ttl {
	margin: 0 0 17px -18px;
	padding: 13px 0;
	font-size: 2rem;
	color: #000;
	text-align: center;
	background: url("../img/common/com_bg01.jpg") repeat left top;
	background-size: auto 20px;
	border-bottom: 2px solid #FFD43B;
	border-right: 2px solid #FFD43B;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

#main .topBox .photo {
	margin: 7px -5px 0 0;
	width: 218px;
	float: right;
}

#main .sec01 .headLine01 {
	margin-bottom: 27px;
}

#main .sec01 {
	margin-bottom: 54px;
}

#main .sec01 ul {
	margin-top: -30px;
}

#main .sec01 ul li {
	margin-top: 30px;
	width: 437px;
	float: left;
}

#main .sec01 ul li:nth-child(2n) {
	float: right;
}

#main .sec01 ul li .photo img {
	width: 100%;
}

#main .sec01 ul li .txtBox {
	padding: 10px 14px;
	border: 2px solid #FFD43B;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

#main .sec01 ul li .txtBox p {
	text-align: justify;
}

#main .sec01 ul li .txtBox .title {
	margin-bottom: 7px;
	font-size: 1.6rem;
	color: #000;
}

#main .sec02 .headLine01 {
	margin-bottom: 6px;
}

#main .sec02 .textBox {
	margin-bottom: 30px;
	padding-bottom: 10px;
	border: 2px solid #FFD43B;
	border-radius: 10px;
}

#main .sec02 .textBox .ttl {
	padding: 13px 0;
	font-size: 2rem;
	color: #000;
	text-align: center;
	background: url("../img/common/com_bg01.jpg") repeat left top;
	background-size: auto 20px;
	border-bottom: 2px solid #FFD43B;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#main .sec02 .textBox .imgBox {
	padding: 17px 15px 0 44px;
}

#main .sec02 .textBox .imgBox p {
	width: 525px;
	text-align: justify;
	float: right;
}

#main .sec02 .textBox .imgBox .img {
	width: 262px;
	float: left;
}

#main .sec02 .txtBox {
	padding-left: 80px;
	position: relative;
	box-sizing: border-box;
}

#main .sec02 .txtBox:before {
	position: absolute;
	left: 5px;
	top: 5px;
	background: url("../img/space/num02.png") no-repeat;
	background-size: 50px 46px !important;
	width: 50px;
	height: 46px;
	content: "";
}

#main .sec02 .txtBox p {
	text-align: justify;
}

#main .sec02 .txtBox .ttl {
	margin-bottom: 7px;
	font-size: 1.6rem;
	color: #000;
}

#main .sec02 .imgSub {
	margin-bottom: 46px;
}

#main .sec02 .imgSub .txtBox {
	margin-top: -4px;
	width: 495px;
	float: left;
}

#main .sec02 .imgSub .txtBox:before {
	background-image: url("../img/space/num01.png");
}

#main .sec02 .imgSub .photo {
	width: 374px;
	float: right;
}

#main .sec02 .btmUl {
	width: 780px;
	margin: 81px auto 0;
}

#main .sec02 .btmUl li {
	float: left;
	width: 100px;
	height: 100px;
	display: table;
	position: relative;
	border-radius: 100px;
	border: 2px solid #ABD25E;
	box-sizing: border-box;
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

#main .sec02 .btmUl li:first-child:after {
	background: url("../img/space/img02.png") no-repeat;
	background-size: 121px 91px;
	width: 121px;
	height: 91px;
	position: absolute;
	top: -63px;
	right: -95px;
	content: "";
}

#main .sec02 .btmUl li:nth-child(3):after {
	background: url("../img/space/img03.png") no-repeat;
	background-size: 121px 91px;
	width: 121px;
	height: 91px;
	position: absolute;
	top: -63px;
	right: -95px;
	content: "";
}

#main .sec02 .btmUl li:before {
	position: absolute;
	right: -62px;
	top: 30px;
	width: 53px;
	height: 39px;
	background: url("../img/space/icon01.png") no-repeat;
	background-size: 53px 39px;
	content: "";
}

#main .sec02 .btmUl li:last-child:before {
	background: none;
}

#main .sec02 .btmUl li:not(:last-child) {
	margin-right: 70px;
}

#main .sec02 .btmUl li span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 1.8rem;
	color: #646464;
	line-height: 1.27;
}

@media all and (max-width: 767px) {
	.mainImg {
		background-image: url(../img/space/sp_main_img.jpg);
	}
	
	#main .topBox {
		padding: 0 10px 4px;
		margin-bottom: 52px;
	}

	#main .topBox .txtBox {
		width: auto;
		float: none;
	}

	#main .topBox .txtBox .ttl {
		margin: 0 -10px 10px;
		padding: 7px 0;
		font-size: 2rem;
		border-right: none;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 0;
	}

	#main .topBox .photo {
		margin: 7px 0 0;
		width: auto;
		float: none;
		text-align: center;
	}
    
    #main .topBox .photo img {
        width: 60%;
    }

	#main .sec01 {
		margin-bottom: 54px;
	}
	
	#main .sec01 ul {
		margin-top: 0;
	}

	#main .sec01 ul li {
		width: auto;
		float: none !important;
	}

	#main .sec02 .headLine01 {
		margin-bottom: 6px;
	}

	#main .sec02 .textBox {
		margin-bottom: 30px;
		padding-bottom: 10px;
	}

	#main .sec02 .textBox .ttl {
		padding: 4px 10px;
	}

	#main .sec02 .textBox .imgBox {
		padding: 15px 15px 0;
	}

	#main .sec02 .textBox .imgBox p {
		width: auto;
		float: none;
	}

	#main .sec02 .textBox .imgBox .img {
		width: auto;
		float: none;
		text-align: center;
	}

	#main .sec02 .txtBox {
		padding-left: 40px;
	}

	#main .sec02 .txtBox:before {
		background-size: 30px auto !important;
		width: 30px;
		height: 30px;
	}

	#main .sec02 .imgSub .txtBox {
		margin-top: 0;
		width: auto;
		float: none;
	}

	#main .sec02 .imgSub .photo {
		margin-top: 15px;
		width: auto;
		float: none;
		text-align: center;
	}
	
	#main .sec02 .btmUl {
		width: auto;
		margin: 81px auto 0;
	}

	#main .sec02 .btmUl li {
		float: none;
		margin: 0 auto;
	}

	#main .sec02 .btmUl li:first-child:after {
		background: url("../img/space/sp_img02.png") no-repeat;
		background-size: 135px 78px;
		width: 135px;
		height: 78px;
		top: 80px;
		right: -95px;
	}

	#main .sec02 .btmUl li:nth-child(3):after {
		background: url("../img/space/sp_img01.png") no-repeat;
		background-size: 135px 78px;
		width: 135px;
		height: 78px;
		top: 80px;
		right: -95px;
	}

	#main .sec02 .btmUl li:before {
		right: 50%;
        margin-right: -10px;
        top: inherit;
        bottom: -30px;
        width: 20px;
        height: 26px;
        background: url("../img/space/sp_icon01.png") no-repeat;
        background-size: auto;
        background-size: 20px 26px;
	}

	#main .sec02 .btmUl li:not(:last-child) {
		margin: 0 auto 35px;
	}

}

@media all and (-ms-high-contrast:none){
    #main .topBox .txtBox .ttl {
        padding: 21px 0 5px;
    }
    
    #main .sec01 ul li .txtBox {
        padding: 16px 14px 4px;
    }
    
    #main .sec02 .textBox .ttl {
        padding: 22px 0 4px;
    }
    
    #main .sec02 .btmUl li span {
        padding-top: 5px;
    }
    
    #main .sec02 .txtBox .ttl {
        margin-top: 6px;
    }
}