@charset "UTF-8";
/*----------
	職場アンケート
----------*/
/* override */
.l-structure {
	padding-bottom: 0!important;
}
@media (min-width: 768px), print {
	.g-grid {
		gap: 40px;
	}
}
/*-----------
	billboard
----------*/
.un-billboard__heading {
	position: relative;
	z-index: 3;
}
.un-billboard__title {
	margin-bottom: 40px;
	color: var(--color-seco);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
}
.un-billboard__title span {
	position: relative;
	display: block;
	margin-bottom: 6px;
	color: var(--color-prim);
	text-transform: uppercase;
	font-family: var(--font-barlow);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: 0.02em;
}
.un-billboard__title span::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -3px;
	width: 15px;
	height: 3px;
	margin-right: 10px;
	background-color: var(--color-prim);
	transform: skew(-18deg);
}
.un-billboard__catch {
	color: var(--color-txt);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
@media (max-width: 767px) {
	.un-billboard__heading {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto auto auto;
		gap: 10px 0;
	}
	.un-billboard__title {
		grid-row: 1/2;
		grid-column: 1/4;
	}
	.un-billboard__catch {
		grid-row: 2/3;
		grid-column: 1/5;
		margin-bottom: 30px;
	}
	.un-billboard__image {
		grid-row: 1/2;
		grid-column: 4/5;
	}
}
@media (min-width: 768px), print {
	.un-billboard__heading {
		min-height: 394px;
	}
	.un-billboard__title {
		font-size: 5.2rem;
		margin-bottom: 100px;
	}
	.un-billboard__title span {
		font-size: 3rem;
		margin-bottom: 0;
	}
	.un-billboard__title span::before {
		top: -8px;
		width: 28px;
		height: 5px;
		margin-right: 14px;
	}
	.un-billboard__catch {
		width: 100%;
		margin-bottom: 40px;
		font-size: 2rem;
	}
	.un-billboard__image {
		position: absolute;
		top: 40px;
		right: 0;
		width: 237px;
		height: 308px;
	}
}

/*----------
	image scaling
----------*/
.image-scaling {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 12px;
}
.image-scaling i {
    position: relative;
	display: inline-block;
    content: "";
    background: url(/recruit/assets/images/survey/icon_swipe.svg) no-repeat;
    background-size: contain;
    width: 22px;
    height: 20px;
    z-index: 99;
    pointer-events: none;
}

.image-scaling__text {
	display: inline-block;
	font-size: 1.2rem;
	vertical-align: middle;
	margin-left: 5px;
}
@media (min-width: 768px), print {
	.image-scaling {
		display: none;
	}
}

/*-----------
	title
----------*/
/* h2 */
.un-heading-secondary {
	position: relative;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--color-prim);
	font-weight: 700;
	font-size: 2.3rem;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
.un-heading-secondary h2 span {
	display: inline-block;
	position: relative;
	padding-top: 10px;
	padding-bottom: 16px;
}
.un-heading-secondary p {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	max-width: 84px;
	height: 30px;
	background-color: var(--color-prim);
	color: #fff;
	font-weight: 700;
	line-height: 30px;
	padding-inline: 7px;
}
.un-heading-secondary .q {
	font-family: var(--font-barlow);
	font-size: 1.1rem;
	letter-spacing: -0.02em;
	padding-right: 2px;
}
.un-heading-secondary .num {
	font-family: var(--font-barlow);
	font-size: 2rem;
}
@media (min-width: 768px), print {
	.un-heading-secondary {
		display: flex;
		align-items: center;
		gap: 0 30px;
		font-size: 3.2rem;
		padding-bottom: 20px;
		margin-bottom: 40px;
		border-width: 3px;
	}
	.un-heading-secondary h2 span {
		display: inline-block;
		position: relative;
		padding: 0;
	}
	.un-heading-secondary p {
		flex-direction: column;
		gap: 6px;
		width: 80px;
		height: 80px;
		line-height: 1;
		padding: 0;
	}
	.un-heading-secondary .q {
		font-size: 1.4rem;
		padding-right: 0;
	}
	.un-heading-secondary .num {
		font-size: 3rem;
	}
}
/* h2 white */
.un-heading-secondary.un-heading-secondary--wh {
	border-bottom: 1px solid #E6E6E6;
}
.un-heading-secondary.un-heading-secondary--wh p {
	background-color: #fff;
	color:  var(--color-prim);
}
@media (min-width: 768px), print {
	.un-heading-secondary.un-heading-secondary--wh {
		border-width: 3px;
	}
}

/* h3 */
.un-heading-tertiary {
	font-family: var(--font-barlow);
	font-size: 2.2rem;
	line-height: 1;
	color:  var(--color-prim);
	margin-bottom: 30px;
}
@media (min-width: 768px), print {
	.un-heading-tertiary {
		font-size: 3.5rem;
		margin-bottom: 40px;
	}
}
.un-heading-tertiary--wh {
	color: #fff;
}


/*-----------
	survey
----------*/
.un-survey {
	position: relative;
	padding: 20px 0 60px;
	background-color: #F7F7F7;
}
.un-survey::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 280px;
	background: var(--color-prim);
	z-index: 1;
}
.un-survey__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5.333%;
	padding-right: 5.333%;
	z-index: 2;
}
.un-survey__image.circle {
	margin-bottom: 20px;
}
.un-survey__image:not(.circle) {
	border: 1px solid #C2C9CB;
	background-color: #fff;
	padding: 20px;
}
.un-survey__triangle {
	position: absolute;
	top: 224px;
	right: 0;
	width: 46.15%;
	max-width: 130px;
	aspect-ratio: 1;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	background: var(--color-prim);
	z-index: 1;
}
.un-survey__illust {
	position: relative;
}
.un-survey__illust-item {
	position: absolute;
}
.un-survey em {
	font-weight: 700;
}
@media (min-width: 768px), print {
	.un-survey {
		padding: 100px 0;
	}
	.un-survey::before {
		height: 450px;
	}
	.un-survey__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
	.un-survey__image {
		aspect-ratio: 3/1;
		padding: 50px;
	}
	.un-survey__image.circle {
		aspect-ratio: 1/1;
		max-width: 480px;
		padding: 0;
		margin: 0 auto 50px;
	}
	.un-survey__triangle {
		top: 400px;
		width: 31.94%;
		max-width: 180px;
	}
}

