@charset "utf-8";
@import url("reset.css");
@import url("util.css");

* {
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, '游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif;
	color: #333;
}
main{
	max-width: 750px;
	margin: 0 auto;
	overflow:hidden;
}
img{
	display: block;
}
.relative{
	position: relative;
}

.fv-01{
	position: relative;
	z-index: 2;
}

.fv_mov video{
	width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
}

.img02-1{
	position: absolute;
	top: 8%;
	left: 0;
	z-index: 2;
}
.img02-2{
	position: absolute;
	top: 16%;
	left: 0;
	z-index: 2;
}

.img02-3{
	position: absolute;
	bottom: 30%;
	left: 21%;
	z-index: 2;
}
.img02-4{
	position: absolute;
	top: 38%;
	right: 0;
	z-index: 3;
}
.img02-5{
	position: absolute;
	bottom: 15%;
	left: 18.5%;
	z-index: 1;
}
.scroll_x{
	display: flex;
	overflow-x: scroll;
}

.section03-1{
	position: relative;
}
.img03-1{
	position: absolute;
	top: 5%;
	left: 0;
}
.img03-2{
	position: absolute;
	top: 5%;
	left: 0;
}
.img03-3{
	position: absolute;
	bottom: 23%;
	left: 0;
}
.img03-4{
	position: absolute;
	bottom: 0;
	left: 0;
}
.section03-2{
	position: relative;
	z-index: 2;
}
.mov_03{
	position: absolute;
	top: 6%;
    z-index: 1;
    left: 0;
}
.mov_03 video{
	width: 98%;
}
.img03-5{
	position: absolute;
	top: 45%;
	left: 0;
	z-index: 4;
}
.img03-6{
	position: absolute;
	top: 43%;
	left: 0;
	z-index: 4;
}
.img03-7{
	position: absolute;
	bottom: 16%;
	left: 0;
	z-index: 3;
}

.img04-1{
	position: absolute;
	top: 2%;
	left: 0;
}
.img04-2{
	position: absolute;
	top: 12%;
	left: 0;
}
.img04-3,.img04-4,.img04-5{
	position: absolute;
	bottom: 30%;
	left: 0;
}

.img25-1{
	position: absolute;
	top: 39%;
	left: 0;
}
.img25-2{
	position: absolute;
	top: 51%;
	left: 0;
}

.img26-1{
	position: absolute;
	top: 21%;
	left: 0;
}
.img26-2{
	position: absolute;
	top: 31.5%;
	left: 0;
}
.img26-3{
	position: absolute;
	top: 40.5%;
	left: 0;
}
.img26-4{
	position: absolute;
	top: 45.5%;
	left: 0;
}
.img26-5{
	position: absolute;
	bottom: 16%;
	left: 0;
}

.img27-1{
	position: absolute;
	top: 11%;
	left: 0;
}
.img27-2{
	position: absolute;
	top: 31.5%;
	left: 0;
}
.img27-3{
	position: absolute;
	top: 35%;
	left: 0;
}


.img05_1{
	position: absolute;
	top: 0;
	left: 0;
}
.img05_2{
	position: absolute;
	top: 19%;
	left: 0;
}
.img05_3{
	position: absolute;
	top: 33%;
	left: 0;
}
.img05_4{
	position: absolute;
	bottom: 34%;
	left: 0;
}
.img05_5{
	position: absolute;
	bottom: 11%;
	left: 0;
}

.img06-1{
	position: absolute;
	top: 20%;
	left: 0;
}
.img06-2{
	position: absolute;
	top: 30%;
	left: 0;
}
.img06-3{
	position: absolute;
	top: 1.5%;
	left: 0;
}
.img06-4{
	position: absolute;
	top: 33.5%;
	left: 0;
}
.img06-5{
	position: absolute;
	bottom: 1%;
	left: 0;
}

.img07-1{
	position: absolute;
	top: 20%;
	left: 0;
}
.img07-2{
	position: absolute;
	bottom: 22%;
	left: 0;
}

