@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
html {
  font-family: sans-serif;
  line-height: 1em;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; }

body {
  font-family: Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', 'Yu Gothic', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 500;
  margin: 0; }

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

audio, canvas, progress, video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

a {
  background-color: transparent; }
  a:active, a:hover {
    outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: .67em 0; }

mark {
  color: #000;
  background: #ff0; }

small {
  font-size: 80%; }

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -.5em; }

sub {
  bottom: -.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button, input, optgroup, select, textarea {
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  color: inherit;
  /* 3 */ }

button {
  overflow: visible;
  text-transform: none; }

select {
  text-transform: none; }

button, html input[type='button'] {
  /* 2 */
  cursor: pointer;
  -webkit-appearance: button;
  /* 3 */ }

input[type='reset'], input[type='submit'] {
  /* 2 */
  cursor: pointer;
  -webkit-appearance: button;
  /* 3 */ }

button[disabled], html input[disabled] {
  cursor: default; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

input {
  line-height: normal; }
  input::-moz-focus-inner {
    padding: 0;
    border: 0; }
  input[type='checkbox'], input[type='radio'] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */ }
  input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
    height: auto; }
  input[type='search'] {
    /* 1 */
    /* 2 */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield; }
    input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
      -webkit-appearance: none; }

fieldset {
  margin: 0 2px;
  padding: .35em .625em .75em;
  border: 1px solid #c0c0c0; }

legend {
  /* 1 */
  padding: 0;
  border: 0;
  /* 2 */ }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

html, body, h1, h2, h3, h4, h5, iframe, button, menu, main, article, time, div, p, dl, dd, dt, ul, ol, li, hr {
  margin: 0;
  padding: 0; }

li, dl, dd, dt {
  list-style: none; }

img {
  vertical-align: top; }

html, body {
  height: 100%; }

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

td, th {
  padding: 0; }

.cf:before {
  display: table;
  content: ' '; }
.cf:after {
  display: table;
  content: ' ';
  clear: both; }

.jspContainer {
  position: relative;
  overflow: hidden; }

.jspPane {
  position: absolute; }

.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 13px;
  height: 100%; }

.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: #f00; }

.jspCap {
  display: none; }

.jspHorizontalBar .jspCap {
  float: left; }

.jspTrack {
  position: relative;
  width: 13px;
  background: url("../img/schedule_scroll_base.png") 50% 0 repeat-y;
  background-size: 3px 100%; }

.jspDrag {
  position: relative;
  top: 0;
  left: 50%;
  width: 13px;
  margin-left: -6.5px;
  cursor: pointer;
  background: #040404; }

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
  float: left;
  height: 100%; }

.jspArrow {
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-indent: -20000px;
  background: #50506d; }
  .jspArrow.jspDisabled {
    cursor: default;
    background: #80808d; }

.jspVerticalBar .jspArrow {
  height: 16px; }

.jspHorizontalBar .jspArrow {
  float: left;
  width: 16px;
  height: 100%; }

.jspVerticalBar .jspArrow:focus {
  outline: none; }

.jspCorner {
  float: left;
  height: 100%;
  background: #eeeef4; }

* html .jspCorner {
  margin: 0 -3px 0 0; }

/*
Goods
 */
.goods-modal {
  display: none;
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); }

.goods-modal-wrap {
  position: fixed;
  width: 980px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin: -295px 0 0 -490px;
  background: #fff; }

.goods-modal-leftarrow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 42px;
  height: 42px;
  margin-right: 20px;
  margin-top: -11.5px;
  cursor: pointer;
  margin-left: 20px;
  -webkit-transition: opacity .3s ease-in-out 0s;
  transition: opacity .3s ease-in-out 0s; }

.goods-modal-rightarrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 42px;
  height: 42px;
  margin-top: -11.5px;
  margin-right: 20px;
  cursor: pointer;
  -webkit-transition: opacity .3s ease-in-out 0s;
  transition: opacity .3s ease-in-out 0s; }

.goods-modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  -webkit-transition: opacity .3s ease-in-out 0s;
  transition: opacity .3s ease-in-out 0s; }
  .goods-modal-close img {
    width: 35px; }

.goods-modal-leftarrow:hover, .goods-modal-rightarrow:hover, .goods-modal-close:hover {
  opacity: .6;
  filter: alpha(opacity=60); }

.goods-modal-leftarrow.none, .goods-modal-rightarrow.none {
  opacity: 0 !important;
  filter: alpha(opacity=0);
  cursor: default; }

.goods-modal-subtitle {
  position: absolute;
  left: -20px;
  top: 266px; }

.goods-modal-content {
  width: 860px;
  height: 530px;
  overflow: hidden;
  margin: 40px; }
  .goods-modal-content .slide-dev {
    width: 860px;
    overflow: hidden; }
    .goods-modal-content .slide-dev li {
      float: left; }

