.nt_txt { font-size: 0; width: 0; height: 0; overflow: hidden; opacity: 0;}
#top main#head { background-image:linear-gradient(to top, rgba(24,26,29,0) 20%,rgba(33,36,38,0) 60%,rgba(33,36,38,0) 100%); background-color: #1b1d1e;}
#top main#head h1 { font-size: 0; width: 0; height: 0; position: relative; margin: 0; padding: 0; overflow: hidden; opacity: 0;}

#trailer_sp { width: 100%; max-width: 864px; margin: 0 auto;}
#trailer_bg a, #trailer_bg #trailer0, #trailer_bg img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#trailer_bg a { object-fit: cover; z-index: 100;}
#trailer_bg #trailer0 { background-size: cover; background-position: center center; background-repeat: no-repeat; margin:0 auto; overflow: hidden; z-index:100; transition:.5s; background-size:cover; background-color: #1b1d1e;}

#trailer_bg { width: 100%; padding-top: 56.25%; position: relative; background-color: #1b1d1e; overflow: hidden; }
.fixed-base-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1;}

#chara { position: relative;}
#chara h2 { width: 94%; display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 2% 0 4% 4%;}
#character h2 span.ttl { font-size: 9vw; padding-top: 1em;}
.btn_info_guide { display: block; font-size: 80%; font-weight:700; display: block; width: 46%; max-width: 320px; text-align:center; margin: 0; color:#1b1d1e; background-color:#af1918; transform: skewX(-18deg); padding: .3em 0; transition:.5s ease-in-out; box-shadow:14px 12px 12px rgba(0,0,0,0.15); display: block;}
.btn_info_guide span { display: inline-block; transform: skewX(18deg);}
#netabare { display: block; width: 55%; max-width: 420px; margin-right: -2%;}
#netabare a { display: block; width: 100%; height: 0; padding-top: 44.34156379%; padding-top: -webkit-calc(431 / 972 * 100%); padding-top: calc(431 / 972 * 100%); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-image: url(../img/top/netabare.png?0);}
/*for_W640-*/
@media (min-width: 640px) { 
.btn_info_guide { font-size: 100%; padding: .4em 0;}
#netabare { margin-top: -1em;}
}
/*for_W768-*/
@media (min-width: 768px) { 
.btn_info_guide span { font-size: 110%; padding-top: .5em;}
#character h2 span.ttl { font-size: 300%;}
#netabare { margin-top: -1.5em;}
}

/*bn_guide*/
#bn_guide { width: 92%; max-width: 660px; margin: 1em auto;}
#bn_guide a { display: block; width: 100%; height: 0; padding-top: 23%; background-repeat: no-repeat; background-size: contain; background-image: url(../img/top/bn_guide.png);}
#bn_guide a:hover { opacity: .7;}
.bn_generator { margin: 1em auto 2em auto;}

/* --- cover_effect --- */
html.no-scroll, body.no-scroll { overflow: hidden !important; height: 100% !important; touch-action: none;}
.bace_contents { filter: blur(8px); transition: filter 1.5s ease-out; transition-delay: 5.0s;}
body:not(.no-scroll) .bace_contents { filter: blur(0px);}
/*_loading*/
.loading { color: #ba0100; font-family: "Arial Black", Gadget, sans-serif; font-size: 100%; font-weight: 800; letter-spacing: 0.8em; opacity: 0; animation: mabataki 0.05s linear infinite, fadeOutLoading 0.1s forwards; animation-delay: 0s, 1s; position: absolute; top: 40%; left: 50%; z-index: 10; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
@keyframes mabataki { 0% { opacity: 0;} 100% { opacity: 1;} }
@keyframes fadeOutLoading { to { opacity: 0; visibility: hidden; } }
/*_shutter*/
#global_shutter { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; overflow: hidden;}
.shutter-overlay-global { width: 100vw; height: 100vh; display: block; transform-origin: center center;  animation: wallPassThrough 3s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: 3.5s;}
/*_text*/
.mask-hole, .visible-text { font-family: "Arial Black", Gadget, sans-serif; font-weight: 800; font-size: 5vw; text-anchor: start; dominant-baseline: middle; letter-spacing: 0.8em;}
.visible-text { fill: #d81718; opacity: 0; animation: fadeInColor 1.5s ease-in-out forwards, fadeOutColor 1.0s ease-in-out forwards; animation-delay: 1s, 2.5s;}
/*_animation*/
@keyframes wallPassThrough { 0% { opacity: 1; } 10% { opacity: 1; } 50% { opacity: 0; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes fadeInColor { to { opacity: 1; } }
@keyframes fadeOutColor { to { opacity: 0; } }
/*for_W768-*/
@media (min-width: 768px) { 
.loading { font-size: 120%; top: 50%;}
.mask-hole, .visible-text { font-size: 4vw; letter-spacing: 1.2em;}
}

/*SNS*/
#topsns{ width:100%; max-width: 680px; margin:0 auto; padding:0 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
#topsns .sns0401_h2 { font-size:7vw; padding:0; width: 40%; flex-basis: 40%; padding-right: 2%; text-align: right; white-space: nowrap;}
#topsns #sns0401{ width: 48%; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center;}
#topsns #sns0401 a { display: block; width: 30%; height: 0; padding-top: 30%; border: 1px solid rgba(255, 255, 255, 1); border-radius: 50%; position: relative;}
#topsns #sns0401 a img{ width: 40%; height: 40%; position: absolute; top: 30%; left: 30%;}
#snspost #sns{margin:0; width:42%; text-align:left;}
#snspost #sns a{width:10vw; height:10vw; margin:0 1.25% 0;}

/*for_W768-*/
@media (min-width: 768px) { 
.loading, .mask-hole, .visible-text { font-weight: 400;}
#topsns .sns0401_h2 { font-size: 280%;}
#snspost #sns{ width: auto; text-align:center; margin:0 0 0 1em;}
#snspost #sns a{width:75px; height:75px; margin:0 2px 0; position: relative; display:inline-block; border-radius:50%; transition:.3s; border:1px solid #fff;}
}