/* ================= is'eye | final CSS (v40‑2025‑07‑13) ================= */
:root{
  --header-core : 280px;
  --main-start  : 200px;
  --footer-h    : 155px;
  --copyright-h : 40px;       /* ※ 600px 未満では 0 に上書き */
}

/* ------- Reset & Base ------------------------------------ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{
  display:flex;flex-direction:column;min-height:100vh;
  font-family:'source-han-sans-vf',sans-serif;
  background:linear-gradient(to bottom,#222 12%,#000 98%);
  background-attachment:fixed;color:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:#fff;text-decoration:none}
a:hover{opacity:.7}
body.no-scroll{overflow:hidden}

/* ------- Welcome Overlay ---------------------------------- */
#welcome-overlay{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:100}
#welcome-video{width:640px;height:360px;max-width:90%;object-fit:contain;pointer-events:none}

/* ------- Header (smooth blur) ----------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--header-core);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:3rem 1rem 1rem;overflow:hidden;
}
header::before{
  content:"";position:absolute;left:-5px;right:-5px;top:-5px;height:250px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 70%,transparent 100%);
  pointer-events:none;z-index:-1;
}
.logo{cursor:pointer}
.logo img{height:74px}

/* ------- Navigation --------------------------------------- */
nav{position:relative;margin-bottom:0}
nav ul{
  list-style:none;display:flex;gap:6rem;
  font-size:.94rem!important;letter-spacing:.06em;
  font-family:myriad-pro,sans-serif;font-weight:600!important;
  line-height:1.2!important;height:24px;align-items:center;
}
nav li{position:relative}
nav a{
  display:inline-block;color:#fff;padding-bottom:6px;
  font-family:myriad-pro,sans-serif;font-weight:600!important;
  font-size:.94rem!important;line-height:1!important;white-space:nowrap;
  transition:opacity .3s ease;
}
.rgb-indicator{position:absolute;bottom:0;left:0;height:6px;width:0;background:linear-gradient(#00ff40 0% 33%,#ff2121 33% 66%,#0066ff 66% 100%);pointer-events:none}
.wf-loading nav,.wf-loading nav a{font-family:Arial,sans-serif!important;font-size:.94rem!important;letter-spacing:.06em!important}

/* ------- Main Content Sections --------------------------------- */
main{
  flex:1;
  padding-top:var(--main-start);
  padding-bottom:calc(var(--footer-h) + var(--copyright-h) + 50px);
  box-sizing:border-box;
}
.about-content,.outdoor-content{
  position:fixed;top:0;left:0;right:0;padding-top:var(--main-start);
  overflow-y:auto;z-index:5;box-sizing:border-box;
}
.about-content{bottom:var(--copyright-h);padding-bottom:2rem}
.outdoor-content{bottom:calc(var(--footer-h) + var(--copyright-h));padding-bottom:2rem}

/* ------- Video Grid --------------------------------------- */
.grid-container{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:1rem;padding:1rem;max-width:1000px;margin:0 auto}
.grid-container .grid-item:first-child{grid-column:span 2;grid-row:span 2}
.grid-item{position:relative;cursor:pointer;opacity:0;transform:translateY(100px)}
.grid-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:12px}
.grid-item p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.5rem;font-weight:600;font-size:.8rem;line-height:1.2;background:rgba(0,0,0,.65);color:#fff;text-align:center;font-family:'source-han-sans-vf',sans-serif;opacity:0;transition:opacity .3s;pointer-events:none}
.grid-item:hover p,.grid-item:focus p{opacity:1}
@supports not (aspect-ratio:1/1){.grid-item img{height:0;padding-top:100%}}

/* ------- Modal -------------------------------------------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden}
.modal-content{position:relative;width:90vw;max-width:1280px;padding:0;overflow:visible}
.modal-content iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:4px}
.map-modal-content{width:80vw;height:80vh;max-width:none}
.map-modal-content iframe{aspect-ratio:auto;height:100%}
#modalClose,#mapModalClose{position:absolute;top:10px;right:15px;font-size:1.5rem;color:#fff;cursor:pointer;z-index:10;transition:opacity .3s ease}
#modalClose:hover,#mapModalClose:hover{opacity:.7}
.modal-desc{position:relative;max-height:30vh;width:60%;margin:1rem auto 0;text-align:left;line-height:1.6;color:#ddd;overflow-y:auto;white-space:pre-wrap}

/* ------- Outdoor Section ---------------------------------- */
.outdoor-container{width:100%;max-width:1000px;margin:0 auto;padding:0 1rem;min-height:100%;display:flex;flex-direction:column}
.outdoor-main-content{flex:1;display:flex;flex-direction:column;gap:2rem;margin-top:-10px}
.available-video-wrapper{position:relative;width:100%;max-width:1000px;margin-top:2rem}
.available-video-wrapper video{width:100%;height:auto;display:block}
.sound-toggle{position:absolute;bottom:1rem;right:1rem;background:none;border:none;padding:.5rem;cursor:pointer;transition:opacity .3s ease;z-index:10;display:flex;align-items:center;justify-content:center}
.sound-toggle:hover{opacity:.7}
.sound-toggle img{width:24px;height:24px;display:block}
.sound-toggle.muted .sound-on{display:none}
.sound-toggle.muted .sound-off{display:block}
.sound-toggle:not(.muted) .sound-on{display:block}
.sound-toggle:not(.muted) .sound-off{display:none}

.greeinn-info{display:flex;align-items:center;gap:1.5rem;width:100%}
.greeinn-logo img{height:50px;width:auto;display:block}
.greeinn-separator{width:2px;height:50px;background:rgba(255,255,255,.3);flex-shrink:0}
.greeinn-text{flex:1 1 auto;max-width:none;font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 500;font-size:.85rem;line-height:1.8;letter-spacing:.03em;color:#fff}
.greeinn-button{display:inline-block;padding:.8rem 2rem;border:1px solid #fff;border-radius:4px;font-size:.85rem;letter-spacing:.05em;transition:all .3s ease}
.greeinn-button:hover{background:#fff;color:#000}

/* ------- Social Links ---------------------------------- */
.social-links{display:flex;gap:1.5rem;justify-content:center;align-items:center;margin-top:.5rem}
.social-links a{display:inline-flex;align-items:center;transition:opacity .3s ease}
.social-links a:hover{opacity:.7}
.social-links img{width:20px;height:20px;display:block}

/* ------- About & Access Section Layout -------------------------- */
.about-container{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}
.building-photo-single{margin-top:1rem}
.building-photo-single img{width:100%;max-width:500px;height:auto;display:block;margin:0 auto}
.company-info{width:100%;max-width:600px;margin:1rem auto 0}
.info-grid{display:flex;flex-direction:column;gap:1rem}
.info-row{display:grid;grid-template-columns:100px 1fr;gap:2.5rem;align-items:baseline}
.info-row .label{font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 700;color:#fff;text-align:right;font-size:.75rem;letter-spacing:.08em;line-height:1.4}
.info-row .content{font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 500;color:#fff;font-size:.85rem;line-height:1.4;letter-spacing:.03em}
.info-row .content ol{list-style:none;counter-reset:item;padding:0}
.info-row .content ol li{counter-increment:item;position:relative;padding-left:1.8em;margin-bottom:1rem;font-size:.85rem}
.info-row .content ol li:last-child{margin-bottom:0}
.info-row .content ol li::before{content:counter(item) ".";position:absolute;left:0;font-weight:600}

/* ------- Footers & Copyright ------------------------ */
footer#about,#outdoor-footer,.copyright-fixed{
  background:transparent;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
footer#about,#outdoor-footer{
  position:fixed;bottom:var(--copyright-h);left:0;right:0;z-index:25;
  display:flex;flex-direction:column;align-items:center;
}
footer#about{height:var(--footer-h)}
#outdoor-footer{height:auto}

.footer-unlock-box{width:100%;display:flex;justify-content:center;align-items:center;padding:.5rem 1rem;background:transparent}
.unlock-inline{max-width:1000px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem}
.unlock-label{font-weight:800;white-space:nowrap;color:#ffffff;letter-spacing:.07em}
.unlock-inline input{padding:.35rem .6rem;min-width:100px;font-size:.75rem;border:1px solid #555;border-radius:4px;background:#111;color:#fff}
.unlock-inline button{padding:.20rem .7rem;font-size:.75rem;border:none;border-radius:4px;background:#0070f3;color:#fff;cursor:pointer}

.footer-columns{width:100%;background:transparent;display:flex;justify-content:center;gap:2rem;padding:.5rem 0 0 0;flex:1}
footer#about .footer-columns{flex:0 0 auto;padding-top:.4rem;padding-bottom:0}
#outdoor-footer .footer-columns{padding-top:.5rem;padding-bottom:0;align-items:center}

footer#about .column,#outdoor-footer .column{text-align:left;padding:0 1rem}
#outdoor-footer .column.contact{text-align:center}

footer#about .column h4{
  font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 700;
  font-size:.75rem;line-height:1.4;margin-bottom:.6rem;letter-spacing:.08em;
}
#outdoor-footer .column h4{
  font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 700;
  font-size:.75rem;line-height:1.4;margin-bottom:.3rem;letter-spacing:.08em;
}

footer#about .column p:last-child,footer#about .column a:last-child{margin-bottom:0}
footer#about .column p,footer#about .column a{font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 500;font-size:.85rem;line-height:1.4;margin-bottom:.1rem}
#outdoor-footer .column p,#outdoor-footer .column a{font-family:source-han-sans-vf,sans-serif;font-variation-settings:'wght' 500;font-size:.85rem;line-height:1.3;margin-bottom:0;letter-spacing:.03em}

.map-link{cursor:pointer}
.map-link p{margin-bottom:0}
footer#about .column p,footer#about .column a,.info-row .content a,.map-link{transition:opacity .3s ease}
footer#about .column.studio p:hover{opacity:.7}
.map-link:hover{opacity:.7}

.copyright-fixed{
  position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:1rem;color:#aaa;
  font-family:myriad-pro,sans-serif;font-weight:700;z-index:30;
  transform:translateY(60px);opacity:0;visibility:hidden;
  height:var(--copyright-h);line-height:var(--copyright-h);
}
.copyright-fixed.show{opacity:1;visibility:visible;transform:translateY(0)}

/* ------- Responsive ≥900 --------------------------------- */
@media(max-width:900px){
  .greeinn-info{flex-direction:column;gap:1.5rem}
  .greeinn-separator{display:none}
}

/* ------- Responsive ≤600 (breakpoint adjustments) -------- */
@media(max-width:600px){

  /* -- 変数上書き：コピーライト高さを 0 に -- */
  :root{ --copyright-h: 0px; }

  /* Header & Logo */
  header{padding:.8rem 1.5rem}
  header::before{height:200px}
  .logo img{height:40px}

  /* Page top offsets */
  main#video{padding-top:150px;padding-bottom:calc(var(--footer-h) + 30px);} /* 余白 30px 程度に調整 */
  .about-content,
  .outdoor-content{
    padding-top:135px;
    bottom:var(--footer-h);                /* コピーライト分を削除 */
  }

  /* Footer flush to bottom */
  footer#about,
  #outdoor-footer{bottom:0}

  /* Hide copyright */
  .copyright-fixed{display:none!important}

  /* Footer columns */
  .footer-columns{gap:.25rem;justify-content:center;padding:1rem .5rem}
  footer#about .column{padding:0 .5rem}

  /* About – centre align & tighter spacing */
  .about-container{padding:0 1.5rem}       /* 左右に余白を追加 */
  .company-info{text-align:center}
  .info-row{grid-template-columns:1fr;gap:.05rem} /* 項目と内容の余白さらに削減 */
  .info-row .label{text-align:center;margin-bottom:.08rem}
  .info-row .content{padding-left:0}

  /* Typography scaling */
  .unlock-inline,
  footer#about .column h4,
  #outdoor-footer .column.contact h4,
  .info-row .label{font-size:.65rem}
  .grid-item p,
  footer#about .column p,
  footer#about .column a,
  .info-row .content,
  .info-row .content ol li,
  .info-row .content a,
  .greeinn-text,
  #outdoor-footer .column.contact p,
  #outdoor-footer .column.contact a{font-size:.75rem}

  /* Grid & misc */
  .grid-container{padding:0 1rem;grid-template-columns:repeat(3,1fr)}
  nav ul{gap:2rem}
  nav a{font-size:.75rem!important}

  /* Outdoor section */
  .sound-toggle{bottom:.5rem;right:.5rem}
  .sound-toggle img{width:20px;height:20px}
  .greeinn-logo img{height:40px}
  .greeinn-text br{display:none}
  .building-photo-single img{max-width:100%}

  #outdoor-footer{height:auto}
  #outdoor-footer .footer-columns{padding:1rem 0}
  #outdoor-footer .social-links{gap:1rem}
  #outdoor-footer .social-links img{width:16px;height:16px}
}
/* ============================  End of v40  ============================ */