html,body { 
	margin:0px; padding:0px; 
}

body{
  background: black;
   -webkit-text-size-adjust: 100%;
}

a{
  text-decoration: none;
  opacity: 0.99;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
}

a:hover, .ahover:hover{
  color:#ff5859;
}

.anohover:hover{
  color:#ffffff !important;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.mt0{
  margin-top:0px !important;
}

.mt0sp{
  margin-top:0px !important; 
}

.reveal{
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0,0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.reveal:hover:after {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}

.reveal:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #ffffff;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#tubular-container{
	top:0px;
}

/* override */
.featherlight{
	z-index:2000 !important;
}

img{
	border:none;
}

/*p, h1, h2, h3, h4, h5, h6,
td, th, input, li, a, span, caption{

	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN" Meiryo, "メイリオ", sans-serif;
	color:#ffffff;
	font-size:16px;
	line-height:1.5;
	letter-spacing:1px;
	font-weight: bold;
}*/

*{
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN" Meiryo, "メイリオ", sans-serif;
    color:#ffffff;
    font-size:16px;
    line-height:1.5;
    letter-spacing:1px;
    font-weight: bold;
}

a.sov{
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  color:#ffffff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

a.sov span{
	color:#ffffff;
	-webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

a.sov:before{
content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

a.sov:hover
, a.sov:hover span{
	color: #ff5859;
}
a.sov:hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

ul{
	list-style-type: none;
	margin:0px;
	padding:0px;
}

.sp{ display:none; }
.pc{ display:block; }

.anchar{
	position:absolute;
	margin-top:-100px;
}



/**
 BG
*/

#bgVideo{
	overflow: hidden;
  display:none;
}

#videoDot{
  background: url("/images/top_ft.png");
  width:100%;
  height:100%;
  position:absolute;
  opacity: 0.7;
}

#bgVideoOverlay{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:9;
	
}

#gradientContent{
	padding-top:1px;
	z-index:5;
	position:relative;
}

#gradientContent p{
	color:#ffffff;
}

#contentWrapper{
	width:1000px;
	margin:auto;
	overflow: hidden;
}

.yoruGradhient{
	background: -moz-linear-gradient(#7676f5, #63b0d6) !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#7676f5), to(#63b0d6)) !important; 
	background: -ms-linear-gradient(top, #7676f5, #63b0d6) !important;
 	background: linear-gradient(to bottom, #7676f5, #63b0d6) !important;
}

.yoruContent p{
	color:#b3ff2e !important;
	font-size:18px !important;
}


/**
 loadingLayer
**/

#loadingLayer{
  position:fixed;
  top:0px;
  left:0px;
  z-index:99999;
  width:100%;
  height:100%;

  background: rgb(255,144,130); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(255,144,130,1) 0%, rgba(255,173,155,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,144,130,1)), color-stop(100%,rgba(255,173,155,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255,144,130,1) 0%,rgba(255,173,155,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255,144,130,1) 0%,rgba(255,173,155,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(255,144,130,1) 0%,rgba(255,173,155,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,144,130,1) 0%,rgba(255,173,155,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9082', endColorstr='#ffad9b',GradientType=0 ); /* IE6-9 */
  
}



#loadingLayer p{
	text-align: center;
	color:#ffffff;
}

#loadingLogo{
	text-align:center;
	position:absolute;
	width:100%;
  opacity: 0;
}

.loaded{
  opacity: 1 !important;
  animation-duration: 0.2s;
  animation-name: fade-in;
  -moz-animation-duration: 0.2s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.2s;
  -webkit-animation-name: fade-in;
}

.fadeout{
  opacity: 0 !important;
  animation-duration: 0.6s;
  animation-name: fade-out;
  -moz-animation-duration: 0.6s;
  -moz-animation-name: fade-out;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-name: fade-out;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* */

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#loadingLogo img{
	display:inline-block;
}

.spinner {
display:none;
  margin: auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #ffffff;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/**

**/

#pageTop{
	margin-bottom:0px;
	position:fixed;
	z-index:100;
	bottom:-8px;
	right:30px;
	display:none;
}

#pageTop a{
  display:block;
  position:relative;
}

#pageTop a img{
  /*position:absolute;*/
  position:relative;
  top:0px;
  left:0px;
  display:block;

  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

#pageTop a img:nth-child(2){
  top:-32px;
  opacity:0.0;
}

#pageTop a:hover img:nth-child(1){
  opacity:0.0;
}

#pageTop a:hover img:nth-child(2){
  opacity:1.0;
}




