@charset utf-8;
@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/css?family=Oswald:300);

/* -------------------------------------------
 * initialize
 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}


article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display:block;
}

ul li {
  list-style: none;
}

input, select {
  vertical-align: middle;
}

.hide {
  display: none;
}

.clear {
  clear: both;
}

.float-left {
  float: left;
  display: inline;
}

.float-right {
  float: right !important;
  display: inline;
}

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


/* --------------------------------------------------
 * common styles
 */

body {
  min-width: 768px;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
}

a:hover {
}

* {
  box-sizing: border-box;
}


/* --------------------------------------------------
 * Layout
 */

.wrap {
  display: block;
  position: relative;
  width: 768px;
  margin: 0 auto;
}

.page-on-top {
  position: relative;
  height: 72px;
  padding: 18px 0 0;
  text-align: center;
  background-color: #DFDEDE;
  z-index: 1;
}

.page-footer {
  padding: 24px 0 45px;
}

.page-footer .social {
  margin: 0 0 17px;
  text-align: center;
  font-size: 0;
}

.page-footer .social li {
  display: inline-block;
  margin: 0 6px;
}

.page-footer .copyright {
  text-align: center;
  color: #444441;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  line-height: 11px;
}


/* --------------------------------------------------
 * List Page
 */

body.list header {
  position: relative;
  overflow: hidden;
  background-color: #000000;
}

body.list header h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -52px 0 0 -45px;
  z-index: 3;
}

body.list header ul li img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

body.list header ul li.current img {
  display: block;
  z-index: 2;
}

body.list .items {
  padding: 33px 0 100px;
  background-color: #F1F4F4;
}

body.list .items ul {
  width: 768px;
  margin: 0 auto;
  overflow: hidden;
}

body.list .items ul li {
  position: relative;
  float: left;
  width: 383px;
  padding: 0 0 30px;
  text-align: center;
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
}

body.list .items ul li:nth-child(odd):before {
  content: "";
  display: block;
  position: absolute;
  top: 76px;
  right: 0;
  width: 1px;
  height: 231px;
  background-color: #D9D8D8;
}

body.list .items ul li a {
  text-decoration: none;
  color: #191919;
}

body.list .items ul li:nth-child(odd) a span {
  display: inline-block;
  padding-right: 30px;
}

body.list .items ul li:nth-child(even) a span {
  display: inline-block;
  padding-left: 30px;
}

body.list .concepts {
  position: relative;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.80);
  z-index: 2;
}

body.list .concepts * {
  max-height: 100%;
}

body.list .concept1 {
  text-align: center;
  background: url(../images/list/concept1-bg.png) repeat 0 0;
}

body.list .concept1 .wrap {
  padding: 45px 0;
}

body.list .concept2 {
  text-align: center;
  background: url(../images/list/concept2-bg.png) repeat 0 0;
}

body.list .concept2 .wrap {
  min-height: 770px;
  padding: 44px 0;
  background: #303030 url(../images/list/concept2-bg2.png) no-repeat center 56px;
}

body.list .concepts section h1 {
  margin: 0 0 22px;
  color: #BEBCBC;
  font-size: 11px;
  font-style: italic;
}

body.list .concepts section h1 span {
  color: #FFFFFF;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 30px;
}

body.list .concepts section .ja {
  margin: 0 0 10px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 30px;
}

body.list .concepts .concept2 .ja {
  margin: 0 0 35px;
}

body.list .concepts section .en {
  color: #FFFFFF;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  line-height: 24px;
}


/* --------------------------------------------------
 * Detail
 */

body.detail header,
body.detail .logo {
  position: relative;
  height: 94px;
  padding: 14px 0 0;
  /*box-shadow: 0 1px 7px rgba(0, 0, 0, 0.75);*/
  text-align: center;
  background: url(../images/detail/header-bg.png) repeat 0 0;
  z-index: 2;
}

