@charset "UTF-8";

/* -------------------------------------------------
  File name : style.css
---------------------------------------------------- */

/* -----------------------------------------
  0. Fonts
----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* -----------------------------------------
  1. Reset / Base
----------------------------------------- */
html,body{
  margin:0;
  padding:0;
}
img{
  vertical-align:bottom;
}
ul{
  list-style:none;
  margin:0;
  padding:0;
}
figure{
  margin:0;
}
address{
  font-style:normal;
}
button, input, select, textarea{
  font-family:inherit;
  font-size:100%;
}
input[type="submit"]{
  appearance:none;
  -webkit-appearance:none;
}
a{
  color:inherit;
  text-decoration:none;
}
pre{
  white-space:pre-wrap;
  font-family:Noto Sans Japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Noto Sans JP,meiryo,メイリオ,sans-serif !important;
}
em{
  font-style:normal;
  word-break:break-word;
}

.center {
  text-align: center !important;
}

/* -----------------------------------------
  2. Design Tokens
----------------------------------------- */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f0f3f8;
  --text:#002d59;
  --muted:#64748b;
  --line:rgba(15,23,42,.12);
  --line-2:rgba(15,23,42,.18);
  --shadow:0 18px 50px rgba(2,6,23,.10);
  --accent:#002d59;
  --accent-2:#0b4a8f;
  --accent-soft:rgba(0,45,89,.20);
  --white:rgba(255,255,255,1);
  --black:rgba(0,0,0,1);
  --concept-gap:clamp(24px, 6vw, 96px);

  --letter-edit: -10px;
  --letter-fine: -8px;
  --letter-thin: -4px;
  --letter-one: -1px;
  --letter-none: 0;
  --letter-tight: .01em;
  --letter-base: .04em;
  --letter-wide: .06em;
  --letter-max: .08em;
}

/* -----------------------------------------
  3. Document / Scroll
----------------------------------------- */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:16px;
  scroll-behavior:smooth;
  overflow:visible;
}
body.locked{
  overflow:hidden;
}
html:has(.home){
  scrollbar-gutter:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html:has(.home)::-webkit-scrollbar{
  display:none;
}

/* -----------------------------------------
  4. section + eden（fade-in）
----------------------------------------- */
.home section:not(.concept-container,#timeline) {
  padding:min(8vw,5em) 10%;
  text-align: center;
}
.eden{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .9s ease,
    transform .9s ease;
}
.eden.is-visible{
  opacity:1;
  transform:translateY(0);
}
html:not(.js-ready) .eden{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .eden{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* -----------------------------------------
  5. Teaser (Opening)
----------------------------------------- */
#teaser{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1000;
  transition:opacity 1.5s ease;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  transition: opacity 1.5s ease;
}
.bg-video{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:100vh;
  object-fit:cover;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
#counter{
  font-family:'Inter',sans-serif;
  font-size: clamp(5rem,12vw,10rem);
  font-weight:700;
  display:inline-block;
  transform:scaleY(1.1);
  transform-origin:center;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-0.04em;
  color:var(--white);
  text-shadow:0 12px 40px rgba(0,45,89,.18);
}
.designing-text{
  font-style:italic;
  letter-spacing:.2em;
  margin-bottom:2rem;
  color:var(--white);
  position: relative;
  z-index: 2;
}
.skip-btn{
  padding:20px 80px;
  border:1px solid rgba(255,255,255,.4);
  color:var(--white);
  border-radius:50px;
  font-size:1.1em;
  transition:.25s;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.skip-btn:hover{
  background:var(--white);
  color:var(--accent);
  border-color:var(--white);
}
.logo{
  font-size:4rem;
  letter-spacing:1.2rem;
  margin-bottom:1rem;
}
.logo img{
  width:min(40vw,360px);
  height:auto;
  filter:drop-shadow(0 18px 40px rgba(2,6,23,.10));
}
.copy{
  font-size:1.5rem;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  color:var(--text);
}

/* -----------------------------------------
  6. Header
----------------------------------------- */
.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  pointer-events:none;
}
.header-inner{
  width:min(1920px,93%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1;
  pointer-events:auto;
}
.header-logo img{
  width:150px;
  height:auto;
}
.header-nav{
  display:flex;
  gap:40px;
}
.header-nav a{
  color:var(--white);
  font-family:"Lato",sans-serif;
  font-weight:400;
  letter-spacing: var(--letter-base);
  opacity:1;
  transition:.3s;
}
.header-nav a:hover{
  opacity:.75;
}

/* =============================
  hamburger (SP only)
============================= */
.menu_global{
  position:fixed;
  top:min(6vw,2.5em);
  right:calc(min(6vw,4em) - 10px);
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  width:100px;
  height:100px;
  cursor:pointer;
  background:transparent;
  border:0;
  padding:0;
}
.menu_global #ham i {
  font-size:1.5em;
  font-weight:400;
  color:var(--white);
  width: 50px;
  height: 50px;
  background-color: var(--accent-2);
  border-radius: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:.3s ease-in-out;
}
.menu_global #burg i {
  font-size:1.5em;
  font-weight:400;
  color:var(--white);
  width: 50px;
  height: 50px;
  background-color: var(--accent-soft);
  border-radius: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:.3s ease-in-out;
}
#ham,#burg{
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#burg{
  display:none;
}
.nav-open #ham{
  display:none;
}
.nav-open #burg{
  display:flex;
}
/* 重要：ボタン全体で開閉する（×を押しても再トグルしない） */
.menu_global #ham,
.menu_global #burg{
  pointer-events:none;
}

