@charset "utf-8";
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figcaption, figure, section, footer, header, main, hgroup, menu, nav, summary {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
@media all and (min-width: 897px) and (max-width: 1099px) {
	html {
		font-size: calc(1000vw / 1100);
	}
}
@media all and (max-width: 374px) {
	html {
		font-size: calc(1000vw / 375);
	}
}
body, table, input, textarea, select, option {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
article, aside, canvas, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
chrome_annotation {
	border: none !important;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
address {
	font-style: normal;
}
a,
a:link {
	color: inherit;
	text-decoration: none;
	transition: 0.3s;
}
a:visited {
	color: inherit;
}
a:hover {
	color: inherit;
}
a:active {
	color: inherit;
}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	color: #000;
	font-size: 1.4rem;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt";
	background-color: #FFF;
}
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
#container {
	position: relative;
	text-align: left;
	overflow: hidden;
}
a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
@media all and (min-width: 897px) {
	body.fixed {
		overflow-y: scroll;
	}
	.sp {
		display: none !important;
	}
}
@media all and (max-width: 896px) {
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
}
/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	position: relative;
	z-index: 100;
}
#gHeader h1 {
	width: 35.1rem;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 200;
}
#gHeader h1 a {
	padding: 1.6rem 3.5rem 1.2rem 4.5rem;
	display: block;
	text-align: center;
	box-shadow: 0rem 0rem 0.4rem rgba(35, 24, 21, 0.85);
	border-radius: 0 0 3.5rem 0;
	background: #0384CC;
}
#gHeader h1 a img {
	width: 26.4rem;
}
.menu {
	width: 7.8rem;
	height: 7.6rem;
	position: absolute;
	right: 0;
	top: 0;
	color: #fff;
	background: #000;
	border-radius: 0 0 0 3.5rem;
	box-shadow: 0 0 0.4rem rgba(35, 24, 21, 0.85);
	cursor: pointer;
	transition: opacity 0.3s;
	z-index: 200;
}
.menu:hover {
	opacity: 0.7;
}
.menu span {
	width: 2.7rem;
	height: auto;
	position: absolute;
	left: 2.8rem;
	top: 1.9rem;
	box-sizing: border-box;
	border-top: 0.2rem solid #fff;
	transition: 0.3s;
}
.menu span:nth-child(2) {
	top: 2.7rem;
}
.menu span:nth-child(3) {
	top: 3.5rem;
}
.menu.on span:nth-child(1) {
	transform: translate(0, 0.8rem) rotate(45deg);
}
.menu.on span:nth-child(2) {
	opacity: 0;
}
.menu.on span:nth-child(3) {
	transform: translate(0, -0.8rem) rotate(-45deg);
}
.menu::after {
	margin-left: 0.2rem;
	width: 3.2rem;
	position: absolute;
	left: 50%;
	bottom: 2.3rem;
	font-size: 0;
	color: transparent;
	background: url(../img/index/menu_img.png) no-repeat center center / 100%;
	transform: translateX(-50%);
	content: 'MENU';
	aspect-ratio: 32/9;
}
.menuBox {
	width: 100%;
	max-width: 38rem;
	height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	color: #fff;
	background: #fff;
	overflow-y: auto;
	z-index: 100;
	transform: translateX(100%);
	transition: 0.3s;
}
.menuBox.on {
	transform: translateX(0);
}
.menuBox .comNaviList {
	margin-bottom: 0.6rem;
	padding: 4.7rem 3rem 0.4rem;
	flex-direction: column;
	background: #0384CC;
}
.menuBox .comNaviList li {
	border-bottom: 0.1rem solid #fff;
}
.menuBox .comNaviList li:last-child {
	border-bottom: none;
}
.menuBox .comNaviList li a {
	padding: 1.3rem 0 1.2rem;
	font-size: 1.6rem;
	color: #fff;
	line-height: 1.24;
}
.menuBox .comNaviList li::after {
	display: none !important;
}
.menuBox .comNaviList li a .en {
	font-size: 0.95rem;
}
.menuBox .btnList {
	margin: 0 auto;
	max-width: 40rem;
	padding: 0 2.7rem 3rem;
}
.menuBox .btnList li a {
	display: block;
}
.menuBox .btnList li img {
	width: 100%;
}
.menuBox .btnList .btn02 {
	margin-top: -13.2%;
	margin-bottom: 0.7rem;
}
.menuBox .btnList .btn03 {
	margin-bottom: 0.6rem;
}
.menuBox .btnList li a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	#gHeader h1 {
		width: 18rem;
	}
	#gHeader h1 a {
		padding: 0.8rem 1.5rem;
		border-radius: 0 0 2rem 0;
	}
	body.fixed #gHeader h1 a {
		box-shadow: none;
	}
	.menu {
		width: 4.5rem;
		height: 4.5rem;
		border-radius: 0 0 0 2rem;
	}
	.menu:hover {
		opacity: 1;
	}
	.menu span {
		width: 1.8rem;
		left: 1.6rem;
		top: 1rem;
		border-top-width: 0.1rem;
	}
	.menu span:nth-child(2) {
		top: 1.6rem;
	}
	.menu span:nth-child(3) {
		top: 2.2rem;
	}
	.menu::after {
		width: 2.4rem;
		bottom: 0.9rem;
	}
	.menu.on span:nth-child(1) {
		transform: translate(0, 0.6rem) rotate(45deg);
	}
	.menu.on span:nth-child(3) {
		transform: translate(0, -0.6rem) rotate(-45deg);
	}
	.menuBox {
		max-width: 100%;
	}
}
/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	padding: 0.1rem 2rem 0.5rem;
	color: #FFF;
	font-size: 1rem;
	background-color: #00275d;
}
#gFooter .linkList {
	position: relative;
	z-index: 10;
}
#gFooter .linkList a {
	display: block;
}
#gFooter .linkList a:hover,
#gFooter .fLink a:hover {
	opacity: 0.7;
}
#gFooter .fBox p {
	margin: 1.2rem -0.5rem 0;
	line-height: 1.75;
}
#gFooter .fBox .fLink {
	margin: -3.2rem -2.1rem 0 0;
	width: 18.4rem;
}
#gFooter .comNaviList {
	margin: 0 1rem 0 auto;
}
#gFooter .comNaviList li {
	padding: 0 1.3rem;
}
#gFooter .comNaviList li:not(:last-child)::after {
	background: #FFF;
	height: 80%;
}
#gFooter .comNaviList li a .en {
	margin-top: 0;
	color: #b0b0b0;
	letter-spacing: 0;
}
#gFooter address {
	text-align: center;
}
@media all and (min-width: 897px) {
	#gFooter .fInner {
		margin: 0 auto;
		max-width: 90rem;
	}
	#gFooter .linkList {
		margin: -2.4rem 0 4rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 1rem;
	}
	#gFooter .linkList li {
		width: 43.3rem;
	}
	#gFooter .linkList .tel {
		margin-right: -1.5rem;
		width: 44.5rem;
	}
	#gFooter .fBox {
		margin-bottom: 5.8rem;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	#gFooter .fBox .textBox {
		width: 25.8rem;
	}
}
@media all and (max-width: 896px) {
	#gFooter .linkList {
		margin: -2rem auto 3rem;
		max-width: 28rem;
		display: block;
	}
	#gFooter .linkList .tel {
		margin-right: -1%;
	}
	#gFooter .comNaviList {
		display: none;
	}
	#gFooter .fBox {
		margin-bottom: 3rem;
		text-align: center;
	}
	#gFooter .logo img {
		width: 25.8rem;
	}
}
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-YH */
/* clearfix */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
/* flex */
.flex, .flexA, .flexB, .flexC {
	display: flex;
	flex-wrap: wrap;
}
.flexA {
	justify-content: space-around;
}
.flexB {
	justify-content: space-between;
}
.flexC {
	justify-content: center;
}
/*------------------------------------------------------------
	comNaviList
------------------------------------------------------------*/
.comNaviList {
	display: flex;
	justify-content: flex-end;
}
.comNaviList li {
	padding: 0 2.2rem;
	position: relative;
}
.comNaviList li:not(:last-child)::after {
	width: 0.1rem;
	height: 2rem;
	position: absolute;
	right: 0;
	top: 50%;
	background: #000;
	transform: translateY(-50%);
	content: '';
}
.comNaviList li a {
	display: block;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.06em;
	position: relative;
	z-index: 1;
}
.comNaviList li a:hover {
	opacity: 0.7;
}
.comNaviList li a .en {
	margin-top: 0.3rem;
	display: block;
	font-size: 1rem;
}
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#gNavi {
	margin: 0 auto;
	padding: 2.3rem 0 3.5rem;
	width: 88%;
	max-width: 96.8rem;
}
#main .mainVisual {
	position: relative;
}
#main .mainVisual .mainImg img {
	width: 100%;
}
#main .mainVisual .mainImg video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  outline: none;
  background: transparent;
}
#main .mainVisual .photo {
	width: 21.636%;
	position: absolute;
	right: 3.55%;
	bottom: 4.2%;
}
#main .mainVisual .photo img {
	width: 100%;
}
#main .mainVisual .imgtext {
	width: 44.4rem;
	position: absolute;
	left: 3.5rem;
	bottom: -16.7rem;
}
#main .sideBtn {
	width: 28.9rem;
	position: absolute;
	right: 0;
	top: 10.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
