@charset "UTF-8";
/* CSS Document */
main {
	background-image: url(../img/sub/site_sub_title-bg.png);
    background-position: right 90px top -165px;
    background-repeat: no-repeat;
    background-size: 35%;
	padding-bottom: 200px;
}
.subTitleArea {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: calc(100% - 8.56vw);
	margin: 0 auto;
}
.img_area {
	margin-top: 30px;
	width: 66%;
	height: 350px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 20px;
}
.title_area {
	width: 34%;
	padding: 45px 20px;
	text-align: center;
}
.title_area h1 {
	max-width: 258px;
	margin: 0 auto;
}
/*breadArea*/
.breadArea {
	width: calc(100% - 8.56vw);
	margin: 0 auto;
}
.breadArea .inner {
  font-size: 13px;
  padding: 15px 2% 0;
}
.breadArea .inner p,
.breadArea .inner p a {
  letter-spacing: .05em;
}
.breadArea .inner p a:hover {
  color: #999;
}
.breadArea02 {
	width: calc(100% - 8.56vw);
	margin: 0 auto;
}
.breadArea02 .inner {
  font-size: 13px;
  padding: 15px 2% 0;
}
.breadArea02 .inner p,
.breadArea02 .inner p a {
  letter-spacing: .05em;
}
.breadArea02 .inner p a:hover {
  color: #999;
}

@media screen and (max-width: 1000px) {
main {
    background-position: right 5px top 165px;
    background-size: 40%;
}
}
@media screen and (max-width: 650px) {
	main {
		padding-top: 90px;
	}
	.img_area {
		width: 50%;
		height: 160px;
		background-position: left center;
	}
	.title_area {
		width: 50%;
		padding: 45px 5px 10px;
	}
.breadArea .inner {
	 display: none;
}
 .breadArea02 .inner {
	 display: none;
}
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 450px) {
	main {
		padding-top: 60px;
		background-position: right 15px top 70px;
		background-size: 40%;
		padding-bottom: 60px;
	}
	.img_area {
		width: 60%;
		height: 121px;
		background-position: left center;
	}
	.title_area {
		width: 40%;
		padding: 45px 5px 10px;
	}
}
