@charset "UTF-8";

.home {
  overflow: clip;
  padding-top: calc(133 * var(--header-unit));
}

/* ファーストビュー */
.home-hero {
  position: relative;
  height: 1067px;
}
.home-hero__glow {
  position: absolute;
  top: -133px;
  left: 0;
  width: 924px;
  height: 607px;
  pointer-events: none;
}
.home-hero__symbol {
  position: absolute;
  top: -37px;
  left: 50%;
  width: 1123px;
  height: 1109px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.home-hero__gallery {
  position: relative;
  height: 560px;
  overflow: hidden;
}
.home-hero__track {
  position: relative;
  width: 2316px;
  height: 560px;
}
.home-hero__photo {
  position: absolute;
}
.home-hero__photo--01 {
  top: 281px;
  left: 0;
  width: 458px;
  height: 279px;
}
.home-hero__photo--02 {
  top: 370px;
  left: 1337px;
  width: 299px;
  height: 190px;
}
.home-hero__photo--03 {
  top: 0;
  left: 1223px;
  width: 299px;
  height: 281px;
}
.home-hero__photo--04 {
  top: 64px;
  left: 543px;
  width: 595px;
  height: 468px;
}
.home-hero__photo--05 {
  top: 64px;
  left: 1721px;
  width: 595px;
  height: 468px;
}
.home-hero__content {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: var(--content-width);
  margin: 39px auto 0;
}
.home-hero__copy {
  position: relative;
  padding-top: 49px;
}
.home-hero__title {
  font-size: 58px;
  font-weight: 700;
  line-height: 90px;
  letter-spacing: 2.9px;
  white-space: nowrap;
}
.home-hero__line {
  display: block;
}
.home-hero__blue {
  color: var(--color-blue);
}
.home-hero__pink {
  color: #f16ca5;
}
.home-hero__english {
  position: absolute;
  top: 73px;
  left: 350px;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
.home-hero__entries {
  display: flex;
  flex-shrink: 0;
  margin-right: -26px;
  margin-left: 35px;
}
.home-hero__entries .recruit-circle + .recruit-circle {
  margin-left: -16px;
}
.home-hero__marquee {
  position: absolute;
  top: 862px;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-en);
  font-size: 150px;
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -7.5px;
  text-indent: -1255px;
  white-space: nowrap;
}
@media screen and (max-width: 1600px) {
.home-hero__marquee {
  position: absolute;
  top: 762px;
}
}

/* メッセージ */
.home-message {
  position: relative;
  height: 746px;
  padding-top: 69px;
}
.home-message__inner {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 900px;
  margin: 0 auto;
}
.home-message__title {
  writing-mode: vertical-rl;
  color: var(--color-blue);
  font-size: 50px;
  font-weight: 700;
  line-height: 82px;
  letter-spacing: 6px;
  white-space: nowrap;
}
.home-message__body {
  width: 602px;
}
.home-message__text {
  font-size: 18px;
  line-height: 40px;
  text-align: justify;
}
.home-message__photos {
  display: flex;
  justify-content: space-between;
  gap: 42px;
  margin-top: 36px;
}
.home-message__photo {
  position: relative;
  width: 280px;
  height: auto;
}
.home-message__button {
  display: flex;
  width: max-content;
  margin: 50px auto 0;
}
.home-message__side {
  position: absolute;
}
.home-message__side--left {
  top: 77px;
  left: calc(50% - 1268px);
  width: 595px;
  height: 468px;
}
.home-message__side--top {
  top: 78px;
  left: calc(50% + 698px);
  width: 299px;
  height: 190px;
}
.home-message__side--right {
  top: 345px;
  left: calc(50% + 597px);
  width: 458px;
  height: 279px;
}
.home-message__symbol {
  position: absolute;
  top: 202px;
  right: 0;
  width: 814px;
  height: 1577px;
  max-width: none;
  pointer-events: none;
}

/* 写真に重なる紹介バナー */
.home-numbers {
  position: relative;
  padding-bottom: 201px;
}
.home-banner {
  position: relative;
  width: var(--content-width);
  height: 468px;
  margin: 0 auto;
}
.home-banner__photo {
  position: relative;
  width: 752px;
  height: auto;
}
.home-banner__panel {
  position: absolute;
  top: 81px;
  right: 0;
  width: 569px;
  min-height: 307px;
  padding: 31px 34px 27px;
  border-radius: 10px;
  background: linear-gradient(150deg, #86b5e6e6 15%, #3780cde6 72%);
  color: #fff;
}
.home-banner__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 2.5px;
  white-space: nowrap;
}
.home-banner__text {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
  white-space: nowrap;
}
.home-banner__button {
  display: flex;
  width: max-content;
  margin: 26px 0 0 auto;
}

/* 仕事・社員・福利厚生・FAQ：左右の順序はmodifierで指定。 */
.home-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: 150px;
}
.home-feature__visual {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}
.home-feature__body {
  grid-column: 2;
  grid-row: 1;
  width: 510px;
  margin-left: 87px;
  padding-top: 30px;
}
.home-feature__eyebrow {
  margin-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 1.2px;
}
.home-feature__title {
  color: var(--color-blue);
  font-size: 40px;
  font-weight: 700;
  line-height: 70px;
  letter-spacing: 2.5px;
}
.home-feature__text {
  margin-top: 24px;
  font-size: 18px;
  line-height: 38px;
}
.home-feature__button {
  display: flex;
  width: max-content;
  margin: 50px 0 0 auto;
}
.home-feature__visual--work {
  display: flex;
}
.home-feature__half {
  position: relative;
  width: 50%;
  height: auto;
}
.home-feature--reverse .home-feature__visual {
  grid-column: 2;
}
.home-feature--reverse .home-feature__body {
  grid-column: 1;
  justify-self: end;
  margin-right: 90px;
  margin-left: 0;
}
.home-feature--people .home-feature__text {
  letter-spacing: 1px;
}
.home-feature__visual--people img {
border-radius: 40px 0 0 40px;
}
@media screen and (max-width: 1024px) {
.home-feature__visual--people img {
border-radius: 30px 30px 30px 30px;
}
}

