<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title>lottery</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://demo.sakurain.co.jp/wp-content/themes/wel/reset.css">

<style>

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  padding-top: 0px;

  list-style: none;

}

  body{

-webkit-text-size-adjust: 100%;

  font-size: 1.4rem;

  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}


img {

	border: 0;

	vertical-align: bottom;

}


#wrapper{

  width: 100%;

  background-image: url(https://demo.sakurain.co.jp/wp-content/themes/wel/back02.png?ver06);

  background-repeat: no-repeat;

  background-size:cover;

  background-position: center center;

  background-attachment: fixed;

  min-height: 100vh;

  position:relative;

}	


#h1_area{		

	position: absolute;

	top: 40%;

	left: 50%;

	text-align:center;

	font-size:44px;

	transform: translateY(-50%) translateX(-50%);

  -webkit- transform: translateY(-50%) translateX(-50%);

	}

	
	@media screen and (max-width: 767px) {	

			#h1_area{

				font-size:24px;		

			}	

	}

	
.timer{

    text-align: center;

    font-size: 25px;

	font-weight:bold;	

	width: 80px;

	height:80px;

	border-radius: 50%;

	text-align:center; 

	line-height: 80px;

	background-color:#57A4DD;

	color:#ffffff;

	margin: auto;

	
	position:absolute;

	top:60%;

	left:50%;

	transform: translateY(-50%) translateX(-50%);

  -webkit- transform: translateY(-50%) translateX(-50%);	

}


.outer01{

	width:100%;		

	height:100vh;	

	position:relative;

}


.outer02{

	width:100%;		

	height:100vh;	

}


.inner{

	width:70%;

	margin:auto;	

}


#result_img{

margin:auto;

  position: relative;

  overflow: hidden;

  padding-top: 60%; /* 比率 */

}


#result_image{

	position: absolute;

	right:30px;

	bottom:70px;

	max-width: 650px;

    width: 70%;

}


@media screen and (max-width: 767px) {

#result_image {

  width: 90%;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%); 

}

}


#result_img img{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index:10;

}


a {

  text-decoration: none;   /* 下線を消す */

  color: inherit;          /* 親要素の文字色を引き継ぐ */

}


#back{

  color: #898989;

  bottom: 10px;

  position: absolute; 

  right:30px;

  text-align: center;

  max-width: 650px;

  width: 70%;

  display: none;

}


@media screen and (max-width: 480px) {

	#back{	

	width: 90%;

	}

}


.dli-chevron-left {

  display: inline-block;

  vertical-align: middle;

  color: #898989;

  line-height: 1;

  width: 0.7em;

  height: 0.7em;

  border: 0.1em solid currentColor;

  border-left: 0;

  border-bottom: 0;

  box-sizing: border-box;

  transform: translateX(25%) rotate(-135deg);

}


</style>

  
</head>

<body>


<main>


<div id="wrapper">


 <div class="outer01">

	 <div class="outer02">

 
 <div class="inner">

	<h1 id="h1_area">You should visit...</h1>

	<div class="timer" id="countdown">3</div>

	<img id="result_image" />

	<p id="back"><a href="https://zfrmz.jp/3OeBF68DtGesHy4LiK62"><span class="dli-chevron-left"></span>  Return to the questionnaire</a></p>

</div>

  
</div>

</div>

</div>

  
 </main> 

  <footer></footer>

  
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="  crossorigin="anonymous"></script>

  <script>

	window.onload = function(){


	const countDown = document.getElementById('countdown'); 

	const targetTime = new Date().getTime() + 3000; 


	function updateCountDown(){

	const now = new Date().getTime();

	const distance = targetTime - now;

	const seconds = Math.floor((distance % (1000 * 60)) / 1000);

	countDown.textContent = `${String(seconds+1).padStart(1, '0')}`;	


	if(distance < 1){

	clearInterval(interval);

	countDown.textContent = '終了';

	lottery();

	}

}


	const interval = setInterval(updateCountDown, 1000);


	function lottery(){


	    // くじ引き結果

		var results =[

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/01.jpg?ver06', "オマール・アリ・サイフディン-Omar Ali Saifuddien Mosque","https://demo.sakurain.co.jp/wp-content/themes/wel/01_text.png?ver02"],			

      ['https://demo.sakurain.co.jp/wp-content/themes/wel/02.jpg?ver06', "アンコールワット-Angkor Wat","https://demo.sakurain.co.jp/wp-content/themes/wel/02_text.png?ver02"],

      ['https://demo.sakurain.co.jp/wp-content/themes/wel/03.jpg?ver06', "ボロブドゥール-Borobudur","https://demo.sakurain.co.jp/wp-content/themes/wel/03_text.png?ver02"],

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/04.jpg?ver06', "パトゥーサイ-Patuxai","https://demo.sakurain.co.jp/wp-content/themes/wel/04_text.png?ver02"],

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/05.jpg?ver06', "ペトロナスツインタワー-Petronas Twin Towers","https://demo.sakurain.co.jp/wp-content/themes/wel/05_text.png?ver02"],

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/06.jpg?ver06', "シュエダゴン・パゴダ-Shwedagon Pagoda","https://demo.sakurain.co.jp/wp-content/themes/wel/06_text.png?ver02"],

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/07.jpg?ver06', "リサール記念碑-Rizal Monument","https://demo.sakurain.co.jp/wp-content/themes/wel/07_text.png?ver02"],	

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/08.jpg?ver06', "マーライオン-Merlion","https://demo.sakurain.co.jp/wp-content/themes/wel/08_text.png?ver02"],

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/09.jpg?ver06', "ワット・プラ・ケオ-Wat Phra Kaew","https://demo.sakurain.co.jp/wp-content/themes/wel/09_text.png?ver02"],

	  ['https://demo.sakurain.co.jp/wp-content/themes/wel/10.jpg?ver06', "フエ王城- Imperial City of Hue","https://demo.sakurain.co.jp/wp-content/themes/wel/10_text.png?ver02"],	  

	];

	
	console.log("results.length: "+results.length);

	//くじを引く

	var random = Math.floor( Math.random() * results.length );

    var result =  results[random];

	console.log(result);

      
	$('#wrapper').css('background-image', 'url('+result[0]+')');

	$('#countdown').css('display', 'none');

	$('#h1_area').css('display', 'none');

	$('#back').css('display', 'block');

	$('#result_image').attr('src', result[2]);


	}


	setTimeout(function() {

    window.location.href = 'https://zfrmz.jp/3OeBF68DtGesHy4LiK62'; // ← 遷移先URLを指定

  }, 30000); // 30000ミリ秒 = 30秒


}

</script>

</body>

</html>