@charset "utf-8";
/* CSS Document */

html,body {
  background: #fff;
}

p{
	margin: 0;
	padding:0;
}

a:hover{
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
a img {
    border-style:none;
}
a:hover{
  opacity: 0.7;
}

section h1, h2, h3, h4, h5, h6, p{
	margin: 0;
	display: block;
  font-size: 0;
	line-height: 0;
}

#wrapper {
  max-width: 640px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
}
#wrapper img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.header {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 250% 0 0;
}
.header_inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

/*============================
btn
============================*/
.aniCont,
.btnCont {
  position: relative;
}
.btnCont .btn_01 {
  position: absolute;
  width: 95%;
  left: 50%;
  bottom: 6%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  overflow: hidden;
}
.btnCont .btn_02 {
  position: absolute;
  width: 95%;
  left: 50%;
  bottom: 18%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  overflow: hidden;
}

.btn_01 span,
.btn_02 span {
  display: block;
  width: 20px;
  height: 300px;
  position: absolute;
  top: -50px;
  z-index: 5;

  background: rgba(255, 255, 255, 0.2);
  background: -moz-linear-gradient(
              left,
              rgba(255, 255, 255, 0.2) 0%,
              rgba(255, 255, 255, 0.5) 40%,
              rgba(255, 255, 255, 0.8) 90%,
              rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-linear-gradient(
              top,
              rgba(255, 255, 255, 0.2) 0%,
              rgba(255, 255, 255, 0.5) 40%,
              rgba(255, 255, 255, 0.8) 90%,
              rgba(255, 255, 255, 0.0) 100%
  );
  background: -webkit-gradient(
              linear, left top, right top,
              color-stop(0%  ,rgba(255, 255, 255, 0.2)),
              color-stop(40% ,rgba(255, 255, 255, 0.5)),
              color-stop(90% ,rgba(255, 255, 255, 0.8)),
              color-stop(100%,rgba(255, 255, 255, 0.0))
  );
  background: linear-gradient(
              top,
              rgba(255, 255, 255, 0.2) 0%,
              rgba(255, 255, 255, 0.5) 40%,
              rgba(255, 255, 255, 0.8) 90%,
              rgba(255, 255, 255, 0.0) 100%
  );
  -webkit-transition-property: left, top, opacity;
     -moz-transition-property: left, top, opacity;
          transition-property: left, top, opacity;
  -webkit-transition-duration: 0.9s, 0.5s, 0.1s;
     -moz-transition-duration: 0.9s, 0.5s, 0.1s;
          transition-duration: 0.9s, 0.5s, 0.1s;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
          transition-timing-function: ease;

  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: kira1;
  -moz-animation-name: kira1;
  animation-name: kira1;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes kira1 {
    from { left: -50px; }
    to { left: 800px; }
}
@-webkit-keyframes kira1 {
    from { left: -50px; }
    to { left: 800px; }
}

/*============================
animation
============================*/
.ani_item {
  position: absolute;
}

/* fv */
.fv_01 {
  top: 0;
  right: 12%;
  width: 53%;
  z-index: 888;
}
.fv_02 {
  top: 21%;
  right: 24%;
  width: 26%;
}
.fv_03 {
  top: 35%;
  right: 3%;
  width: 46%;
  z-index: 888;
  background: url(../img/emarujon_bg.png) top left no-repeat;
  background-size: 100% 100%;
  padding: 5px;
}
.fv_04 {
  top: 55%;
  right: 1%;
  width: 49%;
  z-index: 999;
}
.fv_05 {
  top: 8%;
  left: 3%;
  width: 49%;
  z-index: 999;
}

/* magazine */
.magazine_01 {
  top: 16%;
  left: 0;
  width: 97%;
}
.magazine_02 {
  top: 58%;
  right: 0;
  width: 95%;
}
.magazine_03 {
  top: 3%;
  left: 7%;
  width: 86%;
}
.magazine_04 {
  top: 2%;
  right: 6%;
  width: 65%;
}

/* feature */
.feature {
  top: 4%;
  left: 6%;
  width: 88%;
}

/* tv */
.tv_01 {
  top: 4%;
  left: 4%;
  width: 93%;
}
.iframe {
  position: absolute;
  top: 34%;
  left: 10%;
  width: 81%;
}
.iframe_inner {
  position: relative;
  width: 100%;
  margin-bottom: 5%;
  padding-top: 56.25%;
}
.iframe_inner iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* reason */
.reason_01 {
  top: 32%;
  left: 13%;
  width: 75%;
}
.reason_02 {
  top: 46%;
  left: 13%;
  width: 75%;
}

/* use */
.use {
  top: 22%;
  left: 5%;
  width: 90%;
}

/* uv */
.uv {
  top: 10%;
  right: 0;
  width: 96%;
}


/*============================
footer
============================*/
.footer_tel {
  margin: 3% 2%;
  line-height: 1.4;
}
.footer_no {
  color: #ff0800;
  font-weight: bold;
}
.footer_area {
  padding: 3% 0 5% 0;
  background: #000;
  color: #fff;
}
.footer_navi {
  text-align: center;
}
.footer_navi li {
  display: inline;
  color: #519cf3;
  font-size: 11px;
  line-height: 1.4;
}
.footer_navi a {
  padding-left: 5px;
  color: #519cf3;
  text-decoration: none;
}
.footer_text1 {
  margin-bottom: 2%;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.footer_text2 {
  margin: 3% 2% 3% 2%;
  padding: 2%;
  border: 1px solid #fff;
  font-size: 12px;
  line-height: 1.4;
}
.copy {
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.mb1 {
  margin-bottom: -1px;
}