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


/*●テーブルをかこっている枠や、自由文のところの●CSS*/
 

@media screen and (max-width:701px) {
/*701以下の画面用*/

/*リボンがついてるとこの外枠*/
	.cp_card {
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/*リボン*/
.cp_ribbon10 {
	position: absolute;
	top: -20px;
	left: 60px;
	padding: 10px 80px ;
	letter-spacing: 0.1px;
	color: #ffffff;
	border-radius: 100vh;
}

/*▼自由文のところのCSS*/


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

/*▼自由文のところのテーブルのtd*/
.tabtabelemg tr td{
	width:90%;
	margin:5px;
	padding:5px;
	
	 display: inline-block;
	 background-color:#FFF;
	 text-align:center;
	 position: relative;
  list-style: none; 
}

/*▼自由文のところのテーブルのP*/
	.tabtabelemg tr td p{
		margin:10px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:100%;
  color:#606060;}
  

/*▼自由文のところのタブ*/
#tabcontrolmg{
	text-align:left;}

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

}

@media screen and (min-width:701px) and (max-width:1200px) {
/*701～1200の画面用*/

.cp_card {
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.cp_ribbon10 {
	position: absolute;
	top: -30px;
	left: 60px;
	padding: 20px 100px ;
	letter-spacing: 0.1px;
	color: #ffffff;
	border-radius: 100vh;
}

/*▼自由文のところのCSS*/
.tabtabelemg {
	width:98%;
	margin:0.5em;
	padding-top:2em;
	padding-bottom:2em;
	text-align:center;
  position: relative; 
  overflow: hidden; 
}

/*▼自由文のところのテーブルのtd*/
.tabtabelemg tr td{
	width:95%;
	margin:5px;
	 display: inline-block;
	 background-color:#FFF;
	 text-align:center;
}

	.tabtabelemg tr td p{
		margin:10px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:100%;
  color:#606060;}
  
#tabcontrolmg{
	text-align:left;}

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



}


@media screen and (min-width:1200px) {
/*1200～の画面用*/

.cp_card {
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.cp_ribbon10 {
	position: absolute;
	top: -30px;
	left:200px;
	padding: 20px 100px ;
	letter-spacing: 0.1px;
	color: #ffffff;
	border-radius: 100vh;
}	 

/*▼自由文のところのCSS*/
.tabtabelemg {
	width:98%;
	margin:0.5em;
	padding-top:2em;
	padding-bottom:2em;
	text-align:center;
  position: relative; 
  overflow: hidden; 
}

.tabtabelemg tr {
  position: relative;
    float: left;
  left: 4%; 

}
.tabtabelemg tr td{
	width:30%;
	height:300px;
	margin:5px;
	 display: block;
	 background-color:#FFF;
	 text-align:center;
	   float: left;
	  left: -50%; 
  list-style: none; 
}


	.tabtabelemg tr td p{
		margin:15px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:100%;
  color:#606060;}
  
#tabcontrolmg{
	text-align:left;}

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


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

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

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

#tabcontrolmg a:hover {
			opacity: 0.5 ;
		}

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

/* ▼タブの配色 */

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



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

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


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


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


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



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

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


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


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

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


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


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


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


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