@charset "utf-8";

/* ------------------------------
 メイン（PC）
------------------------------ */
.mainBlock {
	position: relative;
	margin-bottom: 95px;
}
/* メインテキスト */
.mainText {
	position: absolute;
	bottom: 90px;
	left: 5%;
	z-index: 2;
}
.mainText h1 {
	position: relative;
	z-index: 1;
	font-size: 7rem;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
}
.mainText::before {
	content: "";
	width: 516px;
	height: 424px;
	position: absolute;
	top: -160px;
	left: -135px;
	z-index: 0;
	background: url(../img/deco_img01.png) no-repeat 0 0 / cover;
}
/* 画像 */
.mainimgBox {
	position: relative;
	padding: 0 2.6%;
}
.mainimgBox .swiper,
.mainimgBox .swiper-slide,
.mainimgBox .swiper-img {
	height: 100%;
}
.mainimgBox .swiper-slide {
	overflow: hidden;
	border-radius: 40px;
}
.mainimgBox .swiper-slide-active .swiper-img,
.mainimgBox .swiper-slide-duplicate-active .swiper-img,
.mainimgBox .swiper-slide-prev .swiper-img {
	animation: zoomUp 7.5s linear 0s normal both;
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}
.mainimgBox .swiper-img {
	will-change: transform;
	backface-visibility: hidden;
	transform: scale(1);
}
.mainimgBox .swiper-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media print, screen and (min-width: 768px) {
	.mainBlock {
		width: 100%;
	}
	/* メインイメージ */
	.mainimgBox {
		max-height: 800px;
	}	
}

/* ------------------------------
 メイン（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.mainBlock {
		margin-top: 38px;
		margin-bottom: 60px;
	}
	/* メインテキスト */
	.mainText {
		bottom: 10%;
		padding: 0 5%;
	}
	.mainText::before {
		width: 210px;
		height: 172px;
		top: auto;
		bottom: -20px;
		left: -55px;
	}
	.mainText h1 {
		font-size: 2.9rem;
		line-height: 1.44;
	}
	/* 画像 */
	.mainimgBox {
		padding: 0 5%;
	}
	.mainimgBox .swiper-slide {
		border-radius: 16px;
	}
}

/* ------------------------------
 見出し・共通（PC）
------------------------------ */
/* h2 */
.contentsHome h2 {
	margin-bottom: 40px;
	font-size: 4.2rem;
	line-height: 1.5;
	font-weight: 700;
}
.title-sub {
	position: relative;
	margin-bottom: 35px;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
}
.title-sub::before {
	content: "●";
	display: inline-block;
	margin-right: 7px;
	margin-top: .8em;
	font-size: 50%;
	color: var(--red-color);
	vertical-align: top;
}
.deco-en {
	position: absolute;
	z-index: 0;
	font-family: var(--font-en), sans-serif;
	font-size: 20rem;
	font-weight: 600;
	line-height: 1;
	color: var(--base-color);
	opacity: 0.5;
	white-space: nowrap;
}
/* ------------------------------
 見出し・テキスト（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	/* h2 */
	.contentsHome h2 {
		margin-bottom: 30px;
		font-size: 2.8rem;
	}
	.title-sub {
		position: relative;
		margin-bottom: 10px;
		font-size: 1.8rem;
	}
	
	.deco-en {
		font-size: 7rem;
	}
}


/* ------------------------------
 募集要項（PC）
------------------------------ */
.jobBlock {
	position: relative;
}
.jobBlock .inBlock > * {
	position: relative;
	z-index: 1;
}
.jobBlock .deco-en {
	position: absolute;
	z-index: 0;
	top: 0;
	right: calc(50% + 92px);
}
.tab-contents::after {
	content: "";
	width: 399px;
	height: 447px;
	position: absolute;
	bottom: -145px;
	right: -100px;
	z-index: 0;
	background: url(../img/deco_img02.png) no-repeat 0 0 / cover;
}
.jobSwitch .btn {
    margin-top: 65px;
}
/* ------------------------------
 募集要項（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.jobBlock .inBlock.second {
		width: 100%;
		margin: 0;
	}
	.jobBlock .deco-en {
		top: 120px;
  		right: -12px;
	}
	.tab-contents::after {
		width: 109px;
		height: 129px;
		bottom: -36px;
		right: -35px;
	}
	/* -- タブ切り替えエリア -- */
	.jobSwitch .btn {
		margin-top: 30px;
	}
	
}

