@charset "UTF-8";
/* CSS Document */
.pageTop #ctsWrapper{
	margin-bottom: 0;
}

/*
	コンテンツ共通
-----------------------------------------------------------------------------------------------*/
/* タイトル周り
============================== */
.titTopArea{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	position: relative;
	z-index: 5;
}
.titTopArea .titCmnBasic{
	font-size: max(6.0rem, calc(60 / var(--baseWidth) * 100vw));
	z-index: 6;
}
.titTopArea .txt{
	font-size: max(1.6rem, calc(16 / var(--baseWidth) * 100vw));
}
.titTopArea .en{
	font-family: var(--ffEn);
	font-size: max(14.0rem, calc(140 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
	line-height: 0.8;
	letter-spacing: -0.2rem;
}

/* 装飾
============================== */
[class^="item"]{
	position: absolute;
	pointer-events: none;
}

/*
	kv
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	position: relative;
}
.kvArea{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: max(770px, calc(770 / var(--baseWidth) * 100vw));
}

/* タイトル
========================================*/
.kvTit{
	color: #fff;
	font-weight: var(--fwRegular);
	text-align: center;
	line-height: 1.3;
	letter-spacing: 0.5rem;
	z-index: 1;
	transform: translate(min(-15px, calc(-15 / var(--baseWidth) * 100vw)), min(-70px, calc(-70 / var(--baseWidth) * 100vw)));
}
.kvTit [class^="txt"]{
	display: inline-block;
	position: relative;
}
.kvTit .txtS{
	font-size: max(42px, calc(42 / var(--baseWidth) * 100vw));
}
.kvTit .txtM{
	font-size: max(54px, calc(54 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.kvTit .txtL{
	font-size: max(56px, calc(56 / var(--baseWidth) * 100vw));
}
.kvTit .txtXL{
	font-size: max(62px, calc(62 / var(--baseWidth) * 100vw));
}
.kvTit .txtXXL{
	margin-inline: 2px;
	font-size: max(68px, calc(68 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
/* 下線 */
.kvTit .line::after{
	content: "";
	width: 100%;
	height: 1px;
	background: var(--gdSky);
	position: absolute;
	left: 0;
	bottom: 0;
}

/* 装飾
============================== */
/* アメーバブルー */
.itemKv01{
	width: max(1117px, calc(1117 / var(--baseWidth) * 100vw));
	top: 0;
	right: 0;
}
/* アメーバパープル */
.itemKv02{
	width: max(293px, calc(293 / var(--baseWidth) * 100vw));
	top: max(360px, calc(360 / var(--baseWidth) * 100vw));
	left: min(-60px, calc(-60 / var(--baseWidth) * 100vw));
}
/* アメーバエメラルド */
.itemKv03{
	width: max(80px, calc(80 / var(--baseWidth) * 100vw));
	top: max(120px, calc(120 / var(--baseWidth) * 100vw));
	right: max(150px, calc(150 / var(--baseWidth) * 100vw));
}
/* アメーバピンク */
.itemKv04{
	width: max(357px, calc(357 / var(--baseWidth) * 100vw));
	right: max(230px, calc(230 / var(--baseWidth) * 100vw));
	bottom: max(25px, calc(25 / var(--baseWidth) * 100vw));
}
/* イラスト */
.itemKv05{
	width: max(234px, calc(234 / var(--baseWidth) * 100vw));
	top: max(100px, calc(100 / var(--baseWidth) * 100vw));
	left: max(100px, calc(100 / var(--baseWidth) * 100vw));
	z-index: -1;
}

/* 最新ニュース
============================== */
#kvNewsArea{
	width: var(--widthBase);
	margin: 0 auto;
	padding-inline: max(30px, calc(30 / var(--baseWidth) * 100vw));
	transform: translateY(min(-80px, calc(-80 / var(--baseWidth) * 100vw)));
	position: relative;
}
#kvNewsArea::before{
	content: "";
	width: max(120px, calc(120 / var(--baseWidth) * 100vw));
	height: 1px;
	background-color: var(--colorGrey100);
	position: absolute;
	top: 50%;
	left: calc(max(120px, calc(120 / var(--baseWidth) * 100vw)) * -1);
	transform: translateY(-50%);
}
/* リスト */
#kvNewsArea .listNews > li{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"date category"
		"txt txt";
	align-items: center;
	gap: 10px 20px;
}
#kvNewsArea .listNews .date{
	grid-area: date;
}
#kvNewsArea .listNews .category{
	grid-area: category;
	justify-self: start;
}
#kvNewsArea .listNews .txt{
	grid-area: txt;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* アニメーション
============================== */
.itemKv01.jsAnmStart{
	animation-delay: .3s;
}
.itemKv02.jsAnmStart{
	animation-delay: .5s;
}
.itemKv03.jsAnmStart{
	animation-delay: .7s;
}
.itemKv04.jsAnmStart{
	animation-delay: .9s;
}
.itemKv05.jsAnmStart{
	animation-delay: 1.1s;
}
.kvTit.jsAnmStart{
	animation-delay: 1.4s;
}


/*
	intro
-----------------------------------------------------------------------------------------------*/
#introWrapper{
	margin-bottom: max(100px, calc(100 / var(--baseWidth) * 100vw));
	position: relative;
}

/* イントロ上部
========================================*/
.introHead{
	display: grid;
	grid-template-columns: max(410px, calc(410 / var(--baseWidth) * 100vw)) 1fr;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
	margin-bottom: max(90px, calc(90 / var(--baseWidth) * 100vw));
}
/* 3つの価値 */
.introCircle{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: max(20px, calc(20 / var(--baseWidth) * 100vw));
	aspect-ratio: 1/1;
	text-align: center;
	border-radius: 50%;
	background: var(--bgStripe);
}
.introCircle .txt{
	text-align: center;
	line-height: 1.2;
}
.introCircle .sm{
	font-size: max(2.2rem, calc(22 / var(--baseWidth) * 100vw));
}
.introCircle .num{
	margin-left: max(60px, calc(60 / var(--baseWidth) * 100vw));
	color: var(--colorBlue);
	font-family: var(--ffEn);
	font-size: max(20.0rem, calc(200 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
	line-height: 0.8;
}
.introCircle .sub{
	margin-left: min(-10px, calc(-10 / var(--baseWidth) * 100vw));
	font-size: max(3.4rem, calc(34 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.introCircle .lg{
	display: block;
	font-size: max(6.6rem, calc(66 / var(--baseWidth) * 100vw));
}
/* コピー */
.introText{
	margin-top: max(70px, calc(70 / var(--baseWidth) * 100vw));
	color: var(--colorBlue);
	font-size: max(1.7rem, calc(17 / var(--baseWidth) * 100vw));
}
.introText .txt + .txt{
	margin-top: max(20px, calc(20 / var(--baseWidth) * 100vw));
}

/* 3つの価値
========================================*/
.listIntro{
	display: flex;
	flex-direction: column;
	gap: max(40px, calc(40 / var(--baseWidth) * 100vw));
	width: max(970px, calc(970 / var(--baseWidth) * 100vw));
	margin-inline: auto max(30px, calc(30 / var(--baseWidth) * 100vw));
	margin-left: auto;
	position: relative;
	z-index: 1;
}
.listIntroItem{
	display: grid;
	grid-template-columns: max(130px, calc(130 / var(--baseWidth) * 100vw)) 1fr;
	gap: max(50px, calc(50 / var(--baseWidth) * 100vw));
	align-items: center;
}
/* 番号 */
.listIntroItem .num{
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(130px, calc(130 / var(--baseWidth) * 100vw));
	aspect-ratio: 1/1;
	color: #fff;
	font-family: var(--ffEn);
	font-size: max(5.0rem, calc(50 / var(--baseWidth) * 100vw));
	font-weight: var(--fwThin);
	position: relative;
	z-index: 1;
}
.listIntroItem .num::before{
	content: "";
	position: absolute;
	inset: 0;
	background: url("/images/bg_top_intro_num_01_pc.png") no-repeat center center / contain;
	z-index: -1;
}
.listIntroItem:nth-of-type(2) .num::before{
	background-image: url("/images/bg_top_intro_num_02_pc.png");
}
.listIntroItem:nth-of-type(3) .num::before{
	background-image: url("/images/bg_top_intro_num_03_pc.png");
}
/* box */
.listIntro .box{
	display: grid;
	grid-template-columns: max(70px, calc(70 / var(--baseWidth) * 100vw)) 1fr;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	align-items: center;
	min-height: max(150px, calc(150 / var(--baseWidth) * 100vw));
	padding-block: max(30px, calc(30 / var(--baseWidth) * 100vw));
	padding-inline: max(40px, calc(40 / var(--baseWidth) * 100vw)) 0;
	background: #fff;
	border: 1px solid var(--colorGrey100);
	border-radius: 999px;
	position: relative;
}
.listIntroItem .box::before{
	content: "";
	width: max(65px, calc(65 / var(--baseWidth) * 100vw));
	height: 1px;
	background: var(--colorGrey100);
	position: absolute;
	top: 50%;
	left: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	transform: translateY(-50%);
}
/* アイコン */
.listIntro .ico img{
	width: 100%;
}
/* 見出し */
.listIntro .midashi{
	display: inline-block;
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
	background: linear-gradient(transparent calc(100% - 8px), var(--bgBlue) 0);
}
/* テキスト */
.listIntro .txt{
	margin-top: max(10px, calc(10 / var(--baseWidth) * 100vw));
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
}

/* 装飾
============================== */
/* アメーバパープル */
.itemIntro01{
	width: max(250px, calc(250 / var(--baseWidth) * 100vw));
	top: max(440px, calc(440 / var(--baseWidth) * 100vw));
	right: min(-5px, calc(-5 / var(--baseWidth) * 100vw));
}
/* アメーバエメラルド */
.itemIntro02{
	width: max(200px, calc(200 / var(--baseWidth) * 100vw));
	top: max(380px, calc(380 / var(--baseWidth) * 100vw));
	right: min(-10px, calc(-10 / var(--baseWidth) * 100vw));
	z-index: -1;
}
/* イラスト */
.itemIntro03{
	width: max(210px, calc(210 / var(--baseWidth) * 100vw));
	top: max(240px, calc(240 / var(--baseWidth) * 100vw));
	right: max(160px, calc(160 / var(--baseWidth) * 100vw));
	z-index: -2;
}


/*
	about
-----------------------------------------------------------------------------------------------*/
#aboutWrapper{
	padding-block: max(120px, calc(120 / var(--baseWidth) * 100vw)) max(100px, calc(100 / var(--baseWidth) * 100vw));
	background: #fff;
	position: relative;
}
#aboutWrapper::before{
	content: "";
	background-image: var(--bgGrid);
	background-size: 20px 20px;
	position: absolute;
	top: max(120px, calc(120 / var(--baseWidth) * 100vw));
	bottom: max(120px, calc(120 / var(--baseWidth) * 100vw));
	left: 0;
	right: 0;
	z-index: 0;
}
#aboutWrapper .ctsArea{
	padding-block: max(100px, calc(100 / var(--baseWidth) * 100vw));
	position: relative;
	z-index: 1;
}

/* タイトル周り
============================== */
#aboutWrapper .titTopArea{
	position: absolute;
	top: max(230px, calc(230 / var(--baseWidth) * 100vw));
	left: max(130px, calc(130 / var(--baseWidth) * 100vw));
}
#aboutWrapper .titTopArea .titCmnBasic,
#aboutWrapper .titTopArea .txt{
	color: #fff;
	z-index: 1;
}
#aboutWrapper .titTopArea .en{
	color: var(--colorEmerald);
	writing-mode: vertical-lr;
	position: absolute;
	top: min(-80px, calc(-80 / var(--baseWidth) * 100vw));
	left: min(-30px, calc(-30 / var(--baseWidth) * 100vw));
	opacity: 0.15;
}

/* リンクボタン
============================== */
.listAboutLinks{
	display: grid;
	grid-template-columns: repeat(57, max(20px, calc(20 / var(--baseWidth) * 100vw)));
	grid-template-rows: repeat(32, max(20px, calc(20 / var(--baseWidth) * 100vw)));
}
.listAboutLinks > li > a{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
/* テキスト */
.listAboutLinks > li .txt{
	margin-bottom: max(20px, calc(20 / var(--baseWidth) * 100vw));
	padding: 0 max(20px, calc(20 / var(--baseWidth) * 100vw)) max(20px, calc(20 / var(--baseWidth) * 100vw)) 0;
	font-size: max(2.4rem, calc(24 / var(--baseWidth) * 100vw));
	line-height: 1.4;
	border-bottom: 1px solid #000;
	transition: var(--transitionBase);
}
.listAboutLinks > li .txt .logo{
	display: inline-block;
	width: 160px;
	height: auto;
	padding-right: 10px;
}
/* 画像 */
.listAboutLinks > li .phWrap{
	position: relative;
}
.listAboutLinks > li .ph{
	display: block;
	width: max(200px, calc(200 / var(--baseWidth) * 100vw));
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 50%;
	overflow: hidden;
}
/* 矢印 */
.listAboutLinks > li .ico{
	display: block;
	width: var(--btnBase);
	aspect-ratio: 1/1;
	background: #000;
	border-radius: 50%;
	position: absolute;
	right: max(145px, calc(145 / var(--baseWidth) * 100vw));
	bottom: min(-5px, calc(-5 / var(--baseWidth) * 100vw));
	transition: var(--transitionBase);
}
.listAboutLinks > li .ico::before{
	content: "";
	width: calc(var(--btnBase) * 0.32);
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-60%,-50%);
	transition: var(--transitionBase);
}
.listAboutLinks > li .ico::after{
	content: "";
	width: calc(var(--btnBase) * 0.16);
	aspect-ratio: 1/1;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-20%,-50%) rotate(45deg);
	transition: var(--transitionBase);
}
@media (any-hover: hover){
	.listAboutLinks > li > a:hover .txt{
		border-color: var(--colorBlue);
	}
	.listAboutLinks > li > a:hover .ico{
		background: var(--colorBlue);
	}
	.listAboutLinks > li > a:hover .ico::before{
		transform: translate(
			calc(-60% + max(4px, calc(4 / var(--baseWidth) * 100vw))),
			-50%
		);
	}
	.listAboutLinks > li > a:hover .ico::after{
		transform: translate(
			calc(-20% + max(4px, calc(4 / var(--baseWidth) * 100vw))),
			-50%
		) rotate(45deg);
	}
}
/* 配置 */
.listAboutLinks > li:nth-of-type(1){
	grid-column: 37/57;
	grid-row: 1/10;
}
.listAboutLinks > li:nth-of-type(2){
	grid-column: 27/47;
	grid-row: 12/22;
}
.listAboutLinks > li:nth-of-type(3){
	grid-column: 9/35;
	grid-row: 23/33;
}
.listAboutLinks > li:nth-of-type(4){
	grid-column: 36/56;
	grid-row: 23/33;
}

