@charset "utf-8";
/* =======================================

	IndexElements

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

.cont_header.visual .wrap{
	display:grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
}
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:307px;
	transform: translateY(4px);
}
/* ヘッダー背景調整 */
@media only screen and (max-width: 1180px) {
	body #pg_index .wrap > div{
		position: absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
		text-align:right;
	}
}
@media only screen and (max-width: 1120px) {
	body #pg_index .wrap > div{
		right:-10%;
	}
}
@media only screen and (max-width: 998px) {
	body #pg_index .wrap > div div:first-child img{
		width:62%;
	}
}
@media only screen and (max-width: 880px) {
	body #pg_index .wrap > div{
		right:-20%;
	}
}

@media only screen and (max-width: 768px) {
	.cont_header.visual .wrap{
		padding:0;
		height: 100%;
	}
	body #pg_index h1.top {
		line-height: 1.2;
	}
	body #pg_index h1.top span{
		font-size: 14px;
		margin: 8px 0 28px;
	}
	body #pg_index h1.top img{
		width:144px;
	}
	body #pg_index .wrap > div div:first-child{
		display: none;
	}
	body #pg_index .wrap > div{
		right:0;
	}
}

@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%;
	}
}

div [class*="topics"] a{
	display: grid;
	gap:6px;
}
div [class*="topics"] a span{
	width:70px;
	background:var(--topics01-color);
	margin:auto;
	font-size:18px;
}
div.topics2 a span{
	background:var(--topics02-color);
}

.banner{
	border-radius: 10px;
}
.banner::before{
	position:absolute;
	content: "";
	width:30px;
	height:30px;
	background:#F18E10;
	border-radius: 0 0 100% 0;
	top:0;
	left:0;
	z-index:1;
}
.banner.cont_page02::before{
	background:#6FBA2C;
}
.banner.cont_page03::before{
	background:#00AAC3;
}
.banner.cont_page04::before{
	background:#B68D5D;
}

@media only screen and (max-width: 768px) {
	div [class*="topics"] a span{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 46px;
	}
	.banner a{
	padding-bottom: 10px !important;
	}
}

/* btn_area */
body #pg_index .btn_area a {
	background:url(../img/btn_area_bg.png) var(--main-color);
	background-size: cover;
    background-repeat: no-repeat;
	border-radius: 50px;
	transition: .3s;
}
body #pg_index .btn_text{
	display: grid;
	grid-template-columns: 1fr min-content;
    align-items: center;
}
body #pg_index .btn_text span {
	width:30px;
	height: 7px;
	border-bottom: 1px solid #fff;
  	border-right: 2px solid #fff;
  	transform: skew(45deg);
}
body #pg_index .btn_area a:hover{
	opacity: .7;
}

@media only screen and (max-width: 768px) {
	body #pg_index .btn_text{
		grid-template-columns:1fr 40px;
	}
	body #pg_index .btn_text span{
		width:20px;
	}
}
@media only screen and (min-width:400px) {
	.btn_text .sp{
		display: none !important;
	}
}
@media only screen and (max-width:400px) {
	body #pg_index .btn_area a{
		padding:.7rem 0 !important;
	}
	body #pg_index .btn_text{
		display: block;
	}
	body #pg_index .btn_text span{
		position: absolute;
		right: 40px;
        top: 25px;
	}
}