/*全体共通*/
:root, html{ font-size: 10px; } 
*{ box-sizing: border-box; }
body {
	--max-width: 900px;
  --c-base: #000;
  --c-main: #000;
  --c-accent: #000;
  /* --ff-main: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	--ff-mincho: "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --ff-en: var(--ff-main); */

  position: relative;
  width: 100%;
  background: #000;
  overflow-x: hidden;
	font-family: "M PLUS Rounded 1c", serif;
	font-size: 1.6rem;
  font-weight: 700;
	line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
body.-fixed{
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
}
/* IE表示用のCSS　*/
@media all and (-ms-high-contrast:none){
	body {font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif;}
}
/* @media screen and (max-width: 1356px) {
  :root, html{ font-size: 0.7374vw; } 
} */
@media screen and (max-width: 1436px) {
  :root, html{ font-size: 0.6963vw; } 
}
/* TAB */
@media screen and (max-width: 899px) {
  :root, html{ font-size: 1.4749vw; } 
}
/* SP */
/* @media screen and (max-width: 480px) {
  :root, html{ font-size: 2.66vw; } 
} */
a{
	display: inline-block;
	color: inherit;
  font: inherit;
}
a:hover{
	cursor: pointer;
}
body.userAgent-pc a[href^="tel:"]{
	pointer-events: none;
}
img, svg{
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

.--img-cover{ width: 100%; height: 100%; object-fit: cover; }
.--img-contain{ width: 100%; height: 100%; object-fit: contain; }

/* PC */
@media (min-width: 900px){
	.--tab{ display: none !important; }
	.--sp{ display: none !important; }
	.--tab-sp{ display: none !important; }
}
/* TAB */
@media screen and (max-width: 899px) and (min-width: 481px) {
	.--pc{ display: none !important; }
	.--sp{ display: none !important; }
	.--pc-sp{ display: none !important; }
}
/* SP */
@media screen and (max-width: 480px) {
	.--pc{ display: none !important; }
	.--tab{ display: none !important; }
	.--pc-tab{ display: none !important; }
}

/* 共通パーツ */
._Navbtn{
	position: relative;
  width: 10.6rem;
  aspect-ratio: 1/1;
  background: var(--c-main);
	cursor: pointer;
  border-radius: 50%;
	transition: background .3s ease-out;
}
._Navbtn.-active{
	border: 1px solid #fff;
}
._Navbtn:hover{
	background: #fff;
}
._Navbtn span{
	position: absolute;
	left: 35.85%;
	display: inline-block;
	width: 28.30%;
	height: 2px;
  background: #fff;
	transition: all .3s;
}
._Navbtn.-active span{
	background: #fff;
}
._Navbtn:hover span{
	background: var(--c-main);
}
._Navbtn.-active span{
	/* left: calc(48% - 1.45rem); */
}
._Navbtn span:nth-of-type(1){
	bottom: calc(50% + 1.0rem);
}
._Navbtn span:nth-of-type(2){
	top: calc(50% - 1px);
}
._Navbtn span:nth-of-type(3){
	top: calc(50% + 1.0rem);
}
._Navbtn.-active span:nth-of-type(1){
	/* transform: translateY(1.1rem) rotate(45deg); */
  top: 50%;
  transform: rotate(45deg);
}
._Navbtn.-active span:nth-of-type(2){
	opacity: 0;
}
._Navbtn.-active span:nth-of-type(3){
	/* transform: translateY(-1.0rem) rotate(-45deg); */
  top: 50%;
  transform: rotate(-45deg);
}
/* TAB */
@media screen and (max-width: 896px) {
	._Navbtn{
		width: 75px;
		height: 75px; 
	}
	/* ._Navbtn.active span {
    left: calc(50% - 10px);
	}
	._Navbtn span:nth-of-type(1){
		bottom: calc(50% + 7px);
	}
	._Navbtn span:nth-of-type(3){
		top: calc(50% + 7px);
	}
	._Navbtn.active span:nth-of-type(1){
		transform: translateY(8px) rotate(45deg);
	}
	._Navbtn.active span:nth-of-type(3){
		transform: translateY(-8px) rotate(-45deg);
	} */
}
/* SP */
@media screen and (max-width: 480px) {
	/* ._Navbtn{
		width: 7.5rem;
		height: 7.5rem; 
	} */
}

/* ローディング */
#loading{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 999;
  transition: opacity 1.2s 1.4s;
}
#loading.-played{
  opacity: .3;
  z-index: -100;
}
#loading video{
  display: block;
  width: 886px;
  /* max-width: calc(100% - 300px); */
  max-width: 65%;
}
#loading .char{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 886px;
  max-width: 65%;
  height: 342px;
  transform: translate(-50%, -50%);
}
/* #loading .char::before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 38.60%;
} */
#loading .img{
  position: absolute;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  display: block;
  opacity: 0;
  transition: transform .8s, opacity .8s;
}
#loading .img-1{
  top: -72px;
  left: -25.28%;
  width: 258px;
  max-width: 25.8vw;
  /* max-width: 22.67vw; */
  transform: translate(-40px, -20px);
}
#loading .img-2{
  bottom: 0;
  left: 100%;
  width: 142px;
  max-width: 14.2vw;
  /* max-width: 12.47vw; */
  transform: translate(40px, 20px);
}
#loading .img-3{
  bottom: -25px;
  left: -13.99%;
  width: 166px;
  max-width: 16.6vw;
  /* max-width: 14.58vw; */
  transform: translate(-40px, 20px);
}
#loading.-played .img{
  transform: translate(0px, 0px) !important;
  opacity: 1 !important;
}
/* TAB */
@media screen and (max-width: 899px) {
  #loading video{
    width: 88.75vw;
    max-width: 100%;
  }
  #loading .char{
    width: 88.75vw;
    max-width: 100%;
    height: 34.25vw;
  }
  #loading.-played .img{
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    max-width: 100%;
  }
  #loading.-played .img-1{
    bottom: 100%;
    left: 7.93%;
    width: 37.33vw;
  }
  #loading.-played .img-2{
    right: -4.38%;
    bottom: -40%;
    width: 20.53vw;
  }
  #loading.-played .img-3{
    bottom: -62%;
    left: 0;
    width: 24vw;
  }
}

