/*------------------------------------------- 

	main

------------------------------------------- */

.main {
	background: #87bbf9; /*#ffe7cc;*/
}
.main .img_area {
	position: relative;
}
.main .img_area img {
	height: auto;
}
.main .heading {
	background: #549ef7;
}
.main .heading > .inner {
	padding: 10px 20px;
}
.main .sub_heading {
	background: #87bbf9;
}
.main .sub_heading > .inner {
	padding: 15px 20px;
}
.main .copy > .inner {
	padding: 20px;
}
.main .text_area p {
	font-size: 20px;
}

@media screen and (min-width: 1024px) {
	.main > .inner {
		display: flex;
		flex-direction: row-reverse;
		min-height: 500px;
	}
	.main .img_area {
		width: 50%;
	}
	.main .img_area img {
		object-fit: cover;
		height: 100%;
	}
	.main .text_area {
		width: 50%;
	}
	.main .text_area .inner {
		max-width: calc(610px + 20px);
		margin-left: auto;
	}
	.main .heading > .inner {
		padding: 10px 30px 10px 20px;
	}
	.main .copy > .inner {
		padding: 20px 30px 40px 20px;
	}
}

@media screen and (min-width: 1440px) {
	.main .img_area img {
		width: auto;
	}
}

/*-------------------------------------------------- 
	lineBox
---------------------------------------------------- */
.lineBox_module {
	margin: -1px 0 0 -1px;
	border: 1px solid #000;
}
.lineBox_module .inner {
	padding: 20px;
}
.lineBox_module .img_area img {
	height: auto;
}
.lineBox_module .text_area {
	margin-top: 20px;
}
.lineBox_module h3 {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: normal;
	line-height: 24px;
}
.lineBox_module .list_basic > li {
	margin-top: 0;
	font-size: 14px;
}
.lineBox_module .link_area {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin: 20px 0 0 -15px;
}
.lineBox_module .link_area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 15px;
	width: calc(100% - 15px);
	height: 1px;
	background: #000;
}
.lineBox_module .link_area a {
	margin: 20px 0 0 15px;
}
.lineBox_module .link_area a.text_link {
	display: flex;
	align-items: center;
	position: relative;
	color: #000;
}
.lineBox_module .link_area a.text_link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	transition: .3s;
	width: 0;
	height: 1px;
	background: #000;
}
.lineBox_module .link_area a.text_link:hover {
	text-decoration: none;
}
.lineBox_module .link_area a.text_link:hover::after {
	width: 100%;
}

@media screen and (min-width: 480px) {
	.lineBox {
		display: flex;
		flex-wrap: wrap;
	}
	.lineBox_module {
		width: 50%;
	}
}

@media screen and (min-width: 1024px) {
	.lineBox_module {
		width: calc(100% / 3);
	}
}