/* 全般の設定 */


html{
 font-size: 62.5%  /*初期値16pxの62.5%でルートが10px*/
 } 
 	@media screen and (max-width: 479px) {
	/* 479px以下用（スマートフォン用）の記述 */
	html{font-size: 50%　} 
}
	@media screen and (max-width: 767px) {
	/* 767px以下用（タブレット／スマートフォン用）の記述 */
	html{	font-size: 60%  }    
}
	@media screen and (max-width: 979px) { 
	/* 979px以下用（タブレット用）の記述 */	
	html{font-size: 62.5%  }    
}




*{
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
margin: 0px;
padding: 0px;
}

* a{
text-decoration: underline;
color: #0000ff;
}

* a:hover{
text-decoration: underline;
color: #0000ff;
font-weight:bold;
}


/* 各項の設定 */

#container {
  max-width: 800px; /* 最大横幅 */
  width: 100%;
  margin: 20 auto;
  padding: 30px;
  background: #fff;
  border-style : none;
  border-width : 8px;
  border-color: #C0C0C0;
  border-radius: 5px;
  }
	@media screen and (max-width: 767px) {
	#container {
	  margin: 0 auto;
	  padding: 0px;
	  background: #fff;
	  border-style : none;}
}
	@media screen and (max-width: 479px) {
	#container {
	  margin: 0 auto;
	  padding: 0px;
	  background: #fff;
	  border-style : none;}
}

#header{
height: 30px;
margin: 0px;
padding: 5px;
text-align: left;
background-color: #333333;
font-size: 18px;
font-size: 1.8rem;
color: #ffffff;
}

#top_title{
max-width: 750px;
height: auto;
margin: 0px;
padding: 5px;
font-size: 22px;
font-size: 2.2rem;
}
	@media screen and (max-width: 767px) {
	#top_title{margin: 0px;
	padding: 5px;
	font-size: 20px;
	font-size: 2rem;
	font-weight: normal;}  
}
	@media screen and (max-width: 479px) {
	#top_title{margin: 0px;
	padding: 5px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;} 
}


#contents{
max-width: 800px;
height: auto;
margin: 0px;
padding: 5px;
font-size: 18px;
font-size: 1.8rem;
}
	@media screen and (max-width: 479px) {
	#contents{margin: 0px;
	padding: 5px;
	font-size: 17px;
	font-size: 1.7rem;} 
}

#footer{
height: 25px;
height: 2.5rem;
margin: 3.5rem 0rem 0rem 0rem;
padding: 1.5rem;
background-color: #333333;
font-size: 10px;
font-size: 1rem;
color: #ffffff;
}

#footer a{
font-size: 8px;
font-size: 0.8rem;
color: #ffffff;
text-decoration: none;
}

#footer a:hover{
font-size: 10px;
font-size: 1rem;
color: #cccccc;
text-decoration: none;
}


/* 表示の詳細設定 */

/* imgを<p class="imgbox">で囲うことでデバイスによってリサイズします */
p.imgbox img{
width: 100%;
}

p.txtbox{
text-align: left;
margin: 0px 10px;
padding: 0px;
}

/* <p class="imgprof">　画像の左寄せと、デバイスによってのセンター揃え指定 */
p.imgprof img{
max-width: 200px;
max-width: 20rem;
margin: 2rem 3rem 3rem 5rem;
float: left;
}
	@media screen and (max-width: 600px) {
	p.imgprof img{
	max-width: 150px;
	max-width: 15rem;
	margin: 5px;
	float: left; }
}

/* <p class="imgright">　画像の右寄せと、デバイスによってのセンター揃え指定 */
p.imgright img{
max-width: 220px;
max-width: 22rem;
margin: 20px 30px 30px 20px;
float: right;
}
	@media screen and (max-width: 600px) {
	p.imgright img{
	max-width: 220px;
	max-width: 22rem;
	margin: 0px;
	float: none; }
}

/* <p class="imgleft">　画像の左寄せと、デバイスによってのセンター揃え指定 */
p.imgleft img{
max-width: 200px;
max-width: 20rem;
margin: 30px;
float: left;
}
	@media screen and (max-width: 600px) {
	p.imgleft img{
	max-width: 200px;
	max-width: 20rem;
	margin: 0px;
	float: none; }
}

/* <p class="imgcenter">　画像の最大サイズ指定 */
p.imgcenter img{
max-width: 500px;
max-width: 50rem;

}
	@media screen and (max-width: 600px) {
	p.imgcenter img{
	width: 100%; }
}

/* <p class="yimgcenter">　矢印画像リサイズ指定 */
p.yimgcenter img{
max-width: 500px;
max-width: 50rem;
}
	@media screen and (max-width: 400px) {
	p.yimgcenter img{
	max-width: 70px;
	max-width: 7rem;
	margin: 0px;}
}

ul {
text-align: left;
margin: 0px 20px;
padding: 5px;
}

/* textlinkの設定 */

p.mlink{
	text-align: right;
}
	@media screen and (max-width: 767px) {
	p.mlink{
	text-align: right;
	font-weight: bold;}
}
	@media screen and (max-width: 479px) {
	p.mlink{
	text-align: center;
	font-weight: bold;}
}

