@charset "UTF-8";

/* ttl */

#problem_article #ttl{
	background: #c7365e url(../images/mainvisual.png) no-repeat right 60%;
	background-size: 50%;
	padding: 50px 0;
}

#problem_article #ttl *{
	color:#FFF;
	font-weight: 700;
}

#problem_article #ttl p{
	font-size: 2.0rem;
}

#problem_article #ttl h1{
	font-size: 3.6rem;
}

#problem_article #breadcrumb{
	margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
	
	#problem_article #ttl{
		background: none;
		background: #c7365e;
	}
	
}



/* intro */

#problem_article #intro {
	margin-bottom: 50px;
	text-align: center;
}

#problem_article #intro p {
	background: #ffe5eb;
	padding: 20px;
}

#problem_article #intro p{
	font-size: 2.0rem;
	font-weight: 700;
}

@media screen and (max-width: 767px) {

	#problem_article #intro {
		text-align: left;
	}

}



/* article */

#problem_article article {
	margin-bottom: 50px;
}

#problem_article #banner{
	margin-bottom: 50px;
}

#problem_article article header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #F0F0F0;
	margin-bottom: 30px;
}

#problem_article article header #img{
	width: 30%;
}

#problem_article article header #img p{
	line-height: 0;
}

#problem_article article header #txt{
	width: 70%;
	padding: 0 20px;
}

#problem_article article header #txt p{
	display: inline-block;
	background: #c7365e;
	padding: 4px 6px;
	margin-bottom: 10px;
	color: #FFF;
}

#problem_article article header #txt h2 {
	font-size: 2.8rem;
	font-weight: 700;
}


#problem_article article p,
#problem_article article dd{
	line-height: 1.8;
}

#problem_article article section {
	margin-bottom: 70px;
}

#problem_article article section h3 {
	font-size: 2.8rem;
	font-weight: 700;
	color: #c7365e;
	padding-bottom: 6px;
	margin-bottom: 20px;
	border-bottom: #c7365e solid 2px;
}

#problem_article article section h4{
	font-weight: 700;
}

#problem_article article section p {
	margin-bottom: 20px;
}

#problem_article article section a {
	text-decoration: underline;
}

#problem_article article section dl{
	margin-bottom: 20px;
}

#problem_article article section dl dt{
	font-size: 2.0rem;
	font-weight: 700;
	color: #c7365e;
	margin:20px 0 6px 0;
}

#problem_article article section dl dd{
	padding-left: 20px;
	margin-bottom: 10px;
}

#problem_article article section .point{
	background: #ffe5eb;
	padding: 20px;
}

#problem_article article section .point dt{
	margin: 0 0 10px 0;
}

#problem_article article section .point dd{
	padding: 0;
	margin: 0;
}

#problem_article article section .point dd li{
	font-size: 2.0rem;
	margin-bottom: 10px;
	padding-left: 26px;
	position: relative;
	font-weight: 700;
}

#problem_article article section .point dd li:last-child{
	margin-bottom: 0;
}

#problem_article article section .point dd li:before{
	content: '●';
	color: #c7365e;
	position: absolute;
	left: 0;
	top: 0;
}

#problem_article article section .flex_box {
	display: flex;
	justify-content: space-between;
}

#problem_article article section .flex_box .left {
	max-width: 70%;
	margin-right: 20px;
}

#problem_article article section .flex_box .right {
	display: inline-block;
	min-width: 10%;
}

#problem_article article section .flex_box img+p,
#problem_article article section .flex_box img+p a {
	font-size: 1.4rem;
}

#problem_article article .note,
#problem_article article .note *{
	font-size: 1.4rem;
	text-indent: 0;
}

#problem_article article span.note {
	vertical-align: super;
}


@media screen and (max-width: 767px) {

	#problem_article article header{
		display: block;
		padding: 20px 16px;
	}

	#problem_article article header #img{
		width: 60%;
		margin:0 auto 20px auto;
	}

	#problem_article article header #img p{
		line-height: 0;
	}

	#problem_article article header #txt{
		width: 100%;
		padding: 0;
	}

	#problem_article article header #txt h2 {
		font-size: 3.0rem;
		font-weight: 700;
	}

	#problem_article article section .flex_box{
		display: block;
	}

	#problem_article article section .flex_box .left {
		max-width: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

	#problem_article article section .flex_box .right {
		display: block;
		text-align: center;
	}

}



/* service_list */

#service_list {
	padding: 50px 0;
	border-top: #CCC solid 1px;
}

#service_list h2 {
	font-size: 3.0rem;
	text-align: center;
	font-weight: 700;
	margin-bottom: 30px;
}

#service_list ul {
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}

#service_list ul li {
	width: 40%;
	margin-right: 20px;
	position: relative;
	text-align: center;
}

#service_list ul li:last-child {
	margin-right: 0;
}

#service_list ul li dl dt{
	margin-bottom: 6px;
}

#service_list ul li dl dd {
	font-size: 1.6rem;
	text-align: center;
}

#service_list p {
	text-align: center;
}

#service_list p a {
	display: inline-block;
	background: #323232;
	color: #FFF;
	padding: 10px 20px;
}

@media screen and (max-width: 767px) {

	#service_list ul {
		display: block;
	}

	#service_list ul li {
		text-align: center;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

}



/* contents_list */

#problem_article #contents_list {
	background: url(/_common/img/dot_bg.png);
	padding: 50px 0;
}

#problem_article #contents_list h2 {
	font-size: 3.0rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 30px;
}

#problem_article #contents_list p {
	margin-bottom: 50px;
}

#problem_article #contents_list ul {
	display: flex;
	justify-content: space-between;
}

#problem_article #contents_list ul li {
	width: 48%;
}

#problem_article #contents_list ul li p {
	font-size: 1.6rem;
	margin-bottom: 10px;
}

@media screen and (max-width: 767px) {

	#problem_article #contents_list ul {
		display: block;
	}

	#problem_article #contents_list ul li {
		width: 100%;
		margin-bottom: 50px;
	}

}