/* =============================
  global nav panel (SP drawer)
============================= */
.black-bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100vh;
  z-index:900;
  background-color:#000;
  opacity:0;
  visibility:hidden;
  transition:all .6s;
  cursor:pointer;
}
.global-sp{
  position:fixed;
  top:0;
  right:-100%;
  width:75%;
  height:100vh;
  background-color:var(--white);
  transition:all .6s;
  z-index:950;
  overflow-y:auto;
  opacity:0;
  pointer-events:none;
}
.nav-open .global-sp{
  right:0;
  opacity:1;
  pointer-events:auto;
}
.nav-open .black-bg{
  opacity:.3;
  visibility:visible;
}

/* =============================
  navi inner
============================= */
.navi{
  width:100%;
  height:100vh;
  padding-inline:max(2em,8vw);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  top:-4vw;
}
.navi-content{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1.5em;
  transition:transform .3s;
}
.navi-content_item{
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:min(1vw,1.4em);
  transition:transform .3s;
}
.navi-content_item ul{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.navi-content_item ul>li a{
  color:var(--black-color);
  font-size:1em;
}

/* global */
@media (max-width: 768px){
  .site-header {
    height: 100px;
  }
  .header-nav {
    display: none;
  }
  .menu_global{
    position:fixed;
    top: 0;
    right: 0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100px !important;
    height:100px !important;
    cursor:pointer;
    background:transparent;
    border:0;
    padding:0;
  }
  .is-light .menu_global{
    position:fixed;
    top: 0;
    right: 0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100px !important;
    height:100px !important;
    cursor:pointer;
    background:transparent;
    border:0;
    padding:0;
  }
}


/* -----------------------------------------
  Product note
----------------------------------------- */
#home .product {
    padding: min(8vw,4em) 10%;
}
#home .product h2{
  padding-block: 2rem;
  text-align: center;
  color:var(--accent);
  font-family:"Lato",sans-serif;
  font-weight:600;
  font-size:clamp(1.8rem,4vw,3rem);
  letter-spacing: var(--letter-none);
  line-height: 1.4;
}
#home .product p {
  padding: 0;
  line-height: 2;
  font-size: 18px;
  text-align: center;
  margin-bottom: 1rem;
}

