/* COBRA CAPOEIRA */

/* BODY ---------------------------------------------------------------------- */

a { text-decoration: none!important; }

/* MV ---------------------------------------------------------------------- */

.mv {
    border: 0px dotted #444;
    background-image: url(img/mv-logo.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    }

/* main -------------------------------------------------------------------- */

main {
    border: 0px dotted #444;
    width: 94%;
    max-width: 500px;
    margin: 600px auto 400px;
    text-align: center;
    }

.info {
    font-family: "Oswald", sans-serif;
    margin: 0px auto;
    }

.email {
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    margin: 10px auto 200px;
    color: #ccc;
    }

/* modal window -------------------------------------------------------------------- */

/* チェックボックス自体は隠す */
#modal-toggle {
    display: none;
    }

/* モーダルの背景（最初は非表示） */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
  z-index: 1000;
    }

/* モーダルの中身 */
.modal-content {
    z-index: 1001;
    box-sizing: border-box;
    position: relative; top: 0px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 20px;
    padding: 100px 30px 30px;
    width: 94%;
    max-width: 800px;
    color: #ccc;
    text-align: center;
    max-height: 80vh;           /* 画面の高さの80%を最大にする */
    overflow-y: auto;           /* 縦方向に中身がはみ出たらスクロールを出す */
    box-sizing: border-box;     /* パディングを含めたサイズ計算にする */
    }

/* チェックが入ったら表示する */
#modal-toggle:checked + .btn + .modal-overlay {
    opacity: 1;
    visibility: visible;
    }

.close-btn {            /* 閉じるボタンの装飾 */
    opacity: .8;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    border: 1px solid #3498db;
    width: 80%;
        max-width: 200px;
    padding: 10px;
    margin: 100px auto 80px;
    color: #3498db;
    text-decoration: none!important;
    transition: .6s;
    }

.close-btn:hover {
    opacity: 1;
    letter-spacing: 0.2em;
    }

/* logo-mark -------------------------------------------------------------------- */

.logo-mark {
    border: 0px dotted #333;
    background-image: url(img/logomark.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    margin: 0px auto 0px;
    }

/* animation -------------------------------------------------------------------- */

.animation {
    z-index: 0;
    overflow: hidden;
    position: absolute; top: calc(50vh - 200px); left: 0px;
    border: 0px dotted #ccc;
    width: 100%;
    max-width: 100vw;
    height: 240px;
    }

.line {
    display: none;
    position: relative; top: 0px; left: 0;
    background-color: rgba(255, 255, 255, 0.3);
    width: 3000px;
    height: 0.5px;
    margin: 0px auto;
    animation: line 30s linear infinite;
    }

@keyframes line {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

.orbit {
    z-index: 0;
    opacity: 0;
    position: relative; top: -70px; left: -10px;
    background-color: rgba(255, 255, 255, 0.0);
    border: 4px dotted rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    width: 400px;
    height: 400px;
    margin: 0px auto;
    transform-style: preserve-3d;
    animation:
        orbit-fadein 1s ease-out forwards,
        orbit 24s linear infinite;
	animation-delay: 1s;
    }

@keyframes orbit-fadein {
    to { opacity: 1; }
    }

@keyframes orbit {
    0% { transform: rotateX(75deg) rotateY(-15deg) rotateZ(0deg); }
    50% { transform: rotateX(75deg) rotateY(-15deg) rotateZ(180deg); }
    100% { transform: rotateX(75deg) rotateY(-15deg) rotateZ(360deg); }
    }


/* BASIC PLUS -------------------------------------------------------------------- */

.none { display: none; }
.pc { display: block; }
.sp { display: none; }

/* END --------------------------------------------------------------------------- */