@charset "utf-8";
.h3_emi{background-image: url("../img/retina01/emi.png"); /*ページ位置*/
background-image: image-set(url(../img/retina01/emi.png) 1x, url(../img/retina02/emi.png) 2x);
background-image: -webkit-image-set(url(../img/retina01/emi.png) 1x, url(../img/retina02/emi.png) 2x);
background-repeat: no-repeat; background-position: left 29% bottom 2px; background-size: auto calc(100% - 2px);  color: #ffffff; display:flex; justify-content:center; align-items:flex-end; padding-bottom: 0.7em; padding-left: 3%; overflow: visible; font-weight: normal; image-rendering: -webkit-optimize-contrast;}

/*1ページ目 */
.scene01{
background-image: url("../img/chousa01/retina01/page01.jpg");
background-image: image-set(url("../img/chousa01/retina01/page01.jpg") 1x, url("../img/chousa01/retina02/page01.jpg") 2x);
background-image: -webkit-image-set(url("../img/chousa01/retina01/page01.jpg") 1x, url("../img/chousa01/retina02/page01.jpg") 2x);
background-size:auto 80%; background-repeat: no-repeat; background-position: center bottom;}
.text01{margin-top: 1em; margin-left: 1em; width: 50%; }
.touch01{width: 50%; position: relative; clear: both;}
.touch01 span{float: right; margin-top: 1em;}
.touch01_img{float: right; margin-top: 0.5em;}
.speach01{width: 47%; margin: 2em 0em auto 4em; }

/*サンプル用 */
.sscene01{ font-size:1.2em; line-height:1.5em;}
.stext01{margin-top: 1em; margin-left: 1em; }
.stouch01{width: 50%; position: relative; clear: both;}
.stouch01 span{float: right; margin-top: 1em;}
.stouch01_img{float: right; margin-top: 0.5em;}
.sspeach01{width: 47%; margin: 2em 0em auto 4em; }

/*2ページ目 */
.scene02{
background-image: url("../img/chousa01/retina01/page01.jpg");
background-image: image-set(url("../img/chousa01/retina01/page01.jpg") 1x, url("../img/chousa01/retina02/page01.jpg") 2x);
background-image: -webkit-image-set(url("../img/chousa01/retina01/page01.jpg") 1x, url("../img/chousa01/retina02/page01.jpg") 2x);
background-size:auto 80%; background-repeat: no-repeat; background-position: right bottom;}
.page02_ul{margin-top:0em; padding-left: 0;}
.page02_ul{margin-top:0em; padding-left: 0;}
.page02_ul li{border-radius: 1em; font-weight: bold; padding:0.6em 0.2em 0em 0.2em; width: 65%; margin-bottom: 0.3em; margin-left: 0.5em; display: block; text-align: center;}
.page02_ul li:last-child{text-align: right; background: none!important; padding: 0; margin-top: 0.5em;  }
.page02_ul li span{background-image: url("../img/arrow_orange.svg"); background-size: 0.8em auto; background-repeat: no-repeat; background-position: left center; padding-left: 1.5em; margin-left: 0.5em;}
.page02_ul li.annotation span{background-image: none; border-radius: 0.5em; padding: 0.5em 0.5em 0em 0em; font-weight: normal;}

.touch02{width: 65%; position: relative; clear: both; margin-top: 0em; text-align: right;}
.touch02 span{float: right; margin-top: 0em;}
.touch02_img{float: right; margin-top: -2.5em;}
.dome{width: 40%; height: 90%; position: absolute; top: 8%; right: 0;}
.dome img:nth-child(1){width: 98%; height: auto; position: absolute; bottom: 0;}
.dome img:nth-child(2){width: 98%; height: auto; position: absolute; bottom: 1.5em;}
.dome img:nth-child(3){width: 98%; height: auto; position: absolute; bottom: 3em;}
.dome img:nth-child(4){width: 98%; height: auto; position: absolute; bottom: 4.5em;}
.dome img:nth-child(5){width: 98%; height: auto; position: absolute; bottom: 6em;}
.dome img:nth-child(6){width: 30%; height: auto; position: absolute; bottom: 2.5em; right: 10%; animation: dome 2s linear infinite;}
@keyframes dome {
0%   { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(15deg);}
100% { transform: scale(1) rotate(0deg); }
}
.dome p{width: 100%; height: auto; margin: 1em auto ; position: absolute; top: 0; left: 0; font-weight: bold; border:3px solid #fbb03b; padding:1.5em 1em 1em 1em; border-radius: 0.5em; animation: dome02 1s linear infinite; background-color:#ffffff;}
@keyframes dome02 {
0%   {border:3px solid #fbb03b; }
50% {border:3px solid #ffffff; }
100% {border:3px solid #fbb03b; }
}

.scene02.bgchange{background-image: none;}
.page02_ul li.wchange{width: 56%; }

/*3ページ目 */
.text03{margin-top: 1em; margin-left: 1em; width: 50%; height: auto;}
.scene03{
background-image: url("../img/chousa01/retina01/emi.jpg");
background-image: image-set(url("../img/chousa01/retina01/emi.jpg") 1x, url("../img/chousa01/retina02/emi.jpg") 2x);
background-image: -webkit-image-set(url("../img/chousa01/retina01/emi.jpg") 1x, url("../img/chousa01/retina02/emi.jpg") 2x);
background-size:35% auto; background-repeat: no-repeat; background-position: right 8% bottom 10%;}
.touch03{width: 50%; position: relative; clear: both;}
.touch03 span{float: right; margin-top: 2em;}
.touch03_img{float: right; margin-top: -0.5em;}
.gomivalue{background-color: #f9f5dc; border-radius: 0.5em; border: 1px solid #ccbc9f; box-shadow: 2px 2px 0px #ccbc9f; width: auto; margin: 1em auto; padding:1.5em 1em 1em 1em; line-height: 200%; overflow: hidden;}
.gomivalue.item_visible{display: inline-block;}
.gomi918g{padding: 0.5em 0.5em 0em 0.5em; background-color: #ffffff; border-radius: 0.5em; animation: value918g 2s linear infinite; margin-right: 0.5em; margin-left: 0.5em;}
.gomi918g::after {content: "\A" ; white-space: pre ;}
@keyframes value918g {
0%   {border:3px solid #fbb03b; }
50% {border:3px solid #ffffff; }
100% {border:3px solid #fbb03b; }
}


/*4ページ目 */
.scene04{display: block; overflow: visible; position: relative;}
.scene04 img{ width: 70%; height: auto; margin: 1em 16% auto 16%; position:absolute; top: 0em; display: block; overflow: visible;}
.speach04{width: 30%; position:absolute; top: 20%; left: 30%;}

/*5ページ目 クイズ*/
.scene05{display: block; position: relative; }
img.quiz_logo{width: 36%; position: relative; top: 0; left: 0; margin: 0 auto 0 0;}
.quiz_question{font-weight: bold; background-color: #4676a5; border-radius: 0.5em; padding: 0.6em; position: relative;}
.quiz_width{width: 70%; margin: 1em auto 1em auto; }
.quiz_width02{margin: 1em auto 1em 0; width: 55%; }

.quiz_bt{display:flex; justify-content:space-between; align-items:center;}
.quiz_bt_width{width: 36%; position: relative; margin:0 auto;}
.quiz_bt_width02{width: 32%; position: relative; margin:0 auto 0 0;}

.quiz_question span{background-color: #ffffff; background-repeat: no-repeat; background-position: left 3% center; padding:1.5em 1em 1em 30%; text-align: center; border-radius: 0.5em; display: block; box-shadow: 2px 2px 4px #666666;}
.quiz_bg{background-image: url("../img/quiz/question.svg"); background-size: 18% auto;  }/*問題*/
.quiz_bt img{width: 44%; height: auto;}
.marubt,.batsubt{ cursor: pointer;}
.select_batsu img{width: 44%; height: auto;}
.select_maru img{width: 44%; height: auto;}

/*5ページ目 クイズ正解・不正解*/
.fault_tit{background-image: url("../img/quiz/fault.svg"); background-size: auto 90%;  }/*残念！*/
.correct_tit{background-image: url("../img/quiz/correct.svg"); background-size: auto 90%; }/*正解！*/

.bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
.correct_bg{background-image: url("../img/quiz/circle.svg"); background-repeat: no-repeat; background-position: center center; animation-name:answer_bg; animation-duration:0.8s; animation-fill-mode:forwards; background-size: auto 90%; }/*大きい丸の背景*/
.fault_bg{background-image: url("../img/quiz/cross.svg"); background-repeat: no-repeat; background-position: center center; animation-name:answer_bg; animation-duration:0.8s; animation-fill-mode:forwards;  background-size: auto 90%; }/*大きいばつの背景*/
@keyframes answer_bg{
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.fault_text{font-size: 1.4em; font-weight: bold; position: absolute; top: 2.5em; right: 0; width: 40%; height:auto; padding-top: 0.2em; line-height: 120%; }
.correct_text{font-size: 1.4em; font-weight: bold; position: absolute; top: 5em; right: 0; width: 40%; height:auto;  line-height: 120%;}
.retry{position: absolute; top: 7.5em; right: 4.5em; width: auto; height:auto; }

.tsuyoshi{position: absolute; bottom: 0; right:2em; height: 25%; width: auto;}
.kou{position: absolute; bottom: 0; right:18em; height: 25%; width: auto;}
.tsuyoshi_voice{position: absolute; bottom: 28%; right:0em; width: 13em; height: auto;}
.kou_voice{position: absolute; bottom: 28%; right:14em; width: 15em; height: auto;}

/*==================================*/
/*=========スマホ===============*/
/*==================================*/
@media screen and (max-width: 480px) and (orientation: portrait),screen and (orientation: portrait),screen and (max-height: 480px) and (orientation: landscape),screen and (max-width:110vh) and (max-height:699px) and (orientation: landscape) {

.scene{width: 100%; height:auto; overflow:visible;}	
.h3_emi{ background-position: left 1em bottom; padding-bottom: 0.4em; padding-left: 6%; background-size: contain; }
	
/*1ページ目 */
.scene01{background-size: 80% auto; background-position: center bottom; height: auto; padding-bottom: 23em;}
.text01{margin-top: 1em; margin-left: auto; margin-right: auto; width: 90%;}
.touch01{margin-left: auto; margin-right:40%; width: auto; position: relative; clear: both;}
.speach01{position: absolute; bottom: 0;left: 0; width: 56%; margin: 2em 0em 7em 0em; }

/*2ページ目 */
.scene02{background-image:none;}
.page02_ul li{width: 100%; margin-bottom: 0.3em; margin-left: 0.5em; display: block; text-align: center;}
.touch02{width: 100%; z-index: 5;}
.touch02_img{float: right; margin-top: 0em;}
.page02_ul li.wchange{width: 100%; }
	
.dome.item_visible{height: calc(100vw * 0.6)!important; padding-bottom: 0.5em; }
.dome{width: 100%; height: auto; position: relative; display: block; }

.dome img:nth-child(1){width: 80%; height: auto; position: absolute; bottom: 0; left: 10%;}
.dome img:nth-child(2){width: 80%; height: auto; position: absolute; bottom: 1.5em; left: 10%;}
.dome img:nth-child(3){width: 80%; height: auto; position: absolute; bottom: 3em; left: 10%;}
.dome img:nth-child(4){width: 80%; height: auto; position: absolute; bottom: 4.5em; left: 10%;}
.dome img:nth-child(5){width: 80%; height: auto; position: absolute; bottom: 6em; left: 10%;}
.dome img:nth-child(6){width: 30%; height: auto; position: absolute; bottom: 2.5em; right: 10%; animation: dome 2s linear infinite;}	

/*3ページ目 */
.text03{width: 100%; margin: 0.5em auto; 1.5em 1em 1em 1em;}
.scene03{padding-top: 8em; background-size:30% auto!important; background-repeat: no-repeat; background-position: center top!important;}	
.scene03{background-size:20% auto; background-position: right 1em top 0;}
.touch03{width: 100%;}
.gomivalue{background-color: #f9f5dc; border-radius: 0.5em; border: 1px solid #ccbc9f; box-shadow: 2px 2px 0px #ccbc9f; width: 80%; margin: 1em auto; padding:1.5em auto;}
.gomivalue.item_visible{display: inline-block; }

/*4ページ目 */
.mapflame{position: relative; top:0; left:0; width: 100%; height: 100%;}
.scene04 img{ width: 70%; height:auto; margin: 1em 15% auto 15%; position:absolute; top: 0em; left: auto; display: block; overflow: visible;}
.scene04 img:first-child{position: relative!important;}
.speach04{width: 50%; position:absolute; top: 1em; left: 1em;}
.speach04.speach:before{content:none; background-image:none;}
	
/*5ページ目 クイズ*/
.fault_tit{background-size: auto 78%;  }/*残念！*/
.correct_tit{background-size: auto 78%; }/*正解！*/
.quiz_bg{background-size: auto 78%; min-height: 5em;  }/*問題*/
.quiz_width{width: 100%; margin: 1em auto 1em auto; }
.quiz_width02{width: 100%; margin: 1em auto 1em auto;}
.quiz_width02{width: 100%; margin: 1em auto 1em auto;}

.quiz_bt{margin: 1em auto 0 auto; position: relative;  }
.quiz_bt_width{width: 36%; position: relative; bottom: auto; top: 0em; left: auto; right: 0; }
.quiz_bt_width02{width: 36%; position: relative; bottom: auto; top: 0em; left: auto; right: 0;  }

/*5ページ目 クイズ正解・不正解*/
.fault_text{font-size: 1.2em; position: relative; top: 1em; bottom: auto; right: auto; width: 100%; display: block;}
.correct_text{font-size: 1.2em; position: relative; top: 1em; right: auto; width: 100%;}

.retry{position: relative; top: 1em; right: auto; width: auto; height:auto; }
	
.correct_bg{background-size: 55% auto ; background-position: top center;} /*大きい丸の背景*/
.fault_bg{background-size: 55% auto; background-position: top center;} /*大きいばつの背景*/
	
.correct_result{position: relative; top: 1em; width: 100%; height:26em; overflow: visible;}

.touch05{width: auto; position: relative; bottom:auto; left: 0em; top: 0;}
.touch05 span{float: left; margin-top: 2em;}
.touch05_img{float: left; margin-top: 2em;}
	
.tsuyoshi{position: absolute; top: 14em; right:2em; height: auto; width: 28%;}
.kou{position: absolute; top: 14em; right:21em; height: auto; width: 23%;}
.tsuyoshi_voice{position: absolute; top: 8em; right:0em; width: 13em; height: auto;}
.kou_voice{position: absolute; top: 8em; right:16em; width: 15em; height: auto;}


}

/*スマホ縦向*/
@media screen and (max-width: 600px) and (orientation: portrait) {
.speach_yokor:before  {margin-left:-1px;}
}

/*スマホ横向*/
@media screen and (max-height: 480px) and (orientation: landscape){
.scene01{background-size: 50% auto; background-position: center bottom; padding-bottom: 19em;}
.scene03{padding-top:10em; background-size:20% auto!important;}
.tsuyoshi{width: 15%;}
.kou{width: 13%;}
.tsuyoshi_voice{top: 7em;}
.kou_voice{top: 7em;}
.quiz_bg{background-size: auto 90%;  }
}