@charset "utf-8";

/*-----------------------------------------------------------------------------------------------*/
/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main .contents:not(:first-of-type) { margin-top: var(--margin-120); }
.main .read + .comment { margin-top: var(--margin-30); }


/* メインイメージ -------------------------------------------------------------------------------*/
.mainimage { position: relative; }
.mainimage .text {
	color: var(--color-white);
	font-weight: var(--weight-m);
	position: absolute;
	/*top: 50%;*/
	bottom: 30px;
	left: 6%;
	/*transform: translateY(-50%);*/
}
.mainimage .message {
	font-size: var(--font-m);
	line-height: var(--line-l);
}
.mainimage .name {
	font-size: var(--font-xs);
	margin-top: 20px;
}


/* プロフィール ---------------------------------------------------------------------------------*/
.main .profile .image {
	border-radius: 50%;
	margin: 0 auto;
	overflow: hidden;
	max-width: 200px;
}
.main .profile .name {
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	margin: var(--margin-20) 0 var(--margin-10);
	text-align: center;
}
.main .profile .comment { font-size: var(--font-s); }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main .container { margin-top: var(--margin-60); }
	/* メインイメージ -------------------------------------------------------------------------------*/
	.mainimage .text {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
	.mainimage .message { font-size: var(--font-l); }
	.mainimage .name { font-size: var(--font-s); }
	/* プロフィール ---------------------------------------------------------------------------------*/
	.main .profile {
		display: flex;
		align-items: center;
		column-gap: 40px;
	}
	.main .profile .image { width: 200px; }
	.main .profile .text { flex: 1; }
	.main .profile .name {
		margin-top: 0;
		text-align: left;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 総支配人からのメッセージ ---------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メインイメージ -------------------------------------------------------------------------------*/
	.mainimage .message { font-size: 2.4rem; }
	.mainimage .name { font-size: var(--font-ll); }
	/*-----------------------------------------------------------------------------------------------*/
}