/* -----------------------------------------
  Concept Common
----------------------------------------- */
.concept-bg{
  position:sticky;
  top:0;
  width:100%;
  overflow:hidden;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  will-change:clip-path,transform;
}
.concept-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(10,10,10,.22));
  pointer-events:none;
}
.ratio-16x9{aspect-ratio:16/9;}
.ratio-2x1{aspect-ratio:2/1;}
.ratio-4x3{aspect-ratio:4/3;}
.ratio-3x2{aspect-ratio:3/2;}
.ratio-5x2{aspect-ratio:5/2;}
.ray::after{
  content:none !important;
}
@media (max-width:900px){
  .concept-bg{
    position:relative;
    top:auto;
    height:auto;
  }
  .concept-bg::before{
    inset:0;
  }
}

/* -----------------------------------------
  Concept Cards（通常）
----------------------------------------- */
.concept-container{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  background:var(--bg);
  padding-block:1em;
}
.concept-card{
  position:relative;
  width:100%;
  height:auto;
  overflow:hidden;
  display:grid;
  align-items:center;
  padding:0;
}
.concept-card .concept-bg{
  z-index:1;
}
.concept-card .concept-bg::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  will-change:transform;
}
.concept-note{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:100%;
  max-width:960px;
}
.concept-note h3{
  margin:0;
  color:var(--white);
  font-size: clamp(28px,6vw,70px);
}
.concept-note p{
  color:var(--white);
  font-size: clamp(14px, 2.8vw, 1.3em);
}
.concept-note a{
  margin-top: 2rem;
  display:inline-flex;
  padding:1rem 3rem;
  border:1px solid var(--line-2);
  background:var(--accent);
  color:var(--white);
  border-radius:50px;
  transition:.3s;
}
.concept-note a:hover{
  color:var(--text);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
}
.concept-note .english{
  padding-inline:10%;
}
.concept-note .english h3{
  font-family:"Lato",sans-serif;
  font-weight:600;
  letter-spacing:var(--letter-tight);
  margin-bottom: 1rem;
}
.concept-note .english p{
  font-family:"Lato",sans-serif;
  font-weight:400;
  letter-spacing:var(--letter-tight);
  text-align:justify;
}
.concept-note .english .sign{
  display:flex;
  justify-content:flex-end;
  margin-top: 1rem;
}
.concept-note .english .sign img{
  width:min(40vw,300px);
  min-width:180px;
  height:auto;
}
/* 通常（concept-container配下）の concept-bg は inline の背景を優先して生かす */
.concept-container .concept-bg{
  background:none;
  background-image:var(--bg-img,unset);
  background-image:inherit;
  background-size:cover;
  background-position:center;
}
/* もしくは、より確実に「通常だけ background-image を上書き復活」 */
.concept-container .concept-bg[style*="background-image"]{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

/* -----------------------------------------
  Concept Duo（DUO）
----------------------------------------- */
.concept-duo{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding-block:5em;
}
.duo-col{
  position:relative;
}
.duo-left{z-index:2;}
.duo-right{z-index:1;}
@media (max-width:900px){
  .concept-duo{
    grid-template-columns:1fr;
  }
}
.concept-duo .concept-bg{
  background-image:var(--bg);
}
.concept-duo .concept-bg::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  transform:scale(var(--scale,1.08));
  will-change:transform;
}

/* transform はここだけで管理（競合させない） */
[data-duo]{
  --duo-x:2.2vw;
  --duo-y-left:0px;
  --duo-y-right:0px;
}
[data-duo] .duo-left{
  transform:translate3d(var(--duo-x),var(--duo-y-left),0);
}
[data-duo] .duo-right{
  transform:translate3d(calc(var(--duo-x) * -1),var(--duo-y-right),0);
}
@media (max-width:900px){
  [data-duo]{
    --duo-x:0px;
  }
  [data-duo] .duo-left{
    transform:translate3d(0,var(--duo-y-left),0);
  }
  [data-duo] .duo-right{
    transform:translate3d(0,var(--duo-y-right),0);
  }
}

