@charset "UTF-8";
:link,:visited {text-decoration: none;}
html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td {margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}
table {border-spacing: 0;}
fieldset,img,abbr,acronym {border: 0;} 
ol,ul {list-style: none;}
caption,th {text-align: left;}
q:before,q:after {content: '';}
a {text-decoration: underline;outline: none;}
hr {border: 0;height: 1px;background-color: #000; color: #000;}
a img,:link img,:visited img {border: none;}
address {font-style: normal;display: inline;}
/* Utilities -------------------------------------------------------------------------------------------- */
 #top-content-inner:after, #content:after, {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}
/* Basic Layout ------------------------------------------------------------------------------------- */
body { color: #000; }
/* Content ---------------------------------------------------------------- */
a:link, a:visited {text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, fieldset, ul, ol, dl { color: #000; }
blockquote{ margin-left: 30px; }
ol { list-style: decimal outside; }
ul { list-style: disc outside; }
.dscrpttext {display: none;}
@media print {
    * {
        position: static ! important;
        overflow: visible ! important;
    }
}
/*==========================================================================
=========== Common Block ===================================================
==========================================================================*/
body {
	color: #000;
	font: normal 18px "Arial", "Roboto", “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3″, 
   “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
   line-height: 1.2em;
}

h2 {
	padding: 50px 0px 0px 0px;
	width:90%;
}

.top_image, #siyourei{ padding-top: 2px;}
.top_image img, #siyourei img {
	display: block;
	width: 100%;
}

#siyourei ul { list-style: none;}
#siyourei ul li { padding-bottom:20px;}

div.panel{
  	padding-top: 20px;
  	text-align: center;
  	overflow : hidden;
}
div.panel_middle p{
	text-align: center;
	padding-top: 60px;
}

@media screen and (min-width:801px) {
	.top_image {
		width: 1000px;
		margin: 0 auto;
	}
	#siyourei {
		width: 800px;
		margin: 0 auto;
	}
	div.text {
		padding-left:20px;
		padding-top:10px;
		padding-bottom:30px;
		line-height: 1.5em;
		font-size:20px;
		width: 88%;
	}

	p {
		padding: 10px 0px 20px 10px;
   		font-size:13px;
		line-height: 1.5em;
	}
	h1 {
		padding: 20px 0px 20px 10px;
		width:50%;
	}
	
	.top_image a img, #siyourei ul li a img {transition: 0.3s;}
	.top_image a img:hover, #siyourei ul li a img:hover {opacity: 0.5;}
	
	div.panel_middle {
		background-repeat: no-repeat;
  		background-image: url("../images/monitor.jpg");
  		background-position:100px,0px;
  		background-size: 800px;
  		width: 1000px;
  		height:698px;
	}
}

@media screen and (min-width: 481px) and (max-width: 800px) {
	.top_image {
		width: 99.5%;
		margin: 0 auto;
	}
	#siyourei {
		width: 99.5%;
		margin: 0 auto;
	}
	div.text {
		padding-left:20px;
		padding-bottom:30px;
		font-size:16px;
		width: 95%;
	}
	p {
		padding-left:20px;
		padding-bottom:30px;
		font-size:15px;
		width: 95%;
	}
	
  	div.panel_middle {
		position: relative;
		width: 100%
	}
	div.panel_middle p {
		text-align: center;
		padding-top: 40px;
	}
	.panel_middle iframe { width: 90% !important;}
	
}

@media screen and (max-width:480px) {
	.top_image {
		width: 99.5%;
		margin: 0 auto;
	}
	h1 {
		width:300px;
	 	text-align: center;
	}
	div.text {
		padding-left:10px;
		padding-bottom:30px;
		font-size:13px;
		width: 95%;
	}
	p {
		padding-left:10px;
		padding-bottom:30px;
		font-size:12px;
		width: 95%;
	}
	
	div.panel_middle {
		position: relative;
		width: 100%
	}
	div.panel_middle p {
		text-align: center;
		padding-top: 20px;
	}
	.panel_middle iframe {
		width: 100%; !important;
		height: 100%; !important;}
}