/*================
 PC・スマホ共通スタイル
=================*/
/* PC共通設定 */
html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* 背景色 */
    background-color: black;
    /* フォント */
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
    color: #e0e0e0;
}

/* リンク */
a:link, a:visited {
    color: #e0e0e0;
    text-decoration: none;
}


/*================
 PC用スタイル
=================*/
@media screen and (min-width: 768px) {

.contents {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

/* 背景画像 */
img {
    position: fixed;
    aspect-ratio: 1058 / 1116;
    width: auto;
    height: 100%;
    overflow: hidden;
    opacity: 0.3;
}

#enter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}

/* GALLERY */
#enter-box > p {
    color: rgba(224, 224, 224, 0.4);
    font-size: 90px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    margin-top: 30vh;
}

/* Welcom to my gallery */
#enter-message {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 70px;
    color: #fff;
    position: relative;
    background-image: linear-gradient(
        70deg,
        rgb(211, 209, 209, 0.3)  45%, 
        #fff 50%,
        rgb(211, 209, 209, 0.3) 55% 
    );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 3s infinite;
}

/* フォント発光アニメーション */
@keyframes shine {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ENTERボタン */
#enter {
    display: block;
    padding: 10px 30px;
    text-align: center;
    opacity: 0.9;
    cursor: pointer;
    /* フォント設定 */
    color: transparent;
    text-shadow: 0 0 1px rgba(255,255,255,0.8);
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    /* 背景色 */
    background-color: rgba(150, 36, 36, 0.9);
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
    border-radius: 50px;
    /* アニメーション */
    transition: all 0.7s;
}

/* ホバーアニメーション */
#enter:hover {
    transform: rotateX(360deg);
}

/* ページ遷移後アニメーション ------------------------*/

/* 初期は非表示 */
#loading-first-none {
    display: none;
}
#loading-second-none {
    display: none;
}

/* パスワード入力画面 */
#loading-first {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0.9;   
    /* フォント設定 */
    font-size: 32px;
    letter-spacing: 0.1em;
    /* フェードアウト */
    animation: fadeout 2s ease-out forwards;
}

/* 入力窓 */
.password-form {
    margin: 1%;
    width: 13em;
    padding: 3px 5px;
    border-top: 1px solid #282828;
    border-left: 1px solid #282828;
    border-bottom: 1px solid #555;
    border-right: 1px solid #555;
    background: rgba(51, 51, 51, 0.6);
    color: rgba(255, 255, 255, 0.8);
}

/* 入力内容 */
.password-typing {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    /* タイピングアニメーション */
    width: 18ch; /* 文字数 */
    /* 文字表示秒数、表示回数、カーソル点滅秒数を指定 */
    animation: typing-pass 1.5s steps(18), effect .5s step-end infinite alternate;
}

/* タイピングアニメーション */
@keyframes typing-pass {
    0% {
        width: 0;
    }
    20% {
        width: 0;
    }
}
    
@keyframes effect {
    50% {
        border-color: transparent
    }
}

/* フェードアウト */
@keyframes fadeout {
    95% {
        opacity: 0.9;
    }
    99%, 100% {
        opacity: 0;
    }
}

/* 認証画面 */
#loading-second {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0; 
    /* フォント設定 */
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    /* ネオン */
    text-shadow:
    0 0 7px rgba(255, 255, 255, 0.3),
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 21px rgba(255, 255, 255, 0.5),
    0 0 42px rgb(255, 0, 0),
    0 0 82px rgb(255, 0, 0),
    0 0 92px rgb(255, 0, 0),
    0 0 102px rgb(255, 0, 0),
    0 0 151px rgb(255, 0, 0);
    /* フェードイン・アウト */
    animation: fadein-out 3.5s;
}

/* フェードイン・アウト */
@keyframes fadein-out {
    60% {
        opacity: 0;
    }
    70%, 80%, 99% {
        opacity: 0.9;
    }
    75%, 100% {
        opacity: 0;
    }
}

