@charset "utf-8";
/*==============================
  Reset
  ==============================*/
body {
    background: url(indexbg.jpg) no-repeat 50% 50% / cover;
	color: #FFF;
}

ul li,ol li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #FFF;
}


/*==============================
  Base
  ==============================*/

body {
    margin: 0;
    padding: 0;
    color: #FFF;
}

/*------------------------------
  contents
  ------------------------------*/

.indexall {
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
}
.indexbox {
    margin: 20px;
    padding: 60px;
    line-height: 180%;
    font-size: smaller;
    opacity: 0.8;
    transition: 0.5s;
}
.vidrio {
    background: rgba(120,20,20,1);
}
.elchateo {
    background: rgba(20,80,140,1);
}
.vidrio:hover {
    opacity: 1;
}
.elchateo:hover {
    opacity: 1;
}

.indexbox ul {
    margin-right: 15px;
}

.logopic {
    margin-bottom: 15px;
}

#vidrio {
	background-color: #970f16;
}

#elchateo {
	background-color: #0064a5;
}



/*------------------------------
  fooer
  ------------------------------*/

.indexfooter {
    padding: 5px 0;
	width: 100%;
    height: 20px;
	text-align: center;
	color: #FFF;
    font-size: x-small;
    position: absolute;
    bottom: 0;
}


/*==============================
    PC向けレイアウト指定
    ここに767px以上のCSSを記述
  ==============================*/

@media all and (min-width: 767px) {
    
    
    .indexall {
        flex-direction: row;
    }
    
    .vidrio {
        background-color: #000;
    }
    .elchateo {
        background-color: #000;
    }
    .vidrio:hover {
        opacity: 1;
        background: rgba(120,20,20,1);
    }
    .elchateo:hover {
        opacity: 1;
        background: rgba(20,80,140,1);
    }
    
}