@charset "UTF-8";
/* CSS Document */
/* ----------------------------------------------------------------------------------------------------
  settings
* --------------------------------------------------------------------------------------------------*/
html {
  font-size: 62.5%;
  overflow-y: scroll;
}

body {
  text-justify: inter-ideograph;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-print-color-adjust: exact;
  font-family: 游ゴシック体, "Yu Gothic", "Noto Sans JP", Helvetica, YuGothic, Arial, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Noto Sans JP", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000000;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

.mincho {
  font-family: "Shippori Mincho B1", serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

svg {
  width: 100%;
  height: 100%;
}

.italic {
  font-style: italic;
}

main {
  display: block;
}

.ie .slick-dots li button:before {
  font-size: 20px;
}

*:focus {
  outline: none;
}

.inview {
  opacity: 0;
}

.bold {
  font-weight: 700;
}

.red {
  color: #ff0000;
}

@media screen and (min-width: 769px) {
  .sp_view {
    display: none;
  }
  .pc_view {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
  .sp_view {
    display: block;
  }
  .pc_view {
    display: none;
  }
  body {
    font-size: 1.2rem;
  }
  input[type=text],
  input[type=search],
  input[type=submit] {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
  }
}
@media screen and (max-width: 768px) {
  .percent60 {
    width: 60% !important;
    height: auto !important;
  }
  .percent61 {
    width: 61% !important;
    height: auto !important;
  }
  .percent62 {
    width: 62% !important;
    height: auto !important;
  }
  .percent63 {
    width: 63% !important;
    height: auto !important;
  }
  .percent64 {
    width: 64% !important;
    height: auto !important;
  }
  .percent65 {
    width: 65% !important;
    height: auto !important;
  }
  .percent66 {
    width: 66% !important;
    height: auto !important;
  }
  .percent67 {
    width: 67% !important;
    height: auto !important;
  }
  .percent68 {
    width: 68% !important;
    height: auto !important;
  }
  .percent69 {
    width: 69% !important;
    height: auto !important;
  }
  .percent70 {
    width: 70% !important;
    height: auto !important;
  }
  .percent71 {
    width: 71% !important;
    height: auto !important;
  }
  .percent72 {
    width: 72% !important;
    height: auto !important;
  }
  .percent73 {
    width: 73% !important;
    height: auto !important;
  }
  .percent74 {
    width: 74% !important;
    height: auto !important;
  }
  .percent75 {
    width: 75% !important;
    height: auto !important;
  }
  .percent76 {
    width: 76% !important;
    height: auto !important;
  }
  .percent77 {
    width: 77% !important;
    height: auto !important;
  }
  .percent78 {
    width: 78% !important;
    height: auto !important;
  }
  .percent79 {
    width: 79% !important;
    height: auto !important;
  }
  .percent80 {
    width: 80% !important;
    height: auto !important;
  }
  .percent81 {
    width: 81% !important;
    height: auto !important;
  }
  .percent82 {
    width: 82% !important;
    height: auto !important;
  }
  .percent83 {
    width: 83% !important;
    height: auto !important;
  }
  .percent84 {
    width: 84% !important;
    height: auto !important;
  }
  .percent85 {
    width: 85% !important;
    height: auto !important;
  }
  .percent86 {
    width: 86% !important;
    height: auto !important;
  }
  .percent87 {
    width: 87% !important;
    height: auto !important;
  }
  .percent88 {
    width: 88% !important;
    height: auto !important;
  }
  .percent89 {
    width: 89% !important;
    height: auto !important;
  }
  .percent90 {
    width: 90% !important;
    height: auto !important;
  }
  .percent91 {
    width: 91% !important;
    height: auto !important;
  }
  .percent92 {
    width: 92% !important;
    height: auto !important;
  }
  .percent93 {
    width: 93% !important;
    height: auto !important;
  }
  .percent94 {
    width: 94% !important;
    height: auto !important;
  }
  .percent95 {
    width: 95% !important;
    height: auto !important;
  }
  .percent96 {
    width: 96% !important;
    height: auto !important;
  }
  .percent97 {
    width: 97% !important;
    height: auto !important;
  }
  .percent98 {
    width: 98% !important;
    height: auto !important;
  }
  .percent99 {
    width: 99% !important;
    height: auto !important;
  }
  .percent100 {
    width: 100% !important;
    height: auto !important;
  }
}