.goods-modal-left-content {
  float: left;
  width: 440px; }
  .goods-modal-left-content .swiper-wrap {
    overflow: hidden;
    padding-bottom: 35px; }
  .goods-modal-left-content .swiper-container, .goods-modal-left-content .swiper-container-inner {
    width: 440px;
    height: 450px;
    overflow: visible; }
  .goods-modal-left-content .goods-id {
    width: 400px;
    height: 450px;
    margin: 0 40px; }
    .goods-modal-left-content .goods-id img {
      width: 400px;
      height: 450px !important; }
  .goods-modal-left-content img.off {
    -webkit-transition: opacity .3s ease-in-out 0s;
    transition: opacity .3s ease-in-out 0s;
    opacity: 1;
    filter: alpha(opacity=100); }
  .goods-modal-left-content img.on {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out 0s;
    transition: opacity .3s ease-in-out 0s; }
  .goods-modal-left-content .arrow-left:hover img.off, .goods-modal-left-content .arrow-right:hover img.off {
    opacity: 0.6;
    filter: alpha(opacity=60); }
  .goods-modal-left-content .control {
    width: 440px;
    position: absolute;
    bottom: -30px;
    text-align: center;
    margin-left: 20px; }
    .goods-modal-left-content .control .swiper-pagination-custom {
      width: auto;
      display: inline-block;
      margin: 2px 20px 0 20px;
      position: static;
      color: #000;
      font-size: 13px;
      letter-spacing: 0.14em;
      font-family: 'Works Sans', sans-serif;
      vertical-align: top; }
      .goods-modal-left-content .control .swiper-pagination-custom .numLine {
        width: 5px;
        margin: 0 5px;
        display: inline-block;
        letter-spacing: normal; }
  .goods-modal-left-content .swiper-button-prev, .goods-modal-left-content .swiper-button-next {
    display: inline-block;
    position: relative;
    width: 47px;
    top: 4px; }
  .goods-modal-left-content .swiper-button-prev {
    display: inline-block;
    vertical-align: top;
    width: 47px;
    height: auto;
    left: auto;
    cursor: pointer; }
    .goods-modal-left-content .swiper-button-prev:hover {
      background: none; }
  .goods-modal-left-content .swiper-button-next {
    display: inline-block;
    vertical-align: top;
    width: 47px;
    right: auto;
    height: auto;
    cursor: pointer; }
    .goods-modal-left-content .swiper-button-next:hover {
      background: none; }
  .goods-modal-left-content .swiper-button-prev.swiper-button-disabled, .goods-modal-left-content .swiper-button-next.swiper-button-disabled {
    opacity: 0;
    filter: alpha(opacity=0); }

.modal-item-list {
  width: 400px;
  height: 55px;
  margin: 0 auto;
  padding-top: 10px; }
  .modal-item-list .item {
    width: 52px;
    height: 52px;
    float: left;
    margin-right: 5px; }
    .modal-item-list .item:hover, .modal-item-list .item.active {
      -webkit-box-shadow: 0 0 0 1px #000;
      box-shadow: 0 0 0 1px #000;
      cursor: pointer; }
  .modal-item-list .item7 {
    margin-right: 0px; }
  .modal-item-list .item:hover .item7 {
    margin: -1px; }

.goods-modal-right-content {
  float: left;
  width: 350px;
  margin-left: 70px; }

.modal-limited {
  height: 17px;
  padding-bottom: 12px;
  font-size: 14px; }
  .modal-limited p {
    float: left; }
  .modal-limited .limited-img {
    padding-right: 10px; }
  .modal-limited .limited-text {
    padding-top: 4px; }

.modal-wrap {
  padding-top: 0px;
  line-height: 1.5em;
  margin-top: 20px; }
  .modal-wrap .goods-name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 21px;
    line-height: 1.3em;
    font-weight: bold;
    color: #000;
    letter-spacing: 0.055em; }
  .modal-wrap .goods-price {
    margin-bottom: 26px;
    font-size: 26px;
    font-family: 'Work Sans', sans-serif;
    color: #000;
    line-height: 1.0; }
    .modal-wrap .goods-price span {
      display: block;
      margin-bottom: 12px;
      padding-bottom: 5px;
      border-bottom: 1px solid #cccccc;
      font-size: 13px;
      font-family: 'Work Sans', sans-serif;
      font-weight: 700; }
  .modal-wrap .spec {
    margin-bottom: 40px;
    line-height: 1.0;
    font-size: 13px;
    line-height: 1.6;
    color: #000; }
    .modal-wrap .spec span {
      display: block;
      margin-bottom: 12px;
      padding-bottom: 5px;
      border-bottom: 1px solid #cccccc;
      font-size: 13px;
      font-family: 'Work Sans', sans-serif;
      font-weight: 700; }
  .modal-wrap .goods-copy {
    margin-bottom: 30px;
    padding-top: 30px;
    font-size: 13px;
    line-height: 1.5em;
    color: #000; }
  .modal-wrap .modal-buybtn {
    position: relative;
    -webkit-transition: background-color .5s ease;
    transition: background-color .5s ease;
    overflow: hidden;
    background-color: #000000;
    margin-bottom: 15px;
    width: 350px;
    font-family: "Work Sans", sans-serif;
    font-weight: 700; }
    .modal-wrap .modal-buybtn:hover {
      background-color: #2c2c2c; }
    .modal-wrap .modal-buybtn .inner {
      position: relative;
      padding: 10px 0; }
      .modal-wrap .modal-buybtn .inner p {
        color: #fff;
        font-size: 16px;
        text-align: center;
        letter-spacing: 0.05em; }
      .modal-wrap .modal-buybtn .inner a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1; }