body.detail .body .items {
  width: 768px;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

body.detail .body .items li {
  display: inline-block;
  width: 150px;
  cursor: pointer;
}

body.detail .body .main {
  background-color: #F1F4F4;
}

body.detail .body .main .image {
  position: relative;
  height: 480px;
  margin: 0 0 30px;
  overflow: hidden;
}

body.detail .body .main .image ul li {
  position: absolute;
  top: 0;
  left: 768px;
  width: 100%;
  height: 480px;
  text-align: center;
}

body.detail .body .main .image ul li img {
  display: none;
  position: absolute;
  top: 0;
  left: 174px;
}

body.detail .body .main .image ul li img:first-child {
  display: inline;
}

body.detail .body .main .image .prev {
  position: absolute;
  top: 218px;
  left: 16px;
  cursor: pointer;
}

body.detail .body .main .image .next {
  position: absolute;
  top: 218px;
  right: 16px;
  cursor: pointer;
}

body.detail .body .texts {
  position: relative;
  overflow: hidden;
}

body.detail .body .texts > li {
  position: absolute;
  width: 768px;
  margin: 0 0 40px;
}

body.detail .body .main .spec {
  margin: 0 0 30px;
  text-align: center;
  color: #282826;
  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}

body.detail .body .main .variation {
  margin: 0 0 30px;
  text-align: center;
  font-size: 0;
}

body.detail .body .main .variation li {
  display: inline-block;
  width: 102px;
  height: 110px;
  cursor: pointer;
}

#f-006-text .variation [data-color='black'] {background: url(../images/detail/f-006/thumb-black.png);}
#f-006-text .variation [data-color='beige'] {background: url(../images/detail/f-006/thumb-beige.png);}
#f-006-text .variation [data-color='camo']  {background: url(../images/detail/f-006/thumb-camo.png);}
#f-007-text .variation [data-color='black'] {background: url(../images/detail/f-007/thumb-black.png);}
#f-007-text .variation [data-color='beige'] {background: url(../images/detail/f-007/thumb-beige.png);}
#f-007-text .variation [data-color='camo']  {background: url(../images/detail/f-007/thumb-camo.png);}
#f-008-text .variation [data-color='black'] {background: url(../images/detail/f-008/thumb-black.png);}
#f-008-text .variation [data-color='beige'] {background: url(../images/detail/f-008/thumb-beige.png);}
#f-008-text .variation [data-color='camo']  {background: url(../images/detail/f-008/thumb-camo.png);}
#f-009-text .variation [data-color='black'] {background: url(../images/detail/f-009/thumb-black.png);}
#f-009-text .variation [data-color='beige'] {background: url(../images/detail/f-009/thumb-beige.png);}
#f-009-text .variation [data-color='camo']  {background: url(../images/detail/f-009/thumb-camo.png);}
#f-006-text .variation [data-color='black']:hover, #f-006-text .variation [data-color='black'].on {
  background: url(../images/detail/f-006/thumb-black-on.png);
}
#f-006-text .variation [data-color='beige']:hover, #f-006-text .variation [data-color='beige'].on {
  background: url(../images/detail/f-006/thumb-beige-on.png);
}
#f-006-text .variation [data-color='camo']:hover, #f-006-text .variation [data-color='camo'].on {
  background: url(../images/detail/f-006/thumb-camo-on.png);
}
#f-007-text .variation [data-color='black']:hover, #f-007-text .variation [data-color='black'].on {
  background: url(../images/detail/f-007/thumb-black-on.png);
}
#f-007-text .variation [data-color='beige']:hover, #f-007-text .variation [data-color='beige'].on {
  background: url(../images/detail/f-007/thumb-beige-on.png);
}
#f-007-text .variation [data-color='camo']:hover, #f-007-text .variation [data-color='camo'].on {
  background: url(../images/detail/f-007/thumb-camo-on.png);
}
#f-008-text .variation [data-color='black']:hover, #f-008-text .variation [data-color='black'].on {
  background: url(../images/detail/f-008/thumb-black-on.png);
}
#f-008-text .variation [data-color='beige']:hover, #f-008-text .variation [data-color='beige'].on {
  background: url(../images/detail/f-008/thumb-beige-on.png);
}
#f-008-text .variation [data-color='camo']:hover, #f-008-text .variation [data-color='camo'].on {
  background: url(../images/detail/f-008/thumb-camo-on.png);
}
#f-009-text .variation [data-color='black']:hover, #f-009-text .variation [data-color='black'].on {
  background: url(../images/detail/f-009/thumb-black-on.png);
}
#f-009-text .variation [data-color='beige']:hover, #f-009-text .variation [data-color='beige'].on {
  background: url(../images/detail/f-009/thumb-beige-on.png);
}
#f-009-text .variation [data-color='camo']:hover, #f-009-text .variation [data-color='camo'].on {
  background: url(../images/detail/f-009/thumb-camo-on.png);
}

body.detail .body .main .buy {
  margin: 0 0 40px;
}

body.detail .body .main .buy a {
  display: block;
  width: 270px;
  height: 47px;
  margin: 0 auto;
  border: 2px solid #050001;
  text-align: center;
  text-decoration: none;
  color: #1A1F23;
  font: bold 14px/43px "Lato", sans-serif;
}

body.detail .body .main .text {
  text-align: center;
  color: #282826;
  font-size: 13px;
  line-height: 24px;
}

body.detail .body .main .image2 p {
  width: 768px;
  margin: 48px auto;
  text-align: center;
}

body.detail .body .main .image2 ul {
  position: relative;
  overflow: hidden;
}

body.detail .body .main .image2 ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}

body.detail .body .main .image2 ul li div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

body.detail .body .main .image2 ul li div:first-child {
  display: inline;
}

body.detail .body .main .image2 ul li img {
  width: 100%;
  height: auto;
  vertical-align: top;
}


/* --------------------------------------------------
 * Auth
 */

body.auth {
  text-align: center;
  font-family: "Lato", sans-serif;
  background: url(../images/login/bg.png) repeat 0 0;
}

body.auth h1 {
  height: 286px;
  padding: 120px 0 0;
}

@media screen and (max-width: 640px) {
  body.auth h1 {
    height: 200px;
    padding: 40px 0 0;
  }
}

body.auth .login {
  height: 168px;
}

body.auth .login [type='password'] {
  width: 240px;
  height: 40px;
  margin: 0 0 34px;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  color: #9A9898;
  font-size: 13px;
  background: url(../images/login/password-bg.png) no-repeat 0 0;
  -webkit-appearance: none;
}

body.auth .back a {
  color: #807C7C;
  text-decoration: none;
}

body.auth .back a:hover {
  text-decoration: underline;
}