@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Raleway:400);

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 500;
    src: url('../font/Noto-kana-M-1029.eot');
    src: url('../font/Noto-kana-M-1029.eot?#iefix') format('embedded-opentype'),
    url('../font/Noto-kana-M-1029.woff') format('woff'),
    url('../font/Noto-kana-M-1029.ttf')  format('truetype');
}

* {
  list-style:none;
  margin:0px;
  padding: 0px;
  font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo','メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
body {margin:0px;padding:0px;}

a.noborder, 
a.noborder:link, 
a.noborder:hover, 
a.noborder:active, 
a.noborder:visited, 
img{border: 0;vertical-align:bottom;}

#wrapper{margin:0 auto;padding:0;}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

p{
  text-align:justify;
  text-justify:inter-ideograph;
  color:#fff;
}


body{
  min-width: 1000px;
  background-color:#000;
}
#wrapper{
  padding-bottom:20px;
}

/* -- TKヘッダー -- */
#tk_head_s{
  width:100%;
  min-width:1000px;
  height:40px;
  background-color:#000;
  border-bottom:solid 1px #999;
  top:0px;
  z-index:10;
}
#tk_head_s img{
  margin-left:20px;
}
#tk_head_s img.watch-logo{
  float: right;
}
#tk_head_wrapper{
  width:100%;
}
#tk_head{
  position:relative;
  width:100%;
  height:110px;
  margin:0 auto;
  background-color:#fff;
  z-index:11;
}
#tk_head img{
  position:absolute;
  top:54px;
  left:0px;
}

/* -- TKフッター -- */
#tk_footer_wrapper{
  width:100%;
  border-top:solid 1px #999;
}
#tk_foot{
  width:1000px;
  margin:0 auto;
}
#footer{
  margin: 0 auto;
  padding: 20px 20px 0px 20px;
}
#footer .inner-section{
  width: 1000px;
  margin: 0 auto;
}
#footer .footer-menu{
  text-align: center;
  margin-bottom: 20px;
}
#footer .footer-menu a{
  display: inline-block;
  padding: 0 12px 0 8px;
  line-height: 1.4;
  font-size: 12px;
  border-right: solid 1px #666;
}
#footer .footer-menu ul li{
  float:left;
  font-size:12px;
  border-right:solid 1px #666;
  padding:0 10px;
}
#footer .footer-menu ul li.last{
  border-style: none;
  padding: 0 0 0 10px;
}
#footer a:link, #footer a:active{
  color: #fff;
  text-decoration: none;
}
#footer a:visited{
  color: #fff;
  text-decoration: none;
}
#footer a:hover{
  text-decoration: underline;
}
#tk_foot_s{
  padding-top:20px;
}
#tk_foot_s a{
  display:block;
  width:273px;
  height:64px;
  margin:0 auto;
  cursor:pointer;
}

/* -- アドバンテージ用 -- */
#adv_frame{
  position:absolute;
  width:1px;
  height:1px;
  top:0px;
  left:0px;
  overflow:hidden;
}

/* -- ヘッダー -- */
.header-bg{
  width:100%;
  min-height: 600px;
  background-repeat: no-repeat;
  background-position: calc(50% - 200px) 0px;
  background-position: -webkit-calc(50% - 200px) 0px;
}
#header-bg0{
  position: relative;
}
#header-bg1{
  position: absolute;
  top:0px;
  left:0px;
  background-image: url(../images/watch_2.jpg);
  z-index: -2;
}
#header-bg2{
  position: absolute;
  top:0px;
  left:0px;
  background-image: url(../images/watch_1.jpg);
  z-index: -1;
}
.header-watch-name{
  position: absolute;
  top:555px;
  left:50%;
  margin-left: -470px;
  font-size:12px;
  font-weight: 500;
  color:#fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  font-family: 'Noto Sans Japanese','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo','メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
#header{
  position: relative;
  width:96%;
  max-width:1152px;
  min-width:1000px;
  min-height: 530px;
  padding-top:70px;
  margin: 0 auto;
  background: -webkit-linear-gradient(
    right,
    rgba(0,0,0,1.0) 30%,
    rgba(0,0,0,0.0) 55%
  );
  background: linear-gradient(
    to left,
    rgba(0,0,0,1.0) 30%,
    rgba(0,0,0,0.0) 55%
 );
}
#header h1{
  text-align: right;
  margin-right: 10px;
}
#header p.credit{
  text-align: right;
  font-size:12px;
  line-height: 1.4;
  margin-right: 20px;
  margin-top: 10px;
}
#header #lead{
  width:416px;
  margin:15px 20px 0px auto;
  padding-bottom: 10px;
}
#header #lead p{
  font-size:13px;
  line-height: 1.4;
  margin-bottom: 5px;
}
#header #lead a{
  display: block;
  width:200px;
  height: 40px;
  margin: 10px 0 0 auto;
}

/* -- メイン -- */
#main{
  width:992px;
  margin: 0 auto;
  padding-top:60px;
  padding-left:8px;
}
#main .watch-contents{
  position: relative;
  width:321px;
  float:left;
}
#main .watch-contents h2{
  position:absolute;
  z-index: 100;
  top:0px;
  left:0px;
}
#main .watch-contents ul{
  margin-top: 45px;
  margin-left: 20px;
}
#formal ul{
  border-left:solid 1px #BF0000;
}
#business ul{
  border-left:solid 1px #BF00A1;
}
#casual ul{
  border-left:solid 1px #D9C700;
}
#main .watch-contents ul li{
  margin-bottom: 15px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow: hidden;
}
#main .watch-contents ul li a{
  display:block;
  width:300px;
  height:150px;
  overflow: hidden;
}
#main .watch-contents ul li a img{
  margin-top: -125px;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
}
#main .watch-contents ul li a img:hover{
  -moz-transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
}
#main .watch-contents ul li a.image-180 img{
  margin-top: -180px;
}
#main .watch-contents ul li a.image-150 img{
  margin-top: -150px;
}
#main .watch-contents ul li a.image-80 img{
  margin-top: -80px;
}
#main .watch-contents ul li p{
  margin-left: 5px;
}
#main .watch-contents ul li p.watchname-en{
  font-family: 'Raleway';
  font-weight:400;
  font-size:20px;
  display:none;
}
#formal ul li p.watchname-en{
  color:#BF0000;
}
#business ul li p.watchname-en{
  color:#BF00A1;
}
#casual ul li p.watchname-en{
  color:#D9C700;
}
#main .watch-contents ul li p.watchname-jp{
  font-size:12px;
  color:#eee;
  font-weight: 500;
  font-family: 'Noto Sans Japanese','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo','メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
#main .watch-contents ul li:first-child a{
  height: 400px;
}
#main .watch-contents ul li:first-child a img{
  margin-top: 0px;
}
#main .watch-contents ul li:first-child p.watchname-en{
  display: block;
}

/* -- フッター -- */
#footer-link{
  width:1000px;
  margin: 30px auto 50px auto;
  text-align: center;
}
#footer-link a{
  display: block;
  width:200px;
  margin: 0 auto 20px auto;
}