/* ボディ */
body
{ margin: 0 ;    /* スペース */
 padding: 0 ;   /* 余白 */
 font-size: 15px ;  /* 文字サイズ */
 line-height: 1.618 ; /* 行の高さ */}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ /* ボディ */
 body
 {  font-size: 13px ; /* 文字サイズ */ }}
/* ヘッダー */
.header
{ border-bottom: ;  /* 枠線 */}

/* ロゴ画像 */
.logo
{ width: 200px ;  /* 横幅 */
 height: auto ;  /* 高さ */}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ /* ロゴ画像 */
 .logo
 {width: 150px ;  /* 横幅 */ }}

h1


h2
{ background-color: #e8e8e8; color: black; padding: 0.5px 
}

h3
{ background-color: #e8e8e8; color: black; padding: 0.2px }

/* フッター */
.footer
{ border-top: 3px solid #888 ;  /* 枠線 */
 text-align: center ; /* テキスト、画像の真ん中寄せ */
 margin-top: 0.1em ; /* 他のブロックとのスペース */
 padding: 0.1em  ; /* 上下の余白 */
 background: #e8e8e8 ;
}

.pepe {text-align: center ; /* テキスト、画像の真ん中寄せ */
margin-top: 0em ;  /* 他のブロックとのスペース */
 padding: 0em 0 ; /* 上下の余白 */
}
/* 画像pepe-1 */
.pepe-1 {  position: relative;/*相対配置*/
text-align: center ; /* テキスト、画像の真ん中寄せ */
margin-top: 1em ;  /* 他のブロックとのスペース */
 padding: 0em 0 ; /* 上下の余白 */
  }
.pepe-1 p {position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
 font-weight: bold; /*太字に*/
  font-size: 2em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .pepe-1 p
 {position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-size: 1em;/*サイズ1倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
 }
}
.pepe-1img {
  width: 100%;
  }
/* 画像pepe-1終わり */
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.pepe-2
{ width: 800

px ;
 margin: 0 auto ; /* 左右に[auto]を指定することで、真ん中に寄る */
 padding: 0 ;  /* 上下左右の余白を0にしておく */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .pepe-2
 {  width: auto ;
  padding: 0 10px ;  /* 左右の余白 */
 }
}
/* 画像pepe-2 */
.pepe-2 {  position: relative;/*相対配置*/
text-align: center ; /* テキスト、画像の真ん中寄せ */
margin-top: 0em ;  /* 他のブロックとのスペース */
 padding: 0em 0 ; /* 上下の余白 */
  }
.pepe-2 p {position: absolute;/*絶対配置*/
top: 70%;
  left: 70%;
 -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
 
 
font-size      : 20pt; 
font-family: "Monotype Corsiva",serif;
  color          : #ffffff;  
 
  }
  
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .pepe-2 p {position: absolute;/*絶対配置*/
top: 70%;
  left: 70%;
 -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  padding:0; font-size      : 10pt; 
    }
}
.pepe-2 img {
  width: 100%;
  }


/* 画像pepe-2終わり */
/* ▼表示領域が480px以上の場合 */
@media screen and (min-width: 480px) { 
   img.miniimage { display: none; }  /* miniを非表示 */
  {.pepe img.bigimage  { display: block; } /* bigを表示 */ }}
/* ▼表示領域が480px未満の場合 */
@media screen and (max-width: 479px) {{.pepe
   img.miniimage { display: block; } /* miniを表示 */
   }img.bigimage  { display: none; }  /* bigを非表示 */ } p.resizeimage img { width: 100%; }

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{ width: 800px ;
 margin: 0 auto ; /* 左右に[auto]を指定することで、真ん中に寄る */
 padding: 0 ;  /* 上下左右の余白を0にしておく */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .wrapper
 {  width: auto ;
  padding: 0 0px ;  /* 左右の余白 */
 }
}
.shokai
{ width: auto ;
 padding: 20px ;  /* 上下左右に10pxの余白 */
 border: 1px solid rgba(0,0,0,.1) ;  /* 枠線 */ } 
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{ width: 340px ;
 padding: 20px ;  /* 上下左右に10pxの余白 */
 border: 1px solid rgba(0,0,0,.1) ;  /* 枠線 */ } 

.side { width: 750px ;
 padding: 20px ;  /* 上下左右に10pxの余白 */
 border: 1px solid rgba(0,0,0,.1) ;  /* 枠線 */ 
}   

.side-1
{ position: relative;/*相対配置*/
width: 255px  ;
padding:0px 0px 0
px 0px;  /* 上下左右にの余白 */
 text-align: center ; /* テキスト、画像の真ん中寄せ */
 background: #e8e8e8 ;  /* 背景色(確認用) */
}

.side-2
 { width: 17px ;
 padding: 0px 0px 8px 0px;  /* 上下左右に10pxの余白 */
 }   

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .main
 { width: auto ;
  padding: 10 ;  /* 余白 */
  border: 1px solid rgba(0,0,0,.1) ; /* 枠線 */
 }
.shokai
 {  width: auto ;
  padding: 10 ;  /* 余白 */
  border: 1px solid rgba(0,0,0,.1) ; /* 枠線 */
 }
.side
 {  width: auto ;
  padding: 10 ;  /* 余白 */
  border: 1px solid rgba(0,0,0,.1) ; /* 枠線 */
 }
.side-1
 {  width: auto ;
padding: 10 ;  /* 余白 */
  border: none ;  /* 枠線 */
 }

.side-2 
 {  width: auto ;
padding: 10 ;  /* 余白 */
  border: none ;  /* 枠線 */
 } 
}  

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{ float: left
}
.side
{
 float: left ;  /*に寄せる */
}
.side-1
{
 float: left ;  /* に寄せる */
}
.side-2
{
 float: left ;  /* に寄せる */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .main
 { float: none ; /* floatを無効する */
 }
 .shokai
 { float: none ; /* floatを無効する */
 }
.side
 { float: none ; /* floatを無効する */
 }
.side-1
 { float: none ; /* floatを無効する */
 }

.side-2
 { float: none ; /* floatを無効する */
 }
}
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
 overflow: hidden ; /* floatを解除する */
margin-bottom:2em ;  /* 他のブロックとのスペース */
}

