/* ============================
	Top
============================ */

/* loading
-------------------------------- */

#loading { position:fixed; display:flex; justify-content:center; align-items:center; flex-direction:column; top:0; left:0; width:100%; height:100%; z-index:2000; background-color:#000; transition:opacity 0.8s ease, visibility 0.8s ease; }
#loading.is-loaded { opacity:0; visibility:hidden; pointer-events:none; }
#ld-logo { display:block; width:300px; aspect-ratio:360 / 180; background:url(../img/common/f_logo.png) center center no-repeat; background-size:cover; opacity:0; animation:logoApproach 3s ease-out forwards; }
#loading-bar-wrap { display:block; width:100%; height:3px; background:#222; margin-top:40px; overflow:hidden; }
#loading-bar { display:block; width:0%; height:100%; background:#555; transition:width 0.1s linear; }

@keyframes logoApproach {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1.0) translateY(0);
  }
}



/* hero
-------------------------------- */

#hero { aspect-ratio:1080 / 850; position:relative; max-width:1440px; margin:auto; }
:root{
  --hero-w:1080;
  --hero-h:850;
  --logo-t:36;
  --logo-l:73;
  --logo-w:272;
  --logo-h:563;
  --mv-area-t:0;
  --mv-area-l:432;
  --mv-area-w:620;
  --mv-area-h:850;
  --mv-t1-t:0;
  --mv-t1-l:612;
  --mv-t1-w:36;
  --mv-t1-h:850;
  --mv-t2-t:0;
  --mv-t2-l:-30;
  --mv-t2-w:36;
  --mv-t2-h:850;
  --mv-w:620;
  --mv-h:850;
  --oa-t:632;
  --oa-l:0;
  --oa-w:430;
  --oa-h:113;
  --sns-t:761;
  --sns-l:103;
  --sns-w:229;
  --sns-h:66;
}

#hero-logo,
#hero-mv-area,
#hero-mv-t1,
#hero-mv-t2,
#hero-mv,
#hero-oadate { position:absolute; background-position:center center; background-repeat:no-repeat; background-size:cover; }

#hero-logo {
  top:calc(var(--logo-t) / var(--hero-h) * 100%);
  left:calc(var(--logo-l) / var(--hero-w) * 100%);
  width:calc(var(--logo-w) / var(--hero-w) * 100%);
  aspect-ratio:var(--logo-w) / var(--logo-h);
  background-image:url(../img/top/hero_logo.png);
}

#hero-mv-area {
  top:calc(var(--mv-area-t) / var(--hero-h) * 100%);
  left:calc(var(--mv-area-l) / var(--hero-w) * 100%);
  width:calc(var(--mv-area-w) / var(--hero-w) * 100%);
  aspect-ratio:var(--mv-area-w) / var(--mv-area-h);
}

#hero-mv-t1 {
  display:block;
  z-index:2;
  top:calc(var(--mv-t1-t) / var(--mv-area-h) * 100%);
  left:calc(var(--mv-t1-l) / var(--mv-area-w) * 100%);
  width:calc(var(--mv-t1-w) / var(--mv-area-w) * 100%);
  aspect-ratio:var(--mv-t1-w) / var(--mv-t1-h);
  background-image:url(../img/top/hero_t1.png);
}

#hero-mv-t2 {
  display:block;
  z-index:2;
  top:calc(var(--mv-t2-t) / var(--mv-area-h) * 100%);
  left:calc(var(--mv-t2-l) / var(--mv-area-w) * 100%);
  width:calc(var(--mv-t2-w) / var(--mv-area-w) * 100%);
  aspect-ratio:var(--mv-t2-w) / var(--mv-t2-h);
  background-image:url(../img/top/hero_t2.png);
}

#hero-mv {
  z-index:1;
  top:0;
  left:0;
  width:100%;
  aspect-ratio:var(--mv-w) / var(--mv-h);
  background-image:url(../img/top/hero_mv.jpg);
}

#hero-oadate {
  top:calc(var(--oa-t) / var(--hero-h) * 100%);
  left:calc(var(--oa-l) / var(--hero-w) * 100%);
  width:calc(var(--oa-w) / var(--hero-w) * 100%);
  aspect-ratio:var(--oa-w) / var(--oa-h);
  background-image:url(../img/top/hero_oadate.png);
}

