@charset "utf-8";

/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 *
 * ------------------------------------------------------------------- */

/* Ek_Mukta */
@font-face {
  font-family: "EkMukta-Regular";
  src: url("../fonts/Ek_Mukta/EkMukta-Regular.woff2") format("woff2"),
       url("../fonts/Ek_Mukta/EkMukta-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "EkMukta-Bold";
  src: url("../fonts/Ek_Mukta/EkMukta-Bold.woff2") format("woff2"),
       url("../fonts/Ek_Mukta/EkMukta-Bold.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

 /* ===================================================================
 *  02. responsive
 *
 * ------------------------------------------------------------------- */
/* Reset */
html, body, div, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
  font-family: "EkMukta-Regular", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #fff;
}
a {
  text-decoration: underline;
  color: #fff;
}

ul {
  list-style : none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* Fluid-img */
img {
  max-width : 100%;
}
/* Body */

body {
  background: url(artgup_cover.png) center center fixed no-repeat;
  font-size: 1rem;
  letter-spacing: 0.02rem;
}
video {
  position: fixed;
  top: 0; 
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

h1 {
  font-size : 4rem;
}
h2 {
  font-size : 3.5rem;
  line-height: 1.2em;
}
h3 {
  font-size : 2.4rem;
  line-height: 1.8rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h4 {
  font-size : 2rem;
  line-height: 1.6rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/*Header*/
header {
  text-align: center;
  padding-top: .5rem;
}

#title {
  text-align: left;
  padding: 5rem;
}
#wrapper {
  overflow : hidden;
  width : 960px;
  margin: 0 auto;
}
#main { 
  float : left;
  width : 600px;
  padding: 10px;
}
#sub {
  width : 300px;
  float: right;
} 
#main p, #sub p { 
  margin-bottom : 3rem;
}

/* Footer */
footer {
  margin-top : 7rem; 
  padding : 3rem 0 2rem 5rem;
  bottom: -10;
  width:100%;
  position: absolute;
  text-align : left;
  background : rgba(31, 29, 0, 0.5);
}

ul.social a:hover, a:focus, a:visited {
  color: rgba(255, 255, 255, .66);
}
ul.social a {
  color: #fff !important;
}
ul.social {
  display:table;
  table-layout:fixed;
  width:auto;
  padding-bottom: 1rem;
  font-size: 1rem;
}
ul.social li {
  display:table-cell;
  vertical-align:middle;
  padding-right: 1.2rem;
  margin-left: 0;
  text-align:center;
}
ul.social li:first-child {
   border:none;    
}
ul.social li a {
  display:block;
}

/********mouse highlight color*********/
::selection {
  background:rgba(255, 0, 255, .33);
  color:#fff;
}
/*Firefoxに対応*/
::-moz-selection   {
background:rgba(255, 0, 255, .33);
color:#fff;
}

/*タブレット用*/ 
@media screen and (max-width : 959px){

}
/*スマホ用*/
@media screen and (max-width : 767px) {

}