@charset "UTF-8";
/* =========================================================
   mv.css - TOPメインビジュアル（animation/css/top-mv.css を移植）
   画像パスと SP ブレークポイントのみサイト側に合わせて調整
   ========================================================= */

.mv-wrapper {
  width: 100%;
  overflow: hidden;
}
.mv{
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
	background: #a5d1e3;
	visibility: hidden;
}
.mv > *{
	position: absolute;
	z-index: 2;
}
.bg{
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.hawks{
	right: 20px;
	bottom: 20px;
	z-index: 10;
}
.wave01{
	left: 1021px;
	top: 446px;
	animation: wave 3s ease-in-out infinite;
}
.wave02{
	left: 942px;
	top: 398px;
	animation: wave 5s ease-in-out infinite reverse;
	animation-delay: -2s;
}
@keyframes wave {
  0%   { transform: translateX(-10px); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}
.cloud01{
	left: 578px;
	top: 160px;
	animation: cloud 8s ease-in-out infinite;
}
.cloud02{
	left: 747px;
	top: 223px;
	animation: cloud 10s ease-in-out infinite;
	animation-delay: -2s;
}
@keyframes cloud {
  0%   { transform: translateY(-10px); }
  50%  { transform: translateY(10px); }
  100% { transform: translateY(-10px); }
}
.businessman {
	left: 211px;
	top: 940px;
}
.calculator {
	left: 195px;
	top: 851px;
}
.pc {
	left: 239px;
	top: 647px;
}
.building01 {
	left: 316px;
	top: 826px;
	z-index: 5;
}
.building02 {
	left: 722px;
	top: 778px;
	z-index: 5;
}
.building03 {
	left: 490px;
	top: 559px;
}
.building04 {
	left: 1193px;
	top: 319px;
	z-index: 3;
}
.building05 {
	left: 1025px;
	top: 104px;
}
.building06 {
	left: 1368px;
	top: 37px;
}
.sushi {
	left: 1576px;
	top: 536px;
}
.fadeup{
  opacity: 0;
	transform: translateY(30px) scale(0.7);
	transition: opacity 0.1s ease, transform 0.2s cubic-bezier(.22,1,.36,1);
	transform-origin: bottom center;
}
.fadeup.active{
	transform: translateY(0) scale(1);
	opacity: 1;
}
.mv .delay01{ transition-delay: 0.1s; }
.mv .delay02{ transition-delay: 0.2s; }
.mv .delay03{ transition-delay: 0.3s; }
.mv .delay04{ transition-delay: 0.4s; }
.mv .delay05{ transition-delay: 0.5s; }
.mv .delay06{ transition-delay: 0.6s; }
.mv .delay07{ transition-delay: 0.7s; }
.mv .delay08{ transition-delay: 0.8s; }
.mv .delay09{ transition-delay: 0.9s; }
.mv .delay10{ transition-delay: 1s; }
.mv .delay11{ transition-delay: 1.1s; }
.mv .delay12{ transition-delay: 1.2s; }
.mv .delay13{ transition-delay: 1.3s; }
.mv .delay14{ transition-delay: 1.4s; }
.mv .delay15{ transition-delay: 1.5s; }
.truck01{
	opacity: 0;
}
.truck01.active{
  animation: move-truck01 4s linear infinite;
}
.path01 {
  --ax: 529px;
  --ay: 867px;
  --bx: 874px;
  --by: 668px;
}
.truck02{
	opacity: 0;
}
.truck02.active{
  animation: move-truck02 4s linear infinite;
}
.path02 {
  --ax: 928px;
  --ay: 706px;
  --bx: 471px;
  --by: 970px;
}
@keyframes move-truck01 {
  0%   { transform: translate(var(--ax), var(--ay)); opacity: 0; }
  6%   { opacity: 1; }
  32%  { transform: translate(calc((var(--ax) + var(--bx)) / 2), calc((var(--ay) + var(--by)) / 2)); }
  48%  { transform: translate(calc((var(--ax) + var(--bx)) / 2), calc((var(--ay) + var(--by)) / 2)); opacity: 1; }
  74%  { transform: translate(var(--bx), var(--by)); opacity: 1; }
  80%  { opacity: 0; }
  100% { transform: translate(var(--bx), var(--by)); opacity: 0; }
}
@keyframes move-truck02 {
  0% {
    transform: translate(var(--ax), var(--ay));
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  74% {
    transform: translate(var(--bx), var(--by));
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translate(var(--bx), var(--by));
    opacity: 0;
  }
}
.ship{
	opacity: 0;
	z-index: 5;
  --ax: 1368px;
  --ay: 555px;
  --bx: 860px;
  --by: 849px;
}
.ship.active{
	animation: move-ship 20s linear infinite;
}
@keyframes move-ship {
  0% {
    transform: translate(var(--ax), var(--ay));
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  79% {
    transform: translate(var(--bx), var(--by));
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translate(var(--bx), var(--by));
    opacity: 0;
  }
}
.cart{
	opacity: 0;
  --ax: 1428px;
  --ay: 275px;
  --bx: 1539px;
  --by: 339px;
}
.cart.active{
	animation: move-cart 3s linear infinite;
}
@keyframes move-cart {
  0% {
    transform: translate(var(--ax), var(--ay));
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  24% {
    transform: translate(var(--bx), var(--by));
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    transform: translate(var(--bx), var(--by));
    opacity: 0;
  }
}
.shake.active-interval{
	animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.rainbow-wrap{
	width: 940px;
	height: 220px;
	top: 558px;
	left: 340px;
  transform: rotate(322deg);
	z-index: 8;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,1) 100%
  );

  -webkit-mask-size: 500% 100%;
  mask-size: 500% 100%;

  -webkit-mask-position: 100% 0%;
  mask-position: 100% 0%;
}
.rainbow-wrap.active-interval {
  animation: rainbow-hide 2s ease-out forwards;
  animation-delay: 2.6s;
}
@keyframes rainbow-hide {
  0% {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
  }

  100% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}
.rainbow{
	width: 940px;
	height: 220px;
	background: url("../img/mv/rainbow.svg") no-repeat top center;
	top: 0;
	left: 0;
	z-index: 8;

  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 45%,
    transparent 55%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 50%,
    transparent 50%,
    transparent 100%
  );

  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: 100% 0%;
  mask-position: 100% 0%;
}
.rainbow.active-interval{
  animation: rainbow-trail 6s linear forwards;
}
@keyframes rainbow-trail {
  0% {
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  58.7% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    opacity: 1;
  }
  62.7% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    opacity: 1;
  }
}
.plane{
	left: 483px;
	top: 380px;
	offset-path: path("M0,579.6C116.13,329.38,385.68-35.5,710.49,2.79");
	offset-distance: 0%;
	offset-rotate: 0deg;
	z-index: 10;
	opacity: 0;
}
.plane.active-interval{
	animation: move-plane 4s linear forwards infinite;
}
@keyframes move-plane {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  88% {
    offset-distance: 100%;
    opacity: 1;
  }
  94% {
    opacity: 0;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.link{
	display: inline-block;
	background: rgba(255, 255, 255, 0.7);
	color: #242a8b;
	text-align: center;
	padding: 24px 26px;
	border-radius: 20px;
	text-decoration: none;
	transform-origin: 50% calc(100% + 24px);
	transition: transform 0.1s linear;
	z-index: 10;
  opacity: 0;
	transform: translateY(30px) scale(0.7);
	transition: opacity 0.1s ease, transform 0.2s cubic-bezier(.22,1,.36,1);
}
.link.active{
	transform: translateY(0) scale(1);
	opacity: 1;
}
.link svg{
  display: inline-block;
}
.link.delay-off{
	transition-delay: 0s !important;
}
.link::after{
	content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-top: 25px solid rgba(255, 255, 255, 0.7);
  border-bottom: 0;
	position: absolute;
	left: calc(50% - 12px);
	bottom: -24px;
}
@media screen and (min-width: 1024px) {
  .link:hover{
    transform: scale(120%);
    background: #242a8b;
  }
  .link:hover::after{
    border-top-color: #242a8b;
  }
  .link:hover svg{
    color: #fff;
  }
}
.link01{
	top: 530px;
	left: 248px;
}
.link02{
	top: 437px;
	left: 565px;
}
.link03{
	top: 70px;
	left: 762px;
}
.link04{
	top: 218px;
	left: 1338px;
}
.link05{
	top: 461px;
	left: 1669px;
}

@media screen and (max-width: 1023px) {
  .sp-wrapper{
    background: #e7edfd;
    width: 100%;
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .mv-wrapper{
    position: absolute;
    right: 0;
    bottom: 50px;
  }
  .mv{
    left: -8%;
    overflow: visible;
  }
  .link{
    width: 354px;
    padding: 30px 0;
  }
  .link::after{
    border-right: 24px solid transparent;
    border-left: 24px solid transparent;
    border-top-width: 50px;
    border-bottom: 0;
    position: absolute;
    left: 151px;
    bottom: -48px;
  }
  .link svg{
    height: 90px;
    width: auto;
  }
  .link05 svg{
    height: 33px;
  }
  .link01{
    top: 406px;
    left: 182px;
  }
  .link02{
    top: 318px;
    left: 565px;
  }
  .link03{
    top: 0px;
    left: 688px;
  }
  .link04{
    top: 98px;
    left: 1237px;
  }
  .link05{
    top: 376px;
    left: 1528px;
  }
  .cloud01{
    left: 641px;
    top: 192px;
  }
  .cloud02{
    left: 844px;
    top: 235px;
  }
}
/* =========================================================
   SP縦構図（案C）
   1920x1080の横長シーンを 1080x1620（2:3）の縦ステージに組み替える。
   絵柄・動きの種類はそのままで、位置だけSP用に置き直している。
   ・上：アメリカ（自由の女神／街／フード）
   ・中：海（船・虹・飛行機・雲）
   ・下：日本（鳥居・倉庫・トラック・PC・人）
   ========================================================= */
@media screen and (max-width: 599px) {
	.mv {
		--mv-base-w: 1080;
		width: 1080px;
		height: 1750px;
		left: 0;
		overflow: hidden;
		background: #e7edfd;
	}

	/* 背景の地図は縦に切り取って使う */
	/* 地図は「上＝アメリカ大陸」「下＝日本」の2枚に分けて配置する。
	   1枚の地図では日本とアメリカが横並びのため、縦構図に置けないため。
	   拡大率は一定（形は歪めない）、境目はマスクでぼかして自然につなぐ。 */
	.bg { overflow: hidden; }
	.bg img { display: none; }

	.bg::before,
	.bg::after {
		content: "";
		position: absolute;
		background-image: url("../img/mv/bg.png");
		background-repeat: no-repeat;
	}

	/* 上：アメリカ大陸（アラスカ〜北米西岸）。画像の端がステージ外に出るよう
	   拡大率と位置を決めているので、切れ目は見えない。 */
	.bg::before {
		left: 0;
		top: 0;
		width: 1080px;
		height: 860px;
		background-size: 2400px auto;
		background-position: -1300px -137px;
		-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	}

	/* 下：日本。列島が縦になるよう25度回して、北海道を左上に持ってくる。
	   回転で矩形の端が見えないよう、要素は画面よりかなり大きく取っている。 */
	.bg::after {
		left: -600px;
		top: 600px;
		width: 2280px;
		height: 1400px;
		background-size: 2400px auto;
		background-position: 28px -436px;
		transform: rotate(-25deg);
		-webkit-mask-image: linear-gradient(to top, transparent 36%, #000 46%, #000 62%, transparent 100%);
		mask-image: linear-gradient(to top, transparent 36%, #000 46%, #000 62%, transparent 100%);
	}

	/* ---------- 上：アメリカ（原画の配置をそのまま平行移動） ---------- */
	.building05 { left: 145px; top: 254px; }
	.building06 { left: 488px; top: 187px; }
	.building04 { left: 313px; top: 469px; }
	.sushi      { left: 60px;  top: 880px; }
	.cart       { --ax: 548px; --ay: 425px; --bx: 659px; --by: 489px; }

	/* ---------- 中：海 ---------- */
	.wave02 { left: 330px; top: 800px; }
	.wave01 { left: 520px; top: 860px; }
	.ship   { --ax: 895px; --ay: 830px; --bx: 870px; --by: 1200px; }

	/* 虹＝飛行機が通った軌跡。虹を先に置き、その中心線から
	   飛行機の offset-path を割り出して完全に一致させている。 */
	.rainbow-wrap { left: 90px; top: 921px; transform: rotate(296.4deg); }

	.plane {
		left: 0;
		top: 0;
		offset-path: path("M389,1405 L422,1376 L426,1334 L431,1291 L437,1250 L444,1209 L452,1168 L462,1128 L473,1089 L485,1050 L498,1012 L513,975 L529,938 L547,903 L568,868 L590,834 L614,802 L642,771 L672,741 L707,714 L755,693");
	}

	.cloud01 { left: 0;     top: 1100px; }
	.cloud02 { left: 700px; top: 800px; }

	/* ---------- 下：日本（原画の配置をそのまま平行移動） ---------- */
	.building03  { left: 470px; top: 1080px; }
	.building02  { left: 420px; top: 1240px; }
	.building01  { left: 110px; top: 1410px; }
	.pc          { left: 94px;  top: 1197px; }
	.calculator  { left: 50px;  top: 1401px; }
	.businessman { left: 66px;  top: 1490px; }

	/* トラックは倉庫（z-index:5）の前を走らせる */
	.truck01,
	.truck02 { z-index: 6; }

	.path01 { --ax: 330px; --ay: 1420px; --bx: 530px; --by: 1270px; }
	.path02 { --ax: 550px; --ay: 1230px; --bx: 310px; --by: 1440px; }

	/* ---------- 吹き出し ---------- */
	/* イラストの下に余白を作る */
	.hawks { bottom: 90px; }

	.link04 { top: 20px;   left: 600px; }
	.link05 { top: 640px;  left: 60px; }
	.link03 { top: 620px;  left: 620px; }
	.link02 { top: 960px;  left: 620px; }
	.link01 { top: 1180px; left: 30px; }
}