@charset "utf-8";

/*===========

story

============*/

.story_top_cont {
	padding: 30px;
	box-sizing: border-box;
	background-color: #fff;
}

.story_top_ttl {
	text-align: center;
}

.koume_makoto_info {
	text-align: center;
}

.story_top_index {
	padding: 0 30px;
}

.story_top_index_list {
	margin: 0 0 20px;
}

.story_top_index_list li {
	border-bottom: 1px dotted #e87c8e;
	background: url(../img/ico_story_index.png) no-repeat left center;
	background-size: 16px 16px;
}

.story_top_index_list li a {
	padding: 10px 0 10px 20px;
	display: block;
}

.story_top_index_list li a, .story_top_index_list li a:hover {
	color: #333030;
	text-decoration: none;
}

.story_btn a {
	margin: 5px 0;
	padding: 8px 30px;
	display: block;
	position: relative;
	border-radius: 10px;
	background: #ca202d url(../img/story_index_arrow.svg) no-repeat 98% center;
	background-size: 25px auto;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}

.story_btn a:hover {
	top: 1px;
	left: 1px;
	opacity: 0.8;
	text-decoration: none;
}

.koume_story .koume_makoto_link {
	margin: 10px 0;
	position: relative;
	line-height: 1.6;
}

.koume_makoto_info a:hover {
	opacity: 0.8;
}

.koume_makoto_link a {
	display: flex;
	color: #e83250;
	justify-content: center;
	align-items: center;
}

.koume_makoto_link a:before {
	content: ' ';
	margin: auto 4px auto 0;
	display: block;
	width: 24px;
	height: 24px;
	background: url(../../img/txt_link_arrow.svg) no-repeat left top;
	background-size: 22px auto;
}

/* ------ ボトム ------ */
.float_left {
	margin-right: 15px;
	float: left;
}

.float_right {
	margin-left: 15px;
	float: right;
}

.text_center {
	margin: 10px 0 15px;
	text-align: center;
}

.cont_ttl_lv3 {
	margin: 40px auto 20px;
	background: url(../../history/img/history_ttl_bg.png) no-repeat left 30px;
}

.cont_ttl_lv3 img {
	margin: 0 auto;
	padding: 0 20px;
	display: inline-block;
	background: #fff url(../../img/bace_bg.png) repeat left top;
	text-align: center;
}

.story_cont p {
	margin-bottom: 20px;
	line-height: 2.2;
}

.page_nav_list {
	padding: 20px 0 0;
	display: flex;
	justify-content: center;
}

.page_nav_list .cont_link a {
	padding-left: 22px;
	background-position: left 0.25em;
	background-size: 18px auto;
	color: #fff;
}

.page_nav_list li {
	margin: 0 10px;
	font-size: 1.8rem;
}

/*===========

MediaQueries

============*/

/* PC----------------------------- */
@media screen and (min-width: 768px) {
	.koume_makoto_info {
		width: 55%;
	}

	.story_top_index {
		width: 35%;
	}

	.cont_header {
		background: url(../img/first_love_story_img.png) no-repeat center bottom;
		background-size: 100% auto;
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px) {
	.wrap .cont_header {
		padding: 5% 0 0;
	}

	.story_top_index {
		padding: 0;
	}

	.content_lead {
		position: relative;
		z-index: 1;
	}

	.content_lead:after {
		content: ' ';
		margin-top: -3%;
		padding: 0 0 78%;
		display: block;
		position: relative;
		z-index: -1;
		width: 100%;
		height: 0;
		background: url(../img/first_love_story_img.png) no-repeat 90% top;
		background-size: 200% auto;
	}

	.koume_story .cont_header {
		padding: 5% 0 0;
	}

	.koume_story .koume_makoto_link {
		margin: 10px 0 30px -10px;
	}

	/* ------ ボトム ------ */
	.story_cont .float_left, .story_cont .float_right {
		margin: 0 0 10px;
		float: none;
		text-align: center;
	}

	.story_cont .cont_ttl_lv3 {
		margin: 0 0 10px;
	}

	.story_cont p {
		font-size: 1.5rem;
		line-height: 2.0;
	}

	.cont_ttl_lv3 {
		background: url(../img/s/story_ttl_bg.png) no-repeat left 30px;
		background-size: 100% auto;
	}

	.cont_ttl_lv3 img {
		padding: 0 10px 0;
	}

	.page_nav_list {
		padding: 20px 0;
	}

	.page_nav_list li {
		margin: 0 10px;
		font-size: 1.8rem;
	}

	.cont_link a {
		background-size: 20px auto;
	}

	.wrap .cont_link a {
		padding-left: 25px;
		background-position: 0 0.20em;
		line-height: 1.4;
	}
}