.hero00{

position:relative;
width:100%;
height:100dvh;
min-height:100vh;

padding:12px;

display:flex;
flex-direction:column;

background:

linear-gradient(
0deg,
rgba(0,0,0,.35),
rgba(0,0,0,.00),
rgba(0,0,0,.00),
rgba(0,0,0,.55),
rgba(0,0,0,.35)
),

url(../images/hero-bg.jpg);

background-size:cover;
background-position:center;
background-repeat:no-repeat;

overflow:hidden;
}

.hero00::before{

content:"";

position:absolute;
inset:0;

background:
radial-gradient(
circle at 30% 20%,
rgba(255,255,255,.12),
transparent 40%
);

pointer-events:none;
}

.hero00::after{

content:"";

position:absolute;
inset:0;

background:

radial-gradient(
circle at 15% 15%,
rgba(255,255,255,.18),
transparent 30%
),

radial-gradient(
circle at 85% 25%,
rgba(120,180,255,.08),
transparent 35%
),

radial-gradient(
circle at 50% 100%,
rgba(255,180,120,.08),
transparent 45%
);

pointer-events:none;

mix-blend-mode:screen;

}

.top-bar00{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-top: 5px;
}

.tokyo-time{

color:#fff;
}

.time-label{

font-size:11px;

font-family:'font2';

text-transform:uppercase;

color:rgba(255,255,255,.55);

margin-bottom:3px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}

.time-value{

font-size:14px;

font-weight:500;

font-family:'font2';

color:rgba(255,255,255,.92);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}

.top-buttons{

display:flex;
gap:10px;
}

.glass-btn{

position:relative;

width:50px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

border-radius:50%;

background:
linear-gradient(
135deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);

backdrop-filter:
blur(6px)
saturate(160%)
brightness(1.15);

-webkit-backdrop-filter:
blur(6px)
saturate(160%)
brightness(1.15);

/*border-top:
1px solid rgba(255,255,255,.32);

border-left:
1px solid rgba(255,255,255,.20);

border-right:
1px solid rgba(255,255,255,.10);

border-bottom:
1px solid rgba(255,255,255,.05);*/

box-shadow:

0 12px 40px rgba(0,0,0,.28),

inset 0 1px 0 rgba(255,255,255,.25),

inset 0 -1px 0 rgba(255,255,255,.04);

transition:.4s ease;

cursor:pointer;

}

.glass-btn::before{

content:"";

position:absolute;

left:3px;
right:3px;
top:0px;

height:48%;

border-radius:999px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.38),
rgba(255,255,255,.12) 35%,
transparent 100%
);

pointer-events:none;

}

.glass-btn::after{

content:"";

position:absolute;

width:90%;
height:90%;

top:-20%;
right:-20%;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.45) 0%,
rgba(255,255,255,.18) 30%,
rgba(255,255,255,.05) 50%,
transparent 75%
);

}

.glass-btn:hover{

transform:
translateY(-3px)
scale(1.03);

box-shadow:

0 18px 50px rgba(0,0,0,.35),

0 0 25px rgba(255,255,255,.12);

}

.glass-btn svg{

width:22px;
height:22px;

stroke:#fff;
fill:none;
/*stroke-width:2;*/
}

.slogan{

position:relative;
z-index:2;

margin-top:70px;

max-width:650px;
}

.slogan h1{

color:#fff;

font-family:'h5web';

letter-spacing:5px;

line-height:1.05;

font-size:
clamp(48px,8vw,88px);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.slogan p{

margin-top:4px;

font-size:15px;
font-family:'font2';

color:#fff;

letter-spacing:0px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.bottom-grid{

margin-top:auto;

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;

position:relative;
z-index:2;
margin-bottom: 55px;
}

.left-column,
.right-column{

display:flex;
flex-direction:column;
gap:12px;
}

.glass-card{

position:relative;

overflow:hidden;

/*background:

linear-gradient(
135deg,
rgba(255,255,255,.10),
rgba(255,255,255,.04)
);*/

backdrop-filter:
blur(6px)
saturate(160%)
brightness(1.15);

-webkit-backdrop-filter:
blur(6px)
saturate(160%)
brightness(1.15);

/*border-top:
1px solid rgba(255,255,255,.25);

border-left:
1px solid rgba(255,255,255,.18);

border-right:
1px solid rgba(255,255,255,.08);

border-bottom:
1px solid rgba(255,255,255,.05);*/

border-radius:12px;

box-shadow:

0 10px 18px rgba(0,0,0,.30),

inset 0 1px 0 rgba(255,255,255,.25),

inset 0 -1px 0 rgba(255,255,255,.04);

}

.glass-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:45%;

background:

linear-gradient(
180deg,
rgba(255,255,255,.22),
rgba(255,255,255,.08),
transparent
);

pointer-events:none;

}

.glass-card::after{

content:"";

position:absolute;

top:-80px;
right:-80px;

width:280px;
height:280px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.12) 0%,
rgba(255,255,255,.06) 30%,
rgba(255,255,255,.02) 55%,
transparent 75%
);

pointer-events:none;

}



.video-card{

/*aspect-ratio:1;*/
height: 166px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

cursor:pointer;
}