/* キャリアプラン */
.home-career {
  position: relative;
  padding-top: 50.368421%;
}
.home-career__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.home-career__panel {
  position: relative;
  min-height: 1000px;
  overflow: hidden;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(148deg, rgba(134,181,230,0.8) 31%, rgba(55,128,205,0.8) 100%);
  color: #fff;
}
.home-career__marquee {
  margin-top: 102px;
  opacity: .5;
  font-family: var(--font-en);
  font-size: 150px;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -7.5px;
  white-space: nowrap;
}
.home-career__inner {
  width: var(--content-width);
  margin: 53px auto 0;
  text-align: center;
}
.home-career__title {
  font-size: 46px;
  font-weight: 700;
  line-height: 76px;
  letter-spacing: 2.5px;
}
.home-career__text {
  margin: 37px 0 50px;
  font-size: 20px;
  font-weight: 500;
  line-height: 44px;
}

/* 福利厚生・FAQ */
.home-support {
  position: relative;
  padding-top: 150px;
}
.home-support__symbol {
  position: absolute;
  bottom: 101px;
  left: 0;
  width: 815px;
  height: 1109px;
  pointer-events: none;
}
.home-feature--benefits .home-feature__visual {
  justify-self: end;
  width: calc(100% - 65px);
}
.home-feature--benefits .home-feature__body {
  padding-top: 115px;
}
.home-feature--benefits .home-feature__button {
  margin-top: 50px;
}
.home-feature--faq {
  margin-bottom: 150px;
}
.home-feature--faq .home-feature__visual {
  width: calc(100% - 65px);
}
.home-feature--faq .home-feature__body {
  padding-top: 35px;
}