#scroll{
  position: fixed;
  top: calc(50% - 5.5vw);
  left: 32px;
  display: none;
  width: 266px;
  height: 21px;
  transform: rotate(90deg);
  transform-origin: bottom left;
  color: #fff;
  text-align: center;
  z-index: 99;
}
#scroll::before,
#scroll::after{
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 84px;
  height: 100%;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2283.5%22%20height%3D%229%22%20viewBox%3D%220%200%2083.5%209%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_52450%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2052450%22%20transform%3D%22translate(356.5%20-38)%20rotate(90)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_18384%22%20data-name%3D%22%E7%B7%9A%2018384%22%20y1%3D%2277.5%22%20transform%3D%22translate(42.5%20279)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20id%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2_1%22%20data-name%3D%22%E5%A4%9A%E8%A7%92%E5%BD%A2%201%22%20d%3D%22M4.5%2C0%2C9%2C8H0Z%22%20transform%3D%22translate(38%20273)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center/contain no-repeat;
}
#scroll::before{
  left: 0;
  transform: rotate(180deg);
}
#scroll::after{
  right: 0;
}
/* TAB */
@media screen and (max-width: 899px) {
  #scroll{
    display: none !important;
  }
}

#copyright{
  position: fixed;
  left: calc(100% - 32px);
  top: 19vh;
  display: none;
  width: calc(81vh);
  transform: rotate(90deg);
  transform-origin: top left;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
  z-index: 99;
}
/* TAB */
@media screen and (max-width: 899px) {
  #copyright{
    top: auto;
    left: 0;
    bottom: 24px;
    width: 100%;
    transform: none;
    font-size: 12px;
  }
}
/* SP */
@media screen and (max-width: 375px) {
  #copyright{
    font-size: 3.2vw;
  }
}

