Preview: Rainbow Bridge Tokyo Night Drive
/* プレビュー用のリセットとグローバル背景 */
body {
margin: 0;
padding: 0;
background-color: #000;
}
TOKYO NIGHT DRIVE
Rainbow Bridge Tokyo Night Drive: The Moment the Drive Comes Alive
There is a point during a Tokyo night drive when everything suddenly opens up — the road, the skyline, and the feeling of speed. For many guests, that moment happens on the Rainbow Bridge.
SCROLL TO DRIVE
01
As you approach the Rainbow Bridge, the city of Tokyo begins to stretch out in front of you. The roads become smoother, the space feels wider, and the lights start to spread across the horizon.
Then you enter the bridge — and the entire atmosphere of the Tokyo night drive changes.
02
TOKYO BAY ROUTE
Driving through the Tokyo skyline at night
From inside the car, the Tokyo skyline is constantly moving. Lights reflect off the water, and buildings pass by on both sides, creating one of the most cinematic night drives in Tokyo.
“You don’t really “stop” here — and that’s what makes it special.”
This part of the experience is all about motion. The road itself becomes the highlight of the drive.
Depending on the route, you may catch glimpses of Tokyo Tower in the distance, or see Odaiba lit up across the bay. It’s one of the best night drive views in Tokyo.
03
IN MOTION
Why this Tokyo night drive feels different
01
Up to this point, the tour moves through different types of locations — busy areas, quieter stops, and places where you get out and explore.
02
The Rainbow Bridge is different. You stay in the car, and everything happens in motion. The combination of smooth roads, open space, and city lights creates one of the most unique driving experiences in Tokyo.
03
It’s not loud like a car meet, and it’s not quiet like a rest stop. It sits somewhere in between — and that balance is what makes it memorable.
Many guests say this is one of the most memorable parts of their Tokyo night drive, even if it only lasts a few minutes. It’s hard to fully explain why — you just feel it while you’re there.
The rhythm of the drive, the lights moving past, and the sense of being surrounded by Tokyo’s skyline all come together naturally.
05
THE STORY
Part of a Tokyo JDM night drive experience
The Rainbow Bridge isn’t meant to stand alone. It works because of everything that comes before and after it.
That’s why experiencing it as part of a Tokyo JDM tour makes such a difference. It becomes one scene in a larger story — not just a road you cross, but a highlight of the entire night drive in Tokyo.
PREMIUM JDM TOUR
Experience the Rainbow Bridge night drive
Join a Tokyo JDM tour and experience one of the best night drives in Tokyo, crossing the iconic Rainbow Bridge.
.spot-detail {
--bg-color: #020304;
--section-bg: #07090c;
--deep-navy: #080d14;
--panel-bg: rgba(10, 14, 20, 0.86);
--text-main: #ffffff;
--text-body: rgba(255, 255, 255, 0.82);
--text-muted: rgba(255, 255, 255, 0.58);
--accent-main: #0abab5;
--accent-light: #7ffaf1;
--city-blue: #9bb8ff;
--silver: #b8c0cc;
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow-x: hidden;
position: relative;
}
/* ヒーローセクション */
.spot-detail .spot-hero {
position: relative;
height: 85svh;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 60px 8%;
overflow: hidden;
}
.spot-detail .spot-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.spot-detail .spot-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
transform: scale(1.05);
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.spot-detail .spot-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(2, 3, 4, 0.3) 0%,
rgba(2, 3, 4, 0.7) 60%,
rgba(2, 3, 4, 0.95) 100%
), linear-gradient(
to right,
rgba(2, 3, 4, 0.7) 0%,
rgba(2, 3, 4, 0.3) 50%,
rgba(2, 3, 4, 0.1) 100%
);
z-index: 2;
}
.spot-detail .spot-hero-content {
position: relative;
z-index: 3;
max-width: 800px;
margin-bottom: 40px;
}
.spot-detail .spot-eyebrow {
display: inline-block;
font-size: 13px;
letter-spacing: 0.25em;
color: var(--accent-main);
text-transform: uppercase;
margin-bottom: 16px;
font-weight: 700;
position: relative;
padding-left: 30px;
}
.spot-detail .spot-eyebrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 20px;
height: 1px;
background-color: var(--accent-main);
}
.spot-detail .spot-hero h1 {
font-size: clamp(36px, 5vw, 76px);
font-weight: 850;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 24px 0;
color: var(--text-main);
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.spot-detail .spot-hero .spot-lead {
font-size: clamp(16px, 1.8vw, 19px);
line-height: 1.8;
color: var(--text-body);
max-width: 680px;
margin: 0;
}
.spot-detail .spot-scroll-indicator {
position: absolute;
bottom: 30px;
left: 8%;
z-index: 3;
display: flex;
align-items: center;
gap: 15px;
}
.spot-detail .spot-scroll-line {
position: relative;
width: 60px;
height: 2px;
background-color: rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.spot-detail .spot-scroll-line::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--accent-main);
transform: scaleX(0);
transform-origin: left;
animation: scroll-line-anim 2s infinite cubic-bezier(0.85, 0, 0.15, 1);
}
@keyframes scroll-line-anim {
0% { transform: scaleX(0); transform-origin: left; }
45% { transform: scaleX(1); transform-origin: left; }
55% { transform: scaleX(1); transform-origin: right; }
100% { transform: scaleX(0); transform-origin: right; }
}
.spot-detail .spot-scroll-text {
font-size: 11px;
letter-spacing: 0.2em;
color: var(--text-muted);
font-weight: 600;
}
/* 共通セクション設定 */
.spot-detail .spot-section {
padding: 100px 0;
position: relative;
}
.spot-detail .spot-section-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 2;
}
.spot-detail .spot-bg-number {
position: absolute;
top: -40px;
left: 20px;
font-size: clamp(100px, 15vw, 180px);
font-weight: 900;
color: rgba(255, 255, 255, 0.02);
line-height: 1;
pointer-events: none;
z-index: 1;
font-family: "Outfit", sans-serif;
letter-spacing: -0.05em;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.spot-detail .spot-section-label {
display: inline-block;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent-main);
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 700;
}
.spot-detail h2 {
font-size: clamp(28px, 4vw, 46px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-main);
margin-top: 0;
margin-bottom: 24px;
}
.spot-detail p {
font-size: 17px;
line-height: 1.9;
color: var(--text-body);
margin-top: 0;
margin-bottom: 20px;
}
/* 導入ストーリー */
.spot-detail .spot-intro {
background-color: var(--bg-color);
padding-bottom: 140px;
}
.spot-detail .spot-intro-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
}
.spot-detail .spot-content-left p {
font-size: 18px;
line-height: 1.95;
margin: 0;
color: var(--text-body);
}
.spot-detail .spot-content-highlight {
position: relative;
}
.spot-detail .spot-quote {
margin: 0;
padding: 20px 0 20px 30px;
position: relative;
}
.spot-detail .spot-quote .quote-line {
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, var(--accent-main), transparent);
}
.spot-detail .spot-quote p {
font-size: clamp(20px, 2.5vw, 25px);
font-weight: 700;
line-height: 1.5;
color: var(--accent-light);
margin: 0;
}
.spot-detail .spot-road-line {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(10, 186, 181, 0.4), transparent);
}
/* Skylineセクション (左右分割) */
.spot-detail .spot-skyline {
background-color: var(--section-bg);
}
.spot-detail .spot-skyline-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 80px;
align-items: center;
}
.spot-detail .spot-skyline-media {
position: relative;
}
.spot-detail .spot-media-frame {
position: relative;
padding: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
/* はみ出し効果 */
margin-left: -100px;
}
.spot-detail .spot-media-frame img {
width: 100%;
display: block;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.spot-detail .spot-media-frame:hover img {
transform: scale(1.025);
}
.spot-detail .frame-edge {
position: absolute;
width: 15px;
height: 15px;
border-color: var(--accent-main);
border-style: solid;
pointer-events: none;
}
.spot-detail .frame-edge.top-right {
top: -2px;
right: -2px;
border-width: 2px 2px 0 0;
}
.spot-detail .frame-edge.bottom-left {
bottom: -2px;
left: -2px;
border-width: 0 0 2px 2px;
}
/* モーション文章表現 */
.spot-detail .spot-motion {
background-color: var(--bg-color);
padding: 120px 0;
position: relative;
overflow: hidden;
}
.spot-detail .spot-motion-container {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 850px;
margin: 0 auto;
}
.spot-detail .spot-motion-quote {
text-align: center;
padding: 30px 20px;
position: relative;
}
.spot-detail .spot-large-text {
font-size: clamp(24px, 3.2vw, 36px);
font-weight: 800;
line-height: 1.4;
color: var(--text-main);
margin: 0;
letter-spacing: -0.01em;
background: linear-gradient(120deg, #fff 30%, var(--city-blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.spot-detail .spot-motion-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.spot-detail .spot-para-1,
.spot-detail .spot-para-2 {
font-size: 17px;
line-height: 1.95;
color: var(--text-body);
margin: 0;
}
.spot-detail .spot-motion-bg-lines {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 120px;
transform: translateY(-50%) rotate(-3deg);
pointer-events: none;
z-index: 1;
opacity: 0.15;
}
.spot-detail .spot-motion-bg-lines span {
display: block;
height: 1px;
background: linear-gradient(to right, transparent, var(--accent-main), transparent);
margin-bottom: 25px;
width: 120%;
margin-left: -10%;
}
.spot-detail .spot-motion-bg-lines span:nth-child(2) {
background: linear-gradient(to right, transparent, var(--city-blue), transparent);
margin-left: 0;
}
/* Why this Tokyo night drive feels different */
.spot-detail .spot-different {
background: linear-gradient(to bottom, var(--section-bg) 0%, var(--deep-navy) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
overflow: hidden;
}
.spot-detail .spot-different h2 {
max-width: 600px;
margin-bottom: 60px;
}
.spot-detail .spot-different-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.spot-detail .different-card {
background: rgba(10, 14, 20, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 40px 30px;
position: relative;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
overflow: hidden;
}
.spot-detail .different-card:hover {
background: rgba(10, 14, 20, 0.8);
border-color: rgba(10, 186, 181, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.spot-detail .different-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-main), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.spot-detail .different-card:hover::before {
transform: scaleX(1);
}
.spot-detail .different-card .card-num {
font-family: "Outfit", sans-serif;
font-size: 14px;
font-weight: 800;
color: var(--accent-main);
display: block;
margin-bottom: 24px;
letter-spacing: 0.1em;
}
.spot-detail .different-card p {
font-size: 16px;
line-height: 1.85;
color: var(--text-body);
margin: 0;
}
/* 動画セクション */
.spot-detail .spot-video-section {
background-color: var(--bg-color);
padding: 120px 0 0 0;
}
.spot-detail .video-section-header {
margin-bottom: 40px;
}
.spot-detail .spot-video-container {
position: relative;
width: 100%;
height: 75vh;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background-color: #07090c;
}
.spot-detail .spot-video-container video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
position: relative;
z-index: 1;
}
.spot-detail .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(2, 3, 4, 0.5) 0%,
rgba(2, 3, 4, 0.1) 40%,
rgba(2, 3, 4, 0.1) 60%,
rgba(2, 3, 4, 0.6) 100%
);
z-index: 2;
pointer-events: none;
}
.spot-detail .video-content-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 800px;
padding: 0;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
.spot-detail .video-panel {
background: none;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
max-width: 100%;
box-shadow: none;
text-align: center;
}
.spot-detail .video-panel p {
font-size: 16.5px;
line-height: 1.85;
color: var(--text-main);
margin-top: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.spot-detail .video-panel p:last-child {
margin-bottom: 0;
}
/* Part of a Tokyo JDM night drive experience */
.spot-detail .spot-experience {
background-color: var(--bg-color);
padding: 140px 0 100px 0;
position: relative;
}
.spot-detail .spot-experience-body {
max-width: 800px;
margin-top: 30px;
}
.spot-detail .spot-experience-body p {
font-size: 18px;
line-height: 1.9;
color: var(--text-body);
margin-bottom: 24px;
}
.spot-detail .spot-experience-body p:last-child {
margin-bottom: 0;
}
.spot-detail .spot-route-line-connector {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100px;
background: linear-gradient(to bottom, rgba(10, 186, 181, 0.3), rgba(10, 186, 181, 0.8));
}
/* CTAセクション */
.spot-detail .spot-cta {
position: relative;
background: linear-gradient(135deg, var(--bg-color) 0%, var(--deep-navy) 50%, var(--section-bg) 100%);
padding: 140px 30px;
text-align: center;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.spot-detail .spot-cta-bg-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(10, 186, 181, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 186, 181, 0.03) 1px, transparent 1px);
background-size: 80px 80px;
background-position: center;
opacity: 0.5;
pointer-events: none;
z-index: 1;
}
.spot-detail .spot-cta-content {
position: relative;
z-index: 2;
max-width: 700px;
margin: 0 auto;
}
.spot-detail .spot-cta-eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 0.3em;
color: var(--accent-main);
text-transform: uppercase;
margin-bottom: 24px;
font-weight: 700;
}
.spot-detail .spot-cta h2 {
font-size: clamp(32px, 4.5vw, 54px);
font-weight: 850;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.spot-detail .spot-cta p {
font-size: 18px;
line-height: 1.85;
color: var(--text-body);
margin-bottom: 44px;
}
.spot-detail .cta-button-wrap {
display: inline-block;
position: relative;
}
.spot-detail .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 48px;
background-color: var(--accent-main);
color: #020304;
font-size: 16px;
font-weight: 800;
border-radius: 4px;
text-decoration: none;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 4px 20px rgba(10, 186, 181, 0.25);
border: 1px solid rgba(10, 186, 181, 0.4);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
z-index: 1;
}
.spot-detail .cta-button::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: none;
z-index: -1;
}
.spot-detail .cta-button:hover::after {
left: 100%;
transition: left 0.7s ease-in-out;
}
.spot-detail .cta-button:hover {
background-color: var(--accent-light);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(10, 186, 181, 0.45);
color: #000;
}
.spot-detail .cta-button:focus-visible {
outline: 2px solid var(--accent-light);
outline-offset: 4px;
}
/* アニメーション用クラス (.reveal) */
.spot-detail .reveal {
opacity: 1;
transform: none;
}
/* レスポンシブ */
@media (max-width: 1024px) {
.spot-detail .spot-media-frame {
margin-left: 0;
}
.spot-detail .spot-skyline-grid {
gap: 40px;
}
}
@media (max-width: 768px) {
.spot-detail .spot-hero {
height: 80svh;
padding: 40px 24px;
}
.spot-detail .spot-hero-content {
margin-bottom: 20px;
}
.spot-detail .spot-scroll-indicator {
left: 24px;
bottom: 24px;
}
.spot-detail .spot-section {
padding: 70px 0;
}
.spot-detail .spot-section-inner {
padding: 0 24px;
}
.spot-detail .spot-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.spot-detail .spot-skyline-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.spot-detail .spot-motion-body {
grid-template-columns: 1fr;
gap: 20px;
}
.spot-detail .spot-different-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.spot-detail .spot-video-container {
height: 50svh;
}
.spot-detail .video-content-overlay {
position: relative;
padding: 30px 24px;
background-color: var(--bg-color);
}
.spot-detail .video-panel {
padding: 0;
background: none;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
max-width: 100%;
text-align: center;
}
.spot-detail .spot-experience {
padding-top: 80px;
}
.spot-detail .spot-cta {
padding: 100px 24px;
}
.spot-detail .cta-button {
width: 100%;
padding: 0 24px;
}
}
(function() {
var video = document.querySelector('.spot-detail .spot-video-container video');
if (!video) return;
// 1. 初回の自動再生の試み
var playPromise = video.play();
function forcePlay() {
if (video.paused) {
video.play().then(function() {
cleanUp();
}).catch(function(err) {
// 再生失敗時は何もしない（次の操作を待つ）
});
} else {
cleanUp();
}
}
function cleanUp() {
window.removeEventListener('click', forcePlay);
window.removeEventListener('touchstart', forcePlay);
window.removeEventListener('scroll', forcePlay);
}
// 2. 自動再生が規制されている（Promiseが失敗する、または一時停止状態）場合
if (playPromise !== undefined) {
playPromise.catch(function(error) {
// ユーザーの何らかの初期インタラクション（クリック、タップ、スクロール）を検知して強制再生
window.addEventListener('click', forcePlay, { passive: true });
window.addEventListener('touchstart', forcePlay, { passive: true });
window.addEventListener('scroll', forcePlay, { passive: true });
});
}
})();
