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

	custom property

========================================================= */
:root {
	--px: min(1px, (1 / 1080) * 100vw);
	--sp: calc((1 / 750) * 100vw);
}





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

	common

==================================================================================================*/
.pc {
	display: block;
}

.sp {
	display: none;
}

@media screen and (max-width: 767px) {
	.pc {
		display: none;
	}
	
	.sp {
		display: block;
	}
}


.smes-ptn01 #content .p-recruit-philosophy,
.smes-ptn02 #content .p-recruit-philosophy {
	margin-top: 15rem;
}

@media screen and (max-width: 767px) {
	.smes-ptn01 #content .p-recruit-philosophy,
	.smes-ptn02 #content .p-recruit-philosophy {
		margin-top: 5rem;
		margin-top: 6rem;
	}
}





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

	* FLOTING BUTTON - フローティングボタン

==================================================================================================*/
.smes-ptn01 .c-floating-button,
.smes-ptn02 .c-floating-button {
	
	& .c-floating-button__smes {
		display: block;
		width: 160px;
		transition: .3s;

		&:hover {
			transform: scale(1.05);
		}
	}
}

@media screen and (min-width: 768px) {
	.smes-ptn01 .c-floating-button,
	.smes-ptn02 .c-floating-button {
		height: auto;
	
		& .c-floating-button__text,
		& .c-floating-button__bg {
			display: none;
		}
	}
}

@media screen and (max-width: 1023px) {
	.smes-ptn01 .c-floating-button,
	.smes-ptn02 .c-floating-button {
		
		& .c-floating-button__smes {
			width: 120px;
		}
	}
}

@media screen and (max-width: 767px) {
	.smes-ptn01 .c-floating-button,
	.smes-ptn02 .c-floating-button {
		
		& .c-floating-button__smes {
			display: none;
		}
	}
}


/* pattern01
================================================ */
.smes-ptn01 .c-floating-button {

	& .c-floating-button__smes {
		height: 298px;
		background: url(../images/smes/float01.png) no-repeat;
		background-size: contain;
	}
}

@media screen and (max-width: 1023px) {
	.smes-ptn01 .c-floating-button,
	.smes-ptn02 .c-floating-button {
		
		& .c-floating-button__smes {
			height: 225px;
		}
	}
}


/* pattern02
================================================ */
.smes-ptn02 .c-floating-button {

	& .c-floating-button__smes {
		height: 297px;
		background: url(../images/smes/float02.png) no-repeat;
		background-size: contain;
	}
}

@media screen and (max-width: 1023px) {
	.smes-ptn01 .c-floating-button,
	.smes-ptn02 .c-floating-button {
		
		& .c-floating-button__smes {
			height: 222px;
		}
	}
}







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

	* MAIN VISUAL - メインビジュアル

==================================================================================================*/
.smes-ptn01 #content .p-recruit-kv,
.smes-ptn02 #content .p-recruit-kv {
	/* メインビジュアル */
	& .p-recruit-kv__image {
		/* アンバサダー用文字 */
		&::after {
			content: '';
			position: absolute;
			top: calc(var(--px) * 110);
			right: calc(var(--px) * 25);
			top: calc((140 / 1920) * 100vw);
			right: calc((25 / 1920) * 100vw);
			display: block;
			width: calc(var(--px) * 52);
			height: calc(var(--px) * 400);
			width: calc((52 / 1920) * 100vw);
			height: calc((400 / 1920) * 100vw);
			background: url(../images/smes/mv_coution_txt.png) no-repeat;
			background-size: contain;
			opacity: 0;
			animation: fadeInAfter 0.8s ease forwards;
			animation-delay: 2s;
		}
	}

	/* メインビジュアルキャッチコピー */
	& .p-recruit-kv__content {
		left: 2.0695vw;
		bottom: 35.5vh;

		& .p-recruit-kv__heading-copy {
			width: 48.34632rem;
			width: calc((434 / 1920)*100vw);
			height: calc((98 / 930) * 100vh);
		}
	}

	/* オーバーレイ */
	& .p-recruit-kv__image-overlay {
		opacity: 0;
	}

	/* オープニングキャッチコピー */
	& .p-recruit-kv__copy { 
		& .p-recruit-kv__copy-item--1 img {
			width: 18vw;
		}

		& .p-recruit-kv__copy-item--2 img {
			width: 30vw;
		}
	}

	/* 企業ロゴ */
	& .p-recruit-kv__company {
		position: absolute;
		bottom: calc(var(--px) * -83);
		left: 0;
		z-index: 2;
		display: flex;
		width: 100%;
		overflow: hidden;

		& .p-recruit-kv__company-inner {
			display: flex;
			width: max-content;
			will-change: transform;
			transition: none;
		}

		& .p-recruit-kv__company-item {
			flex-shrink: 0;
			width: 100%;
			max-width: calc(var(--px) * 130);
			padding-right: calc(var(--px) * 20);
			will-change: transform;
		}
	}
}

