@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
}

html,
body {
	height: 100vh; font-family: "メイリオ", Meiryo, sans-serif;
}
body { position: relative;
	font-size: 14px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	will-change: transform, animation;
	background-color: #0d8dbf;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transition: all .2s ease-out;
}
.anim.on {
	opacity: 1;
}

main {width: 100%; position: relative; 
	height: 98%; padding: 0; margin: 0;
}



section {caret-color: transparent;
	position: absolute; padding: 0;
	top: 0; left: 0;
	background-color: #0d8dbf; 
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	outline-offset: -15px;outline:  3px solid white; border-radius: 2rem;
}

.contentWrap { position: relative;
	width: 100%; height: 96%; margin: auto; 
	padding:10px 0 ;display:flex;justify-content:center; z-index: 9;
}

.contentWrap .first-scene{width: 100%; height: 100%;}

.contentWrap .first-scene h3{font-size: 26px; margin: 0;}
.contentWrap .first-scene h3 img{ width: auto; height: auto; margin: 0;}


section .contentWrap h3 .logo{ width: 15%; height: auto; animation: fadein 2s ease-out forwards; margin: 0; margin: 0;}
section .contentWrap h3 .logo img{width: 100%; height: auto; margin: 0; }

.txt-small{ letter-spacing: -0.1em; font-size: 96%; }

@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
	.btnStart a:hover,
	.yesno a:hover,
	.listen a:hover {
		opacity: 1;
	}
	
	.btnStart a:hover,
	.yesno a:hover,
	.listen a:hover {
		transform: scale(1.1);
	}
	
}
@media screen and (max-width: 820px) {
	body { 
		font-size: min(3vw, 14px);
	}
	.pc { display: none;}
	
	main { 
width: 100%; position: relative;
	height: 99vh; padding: 0; margin: 0; 
	}

	section { 
	position: absolute; padding: 0;
	top: 0; left: 0 !important;
	width: 100%;
	height: 93vh;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	overflow: hidden;
background-image: none;
	}
	
section .contentWrap h3 .logo{ width: 100px; height: auto; animation: fadein 2s ease-out forwards;margin-top: 20px;}
section .contentWrap h3 .logo img{width: 100%; height: auto; }

.contentWrap {
	width: 100%; height: 96%; margin: auto; position: absolute; top: 5%; left: 2%;
	padding:10px 0 ;display:flex;justify-content:center; z-index: 9;
}

}



/* ////////////////////////////////////////////////////////////////////////////////

	Title

//////////////////////////////////////////////////////////////////////////////// */
/* .title { 
	position: absolute; width: 100%;
	z-index: 11;
	top: 5%;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;text-align: center;
}
.title h1 { margin: auto;
font-size: 300%;
	letter-spacing: .24em;
	line-height: 1.6;
animation: fadein 3s ease-out forwards;
} */

.title-top {margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;text-align: center;
}
	/* position: absolute; width: 100%;
	z-index: 11;
	top: 1%;
	left: 0%; */

.title-top h1 { width: 40%; padding-bottom: 20px;
	font-size: 300%;
	letter-spacing: .24em;
	line-height: 1;
animation: fadein 2s ease-out forwards; margin: 0;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}

.title-top h1 img{ width: 100%;}


@media screen and (min-width: 821px) {
	.title h1 {	
width: 100%;
	}
}
@media screen and (max-width: 820px) {

.title-top {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;text-align: center;
}

.title-top h1 {margin: auto;
	 width: 100%; text-align: center;

}
.title-top h1 img{margin: auto;
 width: 40%;
}

.title { position: static;
	letter-spacing: .1em;
	line-height: 1.6;
animation: fadein 3s ease-out forwards;
	}
	
	.title h1 {
font-size: 150%; width: 100%;
	}

.title img{
width: 100%;
}

/* .title-top {
	top: 3%;
	left: 0;
} */
div.title-top p{ font-size: 18px !important;}



footer { height: 20px; bottom: 60px;
}

}
div.title-bottom p{ width: 90%; margin: auto; line-height: 1.3; }
div.title-bottom{position: relative; }




/* ////////////////////////////////////////////////////////////////////////////////

	Footer

//////////////////////////////////////////////////////////////////////////////// */

