@charset "utf-8";
.tube {
	--dur: 1.6s;                              /* 登場アニメの尺度。ここだけで全体の速さを調整できる */
	--ease: cubic-bezier(.25, .46, .45, .94); /* easeOutQuad：長めの時間でももたつかずに止まる */
	position: relative;
	box-sizing: border-box;
	padding-bottom: 83px;
	background: #559ECC;
	color: #FFF;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
}
.tube *,
.tube *::before,
.tube *::after {
	box-sizing: border-box;
}
.tube img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}
.tube a {
	text-decoration: none;
	color: inherit;
}

/* ------------------------------------------------------------
   MV（既出・アニメーションなし）mv.png 1000x570
   ------------------------------------------------------------ */
.tube__mv {
	display: block;
}

/* ------------------------------------------------------------
   カラーバリエーション（既出・アニメーションなし）600x300
   ------------------------------------------------------------ */
.tube__color {
	width: 416px;
	margin: 31px auto 0;
}

/* ------------------------------------------------------------
   キャッチコピー（fadeIn／下から上へ）22px・行送り50px・2行
   ------------------------------------------------------------ */
.tube__catch {
	margin: 14px 0 0;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	line-height: 35px;
}

/* ------------------------------------------------------------
   各セクション
   セクション高 518px ／ 次セクションまで 130px
   ------------------------------------------------------------ */
.tube__sec {
	position: relative;
	width: 100%;
	height: 359px;
	margin-top: 90px;
}
.tube__sec--01 {
	margin-top: 102px;
}
.tube__main,
.tube__ttl,
.tube__sub {
	position: absolute;
	display: block;
}

/* メインビジュアル（既出）500x500 */
.tube__main {
	top: 0;
	width: 347px;
}

/* テキスト画像（fadeIn のみ）500x500／外側へ10px・下へ10pxずらして重ねる */
.tube__ttl {
	top: 7px;
	width: 347px;
}

/* サブビジュアル（既出）433x470／原寸1080x1270 を cover でトリミング */
.tube__sub {
	top: 14px;
	width: 301px;
	height: 326px;
}
.tube__sub img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* BUY NOW ボタン（fadeIn／下から上へ）220x55 */
.tube__btn {
	position: absolute;
	top: 321px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 173px;
	height: 48px;
}

/* 01・03：メインビジュアルが左 */
.tube__sec--l .tube__main { left: 14px; }
.tube__sec--l .tube__ttl  { left: 7px; }
.tube__sec--l .tube__sub  { left: 380px; }
.tube__sec--l .tube__btn  { left: 446px; }

/* 02・04：メインビジュアルが右 */
.tube__sec--r .tube__main { left: 333px; }
.tube__sec--r .tube__ttl  { left: 340px; }
.tube__sec--r .tube__sub  { left: 14px; }
.tube__sec--r .tube__btn  { left: 75px; }

/* ------------------------------------------------------------
   アニメーション（スクロールで発火。いずれも opacity 0→1 を伴う）
     up   … キャッチコピー／BUY NOW：下から上へ
     down … 01 PUT IT DOWN   ：上から下へ
     left … 02 ATTACH TO WALL：右から左へ
     up   … 03 CARRY AROUND  ：下から上へ
     spin … 04 BENT & TWIST  ：時計回り45度から回り込み
   ------------------------------------------------------------ */
.tube [data-anim] {
	opacity: 0;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	will-change: opacity, transform;
}

/* キャッチコピー／BUY NOW */
.tube [data-anim="up"] {
	transform: translateY(21px);
}

/* テキスト画像 */
.tube__ttl[data-anim="down"] { transform: translateY(-28px); }
.tube__ttl[data-anim="left"] { transform: translateX(28px); }
.tube__ttl[data-anim="up"]   { transform: translateY(28px); }

/* 04 BENT & TWIST：回転 */
.tube__ttl[data-anim="spin"] {
	transform: rotate(-45deg);
	transition: opacity var(--dur) var(--ease);
}
.tube__ttl[data-anim="spin"].is-in {
	animation: tubeSpinIn var(--dur) linear forwards;
}
@keyframes tubeSpinIn {
	0%    { transform: rotate(-45deg); }
	5%    { transform: rotate(-40.61deg); }
	10%   { transform: rotate(-36.45deg); }
	15%   { transform: rotate(-32.51deg); }
	20%   { transform: rotate(-28.8deg); }
	25%   { transform: rotate(-25.31deg); }
	30%   { transform: rotate(-22.05deg); }
	35%   { transform: rotate(-19.01deg); }
	40%   { transform: rotate(-16.2deg); }
	45%   { transform: rotate(-13.61deg); }
	50%   { transform: rotate(-11.25deg); }
	60%   { transform: rotate(-7.2deg); }
	70%   { transform: rotate(-4.05deg); }
	80%   { transform: rotate(-1.8deg); }
	90%   { transform: rotate(-0.45deg); }
	100%  { transform: rotate(0deg); }
}

.tube [data-anim].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tube [data-anim],
	.tube__ttl[data-anim="spin"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.tube__ttl[data-anim="spin"].is-in {
		animation: none;
	}
}