@keyframes fadeInAfter {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media screen and (max-width: 767px) {
	.smes-ptn01 #content .p-recruit-kv,
	.smes-ptn02 #content .p-recruit-kv {
		/* メインビジュアル */
		& .p-recruit-kv__image {
			/* アンバサダー用文字 */
			&::after {
				top: 18vw;
				right: calc((25 / 750) * 100vw);
				width: calc((64 / 750) * 100vw);
				height: calc((421 / 750) * 100vw);
				background: url(../images/smes/mv_coution_txt_sp.png) no-repeat;
				background-size: contain;
			}
		}

		/* メインビジュアルキャッチコピー */
		& .p-recruit-kv__content {
			left: calc(var(--sp) * 40);
			top: 18vw;
			bottom: inherit;

			& .p-recruit-kv__heading-copy {
				width: 16vw;
				/* width: calc(var(--sp) * 120); */
				height: auto;
			}
		}

		/* オープニングキャッチコピー */
		& .p-recruit-kv__copy { 
			& .p-recruit-kv__copy-item--1 img {
				width: 45vw;
			}

			& .p-recruit-kv__copy-item--2 img {
				width: 72vw;
			}
		}

		/* 企業ロゴ */
		& .p-recruit-kv__company {
			position: absolute;
			bottom: calc(var(--sp) * -70);

			& .p-recruit-kv__company-item {
				max-width: calc(var(--sp) * 200);
				padding-right: calc(var(--sp) * 15);
				border-radius: calc(var(--sp) * 10);
				overflow: hidden;
			}
		}
	}
}

@media screen and (max-width: 375px) {
	@media screen and (max-width: 767px) {
		.smes-ptn01 #content .p-recruit-kv,
		.smes-ptn02 #content .p-recruit-kv {
	
			/* メインビジュアルキャッチコピー */
			& .p-recruit-kv__content {
				& .p-recruit-kv__heading-copy {
					width: 13vw;
				}
			}
		}
	}
}






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

	* ENTLY - エントリーボタン

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

