@charset "utf-8";

/*==================================================
トップページ
================================================== */
/*CSS Variables*/
:root {
	/* text bg */
	--copy-en01: url(../img/top/h1_01.webp);
	--copy-en02: url(../img/top/h1_02.webp);
	--subtitle-message: url(../img/top/h2_message.webp);
	--subtitle-business: url(../img/top/h2_business.webp);
	--subtitle-company: url(../img/top/h2_company.webp);
	--subtitle-recruit: url(../img/top/h2_recruit.webp);
	--subtitle-group: url(../img/top/h2_group.webp);
	--subtitle-news: url(../img/top/h2_news.webp);
}

/*==================================================
  [sp]Base TOP 
================================================== */
main#top_page {
	width: 100%;
	background: none;
	padding: 0;
}

main#top_page .bgframe {
	width: 100%;
	margin: 0;
	position: relative;
}

main#top_page section .inner {
	width: 89.33333333vw;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/*==================================================
[sp]COMMON TOP 
================================================== */

section h2.title {
	font-size: 4.8vw;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--color-black);
	margin-bottom: 10.66666667vw;
}

section p.subtitle {
	display: block;
	width: 100%;
	height: 6.4vw;
	margin-bottom: 5.333333333vw;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	color: var(--color-transparent);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
}

/*==================================================
[SP] top上部
================================================== */
.top_contents {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 5.6vw;
	background: url(../img/top/bg_top_sp.webp) no-repeat center top 59.6vw / contain,
		url(../img/top/bg_message_sp.webp) no-repeat center bottom /contain;
}

/*==================================================
[sp]mv
================================================== */
section.mv {
	padding: 5.333333333vw 0 5.6vw;
}

.mv_contents {
	width: 84vw;
	height: 108vw;
	margin: 0 auto;
	position: relative;
}

.mv figure {
	display: none;
}

.mv .splide {
	border-radius: var(--bd-radius-large);
	overflow: hidden;
}

.mv .splide__slide img {
	width: auto;
	height: 108vw;
}

.splide_control {
	position: absolute;
	bottom: 5.333333333vw;
	right: 5.333333333vw;
	width: auto;
	height: 8vw;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	background: var(--color-white);
	border-radius: 4vw;
	padding: 0 4vw;
}

.splide__pagination,
#splide-play-pause {
	display: block;
}

#splide .splide__pagination {
	position: static;
	margin-right: 2.4vw;
	padding: 0;
	display: flex !important;
	flex-wrap: nowrap;
}

@property --p {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0turn;
}

.splide__pagination button {
	margin: 0 2.133333333vw 0 0;
	width: 4.533333333vw;
	height: 4.533333333vw;
	background: none;
	position: relative;
	opacity: 1;
}

.splide__pagination button::after {
	content: '';
	width: 4.533333333vw;
	height: 4.533333333vw;
	background-color: var(--color-primary);
	-webkit-mask: var(--icon-dot);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
}

.splide__pagination button.is-active {
	width: 4.533333333vw;
	height: 4.533333333vw;
	border-radius: 50%;
	background: none;
	transform: scale(1);
}

.splide__pagination button.is-active::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background: conic-gradient(var(--color-primary) 0turn var(--p), transparent 0turn);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	animation: circle-draw 5s ease-out forwards;
}

.splide__pagination button.is-active::after {
	content: '';
	width: 4.533333333vw;
	height: 4.533333333vw;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

@keyframes circle-draw {
	to {
		--p: 1turn;
	}
}

@media (prefers-reduced-motion: reduce) {
	.splide__pagination button.is-active::before {
		animation: none;
		--p: 1turn;
	}
}

.splide__pagination__page:hover {
	opacity: 1;
}

.splide__toggle {
	width: 2.4vw;
	height: 2.4vw;
	position: relative;
}

.splide__toggle .splide__toggle__play {
	content: '';
	width: 2vw;
	height: 2.4vw;
	background-color: var(--color-primary);
	-webkit-mask: var(--icon-play);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 1.2vw);
	left: calc(50% - 1vw);
}

