@charset "utf-8";
/* CSS Document */




@media screen and (min-width:1200px) {
	
	.tabtabele {
	width:98%;
	margin:0.5em;
	padding-top:2em;
	padding-bottom:2em;
	text-align:center;
  position: relative; 
  overflow: hidden; 
}


.tabtabele tr {
  position: relative;
  left: 50%; 
  float: left;
}
.tabtabele tr td{
	width:30%;
	margin:5px;
	 display: inline-block;
	 background-color:#FFF;
	 text-align:center;
	 position: relative;
  left: -47%; 
  float: left;
  list-style: none; 
   border-radius:15px;
}
.tabtabele tr td img{
	width:85%;
	margin:5px;
	margin-top:1em;
	/*border:solid 1px #999999;*/}
	
	.tabtabele tr td p{
		margin:10px;
  text-align:center;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:60%;
  color:#606060;}
  
#tabcontrol{
	text-align:left;}

#tabcontrol img{
	width:180px;
	display:inline-block;}
	
	
 }
 
 
@media screen and (min-width:900px) and (max-width:1200px) {


.tabtabele {
	width:98%;
	margin:0.5em;
	padding-top:2em;
	padding-bottom:2em;
	text-align:center;
  position: relative; 
  overflow: hidden; 
}

.tabtabele tr {
  position: relative;
  left: 50%; 
  float: left;
}
.tabtabele tr td{
	width:30%;
	margin:5px;
	 display: inline-block;
	 background-color:#FFF;
	 text-align:center;
	 position: relative;
  left: -47%; 
  float: left;
  list-style: none; 
   border-radius:15px;
}
.tabtabele tr td img{
	width:85%;
	margin:5px;
	margin-top:1em;
	/*border:solid 1px #999999;*/}
	
	.tabtabele tr td p{
		margin:10px;
  text-align:center;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:60%;
  color:#606060;}
  
#tabcontrol{
	text-align:left;}

#tabcontrol img{
	width:180px;
	display:inline-block;}



}



/* 1つ目*/
#tabcontrol a:nth-child(1) { background:#e5abbe; border: 2px solid #e5abbe; padding:10px;}/* 1つ目のタブの色 */
 #tabbody div:nth-child(1) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #e5abbe; padding:10px;}/* 1つ目中身の配色 */
 
 
 /* 2つ目*/ 
#tabcontrol a:nth-child(2){ background:#fcc800; border: 2px solid #fcc800; padding:10px;}/* 2つ目のタブの色 */
#tabbody div:nth-child(2) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #fcc800; padding:10px; }/* 2つ目の中身用の配色 */



/* 3つ目*/ 
#tabcontrol a:nth-child(3){ background:#ed6d46; border: 2px solid #ed6d46; padding:10px;}/* 3つ目のタブの色 */
#tabbody div:nth-child(3) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #ed6d46; padding:10px; }/* 3つ目の中身用の配色 */

/* 4つ目*/ 
#tabcontrol a:nth-child(4){ background:#192f60; border: 2px solid #192f60; padding:10px;}/* 4つ目のタブの色 */
#tabbody div:nth-child(4) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #192f60; padding:10px; }/* 4つ目の中身用の配色 */


/* 5つ目*/ 
#tabcontrol a:nth-child(5){ background:#a4a4a4; border: 2px solid #a4a4a4; padding:10px;}/* 5つ目のタブの色 */
#tabbody div:nth-child(5) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #a4a4a4; padding:10px; }/* 5つ目の中身用の配色 */

/* 6つ目*/ 
#tabcontrol a:nth-child(6){ background:#38b48b; border: 2px solid #38b48b; padding:10px;}/* 6つ目のタブの色 */
#tabbody div:nth-child(6) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #38b48b; padding:10px; }/* 6つ目の中身用の配色 */



@media screen and (max-width:900px) {


.tabtabele {
	width:98%;
	margin:0.5em;
	padding-top:1em;
	padding-bottom:1em;
	text-align:center;
  position: relative; 
  overflow: hidden; 
}

.tabtabele tr {
  position: relative;
  left: 50%; 
  float: left;
}
.tabtabele tr td{
	width:45%;
	margin:5px;
	 display: inline-block;
	 background-color:#FFF;
	 text-align:center;
	 position: relative;
  left: -48%; 
  float: left;
  list-style: none; 
   border-radius:15px;
}
.tabtabele tr td img{
	width:85%;
	margin:5px;
/*border:solid 1px #999999;*/}
	
	.tabtabele tr td p{
		margin:10px;
  text-align:center;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:60%;
  color:#606060;}
  
#tabcontrol{
	text-align:left;}

#tabcontrol img{
	width:100px;
	display:inline-block;}

/* 1つ目*/
#tabcontrol a:nth-child(1) { background:#e5abbe; border: 2px solid #e5abbe; padding: 20px 0px; margin:auto auto 3px; }/* 1つ目のタブの色 */
 #tabbody div:nth-child(1) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #e5abbe; padding:10px;}/* 1つ目中身の配色 */
 
 
 /* 2つ目*/ 
#tabcontrol a:nth-child(2){ background:#fcc800; border: 2px solid #fcc800; padding: 20px 0px; margin:auto auto 5px;}/* 2つ目のタブの色 */
#tabbody div:nth-child(2) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #fcc800; padding:10px; }/* 2つ目の中身用の配色 */

/* 3つ目*/ 
#tabcontrol a:nth-child(3){ background:#ed6d46; border: 2px solid #ed6d46; padding: 20px 0px; margin:auto auto 5px;}/* 3つ目のタブの色 */
#tabbody div:nth-child(3) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #ed6d46; padding:10px; }/* 3つ目の中身用の配色 */

/* 4つ目*/ 
#tabcontrol a:nth-child(4){ background:#192f60; border: 2px solid #192f60; padding: 20px 0px; margin:auto auto 5px;}/* 4つ目のタブの色 */
#tabbody div:nth-child(4) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #192f60; padding:10px; }/* 4つ目の中身用の配色 */


/* 5つ目*/ 
#tabcontrol a:nth-child(5){ background:#a4a4a4; border: 2px solid #a4a4a4; padding: 20px 0px; margin:auto auto 5px;}/* 5つ目のタブの色 */
#tabbody div:nth-child(5) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #a4a4a4; padding:10px; }/* 5つ目の中身用の配色 */


/* 6つ目*/ 
#tabcontrol a:nth-child(6){ background:#38b48b; border: 2px solid #38b48b; padding: 20px 0px; margin:auto auto 5px;}/* 6つ目のタブの色 */
#tabbody div:nth-child(6) { background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border: 2px solid #38b48b; padding:10px; }/* 6つ目の中身用の配色 */


}




/* ▼タブの[a]タグの設定 */

#tabcontrol a {
	
   display: inline-block;  /* インラインブロック化 */
   text-decoration: none;/* URLの下線を削除 */
   color:#FFF;
   position: relative;   /* JavaScriptでz-indexを調整するために必要 */
   border-radius:10px;
   width:150px;
   text-align:center;
   margin:5px;
   
}

/* ▼タブにマウスポインタが載った際(任意) */

#tabcontrol a:hover {
			opacity: 0.5 ;
		}

/* ▼タブにマウスポインタが載った際(任意) */
   #tabcontrol img:hover {
			opacity: 0.5 ;
		}