@charset "utf-8";

@import "../../../files/css/layout.css";

body {
	background: url(../img/bg_ptn.png) top center #000;
	overflow-x: hidden;
}

/*-------------------------------------------------------------------------
	Title
/*-----------------------------------------------------------------------*/

#title {
	background: url(../img/bg_ptn01.png) repeat-x center -40px,
              url(../img/bg_ptn02.png) center;
	position: relative;
  z-index: 1;
}
	#title h1 {
    min-width:1280px; 
    width: calc(100% + 220px);
    margin-left: -220px;
	}
    #title h1 img {
      width: 100%;
      height: auto;
      margin-bottom: -5%;
    }
	#title #logo-3ds {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 1;
	}


/*------------------------------------------------------------
  Contents
------------------------------------------------------------*/

#contents .type {
    background-image: url(../img/bg_ptn03.png);
    background-position: center;
    overflow: visible;
    position: relative;
    padding-bottom: 8%;
}
#contents .type:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
}
  #contents .type h2 {
    position: absolute;
    min-width:1280px; 
    width: calc(100% + 220px);
    margin-left: -220px;
  }
  #contents .type .txt,
  #contents .type .thumbs {
    display: inline-block;
    position: relative;
    vertical-align: middle;
  }
  #contents .type .box {
    padding-top: 14%;
    position: relative;
  }
      #contents .type h2 img,
      #contents .type .txt img,
      #contents .deco img,
      #contents .deco01 img,
      #contents .deco02 img {
        width: 100%;
        height: auto;
      }
  #contents .type .thumbs {
    width: 33%;
    padding-top:18.75%;
    height: auto;
    background-color: #000;
    border: solid 9px #ffd200;
    overflow: hidden;
    z-index: 1;
  }
      #contents .type .thumbs iframe {
        margin: auto;
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        left:0;
        width:100%;
        height:100%;
      }


/*------------------------------------------------------------
  sec01
------------------------------------------------------------*/

#contents .type#sec01 {
  background-color: #f596eb;
}
#contents #sec01:before {
  background: url(../img/battle/bg.png) no-repeat center right;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents  #sec01.type .txt {
    width: 26.3%;
    left: 6%;
  }
  #contents  #sec01.type .thumbs {
    left: 8%;
    top: 0%;
    border-color: #78ebff;
  }

/*------------------------------------------------------------
  sec02
------------------------------------------------------------*/

#contents .type#sec02 {
  background-color: #b4f078;
}
#contents #sec02:before {
  background: url(../img/apple/bg.png) no-repeat center left;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec02 h2 {
    margin-top: -14%;
  }
  #contents  #sec02.type .txt {
    width: 26.4%;
    left: 16%;
  }
  #contents  #sec02.type .thumbs {
    left: 12%;
    top: 0%;
    border-color: #ff645a;
  }
  #contents  #sec02.type .deco01 {
    width: 24%;
    position: absolute;
    bottom: -24%;
    left: 78%;
    z-index: 1;
  }

/*------------------------------------------------------------
  sec03
------------------------------------------------------------*/

#contents .type#sec03 {
  background-color: #82aaff;
}
#contents #sec03:before {
  background: url(../img/hunting/bg.png) no-repeat center right;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec03 h2 {
    margin-top: -12%;
  }
  #contents  #sec03.type .txt {
    width: 27.2%;
    left: 6%;
  }
  #contents  #sec03.type .thumbs {
    left: 8%;
    top: 0%;
    border-color: #ffc800;
  }

/*------------------------------------------------------------
  sec04
------------------------------------------------------------*/

#contents .type#sec04 {
  background-color: #be78f0;
}
#contents #sec04:before {
  background: url(../img/attack/bg.png) no-repeat center left;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec04 h2 {
    margin-top: -11%;
  }
  #contents  #sec04.type .txt {
    width: 29.1%;
    left: 16%;
  }
  #contents  #sec04.type .thumbs {
    left: 12%;
    top: 0%;
    border-color: #ff783c;
  }

/*------------------------------------------------------------
  sec05
------------------------------------------------------------*/

