@charset "UTF-8";

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: 700;
  font-size: 1.6em;/* 16px*/
  line-height: 2;
  color: black;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

.carousel-item .img-fluid {
  width: 100%;
  height: auto;
}

.carousel-item{
  height: auto;
}

.carousel-item a {
  display: block;
  width: 100%;
}

.carousel-item .show-image {
  display: block;
  width: 100%;
}

h1 {
  font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
  line-height: 1.3;
}
h2 {
  font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
@media (min-width: 1200px) {/* 1200px以上*/
  h1 {
      font-size: 4rem;/* 40px*/
  }
  h2 {
      font-size: 3.6rem;/* 36px*/
      font-weight: bold;
  }
  h3 {
    font-size: 3rem;/* 30px*/
    font-weight: bold;
    border-bottom: solid 2px white;
  }

}
@media screen and (max-width: 640px) {/* 640px以下*/
  body{
  line-height: 2;
  }
  h1{
      font-size: 2rem;/* 20px*/
  }
  h2 {
      font-size: 1.9rem;/* 19px*/
      font-weight: bold;
  }
  h3 {
    font-size: 1.8rem;/* 18px*/
    font-weight: bold;
    border-bottom: solid 2px white;
  }
}

.loop_css1 {
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

.loop_css1 img {
  width: auto%;
  height: 100%;
  will-change: transform;
}

@media screen and ( min-width: 900px ) {
  .loop_css1 {
    height: calc(100vw * .17);
  }

  .loop_css1 img {
    width: auto;
    min-width: 110vw;
    height: 100%;
  }
}

.loop_css1 img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.loop_css1 img + img {
  -webkit-animation: loop2 50s  linear infinite;
  animation: loop2 50s linear infinite;
}

@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}