#hero-sns {
  position:absolute;
  top:calc(var(--sns-t) / var(--hero-h) * 100%);
  left:calc(var(--sns-l) / var(--hero-w) * 100%);
  width:calc(var(--sns-w) / var(--hero-w) * 100%);
  aspect-ratio:var(--sns-w) / var(--sns-h);
}
#hero-sns a {
  display:block;
  width:100%;
  height:100%;
  background:url(../img/top/hero_sns.png) center center no-repeat; background-size:cover;
  text-indent:-9999px;
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) {
  #hero-sns a:hover { opacity:0.7; }
}


/* -- Media Queries -- */

@media all and (max-width: 767px) {

#hero { aspect-ratio:auto; }
#hero-logo,
#hero-mv-area,
#hero-mv,
#hero-oadate,
#hero-sns { position:relative; top:auto; left:auto; width:auto; }

#hero-logo {
  width:90%;
  margin:5.0vw 5%;
  aspect-ratio:720 / 340;
  background-image:url(../img/common/f_logo.png);
}

#hero-mv-t1,
#hero-mv-t2 {
  top:0;
  width:calc(22 / 380 * 100% );
}

#hero-mv-t1 {
  left:auto;
  right:0;
}

#hero-mv-t2 {
  left:0;
}

#hero-oadate {
  width:100%;
  margin:3.0vw 0;
}
#hero-sns {
  width:64%;
  margin:0 18% 5.0vw 18%;
}


}




/* top pagebody
-------------------------------- */

#top #pagebody { padding:0 0 50px 0; }
@media all and (max-width: 767px) {
#top #pagebody { padding:0 0 2.0em 0; }
}


/* top gnav
-------------------------------- */

#top-gnav { margin-bottom:50px; background-color:var(--cl-winered); }

#top-gnav ul { width:980px; margin:auto; display:flex; justify-content:space-between; font-size:150%; }
#top-gnav ul li { flex: 1 1 auto; min-width:max-content; border-left:#000 1px dashed; box-sizing:border-box; }
#top-gnav ul li:last-child { border-right:#000 1px dashed; }
#top-gnav ul li a,
#top-gnav ul li .nolink { display:flex; justify-content:center; align-items:center; width:100%; height:100%; padding:1.0em 0; box-sizing:border-box; color:#fff; font-family:'EB_Garamond'; letter-spacing:0.05em; font-weight:600; }
#top-gnav a { text-decoration:none; transition:text-shadow 0.2s ease; }
#top-gnav .nolink { opacity:0.5; }
@media (hover: hover) {
#top-gnav a:hover{
  text-shadow:
    0 0 3px  rgba(255,255,255,0.9),
    0 0 6px  rgba(255,255,255,0.85),
    0 0 12px rgba(255,255,255,0.8),
    0 0 20px rgba(255,255,255,0.65),
    0 0 32px rgba(255,255,255,0.5);
}
}

/* -- Media Queries -- */

@media all and (max-width: 990px) {
#top-gnav ul { width:auto; flex-wrap:wrap; }
#top-gnav ul li { width:25%; }
#top-gnav ul li:nth-child(-n+4) { border-bottom:#000 1px dashed; }
#top-gnav ul li a,
#top-gnav ul li .nolink { padding:0.6em 0; }
}

@media all and (max-width: 767px) {

#top-gnav { font-size:3.8vw; }

#top-gnav ul li { flex:auto; }
#top-gnav ul li:nth-child(1),
#top-gnav ul li:nth-child(2),
#top-gnav ul li:nth-child(4),
#top-gnav ul li:nth-child(6) { width:27%; }
#top-gnav ul li:nth-child(3),
#top-gnav ul li:nth-child(5) { width:46%; }
#top-gnav ul li:nth-child(7),
#top-gnav ul li:nth-child(8) { width:50%; }
#top-gnav ul li:nth-child(1),
#top-gnav ul li:nth-child(4),
#top-gnav ul li:nth-child(7) { border-left:none; }
#top-gnav ul li:last-child { border-right:none; }
#top-gnav ul li:nth-child(-n+6) { border-bottom:#000 1px dashed; }

}



/*  introduction
=============================================== */

#intro-text { font-size:130%; line-height:180%; font-weight:700; }

/* -- Media Queries -- */

@media all and (max-width: 767px) {

#intro-text { font-size:110%; }

}