#main .sideBtn a {
	padding: 1.7rem 2rem 1.6rem;
	display: block;
	position: relative;
	background: #0B308E;
	border-radius: 2rem 0 0 2rem;
}
#main .sideBtn a:hover {
	opacity: 0.7;
}
#main .sideBtn a img {
	width: 18.8rem;
}
#main .sideBtn a .image {
	position: absolute;
	z-index: 1;
}
#main .sideBtn .btn01 .image {
	width: 8.1rem;
	left: -4.9rem;
	top: -4.1rem;
}
#main .sideBtn .btn02 {
	background: #FF2200;
	z-index: 1;
}
#main .sideBtn .btn02 .image {
	width: 9.7rem;
	right: -0.6rem;
	top: -2.3rem;
}
#main .mainBox {
	background: linear-gradient(#F1F1F1, #F1F1F1) no-repeat left top / 100% 40.5rem;
}
#main .content {
	margin: 0 auto;
	padding: 0 5rem;
	max-width: 110rem;
	position: relative;
}
#main .img01 {
	width: 8.7rem;
	position: absolute;
	right: 2.8rem;
	top: -2.2rem;
}
#main .movieBox {
	margin: 0 -2rem 9.5rem -1.5rem;
	position: relative;
}
#main .movieBox .movie {
	padding: 7.24% 0 10.27%;
	position: relative;
}
#main .movieBox .movie img {
	width: 100%;
}
#main .movieBox .movie .red,
#main .movieBox .movie .green {
	position: absolute;
}
#main .movieBox .movie .red {
	right: 7.69%;
	top: 0;
	width: 17.9%;
}
#main .movieBox .movie .green {
	left: 6.23%;
	bottom: 0.2%;
	width: 14.2%;
}
#main .movieBox .movie iframe {
	width: 71.8%;
	height: auto;
	position: absolute;
	left: 1%;
	top: 14.6%;
	background: #000;
	aspect-ratio: 744/312;
	clip-path: polygon(0 0.5rem, 100% 0, 100% calc(100% - 0.7rem), 0.3rem 100%);
}
#main .movieBox .imgtext {
	margin: -7.7rem -0.3rem 0 0;
	text-align: right;
}
#main .movieBox .imgtext img {
	width: 83.1rem;
}
#main .company {
	margin-bottom: 2.5rem;
}
#main .company .image {
	position: relative;
	padding-bottom: 11.63%;
}
#main .company .image img {
	width: 100%;
}
#main .company .image .yellow,
#main .company .image .red,
#main .company .image .green,
#main .company .image .pink,
#main .company .image .blue {
	position: absolute;
	width: 15%;
}
#main .company .image .yellow {
	width: 21.7%;
left: -10.07%;
    top: -21.1%;
}
#main .company .image .red {
	width: 24.5%;
	left: 37%;
	top: 16.85%;
}
#main .company .image .imgtext01 {
	width: 19%;
	left: 28.6%;
	top: -2.7%;
	position: absolute;
}
#main .company .image .green {
	right: -1.6%;
	top: 17.5%;
	width: 14.5%;
}
#main .company .image .pink {
	left: -3%;
	bottom: 0;
	width: 15.5%;
}
#main .company .image .imgtext02 {
	position: absolute;
	width: 17.45%;
	left: 11.8%;
	bottom: 0.3%;
}
#main .company .image .blue {
	right: 0.6%;
	bottom: -0.22%;
	width: 16%;
}
#main .company .image .num {
	position: absolute;
	font-size: 11.4rem;
	font-weight: 400;
	font-family: "Bebas Neue", sans-serif;
	color: #fd8b3a;
	line-height: 1;
}
#main .company .image .num01 {
	left: 7.4%;
	top: 12.22%;
}
#main .company .image .num02 {
	left: 25.8%;
	top: 12.22%;
}
#main .company .image .num03 {
	left: 59%;
	top: 3.65%;
	font-size: 13rem;
}
#main .company .image .num04 {
	left: 12.4%;
	top: 37.6%;
	font-size: 14rem;
	letter-spacing: 0.1em;
}
#main .company .image .num05 {
	top: 57.5%;
	left: 13.2%;
	font-size: 11rem;
}
#main .company .image .num06 {
	top: 58.8%;
	left: 72.4%;
	font-size: 13rem;
}
#main .company h2 {
	width: 30%;
	position: absolute;
	left: 50%;
	top: 54.2%;
	transform: translateX(-50%);
}
#main .company .textList {
	margin: -19rem auto 0;
	width: 42%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 0;
	transform: translateX(13.57%);
}
#main .company .textList::before {
	width: 1px;
	height: 100%;
	position: absolute;
	left: 6.7rem;
	top: 0;
	background: #1970EF;
	content: '';
}
#main .company .textList::after {
	width: 9px;
	height: 9px;
	position: absolute;
	left: 6.3rem;
	top: -0.4rem;
	border-radius: 100%;
	background: #1970EF;
	content: '';
}
#main .company .textList dt {
	width: 8.7rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	line-height: 1.6;
}
#main .company .textList dd {
	width: calc(100% - 8.7rem);
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.05em;
}









/* 数字で見るサンワ：数字ロール用 */
#main .company .image .num .numRoll {
  display: inline-block;
  overflow: hidden;
  height: 1em;          /* 親のフォントサイズに合わせる */
  vertical-align: baseline;
}

#main .company .image .num .numRoll__reel {
  display: block;
  transform: translateY(0);
}

#main .company .image .num .numRoll__reel span {
  display: block;
  line-height: 1;
}

/* コロンなど、固定文字 */
#main .company .image .num .numStatic {
  display: inline-block;
}

/* 画面に入ったら CodePen っぽく回転開始 */
#main .company .image .numRolling-inview .numRoll__reel {
  animation: numRoll 1.2s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s) forwards;
}

/* 0〜9 の縦リールを下方向にスクロールして、目的の数字で止める */
@keyframes numRoll {
  0% {
    transform: translateY(0); /* 最初は 0 が見えている状態 */
  }
  100% {
    transform: translateY(calc(var(--dig, 0) * -1em));
    /* 0〜9 を縦に並べているので、dig行分だけ上にずらす */
  }
}

/* 数字ロール内の : だけ少し持ち上げる */
#main .company .image .num.num04 .numStatic{
  position: relative;
  top: -0.21em;  /* ここで上下調整。-0.05〜-0.12emくらいで微調整 */
}























#main .headLine01 {
	margin-bottom: 3.7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.3rem;
	font-size: 2.1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
#main .headLine01 .en {
	display: block;
}
#main .headLine01 .en img {
	width: auto;
	height: 5.5rem;
}




#main .network {
	background: #FCF8EA;
}
#main .network img {
	width: 100%;
}
#main .network .innerBox {
	margin: 0 auto;
	margin: 0 auto;
	max-width: 110rem;
	position: relative;
}




#main .network .ttlBox {
	position: absolute;
	left: 6.45%;
	top: 5.6%;
	z-index: 2;
}
#main .network .ttlBox .headLine01 {
	margin-bottom: 1rem;
	gap: 1.7rem;
	flex-direction: row;
	align-items: flex-end;
}
#main .network .ttlBox .headLine01 .en {
	margin-bottom: 0.4rem;
}
#main .network .ttlBox p {
	margin-left: 0.4rem;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.74;
	letter-spacing: 0.03em;
}
#main .network .mapBox {
	position: relative;
}
#main .network .photo {
	position: relative;
}
#main .network .mapBox .img {
	position: absolute;
}
#main .network .mapBox .img01 {
	width: 13.3%;
	left: 50.1%;
	top: 4%;
}
#main .network .mapBox .img02 {
	width: 31.3%;
	top: 4%;
	left: 65.9%;
}
#main .network .mapBox .img03 {
	width: 6.55%;
	left: 49.03%;
	top: 29.2%;
}
#main .network .mapBox .img04 {
	width: 6.37%;
	left: 49.23%;
	top: 28.73%;
}
#main .network .mapBox .img05 {
	width: 7.4%;
	left: 68.48%;
	top: 32.8%;
}
#main .network .mapBox .img06 {
	width: 7.35%;
	left: 3.8%;
	top: 57.6%;
}
#main .network .mapBox .img07 {
	width: 23.8%;
	left: 73.45%;
	top: 53.9%;
}
#main .network .mapBox .img08 {
	width: 7.28%;
	left: 54.12%;
	top: 6.87%;
}
#main .network .mapBox .img09 {
	width: 6.9%;
	left: 28.1%;
	top: 73.14%;
}
#main .network .mapBox .img10 {
	width: 7.7%;
	left: 56.55%;
	top: 70.7%;
}
#main .network .linkList {
	display: block;
}
#main .network .linkList li {
	width: 1.36%;
	position: absolute;
	transform: translate(-50%, -50%);
	aspect-ratio: 18/26;
	z-index: 10;
}
#main .network .linkList li a {
	width: 100%;
	height: 100%;
	display: block;
}
#main .network .linkList .link01 {
	left: 25.5%;
	top: 42%;
	z-index: 11;
}
#main .network .linkList .link02 {
	left: 28.3%;
	top: 27.6%;
}
#main .network .linkList .link03 {
	left: 30.3%;
	top: 31.8%;
}
#main .network .linkList .link04 {
	left: 32.2%;
	top: 30.4%;
}
#main .network .linkList .link05 {
	left: 33.5%;
	top: 31.5%;
}
#main .network .linkList .link06 {
	left: 35.1%;
	top: 30.4%;
}
#main .network .linkList .link07 {
	left: 42.3%;
	top: 43.7%;
}
#main .network .linkList .link08 {
	left: 23.2%;
	top: 44%;
}
#main .network .linkList .link09 {
	left: 25.5%;
	top: 41%;
}
#main .network .linkList .link10 {
	left: 32.6%;
	top: 41.5%;
}
#main .network .linkList .link11 {
	left: 26.8%;
	top: 40.8%;
}
#main .network .linkList .link12 {
	left: 26.8%;
	top: 42%;
	z-index: 11;
}
#main .network .linkList .link13 {
	left: 20.6%;
	top: 25.4%;
}
#main .network .linkList .link14 {
	left: 36.4%;
	top: 69.8%;
}
#main .network .linkList .link15 {
	left: 35.8%;
	top: 71.5%;
}
#main .network .linkList .link16 {
	left: 40.5%;
	top: 69.5%;
}
#main .network .linkList .link17 {
	left: 51.46%;
	top: 67.4%;
}
#main .network .linkList .link18 {
	left: 52.4%;
	top: 67%;
}
#main .network .linkList .link19 {
	left: 53.3%;
	top: 67.7%;
}
#main .network .linkList .link20 {
	left: 52.8%;
	top: 60.7%;
}
#main .network .linkList .link21 {
	left: 54.05%;
	top: 66.4%;
}
#main .network .linkList .link22 {
	left: 55.1%;
	top: 66.1%;
}
#main .network .linkList .link23 {
	left: 56%;
	top: 65.8%;
}
#main .network .linkList .link24 {
	left: 56.5%;
	top: 66.45%;
}
#main .network .linkList .link25 {
	left: 56.4%;
	top: 63%;
}
#main .network .linkList .link26 {
	left: 54.4%;
	top: 60.1%;
}
#main .network .linkList .link27 {
	left: 62%;
	top: 49.2%;
}
#main .network .linkList .link28 {
	left: 63%;
	top: 48.2%;
}
#main .network .linkList .link29 {
	left: 64.2%;
	top: 47.2%;
}
#main .network .tblBox {
	padding: 0.6rem;
	position: absolute;
	left: 6.9%;
	bottom: 2.8%;
	width: 63.4%;
	background: #fff;
	border-radius: 1rem;
	border: 0.4rem solid rgba(63, 86, 158, 0.97);
	z-index: 1;
}
#main .network .tblBox table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 0.1rem solid #5583CE;
}
#main .network .tblBox th,
#main .network .tblBox td {
	position: relative;
	vertical-align: middle;
	text-align: left;
	font-size: 1.1rem;
	line-height: 1.45;
	font-weight: normal;
	box-sizing: border-box;
}
#main .network .tblBox .col01 {
	width: 23.5%;
}
#main .network .tblBox .col02 {
	width: 39.6%;
}
#main .network .tblBox .col03 {
	width: 22%;
}
#main .network .tblBox thead th {
	padding: 0.9rem;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.08em;
	color: #fff;
	border-right: 0.1rem solid #AFD3F8;
	background-color: #5583CE;
}
#main .network .tblBox thead th:last-child {
	border-right: none;
}
#main .network .tblBox tbody th {
	padding: 0.5rem 1.2rem;
	font-size: 1.1rem;
	border-right: 0.1rem dotted #D9D9D9;
	background-color: #F5F5F5;
}
#main .network .tblBox tbody td {
	padding: 0.4rem 0.9rem;
	line-height: 1.83;
	letter-spacing: 0;
	border-right: 0.1rem dotted #D9D9D9;
}
#main .network .tblBox tbody td:last-child {
	border-right: none;
}
#main .network .tblBox tbody .tdStyle01 {
	text-align: center;
	letter-spacing: 0rem;
	border-bottom: 0.1rem solid #D9D9D9;
	background-color: #F4F9FD !important;
}
#main .network .tblBox tbody td .address {
	padding-right: 7.5rem;
	position: relative;
}
#main .network .tblBox tbody td .address .mapBtn {
	padding: 0.3rem 0.1rem 0.2rem;
	width: 5.4rem;
	box-sizing: border-box;
	position: absolute;
	right: 1rem;
	top: 50%;
	line-height: 1.4;
	transform: translateY(-50%);
	text-align: center;
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: 0.2rem;
	background-color: #73A1DC;
}
#main .network .tblBox tbody td .address .mapBtn:hover {
	opacity: 0.7;
}
#main .customer {
	padding: 6.5rem 0 10rem;
	background: #FFF;
}
#main .customer .customerLayout {
	margin: 0 auto;
	max-width: 130rem;
	padding: 0 5rem;
	display: grid;
	grid-template-columns: minmax(16rem, 1fr) minmax(52rem, 74rem) minmax(16rem, 1fr);
	column-gap: 4rem;
	align-items: start;
}
#main .customer .customerSide {
	display: flex;
	justify-content: center;
}
#main .customer .customerSide img {
	width: 126%;
	max-width: 34rem;
	height: auto;
}
#main .customer .customerCenter {
	text-align: center;
}
#main .customer .customerCenter .headLine01 {
	margin-bottom: 2.2rem;
	gap: 1.2rem;
}
#main .customer .customerCenter .headLine01 .en img {
	height: 7.4rem;
}
#main .customer .customerCenter .headLine01 .jp {
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
#main .customer .customerLead {
	margin: 0 auto 3.6rem;
	max-width: 68rem;
	font-size: 1.6rem;
	font-weight: bold;
	color: #1970EF;
	line-height: 2.1;
	letter-spacing: 0.05em;
}
#main .customer .customerList {
	margin: 0 auto;
	max-width: 80rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.2rem 5.4rem;
	text-align: left;
}
#main .customer .customerList__col {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
#main .customer .customerList__col li {
	position: relative;
	padding-left: 1.8rem;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	line-height: 1.55;
}
#main .customer .customerList__col li::before {
	width: 1rem;
	height: 1rem;
	position: absolute;
	left: 0;
	top: 0.6em;
	transform: translateY(-50%);
	background: #1970EF;
	content: '';
}

