@charset "UTF-8";

/* --------------------------------------------------
	下層ページ
-------------------------------------------------- */
.sub-title { width: 100%; height: 376px; background: url(../img/common/sub-title_bg.jpg) no-repeat center / cover; color: #fff; }
.sub-title h1 { padding-top: 170px; font-size: 2.0rem; font-weight: 500; line-height: 1; }
.sub-title h1 span { margin-bottom: 10px; display: block; font-size: 7.0rem; font-weight: 500; font-family: "Roboto", sans-serif; }

.sub-title-2 { width: 100%; height: 310px; background: none; color: #DA6A38; }
.sub-title-2 h1 { padding-top: 170px; font-size: 4.0rem; font-weight: 500; line-height: 1; }
.sub-title-2 h1 span { font-size: 1.6rem; padding-left: 20px; font-family: "Roboto", sans-serif; }
 
#path ul { padding: 16px 0; display: flex; gap: 14px; flex-wrap: wrap; list-style: none; }
#path li { display: flex; gap: 14px; font-size: 1.4rem; line-height: 1.4; align-items: center; }
#path li::after { content: '＞'; font-size: 1.2rem; }
#path li:last-of-type::after { content: none; }

h2 { margin-bottom: 50px; display: flex; align-items: flex-end; gap: 10px; color: #DA6A38; font-size: 3.2rem; font-weight: 500; line-height: 1; }
h2 span { font-family: "Roboto", sans-serif; font-size: 1.6rem; }

h3 { margin-bottom: 30px; color: #DA6A38; font-size: 2.0rem; font-weight: 500; }
h3.bl { color: #254678; }

/*
#pager ul { width: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; list-style: none; }
#pager ul a { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: solid 1px #254678; color: #254678; font-size: 2.0rem; line-height: 1; transition: all .3s; }
#pager ul .active a {  background: #254678; color: #fff; }
#pager ul a:hover { text-decoration: none; opacity: 0.7; }
*/

#pager { width: 100%; display: flex; align-items: center; justify-content: center; }
#pager span { display: flex; align-items: center; justify-content: center; gap: 30px; }
#pager span span { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: solid 1px #254678; color: #254678; font-size: 2.0rem; line-height: 1; transition: all .3s; }
#pager span span.current { background: #254678; color: #fff; }
#pager span span a { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #254678; font-size: 2.0rem; line-height: 1; transition: all .3s; }
#pager span a:hover { text-decoration: none; opacity: 0.7; }

@media screen and (max-width: 767px) {
	.sub-title { height: 300px; }
	.sub-title h1 { padding-top: 140px; font-size: 1.8rem; }
	.sub-title h1 span { font-size: 5.2rem; }

	.sub-title-2 { min-height: 200px; }
	.sub-title-2 h1 { padding-top: 140px; font-size: 3.0rem; }

	h2 { margin-bottom: 30px; flex-direction: column; align-items: flex-start; font-size: 2.6rem; }
	h2 span { font-size: 1.4rem; }
	h3 { margin-bottom: 16px; font-size: 1.8rem; }
}