/* -----------------------------------------
  8. Models Grid
----------------------------------------- */
@media screen and (max-width: 991px) {
  #models {
    padding-inline: 20px !important;
  }
}
#models {
  padding-block: 3em;
}
.model {
  padding-block: 3em !important;
}
#models h2 {
  color: var(--accent);
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: min(5vw, 2.5em);
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 50px;
}
@media screen and (max-width: 991px) {
  .model-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.model-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.model-card h3 {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: min(5vw, 2rem);
  color: var(--accent);
}
.model-card figure {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.model-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.model-card figure .model-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  filter: blur(8px);
  transition: opacity .5s ease, transform .8s cubic-bezier(.19, 1, .22, 1), filter .5s ease;
  z-index: 2;
}
.model-card:hover .model-hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
}
.model-note {
  display: flex;
  flex-direction: column;
}
.model-note .models_eng {
  color: var(--accent);
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: min(4vw, 1.2em);
}
.model-note .models_jp {
  font-size: 90%;
}

/* -----------------------------------------
  9. News
----------------------------------------- */
#news{
  margin-bottom:min(8vw,4em);
}
#news h2{
  font-family:"Lato",sans-serif;
  font-weight:600;
  font-size:min(5vw,2.5em);
}
.news-list{
  max-width:900px;
  margin:40px auto 0;
  text-align:left;
}
.news-list .news-item:first-child{
  border-top:1px solid var(--line);
}
.news-item{
  display:flex;
  gap:40px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  color:inherit;
  transition:.25s;
}
.news-item:hover{
  background:rgba(0,45,89,.04);
}
.news-date{
  color:var(--muted);
  min-width:100px;
}
.news-title{
  margin:0 0 10px 0;
  font-weight:normal;
  font-size:1.1rem;
  color:var(--text);
}
.news-excerpt{
  margin:0;
  color:var(--text);
  font-size:.9rem;
  line-height:1.6;
}

/* -----------------------------------------
  10. Contact
----------------------------------------- */
#contact{
  position:relative;
  background:none;
  border-top:1px solid rgba(15,23,42,.06);
  overflow:hidden;
  min-height:min(50vh,456px);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-inline: 25px;
  border-radius: 1em;
}
#contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(10,20,40,.55), rgba(10,20,40,.55)),
    url("../images/contact.jpg") center/cover no-repeat;
  filter:blur(2px);
  transform:scale(1.05);
  z-index:0;
}
#contact > div{
  position:relative;
  z-index:1;
}
#contact .contact-content{
  display:flex;
  flex-direction:column;
  gap:1em;
}
#contact h2{
  text-align: center;
  font-family:"Lato",sans-serif;
  font-weight:600;
  font-size:min(5vw,3.5em);
  color:var(--white);
}
#contact p{
  color:var(--white);
  padding-inline: min(5vw, 15px);
}
.cta-button{
  display:inline-block;
  margin-top:1em;
  margin-inline: 15px;
  padding:20px 80px;
  border:1px solid rgba(255,255,255,.4);
  color:var(--white);
  border-radius:50px;
  font-size:1.1em;
  transition:.25s;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  text-align: center;
}
.cta-button:hover{
  background:var(--white);
  color:var(--accent);
  border-color:var(--white);
}