/* ------------------------------
 仕事を知る（PC）
------------------------------ */
.workflowBlock {
	position: relative;
	z-index: 2;
	margin-bottom: 160px;
	padding-top: 115px;
	background: url(../../img/workflow_bg.jpg) no-repeat center 0 / auto 1023px;
	color: #fff;
}
.workflowBlock .title-sub {
	margin-bottom: 25px;
}
.workflowBlock .title-sub::before {
	color: #fff;
}
.workflowBlock h2 {
	margin-bottom: 15px;
}
.workflowBlock .leadText {
	font-size: 1.8rem;
	margin-bottom: 30px;
}
.workBox {
	position: relative;
	border-radius: 20px 20px 0 0;
	color: var(--main-font-color);
}
.workBox a {
	display: block;
	color: var(--main-font-color);
}
.workBox .comment {
	position: absolute;
	top: -40px;
	left: -20px;
	z-index: 1;
	width: 340px;
	height: 99px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	border: solid 2px var(--red-color);
	background-color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.2;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, .1));
}
.workBox .comment::before,
.workBox .comment::after {
	content: "";
	position: absolute;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.workBox .comment::before {
	width: 15px;
	height: 16px;
	top: 100%;
	left: 74px;
	background: var(--red-color);
}
.workBox .comment::after {
	width: 11px;
	height: 12px;
	top: calc(100% - 1px);
	left: 76px;
	background: #fff;
}
.workBox .imgBox {
	margin-bottom: 8px;
	overflow: hidden;
	border-radius: 20px;
	border: solid 2px #fff;
	background-color: #fff;
}
.workBox .link {
	height: 75px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	margin: 0 4px;
	padding-right: 45px;
	border-bottom: solid 2px var(--main-font-color);
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: left;
	transition: 0.3s ease-in-out;
}
.workBox .link small {
	font-size: 66%;
}
.workBox .link::after {
	content: "";
	width: 45px;
	height: 45px;
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/icon_arrow_c.svg) no-repeat 0 0 / cover;
}
@media print, screen and (min-width: 768px) {
	.pc_mb205 {
		margin-bottom: 205px;
	}
	.workBox a .imgBox img {
		transition: 0.3s ease-in-out;
	}
	.workBox a:hover {
		opacity: 1;
	}
	.workBox a:hover .link,
	.workBox a:hover .imgBox img {
		opacity: .7;
	}
}
/* ------------------------------
 仕事を知る（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.workflowBlock {
		margin-bottom: 95px;
		padding-top: 70px;
		background: url(../../img/workflow_bg_sp.jpg) no-repeat center 0 / auto 650px;
	}
	.workflowBlock .title-sub {
		margin-bottom: 10px;
	}
	.workflowBlock .leadText {
		font-size: 1.6rem;
	}
	.workBox:not(:last-child) {
		margin-bottom: 80px;
	}
	.workBox .comment {
		top: -35px;
		left: 5%;
		right: 5%;
		width: 90%;
		height: 88px;
		font-size: 1.6rem;
	}
	.workBox .imgBox {
		margin-bottom: 0;
	}
	.workBox .link {
		height: 75px;
		margin: 0 23px;
		padding-right: 34px;
		font-size: 2.2rem;
	}
	.workBox .link small {
		font-size: 70%;
	}
	.workBox .link::after {
		width: 34px;
		height: 34px;
	}
}

/* ------------------------------
 はみ出し画像コンテンツ
------------------------------ */
.overflowBlock > * {
	margin-left: 0;
	margin-right: 0;
}
.overflowBlock .imgBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media print, screen and (min-width: 768px) {
	.overflowBlock {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		column-gap: 55px;
	}
	
	.overflowBlock.img-right {
		justify-content: flex-end
	}
	.overflowBlock .textBox {
		width: 465px;
		min-width: 465px;
	}
	.overflowBlock .imgBox {
		max-width: 1010px;
		width: 54%;
		height: 500px;
		position: relative;
		z-index: 1;
		overflow: hidden;
	}
	.overflowBlock:not(.img-right) .imgBox {
		border-radius: 0 30px 30px 0;
	}
	.overflowBlock.img-right .textBox {
		order: 1;
	}
	.overflowBlock.img-right .imgBox {
		order: 2;
		border-radius: 30px 0 0 30px;
	}
}
/* ----------------------
 はみ出し画像（SP）
---------------------- */
@media screen and (max-width: 767px) {
	.overflowBlock .imgBox {
		margin-bottom: 30px;
		position: relative;
		z-index: 1;
		overflow: hidden;
		aspect-ratio: 8 / 5;
	}
	.overflowBlock:not(.img-right) .imgBox {
		margin-right: 6%;
		border-radius: 0 16px 16px 0;
	}
	.overflowBlock.img-right .imgBox {
		margin-left: 6%;
		border-radius: 16px 0 0 16px;
	}
	.overflowBlock .textBox {
		margin-left: 6%;
		margin-right: 6%;
		position: relative;
	}
}
/* ------------------------------
 松浦梱包輸送の魅力（PC）
------------------------------ */
.featuresBlock {
	position: relative;
}
.featuresBlock .deco-en {
	top: -55px;
	left: calc(50% + 20px);
}
.featuresBlock::before {
	content: "";
	width: 402px;
	height: 451px;
	position: absolute;
	bottom: calc(100% - 90px);
	left: -138px;
	z-index: 0;
	background: url(../img/deco_img03.png) no-repeat 0 0 / cover;
}
/* ------------------------------
 松浦梱包輸送の魅力（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.featuresBlock::before {
		width: 115px;
		height: 129px;
		bottom: calc(100% - 46px);
		left: -41px;
	}
	
	.featuresBlock .deco-en {
		left: auto;
		top: -25px;
		right: calc(-6% - 20px);
	}
}
/* ------------------------------
 求める人物像（PC）
------------------------------ */
.messageBlock {
	position: relative;
	margin-bottom: 230px;
}
.messageBlock .deco-en {
	top: -55px;
	right: calc(50% + 20px);
}
.messageBlock::after {
	content: "";
	width: 357px;
	height: 329px;
	position: absolute;
	top: calc(100% - 114px);
	right: -70px;
	z-index: 0;
	background: url(../img/deco_img04.png) no-repeat 0 0 / cover;
}
/* ------------------------------
 求める人物像（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.messageBlock {
		margin-bottom: 80px;
	}
	.messageBlock::after {
		width: 122px;
		height: 112px;
		top: 33%;
		right: -35px;
	}
	.messageBlock .deco-en {
		right: auto;
		top: -25px;
		left: calc(-6% - 10px);
	}
}

/* ------------------------------
 JOB LIST（PC）
------------------------------ */
.interviewBlock {
	position: relative;
	padding-bottom: 120px;
	margin-bottom: 125px;
}
.interviewBlock::after {
	content: "";
	width: 542px;
	height: 573px;
	position: absolute;
	bottom: -440px;
	left: -110px;
	z-index: 0;
	background: url(../img/deco_img05.png) no-repeat 0 0 / cover;
}
.interviewBlock .deco-en {
	top: 95px;
	left: calc(50% - 75px);
}
.interviewBlock .inBlock {
	position: relative;
}
.interviewBlock .inBlock > *:not(.deco-en) {
	position: relative;
	z-index: 1;
}
.interviewSwiper ul li {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}
.interviewSwiper ul li a::after {
	content: "";
	width: 55px;
	height: 55px;
	position: absolute;
	z-index: 1;
	right: 20px;
	bottom: 20px;
	border-radius: 100%;
	background: url(../img/icon_arrow_c.svg) no-repeat 0 0 / cover;
}
.interviewSwiper ul li .textBox {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	position: absolute;
	top: 61%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	padding: 18px 26px;
	background: linear-gradient(rgba(18,26,38, 0) 50%, rgba(18,26,38, 0.75));
	color: #fff;
	font-weight: 700;
}
@media print, screen and (min-width: 768px) {
	.interviewBlock::before {
		content: "";
		display: block;
		position: absolute;
		top: 40%;
		bottom: 0;
		left: calc(50% - 730px);
		right: 0;
		z-index: 1;
		border-radius: 40px 0 0 40px;
		background-color: var(--base-color);
	}
	
	.interviewSwiper ul {
		display: flex;
		flex-wrap: wrap;
		gap: 45px;
	}
	.interviewSwiper ul li {
		width: 350px;
	}
	.swiper-controller {
		display: none;
	}
}
/* ------------------------------
 JOB LIST（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.interviewBlock {
		padding: 70px 0 45px;
		margin-bottom: 50px;
	}
	.interviewBlock::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		background-color: var(--base-color);
	}
	.interviewBlock::after {
		width: 171px;
		height: 180px;
		bottom: -130px;
		left: -74px;
	}
	/* スライダー */
	.interview-wrap {
		position: relative;
	}
	/* PAGINATION/NEXT/PREV */
	.interview-wrap .swiper-controller {
		width: 100%;
		position: absolute;
		top: 50%;
		z-index: 1;
		transform: translateY(-50%);
	}
	.interview-wrap .swiper-buttons {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 5px;
		height: 55px;
	}
	.interview-wrap .swiper-button-prev,
	.interview-wrap .swiper-button-next {
		display: block;
		position: relative;
		inset: auto;
		width: 55px;
		height: 55px;
		margin: 0;
	}
	.interview-wrap .swiper-button-prev {
		left: -2.6%;
	}
	.interview-wrap .swiper-button-next {
		right: -2.6%;
	}
	.interview-wrap .swiper-button-prev::after,
	.interview-wrap .swiper-button-next::after {
		position: absolute;
		inset: auto;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		background: #fff url(../img/icon_arrow_c_w.svg) no-repeat 0 0 / cover;
		font-size: 0;
		line-height: 55px;
	}
	.interview-wrap .swiper-button-prev::after {
		transform: scaleX(-1);
	}
}