@media all and (max-width: 896px) {
	#main .customer {
		padding: 4.5rem 0 7rem;
	}
	#main .customer .customerLayout {
		padding: 0 2rem;
		grid-template-columns: 1fr;
		row-gap: 3rem;
	}
	#main .customer .customerSide {
		display: none;
	}
	#main .customer .customerCenter .headLine01 .en img {
		height: 6rem;
	}
	#main .customer .customerCenter .headLine01 .jp {
		font-size: 1.9rem;
	}
	#main .customer .customerLead {
		margin-bottom: 2.8rem;
		line-height: 1.9;
	}
	#main .customer .customerList {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}
	#main .customer .customerList__col {
		gap: 1.2rem;
	}
}
#main .info {
	margin-bottom: 5.3rem;
	    margin-top: 9rem;
}
#main .info .bg01,
#main .info .bg02 {
	position: absolute;
	z-index: -1;
}
#main .info .bg01 {
	width: 31.8rem;
	left: -4.4rem;
	top: -7.8rem;
}
#main .info .bg02 {
	width: 31rem;
	right: -1.9rem;
	top: -7.7rem;
}
#main .info .headLine01 {
	margin-bottom: 2.8rem;
}
#main .info .linkList {
	margin: 0 auto;
	max-width: 92.2rem;
	display: flex;
	justify-content: space-between;
	gap: 1.6rem 0;
	flex-wrap: wrap;
}
#main .info .linkList li {
	width: 49%;
}
#main .info .linkList li a {
	padding: 1.5rem 2rem 1.2rem;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	color: #1970EF;
	font-weight: bold;
	font-size: 1.5rem;
	border-radius: 1.2rem;
	background: #FFE200 url(../img/index/icon01.png) no-repeat right 2.1rem center / 0.8rem;
}
#main .info .linkList li a:hover {
	opacity: 0.7;
}
#main .news {
	padding: 10.2rem 0 12.4rem;
	position: relative;
	color: #fff;
	background: #0B308E;
}





/* NEWS 背景のSANWA NEWS! 流れる帯用 */
#main .news .newsTicker {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
	z-index: 0; /* content 背面に回す */
}

#main .news .newsTicker.row--top {
	top: 4.4rem;      /* 以前の imgtext01 と同じくらいの位置 */
}

#main .news .newsTicker.row--bottom {
	bottom: 7.4rem;   /* 以前の imgtext02 と同じくらいの位置 */
}

#main .news .newsTicker .belt {
	display: flex;                 /* 2枚を横一列に並べる → 2行になるのを防ぐ */
	align-items: center;
	animation: newsTicker-left 30s linear infinite;
}

#main .news .newsTicker.row--bottom .belt {
	animation-name: newsTicker-right;  /* 下側は逆方向に流す */
}

#main .news .newsTicker img {
	display: block;
	flex-shrink: 0;                /* はみ出しても縮まないように */
}

/* 左方向へ流れるアニメーション（上段） */
@keyframes newsTicker-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* 右方向へ流れるアニメーション（下段） */
@keyframes newsTicker-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}









#main .news .imgtext01,
#main .news .imgtext02 {
	margin-left: 33.4rem;
	position: absolute;
	width: 178.8rem;
	position: absolute;
	left: 50%;
	top: 4.4rem;
	transform: translateX(-50%);
}
#main .news .imgtext02 {
	top: auto;
	bottom: 7.4rem;
	margin-left: -6.8rem;
}
#main .news .bgImg {
	width: 24rem;
	position: absolute;
	left: -0.4rem;
	top: 5.9rem;
	z-index: 1;
}
#main .news .content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}
#main .news .ttlBox {
	margin-top: 6.9rem;
	padding: 0 2rem 0 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#main .news .ttlBox .headLine01 {
	margin-bottom: 3.4rem;
}
#main .news .ttlBox .headLine01 .en img {
	height: 6.3rem;
}
#main .news .ttlBox .moreBtn a {
	padding: 0.8rem 0.8rem 0.7rem 0.5rem;
	width: 14.5rem;
	max-width: 100%;
	display: block;
	position: relative;
	text-align: center;
	color: #fff;
	border-radius: 5rem;
	border: 0.1rem solid #1970EF;
	background: url(../img/index/icon02.png) no-repeat right 1.2rem top 55% / 1.2rem;
}
#main .news .ttlBox .moreBtn a:hover {
	opacity: 0.7;
}
#main .news .listBox {
	margin-right: -0.1rem;
	padding: 4.5rem 2.9rem 3.7rem;
	width: 67%;
	color: #000;
	background: #fff;
	border-radius: 2.1rem;
}
#main .news .listBox ul {
	display: flex;
	flex-direction: column;
	gap: 3.8rem 0;
}
#main .news .listBox ul li {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
#main .news .listBox ul li .post-img {
	width: 15.2%;
	border-radius: 100%;
	overflow: hidden;
	aspect-ratio: 1;
}
#main .news .listBox ul li .post-img img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1;
}
#main .news .listBox ul li .post-date {
	margin-left: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	flex: 1;
}
#main .news .listBox ul li .post-date div {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1rem;
}
#main .news .listBox ul li .post-date time {
	display: block;
	font-weight: bold;
	font-size: 1.4rem;
}
#main .news .listBox ul li .post-date .tag {
	padding: 0.2rem 0.3rem 0.3rem;
	width: 9.4rem;
	text-align: center;
	color: #fff;
	background: #2E4FA1;
}
#main .news .listBox ul li .post-date .post-title {
	padding: 2.9rem 2rem;
	font-size: 1.4rem;
	border-radius: 1.7rem;
	background: #F3F3F3;
}
#main .news .listBox ul li .clearfix::after {
	display: none !important;
}
#main .news .listBox ul li a:hover {
	opacity: 0.7;
}
#main .sns {
	padding: 6rem 0 6rem;  /* 下側の余白も増やす（6rem 前後でOK） */
	position: relative;
	/* 背景画像を少し上にずらして、円の下端を下に伸ばす */
	background: url(../img/index/sns_bg.png) no-repeat center -6rem / 140rem;
}




/* PCだけSNSブロックを拡大して、下に余白を作る */
@media all and (min-width: 897px) {

  /* SNSカードを拡大 */
  #main .sns .innerBox {
    transform: scale(1.15);       /* 大きさは今のまま */
    transform-origin: center top;
  }

  /* 赤背景ごと下に余白を増やす（＝赤を黄色まで届かせる） */
  #main .sns {
    padding-bottom: 12rem;        /* 10〜14rem で好みに調整 */
  }

  /* RECRUIT側には margin を付けない */
  #main .recruit {
    margin-top: 0;
  }
}