/* -----------------------------------------
  11. Footer & SNS
----------------------------------------- */
.sns-links{
  display:flex;
  justify-content:center;
  gap:50px;
  padding:60px 0;
}
.sns-item{
  color:var(--text);
  font-size: 2.5em;
  letter-spacing:.2em;
  opacity:1;
  transition:.25s;
}
.sns-item:hover{
  opacity:.75;
  color:var(--accent);
}
footer{
  padding:80px 5% 90px;
  border-top:1px solid var(--line);
  text-align:center;
  background:var(--bg);
}
.footer-countdown {
  opacity: 0.8;
  letter-spacing: 0.05em;
  margin-bottom: 2em;
}
.footer-countdown .time {
  font-weight: 500;
  margin-left: 0.3em;
}
.footer-logo{
  font-size:1.8rem;
  letter-spacing:.6rem;
  margin-bottom:40px;
}
.footer-logo img{
  width:min(25vw,160px);
  height:auto;
}
.footer-nav{
  display:flex;
  justify-content:center;
  gap:40px;
  font-size:.85rem;
  color:var(--muted);
  letter-spacing:.1em;
}
.footer-nav li {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  letter-spacing: var(--letter-tight);
}

/* -----------------------------------------
  12. Timeline
----------------------------------------- */
#timeline{
  padding:min(8vw,4em) 10px;
  opacity:1;
  transform:translateY(30px);
  transition:all 1.2s ease;
  text-align:center;
}
#timeline h2{
  font-family:"Lato",sans-serif;
  font-weight:600;
  font-size:min(5vw,2.5em);
}
.timeline-box{
  margin-top:40px;
  padding:80px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
  border-radius:16px;
}
.timeline-social{
  margin-block:50px 0;
}
.timeline-social .eapps-instagram-feed-posts-item{
  border-radius:8px;
  overflow:hidden;
}

/* -----------------------------------------
  13. Hero + Hotspots
----------------------------------------- */
#hero{
  height:100svh;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:none;
}
#hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  background:url('../images/wave2.jpg') center/cover no-repeat;
  transform:translate3d(0,0,0);
  animation:heroSea 18s ease-in-out infinite;
  z-index:0;
  filter:saturate(1.05) contrast(1.02);
}
#hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgb(12 57 98 / 25%), rgb(24 63 100 / 30%));
  z-index:1;
  pointer-events:none;
}
@keyframes heroSea{
  0%{ transform:translate3d(0,0,0) scale(1.03); }
  50%{ transform:translate3d(0,-14px,0) scale(1.03); }
  100%{ transform:translate3d(0,0,0) scale(1.03); }
}
.ship{
  position:relative;
  z-index:2;
  width:min(1200px,92vw);
  aspect-ratio:16/9;
  animation:shipFloat 6s ease-in-out infinite;
}
@keyframes shipFloat{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-6px); }
  100%{ transform:translateY(0px); }
}

/* hotspot base */
.hotspot{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  z-index:2;
}

/* =========================
  PC default（基準）
========================= */
.hs-craft{ --x:72; --y:40; }
.hs-daniel{ --x:40; --y:20; }
.hs-interior{ --x:58; --y:80; }
.hs-exterior{ --x:28; --y:52; }

/* =========================
  LAPTOP
========================= */
@media (max-width:1366px){
  .hs-craft{ --x:70; --y:42; }
  .hs-daniel{ --x:42; --y:18; }
  .hs-interior{ --x:58; --y:78; }
  .hs-exterior{ --x:30; --y:54; }
}

/* =========================
  TAB
========================= */
@media (max-width:1024px){
  .hs-craft{ --x:66; --y:46; }
  .hs-daniel{ --x:44; --y:20; }
  .hs-interior{ --x:60; --y:76; }
  .hs-exterior{ --x:32; --y:56; }
}

/* =========================
  SP
========================= */
@media (max-width:768px){
  .hs-craft{ --x:78; --y:30; }
  .hs-daniel{ --x:22; --y:0; }
  .hs-interior{ --x:78; --y:100; }
  .hs-exterior{ --x:22; --y:88; }
}