.splide__toggle .splide__toggle__pause {
	content: '';
	width: 2vw;
	height: 2.4vw;
	background-color: var(--color-primary);
	-webkit-mask: var(--icon-pause);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: absolute;
	top: calc(50% - 1.2vw);
	left: calc(50% - 1vw);
}

.mv_copy_wrapper {
	position: absolute;
	left: -8vw;
	bottom: 18.66666667vw;
	width: 79.73333333vw;
	height: 27.46666667vw;
}

.mv_copy_wrapper::after {
	content: "";
	display: block;
	position: absolute;
	top: 1.333333333vw;
	left: 1.333333333vw;
	width: 79.73333333vw;
	height: 27.46666667vw;
	background: var(--gradation1);
	z-index: 0;
}

.mv_copy {
	position: relative;
	width: 79.73333333vw;
	height: 27.46666667vw;
	padding: 4vw 0 0 2.666666667vw;
	background: var(--color-white);
	text-align: left;
	z-index: 1;
}

.mv_copy .mv_copy_en .en01 {
	display: block;
	width: 73.86666667vw;
	height: 6.4vw;
	background: var(--copy-en01) no-repeat left center /contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.mv_copy .mv_copy_en .en02 {
	display: block;
	margin: 0.8vw 0 0;
	width: 45.2vw;
	height: 6.4vw;
	background: var(--copy-en02) no-repeat left center /contain;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.mv_copy h1 {
	margin: 2.4vw 0 0;
	font-size: 3.733333333vw;
	font-weight: 600;
	line-height: 1;
	color: var(--color-black);
}

.deco.seagull {
	width: 19.2vw;
	height: 11.73333333vw;
	background-image: var(--img-seagull);
	right: -6.666666667vw;
	top: -2.133333333vw;
}

.deco.dolphin {
	width: 13.33333333vw;
	height: 13.6vw;
	background-image: var(--img-dolphin);
	left: -6.666666667vw;
	top: 12.8vw;
}

.deco.hibiscus_mv {
	width: 20vw;
	height: 14.13333333vw;
	background-image: var(--img-hibiscus-mv);
	left: -6vw;
	bottom: -5.6vw;
}

/*==================================================
[sp]message
================================================== */
section.message {
	padding: 10.66666667vw 0 20vw;
	background: linear-gradient(180deg, var(--color-transparent) 18%, var(--color-light-yellow) 19%);
}

.message p.subtitle {
	background-image: var(--subtitle-message);
}

.message h3.heading {
	margin: 0 0 4vw;
}

.message h3.heading span {
	text-align: left;
	display: inline-block;
	padding: 0 2.666666667vw;
	margin: 0 0 0.8vw;
	font-size: 5.066666667vw;
	color: var(--color-white);
	font-weight: 600;
	line-height: 10.66666667vw;
	background: var(--color-primary);
}

.message .text_part p {
	font-size: 4.266666666666667vw;
	font-weight: 400;
	line-height: 1.75;
	font-weight: 600;
	color: var(--color-black);
}

.message .text_part p+p {
	margin: 2.4vw 0 0;
}

.deco.starfish {
	width: 16.4vw;
	height: 10.53333333vw;
	background-image: var(--img-starfish);
	right: 8vw;
	bottom: 6.666666667vw;
}

/*==================================================
[sp]news
================================================== */
section.news {
	padding: 20vw 0;
}

.news p.subtitle {
	background-image: var(--subtitle-news);
}

.news_list {
	border-top: 0.266666666666667vw solid var(--color-light-gray);
	margin: 0;
	width: 100%;
}

.news_item {
	padding: 8vw 0;
	border-bottom: 0.266666666666667vw solid var(--color-light-gray);
}

.news_label {
	line-height: 1;
	font-weight: 400;
	font-size: 3.2vw;
	color: var(--color-black);
}

.news_text {
	margin: 4vw 0 0;
}

.news_text p,
.news_text li {
	line-height: 1.75;
	font-size: 4.266666667vw;
	font-weight: 600;
	color: var(--color-black);
}

.news_text li {
	margin-top: 1.6vw;
}

.news_text a {
	display: block;
	padding: 0 14.4vw 0 0;
	position: relative;
	color: var(--color-black);
}

.news_text a.link_single {
	width: fit-content;
	line-height: 10.66666667vw;
}

.news_text a::before {
	content: "";
	display: block;
	width: 10.66666667vw;
	height: 10.66666667vw;
	border-radius: 5.333333333vw;
	border: 0.72vw solid var(--color-primary);
	background: var(--color-white);
	position: absolute;
	right: 0;
	top: 0;
}

.news_text a::after {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: 3.733333333vw;
	right: 3.733333333vw;
	background: var(--icon-arrow-right);
}



/*==================================================
[sp]company
================================================== */
section.company {
	padding: 10.26666667vw 0 12vw;
	background: url(../img/top/bg_company_sp.webp) no-repeat center top/ contain,
		url(../img/top/bg_company_btm_sp.webp) no-repeat center bottom / contain;
}

.company .bgframe {
	padding: 21.33333333vw 0;
	background: var(--color-bg-blue-down);
}

.deco.fish {
	width: 28.26666667vw;
	height: 12.93333333vw;
	background-image: var(--img-fish);
	right: 8vw;
	top: 4vw;
}

.deco.turtle {
	width: 14.93333333vw;
	height: 13.6vw;
	background-image: var(--img-turtle);
	left: 8vw;
	bottom: 0vw;
}

.company .panel+.panel {
	margin-top: 10.66666667vw;
}

.company .panel a {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.company .title_part {
	width: 100%;
	padding: 8vw;
	position: relative;
}

.company .text {
	width: 100%;
}

.company .text::before {
	content: "";
	display: block;
	width: 10.66666667vw;
	height: 10.66666667vw;
	border-radius: var(--bd-radius);
	border: 0.72vw solid var(--color-primary);
	background: var(--color-white);
	position: absolute;
	right: 8vw;
	top: calc(50% - 5.333333333vw);
}

.company .text::after {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: calc(50% - 1.6vw);
	right: 11.46666667vw;
	background: var(--icon-arrow-right);
}

.company #company p.subtitle {
	margin-bottom: 4vw;
	background-image: var(--subtitle-company);
}

.company #recruit p.subtitle {
	margin-bottom: 4vw;
	background-image: var(--subtitle-recruit);
}

.company h2.title {
	margin-bottom: 0;
	font-size: 4.266666667vw;
}

.deco.hibiscus-com {
	width: 13.6vw;
	height: 13.6vw;
	background-image: var(--img-hibiscus-red);
	left: 4.8vw;
	bottom: 3.6vw;
}

.deco.hibiscus-rec {
	width: 13.6vw;
	height: 13.6vw;
	background-image: var(--img-hibiscus-org);
	left: 4.8vw;
	bottom: 3.6vw;
}

/*==================================================
[sp]business
================================================== */
section.business {
	padding: 21.33333333vw 0;
}

.deco.banana {
	width: 13.33333333vw;
	height: 11.2vw;
	background-image: var(--img-banana);
	left: 8vw;
	bottom: 4vw;
}

.business p.subtitle {
	background-image: var(--subtitle-business);
}

.business p.leadtext {
	font-size: 4.266666666666667vw;
	font-weight: 400;
	line-height: 1.75;
	color: var(--color-black);
}

.business .panel {
	margin: 10.66666667vw 0 0;
}

.business .panel a {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
}

.business .panel .img_photo {
	width: 89.33333333vw;
	height: 59.2vw;
	overflow: hidden;
}

.business .panel .img_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.business .panel#pnl_fountain .img_photo img {
	object-position: right top;
}