/* 装飾
============================== */
/* アメーバエメラルド大 */
.itemAbout01{
	width: max(727px, calc(727 / var(--baseWidth) * 100vw));
	top: min(-85px, calc(-85 / var(--baseWidth) * 100vw));
	left: 0;
}
/* アメーバエメラルド小 */
.itemAbout02{
	width: max(518px, calc(518 / var(--baseWidth) * 100vw));
	right: 0;
	bottom: 0;
}
/* アメーバピンク */
.itemAbout03{
	width: max(168px, calc(168 / var(--baseWidth) * 100vw));
	top: max(50px, calc(50 / var(--baseWidth) * 100vw));
	right: max(50px, calc(50 / var(--baseWidth) * 100vw));
}
/* アメーバブルー */
.itemAbout04{
	width: max(460px, calc(460 / var(--baseWidth) * 100vw));
	right: max(100px, calc(100 / var(--baseWidth) * 100vw));
	bottom: max(300px, calc(300 / var(--baseWidth) * 100vw));
}
/* イラスト */
.itemAbout05{
	width: max(120px, calc(120 / var(--baseWidth) * 100vw));
	top: max(55px, calc(55 / var(--baseWidth) * 100vw));
	left: max(660px, calc(660 / var(--baseWidth) * 100vw));
}



