*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}input,textarea{-webkit-user-select:auto}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}:where([hidden]){display:none}:where([contenteditable]){-webkit-user-modify:read-write;overflow-wrap:break-word}:where([draggable="true"]){-webkit-user-drag:element}





/* style */

:root {
	--color-red: #D5382B;
	--color-pink: #E8866B;
	--color-blue: #5391EB;
}

@keyframes opacityFadein {
	0% {opacity:0;}
	100% {opacity:1;}
}
html {
	animation:opacityFadein 1s forwards .2s;
	opacity:0;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.sp {
	@media (min-width: 769px) {
		display:none;
	}
}
.pc {
	display:none;
	@media (min-width: 769px) {
		display:block;
	}
}
@media (min-width: 769px) {
	a {
		transition: .2s;
	}
}
.link_btn {
	text-align: center;
	margin-top: 3em;
	a {
		display: inline-block;
		font-weight: 700;
		line-height: 1;
		padding: 1.4em 0;
		border:2px solid #000;
		border-radius: .5em;
		width: 100%;
		max-width: 320px;
		background: #fff;
		position: relative;
		overflow: hidden;
		span {
			display: block;
			position: relative;
			mix-blend-mode: difference;
			color:#fff;
			z-index: 1;
			&:after {
				content: "";
				display: block;
				width: .56em;
				aspect-ratio:8 / 12;
				background: url("../img/arrow_r_w.webp") 0 0 / 100% 100% no-repeat;
				position: absolute;
				right: 1.8em;
				top:50%;
				transform:translate(0, -50%);
				transition: .2s;
			}
		}
	}
	@media (min-width: 769px) {
		a:after {
			content: "";
			display: block;
			inset: 0;
			background: #000;
			position: absolute;
			top:0;
			left: 0;
			z-index: 0;
			transform: translate(-100%,0);
			transition: .2s;
		}
		a:hover {
			span {
				&:after {
					right: 1.5em;
				}
			}
			&:after {
				transform: translate(0,0);
			}
		}
	}
}
.scroll-trigger {
	opacity: 0;
	transition: .3s;
	&.is-visible {
		opacity: 1;
	}
}
.max1000 {
	max-width:1000px;
	margin:auto;
}
.max850 {
	max-width:850px;
	margin:auto;
}

body {
	font-family: "Noto Sans JP", serif;
	font-weight: 400;
	font-style: normal;
	font-size:14px;
	line-height:1.8;
	background: #fff;
	@media (min-width: 769px) {
		font-size:16px;
	}
}
body:before {
	content: "";
	position: fixed;
	inset: 0;
	background: url(../img/company_bg_dummy.jpg) center / cover no-repeat;
	z-index: 0;
	pointer-events: none;
}
#header {
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	z-index: 1000;
	.inner {
		padding:14px;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	h1 {
		z-index: 10;
		img {
			height: 24px;
			width: auto;
		}
	}
	
	@media (min-width: 769px) {
		.inner {
			padding:14px 32px;
			max-width: 1100px;
			margin: auto;
			background-image: linear-gradient(0deg, #ffffff9d,  #ffffff5d 90%);
			border-radius:0 0 28px 28px;
		}
	}
	
}/*#header*/


#nav {
	text-align: center;
	display:flex;
	align-items: center;
	gap:14px;
	z-index: 1;
	@media (min-width: 769px) {gap: 28px;}
	.nav_list {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		background-image: linear-gradient(0deg, #ffffff80, #ffffff 20%);
		width: 100vw;
		height: 100vh;
		z-index: -1;
		align-content: center;
		font-size: 18px;
		font-weight: 700;
		gap:36px;
		@media (min-width: 769px) {
			display: flex;
			gap:28px;
			position: relative;
			background-image:none;
			width: auto;
			height:auto;
			font-size: 14px;
			a {
				display: inline-block;
				position: relative;
				&:after {
					content: "";
					display: block;
					width:0;
					height: 2px;
					background:#000;
					position: absolute;
					left: 0;
					bottom: 0;
					transition: .2s;
				}
			}
			a:hover:after {
				width: 100%;
			}
		}
	}
	.entry_btn {
		display: block;
		width: 100px;
		color: white;
		font-weight: 700;
		line-height: 34px;
		background: var(--color-red);
		border-radius:34px;
		@media (min-width: 769px) {
			position:relative;
			overflow:hidden;
			span {
				position:relative;
				z-index: 1;
			}
			&:after {
				content: "";
				display: block;
				inset: 0;
				background: #000;
				border-radius:34px;
				position: absolute;
				top:0;
				left: 0;
				z-index: 0;
				transform: translate(-100%,0);
				transition: .2s;
			}
			&:hover {
				&:after {
					transform: translate(0,0);
				}
			}
		}
	}
	.menubtn {
		width: 40px;
		height: 40px;
		border-radius:50%;
		background: white;
		position: relative;
		span, &:before, &:after {
			display: block;
			height: 2px;
			width: 20px;
			background: #000;
			position: absolute;
			left: 10px;
			transition: .2s;
		}
		&:before, &:after {
			content: "";
		}
		span {
			top:calc(50% - 1px);
		}
		&:before{
			top:12px;;
			transform-origin: left top;
		}
		&:after{
			bottom:12px;;
			transform-origin: left bottom;
		}
		@media (min-width: 769px) {
			display:none;
		}
	}
	.menubtn span, .menubtn:before, .menubtn:after  {
	}
	
	&.open {
		.menubtn {
			span {
				opacity: 0;
			}
			&:before{
				transform: rotate(45deg);
				left: 14px;
			}
			&:after{
				transform: rotate(-45deg);
				left: 14px;
			}
		}
		.nav_list {
			display: grid;
		}
	}
	
}


@keyframes bubble_animation {
	0% {
		transform: translateY(-5%) scale(1);
	}
	100% {
		transform: translateY(5%) scale(.95);
	}
}
@keyframes floating_x {
	0% {
		opacity: 1;
		transform: translateX(-5%);
	}
	100% {
		opacity: .9;
		transform: translateX(5%);
	}
}
.first_view {
	padding-top:68px;
	background-image: linear-gradient(0deg, #f5f5f5, #ffffff);
	position: relative;
	overflow: hidden;
	&:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 12%;
		left: 8%;
		background: url(../img/fv_rainbow.webp) 0 0 / auto 90% no-repeat;
		z-index: 0;
	}
	
	@media (min-width: 769px) {
		padding-top:100px;
		&:before {
			top: 15%;
			left:0;
            background-position:right -275px top;
            background-size: auto 140%;
		}
		&:after {
			content: "";
			display: block;
			width: 100%;
			aspect-ratio: 9 / 1;
			background-image: linear-gradient(0deg, #f5f5f5, transparent);
			position:relative;
			z-index:1;
		}
	}
	
	.inner {
		display: grid;
		gap:16px;
		position: relative;
		z-index: 1;
		
animation:opacityFadein 1.5s forwards .5s;
opacity:0;
		
		@media (min-width: 769px) {
			max-width:1100px;
			margin:auto;
			display: flex;
			flex-wrap:wrap;
			justify-content: end;
		}
	}/*.inner*/
	
	.slides {
		position: relative;
		width: 66.66%;
		height: auto;
		border-radius: 50%;
		overflow: hidden;
		aspect-ratio: 1 / 1;
		box-shadow:10px 0 0 rgba(255,255,255,.5);
		margin-left:34.8%;
		img {
			position: absolute;
			inset: 0;
			opacity: 0;
			transition: opacity 1.5s ease;
			&.is-active {
				opacity: 1;
			}
		}
		@media (min-width: 769px) {
			width: 31.81%;
			margin:0 32px 0 0;
			box-shadow:24px 0 0 rgba(255,255,255,.5);
		}
	}/*.slides*/
	
	.bubble {
		display: contents;
		.circle {
			aspect-ratio:1 / 1;
			position: absolute;
			z-index: 1;
			animation-name:bubble_animation;
			animation-iteration-count: infinite;
			animation-direction: alternate-reverse;
			.inner {
				position: relative;
				width: 100%;
				height: auto;
				aspect-ratio:1 / 1;
				border-radius:50%;
				animation-name:floating_x;
				animation-iteration-count: infinite;
				animation-direction: alternate-reverse;
			}
			
			&.red {
				width:22.5%;
                top: 24%;
                right: 51%;
				animation-duration:5s;
				.inner {
					background: var(--color-red);
					animation-duration:3.2s;
				}
			}
			&.pink {
				width:32.5%;
                top: 2%;
                right: 73%;
				animation-duration:4s;
				.inner {
					background: var(--color-pink);
					animation-duration:6s;
				}
			}
			&.blue {
				width:14.1%;
                top: 0%;
                right: 1%;
				z-index: 0;
				animation-duration:5.8s;
				.inner {
					background: var(--color-blue);
					animation-duration:8s;
				}
				
			}
			&.white {
				width:16.9%;
				top: 38%;
                right: 74%;
				animation-duration:4s;
				.inner {
					background: rgba(255,255,255,.8);
					animation-duration:3s;
				}
            }
		}
		@media (min-width: 769px) {
			.circle {
				&.red {
					width:9.09%;
                    top: 43%;
                    right: -1%;
				}
				&.pink {
					width: 6.45%;
                    top: -4%;
                    right: 31%;
				}
				&.blue {
					width:14.1%;
					top: 0%;
					right: 1%;
					z-index: 0;
				}
				&.white {
					width:8.18%;
					top: 31%;
                    right: 37%;
				}
			}
		}
	}/*.bubble*/
	
	.copy {
		font-size: 8.9743vw;
		line-height: 1.4;
		font-weight: 900;
		padding: 0 14px;
		position: relative;
		z-index: 2;
		span {
			display: block;
			margin-top: 8px;
			font-weight:400;
			font-size: 10px;
			line-height: 1.6;
			color: #71717A;
		}
		@media (min-width: 769px) {
			width:100%;
			padding:0 32px;
			font-size: min(6vw, 55px);
			margin-top: -28.5%;
			span {
				font-size: 14px;
			}
		}
	}/*.copy*/
	
	
	.member {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap:4px;
		padding-bottom: 4px;
		img {
			border-radius: 2px;
			position: relative;
			z-index: 1;
		}
		li {
			position: relative;
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: calc(100% - 8px);
				aspect-ratio:1 / 1;
				border:2px solid rgba(255,255,255,.5);
				border-radius: 2px;
				z-index: 2;
			}
		}
		@media (min-width: 769px) {
			width:100%;
			grid-template-columns: repeat(6, 1fr);
			gap:8px;
		}
	}/*.member*/
	
}/*.first_view*/



.lead_copy {
	text-align: center;
	background:url("../img/lead_copy_bg_dummy.webp") center center / cover no-repeat;
	position: relative;
	.inner {
		padding: 3rem 1rem;
		background: rgba(255,255,255,.5);
		animation:opacityFadein 1.5s forwards .5s;
		opacity:0;
		.lead_txt {
			font-size: 2em;
			font-weight: 700;
			line-height: 1.2;
			margin-bottom: 1em;
		}
		.txt {
			font-size: 16px;
			font-weight: 500;
			line-height: 2;
		}
	}
}/*.lead_copy*/



.sec_wrap {
	padding: 4em 1em 8em;
	overflow: hidden;
	position: relative;
	@media (min-width: 769px) {
		padding: 5em 1em 10em;
	}
	.bg_ttl {
		position: absolute;
		top: 0;
		left: 0;
		color:white;
		font-size: 12em;
		line-height: 1;
		font-weight: 900;
		z-index: 0;
		transform: rotate(90deg) translate(-1em, .15em);
		transform-origin: left bottom;
		@media (min-width: 769px) {
			transform:initial;
			width:100%;
			text-align:right;
			line-height:1;
			.pc {
				font-size: .41em;
				margin-bottom: -.5em;
			}
		}
	}
	.inner {
		position: relative;
		z-index: 1;
	}
	.lead_block {
		max-width: 640px;
		margin:0 auto 3em;;
	}
	.sec_ttl {
		font-size: 1.8em;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-bottom: 1em;
	}	
	
	
}/*.sec_wrap*/


.business_sec {
	background: #F9F9F9;
	
	.banner_slider {
		.banner_slides {
			display: grid;
			gap:1em;
			.pc {
				display: none;
			}
			a {
				display: block;
				border-radius: .5em;
				overflow: hidden;
			}
			@media (min-width: 769px) {
				.pc {
					display: flex;
				}
				.sp {
					display: none;
				}
				a:hover .service_banner .box .img {
					opacity: 1;
					transform:scale(1.03) translate(0,-50%);
				}
				a:hover .service_banner .box:after {
					opacity: .6;
				}
			}
		}
		margin: 0 calc(50% - 50vw);
		width: 100vw;;
		.banner_slides {
			display:block;
			li {
				padding: 0 .5em;
			}
		}
		.slick-dots li {
			padding: 0;
		}
		.slick-dots li button {
			position: relative;
		}
		.slick-dots li button:before {
			font-size:12px;
		}
		@media (min-width: 769px) {
			li {
				padding: 0 1em;
			}
		}
		
	}/*.banner_slider*/
	
	.project {
		padding-top: 3em;
		h3 {
			font-size: 1.8em;
			font-weight: 500;
			text-align: center;
			margin-bottom: 1em;
		}
		.project_list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap:1em;
			article {
				img {
					border-radius:.5em;
					box-shadow:2px 2px 4px rgba(0,0,0,.2);
				}
			}
		}
		@media (min-width: 769px) {
			.project_list {
				grid-template-columns: repeat(3, 1fr);
				gap:2em;
				a img {
					transition: .2s;
				}
				a:hover {
					opacity: 1;
					img {
						transform:scale(1.05);
						box-shadow:2px 2px 8px rgba(0,0,0,.1);
					}
				}
			}
		}
	}/*	.project*/
	
}/*business_sec*/


.service_banner {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	aspect-ratio:2 / 1;
	padding: 0 8%;
	display: flex;
	align-items: center;
	&.agent {
		background-image: url("../img/service_banner_bg_AGENT.webp");
	}
	&.consulting {
		background-image: url("../img/service_banner_bg_CONSULTING.webp");
	}
	&.studio {
		background-image: url("../img/service_banner_bg_STUDIO.webp");
	}
	&.chat {
		background-image: url("../img/service_banner_bg_CHAT.webp");
	}
	&.speech {
		background-image: url("../img/service_banner_bg_SPEECH.webp");
	}
	.box {
		position: relative;
		&:after {
			content: "";
			display: block;
			width: 35.7%;
			aspect-ratio:60 / 11;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: .2s;
		}
		.img {
			position: absolute;
			width: 54.31%;
			top:50%;
			transform:translate(0,-50%);
			right: -5%;
			opacity: .6;
			transition: .2s;
		}
	}
	&.studio {
		.img {
			width: 44.04%;
			top:50%;
		}
	}
	&.agent,&.chat,&.speech {
		.box {
			&:after {
				background-image: url("../img/service_banner_btn_b.webp");
			}
		}
	}
	&.consulting,&.studio {
		.box {
			&:after {
				background-image: url("../img/service_banner_btn_w.webp");
			}
		}
	}
}




.environment_sec {
	background: #EFEFEF;
	
	.bg_ttl {
		opacity: .5;
	}
	
	.graph_container {
		display: grid; 
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: 3fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 3fr;
		gap:.5em;
		grid-template-areas: 
		"graph_1 graph_1"
		"graph_3 graph_4"
		"graph_2 graph_2"
		"graph_8 graph_8"
		"graph_7 graph_7"
		"graph_13 graph_13"
		"graph_6 graph_6"
		"graph_5 graph_9"
		"graph_10 graph_12"
		"graph_11 graph_11"; 
	}
	.cnt {
		background-color: #fff;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: .5em;
		display: flex;
		flex-direction: column;
		&.graph_2 {
			background-image: url("../img/graph_bg_img1.webp");
		}
		&.graph_6 {
			background-image: url("../img/graph_bg_img2.webp");
		}
		&.graph_14 {
			background-image: url("../img/graph_bg_img3.webp");
		}
		.graph_title {
			span {
				font-size:.9em;
				display: inline-block;
				font-weight:700;
				line-height: 1.2;
				border-bottom: 1px solid #000;
				padding: .5em .2em .2em .5em;
				small {
					font-size: 10px;
					font-weight: 400;
				}
			}
		}
		.graph_cnt {
			flex: 1;
			display:flex;
			justify-content: center;
			place-items: center;
			font-size: 3em;
			font-weight: 900;
			position: relative;
			small {
				font-size: .3333em;
				display: inline-block;
				transform: translate(0, -.15em);
			}
			.term {
				i {
					position: relative;
					display: inline-block;
					color: transparent;
				}
				i::after {
					content: attr(data-num);
					position: absolute;
					inset: 0;
					text-align: center;
					color:#000;
				}
				&.double_line {
					font-size: .8em;
					small {
						font-size:.415em
					}
				}
			}
		}/*.graph_cnt*/
	}/*.cnt*/
	.graph_1 { grid-area: graph_1; }
	.graph_3 { grid-area: graph_3; }
	.graph_4 { grid-area: graph_4; }
	.graph_2 { grid-area: graph_2; }
	.graph_8 { grid-area: graph_8;
		background-image: url("../img/graph_bar_sp.webp") ;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center bottom;
	}
	.graph_7 { grid-area: graph_7; }
	.graph_13 { grid-area: graph_13; }
	.graph_6 { grid-area: graph_6; }
	.graph_5 { grid-area: graph_5; }
	.graph_9 { grid-area: graph_9; }
	.graph_10 { grid-area: graph_10; }
	.graph_12 { grid-area: graph_12; }
	.graph_11 { grid-area: graph_11; }
	.graph_14 {display: none;}

	.graph_1, .graph_11 {
			.svg_wrap {
				aspect-ratio:1 / 1;
				position: absolute;
				width: 70%;
				max-width: 417px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 0;
				svg {
					position: absolute;
					right:0;
					bottom:0;
					width:80%;
				}
				
				&:after {
					content: "";
					display: block;
					width: 20%;
					aspect-ratio: 1 / 1;
					position:absolute;
					bottom:30%;
					right:30%;
					background: #fff;
					border-radius: 50%;
				}
				
				
				
			}
			img {
				width: 70%;
				position: relative;
				z-index: 1;
			}
	}
	
	
	@media (min-width: 769px) {
		.graph_container {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
			grid-auto-flow: row;
			grid-template-areas:
			"graph_1 graph_1 graph_2 graph_2 graph_2"
			"graph_1 graph_1 graph_3 graph_4 graph_5"
			"graph_6 graph_6 graph_8 graph_8 graph_9"
			"graph_7 graph_7 graph_8 graph_8 graph_10"
			"graph_11 graph_11 graph_12 graph_14 graph_14"
			"graph_11 graph_11 graph_13 graph_14 graph_14";
		}
		.cnt {
			min-height: 165px;
/*
			&.graph_11 .graph_cnt:after {
				bottom: 34.5%;
			}
*/

		}
		
		.graph_1 { grid-area: graph_1; }
		.graph_2 { grid-area: graph_2; }
		.graph_3 { grid-area: graph_3; }
		.graph_4 { grid-area: graph_4; }
		.graph_5 { grid-area: graph_5; }
		.graph_6 { grid-area: graph_6; }
		.graph_7 { grid-area: graph_7; }
		.graph_8 { grid-area: graph_8; background-image: url("../img/graph_bar_pc.webp") ;}
		.graph_9 { grid-area: graph_9; }
		.graph_10 { grid-area: graph_10; }
		.graph_11 { grid-area: graph_11; }
		.graph_12 { grid-area: graph_12; }
		.graph_13 { grid-area: graph_13; }
		.graph_14 { grid-area: graph_14; display:flex;}
	}
	
	
	.note {
		text-align: right;
		font-size: .75em;
		margin-top: .8em;
		.note_inner {
			text-align: left;
			display: inline-block;
		}
	}
	
}/*.environment_sec*/




.company_sec {
	background: rgba(0,0,0,.5);
	color: #fff;
	.bg_ttl {
		opacity: .1;
	}
	.value_img {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap:.5em;
	
		@media (min-width: 769px) {
			grid-template-columns: repeat(4, 1fr);
			gap:1em;
		}
	}
	
	.value_list {
		padding-top:.5em;
		display: grid;
		gap:.5em;
		@media (min-width: 769px) {
			padding-top:1em;
			gap:1em;
		}
		.value_cnt {
			background: rgba(0,0,0,.5);
			border-radius: .5em;
			padding: 2em 1em;
			display: grid;
			gap:1em;
			dt {
				span {
					font-weight: 700;
					border-bottom:1px solid;
				}
			}
			dd {
				display: grid;
				gap:1em;
				strong {
					display: block;
					font-size: 1.5em;
					font-weight: 500;
					line-height: 1.2;
				}
			}
			&:nth-child(1) {
				dt {
					color: #EF4444;
				}
			}
			&:nth-child(2) {
				dt {
					color: #F97316;
				}
			}
			&:nth-child(3) {
				dt {
					color: #10B981;
				}
			}
			&:nth-child(4) {
				dt {
					color: #3B82F6;
				}
			}
		}
	}
	
}/*.conmpany_sec*/





.flow_sec {
	background-image: linear-gradient(0deg, #efefef, #f9f9f9 50%, #efefef);
	.lead_block {
		text-align: center;
	}

	
	.flow_list {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap:3em;
		font-weight: 700;
		max-width: 390px;
		margin: auto;
		
		& + .flow_list {
			margin-top: 3em;
		}
		
		h4 {
			width: 100%;
			margin-bottom: -1em;
		}
		h4 span {
			display: inline-block;
			font-size: 20px;
			line-height: 2em;
			padding: 0 1em;
			background-image: url("../img/kakko-L.webp"),  url("../img/kakko-R.webp");
			background-repeat: no-repeat, no-repeat;
			background-position: top left,top right;
			background-size: contain;
			
		}
		.note {
			font-size: .9em;
			font-weight: 400;
			line-height: 1.4;
			width: 100%;
			max-width: 280px;
			margin: -2.4em auto 0;
		}
		.flow_detail {
			width: 100%;
			max-width: 280px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items:center;
			padding:2em;
			border:2px solid #999999;
			border-radius: 1em;
			position: relative;
			img {
				width: 30%;
			}
			dl {
				width: 70%;
				padding-left: 1em;
				dt {
					font-size: 14px;
					color: #fff;
					background: #000;
					line-height: 2em;
					border-radius: 2em;
					width: 80%;
					margin: 0 auto .6em;
				}
				dd {
					font-size: 16px;
					line-height:2.4em;
					&.double {
						line-height:1.2em;
					}
				}
			}
			&:after {
				content: "";
				display: block;
				width: 1em;
				aspect-ratio: 8 / 12;
				background: url(../img/arrow_r.webp) 0 0 / 100% 100% no-repeat;
				position: absolute;
				bottom:-2.5em;
				right: 50%;
				transform: translate(50%, 0) rotate(90deg);
				opacity: .5;
			}
			&.no_arrow {
				&:after {
					display: none;
				}
				dd {
					display: none;
				}
			}
		}/*.flow_detail*/
		
		
		
		@media (min-width: 769px) {
			gap:4%;
			max-width:100%;
			h4 {
				margin-bottom: 1.6em;
			}
			.note {
				max-width:100%;
				margin:1em auto 0;
				text-align: right;
				font-size: .8em;
				&.narrow {
					width:79.2%;
				}
			}
			.flow_detail {
				width:16.8%;
				padding:2em .5em;
				gap:1em;
				&:after {
					bottom:50%;
					right: -20%;
					transform: translate(0, 50%) rotate(0deg);
				}
				img,dl {
					width: 100%;
				}
				img {
					max-width: 75px;
				}
				dl {
					padding-left: 0;
				}
				&.no_arrow {
					gap:0;
					img {
						margin-bottom: -2em;
					}
				}
			}
		}	
	}/*.flow_list*/
	
	
	
	.position_sec {
		padding-top: 4em;
		@media (min-width: 769px) {
			padding-top: 5em;
		}
	}/*.position_sec*/
	
	
}/*.flow_sec*/



.position_sec {
	.position_list {
		width: 100%;
		max-width: 280px;
		margin: auto;
		text-align: center;
		display: grid;
		gap:2em;
		.position_cnt {
			background: #fff;
			padding: 2em;
			border-radius: 1em;
			img {
				width: 100px;
			}
			.position_detail {
				strong {
					display: block;
					font-weight: 700;
					font-size: 1.5em;
				}
				.txt {
					padding: 1em 0;
				}
				a {
					display: block;
					font-size: 16px;
					line-height: 40px;
					font-weight:500;
					background:#000;
					border:solid 2px #000;
					border-radius:4px;
					span {
						display: block;
						position: relative;
						z-index: 1;
						mix-blend-mode: difference;
						color:#fff;
						&:after {
							content: "";
							display: inline-block;
							width: .48em;
							aspect-ratio: 8 / 12;
							background: url(../img/arrow_r_w.webp) 0 0 / 100% 100% no-repeat;
							margin-left: .6em;
							transition: .2s;
						}
					}
				}
				@media (min-width: 769px) {
					a {
						overflow: hidden;
						position: relative;
					}
					a:after {
						content: "";
						display: block;
						inset: 0;
						background: #fff;
						position: absolute;
						top:0;
						left: 0;
						z-index: 0;
						transform: translate(-100%,0);
						transition: .2s;
					}
					a:hover {
						span {
							&:after {
								transform: translate(5px,0);
							}
						}
						&:after {
							transform: translate(0,0);
						}
					}
				}
			}
		}
		
		@media (min-width: 769px) {
			max-width:100%;
			grid-template-columns: repeat(3, 1fr);
			.position_cnt {
				padding: 2em 1em;
				.txt {
					font-size: .9em;
				}
				a {
					max-width: 200px;
					margin: auto;
				}
			}
		}
		
	}
}/*.position_sec*/





#footer {
	position: relative;
	background: #000;
	color: #fff;
	padding: 64px 4% 32px;
	
	.inner {
		display: flex;
		justify-content:space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		row-gap: 32px;
		.flex_cnt {
			width:calc(50% - 16px);
			a {
				display: inline-block;
			}
			&.logo {
				width: 100%;
				text-align: center;
				margin-bottom: 44px;
				.logo_img img {
					width: 115px;
				}
				.copyright {
					font-size: 14px;
					font-weight: 500;
				}
				.privacymark img {
					width: 72px;
				}
				display: grid;
				gap:16px;
			}
			.cat_title {
				font-size: 12px;
				font-weight: 700;
				color: #A1A1AA;
				margin-bottom:20px;
			}
			.footer_link {
				display: grid;
				gap:16px;
				font-size: 14px;
			}
		}
		
		
		.sns_link {
			width: 100%;
			padding:32px 16px 0;
			display: flex;
			justify-content: flex-end;
			gap:32px;
			a {
				display: block;
				width: 18px;
			}
		}
		
		@media (min-width: 769px) {
			.flex_cnt {
				width:calc(20% - 13px);
				&.logo {
					width:calc(20% - 13px);
					text-align: left;
					gap:32px;
				}
			}
			.sns_link {
				padding:96px 0 0;
			}
			a:hover {
				opacity: .6;
			}
		}
		
	}/* .inner */
	
	
	
	
}/* #footer */









svg.custom-pie-chart {
	width: 100%;
	height: auto;
	display: block;
	transform: rotate(-90deg) !important;
	overflow: visible;
}
.pie-segment {
	fill: none;
	stroke-width: 50; 
	transform-origin: center;
	stroke-linecap: butt;
	stroke-dasharray: 0 157.08;
}
@keyframes fill-pie {
	from { stroke-dasharray: 0 157.08; }
}
.is-animated .animate-draw {
	animation: fill-pie 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* 前職の業界 */
.is-animated .seg-100 { stroke-dasharray: 157.08 157.08; }
.is-animated .seg-97-9 { stroke-dasharray: 153.78 157.08; }
.is-animated .seg-95-8 { stroke-dasharray: 150.48 157.08; }
.is-animated .seg-92-7 { stroke-dasharray: 145.61 157.08; }
.is-animated .seg-87-5 { stroke-dasharray: 137.45 157.08; }
.is-animated .seg-82-3 { stroke-dasharray: 129.28 157.08; }
.is-animated .seg-75-0 { stroke-dasharray: 117.81 157.08; }
.is-animated .seg-58-3 { stroke-dasharray: 91.58 157.08; }
/* 職種別割合 */
.is-animated .b-100 { stroke-dasharray: 157.08 157.08; }
.is-animated .b-86-2 { stroke-dasharray: 135.40 157.08; }
.is-animated .b-82-9 { stroke-dasharray: 130.22 157.08; }
.is-animated .b-77-7 { stroke-dasharray: 122.05 157.08; }
.is-animated .b-69-1 { stroke-dasharray: 108.54 157.08; }
.is-animated .b-53-9 { stroke-dasharray: 84.67 157.08; }
.is-animated .b-40-9 { stroke-dasharray: 64.25 157.08; }