@charset "utf-8";
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マイリスト機能 CSS（PC用／共通）
元: style2.css, worker.css, sp_worker.css, add.css
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/* ▼ 共通（全ページ共通のマイリストアイコン基本スタイル） */
@keyframes mylistSpin {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}
@keyframes mylistSpinOff {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}
.mylist {
	cursor: pointer;
	perspective: 600px;
	position: relative;
}
.mylist img {
	position: relative;
	z-index: 2;
	transition: transform 0.2s ease;
	vertical-align: bottom;
}
.mylist img.is-animate-on {
	animation: mylistSpin 0.5s ease;
}
.mylist img.is-animate-off {
	animation: mylistSpinOff 0.8s ease;
}

/* ▼ マイリストアイコンのホバーキャプション（ホバー操作が可能な環境のみ） */
@media (hover: hover) and (pointer: fine) {
	.mylist::after {
		content: "マイリストに追加";
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(-6px);
		white-space: nowrap;
		padding: 4px 10px;
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.75);
		color: #fff;
		font-size: 12px;
		line-height: 1.4;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
		z-index: 10;
	}
	.mylist.is-active::after {
		content: "マイリストから削除";
	}
	.mylist:hover::after {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(-10px);
	}
}

/* ▼ 対象4ページ（company.html / intern.html / worker.html / worker-detail.html）のみ
   [最初期版] 塗りつぶし円がそのまま拡大しながらフェードアウト。拡大速度は元の2秒のまま、
   フェードアウト後に待機し、5秒間隔で繰り返す。検索結果一覧（internship.html / hosipital.html）には適用しない */
@keyframes mylistRippleOriginal {
	0%   { transform: scale(1);   opacity: 0.8; }
	20%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}
#incorpArea #sub_link.haveMylists .mylist::before,
#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist::before,
#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist::before,
#worker_TypeA #lead.haveMylists .mylist::before,
#worker_TypeB #lead.haveMylists .mylist::before,
#worker_TypeC #lead.haveMylists .mylist::before,
#worker_TypeD #lead.haveMylists .mylist::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border-radius: 50%;
	background: rgba(124, 189, 96, 0.8);
	pointer-events: none;
	animation: mylistRippleOriginal 5s ease-out infinite;
	animation-delay: 2s;
	opacity: 0;
}
#incorpArea #sub_link.haveMylists .mylist.is-active::before,
#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist.is-active::before,
#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist.is-active::before,
#worker_TypeA #lead.haveMylists .mylist.is-active::before,
#worker_TypeB #lead.haveMylists .mylist.is-active::before,
#worker_TypeC #lead.haveMylists .mylist.is-active::before,
#worker_TypeD #lead.haveMylists .mylist.is-active::before {
	animation: none;
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	#incorpArea #sub_link.haveMylists .mylist::before,
	#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist::before,
	#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist::before,
	#worker_TypeA #lead.haveMylists .mylist::before,
	#worker_TypeB #lead.haveMylists .mylist::before,
	#worker_TypeC #lead.haveMylists .mylist::before,
	#worker_TypeD #lead.haveMylists .mylist::before {
		animation: none;
	}
}

/* ▼ [現行版] 塗りつぶし円（常時表示）＋その枠から広がって消える波紋。0.8秒で広がって消え、
   次の波紋開始まで5秒待つ（6秒サイクル）。上の最初期版と切り替えて確認するため一時的にコメントアウト中 */
/*
@keyframes mylistRipple {
	0%      { transform: scale(1);    opacity: 0.8; }
	13.34%  { transform: scale(1.25); opacity: 0; }
	100%    { transform: scale(1.25); opacity: 0; }
}
#incorpArea #sub_link.haveMylists .mylist::after,
#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist::after,
#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist::after,
#worker_TypeA #lead.haveMylists .mylist::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 3px solid rgba(124, 189, 96, 0.9);
	pointer-events: none;
	z-index: 1;
	animation: mylistRipple 6s ease-out infinite;
}
#incorpArea #sub_link.haveMylists .mylist.is-active::after,
#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist.is-active::after,
#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist.is-active::after,
#worker_TypeA #lead.haveMylists .mylist.is-active::after {
	animation: none;
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	#incorpArea #sub_link.haveMylists .mylist::after,
	#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist::after,
	#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist::after,
	#worker_TypeA #lead.haveMylists .mylist::after {
		animation: none;
	}
}
*/

/* ▼ company.html（企業情報：先輩インタビューボタン） */
#incorpArea #sub_link.haveMylists {
 	position: relative;
}
#incorpArea #sub_link.haveMylists .btn_box a.btn_senpai_interview {
	margin-right: 50px;
}
#incorpArea #sub_link.haveMylists .mylist {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
#incorpArea #sub_link.haveMylists.senpai_interview {
	min-height: 38px;
}
/* ▼ company.html（インターン一覧） */
#incorpArea #intern_wrap .internBox .intern_title .haveMylists {
	position: relative;
}
#incorpArea #intern_wrap .internBox .intern_title .haveMylists .mylist {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

/* ▼ company.html（先輩の仕事紹介） */
#incorpArea #works_wrap .worksBox .works_title.haveMylists {
	position: relative;
}
#incorpArea #works_wrap .worksBox .works_title.haveMylists .interviewyear {
	margin-right: 50px;
}
#incorpArea #works_wrap .worksBox .works_title.haveMylists .teiin {
	margin-right: 50px;
	width: 250px;
}
#incorpArea #works_wrap .worksBox .works_title.haveMylists .mylist {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
#incorpArea #intern_wrap .internBox .intern_title h5
#incorpArea #intern_wrap .intern_title .haveMylists h5 {
	width: calc(100% - 50px);
}
/* #incorpArea #works_wrap .worksBox .works_title.haveMylists h5 {
	width: 590px;
} */
/* ▼ worker.html（先輩情報） PC表示（641px以上） */
@media all and (min-width:641px) {
	#worker_TypeA .haveMylists .yearhead span {
		margin-bottom: 20px;
	}
	#worker_TypeA #lead.haveMylists {
		position: relative;
	}
	#worker_TypeA #lead.haveMylists .mylist {
		position: absolute;
		top: 0;
		right: 0;
	}
}

/* ▼ internship.html / hosipital.html（検索結果一覧） */
.search_area_contents ul li .internship_company .mylist {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}
.search_area_contents ul li .internship_company .mylist img {
	width: 100%;
	object-fit: contain;
}

/*　タイプ：資格取得　*/
#worker_TypeB #lead.haveMylists{
	position: relative;
}
#worker_TypeB #lead.haveMylists .mylist {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-7px);
}
#worker_TypeB #lead.haveMylists .copy {
	margin-top: 20px;
}

/*　タイプ：キャリア報告2P　*/
#worker_TypeC #lead.haveMylists{
	position: relative;
}
#worker_TypeC #lead.haveMylists .mylist {
	position: absolute;
	top: 40px;
	right: 0;
	/* right: 300px; */
	transform: translate(7px, -7px);
}

/*　タイプ：キャリア報告4P　*/
#worker_TypeD #lead.haveMylists{
	position: relative;
}
#worker_TypeD #lead.haveMylists .mylist {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(7px , -7px);
}
#worker_TypeD #lead.haveMylists .copy {
	margin-top: 20px;
}