@charset "utf-8";
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#000;
  line-height: 1.5em;
}
ul,ol {
  list-style-type:none;
}
a:hover {
  opacity:1.0;
}
a:focus {
  outline: none;
}
.content_wrap {
  max-width: 750px;
  margin:0 auto;
  overflow: hidden;
}
.content_wrap img {
  height:auto;
  display: block;
  height: auto;
  vertical-align:top;
  border: 0;
  max-width: 100%;
  margin:0;
}
.content_wrap video {
  width: 100%;
  display: block;
  height: auto;
  vertical-align:top;
  border: 0;
  outline: none;
}
.content_wrap a {
  display: block;
}
.content_wrap .rl {
  position: relative;
}
.content_wrap .video01 {
  position: absolute;
  z-index: -1;
  width: 100%;
  left:0;
  top:0;
}
.content_wrap .video02 {
  position: absolute;
  z-index: -1;
  width: 100%;
  left:0;
  top:42.2%;
}
/*円グラフ*/
.content_wrap .circle-wrap {
	position: absolute;
  left:-175px;
	width: 1100px;
	height: 1100px;
  overflow: hidden;
}
.content_wrap .circle-wrap.circle01 {
  top:40px;
}
.content_wrap .circle-wrap.circle02 {
  top:-165px;
}
.content_wrap .circle-wrap.circle03 {
  top:-173px;
}
.content_wrap .circle-wrap .circle {
	position: relative;
	width: 1100px;
	height: 1100px;
}
.content_wrap .circle-wrap {
  opacity:0;
}
.content_wrap .circle-wrap.inview_active {
  opacity: 1;
}
.content_wrap .circle-wrap .circle img {
	position: relative;
	top: 201px;
  width: 550px;
}
.content_wrap .circle-wrap .circle-right {
	position: absolute;
	left: 550px;
	width: 550px;
	height: 1100px;
	overflow: hidden;
}
.content_wrap .circle-wrap.inview_active .circle-right-hidden {
	position: relative;
	left: -550px;
	width: 550px;
	height: 1100px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	animation: rotateRight 1s linear 1 0.3s forwards;
}
.content_wrap .circle-wrap.inview_active .circle-right .circle {
	position: relative;
	left: 275px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 25% 50%;
	transform-origin: 25% 50%;
	animation: rotateRight2 1s linear 1 0.3s forwards;
}
.content_wrap .circle-wrap .circle-left {
	width: 550px;
	height: 1100px;
	overflow: hidden;
}
.content_wrap .circle-wrap.inview_active .circle-left-hidden {
	position: relative;
	left: 550px;
	width: 550px;
	height: 1100px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	animation: rotateLeft 1s linear 1 0.3s forwards;
}
.content_wrap .circle-wrap.inview_active .circle-left .circle {
	position: relative;
	left: -275px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 25% 50%;
	transform-origin: 25% 50%;
	animation: rotateLeft2 1s linear 1 0.3s forwards;
}
@keyframes rotateRight {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes rotateRight2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
@keyframes rotateLeft {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}
@keyframes rotateLeft2 {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-180deg);
    }
  }
.content_wrap .spir-widget {
  margin:3% 0;
}
.content_wrap .pt01 {
  position: absolute;
  z-index: 2;
  width: 100%;
  top:75%;
  left:0;
}
.content_wrap .btm-fix {
  position: fixed;
  left:50%;
  margin-left:-375px;
  bottom:0;
  width: 750px;
  z-index: 10;
  display: none;
}
.content_wrap .btm-fix a {
  display: block;
}
.content_wrap .circle2_bg {
  position: absolute;
  width: 73.33%;
  top:6%;
  left:13.2%;
  z-index: 3;
}
.content_wrap .circle-wrap.circle02 {
  z-index: 4;
}
.content_wrap .pt02 {
  position: absolute;
  width: 28.13%;
  top:70.55%;
  right:0;
  z-index: 5;
}
.content_wrap .pt03 {
  position: absolute;
  width: 40.4%;
  top:58%;
  left:4%;
  z-index: 2;
}
.content_wrap .video03 {
  position: absolute;
  z-index: -1;
  width: 100%;
  left:0;
  top:0;
}
.content_wrap .slide01_wrap {
  width: 86.66%;
  position: absolute!important;
  top:2.77%;
  left:6.67%;
  height: min(53.33vw,400px);
  overflow: hidden;
  border-radius: min(6.66vw,5px);
}
.content_wrap .slide01 {
  height: min(809.33vw,6070px);
}
.content_wrap .slide01 .swiper-wrapper {
  transition-timing-function: linear;
}
.content_wrap .slide02 {
  width: 100%;
  position: absolute!important;
  top:25.34%;
  left:0;
  overflow: hidden;
}
.content_wrap .slide02 .swiper-wrapper {
  transition-timing-function: linear;
}
.content_wrap .slide02 .swiper-wrapper .swiper-slide {
  margin:0 1.7%;
}
.content_wrap .slide03 {
  position: absolute;
  width: 100%;
  left:0;
  top:24.7%;
}
.content_wrap .slide03 .swiper-slide {
  opacity: .3;
  transition: .5s;
  transform: scale(1);
}
.content_wrap .slide03 .swiper-slide img {
  height: auto;
  width: 100%;
}
.content_wrap .slide03 .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.content_wrap .slide03 .swiper-button-prev {
  left: 3.4%;
  background: url(../images/prev.png) left top/100% no-repeat;
  background-size: 100%;
  content: "";
  width: 145px;
  height:145px;
  border:none;
  outline: none;
}
.content_wrap .slide03 .swiper-button-prev:after {
  content:"";
  border:none;
  outline: none;
}
.content_wrap .slide03 .swiper-button-next:after {
  content:"";
  border:none;
  outline: none;
}
.content_wrap .slide03 .swiper-button-next, .content_wrap .slide03 .swiper-button-prev {
  top:46%;
}
.content_wrap .slide03 .swiper-button-next {
  right: 2.2%;
  background: url(../images/next.png) left top/100% no-repeat;
  background-size: 100%;
  content: "";
  width: 145px;
  height:145px;
  border:none;
  outline: none;
}