#main .sns .img01 {
	position: absolute;
	left: -0.6rem;
	top: 0;
	width: 34rem;
}
#main .sns h2 {
	margin: 0 0 4.4rem 7.4rem;
	text-align: center;
	position: relative;
	z-index: 2;
}
#main .sns h2 img {
	width: 50.5rem;
}
#main .sns .img02 {
	width: 29.6rem;
	position: absolute;
	right: 1.6rem;
	top: -8.7rem;
}
#main .sns .innerBox {
	padding: 4.1rem 6rem;
	position: relative;
	border-radius: 2.4rem;
	background: rgba(255, 255, 255, 0.86);
	z-index: 1;
}
#main .sns .snsList {
	margin-bottom: 2.2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 3.5rem 1.25%;
}
#main .sns .snsList li {
	width: 23.1%;
	width: 19%;
}
#main .sns .snsList li a {
	display: block;
}
#main .sns .snsList li a:hover {
	opacity: 0.7;
}
#main .sns .btn {
	margin: 0 auto;
	width: 28.5rem;
}
#main .sns .btn a {
	display: block;
}
#main .sns .btn a:hover {
	opacity: 0.7;
}
#main .recruit {
	padding: 2.2rem 1rem 3.8rem;
	text-align: center;
	background: url(../img/index/recruit_bg.jpg) no-repeat center center / cover;
}
#main .recruit h2 img {
	max-width: 106.5rem;
	width: 100%;
}
#main .recruit .image {
	margin: -8rem 0 1rem;
}
#main .recruit .image img {
	max-width: 95rem;
	width: 100%;
}
#main .recruit .linkList {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
}
#main .recruit .linkList a {
	padding: 1.7rem 2rem;
	display: block;
	position: relative;
	width: 27.3rem;
	color: #FFF;
	font-size: 3.12rem;
	line-height: 1;
	font-weight: bold;
	text-align: left;
	background: #0b308e url(../img/index/arrow.png) no-repeat right 1.7rem center / 9.9rem;
	border-radius: 1rem;
}
#main .recruit .linkList .new a {
	background-color: #ff2200;
}
#main .recruit .linkList a:hover {
	opacity: 0.7;
}
#main .recruit .linkList a::before {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	right: 0.5rem;
	bottom: 0.5rem;
	content: '';
	border: 0.1rem solid #FFF;
	border-radius: 0.8rem;
}
#main .recruit .linkList small {
	margin-bottom: 0.2rem;
	display: block;
	font-size: 1.83rem;
}
@media all and (max-width: 896px) {
	#gNavi {
		display: none;
	}
	#main .mainVisual .mainImg img {
		aspect-ratio: 1;
		object-fit: cover;
	}
	#main .mainVisual .photo {
		width: 30%;
	}
	#main .mainVisual .imgtext {
		width: 45%;
		max-width: 30rem;
		left: 2rem;
		bottom: -6.5rem;
	}
	#main .sideBtn {
		display: none;
	}
	#main .mainBox {
		padding-top: 5rem;
		background-size: 100% 40vw;
	}
	#main .content {
		padding: 0 2rem;
		max-width: initial !important;
		position: relative;
	}
	#main .img01 {
		width: 5rem;
		right: 1rem;
		top: -4.4rem;
	}
	#main .movieBox {
		margin: 0 -1rem 12.5vw;
	}
	#main .movieBox .imgtext {
		margin: -6.5% 0 0 auto;
		width: 79%;
	}
	#main .movieBox .movie iframe {
		clip-path: polygon(0 0.2rem, 100% 0, 100% calc(100% - 0.3rem), 0.1rem 100%);
	}
	#main .company {
		margin-bottom: 5rem;
	}
	#main .company .image {
		margin: 0 auto;
		max-width: 89.34vw;
	}
	#main .company .image .num {
		font-size: 8.533vw;
	}
	#main .company .image .num01 {
		left: 7.8%;
		top: 15%;
	}
	#main .company .image .num02 {
		left: 26.2%;
		top: 15%;
	}
	#main .company .image .num03 {
		left: 60%;
		top: 5%;
		font-size: 10.133vw;
	}
	#main .company .image .num04 {
		left: 13.5%;
		top: 40%;
		font-size: 10.133vw;
	}
	#main .company .image .num05 {
		top: 58.5%;
		left: 14%;
		font-size: 8vw;
	}
	#main .company .image .num06 {
		top: 60%;
		left: 72.5%;
		font-size: 10.667vw;
	}
	#main .company h2 {
		width: 30%;
		top: 62%;
	}
	#main .company .textList {
		margin: 2rem auto 0;
		padding: 0 1.5rem;
		width: auto;
		max-width: 45rem;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 1.2rem 0;
		transform: none;
	}
	#main .company .textList::before {
		left: 8.4rem;
	}
	#main .company .textList::after {
		left: 8rem;
	}
	#main .headLine01 {
		margin-bottom: 1.5rem;
		gap: 1rem;
		font-size: 1.8rem;
	}
	#main .headLine01 .en img {
		height: 3.6rem;
	}
	#main .network {
		padding: 4rem 0;
	}
	#main .network .ttlBox {
		margin: 0 2rem 2rem;
		position: relative;
		left: auto;
		top: auto;
	}
	#main .network .ttlBox .headLine01 {
		margin-bottom: 1rem;
		gap: 1rem;
		flex-direction: column;
		align-items: center;
	}
	#main .network .ttlBox .headLine01 .en {
		margin-bottom: 0;
	}
	#main .network .ttlBox p {
		margin-left: 0;
	}
	#main .network .linkList {
		display: none;
	}
	#main .network .tblBox {
		display: none;
	}
	#main .network .btn {
		width: 26rem;
		margin: 3rem auto 0;
	}
	#main .network .btn a {
		padding: 1.3rem;
		display: block;
		text-align: center;
		color: #fff;
		background: #1970EF url(../img/index/icon02.png) no-repeat right 1.5rem center / 1.4rem;
		border-radius: 1rem;
	}
	#main .customer {
		padding-bottom: 6rem;
	}
	#main .customer .photoBox {
		display: flex;
		justify-content: center;
		gap: 3%;
	}
	#main .customer .img01,
	#main .customer .img02 {
		position: relative;
		text-align: center;
	}
	#main .customer .img01 {
		width: 42%;
		left: auto;
		top: auto;
	}
	#main .customer .img02 {
		width: 50%;
		right: auto;
		top: auto;
	}
	#main .info {
		margin-bottom: 5.3rem;
		padding-top: 3rem;
	}
	#main .info .bg01 {
		width: 12rem;
	}
	#main .info .bg02 {
		width: 12rem;
	}
	#main .info .headLine01 {
		margin-bottom: 2rem;
	}
	#main .info .linkList li a {
		padding: 1.2rem 3rem 1.2rem 1.5rem;
		font-size: 1.4rem;
		border-radius: 0.8rem;
		background-position: right 1.5rem center;
	}
	#main .news .imgtext01,
	#main .news .imgtext02 {
		margin-left: 0;
		width: 89.4rem;
		position: absolute;
		top: 3rem;
	}
	#main .news .imgtext02 {
		top: auto;
		bottom: 3rem;
	}
	#main .news .bgImg {
		width: 12rem;
	}
	#main .news .content {
		display: block;
	}
	#main .news .ttlBox {
		margin: 0 0 3rem;
		padding: 0;
	}
	#main .news .ttlBox .headLine01 {
		margin-bottom: 1.5rem;
	}
	#main .news .ttlBox .headLine01 .en img {
		height: 4rem;
	}
	#main .news .listBox {
		margin: 0;
		padding: 3rem 2rem;
		width: auto;
		border-radius: 1.5rem;
	}
	#main .news .listBox ul {
		gap: 2.5rem 0;
	}
	#main .news .listBox ul li .post-img {
		width: 20%;
		max-width: 9rem;
	}
	#main .news .listBox ul li .post-date {
		margin-left: 1.5rem;
	}
	#main .news .listBox ul li .post-date .post-title {
		padding: 1.5rem;
		border-radius: 1rem;
	}
	#main .sns {
		padding: 8rem 0 5rem;
		background-size: 80rem auto;
		background-position: center -1rem;  /* ←この1行を追加 */
	}
	#main .sns .img01 {
		width: 15rem;
	}
	#main .sns h2 {
		margin: 0 0 7rem -10rem;
	}
	#main .sns h2 img {
		width: 25rem;
	}
	#main .sns .img02 {
		width: 15rem;
		right: 0.5rem;
		top: 0rem;
	}
	#main .sns .innerBox {
		padding: 2rem;
		border-radius: 1.5rem;
	}
	#main .sns .snsList {
		justify-content: space-between;
		gap: 2.5rem 0;
	}
	#main .sns .snsList li {
		width: 48%;
	}
	#main .sns .btn {
		max-width: 100%;
	}
	#main .recruit .image {
		margin: -5vw 0 1rem;
	}
	#main .recruit .linkList {
		gap: 1rem;
	}
	#main .recruit .linkList a {
		padding: 1.5rem;
		width: 15rem;
		font-size: 2rem;
		background-size: 3rem;
		background-position: right 1rem center;
	}
	#main .recruit .linkList small {
		font-size: 1.3rem;
	}
}













/* =========================
   Truck Stage（奥から→正面→横から回り込み）
   ========================= */

:root{
  /* 荷台の“動画窓”の位置・サイズ（%） */
    --truck-box-left: 9.4%;
    --truck-box-top: 21.9%;
    --truck-box-w: 56.9%;
  --truck-box-h:    46.0%;

  /* アニメ時間 */
  --truck-t-front: 2.4s;  /* 正面から手前に走ってくる時間 */
  --truck-t-drive: 1.6s;  /* 左から走ってくる時間 */
  --truck-t-brake: .25s;  /* ブレーキ演出 */
  --truck-t-wait:  .25s;  /* 停車→開扉までの待ち */
  --truck-t-box-in: .25s; /* 荷台をふわっと出す時間 */
  --truck-t-open:  .9s;   /* ドアを開ける時間 */

  /* 停止位置（+で右へ）／開始位置（より左から入れるほど-を大きく） */
  --truck-end-x: 62%;
  --truck-start-x: -110%;

  /* 切れ防止の縮尺（必要に応じ 0.85〜1.00） */
  --truck-scale: 0.75;

  /* ドアの見た目（画像＆色） */
  --door-img: url("../img/index/door-panel.png"); /* ここを自分の画像に */
  --door-img-size: cover;      /* cover or contain */
  --door-img-pos: center;      /* center / left top など */
  --door-bg-color: #fff;       /* 背景色。透過PNGなら transparent でもOK */

  /* ドア開始位置（下からの出し量） */
  --door-start-y: 3%;
}

