/*ページの全体の設定*/
body{
	margin: 0px;
	background-color: #fffbf7;
	font-family:'Libre Bodoni', sans-serif;
}

/*画面がじわっと出る*/
.fadeout{
	background: #fffbf7;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
}

.fadeout p {
	position: fixed;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	display: none;
	z-index: 9999;
	margin: 0;
	text-align: center;
}

/*余白設定、画面を三分割するために余白を作っています*/
.space{
	width: 5%;
	margin: 0px;
	position: relative;
}

/*ヘッダー設定*/
header{
	display:flex;
	border-bottom:solid 3px #00a199;
	width: 100%;
	height: 50px;
	position:fixed;
	top: 0;
	right: 0;
	z-index: 2; /*ヘッダを内容が書かれているページの上に重ねる*/
	background: #fffbf7;
}

.hinagata{
	display:flex;
	width: 90%;
	text-align:center;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	margin: 0px;
	border-right:solid 3px #00a199;
	border-left:solid 3px #00a199;
	color: #00a199;
	background: #fffbf7;
	font-size: 150%;
}

/*ドロワーの設定*/

/*ドロワーのビジュアル設定*/
.humburger{
	width: 5%;
	margin: 0px;
	display:flex;
	align-items: center;
	vertical-align: middle;
	justify-content: center;
	background: #fffbf7;
}


.drower{
	padding-top: 8%;
	text-align: center;
}

.drower img{
	width: 35px;
	height: 35px;
	cursor: pointer;
}

#nav{
	background-color: #00a199;
	width: 270px;
	height: 100%;
	position: fixed;
	right: -270px;
	top: 0;
	z-index: 3; /*ヘッダの上にドロワーを重ねる*/
}

/*ドロワーを出現させる*/
.show{
	transform: translate3d(-270px, 0, 0);
}

/*ハンバーガーメニューの見た目*/
.first{
	display:flex;
	height: 50px;
	border-bottom:solid 3px #fff;
}

.second{
	display:flex;
	height: 90%;
}

.hspace{
	width: 10%;
	border-right:solid 3px #fff;
	margin: 0px;
}



.bigNSP{
	color: #fff;
	margin: auto;
	font-size: 200%;
	text-decoration: underline;
}

.batu{
	align-items: center;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
}

.batu img{
	width: 90%;
	height: 90%;
	cursor: pointer;
}

.menu{
	padding-top: 3%;
	padding-left: 3%;
}


.menu li{
	list-style: none;
	padding-top: 10%;
	flex-shrink: 0;
}

.menu li a{
	color: #fff;
	text-decoration: none;
	font-size: 150%;
	display:inline-block;
}

.menu li a:hover{
	text-decoration: none;
	color: #fe8f44;
	transition-duration: 0.5s;
}	


/*開く閉じるアニメーション*/
#nav{
	transition: all 0.5s 0.3s ease-in-out;
}

/*中段の設定*/
main{
	padding-top: 50px;
	display:flex;
	margin: 0px;
	z-index: 1; /*ヘッダを上に重ねる*/
}

/*メインの設定*/
section{
	width: 90%;
	height: 100%;
	border-right:solid 3px #00a199;
	border-left:solid 3px #00a199;
	font-size:1em;
	padding-bottom:3%;

}

.A{
	text-align: left;
	width: 80%;
}

.B{
	width:20%;
}

.kakushi{
	font-size:2em;
	background-color: #00a199;
	text-align:center;
	color:#fffbf7
}

/*問*/
.q{
	padding-left: 5%;
	padding-top: 2%;
	font-size:1.2em;
	
}

.icon1 img{
	width:260px;
	height:250px;
	float:right;
	padding-right:5%;
	
}

.icon2 img{
	width:260px;
	height:250px;
	float:right;
	padding-top:20%;
	padding-bottom:50%;
	padding-right:5%;
	
}

.icon3 img{
	width:260px;
	height:50px;
	float:right;
	padding-right:5%;
	
}
	
}

.balloon1 {
  float:right;
  padding-right:2%;
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}


/**/

/* 左側表示の吹き出しのスタイリング 
.left-side .icon {
    float: left;
    margin-left: 10px;
}
.left-side .bubble{
    margin: 10px 0 0 20px;
}
.left-side .bubble::before{
    top: 15px;
    left: -20px;
    border-right-color: #f5f5f5;
}
*/

/*下線引く*/
.under{
	border-bottom: dotted 0.15em #fe8f44;
	
}

/*
.quiz{
	width: 90%;
	height: 3%;
	padding-left: 8%;
}
*/

/*横並びになる*/
.quizz{
	 display: flex;
}
/*ボタンとボタンの空白*/
.question{
	padding-left:10%;
	
}
/*最初の空白*/
.question1{
	padding-left:50px;
	
}