/* ナビ */
#nav{
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: calc(100vh + 100px);
	padding-bottom: 100px;
	background: var(--c-main);
	z-index: 110;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	color: #fff;
}
#nav::-webkit-scrollbar{
	display: none;
}
#nav .cntInner{
	display: flex;
	justify-content: start;
	align-items: center;
	min-height: 100%;
	max-width: 924px;
	margin: 0 auto;
	padding: 170px 30px;
}
#nav .cntBtn{
	position: absolute;
	top: 32px;
	right: 32px;
}
#nav .cntBox-outer{
	display: flex;
	/* flex-wrap: wrap; */
	/* gap: 48px 8.4%; */
	/* gap: 48px 9.43%; */
	gap: 48px 8.1%;
	width: 100%;
}
#nav .cntList a{
	display: block;
}
#nav .cntList .title{
	font-size: 32px;
	font-weight: bold;
}
#nav .cntList .title .en{
	display: block;
	margin-top: 6px;
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
}
#nav .cntList .item{
	margin-top: 24px;
	font-size: 18px;
	font-weight: 500;
}
#nav .cntList a.link:hover .txt{
	text-decoration: underline;
}
#nav .cntList .item .en{
	display: inline-block;
	margin-left: 8px;
	font-family: var(--ff-en);
	font-size: 12px;
	font-weight: 400;
	vertical-align: 1px;
}
#nav .cntBox-1{
	display: flex;
	flex-direction: column;
	gap: 48px;
}
#nav .cntBox-1 .title .txt{
	white-space: nowrap;
}
#nav .cntBox-2{
	display: flex;
	/* gap: 48px 12.87%; */
	gap: 48px 14.25%;
	flex-wrap: wrap;
}
#nav .cntList-join{
	width: 100%;
}
#nav .cntList-join .title{
	margin-bottom: 16px;
	font-family: var(--ff-en);
	font-size: 40px;
	letter-spacing: -0.05em;
	line-height: 1;
}
#nav .cntList-join .list{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	gap: 24px 16px;
}
#nav .cntList-join .btn{
	width: 176px;
	background: #C2F2F2;
	border-radius: 100px;
	color: #000;
	font-size: 14px;
	line-height: 50px;
	text-align: center;
	transition: background .3s ease-out;
}
#nav .cntList-join .btn:nth-of-type(3n-1){
	background: #FDE89F;
}
#nav .cntList-join .btn:nth-of-type(3n){
	background: #E1F4BD;
}
#nav .cntList-join .btn:hover{
	background: #fff !important;
}
@media screen and (max-width: 1519px) {
	#nav .cntList .title{
		font-size: calc(32px - (1519px - 100vw) / (619 / 4));
	}
}
/* TAB */
@media screen and (max-width: 896px) {
	#nav .cntBtn{
		top: 16px;
		right: 15px;
	}
	#nav .cntInner{
		padding-top: 108px;
		/* padding-bottom: 64px; */
		padding-bottom: 130px;
	}
	#nav .cntBox-outer{
		flex-direction: column;
		gap: 40px;
	}
	#nav .cntList .title{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		font-size: 24px;
	}
	#nav .cntList .title::after{
		content: "";
		display: inline-block;
		width: 14px;
		height: 14px;
		background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_51919%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2051919%22%20transform%3D%22translate(-307.5%20-301.5)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_16909%22%20data-name%3D%22%E7%B7%9A%2016909%22%20x2%3D%2214%22%20transform%3D%22translate(307.5%20308.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%20%3Cline%20id%3D%22%E7%B7%9A_16910%22%20data-name%3D%22%E7%B7%9A%2016910%22%20x2%3D%2214%22%20transform%3D%22translate(314.5%20301.5)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') center/contain no-repeat;
	}
	#nav .cntList .title.active::after{
		margin-bottom: -5px;
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%222%22%20viewBox%3D%220%200%2014%202%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_51988%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2051988%22%20transform%3D%22translate(-307.5%20-307.5)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_16909%22%20data-name%3D%22%E7%B7%9A%2016909%22%20x2%3D%2214%22%20transform%3D%22translate(307.5%20308.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	}
	#nav .cntList .title a{
		pointer-events: none;
	}
	#nav .cntList .title .en{
		display: none;
	}
	#nav .cntList .list{
		display: none;
	}
	#nav .cntBox-1{
		gap: 40px;
	}
	#nav .cntBox-2{
		flex-direction: column;
		gap: 40px;
	}
	#nav .cntList-join .title{
		/* padding-top: 15px; */
		padding-top: 25px;
		margin-bottom: 25px;
		text-align: center;
	}
	#nav .cntList-join .list{
		flex-direction: column;
		align-items: center;
	}
	#nav .cntList-join .btn{
		width: 100%;
		max-width: calc(100% - 26px);
		font-size: 18px;
		line-height: 85px;
	}
}

/* ヘッダー */
#header{
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  z-index: 998;
}
#header .cntInner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.2rem 3.2rem 0;
}
#header .cntImg-logo{
  width: 26.1rem;
}
/* TAB */
@media screen and (max-width: 899px) {
  #header .cntInner{
    padding: 15px 15px 0;
  }
  #header .cntImg-logo{
    width: 191px;
  }
}
/* SP */
@media screen and (max-width: 480px) {
  /* #header .cntInner{
    padding: 1.5rem 1.5rem 0;
  }
  #header .cntImg-logo{
    width: 19.1rem;
  } */
}

#main{
  overflow: hidden;
}