.img08-1{
	position: absolute;
	top: 3.5%;
	left: 0;
}
.img08-2{
	position: absolute;
	top: 3.5%;
	left: 0;
}
.img08-3,.img08-4{
	position: absolute;
	bottom: 46.5%;
	left: 0;
}
.img08-5{
	position: absolute;
	top: 45%;
	left: 0;
}
.img08-6{
	position: absolute;
	top: 11.5%;
	left: 0;
}
.img08-7{
	position: absolute;
	top: 29.5%;
	left: 0;
}
.img08-8{
	position: absolute;
	top: 39.5%;
	left: 0;
}
.img08-9,.img08-10{
	position: absolute;
	top: 8.5%;
	left: 0;
}
.img08-11,.img08-12{
	position: absolute;
	top: 54.5%;
	left: 0;
}

.img09-1{
	position: absolute;
	top: 19%;
	left: 0;
}
.img09-3{
	position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
}

.img09-4{
	position: absolute;
    top: 11%;
    left: 0;
}
.img09-5{
	position: absolute;
    top: 20%;
    left: 0;
}
.img09-6{
	position: absolute;
    top: 26%;
    left: 0;
}

.img11-1{
	position: absolute;
	top: 21%;
	left: 0;
}
.img11-2{
	position: absolute;
	top: 37%;
	left: 0;
}

.img12-1{
	position: absolute;
	top: 18%;
	left: 0;
}
.img12-2{
	position: absolute;
	top: 28%;
	left: 0;
}

.img13-1{
	position: absolute;
	top: 45%;
	left: 0;
}
.img13-2{
	position: absolute;
	top: 1%;
	left: 0;
}
.img13-3{
	position: absolute;
	top: 19%;
	left: 0;
}
.img13-4{
	position: absolute;
	top: 36.3%;
	left: 0;
}
.img13-5{
	position: absolute;
	bottom: 28%;
	left: 0;
}
.img13-6{
	position: absolute;
	bottom: 10.7%;
	left: 0;
}

.img14-1{
	position: absolute;
	top: 15%;
	left: 0;
}
.img14-2{
	position: absolute;
	top: 25%;
	left: 0;
}
.img14-3{
	position: absolute;
	bottom: 30%;
	left: 0;
}

.img15-1{
	position: absolute;
	top: 3%;
	left: 0;
}
.img15-2{
	position: absolute;
	top: 8%;
	left: 0;
}
.img15-3{
	position: absolute;
	top: 43.5%;
	left: 0;
}
.img15-4{
	position: absolute;
	bottom: 24.2%;
	left: 0;
}
.img15-5{
	position: absolute;
	bottom: 8%;
	left: 0;
}
.section15-2{
	position: relative;
	z-index: 2;
}
.mov_15{
	position: absolute;
	bottom: 40.8%;
	z-index: 1;
}
.mov_15 video{
	width: 100%;
}

.img16-1{
	position: absolute;
	top: 8%;
	left: 0;
}
.img16-2{
	position: absolute;
	top: 19%;
	left: 0;
}
.img17-1{
	position: absolute;
	top: 29%;
	left: 0;
}
.img17-2{
	position: absolute;
	top: 38%;
	left: 0;
}

.img18-1{
	position: absolute;
	top: 6%;
	left: 0;
}
.img18-2{
	position: absolute;
	top: 5%;
	left: 0;
}
.img18-3{
	position: absolute;
	top: 10%;
	left: 0;
}
.img18-4{
	position: absolute;
	top: 9%;
	left: 0;
}
.img18-5{
	position: absolute;
	top: 44%;
	left: 0;
}
.img18-6{
	position: absolute;
	top: 52%;
	left: 0;
}

.img18-2-1{
	position: absolute;
	top: 32%;
	left: 0;
}
.img18-2-2{
	position: absolute;
	top: 18%;
	left: 0;
	z-index: 2;
}
.img18-2-3{
	position: absolute;
	top: 68%;
	left: 0;
	z-index: 2;
}
.img18-2-4{
	position: absolute;
	top: 21.5%;
	left: 0;
	z-index: 1;
}


