/*--------------------------------------------------------------
@media
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
		
	#main-contents .contents .contents-inner {
		border-radius: 0;
	}
	
	#main-contents .contents .intro {
		padding-right: 0;
		padding-left: 0;
	}
	
	#main-contents .contents h1 {
		background: none;
		text-align: left;
		font-size: 18px;
		margin: 0;
		padding: 30px 20px 0 20px;
		line-height: 2;
		letter-spacing: 2px;
		width: 100%;
		height: auto;
	}
	
	.br::before {
		content: "";
	}
	
	
	#main-contents .contents p {
		margin-top: 30px;
		margin-bottom: 50px;
		padding-right: 20px;
		padding-left: 20px;
	}
	
	#main-contents .contents ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#main-contents .contents ul li {
		float: left;
		width: calc(100%/3);
		height: auto;
		margin-bottom: 0;
		line-height: 0;
	}
    
	.button {
		border-radius: 6px;
		margin-top: 30px;
	}
	
	.essential {
		margin: 0 0 30px 0;
		padding: 30px 0;
		font-size: 13px;
		background-color: #fff;
	}
	
	#main-contents .contents .essential h2 {
		color: #424242;
		margin-left: 0;
		margin-bottom: 30px;
		padding-bottom: 30px;
		padding-left: 25px;
		border-bottom: .5px solid #424242;
		border-radius: 0;
		font-size: 15px;
		letter-spacing: 2px;
	}
	
	#main-contents .contents .essential .show {
		margin-right: 0;
	}
	
	#main-contents .contents .show span:after {
		top: 11px;
	}
	
	#main-contents .contents dl {
		background-color: rgba(210,243,255,.5);
		border-radius: 9px;
		margin: 0 10px;
		
	}
	
	#main-contents .contents dl dt {
		width: 150px;
		height: auto;
		color: #20b4e0;
		padding-top: 10px;
		padding-left: 10px;
		font-weight: 500;
	}
	
	#main-contents .contents dl dd {
		padding: 10px;
		border-bottom: 1px solid #fff;
	}
	
	#main-contents .contents dl dd:last-child {
		border-bottom: none;
	}

	


}

/* Small than tablet */
@media (min-width: 768px) {
	
	.br::before {
		content: "\A";
	}
	
	#main-contents .contents h1 {
		font-size: 22px;
		margin: 0;
		padding-top: 0;
		text-align: center;
	}
	
	#main-contents .contents ul li {
		width: calc(100%/6);
		margin-bottom: 50px;
	}
    
	.button {
		margin-top: 0;
	}
	
	.essential {
		padding: 20px 0;
		font-size: 13px;
	}
	
	#main-contents .contents .essential h2 {
		margin-left: 0;
		margin-bottom: 30px;
		padding-bottom: 30px;
		padding-left: 40px;
		font-size: 18px;
	}
	
	#main-contents .contents .show span:after {
		top: 12px;
		left: -40px;
	}
	
	#main-contents .contents dl {
		margin: 0 40px 20px 40px;
	}
	
	#main-contents .contents dl dt {
		float: left;
		width: 150px;
		height: auto;
		color: #20b4e0;
		padding-top: 20px;
		padding-left: 30px;
		font-weight: 500;
	}
	
	#main-contents .contents dl dd {
		padding: 20px 20px 20px 150px;
		border-bottom: 1px solid #fff;
	}
	
	#main-contents .contents dl dd:last-child {
		border-bottom: none;
	}	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#main-contents .contents h1 {
		font-size: 22px;
	}
	
	#main-contents .contents p {
		margin-top: 30px;
		margin-bottom: 50px;
	}
    
	.button {
		border-radius: 6px;
	}
	
	.essential {
		font-size: 13px;
	}
	
	#main-contents .contents .essential h2 {
		margin-left: 0;
		margin-bottom: 30px;
		padding-bottom: 30px;
		padding-left: 40px;
		border-radius: 0;
		font-size: 18px;
	}
	
	#main-contents .contents .show span:after {
		top: 13px;
		left: -40px;
		width: 20px;
	}
	
	#main-contents .contents dl dt {
		padding-top: 20px;
		padding-left: 30px;
	}
	
	#main-contents .contents dl dd {
		padding: 20px 20px 20px 150px;
	}

}