#_gallery{
  padding: 0 40px;
}
#_gallery .cntList{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  max-width: 1356px;
  margin: 0 auto;
}
#_gallery .cntList::before{
  content: "";
  display: block;
  aspect-ratio: 1/1;
  grid-column: auto;
  grid-row: auto;
  /* background: #000; */
  /* order: 2; */
  opacity: 0;
}
#_gallery .cntBox{
  --n: 0;
  background: #eee;
  opacity: 0;
  /* clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); */
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  transition: clip-path .8s, opacity .8s;
  color: #fff;
}
#_gallery .cntBox.-data{
  position: relative;
  --c-bg: #262626;
  background: var(--c-bg);
  transition-delay: .1s;
}
#_gallery .cntBox.-peoples{
  position: relative;
  background: #5AD19A;
}
#_gallery .cntBox.-image{
	aspect-ratio: 3/2;
  background: #84B6FF;
}
#_gallery .cntBox.-vertical{
	aspect-ratio: 2/3;
  background: #84B6FF50;
}
#_gallery .cntBox.-active{
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#_gallery .cntBox.-data .title{
  padding-top: 3.2rem;
  text-align: center;
  font-size: 3.9rem;
  line-height: 1.51;
}
#_gallery .cntBox.-peoples img,
#_gallery .cntBox.-image img,
#_gallery .cntBox.-vertical img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#_gallery .cntBox .inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#_gallery .cntBox .inner::before,
#_gallery .cntBox .inner::after{
  content: "";
  position: absolute;
  background: url(../img/character/1-pose8.png) center/contain no-repeat;
  opacity: 0;
  z-index: 10;
  transition: transform .8s .5s, opacity .8s .5s;
}
#_gallery .cntBox.-active .inner::before,
#_gallery .cntBox.-active .inner::after{
  transform: translate(0px, 0px) !important;
  opacity: 1 !important;
}
#_gallery .cntBox .box{
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-top: 8.6rem;
}
#_gallery .cntBox .box .text{
  display: flex;
  align-items: center;
  font-size: 5.9rem;
}
#_gallery .cntBox .box .num{
  display: inline-block;
  min-height: 13.8rem;
  margin-top: -0.1em;
  font-size: 10.4rem;
  /* text-align: right; */
  white-space: nowrap;
}
#_gallery .cntBox .box .small{
  font-size: 2.8rem;
  line-height: 1.1;
}
#_gallery .cntBox .icon{
  transition: transform 1s .3s, opacity 1s .3s;
  opacity: 0;
}
#_gallery .cntBox.-active .icon{
  transform: translate(0px, 0px) !important;
  opacity: 1 !important;
}

/* 男女比率・新卒中途採用比率・理系文系比率 */
#_gallery .cntBox.-data.-ratio .graph{
  position: absolute;
  top: 10.9rem;
  left: calc(28.8%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42.33%;
  aspect-ratio: 1/1;
  background-position: center;
  background-size: 98%;
  background-repeat: no-repeat;
}
#_gallery .cntBox.-data.-ratio .icon{
  position: relative;
  /* width: 10.3rem; */
  aspect-ratio: 1/1;
  z-index: 2;
}
#_gallery .cntBox.-data.-ratio .circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-90deg);
}
#_gallery .cntBox.-data.-ratio .circle circle{
  fill: none;
  /* stroke-width: 2.5rem; */
  stroke-width: 5rem;
  stroke: var(--c-bg);
  stroke-dasharray: 260,260;
  stroke-dashoffset: 0;
  transition: 2s 0.6s;
  transform: scale(1, -1);
  transform-origin: center;
}
#_gallery .cntBox.-data.-ratio.-active .circle circle{
  stroke-dasharray: 0,260;
}
#_gallery .cntBox.-data.-ratio .texts{
  position: absolute;
  bottom: 2.7rem;
  left: auto;
  right: calc(50% + 4.8rem);
}
#_gallery .cntBox.-data.-ratio .texts + .texts{
  left: calc(50% + 8rem);
  right: auto;
}
#_gallery .cntBox.-data.-ratio .text{
  display: block;
  margin-bottom: -1rem;
  font-size: 2.9rem;
}
#_gallery .cntBox.-data.-ratio .num{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 15rem;
  white-space: nowrap;
  font-size: 8rem;
  vertical-align: bottom;
  line-height: 10rem;
}
#_gallery .cntBox.-data.-ratio .num::after{
  content: "%";
  display: inline-block;
  margin-bottom: -0.4em;
  font-size: 4.6rem;
}
#_gallery .cntBox.-data.-ratio1 .inner::before{
  top: 8.1rem;
  left: 3.7rem;
  width: 28.8rem;
  height: 19.2rem;
  background-image: url(../img/character/1-01.png);
  transform: translate(-30%, -30%);
}
#_gallery .cntBox.-data.-ratio1 .graph{
  left: 25.1rem;
}
#_gallery .cntBox.-data.-ratio1 .texts{
  right: auto;
  left: 19.1rem;
}
#_gallery .cntBox.-data.-ratio1 .texts + .texts{
  left: 48.1rem;
}
#_gallery .cntBox.-data.-ratio2 .inner::before,
#_gallery .cntBox.-data.-ratio2 .inner::after,
#_gallery .cntBox.-data.-ratio3 .inner::before,
#_gallery .cntBox.-data.-ratio3 .inner::after{
  width: 15.33%;
  height: 30.53%;
  background-image: url(../img/character/1-pose8.png);
}
#_gallery .cntBox.-data.-ratio2 .inner::before,
#_gallery .cntBox.-data.-ratio3 .inner::before{
  top: 19.46%;
  left: 10.91%;
  transform: translate(-30%, -30%);
}
#_gallery .cntBox.-data.-ratio2 .inner::after,
#_gallery .cntBox.-data.-ratio3 .inner::after{
  top: 20.79%;
  right: 9.43%;
  background-image: url(../img/character/2-pose9.png);
  transform: translate(30%, -30%);
}