#contents .type#sec05 {
  background-color: #b39650;
}
#contents #sec05:before {
  background: url(../img/action/bg.png) no-repeat center right;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec05 h2 {
    margin-top: -12%;
  }
  #contents  #sec05.type .txt {
    width: 24.7%;
    left: 6%;
  }
  #contents  #sec05.type .thumbs {
    left: 8%;
    top: 0%;
    border-color: #82ebff;
  }

/*------------------------------------------------------------
  sec06
------------------------------------------------------------*/

#contents .type#sec06 {
  background-color: #ffe650;
}
#contents #sec06:before {
  background: url(../img/rocket/bg.png) no-repeat center left;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec06 h2 {
    margin-top: -17%;
  }
  #contents  #sec06.type .txt {
    width: 26.5%;
    left: 16%;
  }
  #contents  #sec06.type .thumbs {
    left: 12%;
    top: 0%;
    border-color: #8cc8ff;
  }

/*------------------------------------------------------------
  sec07
------------------------------------------------------------*/

#contents .type#sec07 {
  background-color: #9678eb;
}
#contents #sec07:before {
  background: url(../img/robobon/bg.png) no-repeat center right;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec07 h2 {
    margin-top: -1%;
  }
  #contents  #sec07.type .txt {
    width: 26%;
    left: 6%;
  }
  #contents  #sec07.type .thumbs {
    left: 8%;
    top: 0%;
    border-color: #f06e79;
  }

/*------------------------------------------------------------
  sec08
------------------------------------------------------------*/

#contents .type#sec08 {
  background-color: #f5be3c;
}
#contents #sec08:before {
  background: url(../img/hockey/bg.png) no-repeat center left;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec08 h2 {
    margin-top: -13%;
  }
  #contents  #sec08.type .txt {
    width: 26%;
    left: 16%;
  }
  #contents  #sec08.type .thumbs {
    left: 12%;
    top: 0%;
    border-color: #73ebff;
  }
  #contents  #sec08.type .deco01 {
    width: 14%;
    position: absolute;
    bottom: -14%;
    right: 96%;
    z-index: 1;
  }

/*------------------------------------------------------------
  sec09
------------------------------------------------------------*/

#contents .type#sec09 {
  background-color: #96e68c;
}
#contents #sec09:before {
  background: url(../img/train/bg.png) no-repeat center right;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec09 h2 {
    margin-top: -8%;
  }
  #contents  #sec09.type .txt {
    width: 27.7%;
    left: 5%;
  }
  #contents  #sec09.type .thumbs {
    left: 8%;
    top: 0%;
    border-color: #ff9764;
  }

/*------------------------------------------------------------
  sec10
------------------------------------------------------------*/

#contents .type#sec10 {
  background-color: #82d2f5;
}
#contents #sec10:before {
  background: url(../img/shoot/bg.png) no-repeat center left;
  -webkit-background-size: contain;
  background-size: contain;
}
  #contents .type#sec10 h2 {
    margin-top: -14%;
  }
  #contents  #sec10.type .txt {
    width: 29.2%;
    left: 16%;
  }
  #contents  #sec10.type .thumbs {
    left: 12%;
    top: 0%;
    border-color: #ffc814;
  }
  #contents  #sec10.type .deco01 {
    width: 26%;
    position: absolute;
    top: 47%;
    left: 77%;
    z-index: 2;
  }


/*------------------------------------------------------------
  Competition
------------------------------------------------------------*/
#competition {
    padding-top: 62px;
    background: url(../img/bg_ptn02.png) center;
    position: relative;
}
  #competition #local-navi {
    padding: 18px 0 13px;
    background: url(../img/navi/bg_ptn.png) repeat-x center top;
    position: relative;
    z-index: 2;
  }
  #competition .deco {
      width: 32%;
      position: absolute;
      top: -8rem;
      left: -8%;
  }
  #competition ul {
    width: 850px;
    margin: 0 auto;
  }
    #competition ul li {
      display: inline-block;
    }

#competition ul li.on a img {
  position: relative;
  bottom: 20px;
}

#competition #local-navi.fixed-bottom {
    position: fixed;
    left:0;
    bottom:0;
    width:100%; 
    z-index: 3;
}

/*-------------------------------------------------------------------------
	You Tube
/*-----------------------------------------------------------------------*/

.buttonBar {
	display: none;
}