/* CSS Document */

#useful_link_list { margin-bottom: 40px;}
#useful_link_list { margin-top: 30px; }
#useful_link_list ol { display: flex; justify-content: space-between; align-items: center; }
#useful_link_list li { margin: 0 0 25px 25px; width: 165px; text-align: center; padding-right: 25px; border-right: 1px solid #c4c4c4; }
#useful_link_list li:last-child { border-right: none; margin-right: 0; }
#useful_link_list li span { display: block; font-size: 1.6rem; color: #60a82c; font-weight: bold; text-decoration: underline; }
#useful_link_list li img { margin-top: 10px; }
#useful_link_list li h2 { font-size: 1.6rem; margin-top: 15px; }
#useful_link_list li p { font-size: 1.4rem; margin-top: 5px; }
#useful_link_list li a { display: block; color: #3b8935; text-decoration: none;font-size: 1.4rem; font-weight: bold; position: relative; line-height:1; padding: 10px 15px 10px 10px; margin-top: 15px; border: 1px solid #3b8935; border-radius: 50px; letter-spacing: 0.75px;box-sizing: border-box; transition: .2s ease; }
#useful_link_list li a:hover { background: #60a82c; color: #fff; opacity: 1; }
#useful_link_list li a:after { position: absolute; content: "";top: 50%; margin-top: -6px; right: 15px;
width: 6px;
height: 6px;
border-bottom: #60a82c 2px solid;
border-right: #60a82c 2px solid;
transform: rotate(45deg);
}
.useful_box { margin-bottom: 60px; }
#useful_link_list li a:hover:after { border-bottom: #fff 2px solid; border-right: #fff 2px solid; }
div.box_wrap { display: flex; justify-content: space-between; margin-left: 15px; }
.sub_cmn_h2 span { font-size: 1.6rem; color: #60a82c; letter-spacing: 1.5px; margin-right: 10px; vertical-align: middle; }
.box_intro { width: 62%; }
p.box_lead { font-size: 1.8rem; font-weight: bold; color: #3b8935; letter-spacing: 0.75px; margin-bottom: 25px; }
span.maker { background: linear-gradient(transparent 70%, #fff799 50%); }
.lead_txt { color: #333; margin-bottom: 0; font-size: 1.5rem; }
div.data { width: 370px; padding-bottom: 15px; margin-top: 30px; text-align: center; border: #ccc 1px solid; }
div.data h3 { background: #f2f2f2; font-size: 1.4rem; padding: 8px; }
div.data img { margin-top: 20px; }
div.data p { font-size: 1.3rem; margin-top: 15px; }

ul.comments { width: 37%; margin-right: 0; }
ul.comments li { display: flex; justify-content: center; margin-top: 20px; }
ul.comments li:nth-child(odd) { flex-direction: row-reverse; }
ul.comments li p { background: #f2f2f2; padding: 15px 20px; font-size: 1.3rem; font-weight: bold; border-radius: 10px; position: relative; margin: 0 10px; }
ul.comments li p::before { content: ""; display: block; position: absolute; top: 50%; right: -18px; transform: translateY(-50%); border: transparent 9px solid; border-left: #f2f2f2 9px solid; }
ul.comments li:nth-child(odd) p::before { right: auto; left: -18px; border: transparent 9px solid; border-right: #f2f2f2 9px solid; }

div.flow { margin: 30px auto; }
ol.box_flow { font-size: 1.5rem; display: flex; justify-content: space-around; margin: 10px 15px; border: #60a82c dashed 1px; border-radius: 5px; padding: 25px 0; }
ol.box_flow li { position: relative; padding-top: 10px; font-weight: 500; letter-spacing: 0.75px; width: 20%; text-align: center; }
ol.box_flow li span.flow_no { position: absolute; top: 0; left: 0; font-size: 2.1rem; color: #60a82c; font-weight: bold; }
ol.box_flow li h3 { margin-top: 15px; font-size: 1.4rem; }
ol.box_flow li p { font-size: 1.4rem; font-weight: normal; margin-top: 5px; }

a.sub_link { background: #f2fadb; color: #3b8935; display: block; width: 45%; padding: 15px 0; margin: 0 auto; border-radius: 5px; text-decoration: none; font-size: 1.6rem; font-weight: bold; letter-spacing: 1.5px; text-align: center; border: #3b8935 1px solid; position: relative; transition: .2s ease; }
a.sub_link::after { content: ""; position: absolute; top: 42%; right: 30px; display: inline-block; width: 8px; height: 8px; border-top: #3b8935 solid 2px; border-right: #3b8935 solid 2px; transform: rotate(45deg); }
a.sub_link:hover { background: #60a82c; color: #fff; opacity: 1; }
a.sub_link:hover::after { border-top: #fff solid 2px; border-right: #fff solid 2px; }
@media print, screen and (min-width: 768px) {


.point_link_box { padding-top: 200px; margin-top: -200px;}
}
@media screen and (max-width: 767px) {
	#useful_link_list ol { flex-wrap: wrap; justify-content: space-around; }
	#useful_link_list li { width: 40%; margin: 0 0 30px 20px;  border-right: none; padding-right: 15px; }
	
.useful_box { margin: 0 10px;}
.point_link_box { padding: 120px 0 0; margin-top: -80px;}
	.useful_box h2.sub_cmn_h2 { font-size: 2rem; }
	.sub_cmn_h2 span { /*font-size: 1.8rem;*/ display: block; }
div.box_wrap { display: block; }
	p.box_lead { font-size: 1.6rem; }
div.box_wrap p.box_img img{ max-width: 100%; height: auto; margin: 0 auto;  }
	.box_intro { width: 100%; }
	.box_intro .lead_txt { padding: 0; }
	div.data { width: 90%; margin: 30px auto 0 auto; }
	ul.comments { width: 100%; margin-top: 30px; margin-right: 0;  }
	ul.comments li {  }
	div.flow { width: 100%; overflow-x: scroll; }
	ol.box_flow { width: 830px; margin-top: 20px; }
	a.sub_link { width: 70%; }

}
@media screen and (max-width: 500px) {
	#useful_link_list li { width: 90%; margin-bottom: 35px; }
	#useful_link_list li:last-child { margin-bottom: 0; }
	#useful_link_list li img { width: 40%; height: auto; }
	#useful_link_list li div { float: right; width: 55%; margin-bottom: 15px; text-align: left; }
	#useful_link_list li a { clear: both; width: 80%; margin: 0 auto; }

a.sub_link { width: 90%; }
	a.sub_link::after { right: 15px; }
}