/* 男女比率 */
#_gallery .cntBox.-data.-ratio1 .graph{
  background-image: url(../img/gallery/graph_male-female.svg);
}
#_gallery .cntBox.-data.-ratio1 .icon{
  width: 10.3rem;
}

/* 理系文系比率 */
#_gallery .cntBox.-data.-ratio2 .graph{
  background-image: url(../img/gallery/graph_science-humanities.svg);
}
#_gallery .cntBox.-data.-ratio2 .icon{
  width: 9.7rem;
}

/* 新卒中途採用比率 */
#_gallery .cntBox.-data.-ratio3 .graph{
  background-image: url(../img/gallery/graph_new-mid.svg);
}
#_gallery .cntBox.-data.-ratio3 .icon{
  width: 9.7rem;
}

/* 設立年 */
#_gallery .cntBox.-data.-establish .box{
  margin-top: 3.6rem;
}
#_gallery .cntBox.-data.-establish .icon{
  /* width: 148.16/678; */
  /* width: 21.85%;
  margin-right: 4rem; */
  width: 17.3rem;
  height: 24.5rem;
  margin: 0 2.2rem 0 -4rem;
  transform: translateX(-100%);
}
#_gallery .cntBox.-data.-establish .num{
  display: inline-block;
/*   min-width: 2.68em; */
	min-width: 2.5em;
  min-height: 13.8rem;
  margin-top: -0.1em;
  margin-right: 3.7rem;
  text-align: right;
  white-space: nowrap;
}

/* 社員数 */
#_gallery .cntBox.-data.-number .box{
  flex-direction: row-reverse;
  align-items: center;
  margin-top: 5.9rem;
}
#_gallery .cntBox.-data.-number .icon{
  /* width: 26.22%;
  margin-right: 3.8rem; */
  width: 17.9rem;
  height: 25.2rem;
  margin: 0 -2rem 0 4.8rem;
  transform: translateX(100%);
}
#_gallery .cntBox.-data.-number .num{
  min-width: 1.77em;
  margin-right: 2.2rem;
}

/* 消防設備士資格保持件数 */
#_gallery .cntBox.-data.-qualification .box{
  margin-top: 3.6rem;
}
#_gallery .cntBox.-data.-qualification .icon{
  /* width: 21.33%;
  margin-right: 3rem; */
  width: 16.9rem;
  height: 26.3rem;
  margin: 0 3.3rem 0 -9rem;
  transform: translateX(-100%);
}
#_gallery .cntBox.-data.-qualification .num{
  min-width: 1.77em;
  margin-right: 3.4rem;
}

/* 社内教育システムカリキュラム数 */
#_gallery .cntBox.-data.-curriculum .box{
  align-items: center;
  margin-top: 3.2rem;
}
#_gallery .cntBox.-data.-curriculum .icon{
  /* width: 26.81%;
  margin-right: 5.2rem; */
  width: 19.2rem;
  height: 23.2rem;
  margin: 0 3.6rem 0 .5rem;
  transform: translateX(-100%);
}
#_gallery .cntBox.-data.-curriculum .num{
  min-width: 1.18em;
  line-height: 1;
  font-size: 13.6rem;
}

/* 年齢構成、平均年齢 */
#_gallery .cntBox.-data.-age .graph{
  position: absolute;
  top: 10.9rem;
  bottom: 9.73%;
  left: 6.72%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42.33%;
  aspect-ratio: 1/1;
  background: url(../img/gallery/graph_age.svg) center/98% no-repeat;
  line-height: 1;
}
#_gallery .cntBox.-data.-age .icon{
  width: 10.3rem;
  aspect-ratio: 1/1;
}
#_gallery .cntBox.-data.-age .circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-90deg);
}
#_gallery .cntBox.-data.-age .circle circle{
  fill: none;
  /* stroke-width: 2.5rem; */
  stroke-width: 5rem;
  stroke: var(--c-bg);
  stroke-dasharray: 260,260;
  stroke-dashoffset: 0;
  transition: 2s 0.6s;
  transform: scale(1, -1);
  transform-origin: center;
}
#_gallery .cntBox.-data.-age.-active .circle circle{
  stroke-dasharray: 0,260;
}
#_gallery .cntBox.-data.-age .gtext{
  position: relative;
  z-index: 2;
}
#_gallery .cntBox.-data.-age .gsmall{
  display: block;
  margin-top: -0.8rem;
  font-size: 2.4rem;
  text-align: center;
}
#_gallery .cntBox.-data.-age .gnum{
  min-width: 1.18em;
  margin-right: 1rem;
  font-size: 7.1rem;
}
#_gallery .cntBox.-data.-age .gunit{
  font-size: 4rem;
  /* vertical-align: 0.15em; */
  vertical-align: -0.5em;
}
#_gallery .cntBox.-data.-age .list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* width: 30.2rem; */
  gap: 2rem 0;
  width: 44.54%;
  margin:  4rem 1rem 0 auto;
}
#_gallery .cntBox.-data.-age .lsmall{
  display: block;
  font-size: 2.2rem;
  line-height: 1;
}
#_gallery .cntBox.-data.-age .lnum{
  display: inline-block;
  min-width: 1.5em;
  font-size: 4rem;
}
#_gallery .cntBox.-data.-age .lunit{
  font-size: 3.2rem;
  vertical-align: bottom;
}