/* ステージ本体 */
.truckStage{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top: 6rem;
  margin-bottom: -1rem;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.truckStage img,
.truckStage iframe{
  max-width: none;
}

/* スクロールで入るまでトラックアニメを停止（index.js が .is-waitScroll / .is-start を付与） */
.truckStage.is-waitScroll .truckStage__truckFront,
.truckStage.is-waitScroll .truckStage__truck{
  animation-play-state: paused;
}
.truckStage.is-waitScroll.is-start .truckStage__truckFront,
.truckStage.is-waitScroll.is-start .truckStage__truck{
  animation-play-state: running;
}

/* パラパラ用オーバーレイ（③〜⑨） */
.truckStage__overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 75%; /* story_03〜story_09を少し下へ */
  opacity: 0;
  transition: none;         /* フェードイン無し */
  z-index: 6;           /* トラックより前面 */
  pointer-events: none;
}
.truckStage__overlay.is-show{ opacity: 1; }


/* 正面トラック（①奥から手前へ） */
.truckStage__truckFront{
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%) translateY(40%) scale(.4);
  width: auto;
  height: 100%;
  z-index: 5;
  pointer-events: none;

  animation:
    truck-front var(--truck-t-front) ease-out forwards,
    truck-front-out .5s ease-in forwards var(--truck-t-front);
}

/* 横からのトラック（②左から右へ走行→停止） */
.truckStage__truck{
  position: absolute;
  bottom: -3%;
  left: 0;
  width: auto;
  height: 100%;
  transform: translateX(var(--truck-start-x)) scale(var(--truck-scale));
  z-index: 4;
  pointer-events: none;

  /* truck.png → truck_base.png の差し替えは“即時”（フェード無し） */
  opacity: 1;
  transition: none;

  animation:
    truck-drive var(--truck-t-drive) ease-out forwards var(--truck-t-front),
    truck-brake var(--truck-t-brake) ease-out forwards calc(var(--truck-t-front) + var(--truck-t-drive));
}

/* 荷台ボックス（動画をはめ込む枠） */
.truckStage__box{
  position: absolute;
  left: var(--truck-box-left);
  top:  var(--truck-box-top);
  width: var(--truck-box-w);
  height: var(--truck-box-h);
  transform-origin: center;
  opacity: 0;
  transform: scale(.92);
  z-index: 3;

  transition: opacity var(--truck-t-box-in) ease-out, transform var(--truck-t-box-in) ease-out;
}

.truckStage.is-videoReady .truckStage__box{
  opacity: 1;
  transform: scale(1);
}

/* ドア（下から上にスライドして開く） */
.truckStage__door{
  /* ドア開閉アニメーションは使用しない */
  display: none;
  position: absolute;
  inset: 0;
  transform: translateY(var(--door-start-y));
  z-index: 2;
  overflow: visible;

  will-change: transform;
}


/* ドアの見た目 */
.truckStage__door::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  
  left: -1.4%; 
right: -1.4%;



  background-image: var(--door-img);
  background-size: var(--door-img-size);
  background-position: var(--door-img-pos);
  background-repeat: no-repeat;
  background-color: var(--door-bg-color);
}

/* 動画（ドアが開いたら index.js で .is-play を付与して表示） */
.truckStage__videoWrap{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.truckStage__video{
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border: none;
  display: none;
}

.truckStage__video.is-play{
  display: block;
}

/* keyframes */
@keyframes truck-front{
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(40%) scale(.4);
  }
  25%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    /* ↓ ここの translateY(5%) をやめて、正面でピタッと止める */
    transform: translateX(-50%) scale(1);
    /* もし気持ち下げたい場合は translateY(0%) を足してOK
       例）transform: translateX(-50%) translateY(0%) scale(1); */
  }
}

@keyframes truck-front-out{
  0%{
    opacity: 1;
    transform: translateX(-50%) translateY(0%) scale(1); /* ← 正面のまま */
  }
  100%{
    opacity: 0;
    transform: translateX(-50%) translateY(0%) scale(1); /* ← 位置も大きさも同じ */
  }
}

@keyframes truck-drive{
  0%{
    transform: translateX(var(--truck-start-x)) scale(var(--truck-scale));
  }
  100%{
    transform: translateX(var(--truck-end-x)) scale(var(--truck-scale));
  }
}

@keyframes truck-brake{
  0%{
    transform: translateX(var(--truck-end-x)) scale(var(--truck-scale));
  }
  100%{
    transform: translateX(var(--truck-end-x)) scale(var(--truck-scale));
  }
}