.business .panel .deco.vending_img {
	width: 22.4vw;
	right: 4.8vw;
	top: 24vw;
}

.business .title_part {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	width: 100%;
	height: 18.66666667vw;
	padding: 0 5.333333333vw;
	background: var(--gradation2);
}

.business .title_part p {
	color: var(--color-white);
	font-size: 5.6vw;
	line-height: 1;
	font-weight: 600;
}

.business .title_part::before {
	content: "";
	display: block;
	width: 10.66666667vw;
	height: 10.66666667vw;
	border-radius: var(--bd-radius);
	border: 0.72vw solid var(--color-white);
	background: var(--color-transparent);
	position: absolute;
	right: 5.333333333vw;
	top: calc(50% - 5.333333333vw);
}

.business .title_part::after {
	content: '';
	display: block;
	width: 3.2vw;
	height: 3.2vw;
	position: absolute;
	top: calc(50% - 1.6vw);
	right: 8.8vw;
	background: var(--icon-arrow-right-white);
}

/*==================================================
[sp]group
================================================== */
main#top_page section.group {
	padding: 10.26666667vw 0 0;
	background: url(../img/bg_group_sp.webp) no-repeat center top/ contain;
}

.group .bgframe {
	padding: 21.33333333vw 0 32vw;
	background: var(--color-bg-blue);
}