/* 職種別割合 */
#_gallery .cntBox.-data.-occupation .graph{
  position: absolute;
  top: 10.9rem;
  bottom: 9.73%;
  left: 6.72%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42.33%;
  aspect-ratio: 1/1;
  background: url(../img/gallery/graph_occupation.svg) center/98% no-repeat;
  line-height: 1;
}
#_gallery .cntBox.-data.-occupation .icon{
  width: 9.9rem;
  aspect-ratio: 1/1;
}
#_gallery .cntBox.-data.-occupation .circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-90deg);
}
#_gallery .cntBox.-data.-occupation .circle circle{
  fill: none;
  /* stroke-width: 2.5rem; */
  stroke-width: 5rem;
  stroke: var(--c-bg);
  stroke-dasharray: 260,260;
  stroke-dashoffset: 0;
  transition: 2s 0.6s;
  transform: scale(1, -1);
  transform-origin: center;
}
#_gallery .cntBox.-data.-occupation.-active .circle circle{
  stroke-dasharray: 0,260;
}
#_gallery .cntBox.-data.-occupation .list{
  width: 29.3rem;
  margin-top: 1.5rem;
  margin-left: auto;
}
#_gallery .cntBox.-data.-occupation .item{
  display: flex;
  justify-content: start;
  align-items: center;
}
#_gallery .cntBox.-data.-occupation .lsmall{
  display: inline-block;
  margin-right: 1.1rem;
  font-size: 2.4rem;
  vertical-align: .8rem;
}
#_gallery .cntBox.-data.-occupation .lnum{
  display: inline-block;
  min-width: 0.59em;
  margin-right: 1.4rem;
  font-size: 7.1rem;
}
#_gallery .cntBox.-data.-occupation .lunit{
  display: inline-block;
  font-size: 4rem;
  vertical-align: .3rem;
}
#_gallery .cntBox.-data.-occupation .inner::before,
#_gallery .cntBox.-data.-age .inner::before{
  top: 5.9rem;
  left: 1.5rem;
  width: 17.3rem;
  height: 11.6rem;
  background-image: url(../img/character/1-01.png);
  transform: translate(-30%, -30%);
}
#_gallery .cntBox.-data.-occupation .inner::after,
#_gallery .cntBox.-data.-age .inner::after{
  left: 39.67%;
  bottom: .7rem;
  width: 15.19%;
  height: 32.96%;
  background-image: url(../img/character/2-01.png);
  transform: translate(30%, 30%);
}