@keyframes truck-box-in{
  0%{
    opacity: 0;
    transform: scale(.92);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes truck-door{
  0%{
    transform: translateY(var(--door-start-y));
  }
  100%{
    transform: translateY(-102%);
  }
}

/* 省エネモード：アニメーションをカットして静止＋動画だけ表示 */
@media (prefers-reduced-motion: reduce){
  .truckStage__truckFront,
  .truckStage__truck,
  .truckStage__box,
  .truckStage__door{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .truckStage__video{
    display: block;
  }
}









/* ====== 重なり崩れ対策：movieBox 内だけで z-index を完結 ====== */

/* 以前の上書きを無効化（ヒーロー直下は触らない） */
#main .mainVisual .imgtext { z-index: auto; }

/* ステージとキャッチコピーの“土台”を分ける */
#main .movieBox { position: relative; }

/* トラック一式は下層 */
#main .movieBox .truckStage {
  position: relative;
  z-index: 0;   /* 土台レベル */
}

/* 画像のキャッチコピー（MISSION of SANWA の帯）を前面へ */
#main .movieBox .imgtext {
  position: relative;
  z-index: 2;   /* truckStageより上 */
}

/* truckStage 内部の前後関係：トラック < 動画 < ドア の順に前面 */



.truckStage__truck{
  position: absolute;
  inset: auto auto 4% -70%;
  width: 120%;
  max-width: none;
  transform: translateX(var(--truck-start-x)) scale(var(--truck-scale));
  transform-origin: left bottom;
  animation:
    /* 正面フェーズが終わってから横移動開始 */
    truck-drive var(--truck-t-drive) cubic-bezier(.18,.8,.18,1) var(--truck-t-front) forwards,
    /* 「正面＋横移動」が終わったらブレーキ */
    truck-brake var(--truck-t-brake) ease-out calc(var(--truck-t-front) + var(--truck-t-drive)) forwards;
    
      z-index: 0;   /* 一番下：トラック本体 */
}



.truckStage__box{
  position: absolute;
  z-index: 1;   /* トラックの上に「荷台枠」 */
}

.truckStage__videoWrap{
  position: absolute;
  z-index: 2;   /* さらにその上に YouTube 動画 */
}

.truckStage__door{
  position: absolute;
  z-index: 3;   /* 一番上：開閉するドア */
}


/* ヒーローのテキスト画像（mv_img03.png）をトラックより最前面に */
#main .mainVisual { position: relative; z-index: 5; }
#main .mainBox    { position: relative; z-index: 1; }
#main .mainVisual .imgtext {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}



/* ===== スクロールで左上からフェードイン ===== */
.revealTL{
  --rv-x: -8vw;           /* 水平の入り量（左へ） 調整可 */
  --rv-y: -8vw;           /* 垂直の入り量（上へ）   調整可 */
  --rv-rot: -5deg;        /* ちょい傾き（不要なら0deg） */
  --rv-dur: .9s;          /* アニメ時間 */
  --rv-delay: 0s;         /* 遅延（必要なら .15s など） */

  opacity: 0;
  transform: translate(var(--rv-x), var(--rv-y)) rotate(var(--rv-rot)) scale(.96);
  transition:
    transform var(--rv-dur) cubic-bezier(.2,.65,.2,1),
    opacity   calc(var(--rv-dur) * .7) ease-out;
  will-change: transform, opacity;
}
.revealTL.inview{
  opacity: 1;
  transform: translate(0,0) rotate(0) scale(1);
}

/* 端末の省エネ設定に配慮 */
@media (prefers-reduced-motion: reduce){
  .revealTL{ opacity:1; transform:none; transition:none; }
}
/* ===== 右上からフェードイン（Top-Right） ===== */
.revealTR{
  --rv-x:  8vw;     /* 右へ入る量（調整可） */
  --rv-y: -8vw;     /* 上から入る量（調整可） */
  --rv-rot: 5deg;   /* ちょい傾き（不要なら0deg） */
  --rv-dur: .9s;    /* アニメ時間 */
  --rv-delay: 0s;   /* 遅延 */

  opacity: 0;
  transform: translate(var(--rv-x), var(--rv-y)) rotate(var(--rv-rot)) scale(.96);
  transition:
    transform var(--rv-dur) cubic-bezier(.2,.65,.2,1),
    opacity   calc(var(--rv-dur) * .7) ease-out var(--rv-delay);
  will-change: transform, opacity;
}
.revealTR.inview{
  opacity: 1;
  transform: translate(0,0) rotate(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .revealTR{ opacity:1; transform:none; transition:none; }
}
/* ===== 右側から歩いてくる（軽い上下バウンス＋傾き） ===== */
.walkInR{
  /* 調整用 */
  --walk-dist: 22vw;   /* 入ってくる距離 */
  --walk-dur:  1.6s;   /* 所要時間 */
  --walk-bob:  8px;    /* 上下バウンス量 */
  --walk-rot:  4deg;   /* 最大の傾き */
  --walk-delay: 0s;    /* 任意の遅延 */

  opacity: 0;
  will-change: transform, opacity;
}
.walkInR.inview{
  animation: walk-move var(--walk-dur) cubic-bezier(.2,.65,.2,1) var(--walk-delay) forwards;
}

/* 位置＋バウンス＋傾きを1本のキーフレームで制御（レイアウトは崩さない） */
@keyframes walk-move{
  0%   { opacity:0; transform: translateX(var(--walk-dist)) translateY(0)            rotate(var(--walk-rot)); }
  15%  { opacity:1; transform: translateX(calc(var(--walk-dist) * .78)) translateY(calc(-1 * var(--walk-bob))) rotate(calc(var(--walk-rot) * .5)); }
  30%  {           transform: translateX(calc(var(--walk-dist) * .56)) translateY(0)                         rotate(calc(var(--walk-rot) * -0.4)); }
  45%  {           transform: translateX(calc(var(--walk-dist) * .36)) translateY(calc(-1 * var(--walk-bob))) rotate(calc(var(--walk-rot) * .3)); }
  60%  {           transform: translateX(calc(var(--walk-dist) * .20)) translateY(0)                         rotate(calc(var(--walk-rot) * -0.2)); }
  80%  {           transform: translateX(calc(var(--walk-dist) * .08)) translateY(calc(-1 * var(--walk-bob)/2)) rotate(calc(var(--walk-rot) * .1)); }
  100% { opacity:1; transform: translateX(0) translateY(0) rotate(0); }
}



/* walk → そのまま足を支点にスway（連結版） */
.walkInR.swayAfter{
  /* 支点と揺れ量（必要なら微調整） */
  --pivot-x: 50%;
  --pivot-y: 96%;   /* 95〜99%で足元に合わせて微調整 */
  --sway-deg: 3.5deg;
  --sway-time: 1.8s;
  --sway-delay: .15s;  /* 着地後に少し間をおく */
  transform-origin: var(--pivot-x) var(--pivot-y);
}

/* 既存 .walkInR.inview を上書き：最初にwalk、続けてswayを開始 */
.walkInR.swayAfter.inview{
  animation:
    walk-move var(--walk-dur) cubic-bezier(.2,.65,.2,1) var(--walk-delay) both,
    sway-pivot var(--sway-time) ease-in-out calc(var(--walk-dur) + var(--sway-delay)) infinite alternate;
}







@media (prefers-reduced-motion: reduce){
  .walkInR{ opacity:1; animation:none !important; transform:none !important; }
}
/* ==== 足を軸にゆっくり揺れる ==== */
.swayPivot{
  /* 調整用 ------------- */
  --pivot-x: 50%;   /* 支点X（中央=50%） */
  --pivot-y: 96%;   /* 支点Y（足元付近。画像により95〜99%で微調整） */
  --sway-deg: 3.5deg;  /* 揺れ角度（±） */
  --sway-time: 1.6s;   /* 1往復の時間 */
  --sway-delay: .2s;   /* 開始遅延（任意） */
  /* -------------------- */

  transform-origin: var(--pivot-x) var(--pivot-y);
  opacity: 0;  /* 画面に入るまでは非表示気味に */
  will-change: transform, opacity;
}

.swayPivot.inview{
  opacity: 1;
  animation: sway-pivot var(--sway-time) ease-in-out var(--sway-delay) infinite alternate;
}

@keyframes sway-pivot{
  0%   { transform: rotate(calc(-1 * var(--sway-deg))); }
  100% { transform: rotate(var(--sway-deg)); }
}

/* お好みで“呼吸感”を少しだけ入れたい場合は下を有効化
@keyframes sway-pivot{
  0%   { transform: rotate(calc(-1 * var(--sway-deg))) translateY(0); }
  100% { transform: rotate(var(--sway-deg)) translateY(-1px); }
}
*/

@media (prefers-reduced-motion: reduce){
  .swayPivot{
    opacity: 1;
    animation: none !important;
    transform: none !important;
  }
}


/* ========= 回転しながら大サイズで着地 → 少しだけ拡大して戻る（単一キーフレーム） ========= */
.spinInPulse{
  /* 調整用 */
  --spin-start-scale: 1.9;   /* 入ってくる時の大きさ */
  --spin-rot: 540deg;        /* 着地までの回転量（360/540/720 など） */
  --land-time: .9s;          /* 0%→60% の着地までの目安時間 */
  --pulse-scale: 1.06;       /* 脈動の拡大量 */
  --total-time: 1.6s;        /* 全体の尺（=着地＋脈動） */

  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* 念のため、他のtransition干渉を回避 */
  transition: none !important;
}

.spinInPulse.inview{
  animation: spinInWithPulse var(--total-time) cubic-bezier(.22,.85,.25,1) both;
}

/* 0〜60%：拡大＋回転で入場→着地
   60〜75%：軽く拡大（“トン”）
   75〜100%：元のサイズに戻る */
@keyframes spinInWithPulse{
  0%{
    opacity: 0;
    transform: scale(var(--spin-start-scale)) rotate(calc(-1 * var(--spin-rot)));
    filter: blur(.2px);
  }
  60%{ /* ← おおよそ --land-time に相当 */
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
  }
  75%{
    transform: scale(var(--pulse-scale));
  }
  100%{
    transform: scale(1);
  }
}

/* 省エネ設定ではアニメオフ */
@media (prefers-reduced-motion: reduce){
  .spinInPulse{ opacity:1; animation:none !important; transform:none !important; }
}


/* 着地後に“トン”と少しだけ拡大して元に戻る */
@keyframes settlePulse{
  0%   { transform: scale(1); }
  50%  { transform: scale(var(--pulse-scale)); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .swayPivot{
    opacity: 1;
    animation: none !important;
    transform: none !important;
  }
}
/* 追加：inviewが付いたら常に見える */
.spinInPulse.inview{
  animation: spinInWithPulse var(--total-time) cubic-bezier(.22,.85,.25,1) both;
  opacity: 1;                 /* ← これを追加 */
}

/* 修正：最終フレームでも不透明にしておく */
@keyframes spinInWithPulse{
  0%{
    opacity: 0;
    transform: scale(var(--spin-start-scale)) rotate(calc(-1 * var(--spin-rot)));
    filter: blur(.2px);
  }
  60%{
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
  }
  75%{
    transform: scale(var(--pulse-scale));
  }
  100%{
    transform: scale(1);
    opacity: 1;               /* ← これを追加 */
  }
}
/* 調整用の変数（必要なら値を好みで） */
.spinInPulse{
  --spin-start-scale: 1.9;
  --spin-rot: 540deg;
  --spin-time: .9s;        /* 回転しながら着地 */
  --settle-wait: .12s;     /* 着地後の間 */
  --pulse-scale: 1.06;     /* “トン”の拡大量 */
  --pulse-time: .45s;      /* “トン”の時間 */
  --idle-time: 1s;         /* その後の周期（約1秒） */
  --total-time: calc(var(--spin-time) + var(--settle-wait) + var(--pulse-time));
}

/* 1) 最初の着地アニメ → 2) 以後は1秒周期で軽く拡大縮小をループ */
.spinInPulse.inview{
  opacity: 1;
  animation:
    spinInWithPulse var(--total-time) cubic-bezier(.22,.85,.25,1) both,
    idlePulse       var(--idle-time)   ease-in-out var(--total-time) infinite;
}

/* 着地→“トン”まで（以前の定義を使ってOK。なければ下を置いてください） */
@keyframes spinInWithPulse{
  0%{
    opacity: 0;
    transform: scale(var(--spin-start-scale)) rotate(calc(-1 * var(--spin-rot)));
    filter: blur(.2px);
  }
  60%{
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
  }
  75%{ transform: scale(var(--pulse-scale)); }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

/* 以後の「1秒ごとに少し大きく」 */
@keyframes idlePulse{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); } /* 強めなら 1.06 などに */
  100% { transform: scale(1); }
}

/* 拡大から着地 → 2秒ごとに少し拡大して戻る */
.scaleInPulse2s{
  /* 調整用 */
  --in-start: 1.35;                          /* 入りの大きさ */
  --in-time: .9s;                             /* 着地までの時間 */
  --in-ease: cubic-bezier(.22,.85,.25,1);     /* 着地イージング */
  --pulse-scale: 1.05;                        /* 鼓動の拡大量 */
  --pulse-time: 2s;                           /* 鼓動の周期（=2秒） */
  --pulse-wait: .10s;                         /* 着地→鼓動開始までの待ち */

  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(var(--in-start));
  will-change: transform, opacity;
}
.scaleInPulse2s.inview{
  animation:
    scaleIn   var(--in-time) var(--in-ease) both,
    pulse2s   var(--pulse-time) ease-in-out calc(var(--in-time) + var(--pulse-wait)) infinite;
}

@keyframes scaleIn{
  from{ opacity:0; transform: scale(var(--in-start)); filter: blur(.2px); }
  to  { opacity:1; transform: scale(1);              filter: none; }
}
@keyframes pulse2s{
  0%   { transform: scale(1); }
  50%  { transform: scale(var(--pulse-scale)); }
  100% { transform: scale(1); }
}

/* 省エネ配慮 */
@media (prefers-reduced-motion: reduce){
  .scaleInPulse2s{ opacity:1; animation:none !important; transform:none !important; }
}
/* ==== 下を起点に横ゆらゆら（支点=下端） ==== */
.swaySidePivot{
  /* 調整用 */
  --pivot-x: 50%;    /* 支点X（中央=50%） */
  --pivot-y: 98%;    /* 支点Y（ほぼ下端。96〜100%で微調整） */
  --sway-deg: 4deg;  /* 揺れ角度（±） */
  --sway-time: 2s;   /* 1往復の時間 */
  --sway-delay: .1s; /* 開始遅延 */

  opacity: 0; 
  transform-origin: var(--pivot-x) var(--pivot-y);
  will-change: transform, opacity;
}
.swaySidePivot.inview{
  opacity: 1;
  animation: sway-side var(--sway-time) ease-in-out var(--sway-delay) infinite alternate;
}
/* 左右にスイング（回転で上側が左右に揺れる） */
@keyframes sway-side{
  0%   { transform: rotate(calc(-1 * var(--sway-deg))); }
  100% { transform: rotate(var(--sway-deg)); }
}

@media (prefers-reduced-motion: reduce){
  .swaySidePivot{ opacity:1; animation:none !important; transform:none !important; }
}
/* ==== 回転で登場 → 1秒ごとに軽く拡大（無限） ==== */
.spinInPulseLoop{
  /* 調整用 */
  --spin-start-scale: 1.9;                 /* 登場時の大きさ */
  --spin-rot: 540deg;                      /* 回転量 360/540/720 など */
  --spin-time: .9s;                        /* 回転着地まで */
  --spin-ease: cubic-bezier(.22,.85,.25,1);
  --pulse-scale: 1.06;                     /* 鼓動の拡大量 */
  --pulse-time: 2s;                        /* 鼓動周期（=2秒間隔） */

  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.spinInPulseLoop.inview{
  /* 回転で着地 → すぐ鼓動ループ開始 */
  animation:
    spinInLoop var(--spin-time) var(--spin-ease) both,
    heartbeat var(--pulse-time) ease-in-out var(--spin-time) infinite;
}

@keyframes spinInLoop{
  from{
    opacity: 0;
    transform: scale(var(--spin-start-scale)) rotate(calc(-1 * var(--spin-rot)));
    filter: blur(.2px);
  }
  to{
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
  }
}

/* 1秒ごとに “ポン” と少しだけ拡大して戻る */
@keyframes heartbeat{
  0%   { transform: scale(1); }
  50%  { transform: scale(var(--pulse-scale)); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .spinInPulseLoop{ opacity:1; animation:none !important; transform:none !important; }
}
/* ==== 右上から入場 → 少し待つ → 2秒で拡大しながら消える → 右上から再登場（ループ） ==== */
.flyTRLoop{
  /* 調整用 */
  --fly-dx:  18vw;      /* 右からの入り距離 */
  --fly-dy: -18vw;      /* 上からの入り距離 */
  --scale-enter: .94;   /* 入場開始時の縮尺 */
  --scale-burst: 1.28;  /* フェードアウト時の最大縮尺 */
  --loop-time: 4s;      /* 1サイクルの長さ（ここを変えると全体が伸縮） */

  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* 20%で入場完了 → 45%まで静止 → 45→85%の40%分=2秒で拡大しつつ消える */
.flyTRLoop.inview{
  animation: fly-tr-loop var(--loop-time) linear infinite;
}

@keyframes fly-tr-loop{
  0%   { opacity:0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(var(--scale-enter)); }
  10%  { opacity:1; } /* 少し早めに見え始める */
  20%  { opacity:1; transform: translate(0,0) scale(1); }     /* 所定位置に着地 */
  45%  { opacity:1; transform: translate(0,0) scale(1); }     /* 少し静止 */
  85%  { opacity:0; transform: translate(0,0) scale(var(--scale-burst)); } /* 2秒で拡大しつつ消える */
  86%  { opacity:0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(var(--scale-burst)); } /* 右上へリセット */
  100% { opacity:0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(var(--scale-enter)); }  /* 次サイクルへ */
}

@media (prefers-reduced-motion: reduce){
  .flyTRLoop{ opacity:1; animation:none !important; transform:none !important; }
}
/* ==== 右上→入場→2秒静止→回転拡大でフェードアウト→再登場（ループ） ==== */
.flyTRSpinLoop{
  --fly-dx:  18vw;
  --fly-dy: -18vw;
  --scale-enter: .94;
  --scale-burst: 1.35;
  --spin-rot: 3turn;              /* ← フォールバック付き回転量 */
  --loop-time: 6s;

  opacity: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.flyTRSpinLoop.inview{
  /* ほかのアニメ指定に負けないよう both を付与 */
  animation: fly-tr-spin-loop var(--loop-time) linear infinite both;
}

/* 1本のキーフレームで translate/scale/rotate を同時指定（上書き回避） */
@keyframes fly-tr-spin-loop{
  /* 入場（0–20%） */
  0%   { opacity:0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(var(--scale-enter)) rotate(0turn); filter:none; }
  10%  { opacity:1; }
  20%  { opacity:1; transform: translate(0,0) scale(1) rotate(0turn); }

  /* 静止（20–60%）…約2秒 */
  60%  { opacity:1; transform: translate(0,0) scale(1) rotate(0turn); }

  /* 回転しながら拡大＆フェードアウト（60–98%） */
  98%  { opacity:0; transform: translate(0,0) scale(var(--scale-burst)) rotate(var(--spin-rot)); filter: blur(.3px); }

  /* リセット（見えないまま右上へ） */
  99%  { opacity:0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(var(--scale-burst)) rotate(var(--spin-rot)); filter:none; }
  100% { opacity:0; transform: translate(var(--fly-dx), var(--fly-dy)) scale(var(--scale-enter)) rotate(0turn); }
}


/* 見た目（お好みで調整） */
.missionTitle{line-height:1.1}
.missionTitle .jp{
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight: 900;       /* 極太 */
  letter-spacing: .02em;
  line-height: 1;         /* ゴシックで詰める */
}

.missionTitle .en{
  display:block; margin-top:.4em; font-weight:900;
  font-size: clamp(2rem,6.5vw,6.5rem); letter-spacing:.06em;
  color:transparent; -webkit-text-stroke: 2px #5a78bf; text-stroke: 2px #5a78bf;
}
.missionTitle .en{
  font-family: "Montserrat","Bebas Neue",system-ui,arial,sans-serif;
  font-weight: 900;    /* 太字 */
  line-height: 1;
}

/* 1文字ごとの初期状態 */
.typeInL .char, .typeInR .char{
  display:inline-block; opacity:0; will-change: transform, opacity;
}

/* 左→右に流入（上段） */
.typeInL .char{ transform: translate(-.45em,.2em) rotate(-8deg); }
.typeInL.inview .char{
  animation: charInL .48s cubic-bezier(.2,.65,.2,1) forwards;
  animation-delay: calc(var(--stagger, .05s) * var(--i));
}


/* 右→左に流入（下段） */
.typeInR .char{ transform: translate(.45em,.2em) rotate(8deg); }
.typeInR.inview .char{
  animation: charInR .48s cubic-bezier(.2,.65,.2,1) forwards;
  animation-delay: calc(var(--stagger, .05s) * var(--i));
}
@keyframes charInR{
  to{ opacity:1; transform: translate(0,0) rotate(0); }
}

/* 省エネ配慮 */
@media (prefers-reduced-motion: reduce){
  .typeInL .char, .typeInR .char{ opacity:1 !important; transform:none !important; animation:none !important; }
}
/* 好きな量に調整（例は約 1.5 文字分） */
.missionTitle .en{
  margin-left: 5.5ch;            /* ← ここを増減 */
}
/* 上段：太字 */
.missionTitle .jp{
  font-weight: 900;     /* 700→900 など好みで */
}

/* 下段：アウトラインを太く */
.missionTitle .en{
  font-weight: 900;                     /* 併せて太めに */
  -webkit-text-stroke-width: 3px;       /* ← 2px→3px などにUP */
  text-stroke-width: 3px;               /* (対応ブラウザ向け) */
}
.missionTitle .jp{ margin: 0 0.7em -.12em; }   /* 下の余白を詰める（微調整） */
.missionTitle .en{ margin: .02em 0 0; }    /* 上の余白を最小化（必要なら 0） */

/* 塗りつぶしの太字で薄く */
.missionTitle .en{
  -webkit-text-stroke: 0;
          text-stroke: 0;
  color: rgba(90,120,191,.3);  /* 50% */
}


/* 折返し禁止＋単語分割禁止 */
.missionTitle .en{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 1文字アニメ用の子要素にも inline-block を明示（折れ防止）*/
.missionTitle .en .char,
.missionTitle .jp .char{
  display: inline-block;
}

/* 画面幅に応じてサイズ可変（例） */
.missionTitle .jp{ font-size: clamp(22px, 5.2vw, 72px); }
.missionTitle .en{ font-size: clamp(18px, 6.8vw, 120px); }

/* 好きな量に調整（例は約 1.5 文字分） */
.missionTitle .en{
  margin-left: 0.5ch;            /* ← ここを増減 */
}

/* ① ベースのトラッキングを詰める */
.missionTitle .en{
  letter-spacing: -0.05em;          /* まずは -0.02〜-0.06em で微調整 */
  font-kerning: normal;
  font-feature-settings: "liga","kern";
}
/* 見出しブロックだけ遅くしたい場合 */
.missionTitle { --stagger: .20s; }  /* 既定 .05s → .12s などに */

/* 左から出現（日本語用） */
@keyframes charInL{
  from{ opacity:0; transform: translateX(-0.7em); }
  to{ opacity:1; transform: translate(var(--jp-final-offset, 0), 0) rotate(0); }
}
/* 出終わりで少し左へ（例: -0.25rem）*/
.missionJP .char{
  --jp-final-offset: -2.4rem; /* 調整ポイント：-0.1rem〜-0.6remくらいで微調整 */
}
/* 日本語の最終位置（左に寄せる量） */
.missionTitle .jp .char{
  --jp-final-offset: -6.6rem; /* 数値を -0.1rem〜-1rem で微調整 */
}

@media (max-width: 896px) {
    #main .mainBox {
        padding-top: 0rem;
 margin: 0 -1rem 12.5vw;
    }
.missionTitle .jp .char {
    --jp-final-offset: 6.6rem;
}
.missionTitle .en {
    margin-left: 2.1ch;
}

.missionTitle .jp {
    margin: 0 -1em -.12em;
}

.truckStage {
    margin-bottom: 1rem;}
}
/* ← 営業拠点セクション全体を120%拡大 */
@media (min-width: 897px) {
  #main .network .innerBox {
    transform: scale(1.2);
    transform-origin: top center;
  }
#main .network {
padding-bottom: 22.5rem;  /* ← これを追加 */ }
}
/* PCだけSNSブロックを少し拡大 */
@media all and (min-width: 897px) {
  #main .sns .innerBox {
    transform: scale(1.15);         /* ここを 1.10〜1.20 で微調整 */
    transform-origin: center top;
  }
    /* 背景の赤丸が切れないように、SNSセクション自体の高さを増やす */
  #main .sns {
    padding-bottom: 8rem;   /* 6〜10remくらいで微調整してOK */
  }

  /* 拡大しても下のセクションとぶつからないように下の余白を増やす */
  #main .sns {
    padding-bottom: 10.5rem;           /* 必要に応じて 6rem などに増やす */
  }
}


#main .network .mapBox .img04 img.walkInR.swayAfter {
  /* 右から入ってくるスピード・距離・バウンス */
  --walk-dur: 6.2s;   /* デフォルト1.6s → ゆっくり */
  --walk-dist: 10vw;  /* 入ってくる距離。強すぎたら 15vw くらいに */
  --walk-bob: 6px;    /* 上下の揺れを少し抑えめ */

  /* 止まった後のゆらゆら（swayAfterのパラメータ上書き） */
  --sway-deg: 2.5deg; /* 揺れ角度を少し小さめに */
  --sway-time: 6.2s;  /* 往復時間を長めにしてゆっくり */
}

