@charset "UTF-8";

/***************************************************

	SHELD TOP

***************************************************/

#toppage_wrapp{
	max-width: 1200px;
	margin: 70px auto 140px;
	padding: 0 20px;
	position: relative;
}

#toppage_wrapp h1{
	text-align: center;
    margin: 0 0 80px;
}

#toppage_wrapp h1 span{
	display: inline-block;
    font-size: 33px;
    color: #418A5B;
    line-height: 1;
    position: relative;
}

#toppage_wrapp h1 span::after,
#toppage_wrapp h1 span::before{
	content: "";
	display: inline-block;
	width: 9px;
	height: 27px;
	border-radius: 2px;
	background: #418A5B;
	position: absolute;
	top: 0;
}

#toppage_wrapp h1 span::before{
	left: -25px;
}

#toppage_wrapp h1 span::after{
	right: -25px;
}


#toppage_wrapp .top_link > ul > li{
	float: left;
	width: 23%;
	margin: 0 2.6% 30px 0;
}

#toppage_wrapp .top_link > ul > li:nth-child(4n+4){
	margin-right: 0;
}

#toppage_wrapp .top_link > ul > li .top_linkcont{
	padding: 18px;
	border: 3px solid #418A5B;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp{
	text-align: center;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .text_area{
	margin: 0 0 18px;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .image_area{
	width: 100%;
	margin: 0 auto;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .image_area img{
	width: 100%;
	height: auto;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .main{
	font-size: 24px;
	color: #418A5B;
	font-weight: bold;
	letter-spacing: 0.5px;
	margin: 0 0 8px;
}


#toppage_wrapp .top_link > ul > li .top_linkcont:hover{
	background: #418A5B;
}

#toppage_wrapp .top_link > ul > li .top_linkcont:hover .cont_wrapp .sub,
#toppage_wrapp .top_link > ul > li .top_linkcont:hover .cont_wrapp .main{
	color: #fff;
}


.topcont_sub_menu{

}

.topcont_sub_menu .navi_back{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	visibility: hidden;
	background: rgba(11,11,11,0);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.topcont_sub_menu.active .navi_back{
	visibility: visible;
	background: rgba(11,11,11,0.8);
}


.topcont_sub_menu .sub-list{
	display: none;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
	padding: 18px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999;
	transform:translate(-50%,-50%);
}

.topcont_sub_menu.active .sub-list{
	display: block;
}

.topcont_sub_menu.active .sub-list .close{
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 16px;
	background: #fff;
	border-radius: 50%;
	border: 2px solid #e5e5e5;
	position: absolute;
	top: -13px;
	right: -13px;
	text-align: center;
	font-size: 23px;
	cursor: pointer;
}

.topcont_sub_menu .sub-list li{
	border-bottom: 1px solid #e5e5e5;
}

.topcont_sub_menu .sub-list li:last-child{
	border-bottom: none;
}

.topcont_sub_menu .sub-list li a{
    display: block;
    line-height: 1.3;
    position: relative;
    font-size: 16px;
    padding: 8px 20px 8px 8px;
    color: #757575;
    text-decoration: none;
}

.topcont_sub_menu .sub-list li a:before {
    content: '';
    width: 0;
    height: 0;
    border: solid 3px transparent;
    border-left: solid 4px #82828b;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}



/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media (max-width: 767px) {

#toppage_wrapp{
	margin: 30px auto 60px;
	padding: 0;
}

#toppage_wrapp h1{
   margin: 0 0 40px;
}

#toppage_wrapp h1 span{
    font-size: 20px;
}

#toppage_wrapp h1 span::after,
#toppage_wrapp h1 span::before{
	width: 9px;
	height: 20px;
}

#toppage_wrapp h1 span::before{
	left: -20px;
}

#toppage_wrapp h1 span::after{
	right: -20px;
}


#toppage_wrapp .top_link{
	margin: 0 6%;
}

#toppage_wrapp .top_link > ul > li{
	float: none;
	width: 80%;
	margin: 0 auto 30px;
}

#toppage_wrapp .top_link > ul > li:nth-child(4n+4){
	margin-right: auto;
}

#toppage_wrapp .top_link > ul > li .top_linkcont{
	padding: 8px;
	border: 2px solid #418A5B;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp{
	text-align: left;
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .text_area{
	margin: 0;
	width: 70%;
	padding: 0 0 0 5%;
	box-sizing: border-box;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .image_area{
	width: 30%;
	margin: 0;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .main{
	font-size: 5.333333vw;
	margin: 0 0 8px;
}

#toppage_wrapp .top_link > ul > li .top_linkcont .cont_wrapp .sub{
	font-size: 3.466667vw;
}

.topcont_sub_menu{

}

.topcont_sub_menu .navi_back{
	display: none;
}

.topcont_sub_menu.active .navi_back{
	display: none;
}

.topcont_sub_menu .sub-list{
	display: block;
	border-radius: 0 0 6px 6px;
	padding: 10px;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	transform:translate(0,0);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.topcont_sub_menu.active .sub-list .close,
.topcont_sub_menu .sub-list .close{
    display: none;
}

.topcont_sub_menu .sub-list li a{
    font-size: 14px;
    padding: 8px 20px 8px 8px;
}







}