/* 社員旅行で行った場所 */
#_gallery .cntBox.-data.-trip .text{
  position: relative;
  margin-top: 3rem;
  margin-left: 5.4rem;
  font-size: 2.2rem;
  line-height: 1.54;
  z-index: 2;
}
#_gallery .cntBox.-data.-trip .map{
  position: absolute;
  width: 56.63%;
  aspect-ratio: 384/317;
  bottom: 2.4rem;
  right: 6.5rem;
}
#_gallery .cntBox.-data.-trip .map::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/gallery/icon_japan.svg) right/contain no-repeat;
}
#_gallery .cntBox.-data.-trip .pin{
  position: absolute;
  /* width: 3.1rem; */
  width: 8.09%;
  /* height: 3.7rem; */
  aspect-ratio: 3108/3689;
  background: url(../img/gallery/icon_pin.svg) center/contain no-repeat;
  transform: translateY(-10rem);
  opacity: 0;
  transition: transform .5s cubic-bezier(0.48, 0.28, 0.16, 1.42), opacity .5s cubic-bezier(0.48, 0.28, 0.16, 1.42);
}
#_gallery .cntBox.-data.-trip.-active .pin{
  transform: none;
  opacity: 1;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(1){
  top: 5.55%; right: 8.20%;
  transition-delay: 0.8s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(2){
  top: 29.52%; right: 12.23%;
  transition-delay: 0.9s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(3){
  top: 37.85%; right: 32.55%;
  transition-delay: 1s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(4){
  top: 52.77%; right: 31.51%;
  transition-delay: 1.2s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(5){
  top: 57.91%; right: 21.61%;
  transition-delay: 1.3s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(6){
  top: 82.01%; right: 13.51%;
  transition-delay: 1.4s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(7){
  top: 55.89%; right: 41.64%;
  transition-delay: 1.5s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(8){
  top: 50.85%; right: 51.40%;
  transition-delay: 1.6s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(9){
  top: 64.41%; right: 48.93%;
  transition-delay: 1.7s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(10){
  top: 64.35%; right: 64.03%;
  transition-delay: 1.8s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(11){
  top: 76.05%; right: 67%;
  transition-delay: 1.9s;
}
#_gallery .cntBox.-data.-trip .pin:nth-of-type(12){
  bottom: 3.38%; left: 0;
  transition-delay: 2s;
}
#_gallery .cntBox.-data.-trip .inner::before{
  right: 1.47%;
  bottom: 3.98%;
  width: 14.30%;
  height: 30.75%;
  background-image: url(../img/character/2-01.png);
  transform: translate(30%, 30%);
}



#_gallery .cntBox.-data:nth-of-type(n + 6),
#_gallery .cntBox.-peoples:nth-of-type(n + 7),
#_gallery .cntBox.-image:nth-of-type(n + 11),
#_gallery .cntBox.-vertical:nth-of-type(n + 3){ --n: 52; }

#_gallery .cntBox.-data:nth-of-type(5n + 1){
  grid-column: 1/span 6;
  grid-row: calc(var(--n) + 2)/span 4;
}
#_gallery .cntBox.-data:nth-of-type(5n + 2){
  grid-column: 7/span 6;
  grid-row: calc(var(--n) + 13)/span 4;
}
#_gallery .cntBox.-data:nth-of-type(5n + 3){
  grid-column: 7/span 6;
  grid-row: calc(var(--n) + 26)/span 4;
}
#_gallery .cntBox.-data:nth-of-type(5n + 4){
  grid-column: 2/span 6;
  grid-row: calc(var(--n) + 34)/span 4;
}
#_gallery .cntBox.-data:nth-of-type(5n + 5){
  grid-column: 5/span 6;
  grid-row: calc(var(--n) + 46)/span 4;
}

#_gallery .cntBox.-peoples:nth-of-type(6n + 1){
  grid-column: 11/span 2;
  grid-row: calc(var(--n) + 2)/span 3;
  transition-delay: .2s;
}
#_gallery .cntBox.-peoples:nth-of-type(6n + 2){
  grid-column: 8/span 2;
  grid-row: calc(var(--n) + 4)/span 3;
  transition-delay: .5s;
}
/* #_gallery .cntBox.-peoples:nth-of-type(8n + 3){
  grid-column: 9/span 4;
  grid-row: calc(var(--n) + 19)/span 6;
  transition-delay: .3s;
} */
#_gallery .cntBox.-peoples:nth-of-type(6n + 3){
  grid-column: 6/span 2;
  grid-row: calc(var(--n) + 20)/span 3;
  transition-delay: .3s;
}
/* #_gallery .cntBox.-peoples:nth-of-type(8n + 5){
  grid-column: 1/span 4;
  grid-row: calc(var(--n) + 22)/span 6;
  transition-delay: .1s;
} */
#_gallery .cntBox.-peoples:nth-of-type(6n + 4){
  grid-column: 2/span 2;
  grid-row: calc(var(--n) + 30)/span 3;
  transition-delay: .4s;
}
#_gallery .cntBox.-peoples:nth-of-type(6n + 5){
  grid-column: 11/span 2;
  grid-row: calc(var(--n) + 33)/span 3;
  transition-delay: .2s;
}
#_gallery .cntBox.-peoples:nth-of-type(6n + 6){
  grid-column: 1/span 2;
  grid-row: calc(var(--n) + 49)/span 3;
  transition-delay: .5s;
}
#_gallery .cntBox.-peoples .detail{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #0b489ecc;
  opacity: 0;
  transition: opacity .2s ease-in;
  color: #fff;
  text-align: center;
}
#_gallery .cntBox.-peoples:hover .detail{
  opacity: 1;
}
#_gallery .cntBox.-peoples .title{
  font-size: 1.8rem;
  font-weight: bold;
}
#_gallery .cntBox.-peoples .name{
  margin: .4rem 0;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
}
#_gallery .cntBox.-peoples .position{
  font-size: 1.4rem;
  font-weight: 400;
}

