@charset "UTF-8";
/* CSS Document */
.container {
  position: relative;
}

/* 背景画像 */
.bg-image01 {
  position: absolute;
  top: 30px;
  right: 0;
  width: 100%;
  height: calc(100% - 100px);
  background: url(../common/img/product_mv01.png) no-repeat top right;
  z-index: 0;
}
@media screen and (max-width: 480px) {
  .bg-image01 {
    background-size: 60% auto;
    top: 70px;
  }
}

.bg-image02 {
  position: absolute;
  top: 30px;
  right: -611px;
  width: 100%;
  height: calc(100% - 100px);
  background: url(../common/img/product_mv02.png) no-repeat top right;
  z-index: 0;
}
@media screen and (max-width: 1000px) {
  .bg-image02 {
    width: 0;
    height: 0;
  }
}

.contents {
  position: relative;
  margin: 0 80px;
  padding-bottom: 20px;
  z-index: 1;
}
@media screen and (max-width: 480px) {
  .contents {
    margin: 0 10px;
  }
}

/* トップテキスト、キャッチコピー*/
.billboard-text {
  font-size: 20px;
  font-size: 2rem;
  line-height: 40px;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  margin: 0 0 30px;
  text-shadow: 0 0 4px #fff;
}
@media screen and (max-width: 480px) {
  .billboard-text {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0 0 50px;
  }
}

.catchcopy {
  font-size: 60px;
  font-size: 6rem;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  margin-bottom: 50px;
  text-shadow: 0 0 4px #fff;
}
@media screen and (max-width: 480px) {
  .catchcopy {
    font-size: 35px;
    font-size: 3.5rem;
    margin-bottom: 50px;
  }
}

/* スライド */
.billboard-slide {
  margin: 0 auto;
  min-width: 680px;
}
@media screen and (max-width: 480px) {
  .billboard-slide {
    min-width: 300px;
  }
}
.billboard-slide img {
  width: calc(100% - 80px);
  margin: 0 auto;
}
@media screen and (max-width: 480px) {
  .billboard-slide img {
    width: 100%;
  }
}

.slick-slide {
  background: #fff;
  border: 1px solid #eee;
  padding: 30px;
}

.slick-list {
  margin: 0 80px;
}
@media screen and (max-width: 480px) {
  .slick-list {
    margin: 0;
  }
}

.slick-prev,
.slick-next {
  width: 50px;
  height: 52px;
}
@media screen and (max-width: 480px) {
  .slick-prev,
.slick-next {
    width: 20px;
    height: 35px;
  }
}

.slick-prev {
  left: 100px;
}
@media screen and (max-width: 480px) {
  .slick-prev {
    left: 5px;
  }
}

.slick-next {
  right: 100px;
}
@media screen and (max-width: 480px) {
  .slick-next {
    right: 5px;
  }
}

.slick-next:before {
  display: block;
  content: "";
  border-right: 10px solid #aaa;
  border-top: 10px solid #aaa;
  width: 25px;
  height: 25px;
  margin-left: 4px;
  transform: perspective(999px) rotate(45deg);
}
@media screen and (max-width: 480px) {
  .slick-next:before {
    border-right-width: 5px;
    border-top-width: 5px;
    width: 15px;
    height: 15px;
    margin-left: -5px;
  }
}

.slick-prev:before {
  display: block;
  content: "";
  border-left: 10px solid #aaa;
  border-top: 10px solid #aaa;
  width: 25px;
  height: 25px;
  margin-left: 8px;
  transform: perspective(999px) rotate(-45deg);
}
@media screen and (max-width: 480px) {
  .slick-prev:before {
    border-left-width: 5px;
    border-top-width: 5px;
    width: 15px;
    height: 15px;
    margin-left: 6px;
  }
}

/* 各パーツ */
/* 共通 */
.parts {
  margin: 160px 0;
}
@media screen and (max-width: 480px) {
  .parts {
    margin: 80px 0;
  }
}

.parts-heading {
  font-size: 50px;
  font-size: 5rem;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  text-align: center;
  margin-bottom: 80px;
}
@media screen and (max-width: 480px) {
  .parts-heading {
    font-size: 30px;
    font-size: 3rem;
    margin-bottom: 20px;
  }
}

.parts-sub-heading {
  font-size: 30px;
  font-size: 3rem;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  margin-bottom: 80px;
}
@media screen and (max-width: 480px) {
  .parts-sub-heading {
    font-size: 20px;
    font-size: 2rem;
    margin-bottom: 20px;
  }
}