footer { text-align: center; position: absolute; z-index: 99;
 width: 100%; height: 20px; bottom: 30px;
}
footer .copyright {
	font-size: 10px;color: #000;
}


/* ////////////////////////////////////////////////////////////////////////////////

	Content

//////////////////////////////////////////////////////////////////////////////// */

#start {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
#start .contentWrap { 
	width: 50%;
}
#start h3 {
	text-align: center;
	font-size: 24px;
	letter-spacing: .1em;
	margin-bottom: 0px; margin-top: 30px;
}

#start p { padding: 0;
	margin-bottom: 20px; color: #fff; font-size: 120%;
text-align: center;
}
.midashi01{font-size: 350%; color: #fff;}
.txt-lovers{ font-family: "Poppins", sans-serif; color: #fff;
  font-weight: 900;font-size: 350%; }

.top-img { width: 40%; height: auto; margin-top: 20px; }

.btnStart a {
	display: block;
	margin: 0 auto;
	color: #004ba0;
	text-decoration: none;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: .05em;
	text-align: center;
	width: 260px;
	background-color: #fff;
	padding: 5px;
  	border-radius: 50px;
	font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.title-ques {margin: auto;  width: 100%; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;text-align: center;
	position: absolute;
	z-index: 11;
	top: 1rem;
	left: 0%;
}

.title-ques h1 { width: 10%;
font-size: 300%;
	line-height: 1.2;
animation: fadein 2s ease-out forwards;
}
.title-ques h1 img{ width: 100%; }

.contentWrap .title-ques h3 .logo{ width: 20%; height: auto; animation: fadein 2s ease-out forwards; margin: 0;}




@media screen and (max-width: 820px) {
	#start {
		top: 0;
		left: 0;
		padding-top: min(14vw, 60px);
	}
	
	#start h3 { margin-top: -20px;
		font-size: min(3vw, 18px);
		margin-bottom: min(6vw, 40px);
	}
	#start p {
		margin-bottom: min(6vw, 40px);
	}

	.btnStart a { font-weight: 900;
		font-size: min(6vw, 30px);
		width: min(54vw, 260px);
		padding: min(2vw, 15px);
	}

#start .contentWrap {
	width: 96%;
}
#start p {
	margin-bottom: 10px;
}
.midashi01{font-size: 210%; margin: 0; }
.txt-lovers{ 
  font-weight: 900;font-size: 210%; margin: 0; }
}

#question { 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}
#question .qwrap { 
width: 50%; height: auto;
	display: none;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}
#question #q01.qwrap {
	display: block;
}


#question .qBox { padding-top: 30px;
	position: relative;
}
#question .qTxt { color: #fff;
	font-size: 34px; text-align: center;
	font-weight: bold;
    letter-spacing: .2em;
	margin: 0 auto;
	position: relative;
	z-index: 2;	line-height: 1.2;
animation: qTxt-show 0.2s ease-out forwards;
}
@keyframes qTxt-show {
    0% { 
      opacity: 0; 
    }
    100% {
      opacity: 1; 
    }
}

/* #question .qTxt.on {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
} */
#question .qBox .qBg { 
	margin: auto;
	transition: all 0.1s cubic-bezier(0, 0.55, 0.45, 1);
}
#question .qBox .qBg {
    width: 100%; text-align: center; margin-bottom: 20px;
}
#question #q01 .qBox .qBg {
    width: 100%;
}

	/* position: absolute;
	top: 200px;
	left: 50%;
	z-index: 1; */
#question .qBox .qBg.on {
 animation: shake-lr 1s ease-in-out 1; 
}
#question .qBox .qBg img{ width:200px ; height: auto; margin: auto; padding-top: 30px;}

@keyframes shake-lr {
0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(10deg); 
    }
    50% {
      transform: rotate(-10deg); 
    }
    75% {
      transform: rotate(5deg); 
    }
    100% {
      transform: rotate(0deg); 
    }
}

#question .yesno { 
	display: flex; 
	justify-content: space-between;
}

#question .yesno li {
	width: 410px;
	margin: 0 20px;
}
#question .yesno li a {
	display:flex;align-items:center;justify-content:center;
	text-align: center;
	text-decoration: none;
	background:#fff; border-radius: 10px;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: .1em;
	padding: 40px 20px;
	transition: all .5s ease-out;
}
#question .yesno li.yes a {
	color: #004ba0 ; 
}
#question .yesno li.no a {
	color: #004ba0 ; 
}