/* 会社外観・会社概要・ニュース */
.home-company-view {
  position: relative;
  height: auto;
}
.home-bottom {
  position: relative;
  z-index: 1;
  margin-top: -160px;
  padding-top: 160px;
  border-radius: 100px 100px 0 0;
  background: #fff;
}
.home-company {
  margin-bottom: 130px;
}
.home-news {
  width: var(--content-width);
  margin: 0 auto;
  padding-bottom: 40px;
}
.home-news__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 41px;
}
.home-news__title {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2.5px;
}
.home-news__english {
  color: #3780cdb3;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  margin-top: 4px;
}

/* トップページのループ演出 */
.home-hero__marquee,
.home-career__marquee {
  --marquee-duration: 60s;
  overflow: hidden;
  text-indent: 0;
}
.home-hero__track {
  display: flex;
  width: 7203px;
  animation: home-gallery-scroll 90s linear infinite;
}
.home-hero__group {
  position: relative;
  flex: 0 0 2401px;
  width: 2401px;
  height: 560px;
}
@keyframes home-gallery-scroll {
  from {
  transform: translateX(-2401px);
}
  to {
  transform: translateX(0);
}
}
.home .link-button--pink-hover:is(:hover, :focus-visible) {
  color: #fff;
}
.home .recruit-circle {
  transition: color .2s ease-out;
}
.home .recruit-circle::before {
  content: "";
  position: absolute;
  inset: 26px;
  z-index: 1;
  background: url("../img/common/side-blue-hover.png") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity .2s ease-out;
}
.home .recruit-circle--career::before {
  background-image: url("../img/common/side-pink-hover.png");
}
.home .recruit-circle__label,
.home .recruit-circle__text {
  z-index: 2;
}
.home .recruit-circle:is(:hover, :focus-visible) {
  color: #3780cd;
  transform: none;
}
.home .recruit-circle--career:is(:hover, :focus-visible) {
  color: #db6296;
}
.home .recruit-circle:is(:hover, :focus-visible)::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__track {
  animation: none;
  transform: translateX(-2401px);
}
  .home .recruit-circle,
  .home .recruit-circle::before {
  transition: none;
}
}

/* Figmaのマスク・角丸を含めて書き出した画像。高さは元画像の比率から決定。 */
.home-hero__photo img,
.home-message__photo img,
.home-message__side img,
.home-banner__photo img,
.home-feature__visual > img,
.home-feature__half img,
.home-career__photo img,
.home-company-view__image {
  display: block;
  width: 100%;
  height: auto;
}
.home-feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.home-feature__visual,
.home-feature__half {
  min-width: 0;
}
.home-feature__half--lab img {
border-radius: 0 40px 40px 0;
}
@media screen and (max-width: 1024px) {
.home-feature__half--lab img {
border-radius: 0 40px 40px 0;
}
.home-feature__half--field img {
border-radius: 30px 0 0 30px;
}
}

