/********************/
/*** 初期設定 START */
/********************/
* {
    margin: 0 auto;
    padding: 0;
    font-size: 1.1vw;
    font-weight: 500;
    color: #000000;
    list-style: none;
    font-family: Meiryo UI;
}

html {
    margin: 0 auto;
    background-color: #f2f2f2;
    overflow: hidden;
}

/*** 初期設定 END */

/********************/
/*** タグ設定 START */
/********************/
h1 {
    font-size: 1.2vw;
}

h3 {
    margin: 0 auto;
    text-align: center;
    font-size: 1.6vw;
    font-weight: 900;
}

/******************/
/*** ボディ START */
/******************/
#wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
/*** ボディ END */

/*****************************/
/*** コンテンツエリア START **/
/*****************************/

#cntl {
    position: relative;
    top: 30vh;
}

#cont {
    position: relative;
    top: 50vh;
    left: 46vw;
}

#c01 {
    position: relative;
    top: 6vh;
    left: 46vw;
}

/*** コンテンツエリア END **/


/*****************************/
/*** エフェクトエリア START **/
/*****************************/

.effect1 {
    display: inline-block;
    position: relative;
    text-decoration: none;
    width: 8vw;
    height: 5vh;
    color: #0069B2;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    background: linear-gradient(#7BC9FF 0%, #0C80D2 100%);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

    .effect1:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
        background-image: linear-gradient(#4299D5 0%, #016BB6 100%);
    }

    .effect1:hover {
        color: #ffffff;
    }

.effect2 {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #a9a9a9, 0 5px 0 #999, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.effect3 {
    text-shadow: 0px -2px #000, 2px 0px #000, 0px 2px #000, -2px 2px #000;
}

.effect4 {
    text-shadow: 0 0 25px #edf8ff, 0 0 20px #edf8ff, 0 0 0.40px #edf8ff;
}

.effect10 {
    filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}

.no_sel {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}