/* ===============================
RESET
=============================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}
img{
max-width:100%;
display:block;
}
a{
text-decoration:none;
color:#fff;
}
body{
font-family:sans-serif;
color:#fff;
background:#000;
}
html,body{
overflow-x:hidden;
}

/* ===============================
HEADER
=============================== */
.header{
position:absolute;
top:0;
left:0;
width:100%;
z-index:10;
}
.header__inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 50px 20px 60px;
}
.header__logo img{
width:200px;
}
.header__external img{
width:28px;
}

/* ===============================
HERO
=============================== */
.hero{
position:relative;
padding:10px 0 0px;
}
.hero::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:200px;
background:linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.3) 70%,
rgba(0,0,0,1) 100%
);
pointer-events:none;
z-index:4;
}
/* 背景 */
.hero__bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
linear-gradient(
rgba(0,0,0,0.35),
rgba(0,0,0,0.35)
),
url("../images/bg.jpg") center / cover no-repeat;
z-index:1;
}
/* 中央配置 */
.hero__center{
width:min(720px,75vw);
height:min(720px,75vw);
position:relative;
margin:0 auto;
z-index:3;
}
/* 地球 */
.hero__earth{
position:absolute;
top:50%;
left:50%;
width:55%;
transform:translate(-50%,-50%);
z-index:1;
}
/* 建物リング */
.hero__buildings{
position:absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
transform-origin:center;
animation:rotate 60s linear infinite;
z-index:2;
will-change:transform;
}

/* 回転 */
@keyframes rotate{
  from{
  transform:translate(-50%,-50%) rotate(0deg);
  }
  to{
  transform:translate(-50%,-50%) rotate(360deg);
  }
}

/* ===============================
CITY NAV
=============================== */
.city-nav{
margin-top:-60px;
padding-bottom:40px;
position:relative;
z-index:5;
}
.city-nav__inner{
max-width:1200px;
margin:auto;
padding:0 40px;
}
.is-disabled{
pointer-events:none;
cursor:default;
}
/* JAPAN */
.city-nav__japan{
border:1px solid rgba(255,255,255,0.6);
margin-bottom:28px;
}
.city-nav__japan-link{
display:flex;
align-items:center;
padding:14px 30px;
position:relative;
transition:.3s;
}
.city-nav__japan-link:hover{
box-shadow:0 0 20px rgba(255,255,255,0.15);
}
/* JAPAN title */
.city-nav__japan-title{
margin-left:100px;
margin-right:80px;
display:flex;
flex-direction:column;
align-items: center;
}
.city-en{
font-size:22px;
font-weight: 600;
letter-spacing:3px;
}
.city-ja{
font-size:14px;
margin-top:4px;
}
/* JAPAN cities */
.city-nav__cities{
display:flex;
flex:1;
justify-content:space-around;
}
.city-nav__cities .city{
padding:0 30px 0 50px;
text-align:center;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
}
.city-nav__cities .city + .city::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:32px;
background:rgba(255,255,255,0.4);
}
.city-en--sub{
font-size:18px;
color:#aaa;
letter-spacing:2px;
}
.city-nav__cities .city-ja{
color:#aaa;
}
/* GRID */
.city-nav__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}
/* CITY CARD */
.city-card{
border:1px solid rgba(255,255,255,0.6);
padding:14px 30px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
transition:.3s;
}
/* hover */
.city-card:hover{
border-color:#fff;
box-shadow:
0 0 12px rgba(255,255,255,0.15),
0 0 25px rgba(255,255,255,0.08);
}
.city-card::before,
.city-nav__japan-link::before{
content:"";
position:absolute;
inset:0;
background:rgba(255,255,255,0);
transition:.45s;
pointer-events:none;
}
.city-card:hover::before,
.city-nav__japan-link:hover::before{
background:rgba(255,255,255,0.14);
}
/* arrow */
.city-arrow{
position:absolute;
left:24px;
top:50%;
transform:translateY(-50%);
width:14px;
transition:transform .35s ease;
will-change:transform;
}
/* arrow animation */
.city-card:hover .city-arrow,
.city-nav__japan-link:hover .city-arrow{
transform:translateY(-50%) translateX(8px);
}
/* city text */
.city-text{
display:flex;
flex-direction:column;
}

.city-nav__japan,
.city-card{
opacity:0.55;
}

.open-info{
text-align:center;
margin-top:-130px;
margin-bottom:100px;
position:relative;
z-index:6;
}
.open-info span{
font-size:28px;
letter-spacing:6px;
font-weight:600;
background:rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6px);
box-shadow:0 0 25px rgba(0,0,0,0.6);
border-bottom:1px solid rgba(255,255,255,0.75);
padding:10px 20px;
text-shadow:
0 0 6px rgba(255,255,255,0.5),
0 0 14px rgba(255,255,255,0.35),
0 0 24px rgba(255,255,255,0.2);
}


@media (max-width:1000px){
  .city-nav__japan-link{
  flex-wrap:wrap;
  justify-content:center;
  }
  .city-nav__japan-title{
  width:100%;
  text-align:center;
  margin-bottom:10px;
  }
  .city-nav__cities{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  }
  .city-nav__cities .city{
  padding:0 10px;
  }
}

/* ===============================
SP
=============================== */

@media (max-width:767px){
  .header__inner {
    padding: 30px 30px 20px 30px;
  }
  .header__logo img {
    width: 140px;
  }
  .hero__center{
  width:88vw;
  height:88vw;
  max-width:520px;
  max-height:520px;
  }
  .city-nav{
  margin-top:-40px;
  padding-bottom:30px;
  }
  .city-nav__inner{
  padding:0 20px;
  }
  .city-nav__japan{
  width:100%;
  }
  .city-nav__grid{
  width:100%;
  }
  .city-nav__japan-link{
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:22px 16px;
  }
  .city-nav__japan-title{
  margin:0;
  text-align:center;
  }
  .city-nav__japan-title .city-en{
  font-size:6vw;
  letter-spacing:3px;
  }
  .city-nav__japan-title .city-ja{
  font-size:3.4vw;
  }
  .city-nav__cities{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  width:100%;
  margin-top:10px;
  }
  .city-nav__cities .city{
  text-align:center;
  padding:14px 10px;
  position:relative;
  }
  .city-nav__cities .city::before{
  display:none;
  }
  .city-nav__cities .city::after{
  display:none;
  }
  .city-nav__cities{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  position:relative;
  }
  .city-nav__cities::before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:1px;
  height:36%;
  background:rgba(255,255,255,0.35);
  }
  .city-nav__cities::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:8px;
  width:1px;
  height:36%;
  background:rgba(255,255,255,0.35);
  }
  .city-card{
  height:110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:18px 10px 18px 34px;
  }
  .city-card .city-en{
  font-size:4.8vw;
  letter-spacing:2px;
  }
  .city-card .city-ja{
  font-size:3vw;
  }
  .city-nav__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  }
  .city-arrow{
  left:14px;
  width:3.5vw;
  }
  .city-card:hover{
  background:rgba(255,255,255,0.08);
  }
  .city-card:hover .city-arrow{
  transform:translateY(-50%) translateX(6px);
  }
  .open-info{
  margin-top:-90px;
  margin-bottom:70px;
  }
  .open-info span{
  font-size:5vw;
  letter-spacing:3px;
  }
}