/* ------------------------------
 その他（PC）
------------------------------ */
.otherBlock {
	position: relative;
	z-index: 2;
	margin-bottom: 125px;
}
.otherBlock .btn-sq img {
	margin-right: 25px;
}
.otherBlock .inlineBtn {
	row-gap: 25px;
}
/* ------------------------------
 その他（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.otherBlock {
		margin-bottom: 55px;
	}
	.otherBlock .career {
		width: 35px;
		height: 42px;
	}
	.otherBlock .job {
		width: 29px;
		height: 38px;
	}
	.otherBlock .btn-sq img {
		margin-right: 17px;
	}
}

/* ------------------------------
 Instagram（PC）
------------------------------ */
.instaBlock {
	padding: 90px 0;
	border-radius: 60px 60px 0 0;
	background-color: var(--base-color);
}
.instaBlock a {
	color: var(--main-font-color);
}
.contentsHome .icon-insta {
	font-family: var(--font-en), sans-serif;
	font-size: 4.8rem;
	font-weight: 600;
	line-height: 1.2;
}
.instaBlock .instaBox a {
	display: block;
}
.icon-insta img {
	width: 47px;
	height: auto;
	margin-right: 10px;
	margin-top: 7px;
	vertical-align: top;
}
.instaBlock .imgBox {
	margin-bottom: 10px;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.instaBlock .date {
	font-family: var(--font-en), sans-serif;
	font-weight: bold;
	color: #888888;
}
.text-over {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
@media screen and (max-width: 767px) {
	.instaBlock {
		padding: 55px 0;
		border-radius: 40px 40px 0 0;
	}
	.instaBlock .flexBox {
		row-gap: 30px;
	}
	.contentsHome .icon-insta {
		font-size: 3.5rem;
	}
	.icon-insta img {
		width: 36px;
		margin-top: 4px;
	}
	.text-over {
		-webkit-line-clamp: 3;
	}
}