@charset "utf-8";
/* CSS Document */

/*
	=========================
		    index.css
	=========================
*/


#contents h1 {
	border-bottom: none;
	padding: 0;
	margin-bottom: 1em;
}
#contents .imgBox img{
	width: 100%;
	height: auto;
}

#contents p{
	font-size: 14px;
}

#contents section {
	margin: 2em 0;
}

#contents p.font16{
	font-weight: 700;
    font-size: 16px;
}

#contents p.indent{
	text-indent: -1em;
    padding-left: 1em;
}

.mt0{
	margin-top: 0;
}

.mt10{
	margin-top: 1em;
}

.mb10{
	margin-bottom: 1em;
}

/*page_nav*/
#contents nav.page_nav{
	margin: 3em auto 5em;
}

#contents nav.page_nav ul{
	display: -webkit-box;
    display: -ms-flexbox;
	display: flex;
}

#contents nav.page_nav ul li{
    width: 20%;
    height: 100px;
    margin: 0 2em 0 0;
    cursor: pointer;
    border: solid 2px #4472c4;
    box-shadow: 0 5px 3px #4472c4;
}

#contents nav.page_nav ul li div.nav_box{
	text-align: center;
	margin-top: 1em;
}

#contents nav.page_nav ul li p.txt{
	font-size: 15px;
}

#contents nav.page_nav ul li p.txt span.font17{
	font-size: 17px;
	font-weight: bold;
}

#contents nav.page_nav ul li a:hover{
	text-decoration: none;
}

#contents nav.page_nav ul li p.txt:hover{
	opacity: 0.5;
}

@media (max-width: 640px){
	#contents nav.page_nav ul{
	display: block !important;
	}
	
	#contents nav.page_nav ul li{
    width: auto;
    height: 50px;
    margin: 2em 0;
	}
	
	#contents nav.page_nav ul li div.nav_box{
	text-align: left;
	margin-left: 1em;
	}
	
	#contents nav.page_nav br.pc-only{
	display: none;	
	}
	
	#contents nav.page_nav ul li p.txt span.font17{
	margin-right: 1em;
	}
}

/* circle */
#contents ol{
	counter-reset: number 0;
}

#contents ol li.circle{
	counter-reset: circle;
	margin: 3em 0;
}

#contents ol li.circle.blue{
	list-style-type: none;
}

#contents ol li.circle.blue:before {
	counter-increment: number;
    content: counter(number,decimal-leading-zero);
    color: #fff;
    display: block;
    line-height: 40px;
    text-align: center;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    font-weight: 700;
    float: left;
	background-color: #333f50;
	border-radius: 50%;
	font-size: 1.6em;
}

#contents ol li.circle.blue:before{
	background-color: #4472c4;
}

#contents ol li.circle.blue{
	margin-bottom: 14px;
	overflow: hidden;
}

#contents ol li.circle.blue h2{
	font-weight: 700;
	font-size: 22px;
	margin-top: 0.2em;
}

#contents ol li.circle.blue p{
	margin-top: 1em;
}

#contents ol li.circle.blue div.inr{
	margin: 2em 0 2em 4em;
}



/* notice_blue */
div.notice_blue{
	background-color: #cedfe8;
    border: 1px solid #cedfe8;
    padding: 1em 2em;
    margin: 2em 0;
}

div.notice_blue img{
    margin: 0 0 1em;
}


/*btnlist*/
#contents ul.btnlist{
	margin: 1em 0;
}

#contents ul.btnlist li{
	list-style: none;
}

#contents ul.btnlist li a{
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
    border: solid 1px #CCCCCC;
    border-radius: 5px;
    color: #000;
    padding: 0.7em 1em;
    display: inline-block;
    width: auto;
}

#contents ul.btnlist li a:hover{
	text-decoration: none;
    color: #000;
    opacity: 0.5;
}

#contents ul.btnlist li a span.textLink{
	background: url(/share/images/arrow_black.gif) no-repeat;
    background-position: 0 5px;
    margin-left: 0;
    display: inline-block;
    padding: 0 0 0 10px;
}

/*txtL imgR*/
#contents div.txtL{
	display: inline-block;
    width: 46%;
    vertical-align: top;
}

#contents div.txtL_c{
	display: inline-block;
    width: 55%;
    vertical-align: top;
}

#contents div.imgR{
	display: inline-block;
    width: 53%;
    text-align: right;
}

#contents div.imgR_c{
	display: inline-block;
    width: 40%;
    text-align: right;
}

#contents div.imgR p{
	text-align: center;
}

#contents p.underL{
	border-bottom: 3px solid #059ded;
    font-size: 14px;
    font-weight: 700;
}





@media (max-width: 640px){
	#contents ol li.circle.blue h2{
	font-size: 17px;
	margin-top: 0;
	}
	
	#contents div.inr img{
		width: 100%;
		margin: 1em 0;
	}
	
	#contents div.notice_blue img{
		width: 100%;
	}
	
	#contents div.txtL,
	#contents div.txtL_c{
	display: block;
	width: auto;
	}

	#contents div.imgR,
	#contents div.imgR_c{
	display: block;
	width: auto;	
	margin: 1em 0;
	}
	
	#contents div.imgR p{
	text-align: left;
	}
	
	#contents div.imgR img{
	width: 100%;
	margin: 1em 0;
	}
}