/* 白背景 */
.un-survey.un-survey--wh::before {
	background: #fff;
}
.un-survey.un-survey--wh .un-survey__triangle {
	background: #fff;
}

/*-----------
	box
----------*/
.un-box {
	background-color: #fff;
	border: 2px solid var(--color-prim);
}
.un-box__inner {
	padding: 20px;
	line-height: 1.75;
}
.un-box__title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.4;
}
.un-box__answer li {
	position: relative;
	padding-left: 35px;
}
.un-box__answer li + li {
	margin-top: 10px;
}
.un-box__answer li::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/recruit/assets/images/survey/icon_1.svg) no-repeat 0 0;
	position: absolute;
	top: 4px;
	left: 0;
}
.un-box .un-heading-tertiary {
	margin-bottom: 20px;
}
.un-box__answer + .un-box__title {
	margin-top: 30px;
}
@media (max-width: 767px) {
	.un-box + .un-box {
		margin-top: 20px;
	}
}
@media (min-width: 768px), print {
	.un-box {
		border-width: 3px;
	}
	.un-box__inner {
		padding: 50px;
	}
	.un-box__title {
		font-size: 2.7rem;
		margin-bottom: 30px;
	}
	.un-box .un-heading-tertiary {
		margin-bottom: 30px;
	}
	.un-box__answer li + li {
		margin-top: 15px;
	}
	.un-box__answer + .un-box__title {
		margin-top: 40px;
	}
}

.un-box--wh {
	border-color: #fff;
}

.un-box-comment {
	position: relative;
}
.un-box-comment::before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 16px;
	right: 16px;
}
.un-box-comment.man1::before {
	background: url(/recruit/assets/images/survey/man_1.webp) no-repeat;
	background-size: contain;
}
.un-box-comment.man2::before {
	background: url(/recruit/assets/images/survey/man_2.webp) no-repeat;
	background-size: contain;
}
.un-box-comment.woman1::before {
	background: url(/recruit/assets/images/survey/woman_1.webp) no-repeat;
	background-size: contain;
}
.un-box-comment.woman2::before {
	background: url(/recruit/assets/images/survey/woman_2.webp) no-repeat;
	background-size: contain;
}
.un-box-comment .un-box__inner {
	padding: 20px 20px 55px;
}
@media (min-width: 768px), print {
	.un-box-comment .un-box__inner {
		padding: 35px 39px 66px;
		min-height: 182px;
	}
	.un-box-comment::before {
		width: 48px;
		height: 48px;
	}
}
.un-box-imageset__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.un-box-imageset__figure figcaption {
	margin-top: 15px;
	font-size: 1.2rem;
	color: #666666;
}
@media (min-width: 768px), print {
	.un-box-imageset__inner {
		flex-direction: row;
		gap: 40px;
	}
	.un-box-imageset__figure {
		flex: 0 0 490px;
		width: 490px;
	}
	.un-box-imageset__figure figcaption {
		margin-top: 20px;
		font-size: 1.4rem;
	}
}

/*-----------
	imageset
----------*/
.un-imageset__content {
	margin-top: 40px;
}
@media (min-width: 768px), print {
	.un-imageset__inner {
		display: flex;
		gap: 55px;


	}
	.un-imageset__content {
		flex: 0 0 calc(50% - 20px);
		margin-top: 0;
	}
}

