/* CSS Document */

/*ベーススタイル*/
body{
	color: #222;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	line-height: 1.5;
}
a {
	color: #0069ff;
	text-decoration: none ;
}

img{
	max-width: 100%;
	vertical-align: top;
}



/* レイアウト */
#ly_wrapper{
	display: flex;
    justify-content: space-between;
}

.ly_header{
	flex:0 0 260px;
	margin-left: 20px;
    
}

.ly_mainCont{
	flex:1;
	margin-right: 3.25203%;
	display: flex;
	justify-content: center;

}

.ly_mainContInner{
    width: 900px;
}

.ly_header_mainMenu{
}

.ly_header_mainMenu_ul{
	display: flex;
	flex-direction: column;
}

.ly_header_mainMenu_ul_bt{
	display: block;
	font-size: 1.2rem;
	padding-top: 2.5%;
	padding-bottom: 2.5%;
}
.ly_header_mainMenu_ul_bt a{
	color: #000;
}

.ly_header_mainMenu_ul_bt a:hover{
	opacity: 0.7;
}


.ly_footer{
	margin-top: 30px;
	margin-bottom: 20px;
	/*background-color: #222;*/
}

.ly_footer_inner{
	max-width: 1230px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
    text-align: right;
	
}

.el_footerCopyright{
	font-size: 0.9rem;
}

.ly_constBox{
    padding-left:6%;
    padding-right: 6%;
    padding-top: 6%;
    padding-bottom: 8%;
    margin-bottom: 30px;
    border: 1rem solid #B5B5B5;
    background-color: #282828;
    color: #fff;
    opacity: 90%;
}    

.ly_classConst{
    display: block;
    width: 100%;
    padding-bottom: 40px;
}

.ly_gallery{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
}





/*element 小さいパーツ*/
#el_header_mainLogo{
    display: block;
}
#el_mainLogo{
    max-width: 80%;
}



.ly_constBox h3{
    display: block;
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.ly_constBox h4{
    margin-top: 10px;
    margin-bottom: 0;
    text-indent: -1em;
    margin-left: 1em;
}
.ly_constBox h4:before{
    content: '';
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-right: .5em;
    background: #fff;
    transform: rotate(45deg);
    vertical-align: 2px;}

.ly_constBox p{
    margin-top: 0;
    margin-bottom: 5px;
    margin-left: 7px;
}


.el_constTitle{
    margin: 0;
    display: block;
    text-align: right;
    font-size: 2rem;
}

.ly_gallery figure{
    max-width: 22%;
}

/*GoogleMap用*/
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 75%; /* = height ÷ width × 100 */
}
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*helper*/

.hp_btGray{
	border-top: 1px solid #000066 !important;
}

.hp_underLine{
    border-bottom: 1px solid #fff;
}


/*トップページ用*/
#un_topics{
	/*border: 1px solid #3F3F3F;*/
	max-width: 800px;
	padding-right: 15px;
	padding-left: 15px;
	/*margin-right: auto;
	margin-left: auto;*/
	
	margin-top:200px;
	margin-bottom: 200px;
}

#un_topics_list{
	list-style: none;
}

.un_hero{
	padding-top: 0.8%;
	padding-bottom: 0.8%;
	background-color: #D7D7D7;
}

.un_hero_inner{
	flex:1;
	margin-right: 3.25203%;
	display: flex;
	justify-content: center;
	padding-right: 15px;
	padding-left: 15px;
	
}

.un_hero_img{
	width: 22%;
	margin-right: 1.0%;
}



/*メディアクエリ適用時*/
@media screen and (max-width:600px){
    #el_mainLogo{
        max-width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    
	#ly_wrapper{
		flex-direction: column;
	}
	#un_topics{
		margin-top:0;
		margin-bottom: 20px;
        margin-left: 5%;
        margin-right: 5%;
	}
    
    .un_hero_inner{
		flex-direction: column;
	    justify-content: center;
    }
    .un_hero_img{
        width: 95%;
        margin-left: 3%;
        margin-right: 2%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .ly_header{
	    margin-left: 10px;
        margin-right: 15px;
    }
    
    
	.ly_header_mainMenu_ul{
		flex-direction:row;
		flex-wrap:wrap;
        justify-content :space-around;
	}
    
	.ly_header_mainMenu_ul_bt{
        display: inline-block;
		width: 40%;
        margin-bottom: 2%;
        text-align: center;
		border: 1px solid #3F3F3F;
		border-radius: 2px;
	}
    
	.ly_header_mainMenu_ul_bt a{
        display: block;
        width: 100%;
        height: 100%;
	}

	.ly_header_mainMenu_ul_bt a:hover{
	}
    
    .ly_footer_inner{
        text-align: center;
    }
    .ly_constBox h3{
    font-size: 1.2rem;
    }
    
    .ly_gallery{
        flex-direction: column;
    }
    .ly_gallery figure{
            max-width: 100%;
    }    
    .el_constTitle{
        text-align: center;
    }
    .ly_constBox{
        width: 80%;
    }
    
}