.none{
display: inline;
}
	@media screen and (max-width: 479px) {
	.none{
	display: none;}
}

h1{
	margin: 0.8rem 0rem 0rem 2rem;
	padding: 0.3rem 0.5rem 0rem 0.5rem;
	background:url(img/bg_body.gif);
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	color: #000;
	text-align: left;
}
	@media screen and (max-width: 479px) {
	h1{	padding: 0rem ;
		padding: 0rem ;
		background:url(img/bg_body.gif);
		font-size: 17px;
		font-size: 1.7rem;
		font-weight: bold;
		color: #000;
		ttext-align: left;}
}

h2.one{
	margin: 0rem;
	padding: 0rem 0rem 0.3rem 3rem;
	background:url(img/cccc.jpg) no-repeat;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	color: red;
	text-align: left;
}
	@media screen and (max-width: 479px) {
	h2.one{	padding: 0rem ;
		padding: 0rem ;
		border-bottom: none;
		background:none;
		font-size: 17px;
		font-size: 1.7rem;
		font-weight: bold;
		color: red;
		text-align: left;}
}

h2.two{
	margin: 2rem 0rem 2rem 0rem;
	padding: 0.6rem 0rem 0.3rem 3rem;
	border-bottom: 0.1rem dotted #008B8B;
	background:url(img/cccc.jpg) no-repeat;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	color: red;
	text-align: left;
}
	@media screen and (max-width: 479px) {
	h2.two{	padding: 0rem ;
		padding: 0rem ;
		border-bottom: 0.2rem dotted #fff;
		background:url(img/bg_body.gif);
		font-size: 17px;
		font-size: 1.7rem;
		font-weight: bold;
		color: #000;
		text-align: left;}
}

hr.s1 {
	margin: 10px 0px 5px 0px;
	border: none;
	height: 10px;
	background:url(img/bg_body.gif) ;
	border-radius: 5px;
}
	@media screen and (max-width: 479px) {
	hr.s1{	display:none;}
}

hr.s2 {
	margin: 0rem 0rem 0rem 0rem;
	border: none;
	height: 10px;
	background:url(img/bg_body.gif);
	border-radius: 5px;
}
	@media screen and (max-width: 479px) {
	/* 479px以下用（スマートフォン用）の記述 */
	hr.s2{	display:none;}
}


/* gazo:hover 画像のサイズとhaver設定 */
	.gazo{
		max-width: 70%;
}
	.gazo:hover{
		position:relative;
		top:3px;
		left:3px;
}

/* 文字サイズの変更設定<span class="b1"></span> */

.b1 {
font-size: 23px;
font-size: 2.3rem;
}
	@media screen and (max-width: 479px) {
	.b1{
	font-size: 17px;
	font-size: 1.7rem;} 
}

.b2 {
font-size: 25px;
font-size: 2.5rem;
}
	@media screen and (max-width: 479px) {
	.b2{
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: bold;
	color: red;} 
}

.b3 {
font-size: 30px;
font-size: 3rem;
}
	@media screen and (max-width: 479px) {
	.b3{
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: bold;
	color: red;
	background-color:#ffff00} 
}


/* チェックボックスのポインタを指→に変更します */
label, input[type='checkbox'] {
    cursor: pointer;
}

/* ラジオボタンのポインタを指→に変更します */
label, input[type='radio'] {
    cursor: pointer;
}

/* ボタンのポインタを指→に変更します */
label, input[type='button'] {
    cursor: pointer;
}

/* テーブルのレスポンシブ設定タイプ１ */
.col-head-type1 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type1 th,
.col-head-type1 td {
  border: 1px solid #dbe1e8;  
  padding: 8px;
}
 
.col-head-type1 th {
  background: #f9fafc;
  text-align: left;
  width: 150px;
}
 
@media only screen and (max-width: 800px) {
  .col-head-type1 tr,
  .col-head-type1 th,
  .col-head-type1 td {
    display: block;
    width: auto;
  }
  
  .col-head-type1 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type1 th,
  .col-head-type1 td {
    border-top: none;
  }
}

/* テーブルのレスポンシブ設定タイプ２ */
.col-head-type2 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type2 tr {
  border-bottom: 0px solid #dbe1e8;  
}
.col-head-type2 tr:first-child {
  border-top: 0px solid #dbe1e8;  
}
 
.col-head-type2 th,
.col-head-type2 td {
  padding: 5px 0;
}
 
.col-head-type2 th {
  text-align: left;
  width: 120px;
}
 
.col-head-type2 input[type='text'],
.col-head-type2 textarea {
  width: 50%;
}
.col-head-type2 textarea {
  height: 100px;
}
 
@media only screen and (max-width: 800px) {
  .col-head-type2 tr,
  .col-head-type2 th,
  .col-head-type2 td {
    display: block;
    width: auto;
  }
  
  .col-head-type2 th {
    padding-bottom: 0;
  }
  
  .col-head-type2 input[type='text'],
  .col-head-type2 textarea {
    width: 100%;
  }
}