/*-----------
	message
----------*/
.un-message {
	position: relative;
	z-index: 2;
}
.un-message::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 77px;
	background: url(/recruit/assets/images/survey/human.webp) no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
}
.un-message__inner {
	border-top: 10px solid #C2C9CB;
	border-bottom: 10px solid #C2C9CB;
	background-color: var(--color-prim);
	padding: 20px 10px 77px;
	margin-inline: 5.3333%;
}
.un-message__box {
	position: relative;
	background-color: #fff;
	padding: 20px;
	margin-bottom: 17px;
}
.un-message__box:after {
	content: '';
	position: absolute;
	top: calc(100% - 1px);
	right: 40px;
	width: 17px;
	aspect-ratio: 1;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	background: #fff;
	z-index: 1;
}
.un-message__box:nth-child(n + 3):after {
	left: 40px;
	right: initial;
	transform: rotate(-90deg);
}
@media (min-width: 768px), print {
	.un-message .g-grid {
		gap: 20px 30px;
	}
	.un-message {
		width: 100%;
		max-width: 1240px;
		margin: 0 auto 105px;
		padding-inline: 20px;
	}
	.un-message::after {
		height: 230px;
		bottom: -105px;
	}
	.un-message__inner {
		padding: 22px 22px 112px;
		margin: auto;
	}
	.un-message__box {
		padding: 30px 30px 50px;
		margin-bottom: 24px;
	}
	.un-message__box:after {
		left: 40px;
		right: initial;
		width: 30px;
		transform: rotate(-90deg);
	}
	.un-message__box:nth-child(n + 4):after {
		right: 40px;
		left: initial;
		transform: rotate(360deg);
	}
}


/*-----------
	section
----------*/
/* QUESTION01 */
@media (min-width: 768px), print {
	.un-survey-section01 .un-heading-secondary {
		margin-bottom: 60px;
	}
}

/* QUESTION2 */
@media (max-width: 767px) {
	.un-survey-section02 .un-survey__illust-item {
		width: 91px;
		top: -40px;
		right: 10px;
	}
}
@media (min-width: 768px), print {
	.un-survey-section02 .un-box-grid {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto auto auto auto auto auto;
		gap: 40px 50px;
	}
	.un-survey-section02 .un-box-grid .un-box:nth-child(1) {
		grid-area: 1 / 1 / 8 / 2;
	}
	.un-survey-section02 .un-box-grid .un-box:nth-child(2) {
		grid-area: 1 / 2 / 5 / 3;
	}
	.un-survey-section02 .un-box-grid .un-box:nth-child(3) {
		grid-area: 5 / 2 / 8 / 3;
	}
	.un-survey-section02 .un-survey__illust-item {
		width: 165px;
		bottom: -42px;
		left: 50px;
	}
}

/* QUESTION03 */
@media (max-width: 767px) {
	.un-survey-section03 .un-survey__illust-item {
		width: 103px;
		bottom: -91px;
		right: 5px;
	}
}
@media (min-width: 768px), print {
	.un-survey-section03 .un-heading-secondary {
		margin-bottom: 60px;
	}
	.un-survey-section03 .un-survey__illust-item {
		width: 168px;
		top: 438px;
		right: 0;
	}
}

/* QUESTION04 */
@media (max-width: 767px) {
	.un-survey-section04 .un-survey__illust-item {
		width: 71px;
		top: -40px;
		right: 23px;
	}
}
@media (min-width: 768px), print {
	.un-survey-section04 .un-heading-secondary {
		margin-bottom: 60px;
	}
	.un-survey-section04 .un-survey__illust-item {
		width: 159px;
		top: -35px;
		right: 72px;
	}
}

/* QUESTION07 */
@media (max-width: 767px) {
	.un-survey-section07 .un-survey__illust-item {
		width: 107px;
		top: -57px;
		right: 0;
	}
}
@media (min-width: 768px), print {
	.un-survey-section07 .un-survey__illust-item {
		width: 214px;
		bottom: -20px;
		right: 0;
	}
}

/* QUESTION09 */
@media (max-width: 767px) {
	.un-survey-section09 .un-heading-secondary {
		margin-bottom: 25px;
	}
	.un-survey-section09 .un-survey__illust-item {
		width: 102px;
		bottom: 0;
		left: 0;
	}
}
@media (min-width: 768px), print {
	.un-survey-section09 .un-heading-secondary {
		margin-bottom: 60px;
	}
	.un-survey-section09 .un-survey__illust-item {
		width: 154px;
		bottom: 0;
		right: calc(50% + 139px);
	}
}

/* QUESTION10 */
@media (max-width: 767px) {
	.un-survey-section10 .un-survey__image.circle {
		padding-right: 10px;
		transform: translateX(-10px);
	}
	.un-survey-section10 .un-survey__illust-item {
		width: 111px;
		bottom: 0;
		right: -5.333%;
	}
}
@media (min-width: 768px), print {
	.un-survey-section10 .un-heading-secondary {
		margin-bottom: 60px;
	}
	.un-survey-section10 .un-survey__illust-item {
		width: 157px;
		bottom: 0;
		left: calc(50% + 139px);
	}
}

/* QUESTION11 */
@media (max-width: 767px) {
	.un-survey-section11 .un-survey__illust-item {
		width: 73px;
		top: -49px;
		right: 0;
	}
}
@media (min-width: 768px), print {
	.un-survey-section11 .un-survey__illust-item {
		width: 137px;
		bottom: -20px;
		right: 20px;
	}
}