.wrap{
	background:url(../images/bg.png), #CDEAF9;
	padding-bottom: 100px;
}

main{
	inline-size: var(--container-width);
	margin-inline: auto;
}

.main__inner{
	margin-inline: auto;
	text-align: center;
	background-color: #CCDE6F;
	padding-block-end: 50px;
	border-radius: 0 0 10px 10px;
}

.main__visual{
	aspect-ratio: 998 / 1555;
	inline-size: 100%;
}

.main__visual picture:not(.visual__catch){
	inline-size: 100%;
}

.visual__catch{
	position: absolute;
	/* bottom: clamp(7px, 3%, 15px); */
	bottom: max(2.5%, 13px);
	left: 50%;
	translate: -50% 0;
	inline-size: 80%;
}

.main__grid-box{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--main-gap);
	margin-inline: auto;
	inline-size: 90%;
}

.main__content .grid_box{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--main-gap);
}

.main__content__btn{
	position: absolute;
	bottom: clamp(15px, 3%, 24px);
	left: 50%;
	inline-size: 90%;
	translate: -50% 0;
}

.main__content img[src*="content_healthconsul_human"]{
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% calc(var(--humanIllust-shift-value) * -1);
	inline-size: 57%;
}

.main__content:has(img[src*="content_healthconsul_human"]){
	margin-block-start: var(--humanIllust-shift-value);
}

/* アイコン表示 */
.icon-petok{
	position: relative;
}

.icon-petok::before{
content: "";
display: block;
aspect-ratio: 1 / 1;
position: absolute;
top: 0;
left: 0;
translate: 20% 20%;
inline-size: min(22%, 90px);
block-size: auto;
background-image: url(../images/icon_petok.png);
background-size: 100% auto;
background-repeat: no-repeat;
}

/* 画面幅500px以上の設定 */
@media screen and (min-width: 501px){
	.main__visual{
		aspect-ratio: 449 / 300;
	}

	.visual__catch{
	position: absolute;
	bottom: max(4.5%, 17px);
	inline-size: 65%;
}

	.main__content .grid_box{
		grid-template-columns: repeat(2, 1fr);
		gap: var(--main-sp-col-gap);
	}

	.main__content__btn{
		bottom: clamp(18px, 8%, 35px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.main__content:has(img[src*="content_healthconsul_human"]){
	margin-block-start: 0;
	}

	/* アイコン */
	.icon-petok::before{
		inline-size: clamp(50px, 11vw, 95px);
	}

}

/* hoverアクション */
@media (hover: hover) {
  .main__content__btn:hover {
    transform: translateY(-2px);
		opacity: 0.8;
  }
}