.content_wrap .slide03 .swiper-horizontal>.content_wrap .slide03 .swiper-pagination-bullets, .content_wrap .slide03 .swiper-pagination-bullets.swiper-pagination-horizontal, .content_wrap .slide03 .swiper-pagination-custom, .content_wrap .slide03 .swiper-pagination-fraction {
  left:50%;
  display: flex;
  position: absolute;
  bottom: -4%;
  transform: translateX(-50%);
  width: auto!important;
}
.content_wrap .slide03 .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  outline: none;
  background: #fff;
  opacity: 0.2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  margin:0 8px;
}
.content_wrap .slide03 .swiper-pagination-bullet-active {
  opacity: 1;
}
.content_wrap .uriba03_btn {
  position: absolute;
  width: 100%;
  top:-6%;
  left:0;
  animation: uriba03_btn_animation 2s infinite;
}
@keyframes uriba03_btn_animation {
  0% {
      transform: translate(0px, 2px);
  }
  5% {
      transform: translate(0px, -2px);
  }
  10% {
      transform: translate(0px, 2px);
  }
  15% {
      transform: translate(0px, -2px);
  }
  20% {
      transform: translate(0px, 2px);
  }
  25% {
      transform: translate(0px, -2px);
  }
  30% {
      transform: translate(0px, 0px);
  }
}
@media(max-width:749px) {
  .content_wrap img {
    width: 100%;
  }
  .content_wrap .btm-fix {
    left:0;
    margin-left:0;
    width: 100%;
  }
  .content_wrap .circle-wrap {
    left:-23.33vw;
  	width: 146.66vw;
  	height: 146.66vw;
  }
  .content_wrap .circle-wrap.circle01 {
    top:5.33vw;
  }
  .content_wrap .circle-wrap.circle02 {
    top:-22vw;
  }
  .content_wrap .circle-wrap.circle03 {
    top:-23.06vw;
  }
  .content_wrap .circle-wrap .circle {
  	width: 146.66vw;
  	height: 146.66vw;
  }
  .content_wrap .circle-wrap .circle img {
  	top: 26.8vw;
    width: 73.33vw;
  }
  .content_wrap .circle-wrap .circle-right {
  	left: 73.33vw;
  	width: 73.33vw;
  	height: 146.66vw;
  }
  .content_wrap .circle-wrap.inview_active .circle-right-hidden {
  	left: -73.33vw;
  	width: 73.33vw;
  	height: 146.66vw;
  }
  .content_wrap .circle-wrap.inview_active .circle-right .circle {
  	left: 36.66vw;
  }
  .content_wrap .circle-wrap .circle-left {
  	width: 73.33vw;
  	height: 146.66vw;
  }
  .content_wrap .circle-wrap.inview_active .circle-left-hidden {
  	left: 73.33vw;
  	width: 73.33vw;
  	height: 146.66vw;
  }
  .content_wrap .circle-wrap.inview_active .circle-left .circle {
  	left: -36.66vw;
  }
  .content_wrap .circle2_bg {
    top:5.9%;
  }
 .content_wrap .slide03 .swiper-button-prev {
  left: 3.2%;
  width: 19.33vw;
  height:19.33vw;
}
.content_wrap .slide03 .swiper-button-next {
  right: 2%;
  width: 19.33vw;
  height:19.33vw;
}
.content_wrap .slide03 .swiper-button-next, .content_wrap .slide03 .swiper-button-prev {
  top:48%;
}

.content_wrap .slide03 .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin:0 5px;
 }
}