#main .network .mapBox .img05 img.walkInR.swayAfter {
  /* 右から入ってくるスピード・距離・バウンス */
  --walk-dur: 3.2s;   /* デフォルト1.6s → ゆっくり */
  --walk-dist: 6vw;  /* 入ってくる距離。強すぎたら 15vw くらいに */
  --walk-bob: 3px;    /* 上下の揺れを少し抑えめ */

  /* 止まった後のゆらゆら（swayAfterのパラメータ上書き） */
  --sway-deg: 2.5deg; /* 揺れ角度を少し小さめに */
  --sway-time: 2.2s;  /* 往復時間を長めにしてゆっくり */
}

#main .network .mapBox .img08 img.walkInR.swayAfter {
  /* 右から入ってくるスピード・距離・バウンス */
  --walk-dur: 2.2s;   /* デフォルト1.6s → ゆっくり */
  --walk-dist: 3vw;  /* 入ってくる距離。強すぎたら 15vw くらいに */
  --walk-bob: 4px;    /* 上下の揺れを少し抑えめ */

  /* 止まった後のゆらゆら（swayAfterのパラメータ上書き） */
  --sway-deg: 1.5deg; /* 揺れ角度を少し小さめに */
  --sway-time: 2.2s;  /* 往復時間を長めにしてゆっくり */
}






