@charset "utf-8";

/* =============================== */
/* ▼ ヘッダー構成（cont_header） */
/* =============================== */
.cont_header.visual .wrap {
	display: flex;

	justify-content: end;
	z-index: 1;
}

@media only screen and (max-width: 768px) {
	.cont_header.visual .wrap {
		padding: 0;
		height: 100%;
		display: flex;
		flex-direction: row;
	}
}

body #pg_index h1.top span {
	font-size: 2rem;
	display: block;
}

body #pg_index .wrap>div {
	display: flex;
	align-items: center;
	justify-content: end;
}

body #pg_index .wrap>div div:last-child {
	text-align: right;
}

body #pg_index .wrap>div div:last-child img {
	width: 426px;
	height: 123px;
	right: 0;
	bottom: 0;
	position: absolute;
}

@media only screen and (max-width: 1120px) {
	body #pg_index .wrap>div {
		right: -10%;
	}
}

@media only screen and (max-width: 880px) {
	body #pg_index .wrap>div {
		right: -20%;
	}
}

@media only screen and (max-width: 768px) {
	body #pg_index .wrap>div {
		right: 0;
	}

	#pg_index .cont_header.visual {
		background: url(../img/page_header_bg.jpg) right clamp(-105px, calc(-40px - (100vw - 490px) * 0.5), -40px);
		no-repeat;
		background-size: max(490px, 100vw) auto;
	}

	body #pg_index .wrap>div div:last-child img {
		top: auto;
		bottom: 80px;
		height: 70px;
		width: auto;
	}

	body #pg_index h1.top {
		line-height: 1.2;
		text-align: center;
		margin-top: 8px;
		min-height: 80px;
	}

	body #pg_index h1.top span {
		font-size: 14px;
		margin-top: 4px;
	}

	body #pg_index h1.top img {
		width: 144px;
	}
}

@media only screen and (max-width: 600px) {
	body #pg_index .wrap>div {
		right: -20%;
	}
}

@media only screen and (max-width: 400px) {
	body #pg_index .wrap>div {
		right: -32%;
	}
}

/* =============================== */
/* ▼ 社長メッセージ構成（message ） */
/* =============================== */
.cont_header.visual.large {
	position: relative;
	height: 351px;
}

#message .top-message {
	font-size: 4rem;
	color: #fff;
	width: 100%;
}

#message .top-title {
	color: #fff;
}

#message .top-name {
	width: 100%;
	font-size: 2.5rem;
}

#message .top-name small {
	vertical-align: baseline;
}

#message .cont_header img {
	position: absolute;
	bottom: 0;
	right: 0;
}

@media only screen and (max-width: 768px) {
	#message .cont_header.visual {
		margin: 0 0 60px;
	}
}

@media print {
	#message .top-message {
		font-size: 4rem;
		width: 100%;
	}

	#message .top-name {
		width: 100%;
		font-size: 2.5rem;
	}
}

/* =============================== */
/* ▼ トピック構成（topics ） */
/* =============================== */
div [class*="topics"] a span {
	position: absolute;
	top: 8px;
	left: 8px;
	margin: 0;
	padding: 4px 8px;
	background-color: #fff;
	color: #008DB2;
	border: 1px solid #008DB2;
	border-radius: 10px;
	font-size: 1.6rem;
	min-width: 64px;
}

.banner {
	border-radius: 25px;
}

.banner p {
	background-color: #424188;
	width: 100%;
	min-height: 54px;
	display: flex;
	justify-content: center;
	align-items: center;
}






@media only screen and (943px < width < 1150px) {
	.banner.cont_page04 {
		background-color: #dbebff;
	}

	.banner.cont_page04:after {
		background-position: bottom 20px center;
	}

}

@media only screen and (768px < width < 944px) {
	.banner.cont_page04 {
		background-color: #dbebff;
	}

	.banner.cont_page04:after {
		background-position: bottom 46px center;
	}
}

@media only screen and (max-width: 767.8px) {
	br.br-pc {
		display: none;
	}
}

/* =============================== */
/* ▼ ボタン構成（btn ） */
/* =============================== */
body #pg_index .btn_area a {

	border-radius: 50px;
	transition: .3s;
}

body #pg_index .btn_area a:hover {
	/*opacity: .7;*/
}

body #pg_index .btn_text {
	display: grid;
	grid-template-columns: 1fr min-content;
	align-items: center;
	font-size: 1.6rem;
	color: #363581;
	z-index: 1;
}
body #pg_index .btn_area a:hover .btn_text {

	color: #FFF;
}
body #pg_index .btn_text span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border: 1px solid #424188;
	border-radius: 50%;
	box-sizing: border-box;
	position: relative;
	margin-left: 0.5em;

}

body #pg_index .btn_text span::before {
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	border-right: 1px solid #424188;
	border-bottom: 1px solid #424188;
	transform: rotate(-45deg);
	margin-left: -2px;
}
body #pg_index .btn_area a:hover span{
	border-color:#FFF;
}
body #pg_index .btn_area a:hover span::before{
	border-right-color: #FFF;
	border-bottom-color: #FFF;
}
@media only screen and (768px < width < 878px) {

	body #pg_index .btn_area a {
		width: calc((100% - 30px) / 3);

	}

	body #pg_index .btn_area a .btn_text {
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 768px) {
	body #pg_index .btn_text {
		grid-template-columns: 1fr 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	body #pg_index .btn_text span {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 30px;
		margin: auto;
	}
}

@media only screen and (max-width: 400px) {
	body #pg_index .btn_area a {
		padding: 0.7rem 0 !important;
	}
}

@media only screen and (min-width:400px) {
	.btn_text .sp {
		display: none !important;
	}
}