#question .yesno li a{animation: yesno-show 2.4s ease-out forwards; }
@keyframes yesno-show {
    0% {
      filter: blur(10px); 
      opacity: 0; 
    }
    100% {
      filter: blur(0); 
      opacity: 1; 
    }
}




#question .qwrap.answer .qTxt,
#question .qwrap.answer .yesno {
	opacity: 0;
	pointer-events: none;
}

#question .qwrap.answer .qBg { background-color: #000;
	animation: answer 1.2s cubic-bezier(0.85, 0, 0.15, 1) 0.4s forwards;
}

@keyframes answer {
	0% { transform: translate(-50%, -50%) scale(1);}
	100% { transform: translate(-50%, -50%) scale(20);}
}

#question .qwrap .qBg::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#question .qwrap.answer .qBg::after { 
	animation: answerBg 0.7s cubic-bezier(0.85, 0, 0.15, 1) 0.9s forwards;
}
@keyframes answerBg {
	0% { background-color: rgba(213,0,17,0);}
	100% { background-color: rgba(13,141,191,1);}
}




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


.title-ques {margin: auto;  width: 100%; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;text-align: center;
	position: absolute;
	z-index: 11;
	top: 1rem;
	left: 0%;
}

.title-ques h1 { width: 40%;
font-size: 300%;
	line-height: 1.2;
animation: fadein 2s ease-out forwards;
}
.title-ques h1 img{ width: 100%;}

.contentWrap .title-ques h3 .logo{ width: 26%; height: auto; animation: fadein 2s ease-out forwards; margin: 0;}

#question .qwrap { 
width: 80%; height: auto;
	display: none;
    position: absolute;
    top: 53%;
    left: 50%;
	transform: translate(-50%, -50%);
}

	#question .qTxt {
		font-size: min(6vw, 26px); 
	}

#question .qBox { padding-top: 80px;
	position: relative;
}

#question .yesno { 
	display: flex;
	justify-content: space-between;
}
	
	#question .yesno { 
		width: 100%;
	}
	#question .yesno li {
		width: 46%;
		margin: 0;
	}
	#question .yesno li a {
		font-size: min(3vw, 14px);
		padding: min(4vw, 30px) min(2vw, 15px);
	}
}

.btnBack a {
    display: block;
    color: #246ab5;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    padding: 3px;
    border-radius: 3px;
    margin: 0 auto 10px;
    border: #246ab5 solid 1px;
    width: 180px;
}
.btnBack a:hover {  color: #fff; background-color:#246ab5 ; }


@media screen and (max-width: 820px) {
	
	.btnBack {
		margin-top: min(1vw, 10px);
	}
	.btnBack a {
		font-size: min(2.8vw, 14px);
		padding: min(1vw, 3px);
    	width: min(40vw, 260px);
	}

.height-chosei{min-height: 140px;}
}

/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
	#question .yesno {
		width: 90%; margin: auto; 
	}

.contentWrap {
	width: 100%; height: 96%; margin: auto; 
	padding:10px 0 ;display:flex;justify-content:center; z-index: 9;
}
.title-top h1 {width: 100%;
font-size: 300%;
	letter-spacing: .24em;
	line-height: 1.6;
}
.title-top h1 img{margin: auto;
 width: 30%;
}
.midashi01{font-size: 300%; color: #fff;}
.txt-lovers{ font-size: 300%; }

#question .qwrap { 
width: 80%; height: auto;
	display: none;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
}
	#question .yesno li a { 
		font-size: min(4vw, 24px);
		padding: min(4vw, 30px) min(2vw, 15px);
	}
}

@media screen and (min-width:950px) and (max-width:1530px){
	#question .yesno { 
		width: 90%; margin: auto; 
	}
	#question .yesno li a {
		font-size: min(4vw, 24px);
		padding: min(4vw, 30px) min(2vw, 15px);
	}
}


div.share{ margin: 10px 0 0 0;display:flex;justify-content:center; color: #000; text-align: center;align-items:center;}
ul.snsShare{ display:flex;justify-content:center; margin-left: 10px; }
ul.snsShare li{ padding: 0 10px; font-size: 160%; }
ul.snsShare li a{ color: #000;}