/*
	service
-----------------------------------------------------------------------------------------------*/
#serviceWrapper{
	margin-bottom: max(100px, calc(100 / var(--baseWidth) * 100vw));
	background: url("/images/bg_top_service_pc.png") no-repeat top center / 100%;
	position: relative;
	z-index: 0;
}
#serviceWrapper .ctsArea{
	padding-block: max(200px, calc(200 / var(--baseWidth) * 100vw));
}

/* タイトル周り
============================== */
#serviceWrapper .titTopArea .titLogo{
	width: max(480px, calc(480 / var(--baseWidth) * 100vw));
	position: absolute;
	top: max(100px, calc(100 / var(--baseWidth) * 100vw));
	right: max(140px, calc(140 / var(--baseWidth) * 100vw));
}
#serviceWrapper .titTopArea .titLogo img{
	width: 100%;
}

/* 製品・サービス情報
============================== */
.serviceCtsArea{
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: max(709px, calc(709 / var(--baseWidth) * 100vw));
	margin-left: max(50px, calc(50 / var(--baseWidth) * 100vw));
	position: relative;
	z-index: 1;
}
.serviceCtsArea .txtArea{
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-inline: max(30px, calc(30 / var(--baseWidth) * 100vw)) max(70px, calc(70 / var(--baseWidth) * 100vw));
}