.hotspot-btn{
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:6px 8px;
  transition:opacity .18s ease;
  text-shadow:0 2px 18px rgba(255,255,255,.65);
}
.hotspot-btn:focus-visible{
  outline:2px solid rgba(0,45,89,.55);
  outline-offset:3px;
}
.hotspot-plus{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,45,89,.32);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  font-size:22px;
  line-height:1;
  position:relative;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  box-shadow:0 10px 28px rgba(2,6,23,.10);
  color:var(--accent);
}
.hotspot-label{
  font-size:clamp(12px,1.2vw,16px);
  letter-spacing:.04em;
  white-space:nowrap;
  color:var(--white);
}

/* pulse */
.hotspot-plus::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  opacity:.75;
  transform:scale(.8);
  animation:hotspotPulse 1.8s ease-in-out infinite;
}
@keyframes hotspotPulse{
  0%{ opacity:.6; transform:scale(.8); }
  60%{ opacity:0; transform:scale(1.2); }
  100%{ opacity:0; transform:scale(1.2); }
}
.hotspot-btn:hover .hotspot-plus{
  transform:translateZ(0) scale(1);
  background:#fff;
  border-color:rgba(0,45,89,.45);
}
.hotspot.is-open .hotspot-plus{
  transform:rotate(45deg);
}

/* backdrop (SP only) */
#hero .hotspot-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.30);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
  z-index:2;
}
#hero.is-modal-open .hotspot-backdrop{
  opacity:1;
  pointer-events:auto;
  transition-delay:.15s;
}
@media (min-width:769px){
  #hero .hotspot-backdrop{
    display:none;
  }
}

/* popup */
.hotspot-pop{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.82);
  transform-origin:50% 50%;
  width:min(360px,82vw);
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  text-align:center;
  z-index:3;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.hotspot.is-open .hotspot-pop{
  opacity:1;
  pointer-events:auto;
  animation:popupFade .18s cubic-bezier(.33,1,.68,1) both;
}
.hotspot.is-open .pop-media{
  animation:popImage .32s cubic-bezier(.22,1.4,.36,1) both;
  animation-delay:.08s;
}
@keyframes popupFade{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.82); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes popImage{
  0%{ transform:scale(.55); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

/* popup contents */
.pop-media{
  width:150px;
  height:150px;
  border-radius:50%;
  margin:0 auto 12px;
  border:1px solid rgba(255,255,255,.9);
  padding:6px;
  box-sizing:border-box;
  transform:scale(.55);
  opacity:0;
  backdrop-filter:blur(10px);
  display:block;
  position:relative;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition: .3s ease-in-out;
}
@media screen and (min-width:1680px){
  .pop-media{
    width:210px;
    height:210px;
    transition: .3s ease-in-out;
  }
}
.pop-media_inner{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.pop-media_inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1), filter .28s ease;
  will-change:transform;
}
.pop-media::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.pop-media:hover .pop-media_inner img{
  transform:scale(1.06);
  filter:brightness(1.08) contrast(1.04);
}
.pop-media:hover::after{
  opacity:1;
}
.pop-media:active .pop-media_inner{
  transform:translateY(0) scale(.98);
}
.pop-media:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
}
.pop-title,
.pop-text{
  color:var(--white);
  text-shadow:0 2px 18px rgba(255,255,255,.65);
}

/* hide + button when open */
.hotspot.is-open .hotspot-btn{
  opacity:0;
  pointer-events:none;
}

/* responsive */
@media (max-width:768px){
  .ship{
    width:92vw;
    aspect-ratio:4/3;
  }
  .hotspot-btn {
    flex-direction: column;
  }
  .hotspot-plus{
    width:40px;
    height:40px;
    font-size:24px;
  }
  .hotspot-label{
    font-size:12px;
  }
  .hotspot.is-open{
    z-index:10;
  }
  .hotspot-pop{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,calc(-50% - 12px)) scale(.96);
    transform-origin:50% 50%;
    width:min(150px,88vw);
  }
  .hotspot.is-open .hotspot-pop{
    transform:translate(-50%,-50%) scale(1);
  }
}