.parts-text {
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .parts-text {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

/* ①縦パーツ
.parts-imgにトップページにはスライダーサンプルを表示させていますが、その位置にimgタグで画像を配置できるようにしてあります。 */
.vertical-parts .parts-sub-heading {
  text-align: center;
  margin-left: 80px;
  margin-right: 80px;
}
@media screen and (max-width: 480px) {
  .vertical-parts .parts-sub-heading {
    margin-left: 0;
    margin-right: 0;
  }
}
.vertical-parts .parts-text {
  margin-left: 80px;
  margin-right: 80px;
}
@media screen and (max-width: 480px) {
  .vertical-parts .parts-text {
    margin-left: 0;
    margin-right: 0;
  }
}
.vertical-parts .parts-img {
  margin-top: 50px;
  margin-left: 160px;
  margin-right: 160px;
}
@media screen and (max-width: 480px) {
  .vertical-parts .parts-img {
    margin-left: 0;
    margin-right: 0;
  }
}
.vertical-parts .parts-img img {
  width: 100%;
  height: auto;
}

/* ②左右パーツ 左：hタグ、文章　右：画像 */
.flex-parts .wrapper {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}
@media screen and (max-width: 480px) {
  .flex-parts .wrapper {
    display: block;
  }
}
.flex-parts .left-wrapper {
  margin-right: 40px;
  width: calc(50% - 40px);
}
@media screen and (max-width: 480px) {
  .flex-parts .left-wrapper {
    margin-right: 0;
    width: 100%;
  }
}
.flex-parts .left-wrapper img {
  width: 100%;
  height: auto;
}
.flex-parts .right-wrapper {
  margin-left: 40px;
  width: calc(50% - 40px);
}
@media screen and (max-width: 480px) {
  .flex-parts .right-wrapper {
    margin-left: 0;
    width: 100%;
  }
}
.flex-parts .right-wrapper img {
  width: 100%;
  height: auto;
}

/* ③左右逆パーツ　hタグ、文章→画像の文章構造にして、左：画像、右：hタグ、文章にする場合に使用 */
.flex-reverse-parts .wrapper {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}
@media screen and (max-width: 480px) {
  .flex-reverse-parts .wrapper {
    display: block;
  }
}
.flex-reverse-parts .left-wrapper {
  margin-right: 40px;
  width: calc(50% - 40px);
}
@media screen and (max-width: 480px) {
  .flex-reverse-parts .left-wrapper {
    margin-right: 0;
    width: 100%;
  }
}
.flex-reverse-parts .left-wrapper img {
  width: 100%;
  height: auto;
}
.flex-reverse-parts .right-wrapper {
  margin-left: 40px;
  width: calc(50% - 40px);
}
@media screen and (max-width: 480px) {
  .flex-reverse-parts .right-wrapper {
    margin-left: 0;
    width: 100%;
  }
}
.flex-reverse-parts .right-wrapper img {
  width: 100%;
  height: auto;
}

/* トップページ用のパーツブロックごとの個別調整 */
/* 1つ目 スライドサンプル部分 */
.first-block .parts-img {
  width: 800px;
  margin: 50px auto 0;
}
@media screen and (max-width: 480px) {
  .first-block .parts-img {
    width: auto;
  }
}
@media screen and (max-width: 480px) {
  .first-block .parts-img div:nth-of-type(1) {
    width: 80%;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  .first-block .parts-img div:nth-of-type(2) {
    width: 90%;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  .first-block .parts-img div:nth-of-type(3) {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .first-block .parts-img div iframe {
    width: 100%;
    height: calc(25px + (1vw * 20));
  }
}

/* 2つ目　画像ウィンドウ幅による変化 */
.second-block .right-wrapper p {
  margin-bottom: 10px;
}
.second-block .right-wrapper img:nth-of-type(2) {
  max-width: 300px;
}
.second-block .right-wrapper img:nth-of-type(3) {
  width: 70%;
}

/* 4つ目　時計付きタイトルサンプルの高さ、間隔調整 */
.fourth-block .right-wrapper p {
  margin-bottom: 10px;
}
.fourth-block .right-wrapper iframe {
  width: 100%;
  height: calc(20vw * 0.3126);
  max-height: 86px;
  min-height: 58px;
}
@media screen and (max-width: 1000px) {
  .fourth-block .right-wrapper iframe {
    height: 53px;
  }
}

/* 下固定エリア　1000px以上スクロールした際に表示されるボタン部分 */
.bottom-fixed-block {
  display: none;
  position: fixed;
  bottom: 70px;
  left: 0px;
  width: 100%;
}
.bottom-fixed-block .bottom-fixed-button {
  position: absolute;
  left: calc(50% - (320px / 2));
}
@media screen and (max-width: 480px) {
  .bottom-fixed-block .bottom-fixed-button {
    left: calc(50% - (220px / 2));
  }
}
.bottom-fixed-block .bottom-fixed-button a {
  font-size: 20px;
  font-size: 2rem;
  font-weight: 700;
  font-family: "ヒラギノUD角ゴ W6 JIS2004";
  text-align: center;
  background: rgba(255, 223, 0, 0.7);
  padding: 10px 60px;
  border-radius: 50px;
}
@media screen and (max-width: 480px) {
  .bottom-fixed-block .bottom-fixed-button a {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 10px 30px;
  }
}
.bottom-fixed-block ul {
  display: none;
}
@media screen and (max-width: 480px) {
  .bottom-fixed-block ul {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    position: absolute;
    bottom: -70px;
  }
}
@media screen and (max-width: 480px) {
  .bottom-fixed-block ul li {
    width: 33.3%;
    background: #fff;
  }
}
@media screen and (max-width: 480px) {
  .bottom-fixed-block ul li a {
    display: block;
    width: 100%;
    padding: 5px 0;
    text-align: center;
  }
}