.question3-2{
	font-size:1em;
	padding-left:10%;
}

.question3-3{
	padding-left:10%;
}


.btn{
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #00a199;/*ボタン色*/
  color: #FFF;
  border-radius: 3px;
  width:100px;
  height:50px;
}

.btn:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.btn:hover{
	text-decoration: none;
	color: #fe8f44;
	transition-duration: 0.5s;
}

.D .btn, .F .btn, .H .btn, .J .btn, .L .btn{
	width:100px;
	height:50px;
}

.E, .G, .I, .K, .M{
	width:100%;
	height:100%;
	padding-left:10%;
	padding-top:2%;
	display:none;
}
.D, .F, .H, .J, .L{
	width:100%;
	height:100%;
	display: inline-block;
	padding: %;
	cursor: pointer;
}

/*ここまで*/	


/*フッターの設定*/
.footer{
	display:flex;
}

/*著作書いているところの設定*/
.author{
	width:90%;
	text-align:center;
	border-top:solid 3px #00a199;
	border-right:solid 3px #00a199;
	border-left:solid 3px #00a199;
	margin: 0px;
}

.author p{
	padding-top: 1%;
	margin: 0;
}

.author p img{
	width: 7%;
	height: 7%;
	cursor: pointer;
}

.author h6{
	color: #00a199;
	margin: 0;
	font-size: 50%;  
}

/*pageTopの設定*/
#pageTop{
	position: fixed;  /*以下３行場所の固定のために使う*/
	right: 1px;
	bottom:5px;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/
#pageTop.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#pageTop.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 0;
	transform: translateY(100px);
  }
}

/*pageTopの画像の設定*/
#pageTop p{
	margin: 0px;
	background-color: #fffbf7;
	border-radius: 10px;
	border:solid 3px #00a199;
}

#pageTop p img{
	width: 100px;
	height: 100px;
	cursor: pointer;
}

@media only screen and (max-width: 820px){
	.question{
	padding-left:7%;
	
}
	
	
	.question1{
		padding-left:20px;
		
	}
	
	
	.icon1{
		display:none;
		
	}
	
	.icon2{
		display:none;
		
	}
	
	.icon3{
		display:none;
		
	}
	.hinagata{
		width: 85%;
		border-right:solid 0px #00a199;
	}
	
	
	.kakushi{
	font-size:1.4em;
	background-color: #00a199;
	text-align:center;
	color:#fffbf7
	}
	
	.E, .G, .I, .K, .M{
		width:90%;
		height:100%;
		padding-left:3%;
		padding-top:2%;
		display:none;
		font-size:0.8em;
	}
	.btn{
		width:75px;
		height:50px;
	}
	
	.D .btn, .F .btn, .H .btn, .J .btn, .L .btn{
		width:75px;
		height:50px;
	}
	
	
	.question3-2{
		/*padding-left:4%;*/
	}

	.question3-3{
		/*padding-left:4%;*/
	}
	
	.B{
		display:none;
	}
	

	
	/*ドロワーの設定*/

	.humburger{
		width: 10%;
	}
	
	.batu{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;
	}
	
	.batu img{
		width: 40px;
		height: 40px;
		cursor: pointer;
	}
	
	/*ページトップ設定*/
	#pageTop p img{
		width: 60px;
		height: 60px;
		cursor: pointer;
	}
	
	/*フッター設定*/
	.author p img{
		width: 10%;
		height: 10%;
		cursor: pointer;
	}
	
}



}

@media only screen and (max-width: 300px){
	
	.question1{
		padding-left:20px;
		
	}
	
	
	.icon1 img{
		display:none;
		
	}
	
	.icon2 img{
		display:none;
		
	}
	
	.icon3 img{
		display:none;
		
	}
	
	
	.E, .G, .I, .K, .M{
		width:90%;
		height:100%;
		padding-left:3%;
		padding-top:2%;
		display:none;
		font-size:0.4em;
	}
	.btn{
		width:75px;
		height:50px;
	}
	
	.D .btn, .F .btn, .H .btn, .J .btn, .L .btn{
		width:75px;
		height:50px;
	}
	
	
	.question3-2{
		/*padding-left:4%;*/
	}

	.question3-3{
			font-size:0.5em;/*padding-left:4%;*/
	}
	
	
		.hinagata{
			width: 80%;
			border-right:solid 0px #00a199;
		}
		
		.kakushi{
			font-size:1.2em;
			background-color: #00a199;
			text-align:center;
			color:#fffbf7
		}
		
		.humburger{
			width: 15%;
		}
		
		.author p img{
			width: 10%;
			height: 10%;
			cursor: pointer;
		}
		
		#pageTop p img{
			width: 60px;
			height: 60px;
			cursor: pointer;
		}
		
}