@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Shippori+Mincho+B1&display=swap');

.p-canvas-webgl { position: fixed; z-index: 1; top: 0; left: 0;}
.p-summary { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; color: #fff; font-family: 'EB Garamond', 'Shippori Mincho B1', serif; transition: all 1.5s;}
.p-summary h1 { margin: 0 0 0.2em; font-size: 30px; font-weight: 400; letter-spacing: 0.1em; text-align: center;}
.p-summary p { margin: 0; font-size: 1.1rem; letter-spacing: 0.1em;}
.p-summary a { color: #fff;}

/* add by shinji
--------------------------------------------------------------------------------*/
body { overflow: hidden;}
body::before { content: ''; position: absolute; top: -50%; bottom: 50%; left: 0; right: 0; background: rgba(0,0,0,.9); z-index: 5; transition: all 1.5s;}
body::after { content: ''; position: absolute; top: 50%; bottom: -50%; left: 0; right: 0; background: rgba(0,0,0,.9); z-index: 5; transition: all 1.5s;}

/* holdbtn */
#holdbtn { width: 100vw; margin: 40px auto 0; position: relative; text-align: center; padding-top: 40px; cursor: pointer; transition: all 1s;}
#holdbtn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.4);}
#holdbtn::after { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 1px; background: #fff; transition: none;}
#holdbtn.hold::after { width: 100%; transition: all 3.5s;}
#holdbtn span { display: inline-block; background: rgba(255,255,255,.3); font-size: 18px; padding: 20px 30px; letter-spacing: .2em;}
#holdbtn.hold span{ background: rgba(195,175,152,.5);}

/* contents */
#contents { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; opacity: 0; pointer-events: none; transition: all 1s 1.5s;}
#contents ul li { display: inline-block;}
#contents ul li+li { margin-left: 20px;}
#contents ul li a { font-family: 'EB Garamond', 'Shippori Mincho B1', serif; color: #fff; text-decoration: none; font-size: 21px; letter-spacing: .04em; display: block; background: rgba(0,0,0,.4); width: 100px; padding: 6px 0 10px;}

@media screen and (max-width: 767px) {
#contents ul li { display: block;}
#contents ul li+li { margin-left: 0; margin-top: 30px;}
#contents ul li a { font-size: 18px; width: 70px;}
}

/* animation */
body.hold-complete-1 #holdbtn { opacity: 0;}
body.hold-complete-2 .p-summary { top: 25%;}
body.hold-complete-2::before { bottom: 100%;}
body.hold-complete-2::after { top: 100%;}
body.hold-complete-2 #contents { opacity: 1; pointer-events: auto;}

/**/
.sns-link { position: fixed; top: 30px; transform: translateY(-50%); right: 15px; z-index: 4;}
.sns-link li { display: inline-block;}
.sns-link li+li { margin-left: 10px;}
.sns-link li img { width: 25px;}