.play-circle{
margin-bottom: 15px;
width:50px;
height:50px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:20px;

color:#fff;

background:
linear-gradient(
135deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
);

backdrop-filter:
blur(6px)
saturate(160%)
brightness(1.15);

-webkit-backdrop-filter:
blur(6px)
saturate(160%)
brightness(1.15);

box-shadow:

0 10px 30px rgba(0,0,0,.30),

inset 0 1px 0 rgba(255,255,255,.25);

}

.play-circle svg{

width:32px;
height:32px;

stroke:#fff;

fill:none;

}

.play-circle::before{

content:"";

position:absolute;

left:3px;
right:3px;
top:0px;

height:68%;

border-radius:50%;

background:

linear-gradient(
180deg,
rgba(255,255,255,.38),
rgba(255,255,255,.12) 35%,
transparent 100%
);

pointer-events:none;

}

.play-circle::after{

content:"";

position:absolute;

width:90%;
height:90%;

top:-20%;
right:-20%;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.45) 0%,
rgba(255,255,255,.18) 30%,
rgba(255,255,255,.05) 50%,
transparent 75%
);

}

.video-title{

color:#fff;
font-size:14px;
font-family:'font2';
}

.video-sub{

color:rgba(255,255,255,1);
margin-top:0px;
font-size: clamp(9px, 2.5vw, 10px);
font-family:'font2';
}

.small-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;
}

.small-card{

/*aspect-ratio:1;*/
height: 66px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.small-icon{
color: #ffffff;
font-size:34px;
}

.small-title{

color: rgba(255, 255, 255, 1);
    margin-top: 0px;
font-size: clamp(9px, 2.5vw, 10px);
    font-family: 'font2';
text-align:center;
margin-bottom: 6px;
}

.info-card{

height:120px;

padding:18px;

display:flex;
align-items:center;
gap:10px;
}

.info-icon{
color: #ffffff;
font-size:34px;
    margin-bottom: 4px;
    margin-left: -2px;
}

.info-content h3{

    color: #fff;
    font-size: 14px;
    font-family: 'font2';
}

.info-content p{

    color: rgba(255, 255, 255, 1);
    margin-top: 0px;
    font-size: clamp(9px, 2.5vw, 10px);
    font-family:'font2';
}

.booking-card{

/*aspect-ratio:1;*/
height: 166px;

padding:18px;

position:relative;
}

.booking-card h3{

color: #fff;
    font-size: 14px;
    font-family: 'font2';
}

.booking-card p{

    color: rgba(255, 255, 255, 1);
    margin-top: 0px;
    font-size: clamp(9px, 2.5vw, 10px);
    font-family: 'font2';
}

.arrow-btn{
  width: 150px;
  height: 110px;
}

.arrow-btn img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：完整显示不裁剪 */
  display: block;
}

@media(max-width:768px){

.slogan{

margin-top:30px;
}

.bottom-grid{

grid-template-columns:1fr 1fr;
}

.info-card{

height:66px;
}

.booking-card h3{

font-size:13px;
}

}



.video-modal{

position:fixed;
inset:0;

display:none;

align-items:center;
justify-content:center;

z-index:99999;

}

.video-modal.active{

display:flex;

}

.video-overlay{

position:absolute;
inset:0;

/*background:rgba(0,0,0,.85);*/

backdrop-filter:blur(10px);

}

.video-wrap{

position:relative;

width:min(90vw,1200px);

z-index:2;

}

.video-wrap video{

width:100%;
display:block;

border-radius:20px;

}

.video-close{

position:absolute;

right:-15px;
top:-15px;

width:48px;
height:48px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:20px;

color:#fff;

background:rgba(255,255,255,.15);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

}





.haiya-section {
  position: relative;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  background: #fff;
}

/* 日本地图背景 */
.map-bg {
  position: absolute;
  width: 96%;
  height: 100%;
  background: url("../images/japan-map.png") no-repeat center;
  background-size: contain;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

/* 左上文字 */
.text-slider {
    position: absolute;
    top: 60px;
    left: 50px;
    font-size: 50px;
    line-height: 50px;
}

.slide {
  position: absolute;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.8s ease;
  font-family: 'font1';
}

.slide.active {
  opacity: 1;
  transform: translateY(0);
}

/* 车辆整体 */
.car-wrap {
  position: absolute;
  top: 40%;
  right: -200px;
  width: 500px;
  animation: drive 10s linear infinite;
}

/* 车本体 */
.car {
  position: relative;
  width: 100%;
}

/* 车图 */
.car img {
  width: 100%;
  display: block;
}

/* 轮胎 */
.wheel {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url("../images/lun.png") no-repeat center;
  bottom: 102px;
  animation: spinReverse 0.2s linear infinite;
}

.wheel.front {
  right: 88px;
}

.wheel.back {
  left: 73px;
}

@keyframes spinReverse {
  100% {
    transform: rotate(-360deg);
  }
}

/* 车移动（循环往返） */
@keyframes drive {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-30vw);
  }
  100% {
    transform: translateX(0);
  }
}

/* 轮胎旋转 */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}