/* ページ遷移後アニメーションここまで ------------------------*/
}


/*================
 スマホ用スタイル
=================*/
@media screen and (max-width: 767px) {

.contents {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

/* 背景画像 */
img {
    position: fixed;
    aspect-ratio: 1058 / 1116;
    width: auto;
    height: 100%;
    overflow: hidden;
    opacity: 0.3;
}

#enter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}

/* GALLERY */
#enter-box > p {
    color: rgba(224, 224, 224, 0.4);
    font-size: 9vh;
    font-weight: bold;
    padding: 0;
    margin: 0;
    margin-top: 30vh;
}

/* Welcom to my gallery */
#enter-message {
    text-align: center;
    font-size: 3vh;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 70px;
    color: #fff;
    position: relative;
    background-image: linear-gradient(
        70deg,
        rgb(211, 209, 209, 0.3)  45%, 
        #fff 50%,
        rgb(211, 209, 209, 0.3) 55% 
    );
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 3s infinite;
}

/* フォント発光アニメーション */
@keyframes shine {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ENTERボタン */
#enter {
    display: block;
    padding: 7px 20px;
    text-align: center;
    opacity: 0.9;
    /* フォント設定 */
    color: transparent;
    text-shadow: 0 0 1px rgba(255,255,255,0.8);
    font-size: 3vh;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    /* 背景色 */
    background-color: rgba(150, 36, 36, 0.9);
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
    border-radius: 50px;
    /* アニメーション */
    transition: all 0.7s;
}

/* ホバーアニメーション */
#enter:hover {
    transform: rotateX(360deg);
}

/* ページ遷移後アニメーション ------------------------*/

/* 初期は非表示 */
#loading-first-none {
    display: none;
}
#loading-second-none {
    display: none;
}

/* パスワード入力画面 */
#loading-first {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0.9;   
    /* フォント設定 */
    font-size: 3vh;
    letter-spacing: 0.1em;
    /* フェードアウト */
    animation: fadeout 2s ease-out forwards;
}

/* 入力窓 */
.password-form {
    margin: 1%;
    width: 13em;
    padding: 3px 5px;
    border-top: 1px solid #282828;
    border-left: 1px solid #282828;
    border-bottom: 1px solid #555;
    border-right: 1px solid #555;
    background: rgba(51, 51, 51, 0.6);
    color: rgba(255, 255, 255, 0.8);
}

/* 入力内容 */
.password-typing {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    /* タイピングアニメーション */
    width: 18ch; /* 文字数 */
    /* 文字表示秒数、表示回数、カーソル点滅秒数を指定 */
    animation: typing-pass 1.5s steps(18), effect .5s step-end infinite alternate;
}

/* タイピングアニメーション */
@keyframes typing-pass {
    0% {
        width: 0;
    }
    20% {
        width: 0;
    }
}
    
@keyframes effect {
    50% {
        border-color: transparent
    }
}

/* フェードアウト */
@keyframes fadeout {
    95% {
        opacity: 0.9;
    }
    99%, 100% {
        opacity: 0;
    }
}

/* 認証画面 */
#loading-second {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0; 
    /* フォント設定 */
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 7vh;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    /* ネオン */
    text-shadow:
    0 0 7px rgba(255, 255, 255, 0.3),
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 21px rgba(255, 255, 255, 0.5),
    0 0 42px rgb(255, 0, 0),
    0 0 82px rgb(255, 0, 0),
    0 0 92px rgb(255, 0, 0),
    0 0 102px rgb(255, 0, 0),
    0 0 151px rgb(255, 0, 0);
    /* フェードイン・アウト */
    animation: fadein-out 3.5s;
}

/* フェードイン・アウト */
@keyframes fadein-out {
    60% {
        opacity: 0;
    }
    70%, 80%, 99% {
        opacity: 0.9;
    }
    75%, 100% {
        opacity: 0;
    }
}

/* ページ遷移後アニメーションここまで ------------------------*/


}