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

#contents h1.title{
	padding-left: 0!important;
	border-bottom: 1px solid #000!important;
	color: #333!important;
	font-size: 1.7em!important;
	line-height: 1.6;
}

#contents section h2{
	font-size: 1.077rem !important;
}


#contents ol.step{
	list-style-type: none;
	margin: 1em 0 2em;
}
#contents ol.step li{
	position: relative;
	margin: 1em 0 6em;
	border: 1px solid #ccc;
	border-radius: 20px;
}

#contents ol.step li:last-child{
	margin-top: 1em;
	margin-bottom: 0;
}

#contents ol.step li:not(:last-child)::after {
	position: absolute;
	left: 26.5em;
	top: 110%;
	border: 35px solid transparent;
	border-top: 30px solid #999;
	content: "";
}

#contents ol.step li > p{
	padding: 1em;
	border-radius: 20px 20px 0 0;
	background-color: #F2F2F2;
	font-size: 1.5rem;
	font-weight: bold;
}

#contents ol.step li .flex{
	display: flex;
	justify-content: space-between;
	padding: 1.5em 1em;
}

#contents ol.step li .flex > p{
	margin: 0 0.8em;
}

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

#contents section a.textLink{
	display: inline-block;
	margin-top: 5px;

}
#contents .linkArea{
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

#contents .linkArea ul{
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	margin-top: 2em;
}

#contents .linkArea ul li{
	width: calc(50% - 8px);
}
#contents .linkArea ul li a{
	display: block;
	padding: 0.7em 1em 0.5em;
	box-sizing: border-box;
	border: solid 1px #ccc;
	border-radius: 5px;
	background: url(/support/share/images/bg_mod-linkButton.jpg) repeat-x scroll left center;
	font-size: 1.154rem;
	color: #333 !important;
	font-weight: bold;
	text-decoration: none !important;
}

#contents .linkArea ul li a:hover{
	opacity: 0.7;
}

#contents section{
	margin: 2em 0;
}

@media (max-width: 640px){
	.share4-breadcrumbs{
		display: none;
	}
	
	#contents ol.step li:not(:last-child) {
		margin-bottom: 5em;
	}

	#contents ol.step li:not(:last-child)::after {
		top: 117%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#contents ol.step li > p{
		padding: 0.8em 1em 0.5em;
		font-size: 1.3rem;
	}

	#contents ol.step li .flex{
		flex-direction: column;
		align-items: center;
		padding: 1em;
	}

	#contents ol.step li .flex > p{
		margin-right: 0;
		margin-bottom: 1em;
	}

	#contents ol.step li .flex img{
		width: 100%;
		max-width: 300px;
	}
	
	#contents .linkArea{
		width: 100%;
	}

	#contents .linkArea ul{
		flex-direction: column;
		align-items: center;
	}

	#contents .linkArea ul li{
		width: 100%;
		margin-bottom: 1em;
	}
	
	.mq_sub-text-product{
		display: none;
	}
}