/* 装飾
============================== */
/* アメーバパープル大 */
.itemService01{
	width: max(802px, calc(802 / var(--baseWidth) * 100vw));
	top: min(-80px, calc(-80 / var(--baseWidth) * 100vw));
	right: min(-30px, calc(-30 / var(--baseWidth) * 100vw));
}
/* アメーバパープル小 */
.itemService02{
	width: max(221px, calc(221 / var(--baseWidth) * 100vw));
	left: min(-30px, calc(-30 / var(--baseWidth) * 100vw));
	bottom: max(370px, calc(370 / var(--baseWidth) * 100vw));
}
/* アメーバブルー*/
.itemService03{
	width: max(243px, calc(243 / var(--baseWidth) * 100vw));
	right: 0;
	bottom: max(80px, calc(80 / var(--baseWidth) * 100vw));
}
/* イラスト01*/
.itemService04{
	width: max(180px, calc(180 / var(--baseWidth) * 100vw));
	right: max(360px, calc(360 / var(--baseWidth) * 100vw));
	bottom: max(80px, calc(80 / var(--baseWidth) * 100vw));
}
/* イラスト02*/
.itemService05{
	width: max(105px, calc(105 / var(--baseWidth) * 100vw));
	right: max(260px, calc(260 / var(--baseWidth) * 100vw));
	bottom: max(340px, calc(340 / var(--baseWidth) * 100vw));
}
/* 背景画像 */
[class^="itemServiceBg0"]{
	width: max(1300px, calc(1300 / var(--baseWidth) * 100vw));
	top: max(80px, calc(80 / var(--baseWidth) * 100vw));
	left: max(50px, calc(50 / var(--baseWidth) * 100vw));
	mix-blend-mode: soft-light;
}
.itemServiceBg01{
	z-index: -1;
}
.itemServiceBg02{
	z-index: -2;
}


/*
	message
-----------------------------------------------------------------------------------------------*/
#messageWrapper{
	margin-bottom: max(100px, calc(100 / var(--baseWidth) * 100vw));
	padding-bottom: max(100px, calc(100 / var(--baseWidth) * 100vw));
	background: linear-gradient(
		0deg,
		#fff 0%,
		#ffe6da 40%,
		#e04980 100%
	);
	position: relative;
}
#messageWrapper::before{
	content: "";
	width: calc(100% - max(130px, calc(130 / var(--baseWidth) * 100vw)));
	height: calc(100% - max(100px, calc(100 / var(--baseWidth) * 100vw)));
	background-image: var(--bgGrid);
	background-size: 20px 20px;
	background-color: #fff;
	border-radius: 0 0 0 var(--br100);
	position: absolute;
	top: 0;
	right: 0;
}
#messageWrapper .ctsArea{
	display: flex;
	flex-direction: row-reverse;
	gap: max(40px, calc(40 / var(--baseWidth) * 100vw));
	padding-block: max(100px, calc(100 / var(--baseWidth) * 100vw));
	position: relative;
	z-index: 1;
}

/* タイトル周り
============================== */
#messageWrapper .titTopArea{
	position: absolute;
	top: 0;
	left: max(130px, calc(130 / var(--baseWidth) * 100vw));
}
#messageWrapper .titTopArea .titCmnBasic{
	color: #fff;
}
#messageWrapper .titTopArea .en{
	color: var(--colorPink);
	position: absolute;
	top: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	left: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	opacity: 0.15;
}