/*グラフここから*/
.sec18-2_graphWrap {
      position: absolute;
    height: 88%;
    width: 88%;
    margin: auto;
    top: 34.5%;
    left: 50%;
    }
    .sec18-2_graph {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      vertical-align: middle;
    }
    .pie {
      fill: transparent;
      /*cx: 32;
      cy: 32;*/
      r: 16px;
      stroke-width: 32;
      stroke-dashoffset: 25;
    }
    .pieA {
      stroke: #f0832f;
    }
    .pieB {
      stroke: #fdeee2;
    }
    .sec18-2_graphWrap.active {
      opacity: 1;
    }
    .sec18-2_graphWrap.active .pieA {
      animation: circleA1 1s forwards;
    }
    .sec18-2_graphWrap.active .sec18-2_percent,
    .sec18-2_text_1,
    .sec18-2_text_2 {
      opacity: 0;
    }
    .sec18-2_graphWrap.active .sec18-2_percent {
      animation: fadeInGraph 0.6s forwards;
      animation-delay: 1.1s;
    }

    .sec18-2_graphWrap.active .sec18-2_text_1 {
      animation: fadeInGraph 0.6s forwards;
      animation-delay: 0.8s;
    }

    .sec18-2_graphWrap.active .sec18-2_text_2 {
      animation: fadeInGraph 0.6s forwards;
      animation-delay: 1.4s;
    }

    @keyframes circleA1 {
      0% {
        stroke-dasharray: 0 100;
      }

      100% {
        stroke-dasharray: 95 5;
      }
    }

    @keyframes circleA2 {
      0% {
        stroke-dasharray: 0 100;
      }

      100% {
        stroke-dasharray: 100 0;
      }
    }
/*グラフここまで*/

.img19-1{
	position: absolute;
	top: 52%;
	left: 0;
}

.img20-1{
	position: absolute;
	top: 16%;
	left: 0;
}
.img20-2{
	position: absolute;
	top: 46%;
	left: 0;
}

.img21-1{
	position: absolute;
	bottom: 11%;
	left: 0;
}
.img21-2{
	position: absolute;
	bottom: 11%;
	left: 0;
}
.img21-3{
	position: absolute;
	bottom: 11%;
	left: 0;
}

.img22-1{
	position: absolute;
	top: 11%;
	left: 0;
}
.img22-2{
	position: absolute;
	top: 31%;
	left: 0;
}
.img22-3{
	position: absolute;
	top: 50%;
	left: 0;
}
.img22-4{
	position: absolute;
	top: 69%;
	left: 0;
}

.img23-1{
	position: absolute;
	top: 2%;
	left: 0;
}
.img23-2{
	position: absolute;
	top: 11%;
	left: 0;
}
.img23-3{
	position: absolute;
	top: 57%;
	left: 0;
}



/*==================================================
offer
===================================*/
.cta_novelty{
	position: absolute;
	bottom: 33%;
}
.cta_1820{
	position: absolute;
	bottom: 29%;
}
.henkin_link{
	position: absolute;
    bottom: 5%;
    width: 34%;
    height: 1%;
    left: 46%;
}
.henkin_link img{
    height: 0;
}
.henkin_link_1820{
	position: absolute;
    bottom: 4.5%;
    width: 34%;
    height: 1%;
    left: 46%;
}
.henkin_link img{
    height: 0;
}
.btn_animate {
    transform-origin: center center;
    cursor: pointer;
    animation: 1s ease 0s infinite alternate none running fuwafuwa;
}

@keyframes fuwafuwa{
0% {
    transform: scale(0.9, 0.9);
}
100% {
    transform: scale(1, 1);
}
	
}


/*==================================================
横スクロール
===================================*/
.scroll {
  margin: auto;
  overflow-x: auto;
  white-space: nowrap;
  width: 610px;
}

