﻿
/* =====
 common
 ===== */
body {
  -webkit-text-size-adjust: 100%;
}
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#tmpl_contentMenu_bar a:hover, #tmpl_main a:hover {
  text-decoration: none!important;
}
img {
  border: none;
}
ul li {
  list-style-type: none;
}

.floatcontainer:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;  
  clear: both; 
  visibility:hidden;
}
* html .floatcontainer { zoom: 1; }
*:first-child+html .floatcontainer { zoom: 1; }

/* =============
  contents menu
 ============= */

#tmpl_contentMenu_bar_base {
  width: 950px !important;
}
@media screen and (max-width: 640px) {
  #tmpl_contentMenu_bar_base {
    width: 100% !important;
  }
}

#tmpl_main {
  width: 100% !important;
}


/* =======
  movie
 ======= */
#mainVisual {
  background: #000000;
  width: 100%;
  min-width: 950px;
  height: 400px;
  text-align: center;
  margin: 0 0 50px 0;
  line-height: 0;
  position: relative;
  overflow: hidden;
  /* Video Player (HTML5) */
}
#mainVisual .fadePanel {
  width: 100%;
  height: 400px;
  background: #000000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#mainVisual video {
  background: #000000;
  position: absolute;
  top: 0;
  margin: 0 0 0 -356px;
  left: 50%;
}
@media screen and (max-width: 640px) {
  #mainVisual #base {
    width: 100%;
  }

  #mainVisual {
    height: 100%;
    min-width: 100%;
    margin: 0 0 60px 0;
  }
  #mainVisual video {
    width: 100%;
    height: auto;
    margin: 0;
    left: 0;
  }
}

#mainVisual .video_player {
  position: relative;
  height: inherit;
  text-align: center;
}
#mainVisual .video_player #mainVisualFlash {
  display: none;
}
#mainVisual .video_player #mainVisualFlash .noflash {
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  margin: 150px 0 0 0;
  line-height: 100%;
}
#mainVisual .video_player #mainVisualFlash .noflash img {
  border: none;
  margin: 20px 0 0 0;
}
#mainVisual .video_player #mainVisualVideo {
  display: none;
}
#mainVisual .video_player img.altImg {
  position: absolute;
  top: 0;
  margin: auto;
  width: 100%; 
}
#mainVisual .video_player .play {
  background: url("newaboutsony/images/alt.jpg") no-repeat center;
  background-size: contain;
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 3;
  font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  color: #ffffff;
}

@media screen and (max-width: 640px) {
  #mainVisual .video_player img.altImg {
    height: auto;
  }

  #mainVisual .video_player .play {
    display: block;
  }
}
#mainVisual .video_player .play p {
  padding: 0;
  margin: 0;
  position: absolute;
  text-align: center;
  bottom: 0px;
  width: 100%;
}
#mainVisual .video_player .play p span {
  height: 28px;
  line-height: 28px;
  display: inline-block;
  margin: 0 0 0 5px;
}
#mainVisual .video_player .play p img {
  display: inline-block;
  margin: 0 0 10px 0;
  vertical-align: middle;
}


/* =========
 text area
 ========= */
#mainBlock {
  width: 950px;
  margin: 0 auto;
  font-size: 17px;
  font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  color: #6d6d78;
  line-height: 36px;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  #mainBlock {
    width: auto;
    font-size: 15px;
    padding: 0 50px;
  }
}

#mainBlock p {
  padding: 0;
  margin-top: 0;
  width: 950px;
}
#mainBlock p.title {
  margin: 0 0 28px 0;
}
#mainBlock p.text1 {
  margin: 0 0 28px 0;
}
#mainBlock p.logo2 {
  margin-bottom: 100px;
}
@media screen and (max-width: 640px) {
  #mainBlock p {
    padding: 0;
    width: 100%;
  }
  #mainBlock p br {
    display: none;
  }

  #mainBlock p.logo2 {
    margin-bottom: 80px;
  }
}


/* ============
 business menu
 ============ */