#_gallery .cntBox.-image:nth-of-type(10n + 1){
  grid-column: 2/span 6;
  grid-row: calc(var(--n) + 8)/span 4;
  transition-delay: .5s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 2){
  grid-column: 10/span 3;
  grid-row: calc(var(--n) + 8)/span 2;
  transition-delay: .2s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 3){
  grid-column: 1/span 3;
  grid-row: calc(var(--n) + 14)/span 2;
  transition-delay: .3s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 4){
  grid-column: 3/span 3;
  grid-row: calc(var(--n) + 17)/span 2;
  transition-delay: .4s;
}
/* #_gallery .cntBox.-image:nth-of-type(10n + 5){
  grid-column: 9/span 4;
  grid-row: calc(var(--n) + 19)/span 6;
  transition-delay: .5s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 6){
  grid-column: 1/span 4;
  grid-row: calc(var(--n) + 22)/span 6;
  transition-delay: .3s;
} */
#_gallery .cntBox.-image:nth-of-type(10n + 5){
  grid-column: 6/span 3;
  grid-row: calc(var(--n) + 31)/span 2;
  transition-delay: .2s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 6){
  grid-column: 9/span 3;
  grid-row: calc(var(--n) + 38)/span 2;
  transition-delay: .4s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 7){
  grid-column: 3/span 3;
  grid-row: calc(var(--n) + 39)/span 2;
  transition-delay: .5s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 8){
  grid-column: 7/span 6;
  grid-row: calc(var(--n) + 41)/span 4;
  transition-delay: .2s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 9){
  grid-column: 2/span 3;
  grid-row: calc(var(--n) + 42)/span 2;
  transition-delay: .3s;
}
#_gallery .cntBox.-image:nth-of-type(10n + 10){
  grid-column: 9/span 3;
  grid-row: calc(var(--n) + 51)/span 2;
  transition-delay: .4s;
}

#_gallery .cntBox.-vertical:nth-of-type(2n + 1){
  grid-column: 9/span 4;
  grid-row: calc(var(--n) + 19)/span 6;
  transition-delay: .5s;
}
#_gallery .cntBox.-vertical:nth-of-type(2n + 2){
  grid-column: 1/span 4;
  grid-row: calc(var(--n) + 22)/span 6;
  transition-delay: .3s;
}
/* TAB */
@media screen and (max-width: 899px) {
  #_gallery{
    padding: 0;
  }
  #_gallery .cntList{
    grid-template-columns: repeat(6, 1fr);
  }
  #_gallery .cntBox.-data:nth-of-type(n + 3),
  #_gallery .cntBox.-peoples:nth-of-type(n + 3),
  #_gallery .cntBox.-image:nth-of-type(n + 4),
  #_gallery .cntBox.-vertical:nth-of-type(n + 2){
    --n: 23;
  }
  #_gallery .cntBox.-data:nth-of-type(n + 5),
  #_gallery .cntBox.-peoples:nth-of-type(n + 5),
  #_gallery .cntBox.-image:nth-of-type(n + 7),
  #_gallery .cntBox.-vertical:nth-of-type(n + 3){
    --n: 46;
  }
  #_gallery .cntBox.-data:nth-of-type(n + 7),
  #_gallery .cntBox.-peoples:nth-of-type(n + 7),
  #_gallery .cntBox.-image:nth-of-type(n + 10),
  #_gallery .cntBox.-vertical:nth-of-type(n + 4){
    --n: 69;
  }
  #_gallery .cntBox.-data:nth-of-type(n + 9),
  #_gallery .cntBox.-peoples:nth-of-type(n + 9),
  #_gallery .cntBox.-image:nth-of-type(n + 13),
  #_gallery .cntBox.-vertical:nth-of-type(n + 5){
    --n: 92;
  }
  #_gallery .cntBox.-data:nth-of-type(2n + 1){
    grid-column: 1/span 6;
    grid-row: calc(var(--n) + 9)/span 4;
  }
  #_gallery .cntBox.-data:nth-of-type(2n + 2){
    grid-column: 1/span 6;
    grid-row: calc(var(--n) + 20)/span 4;
  }
  #_gallery .cntBox.-peoples:nth-of-type(2n + 1){
    grid-column: 1/span 2;
    grid-row: calc(var(--n) + 3)/span 3;
  }
  /* #_gallery .cntBox.-peoples:nth-of-type(3n + 2){
    grid-column: 4/span 2;
    grid-row: calc(var(--n) + 5)/span 3;
  } */
  #_gallery .cntBox.-peoples:nth-of-type(2n + 2){
    grid-column: 5/span 2;
    grid-row: calc(var(--n) + 15)/span 3;
  }
  #_gallery .cntBox.-image:nth-of-type(3n + 1){
    grid-column: 4/span 3;
    grid-row: calc(var(--n) + 2)/span 2;
  }
  /* #_gallery .cntBox.-image:nth-of-type(4n + 2){
    grid-column: 4/span 2;
    grid-row: calc(var(--n) + 5)/span 3;
  } */
  #_gallery .cntBox.-image:nth-of-type(3n + 2){
    grid-column: 1/span 3;
    grid-row: calc(var(--n) + 14)/span 2;
  }
  #_gallery .cntBox.-image:nth-of-type(3n + 3){
    grid-column: 1/span 3;
    grid-row: calc(var(--n) + 17)/span 2;
  }
  #_gallery .cntBox.-vertical:nth-of-type(n){
    grid-column: 4/span 2;
    grid-row: calc(var(--n) + 5)/span 3;
  }
}