@charset "UTF-8";

/* page-header調整 */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {
		.page-header-ttl {
			margin-top: 6rem;
			line-height: 35rem;
		}
		.page-header-ttl .spSmall {
			font-size: 18rem;
			line-height: 1;
		}
		.page-header-ttl + .page-header-lead {margin-top: 12rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.page-header-ttl {
			margin-top: 46rem;
			line-height: 56rem;
		}
		.page-header-ttl + .page-header-lead {margin-top: 20rem;}
	}
}


/* pass-section */
@media all {
	.bg-grid {background-position: center top;}
	.main-section-inner {background-color: #fff;}

	.pass-content {
		overflow: hidden;
		position: relative;
	}
	.pass-content::before,
	.pass-content::after {
		content: '';
		position: absolute;
		top: 0;
		display: block;
		background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		pointer-events: none;
	}
	.pass-content::before {left: 0;}
	.pass-content::after {
		right: 0;
		transform: scaleX(-1);
	}
	.pass-graph-list {
		overflow: auto;
		display: flex;
		width: 100%;
	}

	.pass-table {margin: 0 auto;}
	.pass-table :where(th, td) {
		text-align: center;
		vertical-align: middle;
		border: max(1px, 1rem) solid var(--table-lightblue);
	}
	.pass-head {
		background-color: var(--bg-lightblue);
		color: var(--main-blue);
		font-weight: 600;
	}
	.pass-body-th {font-weight: 600;}
	.pass-body-th small {display: block;}
	.pass-body-td {
		font-family: var(--lineseed);
		font-weight: bold;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.bg-grid {
			margin-top: 55rem;
			padding: 40rem 0 110rem;
		}
		.bg-grid .main-section {padding: 0;}
		.bg-grid .main-section-inner {padding: 30rem 25rem;}
		.bg-grid .main-header-ttl {
			padding-left: .5em;
			padding-bottom: 0;
			text-align: left;
		}
		.bg-grid .main-header-ttl::after {
			top: -2rem;
			left: 0;
			width: calc(1em + 4rem);
			transform: rotate(90deg);
			transform-origin: left top;
		}

		.pass-content {
			margin-top: 40rem;
			margin-left: -25rem;
			width: 100vw;
		}
		.pass-content::before,
		.pass-content::after {
			width: 25rem;
			height: 200rem;
		}

		.pass-graph-list {
			column-gap: 30rem;
			padding: 0 25rem 20rem;
		}
		.pass-graph-item {
			width: 200rem;
			height: 200rem;
		}
		
		.pass-table {
			margin: 15rem auto 0;
			width: calc(100% - 50rem);
		}
		.pass-table :where(th, td) {
			width: 25%;
			height: 50rem;
		}
		.pass-head {height: 35rem;}
		.pass-body-th small {
			margin-top: 3rem;
			font-size: 13rem;
		}
		.pass-body-td {font-size: 18rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.bg-grid {
			margin-top: 100rem;
			padding: 60rem 0 40rem;
		}

		.pass-section-inner,
		.pref-section-inner {
			padding: 60rem 0;
			width: 1160rem;
		}


		.pass-content::before,
		.pass-content::after {
			top: 50rem;
			width: 80rem;
			height: 280rem;
		}

		.pass-graph-list {
			column-gap: 40rem;
			margin-top: 50rem;
			padding: 0 80rem 20rem;
		}
		.pass-graph-list:has(.pass-graph-item:nth-child(3):last-child) {
			justify-content: center;
		}
		.pass-graph-item {
			width: 280rem;
			height: 280rem;
		}
		
		.pass-table {
			margin-top: 25rem;
			width: 600rem;
		}
		.pass-table :where(th, td) {
			width: 25%;
			height: 60rem;
		}
		.pass-head {height: 40rem;}
		.pass-body-th small {
			margin-top: 3rem;
			font-size: 13rem;
		}
		.pass-body-td {font-size: 22rem;}

	}
}

/* pref-section */
@media all {
	.map {
		position: relative;
		background: center / contain no-repeat url(../img/pass-status/japan-map.svg);
	}
	.total-dl {
		position: absolute;
		left: 0;
		font-weight: bold;
		text-align: center;
	}
	.total-dt {
		border: max(1px, 1rem) solid var(--table-lightblue);
		background-color: var(--bg-lightblue);
		color: var(--main-blue);
	}
	.total-dd {
		border: max(1px, 1rem) solid var(--table-lightblue);
		border-top: none;
		font-family: var(--lineseed);
	}

	.numbers {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: space-between;
	}
	.pref-wrapper-dl {
		font-family: var(--lineseed);
		font-size: 14rem;
		font-weight: bold
	}
	.pref-inner-dt {font-weight: normal;}

	.pref-area-dl {color: #fff;}
	.hokkaido-grp .pref-area-dl { background-color: #40d0f1;}
	.tohoku-grp .pref-area-dl { background-color: #abd04b;}
	.kanto-grp .pref-area-dl { background-color: #f7af31;}
	.chubu-grp .pref-area-dl { background-color: #8a9fe3;}
	.kinki-grp .pref-area-dl { background-color: #baa592;}
	.chugoku-grp .pref-area-dl { background-color: #a66aca;}
	.shikoku-grp .pref-area-dl { background-color: #36c181;}
	.kyusyu-grp .pref-area-dl { background-color: #e39ac0;}
	.okinawa-grp .pref-area-dl { background-color: #ff8167;}
	.pref-area-dl,
	.pref-inner-dl {
		display: flex;
		justify-content: space-between;
		padding: .4em .5em .3em;
	}
	.pref-dd {border-bottom: max(1px, 1rem) solid var(--table-lightblue);}
	.pref-dd:last-child {margin-bottom: 1.5em;}
	.pref-wrapper-dl {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 140rem;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-section + .main-section {margin-top: 40rem;}

		.map {
			margin: 40rem auto 0;
			width: 320rem;
			height: 340rem;
		}
		.total-dl {
			top: 34rem;
			width: 160rem;
		}
		.total-dt {padding: 10rem 0;}
		.total-dd {
			padding: 10rem 0;
			font-size: 28rem;
		}
		.total-dd small  {font-size: 20rem;}

		/* examから流用 */
		.answer-button {
			position: relative;
			display: block;
			margin: 40rem auto 0;
			width: 210rem;
			height: 36rem;
			border: none;
			border-radius: 10em;
			box-shadow: 3rem 2rem 3rem rgba(0,0,0,.3);
		}
		.button.answer-button::after {content: none;}
		.answer-button > span {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10em;
			background-color: #fff;
			color: var(--txt);
		}
		.answer-button > span {
			top: max(1px, 1rem);
			left: max(1px, 1rem);
			padding-right: 1.5em;
			width: calc(100% - max(2px, 2rem));
			height: calc(100% - max(2px, 2rem));
		}
		.answer-button .open-close {
			right: 7rem;
			width: 18rem;
			height: 18rem;
			font-size: 12rem;
		}
		.open-close-txt {
			position: relative;
			display: inline-flex;
			text-align: center;
			width: 200rem;
			height: 18rem;
		}
		.open-close-txt > span {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			transition: .5s linear;
		}
		.answer-button:not(.close) .closed {opacity: 0;visibility: hidden;}
		.answer-button.close .open {opacity: 0;visibility: hidden;}
		.numbers-wrapper {display: none;}

		.numbers {
			margin: 0 auto;
			padding-top: 30rem;
			width: 300rem;
			height: 860rem;
		}
		.numbers-wrapper .answer-button {margin-top: 0;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-section + .main-section {margin-top: 60rem;}

		.pref-content {
			display: flex;
			justify-content: space-between;
		}
		.map {
			width: 480rem;
			height: 508rem;
		}
		.total-dl {
			top: 50rem;
			width: 240rem;
		}
		.total-dt {padding: 16rem 0;}
		.total-dd {
			padding: 16rem 0;
			font-size: 40rem;
		}
		.total-dd small  {font-size: 28rem;}

		.pref-section-inner {
			padding-left: 80rem;
			padding-right: 80rem;
			padding: 60rem 80rem 10rem;
		}

		.numbers {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: space-between;
			width: 460rem;
			height: 620rem;
		}
	}
}

/* jobs-section */
@media all {

	.jobsratio-item {
		display: flex;
		justify-content: space-between;
		padding: 0 1em;
		border-bottom: max(1px, 1rem) solid var(--table-lightblue);
	}
	.jobs-section,
	.jobs-section-inner,
	.age-section,
	.age-section-inner {
		font-family: var(--lineseed);
		font-weight: bold;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.jobs-and-age {margin-top: 40rem;}

		.jobs-chartgraph {
			margin: 40rem auto 0;
			width: 204rem;
			height: 204rem;
		}
		.jobsratio-dl {margin-top: 20rem;}
		.jobsratio-item {
			padding: 10rem .5em;
			font-size: 20rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.jobs-and-age {
			position: relative;
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			margin: 60rem auto 20rem;
			width: 1160rem;
		}

		.jobs-section,
		.jobs-section-inner,
		.age-section,
		.age-section-inner {
			width: 550rem;
		}

		.jobs-section-inner {padding: 40rem 0;}
		.jobs-chartgraph {
			margin: 50rem auto 0;
			width: 240rem;
			height: 240rem;
		}

		.jobsratio-dl {
			margin: 10rem auto;
			width: 420rem;
		}
		.jobsratio-item {
			padding: 10rem 1em;
			font-size: 22rem;
		}


	}
}

/* age-section */
@media all {
	.data-year {
		font-size: 12rem;
		color: var(--txt-gray);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.age-graph {
			margin-top: 30rem;
			width: 100%;
			height: 330rem;
		}
		.data-year {
			padding-right: 12rem;
			text-align: right;
			transform: translateY(12rem);
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.age-section {margin-top: 0!important;}

		.age-section-inner {
			padding: 40rem 0;
			height: 100%;
		}
		.age-graph {
			margin: 40rem auto 0;
			width: 480rem;
			height: 450rem;
		}

		.jobsratio-dl {
			margin: 10rem auto;
			width: 420rem;
		}
		.jobsratio-item {
			padding: 10rem 1em;
			font-size: 22rem;
		}

		.data-year {
			position: absolute;
			bottom: -20rem;
			right: 0;
		}
		
		.belt-img {margin: 60rem 0 100rem;}


	}
}


/* voice-section */
@media all {
	.voice-header-lead {text-align: center;}

	.voice-item {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 10rem;
		width: 310rem;
		height: 278rem;
		border-radius: 10rem;
		background-color: var(--bg-lightblue);
		box-shadow: 2rem 2rem 4rem rgba(48, 70,93, .2);
		font-size: 14rem;
	}
	.voice-item:hover {cursor: pointer;}

	.voice-job_age {
		display: inline-block;
		padding: 5rem 7rem 6rem;
		font-weight: 600;
		text-align: center;
		color: #fff;
	}

	.voice-catch {
		margin: 14rem auto 10rem;
		width: 270rem;
		font-weight: 600;
		line-height: 26rem;
	}

	.voice-name {
		margin: 0 auto;
		width: 270rem;
		text-align: right;
	}
	.voice-name > span {
		position: relative;
		display: inline-block;
	}
	.voice-name > span::before {
		content: '';
		position: absolute;
		top: .5em;
		left: -3em;
		display: block;
		width: 2.5em;
		height: max(1px, 1rem);
		background: linear-gradient(to right, #f00, #b507de, #00a2e7);
	}

	.voice-thumb {
		display: block;
		width: 100%;
		height: 134rem;
	}
	.voice-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.modal-voice-content {display: none;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.voice-section {padding: 60rem 25rem 140rem;}

		.voice-list {
			margin: 50rem auto 0;
			width: 310rem;
		}
		.voice-item {margin-top: 20rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.voice-header-ttl {margin-bottom: 60rem;}

		.voice-list {
			display: flex;
			flex-wrap: wrap;
			gap: 40rem 35rem;
			margin-top: 80rem;
		}

		.voice-item {transition: opacity .3s, box-shadow .3s;}
		.voice-item:hover {
			opacity: .7;
			box-shadow: 0 0 0 rgba(48, 70,93, .2);
		}

		.site-footer {margin-top: 160rem;}
	}
}



/* Slick Overrides for Modal */
.slick-slide {
	outline: none;
}

/* Custom Slider Navigation in Modal */
.modal-container .slick-prev,
.modal-container .slick-next {
	z-index: 1020;
	position: absolute;
	top: 50%;
	width: 30rem;
	height: 60rem;
	transform: translateY(-50%);
	transition: .3s;
}


.modal-container .slick-prev {left: -35rem;}
.modal-container .slick-next {right: -35rem;}

.modal-container .slick-prev::before,
.modal-container .slick-next::before {
	content: '';
	position: absolute;
	top: calc(50% - 12rem);
	display: block;
	width: 24rem;
	height: 24rem;
	border-bottom: max(1px, 1rem) solid #fff;
	opacity: 1;
	transition: .3s;
}
.modal-container .slick-prev::before {
	left: 8rem;
	border-left: max(1px, 1rem) solid #fff;
	transform: rotate(45deg);
}
.modal-container .slick-next::before {
	right: 8rem;
	border-right: max(1px, 1rem) solid #fff;
	transform: rotate(-45deg);
}

@media (min-width: 768px) {
	.modal-container .slick-prev:hover,
	.modal-container .slick-next:hover {
		background-color: #fff;
	}
	.modal-container .slick-prev:hover::before,
	.modal-container .slick-next:hover::before {
		filter: brightness(0);
	}
}

/* ==========================================
		モーダルポップアップ (Modal Popup)
		========================================== */

@media all {
		
	.modal-base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0.35s ease;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50rem;
	}

	.modal-base.is-active {
		opacity: 1;
		visibility: visible;
	}


	.modal-container {
		position: relative;
		background-color: #ffffff;
		width: 100%;
		max-width: 1000rem;
		max-height: 90vh;
		border-radius: 10rem;
		z-index: 1010;
		transform: translateY(30rem) scale(0.98);
		transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
		display: flex;
		flex-direction: column;
	}
	.modal-container::before,
	.modal-container::after {
		content: '';
		position: absolute;
		z-index: 2;
		left: 20rem;
		top: 0;
		display: block;
		width: calc(100% - 40rem);
		height: 50rem;
		background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));
	}
	.modal-container::after {
		top: auto;
		bottom: 0;
		transform: scaleY(-1);
	}

	.modal-contents {
		margin: 0 auto;
		width: 100%;
		height: 100%;
	}
	.modal-contents :where(.modal-voice-list, .slick-list, .slick-track, .modal-voice-item) {
		height: 900rem!important;
		max-height: calc(90vh - 40rem)!important;
	}
	.modal-voice-item {
		overflow-y: auto;
		height: 100%;
		padding: 0 30rem;
	}

	.modal-base.is-active .modal-container {
		transform: translateY(0) scale(1);
	}

	.modal-close-button {
		position: absolute;
		top: 20rem;
		right: 20rem;
		width: 36rem;
		height: 36rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rem;
		font-weight: 100;
		color: var(--main-blue);
		cursor: zoom-out;
		z-index: 1020;
		transition: transform 0.2s;
	}

	.modal-close-button:hover {
		transform: rotate(90deg);
	}

	.modal-contents {
		position: relative;
		max-height: 90vh;
		width: 100%;
		border-radius: 10rem;
	}

	/* Modal Contents Styling */

	.modal-voice-item-txt {position: relative;}
	.modal-voice-item-txt::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: max(1rem, 1px);
		background: linear-gradient(to right, #f00, #b507de, #00a2e7);
	}

	.modal-voice-job_age {
		display: inline-block;
		color: #ffffff;
		font-weight: 500;
		padding: .5em 1em;
	}

	.modal-voice-catch {font-weight: 600;}



	.modal-voice-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.modal-the_content h4 {
		position: relative;
		font-weight: 600;
		color: var(--main-blue);
		padding-left: 2.5em;
		line-height: 1.75;
	}
	.modal-the_content h4::before {
		content: '';
		position: absolute;
		top: 1em;
		left: 0;
		display: block;
		width: 2em;
		height: max(1px, 1rem);
		background: linear-gradient(to right, #f00, #b507de, #00a2e7);
	}

	.modal-the_content h4 {margin-top: 2.5em;}
	.modal-the_content h4 + p {margin-top: 1em;}

	/* sp */
	@media (max-width: 767px) {
		.modal-base {padding: 40rem;}
		.modal-close-button {
			top: 0;
			right: 0;
			border-radius: 50%;
			background-color: rgba(255,255,255,.75);
		}

		.modal-voice-item {padding: 0 20rem;}
		.modal-voice-item-inner {padding: 50rem 0;}

		.modal-voice-item-header {
			display: flex;
			flex-direction: column-reverse;
		}
		.modal-voice-item-txt {
			position: relative;
			margin-top: 20rem;
			padding-bottom: 20rem;
		}
		.modal-voice-job_age {
			font-size: 13rem;
		}
		.modal-voice-catch {
			margin-top: 20rem;
			font-size: 15rem;
			line-height: 2;
		}
		.modal-voice-name {
			margin-top: 10rem;
			text-align: right;
		}
		.modal-the_content p {line-height: 2;}
		.modal-the_content img {
			margin: 20rem auto;
			width: 100%;
		}
	}

	/* tab & pc */
	@media (min-width: 768px) {
		.modal-voice-list {
			margin: 0 auto;
		}
		.modal-voice-item-inner {
			margin: 0 auto;
			width: 800rem;
			padding: 50rem 0 75rem;
		}
		.modal-voice-item-header {
			display: flex;
			justify-content: space-between;
		}
		.modal-voice-item-txt {
			position: relative;
			width: 380rem;
		}
		.modal-voice-catch {
			margin-top: 40rem;
			font-size: 18rem;
			line-height: 2.056;
		}
		.modal-voice-name {
			position: absolute;
			right: 0;
			bottom: 25rem;
		}

		.modal-voice-thumb {
			width: 380rem;
			height: 220rem;
		}

		.modal-the_content {margin-top: 60rem;}
		.modal-the_content p {line-height: 40rem;}
		.modal-the_content img {
			margin: 20rem auto;
			width: 400rem;
		}
	}
}







/* template-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}