@charset "UTF-8";
/**
 *
 *  サイト共通
 *
 */
/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/
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, canvas, details,
figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

img {
  border: 0;
  vertical-align: top;
}

em {
  font-style: normal;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

input, select, textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

input:focus, textarea:focus, select:focus {
  outline: none;
}

/*--------------------------------------------------------------------------
   html , body
---------------------------------------------------------------------------*/
html {
  overflow-y: scroll;
}

body {
  min-width: 1000px;
  background-color: #fff;
}

/*--------------------------------------------------------------------------
   base font
---------------------------------------------------------------------------*/
body {
  color: #000;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 14px;
  font-size: 88% \9;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body {
    font-size: 88%;
  }
}
/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/
a {
  outline: 0;
}
a:link, a:visited {
  color: #006fcb;
  text-decoration: underline;
}
a:hover {
  color: #006fcb;
  text-decoration: none;
}
a:active {
  outline: 0;
}

/*--------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------*/
#Header {
  overflow: hidden;
  position: relative;
  border-top: 1px solid #cdcdcd;
}

.hd_official {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  width: 961px;
  margin: 0 auto;
}
.hd_official .logo {
  padding: 10px 0;
}
.hd_official .logo img {
  margin-right: 20px;
}
.hd_official .link {
  position: absolute;
  top: 19px;
  right: 0;
  font-size: 86%;
  line-height: 1.1;
}
.hd_official .link a {
  display: inline-block;
  padding-left: 9px;
  background: url(../images/common/ico_arrow01.png) no-repeat 0 0.3em;
}
.hd_official .link a:link {
  text-decoration: none;
}
.hd_official .link a:hover {
  text-decoration: underline;
}

.hd_main {
  position: relative;
  height: 100%;
  margin-top: 49px;
  border-top: 1px solid #cdcdcd;
}
.hd_main .logo {
  position: absolute;
  top: 29px;
  left: 0;
  z-index: 100;
}
.hd_main .catch {
  position: absolute;
  top: 181px;
  left: 0;
  z-index: 100;
}
.hd_main .btn-detail {
  position: absolute;
  top: 306px;
  left: 10px;
  z-index: 100;
  width: 297px;
  height: 69px;
}
.hd_main .btn-detail img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -148px;
}
.hd_main .btn-recommend {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  width: 132px;
  height: 132px;
}
.hd_main .btn-recommend img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -66px 0 0 -66px;
}
.hd_main .btn-scroll {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  z-index: 100;
  width: 152px;
  height: 87px;
  margin: auto;
}

.hd_loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.hd_loading img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: auto;
}

#OnJS .hd_main .btn-detail,
#OnJS .hd_main .btn-coupon,
#OnJS .hd_main .btn-recommend,
#OnJS .hd_main .btn-scroll {
  display: none;
}

#OnJS .hd_main .btn-coupon img,
#OnJS .hd_main .btn-recommend img,
#OnJS .hd_main .btn-scroll img {
  -moz-transition: -moz-transform 0.2s linear;
  -webkit-transition: -webkit-transform 0.2s linear;
  -o-transition: -o-transform 0.2s linear;
  -ms-transition: -ms-transform 0.2s linear;
  transition: transform 0.2s linear;
}
#OnJS .hd_main .btn-coupon img:hover,
#OnJS .hd_main .btn-recommend img:hover,
#OnJS .hd_main .btn-scroll img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

#video-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#video,
#video-thumb {
  position: absolute;
  width: 100%;
  height: 100%;
}

#video-thumb img {
  width: 100%;
}

#video-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(../images/common/header_bg.png);
}

/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
#Footer {
  border-top: 6px solid #016dcf;
}
#Footer .btn-pagetop {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 45px;
  z-index: 900;
}

/*--------------------------------------------------------------------------
   Other
---------------------------------------------------------------------------*/
/* clearfix
-----------------------------------------------------------------*/
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  zoom: 1;
}