===== Webサイト全体のスタイル ===== 
html {
  height: 100%;
  background-color:#63b7ff;
}

body {
  font-family: sans-serif;
  height: 100%;
  margin: 0;
}

header{
 background-image: url(img/sky.jpeg);
 background-size:cover;
 background-repeat:no-repeat;
 padding-top:1px;
 height: 500px;
}

h1{
  
  display     : inline-block;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #0cc;
  color: #eff; 
  font-size: 100px; 
}


.white{
  width:95%;
  display:block;
  margin:0 auto 0;
  background:#fff;
}

#image-top{
font-size:30px;
text-align:center
}

.start{
  padding-top:30px;
  margin-bottom:0;
  margin-left:20px;
}

.start h2{
  font-size:50px;
  border-left-style:solid;
  border-left-width:30px;
  padding-left:50px;
}

.start p{
  font-weight:bolder;
  font-size:30px;
  
}

#meaning-top span{
  font-size:40px;
  font-weight:bold;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.cp_navi {
  text-align:center;
  height:300px;
  }
	
.cp_navi #cp_sidenav  {
  text-align:center;
  display:block;
}

.cp_navi #cp_sidenav a {
  margin:20px;
  border:1px solid #ffffff;
	padding:5px;
	font-size: 25px;
	text-decoration: none;
	color: #ffffff;
	border-radius:5px;
}
.cp_navi #cp_sidenav a:hover {
	left: -10px;
}
.cp_navi #meaning-1 {
	background-color: #6cf;
}
.cp_navi #list-1 {
	background-color: #f90;
}
.cp_navi #quiz-1 {
	background-color: #6f6;
}
.cp_navi #image-1{
  background-color:#c0c0c0;
}

＝＝＝＝＝ 全体の設定 ＝＝＝＝＝＝ 

.allsdgs li{
  list-style:none;
}

ul {
  list-style:none;
}

.allsdgs{
  margin:0px 10px;
  height:100px;
}

.allsdgs>ul>li{
  float:left;
  background:#fff;
  display:block;
  width:270px;
  height:320px;
  margin: 20px;
  box-shadow:10px 10px 20px #444444;
  margin:20px;
}

.vision > p, .vision > div {
  position:relative;
  display:block;
  top:-30px;
}

#l1{
 background:#d52431;  
}
#l2{
background:#c69933;  
}
#l3{
background:#309147;
}
#l4{
background:#af2534;
}
#l5{
background:#db3e30;
}
#l6{
background:#00a3c5;
}
#l7{
 background:#f2d02d;
}
#l8{
background:#7b1c33;
}
#l9{
background:#e2662d;
}
#l10{
background:#cf1e75;
}
#l11{
background:#eb9638;
}
#l12{
background:#c18431;
}
#l13{
background:#456e3c;
}
#l14{
background:#0474a6;
}
#l15{
background:#3da447;
}
#l16{
background:#154b77;
}
#l17{
background:#1d2e53;
}

.txt-desc{
  margin:0px 20px;
  font-size:15px;
  font-weight:bolder;
  background-color:#fff;
}

.title{
  text-align:center;
  z-index:10;
  display:block;
}

.title .pak{
  width:200px;
  margin:0 auto;
  color:#fff;
  font-size:25px;
  background-color:#06f;
  display:block;
  position:relative;
  top:-5px;
  border-radius:10px;
  }

.wrap-img{
 margin-top:0;
 text-align:center;
}

.Qqo{
  clear:both;
  margin:20px;
  padding: 20px 10px;

}

.Qqo h2{
 padding:0px;
}

input{
 display:none;
}

label {
  display:block;
  width:100%;
  height:100px;
  text-align:center;
  color:#000080; 
  font-weight: bold;
  cursor :pointer;
}

.quiz {
text-align:center;
width:100%;  
padding-bottom:20px;
}


.quiz h2 {
  color: black;
  font-size: 60px;
}

.quiz h3{
  font-weight:bolder;
  font-size:30px;
  margin:0;
}

.quiz .answer{
  height:auto;
  width:100%;
}

.quiz .answer p{
  font-size:25px;
  width:100%;
  text-align:center;
  padding:0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.2s;
}

.quiz .answer .answer-button{
 height:100px;
 line-height:100px;
 margin:auto 0;
 font-size:30px;
 border-radius:10px;
 text-align:center;
 display:block;
 background:#dddddd;
 opacity:1; 
 color: #fff;
 background-color: #eb6100;
}

.quiz .answer span{
 font-size:40px;
 font-weight:bolder;
}


#q1 input:checked{
 display:block;
 position:absolute;
 left:-1000px;
}

#q1 input:checked ~ #a1 .answer-button {
  background:#000000;
  height: 0;
  opacity: 0;
  position:absolute;
  left:-1000px;
  width:0;
}


#q1 input:checked ~ #a1 p{
  padding:30px 0 0 0;
  height: auto;
  opacity: 1;
}

#q2 input:checked{
 display:block;
 position:absolute;
 left:-1000px;
}

#q2 input:checked ~ #a2 .answer-button {
  background:#000000;
  height: 0;
  opacity: 0;
  position:absolute;
  left:-1000px;
  width:0;
}

#q2 input:checked ~ #a2 p{
  padding:30px 0 0 0;
  height: auto;
  opacity: 1;
}


#q3 input:checked{
 display:block;
 position:absolute;
 left:-1000px;
}

#q3 input:checked ~ #a3 .answer-button {
  background:#000000;
  height: 0;
  opacity: 0;
  position:absolute;
  left:-1000px;
  width:0;
}

#q3 input:checked ~ #a3 p{
  padding:30px 0 0 0;
  height: auto;
  opacity: 1;
}

.quiz label:hover {
  background: #efefef;
}

.quiz li{
  display:block;
  text-align:left;
  font-size:30px;
}

.quiz .q-list{
  display:block;
  margin:0 auto;
  width:200px;
}

#q2 .q-list{
  width:290px;
}

#q3 .q-list{
  width:280px;
}

.last{
 text-align:center;
 font-size:30px;
 font-weight:bolder;
}

footer{
  color:#ffffff;
  width:100%;
  height:150px;
  text-align:center;
  padding:30px 0;
  background:#0093c7;
}

footer span{
font-size:20px;  
}

footer a{
  color:#dddddd;
}

@media (max-width: 800px) {
   
  h1 {
    font-size:70px;
  } 
  .cp_navi #cp_sidenav a {
  margin:20px auto;
  display:block;
  width:150px;
  padding:5px;
	font-size: 18px;
}
label {
  display:block;
  margin:0 auto;
  width:95%;
  padding:0;
}

.quiz #q2 li{
width:100%;
margin:0;
}

.last{
 font-size:28px;
 padding-bottom:50px;
}
  
}