/* タブレット横向き：PCの2列構成を保ち、固定幅によるはみ出しを解消。 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.home {
		--content-width: 94%;
	}
	.home-hero__content {
		flex-wrap: wrap;
	}
	.home-hero__entries {
		margin: 20px 0 0 auto;
	}
	.home-hero {
		/* height: 1250px;*/
	}
	.home-hero__marquee {
		top: auto;
		bottom: 20px;
	}
	.home-banner__photo {
		width: 65%;
	}
	.home-banner__panel {
		width: 52%;
	}
	.home-banner__title {
		font-size: 36px;
		white-space: normal;
	}
	.home-banner__text {
		font-size: 17px;
		white-space: normal;
	}
	.home-feature__body {
		width: auto;
		margin: 0;
		padding: 20px 30px;
	}
	.home-feature--reverse .home-feature__body {
		margin: 0;
	}
	.home-feature__title {
		font-size: 36px;
		line-height: 54px;
	}
	.home-feature__text {
		font-size: 18px;
		line-height: 34px;
	}
	.home-feature {
		min-height: 0;
		margin-bottom: 100px;
	}
	.home-career__title {
		font-size: 38px;
		line-height: 60px;
	}
	.home-career__text {
		font-size: 18px;
		line-height: 38px;
	}
	
}
@media (max-width: 1023px) {
	.home {
		--content-width: 100%;
	}
	.home picture {
		display: block;
	}
	.home picture img {
		width: 100%;
		height: auto;
	}
	.home-hero {
		height: auto;
		padding-bottom: 60px;
	}
	.home-hero__glow {
		top: -90px;
		left: -200px;
		width: 550px;
		height: auto;
	}
	.home-hero__symbol {
		top: -15px;
		width: 390px;
		height: auto;
	}
	.home-hero__gallery {
		height: 243px;
	}
	.home-hero__track {
		width: 3087px;
		height: 243px;
		animation-name: home-gallery-scroll-mobile;
	}
	.home-hero__group {
		flex: 0 0 1029px;
		width: 1029px;
		height: 243px;
	}
	.home-hero__photo {
		height: auto;
	}
	.home-hero__photo--01 {
		top: 123px;
		left: 0;
		width: 196px;
	}
	.home-hero__photo--02 {
		top: 162px;
		left: 573px;
		width: 128px;
	}
	.home-hero__photo--03 {
		top: 3px;
		left: 524px;
		width: 128px;
	}
	.home-hero__photo--04 {
		top: 30px;
		left: 233px;
		width: 255px;
	}
	.home-hero__photo--05 {
		top: 30px;
		left: 738px;
		width: 255px;
	}
	.home-hero__content {
		display: block;
		width: 100%;
		max-width: 640px;
		margin: 20px auto 0;
		padding: 0 15px;
	}
	.home-hero__copy {
		padding-top: 0;
	}
	.home-hero__title {
		font-size: 35px;
		line-height: 53px;
		letter-spacing: 1px;
	}
	.home-hero__line {
		display: flex;
		white-space: nowrap;
	}
	.home-hero__english {
		top: 8px;
		left: auto;
		right: 0;
		font-size: 12px;
		line-height: 18px;
	}
	.home-hero__entries {
		justify-content: center;
		margin: 22px 0 0;
	}
	.home-hero__entries .recruit-circle + .recruit-circle {
		margin-left: -8px;
	}
	.home .recruit-circle::before {
		inset: 18px;
	}
	.home-hero__marquee {
		top: auto;
		bottom: 0;
		font-size: 50px;
		line-height: 60px;
		letter-spacing: -2.5px;
	}
	.home-message {
		height: auto;
		padding: 0 20px 420px;
	}
	.home-message__inner {
		display: block;
		width: 100%;
		max-width: 600px;
	}
	.home-message__title {
		height: 205px;
		margin: 0 auto 30px auto;
		font-size: 28px;
		line-height: 41px;
		letter-spacing: 1.4px;
		display:flex;
		justify-content: center;
	}
	.home-message__body {
		width: 100%;
	}
	.home-message__text, .home-feature__text {
		font-size: 16px;
		line-height: 30px;
	}
	.home-message__photos {
		gap: 12px;
		margin-top: 25px;
	}
	.home-message__photo {
		width: 50%;
	}
	.home-message__button {
		margin: 30px auto 0;
	}
	.home-message__side--left {
		top: 0;
		left: -58px;
		width: 260px;
		height: auto;
		display: none;
	}
	.home-message__side--top {
		top: auto;
		bottom: 270px;
		left: auto;
		right: -10px;
		width: 189px;
		height: auto;
	}
	.home-message__side--right {
		top: auto;
		bottom: 10px;
		left: auto;
		right: -10px;
		width: 376px;
		height: auto;
	}
	.home-message__symbol {
		top: 700px;
		width: 580px;
		height: auto;
		right: -200px;
	}
	.home-numbers {
		padding: 40px 20px 50px;
	}
	.home-banner {
		width: 100%;
		max-width: 600px;
		height: auto;
	}
	.home-banner__photo {
		width: 100%;
	}
	.home-banner__panel {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		min-height: 196px;
		margin: -54px 20px 0;
		padding: 20px;
		border-radius: 10px;
	}
	.home-banner__title {
		font-size: 28px;
		font-weight: 700;
		line-height: 40px;
		letter-spacing: 1px;
		white-space: normal;
	}
	.home-banner__text {
		margin-top: 8px;
		font-size: 16px;
		line-height: 28px;
		letter-spacing: -0.2px;
		white-space: normal;
	}
	.home-banner__button {
		margin: 18px auto 0;
	}
	.home-feature {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 640px;
		min-height: 0;
		gap: 30px;
		margin: 0 auto 60px;
		padding: 0 20px;
	}
	.home-feature__visual, .home-feature--benefits .home-feature__visual, .home-feature--faq .home-feature__visual {
		width: 100%;
	}
	.home-feature__body, .home-feature--reverse .home-feature__body, .home-feature--benefits .home-feature__body, .home-feature--faq .home-feature__body {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.home-feature__eyebrow {
		margin-bottom: 12px;
		font-size: 18px;
		line-height: 28px;
		letter-spacing: .9px;
	}
	.home-feature__title {
		font-size: 28px;
		line-height: 42px;
		letter-spacing: 1.4px;
	}
	.home-feature__text {
		margin-top: 12px;
		letter-spacing: 0;
	}
	.home-feature__button, .home-feature--benefits .home-feature__button {
		margin: 30px auto 0;
	}
	.home-career {
		padding-top: 0;
	}
	.home-career__photo {
		position: relative;
		width: 100%;
	}
	.home-career__panel {
		min-height: 0;
		margin-top: -40px;
		padding: 30px 20px 50px;
		border-radius: 40px 40px 0 0;
	}
	.home-career__marquee {
		margin-top: 0;
		font-size: 50px;
		line-height: 60px;
		letter-spacing: -2.5px;
	}
	.home-career__inner {
		width: 100%;
		max-width: 600px;
		margin: 25px auto 0;
	}
	.home-career__title {
		font-size: 28px;
		line-height: 42px;
		letter-spacing: 1.4px;
	}
	.home-career__title span {
		display: inline-block;
	}
	.home-career__text {
		margin: 24px 0 30px;
		font-size: 16px;
		font-weight: 400;
		line-height: 30px;
		text-align: left;
	}
	.home-support {
		padding-top: 50px;
	}
	.home-support__symbol {
		bottom: 0;
		left: -80px;
		width: 390px;
		height: auto;
	}
	.home-feature--faq {
		margin-bottom: 60px;
	}
	.home-bottom {
		margin-top: -40px;
		padding: 60px 20px 0;
		border-radius: 40px 40px 0 0;
	}
	.home-company {
		margin-bottom: 50px;
	}
	.home-news {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		max-width: 600px;
		padding-bottom: 0;
	}
	.home-news__heading {
		display: contents;
	}
	.home-news__title {
		grid-row: 1;
		gap: 20px;
		margin-bottom: 30px;
		font-size: 28px;
		letter-spacing: 1.4px;
	}
	.home-news__english {
		font-size: 14px;
		letter-spacing: -.7px;
	}
	.home-news__heading > .link-button {
		grid-row: 3;
		justify-self: center;
		margin-top: 30px;
	}
	.home-news__list {
		grid-row: 2;
	}
	.home-news .news-list__item {
		display: block;
		min-height: 0;
		padding: 20px 0;
	}
	.home-news .news-list__date {
		font-size: 14px;
		line-height: 24px;
	}
	.home-news .news-list__link {
		display: block;
		margin-top: 8px;
		font-size: 15px;
		line-height: 28px;
	}
	
}
@media (max-width: 374px) {
	.home-hero__title {
		font-size: 31px;
		letter-spacing: 0;
	}
	.home-hero__english {
		font-size: 10px;
	}
	.home-banner__panel {
		margin-right: 10px;
		margin-left: 10px;
		padding: 18px 14px;
	}
	.home-banner__title {
		font-size: 26px;
	}
	
}
@keyframes home-gallery-scroll-mobile {
	from {
		transform: translateX(-1266px);
	}
	to {
		transform: translateX(-237px);
	}
	
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.home-hero__track {
		animation: none;
		transform: translateX(-1266px);
	}
	
}

/* pictureによる画像切り替え後も、PCでは元画像の比率を維持。 */
@media (min-width: 1024px) {
	.home picture {
		display: block;
	}
	.home picture img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* 本文途中の背景はヒーローから独立して配置。 */
@media (max-width: 1023px) {
	.home-message {
		background-image: url("../img/home/message-background-sp.png");
		background-position: left -150px bottom 100px;
		background-size: 346px auto;
		background-repeat: no-repeat;
	}
	.home-career__panel {
		padding-right: 0;
		padding-left: 0;
	}
	.home-career__marquee {
		width: 100%;
		font-size: 70px;
		line-height: 84px;
		letter-spacing: -3.5px;
	}
	.home-career__inner {
		padding-right: 20px;
		padding-left: 20px;
	}
}

/* PCキャリアプラン：画像上端で固定し、パネルを手前に重ねてスクロール */
@media (min-width: 1024px) {
  .home-career {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    isolation: isolate;
  }

  .home-career__photo {
    position: sticky;
    top: 0;
    grid-area: 1 / 1;
    align-self: start;
    z-index: 0;
  }

  .home-career__photo picture {
    display: block;
  }

  .home-career__panel {
    grid-area: 1 / 1;
    align-self: start;
    z-index: 1;
    min-width: 0;
    margin-top: 50.368421%;
  }
}

/* ========================================
   ヒーローギャラリー：実画像対応版
   hero-01.png ～ hero-11.png / 11枚 × 3グループ
   home.css の末尾に配置してください。
   ======================================== */

.home-hero__gallery {
  /* 表示高さ / 1周の秒数（大きいほどゆっくり） */
  --gallery-height: clamp(243px, 29.1666667vw, 560px);
  --gallery-unit: calc(var(--gallery-height) / 234);
  --gallery-group-width: calc(2048 * var(--gallery-unit));
  --gallery-duration: 180s;

  position: relative;
  width: 100%;
  height: var(--gallery-height);
  overflow: hidden;
}

.home-hero__track {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: calc(3 * var(--gallery-group-width));
  max-width: none;
  height: var(--gallery-height);
  margin: 0;
  padding: 0;
  transform: translate3d(calc(-1 * var(--gallery-group-width)), 0, 0);
  animation: home-hero-reference-loop var(--gallery-duration) linear infinite;
  will-change: transform;
}

.home-hero__group {
  position: relative;
  flex: 0 0 var(--gallery-group-width);
  width: var(--gallery-group-width);
  max-width: none;
  height: var(--gallery-height);
  margin: 0;
  padding: 0;
}

.home-hero__photo {
  position: absolute;
  top: calc(var(--photo-y) * var(--gallery-unit));
  left: calc(var(--photo-x) * var(--gallery-unit));
  width: calc(var(--photo-width) * var(--gallery-unit));
  height: calc(var(--photo-height) * var(--gallery-unit));
}

/* 01：左下：試験管 */
.home-hero__photo--01 {
  --photo-x: 0;
  --photo-y: 117;
  --photo-width: 192;
  --photo-height: 117;
}

/* 02：下段：記録作業 */
.home-hero__photo--02 {
  --photo-x: 559;
  --photo-y: 154;
  --photo-width: 126;
  --photo-height: 80;
}

/* 03：上段：分析機器の操作 */
.home-hero__photo--03 {
  --photo-x: 511;
  --photo-y: 0;
  --photo-width: 126;
  --photo-height: 118;
}

/* 04：左側の大きい写真：研究室での分析 */
.home-hero__photo--04 {
  --photo-x: 226;
  --photo-y: 26;
  --photo-width: 251;
  --photo-height: 197;
}

/* 05：大きい写真：青い手袋 */
.home-hero__photo--05 {
  --photo-x: 719;
  --photo-y: 26;
  --photo-width: 251;
  --photo-height: 197;
}

/* 06：中央上：分析装置（hero-06.png） */
.home-hero__photo--06 {
  --photo-x: 1084;
  --photo-y: 18;
  --photo-width: 124;
  --photo-height: 79;
}

/* 07：中央下：ガラス器具を使う社員（hero-07.png） */
.home-hero__photo--07 {
  --photo-x: 1004;
  --photo-y: 114;
  --photo-width: 192;
  --photo-height: 117;
}

/* 08：大きい写真：船上調査 */
.home-hero__photo--08 {
  --photo-x: 1230;
  --photo-y: 24;
  --photo-width: 246;
  --photo-height: 196;
}

/* 09：右下：河川調査（hero-09.png） */
.home-hero__photo--09 {
  --photo-x: 1558;
  --photo-y: 151;
  --photo-width: 124;
  --photo-height: 80;
}

/* 10：右上：ガラス容器（hero-10.png） */
.home-hero__photo--10 {
  --photo-x: 1511;
  --photo-y: 0;
  --photo-width: 124;
  --photo-height: 116;
}

/* 11：右端：ピペット */
.home-hero__photo--11 {
  --photo-x: 1716;
  --photo-y: 41;
  --photo-width: 271;
  --photo-height: 179;
}

/* 画像に含まれる角丸・透過部分を残し、トリミングしない */
.home-hero__gallery .home-hero__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-hero__gallery .home-hero__photo img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

/* 左から右へ、ちょうど1グループ分だけ移動 */
@keyframes home-hero-reference-loop {
  from {
    transform: translate3d(calc(-1 * var(--gallery-group-width)), 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1023px) {
  .home-hero__gallery {
    --gallery-duration: 120s;
  }
}

/* 超ワイド画面でも、繰り返し部分の端が露出しないサイズに調整 */
@media (min-width: 9800px) {
  .home-hero__gallery {
    --gallery-height: 5.7142857143vw;
  }
}

/* OSの「動きを減らす」設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .home-hero__track {
    animation: none;
    transform: translate3d(calc(-1 * var(--gallery-group-width)), 0, 0);
    will-change: auto;
  }
}

/* ========================================
   ヒーローギャラリー：余白・読み込み対策
   前回の11枚版CSSより後（home.cssの末尾）に追記してください。
   ======================================== */

.home-hero__gallery {
  /*
   * ピペットの右端：1716 + 271 = 1987
   * つなぎ目の余白：34（他の主要な写真間隔と同じ）
   * 1グループの幅：1987 + 34 = 2021
   * 実際の表示寸法は --gallery-unit に合わせて拡大・縮小します。
   */
  --gallery-group-width: calc(2021 * var(--gallery-unit));
}

/* 全33枚の表示準備が整うまで、現在位置で停止します。 */
.home-hero__gallery[data-gallery-state="loading"] .home-hero__track,
.home-hero__gallery[data-gallery-state="error"] .home-hero__track {
  animation-play-state: paused;
}

/* 「動きを減らす」の場合は元の animation: none が優先されます。 */
.home-hero__gallery[data-gallery-state="ready"] .home-hero__track {
  animation-play-state: running;
}