*{
	box-sizing: border-box;
}

ul {
  list-style:none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
    font-weight: bold;
    background-color: #156C8F;
    width: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center;
    color: rgb(3, 3, 3);
    background-image: url(Image/bg_movie01_bl.png),
                      url(Image/bg_movie01_bl\(UpSideDown\).png);
    background-position: right,
                         left;
    background-repeat: no-repeat;
    background-attachment: fixed; /*--hold of back ground image--*/
		font-size: 1.2rem;
}

a:hover img {
  opacity:0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha( opacity=50 )";
  background: #156C8F;
  position: relative;
  top: 1px;
  left: 1px;
  text-decoration: none;
  }

/*-------------------------------------------
header - top-container
-------------------------------------------*/

.title_img {
  margin-top: 1%;
}

.title{
  color: black;
}

.top_yuma{
	width: 17%;
}

/*-------------------------------------------
 an Explanation box of this diagnose
-------------------------------------------*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	position: relative;
	left: 25%;
	overflow: hidden;
	width: 50%;
	margin: 0 0 1em 0;
	color: #ffffff;
}

.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}

/* question part */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6em;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 2.5em;
	cursor: pointer;
	text-indent: 1em;
	border-radius: 0.5em;
	background: rgba(27,37,56,0.1);
}

.cp_qa .cp_actab label::before {
	font-family: serif;
	font-size: 2em;
	margin-left: -2em;
	padding-right: 0.5em;
	content: 'Q';
}

.cp_qa .cp_actab label:hover {
	transition: all 0.3s;
	color: #0d8e9a;
}

/*-- "Q" icon design --*/
.cp_qa .cp_actab label::after {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	top: 0;
	right: 0;
	content: '□';
	display: inline-block;
	width: 2em;
	height: 2em;
	-webkit-transition: transform 0.4s;
	        transition: transform 0.4s;
}

/*-- answear part --*/
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 2.5em;
	-webkit-transition: max-height 0.2s;
	        transition: max-height 0.2s;
	border-radius: 0 0 0.5em 0.5em;
}

.cp_qa .cp_actab .cp_actab-content::before {
	font-family: serif;
	font-size: 1.5em;
	position: absolute;
	margin: 0.4em 0 0 -1em;
	padding: 0;
}

.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em 1em 1em 0;
}

/*-- a question part when it's clicked --*/
/* height of answer */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 30em;
	border: 10px solid rgba(27,37,56,0.1);
}

/* animation of a question when it's clicked */
.cp_qa .cp_actab input:checked ~ label {
	color: #00838f;
	border-radius: 0.5em 0.5em 0 0;
}

/* animation of "+" when it's clicked */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

/*-------------------------------------------
 a button of digose
-------------------------------------------*/
.start_button {
  width: 180px;                  
  text-align:  center;            
  display: block;                 
  padding:  15px;                
  font-size:  20px;               
  text-decoration: none;   /* deleate a default of CSS */
  color:  #ffffff;                  
  background-color: #00BCD4;     
  border-radius:  5px;          
  transition: 0.5s;              
  margin:  0 auto;               
	font-size: 1rem;
}

.start_button:hover {
  opacity:  0.7;                  
  width: 250px;                  
}

.sub-explanation {
  display: none;
}


/*-------------------------------------------
Responsive
-------------------------------------------*/
@media screen and (max-width:639px) {
	.subtitle{
		font-size: 1.2rem;
	}

	.title_img{
		width: 70%;
	}

	.top_yuma{
		width: 55%;
	}
 
	.cp_qa .cp_actab {
		width: 80%;
		font-size: 0.9rem;
		position: relative;
		left: 10%;
  }

@media screen and (min-width: 768px) {
	.subtitle{
		font-size: 1.5rem;
	}

	.title_img{
		width: 70%;
	}
	
	.top_yuma{
		width: 55%;
	} 

	.cp_qa .cp_actab {
		width: 70%;
		position: relative;
		left: 16%;
		font-size: 0.9rem;
	}

  .br-sp {display: none; /*-- add "<br>" inside of text for only over 768px size --*/
  }
}

@media screen and (min-width: 992px) {
	.subtitle{
		font-size: 2rem;
	}

	.title_img{
		width: 35%;
	}
	
	.top_yuma{
		width: 30%;
	}
	
	.cp_qa .cp_actab {
		width: 60%;
		position: relative;
		left: 20%;
		font-size: 1.5rem;
	}
}

.start_button{
	font-size: 1.3rem;
} 
   
  @media screen and (min-width:1024px) {
		.subtitle{
			font-size: 2rem;
		}

		.title_img{
			width: 23%;
		}

		.top_yuma{
			width: 17%;
		}

		.cp_qa .cp_actab {
			width: 50%;
			position: relative;
			left: 25%;
			font-size: 1.3rem;
		}

		.start_button{
			font-size: 1.3rem;
		} 
  }
}