#button ul {
  margin: 0 auto 69px auto;
  padding: 0;
  overflow: hidden;
  width: 830px;
}
@media screen and (max-width: 640px) {
  #button ul {
    width: 100%;
  }
}

#button ul li, #RelatedLinkRight ul li{
  width: 400px;
  height: 162px;
  float: left;
  margin: 0 30px 30px 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;

  background-color: #f1f5f9;
}
#button ul li.last {
  margin-right: 0;
}

#button ul li img, #RelatedLinkRight ul li img{
  margin-right: 30px;
  vertical-align: middle;
}

#button ul li a, #RelatedLinkRight ul li a {
  position: relative;
  padding: 0;
  height: 162px;
  display: block;
  font-size: 14px;
  font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
  -webkit-font-smoothing: antialiased;
  color: #656565;
  font-weight: bold;

  transition: background-color 0.25s linear 0s;
  -webkit-transition: background-color 0.25s linear 0s;
  -moz-transition: background-color 0.25s linear 0s;
  -o-transition: background-color 0.25s linear 0s;
}
#button ul li a:hover, #RelatedLinkRight ul li a:hover {
  background-color: #e8edf3;
}

@media screen and (max-width: 640px) {
  #button ul{
    width: 90%;
  }

  #button ul li {
    width: 100%;
    height: auto;
    margin: 0 0 30px;
  }

  #button ul li a{
    width: 100%;
    height: auto;
    font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
  }

}

@media screen and (max-width: 400px) {
  #button ul li {
    display: block;
    position: relative;
  }
  #button ul li:after {
    content: " ";
    display: block;
    padding-top: 47%;
  }

  #button ul li a{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 90%;
    overflow: hidden;
  }

  #button ul li img {
    margin-right: 20px;
    max-width: 100%;
    max-height: 100%;
  }
}


hr.border{
  border: none;
  border-bottom: 3px solid #e3e7eb;
  width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  hr.border{
    width: 90%;
  }
}


/* ==============
 Corporate Info
 ============== */
#RelatedLink {
  width: 830px;
  margin: 36px auto 55px;
}
@media screen and (max-width: 640px) {
  #RelatedLink {
    width: auto;
    padding: 20px;
    margin: 0 auto 0px auto;
  }
}


#RelatedLinkLeft{
  width: 400px;
  margin-right: 30px;
  float: left;
}

#RelatedLink h2 {
  color: #2f353d;
  font-size: 17px;
  font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 18px;
  overflow: hidden;
}
#RelatedLink .designLink{
  display: none;
}

@media screen and (max-width: 640px) {
  #RelatedLinkLeft{
    width: 100%;
    margin: 0 0 30px;
    float: none;
  }
  #RelatedLink h2 {
    padding-left: 20px;
  }
  #RelatedLink .designLink{
    display: block;
  }
}

#RelatedLink ul.RelatedLinkList {
  padding: 0;
  overflow: hidden;
}
#RelatedLink ul.RelatedLinkList li {
  padding: 0;
  margin: 0;
  padding: 0 30px 0 0;
  line-height: 2em;
}

#RelatedLink ul.RelatedLinkList li a{
  color: #4471ed;
  font-family: "Microsoft YaHei",Arial,"Hiragino Sans GB",Sans-Serif;
  -webkit-font-smoothing: antialiased;
}
#RelatedLink ul.RelatedLinkList li a:hover{
  color: #3b4b73;
}
#RelatedLink ul.RelatedLinkList li a:active{
  color: #5787f3;
}

@media screen and (max-width: 640px) {
  #RelatedLink ul.RelatedLinkList li {
    width: auto !important;
    padding-left: 20px;
  }
}

/* ======
 design
 ====== */
#RelatedLinkRight{
  width: 400px;
  float: left;
}
#RelatedLinkRight ul li span.buttonText{
  position: absolute;
  line-height: 1.5em;
  margin-top: -3.1em;
  top: 50%;
  width: 180px;
}

span.fColorBlue{
  color: #4572ed;
}

@media screen and (max-width: 640px) {
  #RelatedLinkRight{
    width: 100%;
    float: none;
  }
  
  #RelatedLinkRight ul{
    display: none;
  }

}