/*==================================================
スライダー
===================================*/
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0 50px;
  background: #fcede1;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
	width: auto!important;
	height: auto!important;
}
.slick-prev:before, .slick-next:before {
  color: #fff!important;
	font-size: 30px!important;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
	margin: 0 5px;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.slick-dots li.slick-active button:before {
    color: #e36a14!important;
}
.slick-dots{
	bottom: -35px!important;
}
.slick-prev{
	left: -3%!important;
}
.slick-next {
    right: -3%!important;
}
.full-screen .slick-list {
  overflow: visible;
}
.full-screen.slider {
	width: 600px;
  max-width: 600px;
  margin: 0 auto;
}


/*==================================================
縦スライダー
===================================*/

@keyframes vertical-animation {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

.slider-container {
  height: 42%;
  overflow: hidden;
	position: absolute;
    top: 50%;
    left: 11%;
}

.slider-wrapper {
  display: grid; /* slideのmargin-bottom値を全て内包させる為 */
  animation: vertical-animation 30s linear infinite;
}

.slide {
  width: 100%;
  margin: 0;
}

.slide img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (hover: hover) {
  .slider-container:hover .slider-wrapper {
    animation-play-state: paused;
  }
}

/*==================================================
footer
===================================*/
.lp_footer{
		display: none;
	}
.footer_saji{
		max-width: 750px;
		width: 100%;
		margin: 0 auto;
		padding: 30px;
		overflow: hidden;
		text-align: center;
		background-color: #f0832c;
		color: #fff;
}
	
.footer_saji ul{
	margin: 0 0 5% 0;
	padding: 0;
    list-style: none;
	font-size: 0.9em;
}
.footer_saji ul li{
    margin: 0 0 2% 0;
}
.footer_saji ul li a{
    text-decoration: none;
    color: #fff;
}
.copyright{
		font-size: 12px;
	}




/*下からフェードイン　0.5秒*/
.fadeUp300 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp300.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .3s; /* フェード開始を0.3秒遅らせる */
}
.fadeUp500 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp500.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}
.fadeUp700 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp700.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .7s; /* フェード開始を0.7秒遅らせる */
}
.fadeUp900 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp900.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .9s; /* フェード開始を0.9秒遅らせる */
}

/*下からフェードイン　1.0秒*/
.fadeUp1000 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp1000.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: 1.0s; /* フェード開始を1.0秒遅らせる */
}
.fadeUp1100 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp1100.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: 1.1s; /* フェード開始を1.1秒遅らせる */
}
.fadeUp1300 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp1300.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: 1.3s; /* フェード開始を1.1秒遅らせる */
}
/*下からフェードイン　1.5秒*/
.fadeUp1500 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp1500.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: 1.5s; /* フェード開始を1.5秒遅らせる */
}
/*下からフェードイン　2.0秒*/
.fadeUp2000 {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.3秒 */
}
.fadeUp2000.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: 2.0s; /* フェード開始を2.0秒遅らせる */
}

/*右からフェードイン*/
.fadeIn_right {
	opacity: 0;
	transform: translate(50%, 0);
	transition: 1s;
}
.fadeIn_right.is-inview  {
	transform: translate(0, 0);
	opacity: 1;
}

/*左からフェードイン*/
.fadeIn_left {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 1s;
}
.fadeIn_left.is-inview  {
	transform: translate(0, 0);
	opacity: 1;
}

/*==================================================
フローティング
===================================*/
.fixed-offer-is-visible {
    opacity: 1 !important;
}
.fixed-offer {
    top: 0;
    opacity: 0;
    position: fixed;
    transition: opacity 0.3s linear 0s;
    width: 100%;
    z-index: 99;
    max-width: 750px;
    margin: 0 auto;
}
.fixed-offer img{
    margin: 0 auto;
}
.fixed-offer-is-invisible a{
    display: none;
}
.fixed-offer__inner{
	background: #fff;
	padding: 7px 0;
}





/*==================================================
※※※※※※※ここからスマホ用※※※※※※
===================================*/
/* ▼スマホ用 */
@media screen and (max-width: 767px) {
	body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* Safari */
}
	img{
		width: 100%;
		margin: 0;
	}
	
.scroll{
    margin: auto;
    overflow-x: auto;
    white-space: nowrap;
	 width: 310px;
}
.scroll img{
    width: calc(124vw * 557 / 375);
}

.img02-3{
	position: absolute;
	bottom: 30%;
	left: 21%;
	z-index: 2;
	width: 20%;
}
.img02-4{
	position: absolute;
	top: 38%;
	right: 0;
	z-index: 3;
	width: 30%;
}

/* ▼スライダー */
.full-screen.slider {
	width: 350px;
  max-width: 350px;
  margin: 0 auto;
}
	
.slide {
  width: 60%;
  margin: 0;
}


	
}