@charset "UTF-8";

.section {
	.inner {
		width: 100%;
		max-width: 1080px;
		margin-inline: auto;
		padding-inline: 24px
	}
}

section#back {
	margin-top: 160px;

	.btn {
		a {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			width: 240px;
			margin-inline: auto;
			padding: 16px 0;
			border: 1px solid #CECECE;
			border-radius: 300px;
			font-size: 1.4rem;
			font-weight: 600;
			line-height: 1;
			position: relative;

			&:after {
				content: "";
				display: inline-block;
				width: 10px;
				height: 10px;
				border-left: 1px solid var(--maincolor);
				border-bottom: 1px solid var(--maincolor);
				rotate: z 45deg;
				translate: 0 -50%;
				position: absolute;
				left: 20px;
				top: 50%
			}
		}
	}
}

@media screen and (min-width:768px) {
	section#back {
		margin-top: 160px;

		.btn {
			a:hover {
				border-color: var(--maincolor);
				background: var(--maincolor);
				color: #fff;

				&:after {
					border-color: #fff
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	section#back {
		margin-top: 64px
	}
}

.archieve_top {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 48px;
	margin-top: -60px;

	.btn_list_wrap {
		.btn_list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-content: center;
			justify-content: flex-start;
			align-items: stretch;

			.btn_wrap a {
				margin-top: 10px;
				margin-right: 10px;
				padding: 8px 16px;
				border: 1px solid #ddd;
				border-radius: 300px;
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1;

				&.btn_active {
					background: var(--maincolor);
					border-color: var(--maincolor)
				}
			}
		}
	}

	.link_wrap {
		.bnr {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			align-items: flex-start;
			border: 1px solid #ddd;
			padding: 20px;
			border-radius: 5px;
			position: relative;
			overflow: hidden;

			&:before,
			&:after {
				content: "";
				display: inline-block;
				background: var(--maincolor);
				position: absolute;
				transition: .3s
			}

			&:before {
				width: 40px;
				height: 2px;
				right: 20px;
				top: 34px
			}

			&:after {
				width: 2px;
				height: 12px;
				transform: skewX(45deg);
				right: 24px;
				top: 24px
			}

			.title {
				font-family: var(--josefin);
				font-size: 2.8rem;
				font-weight: 700;
				line-height: 1;
				margin-bottom: 4px;
				transition: .3s;

				&:before,
				&:after {
					content: "";
					display: inline-block;
					background: var(--maincolor);
					position: absolute;
					transition: .3s;
					opacity: 0
				}

				&:before {
					width: 40px;
					height: 2px;
					right: calc(100% + 20px);
					top: 34px
				}

				&:after {
					width: 2px;
					height: 12px;
					transform: skewX(45deg);
					right: calc(100% + 20px);
					top: 24px
				}
			}

			.text {
				font-size: 1.4rem;
				font-weight: 400;
				line-height: 1.6
			}
		}
	}
}

@media screen and (min-width:768px) {
	.archieve_top {
		.btn_list_wrap {
			width: calc(100% - 300px);

			.btn_list {
				.btn_wrap a:hover {
					border-color: var(--maincolor);
					background: var(--maincolor)
				}
			}
		}

		.link_wrap {
			.bnr:hover {
				&:before {
					right: calc(-100% + 20px)
				}

				&:after {
					right: calc(-100% + 24px)
				}

				.title {
					color: var(--maincolor);

					&:before {
						right: 20px;
						opacity: 1
					}

					&:after {
						right: 24px;
						opacity: 1
					}
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	.archieve_top {
		margin-top: 0;
		margin-bottom: 40px
	}
}

.archieve_content {
	.list_wrap {
		.list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-content: center;
			justify-content: space-between;
			align-items: flex-start;

			.list_block {
				width: 100%;
				margin-bottom: 40px;

				a {
					width: 100%;
					
					
					.block_in {
									display: flex					;
									flex-flow: row wrap;
									align-content: center;
									justify-content: space-between;
									align-items: center;
					}
					
					.cat {
						display: inline-block;
						width: 150px;
						border: 1px solid var(--maincolor);
						border-radius: 300px;
						padding: 4px 8px;
						text-align: center;
						font-size: 1.4rem;
						font-weight: 400;
						line-height: 1;
					}

					.title {
						width: calc(100% - 170px);
						font-size: 2rem;
						font-weight: 700;
						line-height: 1.5;
						position: relative;

						&:before {
							content: "";
							display: inline-block;
							width: 0%;
							height: 100%;
							background: #a8d96e;
							position: absolute;
							left: 0;
							top: 0;
							z-index: -1;
							transition: .3s
						}
					}

					.name {
						font-size: 1.6rem;
						font-weight: 400;
						line-height: 1.5;

						.san {
							font-size: 1.4rem;
							margin-left: .5rem
						}
					}
				}
			}

			.blank {
				width: min(31%, 314px)
			}
		}
	}
}

@media screen and (min-width:768px) {
	.archieve_content {
		.list_wrap {
			.list {
				.list_block {
					a:hover {
						.img span {
							scale: 1.1
						}

						.title:before {
							width: 100%
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	.archieve_content {
		.list_wrap {
			.list {
				justify-content: center;

				.list_block {

					a {
						
						.block_in {
										flex-direction: column-reverse;
										align-items: flex-start;
										gap: 10px;
						}

						.cat {
							
						}
						.title {
							width: 100%;
						}
					}
				}

				.blank {
					width: min(100%, 400px)
				}
			}
		}
	}
}

.m-pager {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin-top: 80px;

	&:before,
	&:after {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		border-bottom: 3px solid #ddd;
		border-left: 3px solid #ddd;
		rotate: 45deg
	}

	&:before {
		rotate: 45deg;
		translate: -20px 0
	}

	&:after {
		rotate: -135deg;
		translate: 20px 0
	}

	.page-numbers:not(.next, .prev) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		width: 32px;
		height: 32px;
		margin-inline: 6px;
		font-family: var(--josefin);
		color: var(--maincolor);
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1;

		&.current {
			color: #333;
			background: var(--maincolor)
		}
	}

	.next,
	.prev {
		position: relative;
		z-index: 1;

		&:before {
			content: "";
			display: inline-block;
			width: 16px;
			height: 16px;
			border-bottom: 3px solid var(--maincolor);
			border-left: 3px solid var(--maincolor);
			position: absolute;
			top: 50%;
			translate: 0 -50%;
			transition: .3s
		}
	}

	.next {
		margin-right: -20px;

		&:before {
			rotate: -135deg;
			left: 0
		}
	}

	.prev {
		margin-left: -20px;

		&:before {
			rotate: 45deg;
			position: absolute;
			right: 0
		}
	}
}

@media screen and (min-width:768px) {
	.m-pager {
		.page-numbers:not(.next, .prev):hover {
			color: #333;
			background: var(--maincolor)
		}

		.next,
		.prev {
			&:hover {
				&:before {
					border-color: #333
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	.m-pager {
		margin-top: 24px
	}
}

.archieve_bottom {
	margin-top: 160px;

	.bnr {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 280px;
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 40px;
		overflow: hidden;
		position: relative;

		&:before,
		&:after {
			content: "";
			display: inline-block;
			background: var(--maincolor);
			position: absolute;
			transition: .4s
		}

		&:before {
			width: 58px;
			height: 4px;
			right: 46px;
			top: calc(50% + 6px)
		}

		&:after {
			width: 6px;
			height: 20px;
			right: 50px;
			top: calc(50% + -10px);
			transform: skewX(45deg)
		}

		.bnr_inner {

			&:before,
			&:after {
				content: "";
				display: inline-block;
				background: var(--maincolor);
				position: absolute;
				transition: .4s;
				opacity: 0
			}

			&:before {
				width: 58px;
				height: 4px;
				right: calc(100% + 46px);
				top: calc(50% + 6px)
			}

			&:after {
				width: 6px;
				height: 20px;
				right: calc(100% + 50px);
				top: calc(50% + -10px);
				transform: skewX(45deg)
			}

			.textwrap {
				filter: drop-shadow(2px 2px 0 white) drop-shadow(2px -2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(-2px -2px 0 white);

				.title {
					font-family: Josefin Sans;
					font-size: 6.4rem;
					font-weight: 700;
					transition: .3s
				}

				.text {
					font-size: 1.6rem;
					font-weight: 400;
					line-height: 1.6
				}
			}

			.content_wrap {
				position: absolute;
				right: 80px;
				top: -48px;
				rotate: -10deg;
				z-index: -1;

				ol {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: center;
					justify-content: space-between;
					align-items: stretch;
					width: 400px
				}

				li {
					display: flex;
					flex-direction: row;
					align-content: center;
					justify-content: center;
					align-items: center;
					width: 188px;
					padding: 12px 18px;
					font-size: 1.4rem;
					font-weight: 400;
					line-height: 1.5;
					text-align: left;
					background: #f7f7f7;
					margin-bottom: 20px;
					border-radius: 5px;
					position: relative;
					filter: drop-shadow(1px 0 0 var(--maincolor)) drop-shadow(-1px 0 0 var(--maincolor)) drop-shadow(0 1px 0 var(--maincolor)) drop-shadow(0 -1px 0 var(--maincolor));
					transition: .5s;

					&:nth-of-type(2n) {
						translate: 0 40px
					}

					&:before {
						content: "";
						display: inline-block;
						border: 10px solid transparent;
						border-left-color: #f7f7f7;
						border-top-color: #f7f7f7;
						position: absolute;
						left: calc(50% - 10px);
						bottom: -12px
					}
				}
			}
		}
	}
}

@media screen and (min-width:768px) {
	.archieve_bottom {
		.bnr:hover {
			&:before {
				right: calc(46px - 100%)
			}

			&:after {
				right: calc(50px - 100%)
			}

			.bnr_inner {
				&:before {
					right: 46px;
					opacity: 1
				}

				&:after {
					right: 50px;
					opacity: 1
				}

				.textwrap {
					.title {
						color: var(--maincolor)
					}
				}

				.content_wrap {
					li {
						rotate: y -360deg
					}
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	.archieve_bottom {
		margin-top: 64px;

		.bnr {
			height: 253px;
			padding: 0;
			align-content: flex-start;

			&:before {
				width: 44px;
				height: 2px;
				right: 24px;
				top: 46px
			}

			&:after {
				width: 3px;
				height: 10px;
				right: 26px;
				top: 38px
			}

			.bnr_inner {
				width: 100%;

				.textwrap {
					background: #fff;
					padding: 32px 24px 20px;
					filter: none;
					width: 100%;

					.title {
						font-size: 3.2rem;
						line-height: 1;
						margin-bottom: 4px
					}

					.text {
						font-size: 1.4rem
					}
				}

				.content_wrap {
					top: 30%;
					left: calc(50% - 50vw);

					ol {
						width: 100vw;

						li {
							width: 23%;
							padding: 1.5vw 2vw;
							font-size: 1.5vw;
							margin-bottom: 12px;
							border-radius: 2px;

							&:nth-of-type(2n) {
								translate: 0
							}

							&:before {
								border-width: 5px;
								left: calc(50% - 5px);
								bottom: -6px
							}
						}
					}
				}
			}
		}
	}
}

#reviews_prise {
	margin-bottom: 48px;

	.inner {
		text-align: center
	}
}

#reviews_lead {
	margin-bottom: 48px;

	.catch {
		text-align: center;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.4
	}

	.text {
		text-align: center;
		font-size: 2rem;
		font-weight: 500;
		line-height: 1.4;
		margin-top: 20px
	}
}

#reviews_content li {
	border-radius: 12px;
	box-shadow: 0 2px 5px #0003;
	padding: 28px 36px 32px;

	&+li {
		margin-top: 40px
	}

	.title {
		color: var(--maincolor);
		font-size: 2rem;
		font-weight: 900;
		line-height: 1.4;
		margin-bottom: 16px
	}

	.text {
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 1.4
	}
}

@media screen and (max-width:767px) {
	#reviews_prise {
		.inner {
			img {
				max-width: 300px
			}
		}
	}

	#reviews_lead {
		.catch {
			font-size: 2rem
		}
	}

	#reviews_content li {
		padding: 20px;

		.title {
			font-size: 1.6rem
		}
	}
}

.interviews_single .inner {
	max-width: 800px
}

section#content_lead_block {
	margin: 80px 0 48px;

	.title {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1.4;
		margin-bottom: 40px
	}

	.excerpt {
		background: #F7F7F7;
		padding: 24px;
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1.8
	}
}

@media screen and (max-width:767px) {
	section#content_lead_block {
		margin: 0 0 24px;

		.title {
			font-size: 3.2rem;
			margin-bottom: 32px
		}

		.excerpt {
			padding: 20px;
			font-size: 1.4rem
		}
	}
}

section#content_profile_block {
	margin-bottom: 96px;

	.inner {
		position: relative;

		&:has(.img) {
			padding-right: 326px;

			.img {
				width: 306px;
				height: 204px;
				border-radius: 5px;
				overflow: hidden;
				position: absolute;
				right: 0;
				bottom: 0;

				span {
					display: inline-block;
					width: 100%;
					height: 100%;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center
				}
			}
		}

		.info {
			.tag {
				display: inline-block;
				border: 1px solid var(--maincolor);
				border-radius: 300px;
				margin-bottom: 20px;
				padding: 12px 16px;
				font-size: 1.4rem;
				font-weight: 700;
				line-height: 1
			}

			.name {
				margin-bottom: 20px;
				font-size: 3.2rem;
				font-weight: 700;
				line-height: 1.8;

				.san {
					font-size: 2.4rem
				}
			}

			.deta {
				margin-bottom: 12px;

				&.company dl {
					&+dl {
						margin-top: 4px
					}

					dt {
						margin-right: 16px
					}
				}

				&.user {
					display: flex;

					dl+dl {
						margin-left: 24px
					}

					dt {
						margin-right: 8px
					}
				}

				dl {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: center;
					justify-content: flex-start;
					align-items: flex-start;

					dt {
						color: var(--maincolor);
						font-size: 1.4rem;
						font-weight: 400;
						line-height: 1.8;
						margin-right: 16px
					}

					dd {
						font-size: 1.4rem;
						font-weight: 400;
						line-height: 1.8;

						a {
							text-decoration: underline
						}
					}
				}
			}
		}

		.profile {
			font-size: 1.4rem;
			font-weight: 400;
			line-height: 2.1
		}
	}
}

@media screen and (max-width:767px) {
	section#content_profile_block {
		margin-bottom: 64px;

		.inner {
			position: relative;

			&:has(.img) {
				padding-right: 24px;

				.info {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: center;
					justify-content: flex-start;
					align-items: center;

					.wrap {
						max-width: calc(100% - 33vw - 20px)
					}

					.img {
						width: min(33vw, 300px);
						height: min(22vw, 200px);
						position: relative;
						right: initial;
						bottom: initial;
						margin-left: 20px
					}
				}
			}

			.info {
				margin-bottom: 16px;

				.tag {
					margin-bottom: 12px;
					padding: 8px 10px;
					font-size: 1.2rem
				}

				.name {
					margin-bottom: 0;
					font-size: 2.4rem;

					.san {
						font-size: 1.6rem
					}
				}
			}

			&.company {
				&:has(.img) {
					padding-bottom: min(calc(66vw - 16px), 256px);

					.info {
						flex-direction: column;
						align-content: flex-start;
						align-items: flex-start;

						.img {
							position: absolute;
							left: 50%;
							bottom: 0;
							translate: -50% 0;
							width: min(calc(100vw - 48px), 360px);
							height: min(calc(66vw - 32px), 240px);
							margin: 0
						}
					}
				}
			}
		}
	}
}

section#content_content_block {
	*+h2.wp-block-heading {
		margin-top: 96px
	}

	h2.wp-block-heading {
		border-bottom: 2px solid #ddd;
		padding-bottom: 8px;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1.8;
		position: relative;

		&:before {
			content: "";
			display: inline-block;
			width: 40px;
			height: 2px;
			background: var(--maincolor);
			position: absolute;
			left: 0;
			bottom: -2px
		}
	}
	
	h2.wp-block-heading+p {
		margin-top: 24px
	}
	
	*+h3.wp-block-heading {
		margin-top: 48px
	}
	
	h2.wp-block-heading+h3.wp-block-heading {
		margin-top: 32px
	}
	
	h3.wp-block-heading {
			font-size: 2.2rem;
			font-weight: 700;
			line-height: 1.8;
			position: relative;
			&:before {
				content: "";
				display: inline-block;
				width: .5em;
				height: .8em;
				background: var(--maincolor);
				clip-path: polygon(100% 50%, 0 0, 0 100%);
				margin-right: .5em;
			}
	}

	h3.wp-block-heading+p {
		margin-top: 16px
	}
	
	#ez-toc-container {
		margin-top: 48px;
	}

	p {
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1.8;
		margin-top: 16px;
		a {
			color: #719b3d;
			display: inline;
			word-break: break-all;
			&:hover{
				text-decoration: underline;
			}
		}
	}

	.endtext {
		text-align: center;
		margin-top: 96px;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1.8
	}
}

@media screen and (max-width:767px) {
	section#content_content_block {
		*+h2.wp-block-heading {
			margin-top: 64px
		}

		h2.wp-block-heading {
			font-size: 2.4rem;

			&:before {
				width: 16px
			}
		}
		
		*+h3.wp-block-heading {
			margin-top: 32px
		}
		
		h3.wp-block-heading {
			font-size: 1.8rem;
		}

		p {
			font-size: 1.4rem
		}

		.endtext {
			margin-top: 64px
		}
	}
}

section#cta {
	margin-top: 96px;

	.wrap {
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		align-items: stretch;

		.item {
			background: var(--maincolor);
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 48px 46px;

			.catch {
				width: 100%;
				background: #709B3C;
				margin-bottom: 16px;
				padding: 8px 0;
				color: #fff;
				font-size: 1.6rem;
				font-weight: 600;
				line-height: 1.8;
				text-align: center;

				span {
					display: inline-block
				}
			}

			span.logo {
				width: auto;
				height: 42px;
				margin-bottom: 16px;

				img {
					width: auto;
					height: 100%
				}
			}

			.btn {
				a {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: center;
					justify-content: center;
					align-items: center;
					width: 240px;
					padding: 16px 0;
					background: #fff;
					border: 1px solid #fff;
					border-radius: 300px;
					font-size: 1.4rem;
					font-weight: 600;
					line-height: 1;
					position: relative;

					&:after {
						content: "";
						display: inline-block;
						width: 10px;
						height: 10px;
						border-right: 1px solid var(--maincolor);
						border-top: 1px solid var(--maincolor);
						rotate: z 45deg;
						translate: 0 -50%;
						position: absolute;
						right: 20px;
						top: 50%
					}
				}
			}
		}
	}
}

@media screen and (min-width:768px) {
	section#cta {
		.wrap {
			.item {
				.btn {
					a:hover {
						background: var(--maincolor);
						color: #fff;

						&:after {
							border-color: #fff
						}
					}
				}
			}

			.item:has(+.item),
			.item+.item {
				width: 50%
			}

			.item:has(+.item) {
				position: relative;

				&:before {
					content: "";
					display: inline-block;
					width: 2px;
					height: calc(100% - 48px);
					background: #719b3d;
					position: absolute;
					right: -1px;
					top: 50%;
					translate: 0 -50%
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	section#cta {
		margin-top: 96px;

		.wrap {
			.item {
				padding: 20px 40px
			}
		}
	}
}