.deco.shark {
	width: 25.6vw;
	height: 8.666666667vw;
	background-image: var(--img-shark);
	right: 8vw;
	top: 6.4vw;
}

.group p.subtitle {
	background-image: var(--subtitle-group);
}

.group .banner a {
	display: block;
	width: 89.33333333vw;
	height: 26.66666667vw;
	margin: 10.66666667vw 0 0;
	box-shadow: var(--panel-shadow);
}
.group .banner p {
	margin: 3.2vw 0 0;
font-size: 3.2vw;
text-align: center;
line-height: 1.35;
}

@media (min-width: 768px) {

	/*==================================================
  [PC]Base TOP 
================================================== */
	main#top_page {
		max-width: 1920px;
		min-width: 1200px;
		margin: 0 auto;
		padding: 0;
	}

	main#top_page section .inner {
		width: 1200px;
		margin: 0 auto;
	}

	/*==================================================
[PC]COMMON TOP 
================================================== */

	section h2.title {
		width: 100%;
		font-size: 20px;
		margin-bottom: 40px;
	}

	section p.subtitle {
		width: 100%;
		height: 40px;
		margin-bottom: 24px;
	}

	/*==================================================
[pc] top上部
================================================== */
	.top_contents {
		max-width: 1920px;
		margin: 0 auto;
		padding: 0 0 69px;
		background: url(../img/top/bg_top_pc.webp) no-repeat center top 300px/ 1920px auto,
			url(../img/top/bg_message_pc.webp) no-repeat center bottom / 1920px auto;
	}

	/*==================================================
[pc]mv
================================================== */
	section.mv {
		padding: 30px 0 37px;
	}

	.mv_contents {
		width: 1100px;
		height: 616px;
		margin: 0 auto;
	}

	.mv .splide__slide img {
		height: 616px;
	}
		.mv .splide__slide a:hover img {
			opacity: 0.9;
	}

	.splide_control {
		bottom: 40px;
		right: 40px;
		height: 40px;
		border-radius: 20px;
		padding: 0 20px;
	}

	#splide .splide__pagination {
		margin-right: 12px;
	}

	.splide__pagination button {
		margin: 0 12px 0 0;
		width: 22px;
		height: 22px;
	}

	.splide__pagination button::after {
		width: 22px;
		height: 22px;
	}

	.splide__pagination button.is-active {
		width: 22px;
		height: 22px;
	}

	.splide__pagination button.is-active::after {
		width: 22px;
		height: 22px;
	}

	.splide__toggle {
		width: 12px;
		height: 12px;
	}

	.splide__toggle .splide__toggle__play {
		width: 9px;
		height: 10.5px;
		top: calc(50% - 5.25px);
		left: calc(50% - 4.5px);
	}

	.splide__toggle .splide__toggle__pause {
		width: 9px;
		height: 12px;
		top: calc(50% - 6px);
		left: calc(50% - 4.5px);
	}

	.mv_copy_wrapper {
		position: absolute;
		left: -50px;
		bottom: 123px;
		width: 820px;
		height: 140px;
	}

	.mv_copy_wrapper::after {
		top: 10px;
		left: 10px;
		width: 820px;
		height: 140px;
	}

	.mv_copy {
		width: 820px;
		height: 140px;
		padding: 30px 0 0 20px;
	}

	.mv_copy .mv_copy_en {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 17px;
	}

	.mv_copy .mv_copy_en .en01 {
		width: 473px;
		height: 41px;
		margin: 0;
	}

	.mv_copy .mv_copy_en .en02 {
		width: 290px;
		height: 41px;
		margin: 0;
	}

	.mv_copy h1 {
		margin: 18px 0 0;
		font-size: 20px;
	}

	.deco.seagull {
		width: 120px;
		height: 73px;
		right: -50px;
		top: 47px;
	}

	.deco.dolphin {
		width: 84px;
		height: 84px;
		left: -134px;
		top: 186px;
	}

	.deco.hibiscus_mv {
		width: 126px;
		height: 90px;
		left: -32px;
		bottom: -37px;
	}

	/*==================================================
[pc]message
================================================== */
	section.message {
		padding: 40px 0 60px;
		background: linear-gradient(180deg, var(--color-transparent) 86%, var(--color-light-yellow) 86%);
	}

	.message h3.heading {
		margin: 0 0 30px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.message h3.heading span {
		padding: 0;
		margin: 0;
		font-size: 28px;
		line-height: 60px;
	}

	.message h3.heading span:first-child {
		padding-left: 10px;
	}

	.message h3.heading span:last-child {
		padding-right: 10px;
	}

	.message .text_part {
		width: 710px;
		margin: 0 auto;
	}

	.message .text_part p {
		font-size: 16px;
	}

	.message .text_part p+p {
		margin: 15px 0 0;
	}

	.deco.starfish {
		width: 102px;
		height: 65px;
		right: calc(50% - 575px);
		bottom: 40px;
	}

	/*==================================================
[PC]news
================================================== */
	section.news {
		padding: 100px 0;
	}

	.news .inner {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.news .title_container {
		width: 430px;
		padding: 50px 0 0;
	}

	.news_list {
		width: 58.333333333333333%;
		border-width: 1px;
	}

	.news_item {
		padding: 30px 0;
		border-width: 1px;
	}

	.news_label {
		font-size: 16px;
	}

	.news_text {
		margin: 10px 0 0;
	}

	.news_text p,
	.news_text li {
		font-size: 20px;
	}

	.news_text ul {
		margin: 20px 0 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 40px;
	}

	.news_text li {
		margin: 0;
	}

	.news_text a {
		padding: 0 40px 0 0;
	}

	.news_text a.link_single {
		width: fit-content;
		line-height: 30px;
	}

	.news_text a::before {
		width: 30px;
		height: 30px;
		border-radius: 15px;
		border-width: 2px;
		transition: var(--transition-normal);
	}

	.news_text a::after {
		width: 10px;
		height: 10px;
		top: 10px;
		right: 10px;
		transition: var(--transition-normal);
	}

	.news_text a:hover,
	.news_text a p:hover {
		color: var(--color-primary);
	}

	.news_text a:hover::before {
		background: var(--color-primary);
	}

	.news_text a:hover::after {
		background: var(--icon-arrow-right-white);
		right: 5px;
	}




	/*==================================================
[pc]company
================================================== */
	section.company {
		padding: 80px 0 90px;
		background: url(../img/top/bg_company_pc.webp) no-repeat center top/ 1920px 80px,
			url(../img/top/bg_company_btm_pc.webp) no-repeat center bottom / 1920px 90px;
	}

	.company .bgframe {
		padding: 90px 0;
	}

	.deco.fish {
		width: 176px;
		height: 80px;
		right: calc(50% - 685px);
		top: -20px;
	}

	.deco.turtle {
		width: 93px;
		height: 85px;
		left: calc(50% - 698px);
		bottom: -24px;
	}

	.company .panel+.panel {
		margin-top: 65px;
	}

	.company .panel a {
		flex-direction: row;
		height: 386px;
	}

	.company .title_part {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		width: 626px;
		height: 100%;
		padding: 0;
	}

	.company .text {
		padding: 0 20px 0 0;
	}

	.company .text::before {
		width: 64px;
		height: 64px;
		border-radius: 32px;
		border-width: 4px;
		right: 104px;
		top: calc(50% - 32px);
		transition: var(--transition-normal);
	}

	.company .text::after {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		top: calc(50% - 10px);
		right: 126px;
		transition: var(--transition-normal);
	}

	.company #company p.subtitle {
		margin-bottom: 24px;
	}

	.company #recruit p.subtitle {
		margin-bottom: 24px;
	}

	.company h2.title {
		margin-bottom: 0;
		font-size: 20px;
	}

	.deco.hibiscus-com {
		width: 85px;
		height: 85px;
		left: 49px;
		bottom: 52px;
	}

	.deco.hibiscus-rec {
		width: 85px;
		height: 85px;
		right: 44px;
		left: auto;
		bottom: 36px;
	}

	.company .img_photo {
		width: 574px;
		height: 386px;
	}

	.company .panel a:hover .text::before {
		background: var(--color-primary);
	}

	.company .panel a:hover .text::after {
		background: var(--icon-arrow-right-white);
	}

	.company .panel a:hover .text::after {
		right: 118px;
	}

	/*==================================================
[pc]business
================================================== */
	section.business {
		padding: 100px 0;
	}

	.deco.banana {
		width: 84px;
		height: 70px;
		left: calc(50% - 698px);
		bottom: 22px;
	}

	.business p.leadtext {
		font-size: 16px;
		text-align: center;
	}

	.business .panel_grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 56px;
		width: 1200px;
		margin: 56px 0 0;
	}

	.business .panel {
		margin: 0;
	}

	.business .panel .img_photo {
		width: 572px;
		height: 380px;
		overflow: hidden;
	}

	.business .panel .deco.vending_img {
        width: 150px;
        right: 30px;
        top: 145px;
	}

	.business .title_part {
		height: 120px;
		padding: 0 40px;
	}

	.business .title_part p {
		font-size: 32px;
	}

	.business .panel .img_photo {
		width: 100%;
		height: 380px;
		overflow: hidden;
	}

	.business .panel .img_photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.business .title_part:before {
		width: 64px;
		height: 64px;
		border-radius: 32px;
		border-width: 4px;
		right: 40px;
		top: calc(50% - 32px);
		transition: var(--transition-normal);
	}

	.business .title_part::after {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		top: calc(50% - 10px);
		right: 61px;
		transition: var(--transition-normal);
	}

	.business .panel a:hover .title_part::before {
		background: var(--color-white);
	}

	.business .panel a:hover .title_part::after {
		background: var(--icon-arrow-right);
	}

	.business .panel a:hover .title_part::after {
		right: 53px;
	}

	/*==================================================
[PC]group
================================================== */
	main#top_page section.group {
		padding: 80px 0 0;
		background: url(../img/bg_group_pc.webp) no-repeat center top/ 1920px auto;
	}

	.group .bgframe {
		padding: 90px 0 100px;
	}

	.deco.shark {
		width: 192px;
		height: 65px;
		background-image: var(--img-shark);
		right: calc(50% - 685px);
		top: 98px;
	}

	.group p.subtitle {
		background-image: var(--subtitle-group);
	}

	.group .banner a {
		display: block;
		position: relative;
		width: 900px;
		height: 270px;
		margin: 80px auto 0;
		box-shadow: var(--panel-shadow);
	}

	.group .banner a::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 10px solid var(--color-transparent);
		transition: var(--transition-normal);
	}

	.group .banner a:hover {
		box-shadow: var(--panel-shadow-hover);
	}

	.group .banner a:hover::after {
		border-color: var(--color-primary);
	}

	.group .banner p {
	margin: 20px 0 0;
font-size: 14px;
/*text-align: center;
line-height: 1.35;*/
}


}