/* テキスト周り
============================== */
.messageTxtArea{
	display: flex;
	flex-direction: column;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
	width: max(550px, calc(550 / var(--baseWidth) * 100vw));
	margin-top: max(80px, calc(80 / var(--baseWidth) * 100vw));
}
/* 見出し */
.messageTxtArea .tit [class^="txt"]{
	display: inline-block;
	line-height: 1.0;
}
.messageTxtArea .tit .txtS{
	font-size: max(2.6rem, calc(26 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
}
.messageTxtArea .tit .txtM{
	font-size: max(3.4rem, calc(34 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
}
.messageTxtArea .tit .txtL{
	font-size: max(5.4rem, calc(54 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
}
.messageTxtArea .tit .txtXXL{
	font-size: max(6.1rem, calc(61 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
.messageTxtArea .tit .txtPink{
	color: var(--colorPink);
}
.messageTxtArea .tit br + *{
	margin-top: max(10px, calc(10 / var(--baseWidth) * 100vw));
}
/* ボタン */
.messageTxtArea .btnArea{
	justify-content: flex-start;
}
.messageTxtArea .btnArea .btnBase{
	justify-content: flex-start;
}

/* 画像
============================== */
.messagePhArea{
	width: max(400px, calc(400 / var(--baseWidth) * 100vw));
}
.messagePhArea img{
	border-radius: var(--br100);
}
.messagePhArea figcaption{
	margin-top: max(20px, calc(20 / var(--baseWidth) * 100vw));
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
	text-align: center;
}

/* 装飾
============================== */
/* アメーバピンク01 */
.itemMessage01{
	width: max(784px, calc(784 / var(--baseWidth) * 100vw));
	top: min(-180px, calc(-180 / var(--baseWidth) * 100vw));
	left: min(-75px, calc(-75 / var(--baseWidth) * 100vw));
	z-index: 1;
}
/* アメーバピンク02 */
.itemMessage02{
	width: max(725px, calc(725 / var(--baseWidth) * 100vw));
	top: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	right: min(-80px, calc(-80 / var(--baseWidth) * 100vw));
}
/* エメラルド */
.itemMessage03{
	width: max(200px, calc(200 / var(--baseWidth) * 100vw));
	top: max(140px, calc(140 / var(--baseWidth) * 100vw));
	left: 0;
	z-index: 0;
}


/*
	company
-----------------------------------------------------------------------------------------------*/
#companyWrapper{
	margin-bottom: max(80px, calc(80 / var(--baseWidth) * 100vw));
	position: relative;
	z-index: 0;
}
#companyWrapper .ctsArea{
	display:grid;
	grid-template-columns:repeat(57,max(20px,calc(20 / var(--baseWidth) * 100vw)));
	grid-template-rows:repeat(28,max(20px,calc(20 / var(--baseWidth) * 100vw)));
	position:relative;
}

/* タイトル周り
============================== */
#companyWrapper .titTopArea{
	position: absolute;
	top: min(-5px, calc(-5 / var(--baseWidth) * 100vw));
	right: max(300px, calc(300 / var(--baseWidth) * 100vw));
}
#companyWrapper .titTopArea .titCmnBasic{
	color: #fff;
}
#companyWrapper .titTopArea .en{
	color: var(--colorLightBlue);
	position: absolute;
	top: max(10px, calc(10 / var(--baseWidth) * 100vw));
	left: min(-50px, calc(-50 / var(--baseWidth) * 100vw));
	opacity: 0.15;
}

/* 画像
============================== */
[class^="companyPh"]{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.companyPh01{
	grid-column: 1/17;
	grid-row: 8/29;
	border-radius: var(--br100);
	z-index: 1;
}
.companyPh02{
	grid-column: 11/19;
	grid-row: 1/7;
	border-radius: max(57px, calc(57 / var(--baseWidth) * 100vw));
}
.companyPh03{
	grid-column: 20/36;
	grid-row: 3/14;
	border-radius: var(--br100);
	z-index: -2;
}

/* ボタン
============================== */
.companyBtnArea{
	grid-column: 19/53;
	grid-row: 16;
	display: flex;
	flex-wrap: wrap;
	gap:max(20px,calc(20 / var(--baseWidth) * 100vw));
}
.companyBtnArea .btnBase{
	justify-content: flex-start;
}

/* 装飾
============================== */
/* アメーバブルー大 */
.itemCompany01{
	width: max(641px, calc(641 / var(--baseWidth) * 100vw));
	top: min(-130px, calc(-130 / var(--baseWidth) * 100vw));
	right: 0;
	z-index: -1;
}
/* アメーバブルー小 */
.itemCompany02{
	width: max(220px, calc(220 / var(--baseWidth) * 100vw));
	left: max(45px, calc(45 / var(--baseWidth) * 100vw));
	bottom: min(-120px, calc(-120 / var(--baseWidth) * 100vw));
}
/* ピンク */
.itemCompany03{
	width: max(181px, calc(181 / var(--baseWidth) * 100vw));
	left: 0;
	bottom: min(-230px, calc(-230 / var(--baseWidth) * 100vw));
	z-index: -1;
}
/* イラスト */
.itemCompany04{
	width: max(206px, calc(206 / var(--baseWidth) * 100vw));
	top: min(-60px, calc(-60 / var(--baseWidth) * 100vw));
	left: max(140px, calc(140 / var(--baseWidth) * 100vw));
	z-index: -1;
}


/*
	news
-----------------------------------------------------------------------------------------------*/
#newsWrapper{
	margin-bottom: max(100px, calc(100 / var(--baseWidth) * 100vw));
}
#newsWrapper .ctsArea{
	display: flex;
	flex-direction: column;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
}


/*
	recruit
-----------------------------------------------------------------------------------------------*/
#recruitWrapper{
	padding: max(50px, calc(50 / var(--baseWidth) * 100vw)) max(40px, calc(40 / var(--baseWidth) * 100vw));
	background-color: var(--bgCream);
	position: relative;
	z-index: 1;
}

/* バナー
============================== */
.recruitTopBnr{
	display: block;
	position: relative;
	z-index: 1;
}
.recruitTopBnr .inner{
	display: flex;
	align-items: center;
	justify-content: center;
	height: max(410px, calc(410 / var(--baseWidth) * 100vw));
	/* background: url(/images/bg_noise_wh.png) top left / 100px, url(/images/bg_top_recruit_pc.png) no-repeat center center / cover; */
	border-radius: var(--br100);
	overflow: hidden;
	position: relative;
	z-index: 0;
}
/* タイトル・キャッチ */
.recruitTopBnr .titLogo,
.recruitTopBnr .en{
	margin-left:max(80px,calc(80 / var(--baseWidth) * 100vw));
}
.recruitTopBnr .titLogo{
	width: max(400px, calc(400 / var(--baseWidth) * 100vw));
	margin-top: max(70px, calc(70 / var(--baseWidth) * 100vw));
	z-index: 3;
}
.recruitTopBnr .en{
	width: max(500px, calc(500 / var(--baseWidth) * 100vw));
	position: absolute;
	top: max(50px, calc(50 / var(--baseWidth) * 100vw));
	z-index: 2;
}
.recruitTopBnr .titLogo img,
.recruitTopBnr .en img{
	display:block;
	width:100%;
	height:auto;
}
/* 画像 */
.recruitTopBnr .ph{
	width:100%;
	height:100%;
	object-fit:cover;
	position: absolute;
	inset: 0;
	transition: var(--transitionBase);
	z-index: 1;
}
/* テキスト・矢印 */
.recruitTopBnr .txtIco{
	display: flex;
	align-items: center;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	position: absolute;
	right: 0;
	bottom: max(15px, calc(15 / var(--baseWidth) * 100vw));
}
.recruitTopBnr .txtIco .txt{
	padding-bottom: max(10px, calc(10 / var(--baseWidth) * 100vw));
	font-size: max(2.0rem, calc(20 / var(--baseWidth) * 100vw));
	line-height: 1.0;
	letter-spacing: 0;
	border-bottom: 1px solid #000;
	transition: var(--transitionBase);
}
.recruitTopBnr .txtIco .ico{
	display: block;
	width: var(--btnBase);
	aspect-ratio: 1/1;
	background: #000;
	border-radius: 50%;
	position: relative;
	transition: var(--transitionBase);
}
.recruitTopBnr .txtIco .ico::before{
	content: "";
	width: calc(var(--btnBase) * 0.32);
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-60%,-50%);
	transition: var(--transitionBase);
}
.recruitTopBnr .txtIco .ico::after{
	content: "";
	width: calc(var(--btnBase) * 0.16);
	aspect-ratio: 1/1;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-20%,-50%) rotate(45deg);
	transition: var(--transitionBase);
}
@media (any-hover:hover){
	.recruitTopBnr:hover .ph{
		transform:scale(1.02);
	}
	.recruitTopBnr:hover .txtIco .txt{
		border-bottom: 1px solid var(--colorBlue);
	}
	.recruitTopBnr:hover .txtIco .ico{
		background:var(--colorBlue);
	}
	.recruitTopBnr:hover .txtIco .ico::before{
		transform:translate(calc(-60% + max(4px,calc(4 / var(--baseWidth) * 100vw))),-50%);
	}
	.recruitTopBnr:hover .txtIco .ico::after{
		transform:translate(calc(-20% + max(4px,calc(4 / var(--baseWidth) * 100vw))),-50%) rotate(45deg);
	}
}