.smes-ptn01 #entry,
.smes-ptn02 #entry {
	padding: calc(var(--px) * 130) 0;

	& .p-recruit-entry__box {
		max-width: calc(var(--px) * 1060);
		height: auto;
	}

	/* 全体リンク */
	& .p-recruit-entry__link {
		justify-content: flex-end;
		align-items: baseline;
		min-height: calc(var(--px) * 435);
		padding: 0;
	}

	/* メインタイトル */
	& .p-recruit-entry__heading {
		margin-left: calc(var(--px) * 100);
		margin-bottom: calc(var(--px) * 35);
		font-size: calc(var(--px) * 100);
		font-weight: 600;
		letter-spacing: .26em;
		transform: none;
	}

	/* エントリーボタン */
	& .p-recruit-entry__button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: inherit;
		min-height: calc(var(--px) * 150);
		padding: 0;
		background-color: #fff;
		border-radius: 50vw;
		z-index: 1;
		overflow: visible;

		& .p-recruit-entry__button-inner {
			position: absolute;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100%;
			padding: 0;
			border-radius: 50vw;
			overflow: hidden;
		}

		& .p-recruit-entry__button-label {
			margin-left: calc(var(--px) * 100);
			color: #df4e58;
		}

		& .p-recruit-entry__button-arrow {
			display: flex;
			align-items: center;
			width: 100%;
			max-width: calc(var(--px) * 101);
			margin-left: calc(var(--px) * 40);
			stroke: #dd4b5d;
		}

		@media screen and (min-width: 768px) {
			& .p-recruit-entry__button-inner::before {
				content: '';
				position: absolute;
				inset: 0;
				/* background-color: #e0e82e; */
				background: transparent linear-gradient(126deg, var(--color-purple) 0%, var(--color-orange) 100%) 0% 0% no-repeat padding-box;
				transition: transform 0.6s ease;
				transform: scaleX(0);
				transform-origin: right;
				z-index: -1;
			}
			
			&:hover .p-recruit-entry__button-inner::before {
				transform: scaleX(1);
				transform-origin: left;
			}

			&:hover .p-recruit-entry__button-label {
				color: #fff;
			}

			&:hover .p-recruit-entry__button-arrow {
				stroke: #fff;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.smes-ptn01 #entry,
	.smes-ptn02 #entry {
		padding: calc(var(--px) * 130) 0;

		& .l-container {
			max-width: 100%;
			padding: 0;
		}

		& .p-recruit-entry__box {
			max-width: calc(var(--sp) * 710);
		}

		/* 全体リンク */
		& .p-recruit-entry__link {
			min-height: calc(var(--sp) * 274);
		}

		/* メインタイトル */
		& .p-recruit-entry__heading {
			margin-left: calc(var(--sp) * 75);
			margin-bottom: calc(var(--sp) * 15);
			font-size: calc(var(--sp) * 70);
			font-weight: 600;
			transform: none;
		}

		/* エントリーボタン */
		& .p-recruit-entry__button {
			position: static;
			max-width: calc(var(--sp) * 640);
			min-height: calc(var(--sp) * 100);

			& .p-recruit-entry__button-label {
				margin-left: calc(var(--sp) * 40);
				font-size: calc(var(--sp) * 22);
			}

			& .p-recruit-entry__button-arrow {
				max-width: calc(var(--sp) * 52);
				margin-left: calc(var(--sp) * 20);
			}
		}
	}
}


/* pattern01
================================================ */
.smes-ptn01 #entry {
	/* エントリーボタン */
	& .p-recruit-entry__button {
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 1;
			display: block;
			width: calc(var(--px) * 488);
			height: calc(var(--px) * 435);
			background: url(../images/smes/entry_btn_img01.png) no-repeat;
			background-size: contain;
		}
	}
}

@media screen and (max-width: 767px) {
	.smes-ptn01 #entry {
		/* エントリーボタン */
		& .p-recruit-entry__button {
			&::after {
				width: calc(var(--sp) * 293);
				height: calc(var(--sp) * 274);
				background: url(../images/smes/entry_btn_img01_sp.png) no-repeat;
				background-size: contain;
			}
		}
	}
}


/* pattern02
================================================ */
.smes-ptn02 #entry {
	/* エントリーボタン */
	& .p-recruit-entry__button {
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 1;
			display: block;
			width: calc(var(--px) * 462);
			height: calc(var(--px) * 435);
			background: url(../images/smes/entry_btn_img02.png) no-repeat;
			background-size: contain;
		}
	}
}

@media screen and (max-width: 767px) {
	.smes-ptn02 #entry {
		/* エントリーボタン */
		& .p-recruit-entry__button {
			&::after {
				width: calc(var(--sp) * 273);
				height: calc(var(--sp) * 274);
				background: url(../images/smes/entry_btn_img02_sp.png) no-repeat;
				background-size: contain;
			}
		}
	}
	
}