/* ===== 左側から歩いてくる（軽い上下バウンス＋傾き） ===== */
.walkInL{
  /* 調整用（右から版のミラー） */
  --walk-dist: -7vw;   /* マイナスで左側から */
  --walk-dur:  6.6s;    /* 所要時間 */
  --walk-bob:  6px;     /* 上下バウンス量 */
  --walk-rot: -4deg;    /* 傾きも逆向き */
  --walk-delay: 0s;     /* 任意の遅延 */

  opacity: 0;
  will-change: transform, opacity;
}
.walkInL.inview{
  /* 右から版と同じ walk-move を利用（距離がマイナスなので左→中央に入ってくる） */
  animation: walk-move var(--walk-dur) cubic-bezier(.2,.65,.2,1) var(--walk-delay) forwards;
}

/* 左から歩いてきて止まったあともゆらゆら（swayAfter版） */
.walkInL.swayAfter{
  /* 支点と揺れ量（必要なら微調整） */
  --pivot-x: 50%;
  --pivot-y: 96%;   /* 95〜99%で足元に合わせて微調整 */
  --sway-deg: 3.5deg;
  --sway-time: 1.8s;
  --sway-delay: .15s;  /* 着地後に少し間をおく */
  transform-origin: var(--pivot-x) var(--pivot-y);
}

.walkInL.swayAfter.inview{
  animation:
    walk-move var(--walk-dur) cubic-bezier(.2,.65,.2,1) var(--walk-delay) both,
    sway-pivot var(--sway-time) ease-in-out calc(var(--walk-dur) + var(--sway-delay)) infinite alternate;
}

/* 左から歩いてくる用：アニメ本体は .walkInR を流用して、値だけ反転 */
.walkInL {
  --walk-dist: -22vw;  /* 右から → 左から にするためマイナス */
  --walk-rot: -8deg;   /* 傾きも逆向きに */
}

/* 営業拠点：network_img07 用（ちょっと早め・揺れ大きめ） */
#main .network .mapBox img.net07 {
  --walk-dur: 1.8s;   /* 歩いて出てくる速さ（小さいほど速い） */
  --walk-delay: 0s;   /* 出てくるタイミング */
  --walk-bob: 10px;   /* 歩いているときの上下ゆれ */

  --sway-deg: 3.5deg; /* 止まった後の揺れの角度 */
  --sway-time: 1.6s;  /* 1往復にかかる時間（小さいほどせわしない） */
}

/* 営業拠点：network_img11 用（遅れてゆっくり・揺れ小さめ） */
#main .network .mapBox img.net11 {
  --walk-dur: 2.4s;    /* ゆっくり出てくる */
  --walk-delay: 0.6s;  /* 07 より少し遅れてスタート */
  --walk-bob: 6px;     /* 歩いているときの上下ゆれ少なめ */

  --sway-deg: 2deg;    /* 止まった後の揺れ小さめ */
  --sway-time: 2.4s;   /* ゆっくりフワフワ揺れる */
    --walk-dist: -4vw;   /* マイナスで左側から */
}


/* 営業拠点：network_img04 を少し上から落として、その後左右に揺らす */
.dropSwayTop{
  /* 調整用パラメータ */
  --drop-y: -4vw;     /* 最初の「上から」の距離（-3〜-6vwくらいで調整） */
  --drop-dur: .9s;    /* 落ちてくる時間 */

  --sway-deg: 3deg;   /* 止まった後の左右揺れの角度 */
  --sway-time: 2s;    /* 揺れ1往復の時間（大きいほどゆっくり） */
  --sway-delay: .15s; /* 落下完了から揺れ開始までの待ち */

  opacity: 0;
  transform-origin: 50% 98%; /* 下のほうを支点にして揺れる */
  will-change: transform, opacity;
}

/* 画面に入ったら「上から落ちる → 左右にゆらゆら」 */
.dropSwayTop.inview{
  animation:
    drop-in-top var(--drop-dur) cubic-bezier(.2,.65,.2,1) 0s forwards,
    sway-side  var(--sway-time) ease-in-out calc(var(--drop-dur) + var(--sway-delay)) infinite alternate;
}

/* 上からスッと落ちてきて止まる */
@keyframes drop-in-top{
  0%   { opacity: 0; transform: translateY(var(--drop-y)); }
  100% { opacity: 1; transform: translateY(0); }
}


/* 営業拠点 背景マップを「遠くからバーン」と出す */
#main .network .mapBox .photo img.net01Boom {
  /* 最初の大きさ（1より小さいと“後ろ/遠くから”ズームイン） */
  --in-start: 0.35;

  /* 手前に出てくる速さ（小さいほどキビキビ） */
  --in-time: 1s;

  /* 着地後の“バーン”の膨らみ具合（1.1〜1.15くらいで派手） */
  --pulse-scale: 1.1;

  /* 鼓動の周期（小さくするとドクドク速く、大きくするとゆっくり） */
  --pulse-time: 0.2s;

  /* 着地してから鼓動を始めるまでの待ち時間 */
  --pulse-wait: .02s;
}
/* NETWORK 背景マップ：バーンと出てきて、1回だけ鼓動したら止める */
#main .network .mapBox .photo img.net01Boom.inview{
  animation:
    scaleIn   var(--in-time) var(--in-ease) both,                                     /* ズームイン */
    pulse2s   var(--pulse-time) ease-in-out calc(var(--in-time) + var(--pulse-wait)) 1; /* 鼓動 1回だけ */
}
/* SNSのスマホ画像：下を軸に、少しだけ左右にゆらゆら */
#main .sns .img02 img.snsSwing {
  --pivot-x: 50%;     /* 横方向の支点（真ん中） */
  --pivot-y: 100%;    /* 縦方向の支点（いちばん下あたり） */

  --sway-deg: 2.5deg; /* 揺れの角度。大きくすると派手に揺れる */
  --sway-time: 2.4s;  /* 往復にかかる時間。大きいほどゆっくり */
  --sway-delay: .1s;  /* セクションが見えてから揺れ始めるまでの待ち */
}
/* 営業拠点：network_img03 を2秒ごとに鼓動させる */
#main .network .mapBox .img02 img.netPulse03{
  --pulse-scale: 1.03;           /* どれくらい膨らむか（1.03〜1.08くらいで調整） */
  animation: pulse2s 3s ease-in-out infinite;
  transform-origin: 50% 50%;     /* 真ん中を軸に拡大縮小 */
}
/* 営業拠点：トラックが左から走ってきて止まる */
.truckDriveIn{
  --truck-dist: -25vw;  /* 左の外側からスタート */
  --truck-dur: 1.4s;    /* 走ってくる時間 */
  --truck-delay: .1s;   /* セクションが見えてから走り出すまで */

  opacity: 0;           /* 最初は非表示 */
  will-change: transform, opacity;
}


/* story_09 の終わりだけフェードアウト用 */
.truckStage__overlay.is-fadeout {
  opacity: 0;
  transition: opacity 350ms ease;
}










/* --- 主要取引先：修正版 --- */


#main .customer .customerList {
    display: flex;
    flex-direction: row !important; /* 画面幅に関わらず常に横並び(2列) */
    justify-content: center;        /* 基本は中央寄せ */
    gap: 6.4rem;                    /* 2本のカラム間の距離（少し広げました） */
    
    /* 【重要】リスト全体を右へ移動させて、見た目のセンターを調整 */
    padding-left: 8rem;             
    width: 100%;
    box-sizing: border-box;
}

#main .customer .customerList__col {
    flex: 0 1 auto;                 /* 幅を中身に合わせる */
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 0;
    margin: 0;
}

#main .customer .customerList__col li {
    white-space: nowrap;            /* 改行を禁止（一行で表示） */
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1.55;
    position: relative;
    padding-left: 1.8rem;
    list-style: none;
}

#main .customer .customerList__col li::before {
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    top: 0.6em;
    transform: translateY(-50%);
    background: #1970EF;
    content: '';
}

/* スマホ時（896px以下）の調整 */
@media all and (max-width: 896px) {
    #main .customer .customerList {
        padding-left: 4rem;         /* スマホでは右へのズラし量を半分に */
        gap: 2.5rem;                /* カラム間の隙間をスマホ用に縮小 */
    }
    
    #main .customer .customerList__col li {
        font-size: 1.3rem;          /* 画面からはみ出さないよう文字を少し小さく */
    }
}




/* PC時の設定（位置調整を維持） */
#main .customer .customerList {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    gap: 6.4rem;
    padding-left: 8rem; /* PCでのセンター合わせ用 */
    width: 100%;
    box-sizing: border-box;
}

/* タイトル（CUSTOMER）のサイズ調整：PC */
#main .customer .customerCenter .headLine01 .en img {
    height: 7.4rem;
}

/* --- スマホ時の修正（896px以下） --- */
@media all and (max-width: 896px) {
    /* 1. タイトル文字のサイズを他（Information等）と統一 */
    #main .customer .customerCenter .headLine01 .en img {
        height: 4rem; /* 6remから4remに縮小し、News等と統一 */
    }

    /* 2. リストの文字切れを解消 */
    #main .customer .customerList {
        padding-left: 1rem;      /* 過剰な余白を削除し、微調整のみに */
        padding-right: 1rem;
        gap: 2rem;               /* 列間の隙間を詰め、中央に寄せる */
        justify-content: center;
        width: 100%;
        overflow: visible;       /* 念のため隠れないように設定 */
    }

    #main .customer .customerList__col {
        flex: 0 0 auto;          /* 幅を固定せず中身に合わせる */
    }

    #main .customer .customerList__col li {
        font-size: 1.25rem;      /* 2列を維持するため、少しだけ文字を縮小 */
        padding-left: 1.4rem;    /* 青い点との距離を少し詰める */
    }

    #main .customer .customerList__col li::before {
        width: 0.8rem;           /* 点のサイズも少し小さくしてスペース確保 */
        height: 0.8rem;
    }
}