/* 装飾
============================== */
/* アメーバブルー */
.itemRecruit01{
	width: max(223px, calc(223 / var(--baseWidth) * 100vw));
	top: min(-70px, calc(-70 / var(--baseWidth) * 100vw));
	right: min(-20px, calc(-20 / var(--baseWidth) * 100vw));
}


/*
	contact
-----------------------------------------------------------------------------------------------*/
.pageTop #contactCtaWrapper .ctsArea::before{
	display: none;
}


@media screen and (width <= 812px){
	/*
		コンテンツ共通
	-----------------------------------------------------------------------------------------------*/
	/* タイトル周り
	============================== */
	.titTopArea{
		gap: 15px;
	}
	.titTopArea .titCmnBasic{
		font-size: 3.3rem;
	}
	.titTopArea .txt{
		font-size: 1.5rem;
		line-height: 1.8;
	}
	.titTopArea .en{
		font-size: 8.0rem;
	}


	/*
		kv
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		margin-bottom: calc(30 / var(--baseWidthSp) * 100vw);
	}
	.kvArea{
		min-height: calc(600 / var(--baseWidthSp) * 100vw);
		padding-inline: calc(25 / var(--baseWidthSp) * 100vw);
	}

	/* タイトル
	========================================*/
	.kvTit{
		line-height: 1.3;
		letter-spacing: 0.5rem;
		transform: translate(calc(10 / var(--baseWidthSp) * 100vw), calc(-50 / var(--baseWidthSp) * 100vw));
	}
	.kvTit .txtS{
		font-size: min(calc(22 / var(--baseWidthSp) * 100vw));
	}
	.kvTit .txtM{
		font-size: min(calc(28 / var(--baseWidthSp) * 100vw));
	}
	.kvTit .txtL{
		font-size: min(calc(30 / var(--baseWidthSp) * 100vw));
	}
	.kvTit .txtXL{
		font-size: min(calc(33 / var(--baseWidthSp) * 100vw));
	}
	.kvTit .txtXXL{
		font-size: min(calc(36 / var(--baseWidthSp) * 100vw));
	}

	/* 装飾
	============================== */
	/* アメーバブルー */
	.itemKv01{
		display: block;
		width: min(calc(361 / var(--baseWidthSp) * 100vw));
		height: auto;
	}
	/* アメーバパープル */
	.itemKv02{
		width: min(calc(125 / var(--baseWidthSp) * 100vw));
		top: auto;
		left: max(calc(-10 / var(--baseWidthSp) * 100vw));
		bottom: 0;
	}
	/* アメーバエメラルド */
	.itemKv03{
		width: min(calc(50 / var(--baseWidthSp) * 100vw));
		top: min(calc(75 / var(--baseWidthSp) * 100vw));
		right: min(calc(50 / var(--baseWidthSp) * 100vw));
	}
	/* アメーバピンク */
	.itemKv04{
		width: min(calc(170 / var(--baseWidthSp) * 100vw));
		right: min(calc(40 / var(--baseWidthSp) * 100vw));
		bottom: min(calc(60 / var(--baseWidthSp) * 100vw));
	}
	/* イラスト */
	.itemKv05{
		width: min(calc(110 / var(--baseWidthSp) * 100vw));
		top: auto;
		left: min(calc(50 / var(--baseWidthSp) * 100vw));
		bottom: min(calc(125 / var(--baseWidthSp) * 100vw));
	}

	/* 最新ニュース
	============================== */
	#kvNewsArea{
		margin-bottom: 30px;
		padding-inline: 25px;
		transform: none;
	}
	#kvNewsArea::before{
		width: 18px;
		top: 11px;
		left: 0;
		transform: none;
	}
	/* リスト */
	#kvNewsArea .listNews > li{
		padding-bottom: 0;
		border-bottom: none;
	}
	#kvNewsArea .listNews .category{
		justify-self: start;
	}
	#kvNewsArea .listNews .txt{
		white-space: normal;
	}


	/*
		intro
	-----------------------------------------------------------------------------------------------*/
	#introWrapper{
		margin-bottom: 50px;
	}

	/* イントロ上部
	========================================*/
	.introHead{
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 40px;
	}
	/* 3つの価値 */
	.introCircle{
		width: 220px;
		margin-inline: auto;
		padding-top: 5px;
	}
	.introCircle .sm{
		font-size: 1.2rem;
	}
	.introCircle .num{
		margin-left: 40px;
		font-size: 12.0rem;
	}
	.introCircle .sub{
		margin-left: -5px;
		font-size: 1.8rem;
	}
	.introCircle .lg{
		font-size: 3.5rem;
	}
	/* コピー */
	.introText{
		margin-top: 0;
		font-size: 1.5rem;
	}
	.introText .txt + .txt{
		margin-top: 20px;
	}

	/* 3つの価値
	========================================*/
	.listIntro{
		width: 100%;
		gap: 20px;
		margin: 0;
	}
	.listIntroItem{
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: column;
		gap: 15px;
	}
	/* 番号 */
	.listIntroItem .num{
		width: 80px;
		font-size: 3.5rem;
	}
	.listIntroItem .num::before{
		background: url("/images/bg_top_intro_num_01_sp.png") no-repeat center center / contain;
	}
	.listIntroItem:nth-of-type(2) .num::before{
		background-image: url("/images/bg_top_intro_num_02_sp.png");
	}
	.listIntroItem:nth-of-type(3) .num::before{
		background-image: url("/images/bg_top_intro_num_03_sp.png");
	}
	/* box */
	.listIntro .box{
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: column;
		gap: 10px;
		min-height: auto;
		padding: 25px 30px 30px;
		border-radius: 50px;
	}
	.listIntroItem .box::before{
		width: 1px;
		height: 30px;
		top: 3px;
		left: auto;
	}
	/* アイコン */
	.listIntro .ico{
		width: 60px;
	}
	/* 見出し */
	.listIntro .midashi{
		font-size: 1.7rem;
	}
	/* テキスト */
	.listIntro .txtArea{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.listIntro .txt{
		font-size: 1.3rem;
		line-height: 1.8;
	}

	/* 装飾
	========================================*/
	.itemIntro01{
		width: 125px;
		top: 44%;
		right: -10px;
	}
	.itemIntro02{
		width: 103px;
		top: 42%;
		right: -10px;
	}
	.itemIntro03{
		width: 105px;
		top: 180px;
		right: -10px;
	}


	/*
		about
	-----------------------------------------------------------------------------------------------*/
	#aboutWrapper{
		padding-block: 50px;
	}
	#aboutWrapper::before{
		top: 50px;
		bottom: 50px;
		left: 0;
		right: 0;
		z-index: 0;
	}
	#aboutWrapper .ctsArea{
		padding-block: 130px 50px;
	}

	/* タイトル周り
	============================== */
	#aboutWrapper .titTopArea{
		top: 110px;
		left: 25px;
	}
	#aboutWrapper .titTopArea .txt{
		max-width: 260px;
		margin-bottom: 5px;
	}
	#aboutWrapper .titTopArea .en{
		top: -30px;
		left: -30px;
	}

	/* リンクボタン
	============================== */
	.listAboutLinks{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	/* テキスト */
	.listAboutLinks > li .txt{
		margin-bottom: 20px;
		padding: 0 15px 15px 0;
		font-size: 1.7rem;
	}
	.listAboutLinks > li .txt .logo{
		width: 120px;
		padding-right: 5px;
	}
	/* 画像 */
	.listAboutLinks > li .ph{
		width: 150px;
	}
	/* 矢印 */
	.listAboutLinks > li .ico{
		right: 105px;
		bottom: 0;
	}
	/* 配置 */
	.listAboutLinks > li:nth-of-type(even) a{
		justify-content: flex-start;
	}

	/* 装飾
	============================== */
	/* アメーバエメラルド大 */
	.itemAbout01{
		width: 365px;
		max-width: 500px;
		top: -40px;
	}
	/* アメーバエメラルド小 */
	.itemAbout02{
		width: 250px;
	}
	/* アメーバピンク */
	.itemAbout03{
		width: 84px;
		top: auto;
		right: auto;
		left: 25px;
		bottom: 30px;
	}
	/* アメーバブルー */
	.itemAbout04{
		width: 230px;
		right: 10px;
		bottom: 37%;
	}
	/* イラスト */
	.itemAbout05{
		width: 80px;
		top: -10px;
		left: auto;
		right: 20px;
	}


	/*
		service
	-----------------------------------------------------------------------------------------------*/
	#serviceWrapper{
		margin-bottom: 50px;
		background: url("/images/bg_top_service_sp.png") no-repeat top center / 100%;
	}
	#serviceWrapper .ctsArea{
		padding-block: 100px 30px;
	}

	/* タイトル周り
	============================== */
	#serviceWrapper .titTopArea .titLogo{
		width: 250px;
		top: 30px;
		right: 25px;
	}

	/* 製品・サービス情報
	============================== */
	.serviceCtsArea{
		gap: 20px;
		width: 100%;
		margin-left: 0;
	}
	.serviceCtsArea .txtArea{
		padding-inline: 0;
	}

	/* 装飾
	============================== */
	/* アメーバパープル大 */
	.itemService01{
		width: 350px;
		top: -40px;
		right: -35px;
	}
	/* アメーバパープル小 */
	.itemService02{
		width: 80px;
		left: -20px;
		bottom: 0;
		top: max(240px, calc(240 / var(--baseWidthSp) * 100vw));
	}
	/* アメーバブルー*/
	.itemService03{
		display: none;
	}
	/* イラスト01*/
	.itemService04{
		display: none;
	}
	/* イラスト02*/
	.itemService05{
		display: none;
	}
	/* 背景画像 */
	[class^="itemServiceBg0"]{
		width: 100%;
		top: 0;
		left: 0;
	}


	/*
		message
	-----------------------------------------------------------------------------------------------*/
	#messageWrapper{
		margin-bottom: 50px;
		padding-bottom: 50px;
	}
	#messageWrapper::before{
		content: "";
		width: calc(100% - 25px);
		height: calc(100% - 50px);
	}
	#messageWrapper .ctsArea{
		flex-direction: column;
		gap: 40px;
		justify-content: center;
		padding-block: 110px 30px;
		padding-inline: 50px 25px;
	}

	/* タイトル周り
	============================== */
	#messageWrapper .titTopArea{
		top: 30px;
		left: 25px;
	}
	#messageWrapper .titTopArea .en{
		writing-mode: vertical-lr;
		top: -15px;
		left: -13px;
	}

	/* テキスト周り
	============================== */
	.messageTxtArea{
		gap: 20px;
		width: 100%;
		margin-top: 0;
	}
	/* 見出し */
	.messageTxtArea .tit [class^="txt"]{
		letter-spacing: 0.1rem;
	}
	.messageTxtArea .tit .txtS{
		font-size: 1.8rem;
	}
	.messageTxtArea .tit .txtM{
		font-size: 2.6rem;
	}
	.messageTxtArea .tit .txtL{
		font-size: 3.6rem;
	}
	.messageTxtArea .tit .txtXXL{
		font-size: 4.0rem;
	}
	.messageTxtArea .tit br + *{
		margin-top: 5px;
	}
	/* ボタン */
	.messageTxtArea .btnArea{
		justify-content: center;
	}
	.messageTxtArea .btnArea .btnBase{
		justify-content: center;
	}

	/* 画像
	============================== */
	.messagePhArea{
		width:calc(250 / 375 * 100%);
		margin: 0 auto;
	}
	.messagePhArea figcaption{
		margin-top: 10px;
		font-size: 1.2rem;
	}

	/* 装飾
	============================== */
	/* アメーバピンク01 */
	.itemMessage01{
		width: max(370px, calc(370 / var(--baseWidth) * 100vw));
		top: -40px;
		left: -100px;
	}
	/* アメーバピンク02 */
	.itemMessage02{
		display: none;
	}
	/* エメラルド */
	.itemMessage03{
		width: 100px;
		top: 80px;
	}


	/*
		company
	-----------------------------------------------------------------------------------------------*/
	#companyWrapper{
		margin-bottom: 40px;
	}
	#companyWrapper .ctsArea{
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows:auto;
		align-items:start;
		gap: 0;
		padding-block: 70px 50px;
		z-index:1;
	}

	/* タイトル周り
	============================== */
	#companyWrapper .titTopArea{
		top: 0;
		right: 40px;
	}
	#companyWrapper .titTopArea .en{
		top: -30px;
		left: auto;
		right: -45px;
	}

	/* 画像
	============================== */
	[class^="companyPh"]{
		height: auto;
		z-index: 1;
	}
	.companyPh01{
		grid-column:1/6;
		aspect-ratio:155 / 200;
	}
	.companyPh02{
		grid-column:4/7;
		aspect-ratio:80 / 57;
		border-radius:30px;
	}
	.companyPh03{
		grid-column:7/13;
		aspect-ratio:150 / 106;
	}

	/* ボタン
	============================== */
	.companyBtnArea{
		grid-column: 1/-1;
		grid-row: auto;
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
	}
	.companyBtnArea .btnBase{
		justify-content: center;
	}

	/* 装飾
	============================== */
	/* アメーバブルー大 */
	.itemCompany01{
		width: 340px;
		top: -85px;
		z-index: 0;
	}
	/* アメーバブルー小 */
	.itemCompany02{
		width: 110px;
		left: -10px;
		bottom: -10px;
	}
	/* ピンク */
	.itemCompany03{
		width: 90px;
		bottom: -80px;
	}
	/* イラスト */
	.itemCompany04{
		width: 90px;
		top: 58vw;
		left: auto;
		right: 80px;
	}


	/*
		news
	-----------------------------------------------------------------------------------------------*/
	#newsWrapper{
		margin-bottom: 50px;
	}
	#newsWrapper .ctsArea{
		gap: 20px;
	}


	/*
		recruit
	-----------------------------------------------------------------------------------------------*/
	#recruitWrapper{
		padding: 20px;
	}

	/* バナー
	============================== */
	.recruitTopBnr{
		max-width: 400px;
		margin: 0 auto;
	}
	.recruitTopBnr .inner{
		height: auto;
		aspect-ratio:335 / 220;
		min-height: max(220px, calc(220 / var(--baseWidth) * 100vw));
	}
	/* タイトル・キャッチ */
	.recruitTopBnr .titLogo,
	.recruitTopBnr .en{
		margin-left: 20px;
	}
	.recruitTopBnr .titLogo{
		width: 180px;
		margin-top: 40px;
	}
	.recruitTopBnr .en{
		width: 210px;
		position: absolute;
		top: 50%;
		transform: translateY(calc(-50% - 40px));
	}
	/* テキスト・矢印 */
	.recruitTopBnr .txtIco{
		gap: 10px;
		bottom: 3px;
	}
	.recruitTopBnr .txtIco .txt{
		padding-bottom: 5px;
		font-size: 1.4rem;
	}
	.recruitTopBnr .txtIco .ico{
		width: 35px;
	}

	/* 装飾
	============================== */
	/* アメーバブルー */
	.itemRecruit01{
		width: 90px;
		top: -25px;
		right: -7px;
	}
}