@charset "UTF-8";
/* CSS Document */
@import "reset5.css";

body { color: #231815; margin: 0; padding: 0; font-family: garamond-premier-pro-display, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 15px; letter-spacing: 0.08em; line-height: 0; font-weight: 400; -webkit-font-smoothing: antialiased; }
html { min-height: 100%; }

h2,h3,h4 { letter-spacing: 0.124em; line-height: 1.66em; font-weight: 500; font-feature-settings: "palt" 1; }
p { font-size: 14px; letter-spacing: 0.08em; line-height: 1.66em; font-weight: normal; font-feature-settings: "palt" 1 }

a:link { color: #231815; text-decoration: none }
a:visited { color: #231815; text-decoration: none }
a:hover { color: #231815 }
a:link { color: #231815 }

.txtl { opacity: 0; display: inline-block }

#wrapper { position: relative; width: 100%; height: 100vh; z-index: 10; overflow: hidden }
.contact { position: fixed; right: 40px; bottom: 40px; display: inline-block; font-size: 14px; display: none }

.fd { opacity: 0; transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.active { opacity: 1; }
.sec { position: relative; width: 100%; font-size: 12px; }
.std { height: auto; }

#loader { position: fixed; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }
.loader svg {
	fill: none;
	stroke: #676c72 ;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

.slilde { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: none }

.symbol-mark { position: absolute; left: 50%; top: 10vh; width: calc(80vh * 0.83); margin-left: calc(-40vh * 0.83); }
.symbol-mark span { position: absolute; left: 0; top: -200%; display: block; width: 100%; height: 300%; background: url("../img/gra.png") repeat-x; background-size: contain;  transition: all 3s linear }
.symbol-mark.active span { top: 0; }

.typo { position: absolute; left: 50%; top: 6vh; width: calc(88vh * 0.4); margin-left: calc(-44vh * 0.4); }
.typo span { position: absolute; left: 0; top: -200%; display: block; width: 100%; height: 300%; background: url("../img/gra.png") repeat-x; background-size: contain; transition: all 3s linear }
.typo.active span { top: 0; }

.logotype { position: absolute; left: 25%; top: calc(50vh - 25vw * 0.098); width: 50%; margin-top: -30px }
.logotype::after { width: 0; clear: both }
.logotype .cvr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.logotype .cvr span { float: left; width: 14.285%; height: 100%; background: #fff }

#intro { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #676c72; z-index: 10000; }
#intro .site-tit { margin: calc(50vh - 92px) 0 0; text-align: center; color: #fff }
#intro .snd { position: absolute; left: 50%; top: 50%; margin: -60px 0 0 -80px }
#intro .snd li { display: inline-block }
#intro .snd li a { display: block; position: relative; padding: 60px 40px 20px; width: 80px; color: #fff; line-height: 1; text-align: center }
#intro .snd li a img { position: absolute; left: 60px; top: 0; display: block; width: 40px; }
#intro a.contact { position: absolute; left: calc(50% - 40px); bottom: 60px; width: 80px; color: #fff; text-align: center }

@media screen and (max-width: 780px) {
    
    .symbol-mark { position: absolute; left: 50%; top: calc(50vh - 78vw * 0.6); width: 78vw; margin-left: -39vw; }
    .typo { position: absolute; left: 50%; top: calc(50vh - 42vw * 1.25); width: 42vw; margin-left: -21vw; }
    .logotype { position: absolute; left: 12vw; top: calc(50vh - 38vw * 0.098); width: 76vw; margin-top: -10px }
    ::-webkit-full-page-media, :future, :root .symbol-mark {
        top: calc(50dvh - 78vw * 0.6);
    }
    ::-webkit-full-page-media, :future, :root .typo {
        top: calc(50dvh - 42vw * 1.25);
    }
    ::-webkit-full-page-media, :future, :root .logotype {
        top: calc(50dvh - 38vw * 0.098);
    }
    
    .contact { position: fixed; right: 20%; bottom: 20px; width: 60%; font-size: 12px; text-align: center }
}