.side-1 p {position: absolute;/*絶対配置*/
top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background: skyblue;/*背景色*/
  font-size: 15px;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
  }
  }
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{ .side-1 p
 {position: absolute;/*絶対配置*/
  top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background: skyblue;/*背景色*/
  font-size: 15px;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
  }
}
.side-1 img {
  width: 

/*** テーブルデザイン ***/
/*テーブル全体*/
table.table01 {
	width:100%;
	border-right:#3EB1C6 solid 1px;
	border-collapse: collapse;
}
table.table01 thead th {
	background:#3EB1C6;
	color:#FFF;
	padding:10px 15px;
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
table.table01 thead th:last-child {
	border-right:#3EB1C6 solid 1px;
}
table.table01 tbody th {
	background:#3EB1C6;
	color:#FFF;
	padding:10px 15px;
	border-bottom:#FFF solid 1px;
	vertical-align:top;
}
table.table01 tbody tr:last-child th {
	border-bottom:#3EB1C6 solid 1px;
}
table.table01 tbody td {
	background:#FFF;
	padding:10px 15px;
	border-left:#3EB1C6 solid 1px;
	border-bottom:#3EB1C6 solid 1px;
	vertical-align:top;
}

@media screen and (max-width: 640px) {
table.table01 thead {
	display:none;
}
table.table01 tbody th {
	display:block;
}
table.table01 tbody td {
	display:block;
}
table.table01 tbody td::before {
	content: attr(label);
	float: left;
	clear:both;
	font-weight:bold;
}
table.table01 tbody td p {
	padding-left:6em;
}
}