/**
 footer
 **/

 #footer{
 	background: #262626;
 	/*height:218px;*/
 	text-align: center;
 	padding-top:1px;
 	position:relative;
 	margin-top:0px;
 	padding-bottom:20px;

 }

 #footerContent{
 	position:relative;
 	top:0px;
 	left:0px;
 }

 #footerKpp{
  	margin-top:40px;
 }

#bottomIconList{
  display:block;
  margin:auto;
}

 #bottomIconListSp{

 }

#bottomIconList li, #bottomIconListSp li{
  margin-right:15px;
  display:inline-block;
}

#bottomIconList li:last-child, #bottomIconListSp li:last-child{
  margin-right:0px;
}

#bottomIconList li a, #bottomIconListSp li a{
  display:block;
  /*height:18px;*/
  overflow: hidden;
  padding:10px 5px;
  position:relative;
}

#bottomIconList li a img, #bottomIconListSp li a img{
  position:relative;
}

#copyright{
 	font-size:10px;
 	color:#ffffff;
 	text-align: center;
 	margin-top:10px;
  font-weight: normal;
  position:relative;
}

#contactIcon{
  position:relative;
  display:inline-block;
  width:33px;
  height:32px;
  top:10px;
  margin-left:10px;
}

#contactIcon img{
  position:absolute;
  top:0px;
  left:0px;

  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

#contactIcon img:nth-child(2){
  opacity: 0.0;
}

#contactIcon:hover img:nth-child(1){
  opacity: 0.0;
}

#contactIcon:hover img:nth-child(2){
  opacity: 1.0;
}

#contactIcon:hover{
  background-position: 0px -32px;
}

/**
 サイト
**/

#site{
  margin-top:50px;
}

#showSite{
  text-align:center;
}

#showSite a{
  display:inline-block;
  width:246px;
  height:42px;
  border:1px solid #ffffff;
  position:relative;
  text-align:center;
}

#siteContents{
  overflow: hidden;
  display:none;
  background: url("/images/archiveBg.png");
}

#showSite a img{
  position:absolute;
  top:13px;
  left:60px;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

#showSite a img:nth-of-type(2){
  opacity: 0.0;
}

#showSite a:hover img:nth-of-type(1){
  opacity:0.0;
}

#showSite a:hover img:nth-of-type(2){
  opacity: 1.0;
}

#siteContentsLine{
  margin-bottom:0px;
  padding-bottom:0px;
  position:relative;
  top:12px;
}

#siteContents ul{
  width:1000px;
  margin:auto;
  padding-bottom:20px;
  overflow: hidden;
}

#siteContents li{
  float:left;
  margin-right:28px;
  margin-top:17px;
}

#siteContents li:nth-child(4n){
  margin-right:0px;
}

#siteContents li a{
  display:block;
}

#siteContents li a:hover{
  opacity: 0.8;
}

/**
 footer
**/


#footerKpp img.pc{
  display:inline-block;
}

/**
 mediaquery
**/

@media screen and (max-width: 1000px) {

 /* #loadingLayer{
    display:none;
  }*/

  /*#tubular-container{
    display:none;
  }*/

  p, h1, h2, h3, h4, h5, h6,
  td, th, input, li, a, span, caption{
    /*font-size:20px;*/
  }


  h1, h2, h3, h4, h5, h6
  , h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    font-size:22px;
    line-height:1.5;
    letter-spacing:2px;
  }

  p, td, th, input, li, a, span, caption{
    font-size:18px;
    line-height:1.7;
    letter-spacing: 3px;
    word-break: break-all;
  }

  .sp{ 
    display:block !important; 
  }
  
  .pc{ 
    display:none !important;
  }

  #copyright{
    font-size:18px;
    font-weight:bold;
  }

  #menuSp{
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    z-index:100;
    padding:50px 0px;
    display:none;
    height:100%;
  }

  #menuSp div:first-child{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#000000;
    opacity: 0.8;
  }

  #langSp{
    text-align: center;
  }

  #menuSpButton{
    position:fixed;
    display:inline-block;
    right:0px;
    top:0px;
    z-index:101;
  }

  #menuSpButton a{
    display:block;
    height:92px;
    width:92px;
    position:relative;
  }
  #menuSpButton a img{
    position:absolute;
    top:0px;
    left:0px;
    display:block;
  }
  #menuSpButton a img:nth-child(2){
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }

  #menuSpButton a img.on{
    opacity: 1.0;
    top:-20px;
  }


  #langSp a{
    display:inline-block;
  }

  #menuSp li a{
    display:block;
    text-align: center;
    padding:10px 0px;
  }

  #siteContents ul{
    width:480px;
  }

  #siteContents li{
    margin-right:0px;
    float:none;
    text-align: center;
  }

  #footerKpp img.sp{
    display:inline-block !important;
  }

  .anchar{
    position:absolute;
    margin-top:-92px;
  }

}